Andreas Reinhold / reiniandClaude Sonnet 5
25549374ec
Plan step 36 (navigation group, second batch): <x-navigation-rail>'s, <x-navigation-rail-item>'s and <x-navigation-rail-section>'s class lists move into navigation-rail.css, navigation-rail-item.css and navigation-rail-section.css, keyed on data-md-navigation-rail (the mode, data-md-width, data-md-align, data-md-hide-when-collapsed, data-md-divider, data-md-fill, data-md-open), data-md-navigation-rail- item (data-md-active) and data-md-navigation-rail-section. Every Tailwind wrapper class in the view — the menu row's centring padding, the FAB row, the two swapped menu glyphs, the brand's visibility — becomes a hook the stylesheet draws instead; the menu button itself renders the shared md-state-layer/md-focus-ring/md-touch-target classes (N-01's pattern) since it draws its own layer on itself, not a child. `<x-icon>` and `<x-badge>` take size and floating props instead of size/position classes; a small data-md-navigation-icon hook (the shared navigation-item.css) replaces the ad hoc "relative inline-flex" wrapper a floating badge anchors to. `rail-collapsed` (a Tailwind @custom-variant, forbidden in Phase F) is reproduced as plain selectors, branch for branch: the three width- independent conditions (a fixed collapsed mode; a collapsible rail the visitor collapsed and not open; a modal rail not open) merge into one :where() group, provably the same match set as three separate rules since :where(A, B, C) on an element is true exactly when :where(A) or :where(B) or :where(C) is; the four width-gated conditions stay separate media blocks, since CSS cannot merge different `@media` queries. Every rem length becomes px, since these are dp-based M3 tokens, not a text measure (unlike <x-pane>'s rem widths). The FAB overrides for a rail's header — elevation 0 (N-03), morphing into an extended FAB instead of swapping two by display (N-23) — move from unlayered into this file's own material.components, like toolbar.css's FAB override: fab.css's `[data-md-fab]` is one attribute, so a doubled selector here always outranks it without needing to sit outside the layer. navigation.js: the arriving-indicator stylesheet and every code comment follow the new hooks; resources/css/components/navigation.css is deleted (nothing imports it any more) and its line in tailwind.css with it. Behaviour is unchanged except one thing Tailwind's `rail-collapsed:` variant could do that plain CSS in this shape cannot: it is gone for consuming applications too, since the definition lived only in the file this commit removes. The development skill's guidance for it is rewritten to point at navigation-rail.css's own selectors instead of teaching a Tailwind variant that no longer exists. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
1020 lines
43 KiB
CSS
1020 lines
43 KiB
CSS
/*
|
||
* `<x-navigation-rail>`: M3 Expressive's navigation rail, collapsed (96px, icon over label) or
|
||
* expanded (a full-width pill, icon beside label) down the start edge of a `medium` or wider
|
||
* window (NavigationRailCollapsedTokens.kt, NavigationRailExpandedTokens.kt, androidx Compose
|
||
* Material 3, Apache-2.0, and the layout of WideNavigationRail.kt;
|
||
* docs/reference/m3/components-navigation-selection-inputs.md § Navigation Rail).
|
||
*
|
||
* [data-md-navigation-rail="collapsed|expanded|collapsible|modal|adaptive"] data-md-open
|
||
* [data-md-navigation-rail-scrim] modal and adaptive rails, open only
|
||
* [data-md-navigation-rail-panel] the <nav>
|
||
* [data-md-navigation-rail-header] never scrolls
|
||
* [data-md-navigation-rail-menu-row] the menu button and the brand
|
||
* [data-md-navigation-rail-menu] md-state-layer md-focus-ring md-touch-target
|
||
* [data-md-navigation-rail-brand]
|
||
* [data-md-navigation-rail-fab-row] one <x-fab>, morphed (see the footer note)
|
||
* [data-md-navigation-rail-destinations] scrolls when the window is too short
|
||
* [data-md-navigation-rail-section] navigation-rail-section.css
|
||
* [data-md-navigation-rail-item] navigation-rail-item.css
|
||
* [data-md-navigation-rail-footer] never scrolls
|
||
*
|
||
* **Collapsed**, reproduced from the Tailwind-era custom variant named `rail-collapsed`: a rail (and
|
||
* anything in it) is drawn collapsed while any of these hold, each its own rule below wherever a
|
||
* property differs by shape — a fixed `collapsed` mode; a `collapsible` rail the visitor collapsed
|
||
* (`<html data-rail="collapsed">`, set before the first paint by `<x-theme-script>`) and not
|
||
* currently open over the page; a `modal` rail not open; below `medium` (600px) a `collapsible`
|
||
* rail regardless of choice, M3's floor ("compact → use a navigation bar, not a standard rail");
|
||
* below `expanded` (840px) an `adaptive` rail not open — there is no standard rail below it; at
|
||
* `expanded` (840–1199) an `adaptive` rail not open, when the visitor chose collapsed *or* has not
|
||
* chosen (`data-rail-auto`, which `data-rail` alone cannot say, since it also carries
|
||
* `rail.default` for a visitor who never chose); from `large` (1200) an `adaptive` rail not open,
|
||
* only when the visitor chose collapsed — M3 starts it expanded there by default. Every branch but
|
||
* the first reads `:not([data-md-open])`: a rail open over a scrim is drawn expanded whatever made
|
||
* it collapsed, which only `hide-when-collapsed` can bring about outside the modal modes.
|
||
* `resources/js/navigation.js` reads the same numbers, so the menu button and the drawing agree at
|
||
* every width.
|
||
*
|
||
* `data-md-width="narrow"` is M3's other collapsed width, `NarrowContainerWidth` 80px against the
|
||
* default 96 (`CollapsedContainerWidth`) — a variable, so every rule below that has its own reason
|
||
* to name a collapsed width does not have to know which one applies.
|
||
*
|
||
* `data-md-divider` and `data-md-fill="false"` are both Missing until this rewrite: an optional
|
||
* vertical divider on the page's edge, M3's own answer to a page scrolling under a fixed rail, and
|
||
* a transparent container as long as the items keep 3:1 contrast (N-22). `data-md-align="center"`
|
||
* is M3's other alignment, preferred on a tablet for reach — only the destinations move; the
|
||
* header, footer and menu button stay at their ends, and `safe` gives the top back once there are
|
||
* more destinations than fit.
|
||
*
|
||
* The rail-header FAB rules at the end draw M3's nested-FAB elevation (level 0, not a standalone
|
||
* FAB's 3 — N-03) and morph it into an extended FAB as the rail opens, rather than swapping two by
|
||
* `display` (N-23): both now sit in this file's own `material.components` layer, like toolbar.css's
|
||
* FAB override, because each only overrides the single declaration fab.css puts on `[data-md-fab]`
|
||
* itself, with a more specific selector that always wins without needing to sit outside the layer.
|
||
*
|
||
* The destination item, its indicator and its state layer are navigation-rail-item.css and
|
||
* navigation-item.css (shared with the bar's item); a section's heading is
|
||
* navigation-rail-section.css.
|
||
*/
|
||
|
||
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
||
|
||
@import './icon.css';
|
||
@import './fab.css';
|
||
|
||
@layer material.components {
|
||
[data-md-navigation-rail] {
|
||
--navigation-rail-expanded-width: clamp(220px, var(--navigation-rail-width, 256px), 360px);
|
||
--navigation-rail-collapsed-width: 96px;
|
||
|
||
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);
|
||
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
}
|
||
}
|
||
|
||
[data-md-navigation-rail][data-md-width='narrow'] {
|
||
--navigation-rail-collapsed-width: 80px;
|
||
}
|
||
|
||
[data-md-navigation-rail][data-md-hide-when-collapsed] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
width: 0;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
width: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* There is no room for a label under the 56px indicator at 80px, so a narrow rail is the icons
|
||
alone; the label is taken out of the drawing, not out of the page (navigation-rail-item.css
|
||
renders it always — it is what names the destination). */
|
||
[data-md-navigation-rail][data-md-width='narrow'] [data-md-navigation-rail-item] [data-md-navigation-label] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 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 at
|
||
all below `medium`. */
|
||
[data-md-navigation-rail='modal'] {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
[data-md-navigation-rail='adaptive'] {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
[data-md-navigation-rail='adaptive'] {
|
||
width: 0;
|
||
}
|
||
|
||
/* "Compact → don't use a standard rail, use a navigation bar." A `collapsible` rail takes
|
||
the width the visitor chose, which on a 360px screen would be two-thirds of it, so it is
|
||
floored at its collapsed width (N-24). `collapsed` and `expanded` mean what they say and
|
||
are left alone: wrap one in an application's own `medium:` element if it must not show
|
||
on a phone. */
|
||
[data-md-navigation-rail='collapsible'] {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
}
|
||
|
||
/* `--material-banner` is the height of a bar pinned across the top of the window — what
|
||
<x-scaffold>'s `banner` slot holds, if the application made it sticky. The rail sticks under
|
||
it rather than behind it; 0 without one. */
|
||
[data-md-navigation-rail-panel] {
|
||
position: sticky;
|
||
top: var(--material-banner, 0px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100%;
|
||
max-height: calc(100dvh - var(--material-banner, 0px));
|
||
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);
|
||
}
|
||
|
||
/* M3's two optional container treatments: "optional vertical divider separates rail from
|
||
content, placed on the content-adjacent edge" — also its answer to a page scrolling under a
|
||
fixed rail — and "container fill can be turned off (transparent) as long as items keep ≥3:1
|
||
contrast" (N-22). Neither applies to a rail open over a scrim, a surface over the page. */
|
||
[data-md-navigation-rail][data-md-divider]:not([data-md-open]) > [data-md-navigation-rail-panel] {
|
||
border-inline-end: 1px solid var(--md-sys-color-outline-variant);
|
||
}
|
||
|
||
[data-md-navigation-rail][data-md-fill='false']:not([data-md-open]) > [data-md-navigation-rail-panel] {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* Open: expanded over a scrim, in surface-container with a large corner at its inner edge. */
|
||
[data-md-navigation-rail][data-md-open] > [data-md-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 - 56px);
|
||
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 < 600px) {
|
||
[data-md-navigation-rail='adaptive'] > [data-md-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 - 56px);
|
||
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-md-navigation-rail='adaptive'][data-md-open] > [data-md-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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* A rail that hides when collapsed is in the same position: nothing is left in the layout for
|
||
it to grow out of, so it takes the compact window's slide-in. The whole treatment is under
|
||
the collapsed branches, which stop the moment the rail is open — that is what makes it the
|
||
expanded rail that comes back, on the unconditional rule below. */
|
||
[data-md-navigation-rail][data-md-hide-when-collapsed] > [data-md-navigation-rail-panel] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
display: none;
|
||
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;
|
||
}
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
display: none;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
display: none;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
display: none;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
display: none;
|
||
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-md-navigation-rail][data-md-hide-when-collapsed][data-md-open] > [data-md-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;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* The two bands the configuration above does not reach, because there it is the window and not
|
||
the visitor that collapses the rail: below `medium` for a collapsible rail — already held at
|
||
its collapsed width above — and `medium` itself for the adaptive one, which M3 gives a
|
||
collapsed rail (below `medium` the adaptive rail is already away, over the page). This file's
|
||
header and resources/js/navigation.js read the same two numbers. */
|
||
@media (width < 600px) {
|
||
[data-md-navigation-rail='collapsible'][data-md-hide-when-collapsed] {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
|
||
[data-md-navigation-rail='collapsible'][data-md-hide-when-collapsed] > [data-md-navigation-rail-panel] {
|
||
display: flex;
|
||
translate: none;
|
||
}
|
||
}
|
||
|
||
@media (600px <= width < 840px) {
|
||
[data-md-navigation-rail='adaptive'][data-md-hide-when-collapsed] {
|
||
width: var(--navigation-rail-collapsed-width);
|
||
}
|
||
|
||
[data-md-navigation-rail='adaptive'][data-md-hide-when-collapsed] > [data-md-navigation-rail-panel] {
|
||
display: flex;
|
||
translate: none;
|
||
}
|
||
}
|
||
|
||
[data-md-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-md-navigation-rail][data-md-open] > [data-md-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-md-navigation-rail-header] {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
padding-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 44px);
|
||
padding-bottom: 32px;
|
||
}
|
||
|
||
[data-md-navigation-rail-panel] > [data-md-navigation-rail-destinations]:first-child {
|
||
padding-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 44px);
|
||
}
|
||
|
||
/* The menu button and the brand: 20px at the row's end always; 28px at its start with the
|
||
button, so it centres a 40px button in the default 96px collapsed rail (28 either side); 20px
|
||
without one. A narrow (80px) rail's button re-centres to 20px either side while collapsed —
|
||
expanded, the row always keeps 28, since a rail's *expanded* width never depends on `narrow`. */
|
||
[data-md-navigation-rail-menu-row] {
|
||
display: flex;
|
||
width: 100%;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding-inline-end: 20px;
|
||
padding-inline-start: 20px;
|
||
}
|
||
|
||
[data-md-navigation-rail-header]:has([data-md-navigation-rail-menu]) [data-md-navigation-rail-menu-row] {
|
||
padding-inline-start: 28px;
|
||
}
|
||
|
||
[data-md-navigation-rail][data-md-width='narrow'] [data-md-navigation-rail-header]:has([data-md-navigation-rail-menu]) [data-md-navigation-rail-menu-row] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
padding-inline-start: 20px;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
padding-inline-start: 20px;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
padding-inline-start: 20px;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
padding-inline-start: 20px;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
padding-inline-start: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
[data-md-navigation-rail-menu] {
|
||
display: inline-flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
color: var(--md-sys-color-on-surface-variant);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* The two glyphs swap by `display: contents`/`none`, so the button's own size never depends on
|
||
which is shown, and the hidden one never announces to a screen reader (the button's own
|
||
aria-label already says what the click will do). */
|
||
[data-md-navigation-rail-menu-collapse-icon] {
|
||
display: contents;
|
||
}
|
||
|
||
[data-md-navigation-rail-menu-expand-icon] {
|
||
display: none;
|
||
}
|
||
|
||
[data-md-navigation-rail-menu-collapse-icon],
|
||
[data-md-navigation-rail-menu-expand-icon] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
display: none;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
[data-md-navigation-rail-menu-expand-icon] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
display: contents;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
display: contents;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
display: contents;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
display: contents;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
display: contents;
|
||
}
|
||
}
|
||
}
|
||
|
||
[data-md-navigation-rail-brand] {
|
||
min-width: 0;
|
||
flex: 1 1 0%;
|
||
}
|
||
|
||
[data-md-navigation-rail-brand] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
display: none;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* The FAB row: 20px either side in the default 96px rail, 12px in a narrow 80 while collapsed
|
||
(the FAB itself is centred by the row's own width, not by this padding). */
|
||
[data-md-navigation-rail-fab-row] {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
padding-inline: 20px;
|
||
}
|
||
|
||
[data-md-navigation-rail][data-md-width='narrow'] [data-md-navigation-rail-fab-row] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
padding-inline: 12px;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
padding-inline: 12px;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
padding-inline: 12px;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
padding-inline: 12px;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
padding-inline: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
[data-md-navigation-rail-destinations] {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
padding-block: 8px;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
[data-md-navigation-rail-destinations],
|
||
[data-md-navigation-rail-footer] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
[data-md-navigation-rail-destinations],
|
||
[data-md-navigation-rail-footer] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
gap: 4px;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
gap: 4px;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
gap: 4px;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
gap: 4px;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
gap: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
[data-md-navigation-rail-footer] {
|
||
flex-shrink: 0;
|
||
padding-block: 8px 16px;
|
||
}
|
||
|
||
/* "Alignment: top or center; on tablets prefer center alignment for reach. Menu icon and FAB
|
||
are always top-aligned" (§ Navigation Rail/Behaviour). Only the destinations move — the
|
||
header and the footer stay at their ends — and `safe` puts them back at the top the moment
|
||
there are more of them than fit, where centring would otherwise push the first one out of
|
||
reach above the scroller. */
|
||
[data-md-navigation-rail][data-md-align='center'] [data-md-navigation-rail-destinations] {
|
||
justify-content: safe center;
|
||
}
|
||
|
||
/*
|
||
* A FAB in the rail's header rests at elevation 0, not the 3 a standalone FAB has
|
||
* (§ Navigation Rail/Behaviour: "when nested within another component, such as the navigation
|
||
* rail, the FAB's resting elevation should be level 0" — N-03). The doubled `[data-md-fab]`
|
||
* attribute only adds specificity to beat fab.css's own single-attribute selector reliably,
|
||
* exactly as `[data-md-navigation-rail-item][data-md-navigation-rail-item]::before`
|
||
* (navigation-rail-item.css) does for the same reason.
|
||
*/
|
||
[data-md-navigation-rail-header] [data-md-fab][data-md-fab],
|
||
[data-md-navigation-rail-header] [data-md-fab][data-md-fab]:hover {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/*
|
||
* "Rail transitions from collapsed to expanded should animate the FAB into and out of an
|
||
* extended FAB" (N-23) — so the header takes one `<x-fab label icon>` and morphs it, rather
|
||
* than swapping two by `display`, which showed the collapsed one at once while the rail's
|
||
* width was still springing. The label's width springs on the rail's own spatial spring; with
|
||
* the gap and the extended FAB's own minimum width both zeroed, `aspect-ratio` squares what is
|
||
* left against the height its size already sets — 56, 80 or 96px, the three FAB sizes — so no
|
||
* number is repeated here. The label stays in the accessibility tree at both widths, so the FAB
|
||
* keeps its name. The cap is there because a transition needs a length to travel to; a rail
|
||
* FAB's label is a word or two.
|
||
*/
|
||
[data-md-navigation-rail-header] [data-md-fab] > span {
|
||
max-width: 256px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
transition:
|
||
max-width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default),
|
||
opacity var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
|
||
}
|
||
|
||
[data-md-navigation-rail-header] [data-md-fab] > span {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
max-width: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
max-width: 0;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
max-width: 0;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
max-width: 0;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
max-width: 0;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
[data-md-navigation-rail-header] [data-md-fab][data-md-extended] {
|
||
&:where(
|
||
[data-md-navigation-rail='collapsed'],
|
||
[data-md-navigation-rail='collapsed'] *,
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
||
[data-md-navigation-rail='modal']:not([data-md-open]),
|
||
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
||
) {
|
||
min-inline-size: 0;
|
||
aspect-ratio: 1;
|
||
gap: 0;
|
||
}
|
||
|
||
@media (width < 600px) {
|
||
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
||
min-inline-size: 0;
|
||
aspect-ratio: 1;
|
||
gap: 0;
|
||
}
|
||
}
|
||
|
||
@media (width < 840px) {
|
||
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
||
min-inline-size: 0;
|
||
aspect-ratio: 1;
|
||
gap: 0;
|
||
}
|
||
}
|
||
|
||
@media (840px <= width < 1200px) {
|
||
&:where(
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
min-inline-size: 0;
|
||
aspect-ratio: 1;
|
||
gap: 0;
|
||
}
|
||
}
|
||
|
||
@media (width >= 1200px) {
|
||
&:where(
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
||
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
||
) {
|
||
min-inline-size: 0;
|
||
aspect-ratio: 1;
|
||
gap: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|