Andreas Reinhold / reiniandClaude Opus 5
cf63f11bfb
`[data-md-toggle] { min-width: 0 }` let the switch's root shrink below
its 52px track as a flex item. In `<x-row justify="between">` beside a
paragraph, flex shrinking weighs each item by its width, so the root of
a bare switch gave up a share of its 52px, and a switch with a long
label of its own gave its label a column one word wide and less; the
track, which does not shrink inside the root, ran out of it and past a
card's edge on a phone. `<x-checkbox>`'s root did the same with its box.
Both roots now keep their automatic minimum, the control and, beside a
label, its longest word, so the text beside the control, or the
control's own label, wraps instead. The toggle's docblock and the skill
say so.
A browser test lays a bare switch, a labelled switch and a bare
checkbox beside long text in rows on a 393px window and checks each
control's size and that it stays inside its row, and that the switch's
own label wraps inside its root; it fails without the change in Chrome,
Firefox and Safari.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
117 lines
4.4 KiB
CSS
117 lines
4.4 KiB
CSS
/*
|
|
* <x-checkbox>: M3's checkbox (resources/views/components/checkbox.blade.php), on the row the
|
|
* selection controls share (components/selection.css).
|
|
*
|
|
* CheckboxTokens (androidx Compose Material 3, Apache-2.0): an 18px box with a 2px on-surface-variant
|
|
* outline and 2px corners, filled with primary and holding an on-primary tick (or dash, for the
|
|
* mixed state) at the 18px icon size once it is ticked; the state layer a 40px circle around it,
|
|
* 11px past each edge. The tick grows in and fades in on the fast spatial spring. With the server's
|
|
* error the outline, the fill and the state layer are error and the tick on-error. Disabled, the
|
|
* outline and the fill are on-surface at 38% and the tick is surface. Beside a hint the box drops
|
|
* 3px, to sit on the label's first line.
|
|
*
|
|
* [data-md-checkbox] the root: the row and its errors; `class` and `style` land here
|
|
* [data-md-selection-row]
|
|
* [data-md-checkbox-box] the box: input, [data-md-checkbox-check], [data-md-checkbox-mixed]
|
|
* [data-md-selection-support] the errors, 4px under the row
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './selection.css';
|
|
@import './icon.css';
|
|
|
|
@layer material.components {
|
|
/* In a flex row the root keeps its automatic minimum, the box and beside a label its longest
|
|
word, so the text beside it wraps before the box is pushed out of the row (toggle.css). */
|
|
[data-md-checkbox] {
|
|
min-width: auto;
|
|
}
|
|
|
|
[data-md-checkbox-box] {
|
|
position: relative;
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
[data-md-checkbox-box] > * {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
[data-md-selection-row]:has([data-md-selection-hint]) [data-md-checkbox-box] {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
[data-md-checkbox-box]::before {
|
|
inset: -11px;
|
|
}
|
|
|
|
[data-md-checkbox-box]:has(input:focus-visible)::before {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
}
|
|
|
|
[data-md-checkbox-box] input {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--md-sys-color-on-surface-variant);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
[data-md-checkbox-box] input:is(:checked, :indeterminate) {
|
|
border-color: var(--md-sys-color-primary);
|
|
background-color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-checkbox-box] :is([data-md-checkbox-check], [data-md-checkbox-mixed]) {
|
|
color: var(--md-sys-color-on-primary);
|
|
opacity: 0;
|
|
scale: 0.5;
|
|
pointer-events: none;
|
|
transition-property: opacity, scale;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-checkbox-box] input:checked:not(:indeterminate) ~ [data-md-checkbox-check],
|
|
[data-md-checkbox-box] input:indeterminate ~ [data-md-checkbox-mixed] {
|
|
opacity: 1;
|
|
scale: 1;
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-checkbox-box] input {
|
|
border-color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-checkbox-box] input:is(:checked, :indeterminate) {
|
|
background-color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-checkbox-box] :is([data-md-checkbox-check], [data-md-checkbox-mixed]) {
|
|
color: var(--md-sys-color-on-error);
|
|
}
|
|
|
|
[data-md-checkbox-box] input:disabled {
|
|
border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-checkbox-box] input:disabled:is(:checked, :indeterminate) {
|
|
border-color: transparent;
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-checkbox-box] input:disabled ~ :is([data-md-checkbox-check], [data-md-checkbox-mixed]) {
|
|
color: var(--md-sys-color-surface);
|
|
}
|
|
|
|
[data-md-checkbox] [data-md-selection-support] {
|
|
margin-top: var(--md-sys-measurement-space50);
|
|
color: var(--md-sys-color-error);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
}
|