Add app bars, toolbars, tabs and the account and theme controls
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
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
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
bf00e4c40a
commit
f90695cedd
@@ -0,0 +1,188 @@
|
||||
/*
|
||||
* M3 Expressive's top app bars (AppBarTokens, AppBarSmallTokens, AppBarMediumFlexibleTokens,
|
||||
* AppBarLargeFlexibleTokens, androidx Compose Material 3, Apache-2.0).
|
||||
*
|
||||
* small 64px, title-large title (label-medium subtitle), 4px from the edges, the title 16px
|
||||
* from the start or straight after the navigation icon
|
||||
* center the same, the title centred
|
||||
* medium 112px (136px with a subtitle): the 64px row of icons over a headline-medium title
|
||||
* large 120px (152px with a subtitle): a display-small title
|
||||
* search the row holds a search bar
|
||||
*
|
||||
* The container is the surface, and surface-container once content scrolls under it. A medium or
|
||||
* large bar collapses into the small one without script moving anything: the bar is sticky at a
|
||||
* negative top, so it scrolls up until only 64px of it remain, while its row of icons is sticky at
|
||||
* 0 inside it and stays put — the big title scrolls away under the row. Script only says when that
|
||||
* has happened (resources/js/app-bar.js), so the small title can fade in and the colour change.
|
||||
*/
|
||||
|
||||
@layer components {
|
||||
[data-app-bar] {
|
||||
--app-bar-row: 4rem;
|
||||
--app-bar-height: var(--app-bar-row);
|
||||
|
||||
z-index: 20;
|
||||
display: block;
|
||||
min-height: var(--app-bar-height);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
background-color: var(--md-sys-color-surface);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
transition: background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
|
||||
}
|
||||
|
||||
[data-app-bar][data-variant="medium"] {
|
||||
--app-bar-height: 7rem;
|
||||
}
|
||||
|
||||
[data-app-bar][data-variant="medium"][data-subtitled] {
|
||||
--app-bar-height: 8.5rem;
|
||||
}
|
||||
|
||||
[data-app-bar][data-variant="large"] {
|
||||
--app-bar-height: 7.5rem;
|
||||
}
|
||||
|
||||
[data-app-bar][data-variant="large"][data-subtitled] {
|
||||
--app-bar-height: 9.5rem;
|
||||
}
|
||||
|
||||
[data-app-bar][data-sticky] {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* `--app-bar-measured` is the bar's real height (a title can wrap), set by app-bar.js. */
|
||||
[data-app-bar][data-sticky]:is([data-variant="medium"], [data-variant="large"]) {
|
||||
top: calc(var(--app-bar-row) - var(--app-bar-measured, var(--app-bar-height)));
|
||||
}
|
||||
|
||||
[data-app-bar][data-scrolled] {
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
|
||||
[data-app-bar-row] {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
min-height: var(--app-bar-row);
|
||||
padding-inline: 0.25rem;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
[data-app-bar-leading],
|
||||
[data-app-bar-trailing] {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
[data-app-bar-leading] {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
[data-app-bar-trailing] {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
[data-app-bar-headline] {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1 1 0%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
[data-app-bar-row]:has([data-app-bar-leading]) [data-app-bar-headline] {
|
||||
padding-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
[data-app-bar-title] {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font: var(--md-sys-typescale-title-lg);
|
||||
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
||||
}
|
||||
|
||||
[data-app-bar-subtitle] {
|
||||
overflow: hidden;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font: var(--md-sys-typescale-label-md);
|
||||
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
||||
}
|
||||
|
||||
/* Centred: the headline spans the row and centres its text between whatever is at either end. */
|
||||
[data-app-bar][data-variant="center"] [data-app-bar-headline] {
|
||||
position: absolute;
|
||||
inset-inline: 3.5rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* The search bar fills the row. */
|
||||
[data-app-bar-search] {
|
||||
min-width: 0;
|
||||
flex: 1 1 0%;
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
/* Medium and large: the row's title is the collapsed one, shown once the big one has gone. */
|
||||
[data-app-bar]:is([data-variant="medium"], [data-variant="large"]) [data-app-bar-row] [data-app-bar-headline] {
|
||||
opacity: 0;
|
||||
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
||||
}
|
||||
|
||||
[data-app-bar][data-collapsed] [data-app-bar-row] [data-app-bar-headline] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Heights from the tokens: the title (and subtitle) lines and the space under them fill what the
|
||||
row leaves — 36 + 12px medium, 36 + 20 + 16px with a subtitle; 44 + 12px large, 44 + 24 + 20px. */
|
||||
[data-app-bar-expanded] {
|
||||
display: flex;
|
||||
min-height: calc(var(--app-bar-height) - var(--app-bar-row));
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding-inline: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
[data-app-bar][data-subtitled] [data-app-bar-expanded] {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
[data-app-bar][data-variant="large"][data-subtitled] [data-app-bar-expanded] {
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
[data-app-bar-expanded] [data-app-bar-title] {
|
||||
white-space: normal;
|
||||
font: var(--md-sys-typescale-headline-md);
|
||||
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
||||
}
|
||||
|
||||
[data-app-bar-expanded] [data-app-bar-subtitle] {
|
||||
font: var(--md-sys-typescale-label-lg);
|
||||
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
||||
}
|
||||
|
||||
[data-app-bar][data-variant="large"] [data-app-bar-expanded] [data-app-bar-title] {
|
||||
font: var(--md-sys-typescale-display-sm);
|
||||
letter-spacing: var(--md-sys-typescale-display-sm-tracking);
|
||||
}
|
||||
|
||||
[data-app-bar][data-variant="large"] [data-app-bar-expanded] [data-app-bar-subtitle] {
|
||||
font: var(--md-sys-typescale-title-md);
|
||||
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
/*
|
||||
* M3's tabs (PrimaryNavigationTabTokens, SecondaryNavigationTabTokens, androidx Compose Material 3,
|
||||
* Apache-2.0): a 48px tablist on the surface over an outline-variant divider (64px when a primary
|
||||
* tab stacks its icon over its label), title-small labels in on-surface-variant, the chosen tab's
|
||||
* in primary (primary tabs) or on-surface (secondary tabs).
|
||||
*
|
||||
* The active indicator is drawn in every tab and shown under the chosen one, so it is right before
|
||||
* Alpine starts and after a morph: 3px with rounded top corners under the content of a primary tab
|
||||
* (at least 24px wide), 2px across the whole of a secondary one. When the choice changes, a view
|
||||
* transition moves it from the old tab to the new (resources/js/tabs.js), as M3's slides.
|
||||
*/
|
||||
|
||||
@layer components {
|
||||
[data-tabs-bar] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
/* A section nav's links sit in list items that share the width. */
|
||||
[data-tabs-bar] > li {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
[data-tabs-bar] > li > [data-tab] {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
[data-tab] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 0%;
|
||||
min-width: 5.625rem;
|
||||
height: 3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-inline: 1rem;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
font: var(--md-sys-typescale-title-sm);
|
||||
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
||||
white-space: nowrap;
|
||||
transition: color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
||||
}
|
||||
|
||||
[data-tabs-bar][data-scrollable] [data-tab] {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
[data-tabs-bar][data-stacked] [data-tab] {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
[data-tab]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
[data-tab]:hover {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
[data-tab]:hover::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
[data-tab]:focus-visible::before,
|
||||
[data-tab]:active::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
|
||||
}
|
||||
|
||||
[data-tab]:focus-visible {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
outline: 3px solid var(--md-sys-color-secondary);
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
[data-tab][aria-selected="true"] {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
[data-tabs-bar][data-variant="secondary"] [data-tab]:is([aria-selected="true"], [aria-current="page"]) {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
[data-tab]:disabled {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
[data-tab]:disabled::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
[data-tab-content] {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
min-width: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
[data-tabs-bar][data-stacked] [data-tab-content] {
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
[data-tab-indicator] {
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
background-color: var(--md-sys-color-primary);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
view-transition-class: material-tab-indicator;
|
||||
}
|
||||
|
||||
/* A secondary tab's indicator spans the tab, not its content. */
|
||||
[data-tabs-bar][data-variant="secondary"] [data-tab-content] {
|
||||
position: static;
|
||||
}
|
||||
|
||||
[data-tabs-bar][data-variant="secondary"] [data-tab-indicator] {
|
||||
height: 2px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-tab]:is([aria-selected="true"], [aria-current="page"]) [data-tab-indicator] {
|
||||
opacity: 1;
|
||||
view-transition-name: var(--tabs-indicator);
|
||||
}
|
||||
}
|
||||
|
||||
::view-transition-group(*.material-tab-indicator) {
|
||||
animation-duration: var(--md-sys-motion-spatial-default-duration);
|
||||
animation-timing-function: var(--md-sys-motion-spatial-default);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user