34 lines
1.1 KiB
CSS
34 lines
1.1 KiB
CSS
 
|
/* ============================================================================
|
||
|
|
NAVIGATION - the dropdown's opening motion
|
||
|
|
----------------------------------------------------------------------------
|
||
|
|
The redesign opens each group's menu with a short fade and an 8px settle
|
||
|
|
("menuIn" in the draft). It lives here rather than in the page kit because
|
||
|
|
the navigation is a design-system component and must not depend on a route
|
||
|
|
module's stylesheet.
|
||
|
|
|
||
|
|
`:not([hidden])` is what replays it: the panel is hidden with the `hidden`
|
||
|
|
attribute, so the animation runs each time the group opens instead of once
|
||
|
|
per mount. app.css collapses it to 0.01ms under prefers-reduced-motion.
|
||
|
|
========================================================================= */
|
||
|
|
|
||
|
|
@layer theme, base, components, utilities;
|
||
|
|
|
||
|
|
@layer components {
|
||
|
|
.sh-nav-menu:not([hidden]) {
|
||
|
|
animation: sh-nav-menu-in var(--motion-duration-base)
|
||
|
|
var(--motion-ease-entrance) both;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes sh-nav-menu-in {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(-8px);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|