Andreas Reinhold / reiniandClaude Sonnet 5
ed93222d22
Plan step 36 (navigation group, third batch): <x-scaffold>'s own styling moves into resources/css/layout/scaffold.css (the content region, the bar and rail row, the banner, the actions row and its rail-collapsed column layout, --material-bottom-bar and --material-margin publishing, the skip link) alongside step 35's FAB and content-margin rules already there. Every data-app-shell* hook becomes data-md-scaffold-* (data-app-shell-bar, -actions, -banner); the skip link is data-md-skip-link; data-app-shell itself is dropped, data-md-scaffold already named the root. The actions row's rail-collapsed:flex-col is written out branch for branch as the navigation rail's own rewrite did for its internal parts: the three width-independent conditions in one :where() group, the four width-gated ones each in their own @media block. With that gone, resources/css/tailwind.css's rail-collapsed custom-variant shim (its last use) is removed; tailwind.css now carries only tokens/theme.css and tokens/utilities.css, which the showcase still needs until step 38. navigation-bar.css's hide-on-scroll rule reading --material-bottom-bar stayed unlayered only because <x-scaffold> published that variable through a Tailwind utility, which no layered rule could outrank; now scaffold.css sets it itself in material.layout, a layer navigation-bar.css's own material.components always beats, so the rule moves into the layer and the file fits one @layer material.components block like every other navigation stylesheet. navigation-bar rejoins NavigationStylesheetsTest.php's dataset and NavigationBarTest.php's own duplicate shape test is retired in favour of it. Browser tests added (docs/plans/material-3-browser-tests.md): the scaffold's FAB dropping the bar's own height once hide-bar-on-scroll slides it away, at the trailing edge in a right-to-left document, and clearing a safe area an application sets on its inline-end and bottom edges. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
94 lines
5.5 KiB
CSS
94 lines
5.5 KiB
CSS
/*
|
|
* `<x-navigation-bar>`: M3 Expressive's flexible navigation bar, three to five destinations
|
|
* pinned to the bottom of a compact or medium window (NavigationBarTokens.kt, androidx Compose
|
|
* Material 3, Apache-2.0, and the layout of ShortNavigationBar.kt;
|
|
* docs/reference/m3/components-navigation-selection-inputs.md § Navigation Bar).
|
|
*
|
|
* [data-md-navigation-bar] 64px in surface-container; data-md-tall (80px),
|
|
* data-md-hide-on-scroll and data-md-hidden
|
|
* [data-md-navigation-bar-items] equal widths below 600px; centred with Compose's
|
|
* calculateCenteredContentHorizontalPadding from it
|
|
* [data-md-navigation-bar-item] navigation-bar-item.css
|
|
*
|
|
* `data-md-tall` is `NavigationBarTokens.TallContainerHeight`, 80px against the short bar's 64
|
|
* (`ContainerHeight`) — Missing until this rewrite. It keeps the vertical, icon-over-label item
|
|
* layout at every width, so every rule below that only the short bar's horizontal layout needs
|
|
* says `:not([data-md-tall])` first.
|
|
*
|
|
* `data-md-hide-on-scroll` is M3's scrolling behaviour, also Missing until now: "hides on
|
|
* scroll-down, reappears on scroll-up… never hide it while a screen reader is active"
|
|
* (§ Navigation Bar/Behaviour). resources/js/navigation.js drives `data-md-hidden` and never hides
|
|
* the bar while a snackbar, a bottom sheet or a drawer rests on its edge — those are anchored to
|
|
* its bottom edge and would slide with it — and focus reaching the bar brings it back, the web's
|
|
* nearest equivalent of "a screen reader is active". It slides on the default spatial spring,
|
|
* which reduced motion zeroes along with every other duration token.
|
|
*
|
|
* The item's own indicator, pill and state layer (shared with the rail item) are
|
|
* navigation-bar-item.css and navigation-item.css.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.components {
|
|
[data-md-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-md-navigation-bar-items] {
|
|
display: flex;
|
|
min-height: 64px;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
[data-md-navigation-bar][data-md-tall] [data-md-navigation-bar-items] {
|
|
min-height: 80px;
|
|
}
|
|
|
|
[data-md-navigation-bar][data-md-hide-on-scroll] {
|
|
transition: translate var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
|
|
}
|
|
|
|
[data-md-navigation-bar][data-md-hide-on-scroll][data-md-hidden] {
|
|
translate: 0 100%;
|
|
}
|
|
|
|
/* From 600px (M3's medium window, the bar's own width): icon and label side by side in a
|
|
40px pill, the items gathered in the middle with Centered arrangement's own padding. The
|
|
short bar only — a tall bar is the vertical layout everywhere. */
|
|
@container (width >= 600px) {
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items] {
|
|
width: calc(10% * (var(--navigation-bar-count, 7) + 3));
|
|
min-width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(1)) { --navigation-bar-count: 1; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(2)) { --navigation-bar-count: 2; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(3)) { --navigation-bar-count: 3; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(4)) { --navigation-bar-count: 4; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(5)) { --navigation-bar-count: 5; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(6)) { --navigation-bar-count: 6; }
|
|
}
|
|
|
|
/*
|
|
* A bar that has slid off the bottom of the window is no longer there to clear, so the offset
|
|
* everything pinned to the bottom reads drops to the bottom safe area and whatever the
|
|
* application has docked on the bar — a `fab` button, the snackbar and the page's own bottom
|
|
* padding all follow it down and come back up with it. Layered now, unlike before this
|
|
* rewrite: <x-scaffold> used to publish --material-bottom-bar with a Tailwind utility, which
|
|
* no rule in any layer could outrank regardless of specificity; now scaffold.css publishes it
|
|
* itself in `material.layout` (layout/scaffold.css), a layer this file's own
|
|
* `material.components` always outranks by declaration order alone — the same reason
|
|
* toolbar.css's and fab.css's overrides only have to beat another `material.components` rule,
|
|
* not chase a Tailwind utility out of the cascade. Keyed on `data-md-scaffold`, the hook the
|
|
* scaffold renders on its root, not `data-app-shell`, which that rewrite also retired.
|
|
*/
|
|
[data-md-scaffold]:has([data-md-navigation-bar][data-md-hide-on-scroll][data-md-hidden]) {
|
|
--material-bottom-bar: calc(var(--material-safe-bottom, env(safe-area-inset-bottom)) + var(--material-bottom-extra, 0px));
|
|
}
|
|
}
|