Andreas Reinhold / reiniandClaude Opus 5
f90695cedd
tests / browser (chrome, chromium) (push) Successful in 3m34s
tests / browser (safari, webkit) (push) Successful in 6m2s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m6s
tests / feature (8.5) (push) Successful in 1m9s
tests / browser (firefox, firefox) (push) Successful in 4m20s
M3 Expressive top app bars (small, centered, medium and large flexible, search) that collapse with CSS sticky, docked and floating toolbars, primary and secondary tabs with a view-transition indicator, section navigation, the account menu and theme toggles. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
97 lines
2.8 KiB
CSS
97 lines
2.8 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 + env(safe-area-inset-bottom));
|
|
justify-content: center;
|
|
column-gap: clamp(0.25rem, 4vw, 2rem);
|
|
padding-inline: 1rem;
|
|
padding-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 + 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 + 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;
|
|
}
|