Andreas Reinhold / reiniandClaude Opus 5
1bb5adab0e
<x-choices> renders data-md-choices (data-md-searchable) and its "Nothing matches" row as data-md-choices-empty, drawn by components/choices.css, which brings the field, chip set and chip it renders (plan step 36). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
32 lines
1.4 KiB
CSS
32 lines
1.4 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';
|
|
/* TODO(step 36): @import './menu.css' once the menu leaves Tailwind (actions stream); its field-menu rules draw the open list. */
|
|
|
|
@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;
|
|
}
|
|
}
|