mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-31 04:01:24 +08:00
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;
|
||
|
|
}
|
||
|
|
}
|