wehub-resource-sync
117 lines
2.7 KiB
CSS
117 lines
2.7 KiB
CSS
/* ==========================================================================
|
|
Base list-box item styles
|
|
========================================================================== */
|
|
|
|
.list-box-item {
|
|
@apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight;
|
|
|
|
/**
|
|
* Transitions
|
|
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
*/
|
|
transition:
|
|
transform 250ms var(--ease-out-quart),
|
|
box-shadow 150ms var(--ease-out);
|
|
|
|
@apply motion-reduce:transition-none;
|
|
|
|
/* Cursor */
|
|
cursor: var(--cursor-interactive);
|
|
|
|
[data-slot="label"] {
|
|
@apply pointer-events-none w-fit select-none;
|
|
}
|
|
|
|
[data-slot="description"] {
|
|
@apply pointer-events-none text-wrap select-none;
|
|
}
|
|
|
|
/* Add inline-end padding when indicator is present */
|
|
&:has(.list-box-item__indicator) {
|
|
@apply pe-7;
|
|
}
|
|
|
|
/* Focus visible state (keyboard focus only) */
|
|
&:focus-visible:not(:focus),
|
|
&[data-focus-visible="true"] {
|
|
@apply status-focused;
|
|
}
|
|
|
|
/* Focus state */
|
|
&:focus,
|
|
&[data-focus="true"] {
|
|
}
|
|
|
|
/* Pressed state */
|
|
&:active,
|
|
&[data-pressed="true"] {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* Hover state */
|
|
@media (hover: hover) {
|
|
&:hover,
|
|
&[data-hovered="true"] {
|
|
@apply bg-default;
|
|
}
|
|
}
|
|
|
|
/* Selected state */
|
|
&[aria-selected="true"],
|
|
&[data-selected="true"] {
|
|
}
|
|
|
|
/* Disabled state */
|
|
&[data-disabled="true"] {
|
|
@apply status-disabled;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
List-box item indicator
|
|
========================================================================== */
|
|
|
|
.list-box-item__indicator {
|
|
@apply absolute top-1/2 end-2 flex size-4 shrink-0 -translate-y-1/2 items-center justify-center text-default-foreground;
|
|
|
|
/**
|
|
* Transitions
|
|
*/
|
|
@apply transition duration-250 motion-reduce:transition-none;
|
|
|
|
/* Checkmark SVG indicator */
|
|
[data-slot="list-box-item-indicator--checkmark"] {
|
|
@apply size-2.5;
|
|
|
|
/**
|
|
* Transitions
|
|
*/
|
|
@apply transition-all duration-300 motion-reduce:transition-none;
|
|
}
|
|
|
|
.list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"],
|
|
.list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] {
|
|
/**
|
|
* Transitions
|
|
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
*/
|
|
transition: stroke-dashoffset 250ms linear;
|
|
@apply motion-reduce:transition-none;
|
|
}
|
|
}
|
|
|
|
/* Default variant */
|
|
.list-box-item--default {
|
|
}
|
|
|
|
/* Danger variant */
|
|
.list-box-item--danger {
|
|
.list-box-item__indicator {
|
|
@apply text-danger;
|
|
}
|
|
|
|
[data-slot="label"] {
|
|
@apply text-danger;
|
|
}
|
|
}
|