Andreas Reinhold / reiniandClaude Opus 5
59ca88a0cf
M3 asks a vertical toolbar for a 24dp margin from the window edge where a horizontal one keeps 16, and its standard-toolbar colour list ends "Standard button (Primary)" — the vibrant row of the same list was already honoured, so the two were being read inconsistently. Both rules are unlayered, because an icon button's ink is a utility. Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-12, N-13). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
123 lines
4.5 KiB
CSS
123 lines
4.5 KiB
CSS
/*
|
|
* M3 Expressive's toolbars (DockedToolbarTokens, FloatingToolbarTokens, androidx Compose Material 3,
|
|
* Apache-2.0).
|
|
*
|
|
* docked a 64px bar across the bottom of the screen in surface-container, square, its
|
|
* controls spread out 4 to 32px apart between 16px ends
|
|
* floating a 64px pill in surface-container (or primary-container, `vibrant`) at elevation 3,
|
|
* 8px at its ends and 4px between controls; `vertical` stands it on end
|
|
*
|
|
* Placed over the page, a horizontal toolbar keeps 16dp from the window's edge and a vertical one
|
|
* 24dp, which is M3's minimum for each.
|
|
*
|
|
* Unlayered on purpose: a toolbar recolours the icon buttons inside it — primary in a standard
|
|
* one, on-primary-container in a vibrant one — and they draw their ink as utilities, which a rule
|
|
* in any layer loses to.
|
|
*/
|
|
|
|
[data-toolbar] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
[data-toolbar][data-variant="docked"] {
|
|
width: 100%;
|
|
min-height: calc(4rem + var(--material-safe-bottom, env(safe-area-inset-bottom)));
|
|
justify-content: center;
|
|
column-gap: clamp(0.25rem, 4vw, 2rem);
|
|
padding-inline: 1rem;
|
|
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-toolbar][data-variant="floating"] {
|
|
display: inline-flex;
|
|
height: 4rem;
|
|
padding-inline: 0.5rem;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
}
|
|
|
|
[data-toolbar][data-variant="floating"][data-vertical] {
|
|
width: 4rem;
|
|
height: auto;
|
|
flex-direction: column;
|
|
padding-block: 0.5rem;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
[data-toolbar][data-vibrant] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
|
|
[data-toolbar][data-vibrant] [data-icon-button]:not([aria-pressed="true"]) {
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
|
|
[data-toolbar][data-vibrant] [data-icon-button][aria-pressed="true"] {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
/* M3's colour list for a standard toolbar ends "Standard button (Primary)", as the vibrant list
|
|
ends "Standard button (On primary container)" — the row above. An icon button carries its own
|
|
ink as a utility, so the container's `color` never reaches it and this rule has to. */
|
|
[data-toolbar]:not([data-vibrant]) [data-icon-button]:not([aria-pressed="true"]) {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
/* A floating toolbar and its FAB, side by side (or stacked, vertical). */
|
|
[data-toolbar-group] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
[data-toolbar-group][data-vertical] {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Placed over the page: centred above the bottom edge, or centred against the end edge.
|
|
*
|
|
* A toolbar at the bottom shares the screen region with a navigation bar, so it clears the one
|
|
* <x-app-shell> publishes as --material-bottom-bar, exactly as the FAB and the snackbar do —
|
|
* `max()`, not a sum, because that height already swallows the bottom safe area; without a bar
|
|
* the safe area alone applies. A *docked* toolbar and a navigation bar must never be on screen
|
|
* together at all (docs/reference/m3/components-navigation-selection-inputs.md § Toolbars); the
|
|
* offset is the backstop, not a licence. */
|
|
[data-toolbar-place="bottom"] {
|
|
position: fixed;
|
|
bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + 1rem);
|
|
left: 50%;
|
|
z-index: 30;
|
|
translate: -50% 0;
|
|
}
|
|
|
|
[data-toolbar-place="end"] {
|
|
position: fixed;
|
|
top: 50%;
|
|
inset-inline-end: calc(1rem + var(--material-safe-right, env(safe-area-inset-right)));
|
|
z-index: 30;
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
/* "Horizontal toolbars should have a minimum 16dp margin from the edge of the window. Vertical
|
|
toolbars should have a minimum 24dp margin"
|
|
(docs/reference/m3/components-navigation-selection-inputs.md § Toolbars). */
|
|
[data-toolbar][data-vertical][data-toolbar-place="end"],
|
|
[data-toolbar-group][data-vertical][data-toolbar-place="end"] {
|
|
inset-inline-end: calc(1.5rem + var(--material-safe-right, env(safe-area-inset-right)));
|
|
}
|
|
|
|
[data-toolbar][data-variant="docked"][data-toolbar-place="bottom"] {
|
|
inset-inline: 0;
|
|
bottom: var(--material-bottom-bar, 0px);
|
|
left: 0;
|
|
translate: none;
|
|
}
|