Andreas Reinhold / reiniandClaude Opus 5
330b835043
<x-fab-menu-item> renders data-md-fab-menu-item and data-md-color with no class list; fab-menu-item.css draws FabMenuBaselineTokens' 56px pill, 24px sides, 24px icon, full corner and elevation 3, and the entry/exit rise-and-sink transition (ACT-33) that fab-menu.css's [data-md-fab-menu]:not(:popover-open) rule will drive once the FAB menu itself is rewritten. Its tests move out of FabTest.php into a new FabMenuTest.php (plan step 36, actions). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
101 lines
3.8 KiB
CSS
101 lines
3.8 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.
|
|
*
|
|
* 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]: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);
|
|
|
|
position: relative;
|
|
isolation: isolate;
|
|
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;
|
|
outline: none;
|
|
-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;
|
|
|
|
&::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::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);
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|