diff options
| author | Fuwn <[email protected]> | 2026-05-19 02:08:53 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-05-19 02:08:53 +0000 |
| commit | 439531c32e0ff2b0d2f9bfba8cfa45f0ca898e22 (patch) | |
| tree | 90a33f0df33eea517b12c569e77fac2d9c36f698 | |
| parent | fix(transitions): restore background-color on global anchor transition (diff) | |
| download | due.moe-439531c32e0ff2b0d2f9bfba8cfa45f0ca898e22.tar.xz due.moe-439531c32e0ff2b0d2f9bfba8cfa45f0ca898e22.zip | |
fix(dropdown): scoped transition restores border-radius animation
Dropdown items add border-radius: 8px on hover. The pre-485f1b11
:global(a) transition: all rule used to animate the corner rounding;
the narrowed list excluded it. Adds a scoped transition on
.dropdown-content a that mirrors the global anchor list plus
border-radius, so the corner rounding eases in over 150ms instead of
snapping. CommandPalette dropdown sets border-radius in base state so
is unaffected.
| -rw-r--r-- | src/lib/Layout/Dropdown.svelte | 6 |
1 files changed, 6 insertions, 0 deletions
diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte index dcdd7f7c..6e06249a 100644 --- a/src/lib/Layout/Dropdown.svelte +++ b/src/lib/Layout/Dropdown.svelte @@ -199,6 +199,12 @@ const handleItemKey = async (e: KeyboardEvent, index: number) => { padding: 0.5em 0.75em; text-decoration: none; display: block; + transition: + color var(--duration-fast) var(--ease-in-out-quart), + background-color var(--duration-fast) var(--ease-in-out-quart), + opacity var(--duration-fast) var(--ease-in-out-quart), + text-decoration-color var(--duration-fast) var(--ease-in-out-quart), + border-radius var(--duration-fast) var(--ease-in-out-quart); } .dropdown-content a:focus-visible { |