Andreas Reinhold / reiniandClaude Opus 5
5cdeec26e8
<x-menu> renders data-md-menu with data-md-sheet-at-compact, and its popover data-md-menu-popover with data-md-position and data-md-vibrant; menu.css caps a long menu at 288px so it scrolls instead of running off the top layer (ACT-04) and ties the open/close transition to the trigger's corner (ACT-26), restyles a submenu to open in place inside a sheet-at-compact sheet, and still carries the dropdown a select's picker and a searchable choices field draw, so select.css and choices.css finish their step-36 TODO import. actions.css sheds the state-transition-fast and popover-transition utilities menu-item and menu no longer use; state-transition-default and [data-fab-menu] stay for fab-menu's own rewrite. data-menu, data-menu-filter, data-menu-sheet, data-menu-empty, data-sheet-at-compact, data-vibrant and data-active are renamed to data-md-*, also in menu.js, split-button.css (which renders a <x-menu> and now imports its stylesheet) and AppBarTest's overflow menu (plan step 36, actions). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
46 lines
2.7 KiB
CSS
46 lines
2.7 KiB
CSS
/*
|
|
* What is left of the Tailwind-era actions utilities, waiting on the FAB menu's own rewrite (plan
|
|
* step 36, actions): `<x-fab-menu>`'s trigger still names `state-transition-default`, and its
|
|
* list still selects `[data-fab-menu]`. Once that component moves into fab-menu.css, in
|
|
* `material.components`, this file empties and leaves tailwind.css.
|
|
*
|
|
* M3 has two spring styles and they are not interchangeable: spatial moves things (position,
|
|
* size, rotation, rounded corners) and overshoots by 9% on the way, effects changes how things
|
|
* look (colour, opacity, elevation) and is critically damped, because a colour must never
|
|
* overshoot — tokens/motion.css says so in the library's own words. An element whose corners and
|
|
* colours both change on a press therefore needs two springs at once, which Tailwind cannot write
|
|
* (`duration-*` and `ease-*` each emit one value); CSS can, by giving `transition-property` a
|
|
* list and matching it position for position.
|
|
*
|
|
* `state-transition-default` is the FAB menu trigger's morph into a close button: shape, size and
|
|
* position on the default spatial spring, colour and elevation on the default effects spring
|
|
* beside it.
|
|
*
|
|
* This is an `@utility` declaration, so it compiles into Tailwind's utilities layer like any
|
|
* other class: a `transition-*` utility written beside it on the call site will fight it, and
|
|
* whichever Tailwind emits last wins. Pass neither.
|
|
*/
|
|
|
|
@utility state-transition-default {
|
|
transition-property: border-radius, padding, margin, background-color, color, box-shadow;
|
|
transition-duration:
|
|
var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration),
|
|
var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function:
|
|
var(--md-sys-motion-spatial-default), var(--md-sys-motion-spatial-default), var(--md-sys-motion-spatial-default),
|
|
var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default);
|
|
}
|
|
|
|
/*
|
|
* A FAB menu's items rise into place as the list opens and sink back as it closes. 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 is what `:not(:popover-open)` is — the popover keeps `display: flex`
|
|
* for the length of its own discrete transition, so the items have somewhere to animate to.
|
|
*
|
|
* Unlayered (a plain rule, not an `@utility`), so it beats the item's own utilities.
|
|
*/
|
|
[data-fab-menu]:not(:popover-open) > * {
|
|
translate: 0 0.5rem;
|
|
opacity: 0;
|
|
}
|