Andreas Reinhold / reiniandClaude Opus 5
53bb000425
Components read the device's safe-area insets straight from env(), which a browser test cannot fake and an application drawing its own status strip cannot extend. Every inset the package reads, in its CSS and its views, is now var(--material-safe-top|bottom|left|right, env(safe-area-inset-…)): unchanged while the variables are unset. The app shell's --material-bottom-bar also adds var(--material-bottom-extra, 0px), so an application that docks something on the phone's navigation bar (an offline banner) sets its height once and the snackbar, a fab button and the page's bottom padding clear it. A guard test fails on any env(safe-area-inset-*) outside such a variable, and AppShellTest's assertion on the bar height's class follows the new value. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
97 lines
2.9 KiB
CSS
97 lines
2.9 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
|
|
*
|
|
* Unlayered on purpose: a vibrant toolbar recolours the icon buttons inside it, which draw their
|
|
* ink as utilities, and a rule in any layer loses to a utility.
|
|
*/
|
|
|
|
[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);
|
|
}
|
|
|
|
/* 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. */
|
|
[data-toolbar-place="bottom"] {
|
|
position: fixed;
|
|
bottom: calc(1rem + var(--material-safe-bottom, env(safe-area-inset-bottom)));
|
|
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%;
|
|
}
|
|
|
|
[data-toolbar][data-variant="docked"][data-toolbar-place="bottom"] {
|
|
inset-inline: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
translate: none;
|
|
}
|