Draw the FAB without Tailwind
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
This commit is contained in:
co-authored by
Claude Opus 5
parent
2a4dcead3d
commit
1cf4f16c95
@@ -89,8 +89,8 @@
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
[data-toolbar-fab] [data-fab],
|
||||
[data-toolbar-fab] [data-fab]:hover {
|
||||
[data-toolbar-fab] [data-md-fab],
|
||||
[data-toolbar-fab] [data-md-fab]:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user