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

Draw the FAB menu's trigger and items from the interaction classes

Browse Source 
Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
The trigger button (fab-menu.css) and each item (fab-menu-item.css)
hand-rolled md-state-layer and md-focus-ring; both now render the classes
and keep only their own colour, shape and motion. Neither needs
md-touch-target: the trigger and every item draw at 56px.

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 18:08:47 +02:00
co-authored by Claude Opus 5
parent 6c30f1e3ae
commit 5a9211acd4
5 changed files with 22 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/fab-menu.css
+3 -33
View File
@@ -4,7 +4,9 @@
* FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): the trigger is a 56px FAB,
* `data-md-color`'s container, large corner, elevation 3, rising to elevation 4 under a hovering
* pointer; while its list is open (`aria-expanded`) it turns fully round and paints the colour
* itself, on the default spatial and effects springs (ACT-19 splits the two). The list sits
* itself, on the default spatial and effects springs (ACT-19 splits the two). It renders the
* foundation's `md-state-layer` and `md-focus-ring` (foundation/interaction.css); its 56px already
* meets M3's target, so it needs no `md-touch-target`. The list sits
* `data-md-position`'s corner of the trigger, 8px padding — the room the close button keeps below
* the first item — and scrolls past `calc(100dvh - 128px)` on a short window, behind the close
* button, which stays fixed (ACT-32).
@@ -39,8 +41,6 @@
--md-fab-menu-color: var(--md-sys-color-primary);
--md-fab-menu-on-color: var(--md-sys-color-on-primary);
position: relative;
isolation: isolate;
display: inline-flex;
flex-shrink: 0;
align-items: center;
@@ -52,7 +52,6 @@
color: var(--md-fab-menu-on-container);
box-shadow: var(--md-sys-elevation-3);
cursor: pointer;
outline: none;
-webkit-user-select: none;
user-select: none;
transition-property: border-radius, background-color, color, box-shadow;
@@ -63,39 +62,10 @@
var(--md-sys-motion-spatial-default), var(--md-sys-motion-effects-default),
var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default);
&::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: currentColor;
opacity: 0;
pointer-events: none;
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
}
@media (hover: hover) {
&:hover {
box-shadow: var(--md-sys-elevation-4);
}
&:hover::before {
opacity: var(--md-sys-state-hover-state-layer-opacity);
}
}
&:focus-visible {
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: 2px;
}
&:focus-visible::before {
opacity: var(--md-sys-state-focus-state-layer-opacity);
}
&:active::before {
opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
&[aria-expanded='true'] {