@rhds/elements
Version:
Red Hat Design System Elements
54 lines (48 loc) • 1.78 kB
CSS
/**
* Lightdom shim for rh-accordion when JavaScript is disabled or not yet loaded
*
* NOTE: This shim prioritizes reduced CLS over perfect semantic accessibility.
* As a result, heading hierarchy and some accessibility semantics may be lost when JS is disabled,
* but content remains visible and stable.
* This is a conscious trade-off for better perceived performance.
*/
/* Show all accordion panels by default when JS is not available */
rh-accordion-panel:not(:defined) {
display: block;
overflow: hidden;
padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
background-color: var(--rh-color-surface-lightest, #ffffff);
}
/* Style accordion panel content */
rh-accordion-panel:not(:defined) > * {
display: block;
margin: unset;
color:
light-dark(
var(--rh-color-text-primary-on-light, #151515),
var(--rh-color-text-primary-on-dark, #ffffff)
);
font-size: var(--rh-font-size-body-text-md, 1rem);
}
rh-accordion-panel:not(:defined) > *:not(:first-child) {
padding-block-start: var(--rh-space-xl, 24px);
}
rh-accordion-header:not(:defined) {
display: block;
color:
light-dark(
var(--rh-color-text-primary-on-light, #151515),
var(--rh-color-text-primary-on-dark, #ffffff)
);
background-color: var(--rh-color-surface-lightest, #ffffff);
font-weight: var(--rh-font-weight-body-text-medium, 500);
font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
font-size: var(--rh-font-size-body-text-lg, 1.125rem);
padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
}
/* When scripting is enabled, hide non-expanded panels */
@media (scripting: enabled) {
rh-accordion-panel:not(:defined, [expanded]) {
display: none;
}
}