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
32 lines
1.3 KiB
CSS
32 lines
1.3 KiB
CSS
/*
|
|
* <x-choices>: choosing from a list, as M3's filter chips or as a searchable field with a menu
|
|
* (resources/views/components/choices.blade.php).
|
|
*
|
|
* Almost nothing of its own to draw: the chips are <x-chip-set>'s and <x-chip>'s, the searchable
|
|
* field is <x-field>'s with its arrow turning over while the list is open (components/field.css),
|
|
* and the open list is M3's menu, drawn by components/menu.css on `data-md-field-menu` and
|
|
* `data-md-field-option`. What is left is the row that says nothing matches: body-medium in
|
|
* on-surface-variant, padded like a menu row (16px across, 12px down).
|
|
*
|
|
* [data-md-choices] the root; data-md-searchable
|
|
* [data-md-choices-empty] the list's "Nothing matches" row
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './field.css';
|
|
@import './icon.css';
|
|
@import './chip-set.css';
|
|
@import './chip.css';
|
|
@import './menu.css';
|
|
|
|
@layer material.components {
|
|
[data-md-choices-empty] {
|
|
padding: 12px var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
}
|