Andreas Reinhold / reiniandClaude Sonnet 5
9c134b2dc7
Plan step 36 (navigation group, second stream): <x-toolbar>'s class
lists move into resources/css/components/toolbar.css, keyed on
data-md-toolbar (data-md-variant/-vertical/-vibrant/-rounded/
-toolbar-place) and data-md-toolbar-group/-toolbar-fab. The docked
form with a FAB (N-02's --material-bottom-bar clearance), the vertical
24dp margin (N-12), the standard toolbar's primary icon buttons
(N-13), and the rounded large-screen form with dividers from 840px
were all already correct; only their hooks, units and layer needed to
change. The file no longer sits outside every layer: button.css and
fab.css now draw their own ink through data-md-* attributes rather
than a Tailwind utility, so a toolbar's more specific selector always
beats their single base color/background-color/box-shadow declaration
without needing to escape the cascade layers.
Sizes stay px (64px row, 40px divider); spacing goes through the
measurement tokens where one matches the value (4px leading/trailing
gap, 16/32px docked spread, 8px floating ends, 16/24px placed
margins).
Hooks renamed: every unprefixed data-toolbar* attribute to data-md-*,
updated in tests/Feature/Components/{AppBarTest,ToolbarTest}.php and
tests/Browser/BarsTest.php. toolbar.js needed no change: it reads the
bar through $root and role="toolbar", not by hook name.
Carry-over from the app-bar step: layout/pane.css now imports
app-bar.css and button.css for the pane's own top app bar and back
button, now that both are rewritten. That import crosses into
material.components for the first time from a layout file, so
tests/Feature/StylesheetsTest.php's two layout-shape checks now skip
non-`layout/` files reached through it — each already covered by its
own group's stylesheet test.
Added the owed browser tests (docs/plans/material-3-browser-tests.md):
a docked toolbar clear of the navigation bar below medium, and the
rounded form with its divider height from 840px, clear of the
window's edges.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
74 lines
2.6 KiB
CSS
74 lines
2.6 KiB
CSS
/*
|
|
* The component stylesheets already written without Tailwind (plan step 36), while the rest are
|
|
* still in tailwind.css. Each lives in `material.components`, so it can be imported anywhere in
|
|
* the entry: the layer statement, not the import order, decides where its rules rank. Step 37
|
|
* replaces this file with all.css. One block per stream, so parallel rewrites merge cleanly.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
/* Foundation components */
|
|
@import './components/icon.css';
|
|
@import './components/shape.css';
|
|
|
|
/* Actions and communication */
|
|
@import './components/loading.css';
|
|
@import './components/tooltip.css';
|
|
@import './components/badge.css';
|
|
@import './components/button.css';
|
|
@import './components/group.css';
|
|
@import './components/button-group.css';
|
|
@import './components/split-button.css';
|
|
@import './components/fab.css';
|
|
@import './components/menu-separator.css';
|
|
@import './components/menu-group.css';
|
|
@import './components/menu-item.css';
|
|
@import './components/menu.css';
|
|
@import './components/fab-menu-item.css';
|
|
@import './components/fab-menu.css';
|
|
@import './components/rich-tooltip.css';
|
|
@import './components/toast.css';
|
|
@import './components/progress.css';
|
|
@import './components/alert.css';
|
|
@import './components/stat.css';
|
|
@import './components/empty-state.css';
|
|
|
|
/* Inputs, selection and data */
|
|
@import './components/form.css';
|
|
@import './components/field.css';
|
|
@import './components/input.css';
|
|
@import './components/password.css';
|
|
@import './components/textarea.css';
|
|
@import './components/select.css';
|
|
@import './components/file.css';
|
|
@import './components/checkbox.css';
|
|
@import './components/radio.css';
|
|
@import './components/toggle.css';
|
|
@import './components/chip.css';
|
|
@import './components/chip-set.css';
|
|
@import './components/choices.css';
|
|
@import './components/slider.css';
|
|
@import './components/search.css';
|
|
@import './components/table.css';
|
|
@import './components/sort-header.css';
|
|
@import './components/pagination.css';
|
|
@import './components/datepicker.css';
|
|
@import './components/timepicker.css';
|
|
|
|
/* Containment */
|
|
@import './components/divider.css';
|
|
@import './components/collapse.css';
|
|
@import './components/card.css';
|
|
@import './components/list-item.css';
|
|
@import './components/list.css';
|
|
@import './components/modal.css';
|
|
@import './components/drawer.css';
|
|
@import './components/bottom-sheet.css';
|
|
@import './components/carousel-item.css';
|
|
@import './components/carousel.css';
|
|
@import './components/error-page.css';
|
|
|
|
/* Navigation */
|
|
@import './components/app-bar.css';
|
|
@import './components/toolbar.css';
|