noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give a docked toolbar M3's rounded large-screen form

Browse Source 
Plan step 25, item 8 (navigation Missing: "Toolbar, large-screen
treatments"). M3's toolbar guidelines (Adaptive design, Resizing) say it
of the docked toolbar: "On web and large screens, the docked toolbar can
be rounded. Dividers can be used to organize large amounts of items",
and it can be placed in different parts of the page. `rounded` does that
from expanded (840px): fully rounded, spanning its container, lifted
16px off the window's edges at place="bottom"; below expanded it stays
the square full-width bar. An <x-divider vertical /> between groups of
controls stands as tall as the icon buttons inside any toolbar. The
floating toolbar is already fully rounded and gets no new form.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 11:02:43 +02:00
co-authored by Claude Opus 5
parent 092100c6ae
commit f33fb8be64
5 changed files with 127 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/toolbar.css
+41
View File
@@ -11,6 +11,10 @@
* 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.
*
* On web and large screens a docked toolbar "can be rounded", and dividers can organise its
* controls into groups (docs/reference/m3/components-navigation-selection-inputs.md § Toolbars):
* `rounded` does the first from `expanded`, and a divider in the slot the second at any width.
*
* 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.
@@ -90,6 +94,22 @@
box-shadow: none;
}
/* Groups of controls, a divider between each two (`<x-divider vertical />`, or `<x-divider />` in a
vertical toolbar). The divider draws itself stretched across its row, which in a toolbar would
run it into the container's edges; here it stands as long as the 40px icon buttons it separates,
centred on them, as the large-screen docked toolbar in M3's guidelines draws it
(toolbars/guidelines § Adaptive design → Resizing). The divider is `self-stretch`, a utility,
which this unlayered rule beats. */
[data-toolbar]:not([data-vertical]) > [role="separator"][aria-orientation="vertical"] {
align-self: center;
height: 2.5rem;
}
[data-toolbar][data-vertical] > [role="separator"][aria-orientation="horizontal"] {
align-self: center;
width: 2.5rem;
}
/* A floating toolbar and its FAB, side by side (or stacked, vertical). */
[data-toolbar-group] {
display: inline-flex;
@@ -139,3 +159,24 @@
left: 0;
translate: none;
}
/* The large-screen docked toolbar: from `expanded` (840px) fully rounded, like the one M3 shows on
the web, and spanning what it is written in. At the bottom of the window it lifts off the edges —
16dp from each side, M3's minimum outside padding for a toolbar, and 16px above the bottom bar or
the safe area, as a floating toolbar sits — so the curve never meets the window's frame, and the
bottom safe area, which it no longer touches, stops padding it. Below `expanded` it is the square,
full-width docked toolbar M3 requires ("Avoid applying rounded corners to the container"). */
@media (width >= 52.5rem) {
[data-toolbar][data-variant="docked"][data-rounded] {
min-height: 4rem;
padding-bottom: 0;
border-radius: var(--md-sys-shape-corner-full);
}
[data-toolbar][data-variant="docked"][data-rounded][data-toolbar-place="bottom"] {
right: calc(1rem + var(--material-safe-right, env(safe-area-inset-right)));
bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + 1rem);
left: calc(1rem + var(--material-safe-left, env(safe-area-inset-left)));
width: auto;
}
}