Andreas Reinhold / reiniandClaude Opus 5
1cf4f16c95
Plan step 36. <x-fab> renders data-md-fab with data-md-size, data-md-color, data-md-variant, data-md-extended and, collapsing on scroll, data-md-collapse-on-scroll with a bound data-md-collapsed; it passes its glyph's size to <x-icon>. fab.css draws FabBaseline/Medium/ LargeTokens and ExtendedFab*Tokens per size, the container and filled colours, elevation 3 and 4 on hover, the state layer and focus ring, and the collapse morph that leaves actions.css. data-fab becomes data-md-fab, also in navigation.css (the rail flattens a nested FAB) and toolbar.css (a docked toolbar's FAB), with their tests. The actions browser test gains the owed collapse-on-scroll test. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
29 lines
1009 B
CSS
29 lines
1009 B
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';
|
|
|
|
/* Inputs, selection and data */
|
|
|
|
/* Containment */
|
|
|
|
/* Navigation */
|