/* menu-icons.css — the Ace menu line icons (assets/icons/menu.svg) and their
draw-on animation. Board item 97 (lane website:ace-menu-media-1103).
Markup (server-rendered, CSP-safe: an external same-origin sprite, no inline
style, no script):
HOW THE DRAW WORKS THROUGH (why no inline-SVG partial is needed)
---------------------------------------------------------------------
clones the symbol into a closed shadow tree, so no selector in this
file can reach the s. Inherited properties DO cross that boundary, and
stroke-dasharray / stroke-dashoffset are both inherited (MDN, CSS
stroke-dashoffset, "Inherited: yes"). Every shape in the sprite carries
pathLength="1" (MDN: dash computations are scaled so the path is 1 unit
long; supported on path/circle/rect since Chrome 57, Firefox 61, Safari 14),
so ONE unitless value on the outer draws every shape of
every icon, whatever its real length:
stroke-dasharray: 1 1; stroke-dashoffset: 1 -> nothing visible
stroke-dasharray: 1 1; stroke-dashoffset: 0 -> fully drawn
The keyframes animate the outer 's own computed value; the shapes
inherit it every frame. Idle icons carry NO dash array at all, so a resting
icon renders exactly as drawn, with no seam at the closing point of a shape.
The sprite must never set stroke-dash* on a shape (that would beat the
inherited value) — its header comment says so.
No SMIL. Motion is opt-in under prefers-reduced-motion: no-preference; with
reduce, icons are fully drawn and only the color changes.
Hooks for the desktop and phone lanes (all optional):
--mi-size icon box (default 1.25em, follows the label's font size)
--mi-color idle stroke color (default the gold ink token)
--mi-hot hover/focus/open color (default the bright gold ink)
--mi-dur draw duration (default 560ms)
.mi-lg a 2rem icon for panel tiles
.mi-scope put on any container whose icons should all draw when it
holds an open disclosure ([aria-expanded=true]) or an open
popover — e.g. the of a top-level menu item. */
.mi {
inline-size: var(--mi-size, 1.25em);
block-size: var(--mi-size, 1.25em);
flex: none;
display: inline-block;
vertical-align: -0.25em;
overflow: visible;
color: var(--mi-color, var(--gold, #D2AE5A));
stroke-dasharray: none;
stroke-dashoffset: 0;
transition: color 0.2s ease;
}
.mi-lg { --mi-size: 2rem; }
.mi-xl { --mi-size: 2.75rem; }
/* The "hot" state: hover, keyboard focus, an expanded disclosure, an open
popover or . Color only, so it applies with or without motion. */
:is(a, button, summary, label, [role="tab"]):is(:hover, :focus-visible) .mi,
[aria-expanded="true"] .mi,
[aria-selected="true"] .mi,
.mm-tab[data-active] .mi,
[aria-current="page"] .mi,
details[open] > summary .mi,
.mi-scope:has([aria-expanded="true"], :popover-open) .mi {
color: var(--mi-hot, var(--gold-hi, #F1E2A0));
}
@keyframes mi-draw {
from { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
to { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
}
/* Same frames under a second name: switching animation-name is what restarts
an animation, so a hover inside an already-drawn open panel redraws. */
@keyframes mi-redraw {
from { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
to { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: no-preference) {
/* An opening panel draws every icon inside it, staggered down the list.
The animation restarts on every open because a closed popover is
display:none and its icons stop matching. `backwards` holds the hidden
frame during the delay, so nothing flashes drawn before its turn. */
:popover-open .mi,
.mi-scope:has([aria-expanded="true"], :popover-open) .mi,
dialog[open] .mi-draw-on-open .mi {
animation: mi-draw var(--mi-dur, 560ms) cubic-bezier(0.45, 0, 0.2, 1) backwards;
}
:popover-open :nth-child(2) > a .mi, .mi-scope :nth-child(2) > a .mi { animation-delay: 40ms; }
:popover-open :nth-child(3) > a .mi, .mi-scope :nth-child(3) > a .mi { animation-delay: 80ms; }
:popover-open :nth-child(4) > a .mi, .mi-scope :nth-child(4) > a .mi { animation-delay: 120ms; }
:popover-open :nth-child(5) > a .mi, .mi-scope :nth-child(5) > a .mi { animation-delay: 160ms; }
:popover-open :nth-child(6) > a .mi, .mi-scope :nth-child(6) > a .mi { animation-delay: 200ms; }
:popover-open :nth-child(7) > a .mi, .mi-scope :nth-child(7) > a .mi { animation-delay: 240ms; }
:popover-open :nth-child(n+8) > a .mi, .mi-scope :nth-child(n+8) > a .mi { animation-delay: 280ms; }
/* A trigger's own icon redraws each time the pointer or focus arrives —
after the group rules, and under its own name, so it wins and restarts. */
/* .mi.mi lifts specificity above the stagger delays (0,3,1). */
:is(a, button, summary, label, [role="tab"]):is(:hover, :focus-visible) .mi.mi {
animation: mi-redraw var(--mi-dur, 560ms) cubic-bezier(0.45, 0, 0.2, 1) backwards;
animation-delay: 0s;
}
[aria-expanded="true"] > .mi,
details[open] > summary .mi {
animation: mi-draw var(--mi-dur, 560ms) cubic-bezier(0.45, 0, 0.2, 1) backwards;
}
}
/* Windows High Contrast / forced colors: strokes follow the system text color. */
@media (forced-colors: active) {
.mi { color: CanvasText; }
:is(a, button):is(:hover, :focus-visible) .mi { color: LinkText; }
}