wehub-resource-sync
64 lines
1.1 KiB
CSS
64 lines
1.1 KiB
CSS
/* Base disclosure styles */
|
|
.disclosure {
|
|
@apply relative;
|
|
}
|
|
|
|
.accordion__heading {
|
|
@apply flex;
|
|
}
|
|
|
|
.disclosure__trigger {
|
|
cursor: var(--cursor-interactive);
|
|
@apply inline-block no-highlight;
|
|
|
|
/* Focus state */
|
|
&:focus-visible:not(:focus),
|
|
&[data-focus-visible="true"] {
|
|
@apply status-focused;
|
|
}
|
|
|
|
/* Disabled state */
|
|
&:disabled,
|
|
&[aria-disabled="true"] {
|
|
@apply status-disabled;
|
|
}
|
|
}
|
|
|
|
.disclosure__indicator {
|
|
@apply ml-auto size-4 shrink-0 text-inherit;
|
|
|
|
/**
|
|
* Transitions
|
|
*/
|
|
@apply transition duration-250 motion-reduce:transition-none;
|
|
|
|
/* Expanded state for indicator rotation */
|
|
&[data-expanded="true"] {
|
|
@apply -rotate-180;
|
|
}
|
|
}
|
|
|
|
.disclosure__content {
|
|
opacity: 0;
|
|
height: var(--disclosure-panel-height);
|
|
overflow: clip;
|
|
|
|
/**
|
|
* Transitions
|
|
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
*/
|
|
transition:
|
|
height 200ms var(--ease-out-quad),
|
|
opacity 200ms var(--ease-out);
|
|
@apply motion-reduce:transition-none;
|
|
|
|
&[data-expanded="true"] {
|
|
will-change: height, opacity;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.disclosure__body {
|
|
@apply p-2;
|
|
}
|