Andreas Reinhold / reiniandClaude Opus 5
d706eef01b
Plan step 36. menu.css left Tailwind's unlayered half for material.components, where its `appearance: base-select` on the select ties select.css's `appearance: none` in layer and specificity and loses on order: select.css's block always follows the menu.css it imports. The customizable select would have fallen back to the native list. The select's own opt-in now sits in select.css's @supports block; menu.css keeps the picker's. A test pins where each is written. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
76 lines
2.9 KiB
CSS
76 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] {
|
|
appearance: base-select;
|
|
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;
|
|
}
|
|
}
|
|
}
|