generated from boboko/starter
41 lines
1.5 KiB
CSS
41 lines
1.5 KiB
CSS
|
|
/* ── Dropdown (Popover API) ──────────────────────────────────── */
|
|
/* The panel is a [popover] → it renders in the top layer, so its
|
|
containing block is the viewport, not the .dropdown wrapper, and
|
|
CSS alone can't tie it to the trigger (anchor positioning isn't
|
|
everywhere yet). The `dropdown` Stimulus controller measures the
|
|
trigger on open and writes --dropdown-top/left/width here; the
|
|
open/close animation below stays pure CSS. Opens on a click, so
|
|
animating transform + opacity is CLS-safe. */
|
|
.dropdown-panel {
|
|
top: var(--dropdown-top, 0);
|
|
left: var(--dropdown-left, 0);
|
|
min-width: var(--dropdown-width, 0);
|
|
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
transition:
|
|
opacity 0.2s ease,
|
|
transform 0.2s ease,
|
|
display 0.2s allow-discrete,
|
|
overlay 0.2s allow-discrete;
|
|
}
|
|
|
|
.dropdown-panel:popover-open {
|
|
opacity: 1;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
@starting-style {
|
|
.dropdown-panel:popover-open {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
|
|
/* Caret flips while the panel is open — :has() is the only route
|
|
back up from the popover's :popover-open state to the caret. */
|
|
.dropdown:has(.dropdown-panel:popover-open) .dropdown-caret {
|
|
transform: rotate(180deg);
|
|
}
|