Andreas Reinhold / reiniandClaude Opus 5
5a9211acd4
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
69 lines
3.1 KiB
CSS
69 lines
3.1 KiB
CSS
/*
|
|
* <x-fab-menu-item>: one action in an `<x-fab-menu>`, a pill that rises into place as the menu
|
|
* opens and sinks back as it closes.
|
|
*
|
|
* FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): 56px tall, 24px either side,
|
|
* 8px between the icon and the label, 24px icons, full corner, elevation 3, `data-md-color`'s
|
|
* container. 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 entry is `@starting-style` on the item itself; the exit needs the state to be readable
|
|
* while the popover is on its way out, which `[data-md-fab-menu-popover]:not(:popover-open) > *`
|
|
* (fab-menu.css) drives from the popover's own open state — the popover keeps `display: flex` for
|
|
* the length of its own discrete transition, so the item has somewhere to animate to (ACT-33).
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './icon.css';
|
|
|
|
@layer material.components {
|
|
[data-md-fab-menu-item] {
|
|
--md-fab-menu-item-container: var(--md-sys-color-primary-container);
|
|
--md-fab-menu-item-on-container: var(--md-sys-color-on-primary-container);
|
|
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space100);
|
|
block-size: var(--md-sys-measurement-space700);
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-fab-menu-item-container);
|
|
color: var(--md-fab-menu-item-on-container);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
white-space: nowrap;
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
font-variation-settings: normal;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
translate: 0 0;
|
|
opacity: 1;
|
|
transition-property: translate, opacity, display, overlay;
|
|
transition-duration:
|
|
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-effects-default-duration),
|
|
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function:
|
|
var(--md-sys-motion-spatial-fast), var(--md-sys-motion-effects-default), linear, linear;
|
|
transition-behavior: allow-discrete;
|
|
|
|
@starting-style {
|
|
translate: 0 var(--md-sys-measurement-space100);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[data-md-fab-menu-item][data-md-color='secondary'] {
|
|
--md-fab-menu-item-container: var(--md-sys-color-secondary-container);
|
|
--md-fab-menu-item-on-container: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-fab-menu-item][data-md-color='tertiary'] {
|
|
--md-fab-menu-item-container: var(--md-sys-color-tertiary-container);
|
|
--md-fab-menu-item-on-container: var(--md-sys-color-on-tertiary-container);
|
|
}
|
|
}
|