Andreas Reinhold / reiniandClaude Fable 5.1
fd1e063d4c
Plan step 17, on N-06, N-07 and C-07. The shell now changes at 600, 840 and 1200 and nowhere else: a compact window keeps the navigation bar and the modal rail; `medium` (600-839) gets the collapsed rail in the layout and no bar; `expanded` (840-1199) gets a standard rail, collapsed, whose menu button expands it in place rather than over a scrim; `large` and above start it expanded, which is what M3 prefers once there is room. `data-rail` alone could not say "collapsed at expanded, expanded at large", since it carries `rail.default` for a visitor who never chose. <x-theme-script> now also writes `data-rail-auto` while nothing is stored, the `rail-collapsed:` variant reads it in the 840-1199 band, and `$store.rail.auto` mirrors it for Alpine; the first press of the menu button drops it, so a remembered choice still wins in both bands. `rail.default` and the rest of `$store.rail` are unchanged, and the attribute rides through `wire:navigate` with the others. `--material-margin` carries M3's window margin on the shell -- 16px compact, 24px from `medium` -- and the content region is padded with it, so the showcase pages drop their own gutters. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
604 lines
23 KiB
CSS
604 lines
23 KiB
CSS
/*
|
||
* M3 Expressive navigation: the flexible navigation bar and the navigation rail — collapsed,
|
||
* expanded and modal.
|
||
*
|
||
* Values from androidx Compose Material 3 (Apache-2.0) at androidx-main
|
||
* 27cf9a7d5788aa0f5f2d8b6699ce279560daf326: tokens/NavigationBarTokens.kt,
|
||
* NavigationBarVerticalItemTokens.kt, NavigationBarHorizontalItemTokens.kt,
|
||
* NavigationRailCollapsedTokens.kt, NavigationRailExpandedTokens.kt,
|
||
* NavigationRailBaselineItemTokens.kt, NavigationRailVerticalItemTokens.kt,
|
||
* NavigationRailHorizontalItemTokens.kt, NavigationRailColorTokens.kt, and the layout in
|
||
* ShortNavigationBar.kt, WideNavigationRail.kt and NavigationItem.kt.
|
||
*
|
||
* [data-navigation-bar] surface-container, 64px, the bottom safe area under it
|
||
* [data-navigation-bar-items] equal widths; centred from a 600px-wide bar
|
||
* [data-navigation-bar-item] data-active
|
||
* [data-navigation-pill] icon and label; the indicator itself from 600px
|
||
* [data-navigation-indicator] the 56×32 indicator around the icon below 600px
|
||
* [data-navigation-label]
|
||
*
|
||
* [data-navigation-rail="collapsed|expanded|collapsible|modal|adaptive"] data-open
|
||
* [data-navigation-rail-scrim] modal and adaptive rails
|
||
* [data-navigation-rail-panel] the <nav>
|
||
* [data-navigation-rail-header] menu button, brand, FAB — never scrolls
|
||
* [data-navigation-rail-destinations] scrolls when the window is too short
|
||
* [data-navigation-rail-section] a heading (expanded only) and its items
|
||
* [data-navigation-rail-item] data-active; the full-width pill when expanded
|
||
* [data-navigation-indicator] the 56×32 indicator when collapsed
|
||
* [data-navigation-label]
|
||
* [data-navigation-rail-footer] never scrolls
|
||
*
|
||
* `rail-collapsed:` matches a rail, and everything in it, while it is drawn collapsed — whatever
|
||
* made it so: its mode, the visitor's choice on <html data-rail> (set before the first paint by
|
||
* <x-theme-script>), or a window below `expanded` (840px) for the adaptive rail. A rail item is written once
|
||
* and takes both shapes from it; so can anything an application puts in a rail
|
||
* (`<span class="rail-collapsed:hidden">`).
|
||
*
|
||
* The two widths the adaptive rail turns on are M3's window size classes, not Tailwind's screens
|
||
* (docs/reference/m3/foundations.md § Layout, foundations-supplement.md § Breakpoints): 37.5rem
|
||
* (600px) is the compact/medium boundary — below it the navigation bar carries the destinations and
|
||
* the rail takes no room in the layout; 52.5rem (840px) is `expanded`, where M3 asks for a standard
|
||
* rail in the layout rather than one that opens over a scrim; 75rem (1200px) is `large`, where the
|
||
* rail starts expanded instead of collapsed. The bar's own item layout is a *container* query at
|
||
* the same 37.5rem, so a bar in a narrow column lays out by its own width.
|
||
*/
|
||
|
||
@custom-variant rail-collapsed {
|
||
&:where([data-navigation-rail='collapsed'], [data-navigation-rail='collapsed'] *) {
|
||
@slot;
|
||
}
|
||
|
||
&:where([data-rail='collapsed'] [data-navigation-rail='collapsible'], [data-rail='collapsed'] [data-navigation-rail='collapsible'] *) {
|
||
@slot;
|
||
}
|
||
|
||
&:where([data-navigation-rail='modal']:not([data-open]), [data-navigation-rail='modal']:not([data-open]) *) {
|
||
@slot;
|
||
}
|
||
|
||
@media (width < 52.5rem) {
|
||
&:where([data-navigation-rail='adaptive']:not([data-open]), [data-navigation-rail='adaptive']:not([data-open]) *) {
|
||
@slot;
|
||
}
|
||
}
|
||
|
||
/* Expanded (840–1199): a standard rail, collapsed unless the visitor expanded it. `data-rail`
|
||
alone cannot say that — it carries `rail.default` for a visitor who never chose — so
|
||
`data-rail-auto`, which <x-theme-script> sets while nothing is stored, stands for "no
|
||
choice yet" and the class's own default applies. */
|
||
@media (52.5rem <= width < 75rem) {
|
||
&:where(:is([data-rail='collapsed'], [data-rail-auto]) [data-navigation-rail='adaptive'], :is([data-rail='collapsed'], [data-rail-auto]) [data-navigation-rail='adaptive'] *) {
|
||
@slot;
|
||
}
|
||
}
|
||
|
||
/* Large and extra-large (from 1200): expanded to begin with, which is what M3 prefers there. */
|
||
@media (width >= 75rem) {
|
||
&:where([data-rail='collapsed'] [data-navigation-rail='adaptive'], [data-rail='collapsed'] [data-navigation-rail='adaptive'] *) {
|
||
@slot;
|
||
}
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
/* ---------------------------------------------------------------- the navigation bar */
|
||
|
||
[data-navigation-bar] {
|
||
container-type: inline-size;
|
||
padding-inline: var(--material-safe-left, env(safe-area-inset-left)) var(--material-safe-right, env(safe-area-inset-right));
|
||
padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom));
|
||
background-color: var(--md-sys-color-surface-container);
|
||
color: var(--md-sys-color-on-surface-variant);
|
||
}
|
||
|
||
[data-navigation-bar-items] {
|
||
display: flex;
|
||
min-height: 4rem;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
[data-navigation-bar-item] {
|
||
--navigation-layer: 0;
|
||
position: relative;
|
||
display: flex;
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-block: 0.375rem;
|
||
color: var(--md-sys-color-on-surface-variant);
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
outline: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
[data-navigation-bar-item] [data-navigation-pill] {
|
||
display: flex;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
font: var(--md-sys-typescale-label-md);
|
||
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
||
}
|
||
|
||
[data-navigation-bar-item] [data-navigation-label] {
|
||
max-width: 100%;
|
||
padding-inline: 0.25rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
[data-navigation-bar-item][data-active] {
|
||
color: var(--md-sys-color-secondary);
|
||
}
|
||
|
||
/* From 600dp (M3's medium window), icon and label side by side in a 40px indicator, and the
|
||
items centred with the padding ShortNavigationBar's Centered arrangement computes. */
|
||
@container (width >= 37.5rem) {
|
||
[data-navigation-bar-items] {
|
||
width: calc(10% * (var(--navigation-bar-count, 7) + 3));
|
||
min-width: fit-content;
|
||
max-width: 100%;
|
||
}
|
||
|
||
[data-navigation-bar-items]:has(> :last-child:nth-child(1)) { --navigation-bar-count: 1; }
|
||
[data-navigation-bar-items]:has(> :last-child:nth-child(2)) { --navigation-bar-count: 2; }
|
||
[data-navigation-bar-items]:has(> :last-child:nth-child(3)) { --navigation-bar-count: 3; }
|
||
[data-navigation-bar-items]:has(> :last-child:nth-child(4)) { --navigation-bar-count: 4; }
|
||
[data-navigation-bar-items]:has(> :last-child:nth-child(5)) { --navigation-bar-count: 5; }
|
||
[data-navigation-bar-items]:has(> :last-child:nth-child(6)) { --navigation-bar-count: 6; }
|
||
|
||
[data-navigation-bar-item] {
|
||
min-width: max-content;
|
||
}
|
||
|
||
[data-navigation-bar-item] [data-navigation-pill] {
|
||
position: relative;
|
||
isolation: isolate;
|
||
flex-direction: row;
|
||
height: 2.5rem;
|
||
padding-inline: 1rem;
|
||
font: var(--md-sys-typescale-label-lg);
|
||
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
||
}
|
||
|
||
[data-navigation-bar-item] [data-navigation-label] {
|
||
padding-inline: 0;
|
||
}
|
||
|
||
[data-navigation-bar-item][data-active] {
|
||
color: var(--md-sys-color-on-secondary-container);
|
||
}
|
||
|
||
[data-navigation-bar-item][data-active] [data-navigation-pill] {
|
||
background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- the navigation rail */
|
||
|
||
[data-navigation-rail] {
|
||
--navigation-rail-expanded-width: clamp(13.75rem, var(--navigation-rail-width, 16rem), 22.5rem);
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
width: var(--navigation-rail-expanded-width);
|
||
transition: width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
|
||
|
||
@variant rail-collapsed {
|
||
width: 6rem;
|
||
}
|
||
}
|
||
|
||
/* A modal rail keeps its collapsed width in the layout while it is open over it, as Compose's
|
||
ModalWideNavigationRail does; the adaptive rail does below `expanded`, and takes no room on a compact window. */
|
||
[data-navigation-rail='modal'] {
|
||
width: 6rem;
|
||
}
|
||
|
||
@media (width < 52.5rem) {
|
||
[data-navigation-rail='adaptive'] {
|
||
width: 6rem;
|
||
}
|
||
}
|
||
|
||
@media (width < 37.5rem) {
|
||
[data-navigation-rail='adaptive'] {
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-panel] {
|
||
position: sticky;
|
||
top: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100%;
|
||
max-height: 100dvh;
|
||
/* Clip, not hide: no scroll container, so the destinations below can still scroll and
|
||
nothing sticky breaks. What only an expanded rail draws — a label, the brand — is drawn
|
||
at once when the rail expands, while the width is still growing; the clip keeps it
|
||
from spilling over the page for those frames. */
|
||
overflow-x: clip;
|
||
padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom));
|
||
background-color: var(--md-sys-color-surface);
|
||
color: var(--md-sys-color-on-surface);
|
||
transition:
|
||
width var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),
|
||
background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
|
||
}
|
||
|
||
/* Open: expanded over a scrim, in surface-container with a large corner at its inner edge. */
|
||
[data-navigation-rail][data-open] > [data-navigation-rail-panel] {
|
||
position: fixed;
|
||
inset-block: 0;
|
||
inset-inline-start: 0;
|
||
z-index: 50;
|
||
width: var(--navigation-rail-expanded-width);
|
||
max-width: calc(100vw - 3.5rem);
|
||
height: 100dvh;
|
||
max-height: none;
|
||
border-start-end-radius: var(--md-sys-shape-corner-lg);
|
||
border-end-end-radius: var(--md-sys-shape-corner-lg);
|
||
background-color: var(--md-sys-color-surface-container);
|
||
box-shadow: var(--md-sys-elevation-2);
|
||
}
|
||
|
||
/* On a compact window there is no collapsed rail to grow out of: the open rail slides in from the edge,
|
||
on emphasized decelerate rather than a spring, which would overshoot and open a gap. */
|
||
@media (width < 37.5rem) {
|
||
[data-navigation-rail='adaptive'] > [data-navigation-rail-panel] {
|
||
position: fixed;
|
||
inset-block: 0;
|
||
inset-inline-start: 0;
|
||
z-index: 50;
|
||
display: none;
|
||
width: var(--navigation-rail-expanded-width);
|
||
max-width: calc(100vw - 3.5rem);
|
||
height: 100dvh;
|
||
max-height: none;
|
||
border-start-end-radius: var(--md-sys-shape-corner-lg);
|
||
border-end-end-radius: var(--md-sys-shape-corner-lg);
|
||
background-color: var(--md-sys-color-surface-container);
|
||
box-shadow: var(--md-sys-elevation-2);
|
||
translate: -100% 0;
|
||
transition:
|
||
translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
|
||
display var(--md-sys-motion-effects-default-duration) allow-discrete;
|
||
|
||
&:dir(rtl) {
|
||
translate: 100% 0;
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail='adaptive'][data-open] > [data-navigation-rail-panel] {
|
||
display: flex;
|
||
translate: 0 0;
|
||
transition:
|
||
translate var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-easing-emphasized-decelerate),
|
||
display var(--md-sys-motion-spatial-default-duration) allow-discrete;
|
||
|
||
@starting-style {
|
||
translate: -100% 0;
|
||
}
|
||
|
||
&:dir(rtl) {
|
||
translate: 0 0;
|
||
|
||
@starting-style {
|
||
translate: 100% 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-scrim] {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 40;
|
||
display: none;
|
||
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
|
||
opacity: 0;
|
||
transition:
|
||
opacity var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
|
||
display var(--md-sys-motion-effects-default-duration) allow-discrete;
|
||
}
|
||
|
||
[data-navigation-rail][data-open] > [data-navigation-rail-scrim] {
|
||
display: block;
|
||
opacity: 1;
|
||
|
||
@starting-style {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* 44px above the header (TopSpace), 40px under it (HeaderSpaceMinimum) — 32 here and 8 as
|
||
the destinations' own padding, which keeps the first item's focus ring inside the scroller. */
|
||
[data-navigation-rail-header] {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0.5rem;
|
||
padding-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 2.75rem);
|
||
padding-bottom: 2rem;
|
||
}
|
||
|
||
[data-navigation-rail-panel] > [data-navigation-rail-destinations]:first-child {
|
||
padding-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 2.75rem);
|
||
}
|
||
|
||
[data-navigation-rail-destinations] {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
padding-block: 0.5rem;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
[data-navigation-rail-destinations],
|
||
[data-navigation-rail-section],
|
||
[data-navigation-rail-footer] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
@variant rail-collapsed {
|
||
gap: 0.25rem;
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-footer] {
|
||
flex-shrink: 0;
|
||
padding-block: 0.5rem 1rem;
|
||
}
|
||
|
||
[data-navigation-rail-heading] {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 3rem;
|
||
padding-inline: 2.25rem 1.25rem;
|
||
overflow: hidden;
|
||
color: var(--md-sys-color-on-surface-variant);
|
||
font: var(--md-sys-typescale-title-sm);
|
||
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
|
||
@variant rail-collapsed {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-section]:not(:first-child) {
|
||
@variant rail-collapsed {
|
||
margin-top: 0.75rem;
|
||
}
|
||
}
|
||
|
||
/* Expanded: a 56px full-width pill, icon and label 8px apart, label-large. */
|
||
[data-navigation-rail-item] {
|
||
--navigation-layer: 0;
|
||
position: relative;
|
||
isolation: isolate;
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
height: 3.5rem;
|
||
margin-inline: 1.25rem;
|
||
padding-inline: 1rem;
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
color: var(--md-sys-color-on-surface-variant);
|
||
font: var(--md-sys-typescale-label-lg);
|
||
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
||
text-align: start;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
outline: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
|
||
/* Collapsed: the icon in its 56×32 indicator over a label-medium label, 64px tall. */
|
||
@variant rail-collapsed {
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 0.25rem;
|
||
height: auto;
|
||
min-height: 4rem;
|
||
margin-inline: 0;
|
||
padding: 0.375rem 0.25rem;
|
||
border-radius: 0;
|
||
font: var(--md-sys-typescale-label-md);
|
||
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
||
white-space: normal;
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-item] [data-navigation-label] {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
@variant rail-collapsed {
|
||
flex: none;
|
||
display: -webkit-box;
|
||
max-width: 100%;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
text-align: center;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-item][data-active] {
|
||
background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
|
||
color: var(--md-sys-color-on-secondary-container);
|
||
|
||
@variant rail-collapsed {
|
||
background-image: none;
|
||
color: var(--md-sys-color-secondary);
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-item] [data-navigation-indicator] {
|
||
position: relative;
|
||
isolation: isolate;
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
|
||
@variant rail-collapsed {
|
||
width: 3.5rem;
|
||
height: 2rem;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- both: indicator, states */
|
||
|
||
[data-navigation-bar-item] [data-navigation-indicator] {
|
||
position: relative;
|
||
isolation: isolate;
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 3.5rem;
|
||
height: 2rem;
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
}
|
||
|
||
[data-navigation-bar-item][data-active] [data-navigation-indicator] {
|
||
color: var(--md-sys-color-on-secondary-container);
|
||
}
|
||
|
||
@container (width < 37.5rem) {
|
||
[data-navigation-bar-item][data-active] [data-navigation-indicator] {
|
||
background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-item][data-active] [data-navigation-indicator] {
|
||
@variant rail-collapsed {
|
||
background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
|
||
color: var(--md-sys-color-on-secondary-container);
|
||
}
|
||
}
|
||
|
||
/* The active indicator is a secondary-container fill painted as a background image, so it can
|
||
grow out of its centre without stretching the icon: when a page arrives through
|
||
wire:navigate, resources/js/navigation.js starts it at zero width for a moment, and it
|
||
springs open on the default spatial spring, as Compose's indicator does when the selection
|
||
changes (NavigationItem.kt). A full page load draws it at once; reduced motion zeroes it. */
|
||
[data-navigation-bar-item] :is([data-navigation-indicator], [data-navigation-pill]),
|
||
[data-navigation-rail-item],
|
||
[data-navigation-rail-item] [data-navigation-indicator] {
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
transition: background-size var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
|
||
}
|
||
|
||
/* The state layer covers only the indicator: the pill when the indicator holds the label
|
||
too, the 56×32 shape when it holds the icon alone. Hover only where a pointer can hover. */
|
||
@media (hover: hover) {
|
||
:is([data-navigation-bar-item], [data-navigation-rail-item]):hover {
|
||
--navigation-layer: 0.08;
|
||
}
|
||
}
|
||
|
||
:is([data-navigation-bar-item], [data-navigation-rail-item]):is(:focus-visible, :active) {
|
||
--navigation-layer: 0.1;
|
||
}
|
||
|
||
[data-navigation-bar-item] [data-navigation-indicator]::before,
|
||
[data-navigation-bar-item] [data-navigation-pill]::before,
|
||
[data-navigation-rail-item] [data-navigation-indicator]::before,
|
||
[data-navigation-rail-item]::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
border-radius: inherit;
|
||
background-color: var(--md-sys-color-on-surface);
|
||
opacity: var(--navigation-layer);
|
||
pointer-events: none;
|
||
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
||
}
|
||
|
||
@container (width < 37.5rem) {
|
||
[data-navigation-bar-item] [data-navigation-pill]::before {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@container (width >= 37.5rem) {
|
||
[data-navigation-bar-item] [data-navigation-indicator]::before {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* The rail item's layer is on the item while expanded and on its indicator while collapsed. A
|
||
variant cannot follow a pseudo-element in a selector, so the item hands the layer on through
|
||
variables; each rule below outweighs its line in the list above. */
|
||
[data-navigation-rail-item] {
|
||
--navigation-item-layer: var(--navigation-layer);
|
||
--navigation-indicator-layer: 0;
|
||
|
||
@variant rail-collapsed {
|
||
--navigation-item-layer: 0;
|
||
--navigation-indicator-layer: var(--navigation-layer);
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-item][data-navigation-rail-item]::before {
|
||
background-color: var(--md-sys-color-on-secondary-container);
|
||
opacity: var(--navigation-item-layer);
|
||
}
|
||
|
||
[data-navigation-rail-item][data-navigation-rail-item] [data-navigation-indicator]::before {
|
||
background-color: var(--md-sys-color-on-secondary-container);
|
||
opacity: var(--navigation-indicator-layer);
|
||
}
|
||
|
||
/* M3's focus indicator, 3px of secondary 2px out, around the same shape. */
|
||
@container (width < 37.5rem) {
|
||
[data-navigation-bar-item]:focus-visible [data-navigation-indicator] {
|
||
outline: 3px solid var(--md-sys-color-secondary);
|
||
outline-offset: 2px;
|
||
}
|
||
}
|
||
|
||
@container (width >= 37.5rem) {
|
||
[data-navigation-bar-item]:focus-visible [data-navigation-pill] {
|
||
outline: 3px solid var(--md-sys-color-secondary);
|
||
outline-offset: 2px;
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-item]:focus-visible {
|
||
outline: 3px solid var(--md-sys-color-secondary);
|
||
outline-offset: 2px;
|
||
|
||
@variant rail-collapsed {
|
||
outline: none;
|
||
}
|
||
}
|
||
|
||
[data-navigation-rail-item]:focus-visible [data-navigation-indicator] {
|
||
@variant rail-collapsed {
|
||
outline: 3px solid var(--md-sys-color-secondary);
|
||
outline-offset: 2px;
|
||
}
|
||
}
|
||
}
|