wehub-resource-sync
153 lines
3.3 KiB
CSS
153 lines
3.3 KiB
CSS
/* Base accordion styles */
|
|
.accordion {
|
|
@apply w-full;
|
|
|
|
/* Performance optimization - contain layout changes */
|
|
contain: layout style;
|
|
}
|
|
|
|
/* Accordion elements */
|
|
.accordion__body {
|
|
@apply text-sm;
|
|
}
|
|
|
|
.accordion__body-inner {
|
|
@apply px-4 pt-0 pb-4 text-muted;
|
|
}
|
|
|
|
.accordion__heading {
|
|
@apply flex;
|
|
}
|
|
|
|
.accordion__indicator {
|
|
@apply ml-auto size-4 shrink-0 text-muted;
|
|
|
|
/**
|
|
* Transitions
|
|
*/
|
|
@apply transition duration-250 motion-reduce:transition-none;
|
|
|
|
/* Expanded state for indicator rotation */
|
|
&[data-expanded="true"] {
|
|
@apply -rotate-180;
|
|
}
|
|
}
|
|
|
|
/* Accordion Item - Separator styles */
|
|
.accordion__item {
|
|
@apply relative border-none;
|
|
}
|
|
|
|
.accordion__item::after {
|
|
content: "";
|
|
@apply absolute bottom-0 left-0 h-px w-full rounded-xs bg-separator;
|
|
}
|
|
|
|
.accordion__item:last-child::after {
|
|
content: none;
|
|
}
|
|
|
|
/* Hide separator when hideSeparator prop is set */
|
|
.accordion__item[data-hide-separator="true"]::after {
|
|
display: none;
|
|
}
|
|
/* ------------------------------------ */
|
|
|
|
.accordion__trigger {
|
|
cursor: var(--cursor-interactive);
|
|
|
|
/* Base Styles */
|
|
@apply flex flex-1 items-center justify-between px-4 py-4 text-left text-sm font-medium no-highlight;
|
|
|
|
/**
|
|
* Transitions
|
|
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
*/
|
|
transition:
|
|
opacity 150ms var(--ease-out),
|
|
box-shadow 150ms var(--ease-out);
|
|
@apply motion-reduce:transition-none;
|
|
|
|
/* Hover state */
|
|
@media (hover: hover) {
|
|
&:hover:not([aria-expanded="true"]),
|
|
&[data-hovered="true"]:not([aria-expanded="true"]) {
|
|
background-color: color-mix(in oklab, var(--foreground) 3%, transparent 90%);
|
|
}
|
|
}
|
|
|
|
/* Pressed state */
|
|
&[data-pressed="true"]:not([aria-expanded="true"]) {
|
|
}
|
|
|
|
/* Focus state */
|
|
&:focus-visible:not(:focus),
|
|
&[data-focus-visible="true"] {
|
|
@apply status-focused;
|
|
}
|
|
|
|
/* Disabled State */
|
|
&:disabled,
|
|
&[aria-disabled="true"] {
|
|
@apply status-disabled;
|
|
}
|
|
}
|
|
|
|
.accordion__panel {
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* Surface variant */
|
|
.accordion--surface {
|
|
@apply bg-surface;
|
|
border-radius: min(32px, var(--radius-3xl));
|
|
|
|
.accordion__trigger {
|
|
@media (hover: hover) {
|
|
&:hover:not([aria-expanded="true"]),
|
|
&[data-hovered="true"]:not([aria-expanded="true"]) {
|
|
@apply bg-default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.accordion__item::after {
|
|
@apply bg-surface-foreground/6;
|
|
}
|
|
}
|
|
|
|
.accordion--surface .accordion__item {
|
|
/* Surface variant separator styling */
|
|
&::after {
|
|
@apply left-[3%] w-[94%];
|
|
}
|
|
|
|
/* Special rounding for first and last items in surface variant */
|
|
&:first-child [data-slot="accordion-trigger"] {
|
|
border-top-left-radius: min(32px, var(--radius-3xl));
|
|
border-top-right-radius: min(32px, var(--radius-3xl));
|
|
}
|
|
|
|
&:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"]))
|
|
[data-slot="accordion-trigger"] {
|
|
border-bottom-left-radius: min(32px, var(--radius-3xl));
|
|
border-bottom-right-radius: min(32px, var(--radius-3xl));
|
|
}
|
|
}
|