mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 11:43:26 +08:00
37aa84df42
* Migrating Core Salesforce Skills * Updating pr comments * updat reference * Updating a skill * Migrating Datacloud skills * Migrating Industries cloud skills * Validating - skills fixing --------- Co-authored-by: Sandip Kumar Yadav <sandipkumar.yadav+sfemu@salesforce.com>
73 lines
1.5 KiB
CSS
73 lines
1.5 KiB
CSS
/**
|
|
* BASIC LWC COMPONENT TEMPLATE - CSS
|
|
*
|
|
* CSS in LWC is automatically scoped to the component.
|
|
* Use SLDS (Salesforce Lightning Design System) classes when possible.
|
|
*
|
|
* CSS Custom Properties (variables) can be exposed for theming.
|
|
*/
|
|
|
|
/* Host element styling */
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
/* Custom properties for theming */
|
|
:host {
|
|
--card-background: var(--lwc-colorBackground, #ffffff);
|
|
--card-border-radius: var(--lwc-borderRadiusMedium, 0.25rem);
|
|
--item-hover-background: var(--lwc-colorBackgroundRowHover, #f3f3f3);
|
|
}
|
|
|
|
/* List item hover effect */
|
|
.slds-item:hover {
|
|
background-color: var(--item-hover-background);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
.slds-tile {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
/* Loading state fade */
|
|
.slds-spinner {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Error state styling */
|
|
.slds-alert_error {
|
|
border-radius: var(--card-border-radius);
|
|
}
|
|
|
|
/* Empty state styling */
|
|
.empty-state {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 480px) {
|
|
.slds-tile__detail {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.slds-text-heading_small {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
/* Focus states for accessibility */
|
|
a:focus {
|
|
outline: 2px solid var(--lwc-colorBorderBrand, #1589ee);
|
|
outline-offset: 2px;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.slds-item:hover {
|
|
background-color: highlight;
|
|
}
|
|
}
|