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
75 lines
2.9 KiB
CSS
75 lines
2.9 KiB
CSS
/*
|
|
* <x-select>: the native <select> in the text field's chrome, drawn as M3's exposed dropdown menu
|
|
* (resources/views/components/select.blade.php).
|
|
*
|
|
* The chrome is the field's (components/field.css); this file is what a <select> changes in it. The
|
|
* select covers its whole field, so a press anywhere opens it and the list the browser anchors to
|
|
* it is the field's width. Where the browser has the customizable select (`appearance:
|
|
* base-select`), the closed select loses the button chrome that brings, the field reads as focused
|
|
* while the list is open, and the arrow turns over. The open list itself is M3's menu, drawn by
|
|
* components/menu.css.
|
|
*
|
|
* The field's root carries `data-md-select`.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './field.css';
|
|
@import './icon.css';
|
|
@import './menu.css';
|
|
|
|
@layer material.components {
|
|
/* A select covers its whole field — out over the padding and the leading icon at
|
|
the start, under the arrow to the end — and its own padding puts the value back
|
|
where it was. So a press anywhere on the field opens it, and the list, which
|
|
the browser anchors to the select, is the field's width (components/menu.css). */
|
|
select[data-md-field-control] {
|
|
--field-end: calc(var(--field-icon) + var(--field-gap) + var(--field-pad));
|
|
|
|
appearance: none;
|
|
cursor: pointer;
|
|
margin-inline: calc(-1 * var(--field-start)) calc(-1 * var(--field-end));
|
|
padding-inline: var(--field-start) var(--field-end);
|
|
}
|
|
|
|
select[data-md-field-control]:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
/* Where the browser has a customizable select, the closed select is its own
|
|
button: without the border, padding and arrow that button brings, it is the
|
|
same field as before. While its list is open the field reads as focused —
|
|
said from `:open`, because focus inside the list is in the top layer — and
|
|
the arrow turns over, as the searchable choices' does. */
|
|
@supports (appearance: base-select) {
|
|
select[data-md-field-control] {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 0;
|
|
padding-block: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
select[data-md-field-control]::picker-icon {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-field-box]:has(select[data-md-field-control]:open) {
|
|
--field-edge: var(--md-sys-color-primary);
|
|
--field-ink: var(--md-sys-color-primary);
|
|
|
|
[data-md-field-outline] {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
[data-md-field]:has(select[data-md-field-control]:open) [data-md-field-arrow] {
|
|
rotate: 180deg;
|
|
}
|
|
}
|
|
}
|