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>
157 lines
6.6 KiB
CSS
157 lines
6.6 KiB
CSS
/*
|
||
* <x-toggle>: M3's switch (resources/views/components/toggle.blade.php), on the row the selection
|
||
* controls share (components/selection.css). The hooks say `switch` because `toggle` is daisyUI's
|
||
* class, which the design guard rejects.
|
||
*
|
||
* SwitchTokens (androidx Compose Material 3, Apache-2.0): a 52×32 track with a 2px outline, in
|
||
* surface-container-highest when off and primary when on. The handle's centre is 16px from the
|
||
* track's start off and 36px on; it is 16px across off, 24px with an icon or on, and 28px while
|
||
* pressed, moving and growing on the fast spatial spring. Off it is outline, on-surface-variant
|
||
* while hovered, focused or pressed; on it is on-primary, primary-container in those states. The
|
||
* state layer is a 40px circle around the handle. Its icons are 16px, on-primary-container when on.
|
||
* Disabled, the track is on-surface at 12% and the handle on-surface at 38% (surface when on).
|
||
*
|
||
* [data-md-toggle] the root; `class` and `style` land here
|
||
* [data-md-selection-row] data-md-right puts the switch at the end of the row
|
||
* [data-md-switch] the track; `data-md-icons` = "both" or "selected"
|
||
* input, [data-md-switch-handle] (with [data-md-switch-on] and [data-md-switch-off] icons)
|
||
*/
|
||
|
||
@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, a setting's text beside its switch, the root keeps its automatic minimum:
|
||
the track, and beside a label the track, the gap and the label's longest word. So the text
|
||
beside a bare switch, or the switch's own label, wraps before the track gives way; a root
|
||
free to shrink below 52px left the track running out of it, and off a card's edge on a
|
||
phone. */
|
||
[data-md-toggle] {
|
||
min-width: auto;
|
||
}
|
||
|
||
/* The positions below are the handle's centres less half its size, measured inside the track's
|
||
2px outline. */
|
||
[data-md-switch] {
|
||
position: relative;
|
||
display: grid;
|
||
flex: none;
|
||
width: 52px;
|
||
height: 32px;
|
||
}
|
||
|
||
[data-md-switch] input {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 2px solid var(--md-sys-color-outline);
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
background-color: var(--md-sys-color-surface-container-highest);
|
||
}
|
||
|
||
[data-md-switch] input:focus-visible {
|
||
outline: 3px solid var(--md-sys-color-secondary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
[data-md-switch-handle] {
|
||
--handle: 16px;
|
||
|
||
position: absolute;
|
||
top: 50%;
|
||
inset-inline-start: calc(16px - var(--handle) / 2);
|
||
display: grid;
|
||
place-items: center;
|
||
width: var(--handle);
|
||
height: var(--handle);
|
||
translate: 0 -50%;
|
||
border-radius: var(--md-sys-shape-corner-full);
|
||
background-color: var(--md-sys-color-outline);
|
||
color: var(--md-sys-color-surface-container-highest);
|
||
pointer-events: none;
|
||
transition-property: inset-inline-start, width, height, background-color;
|
||
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
||
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
||
}
|
||
|
||
[data-md-switch-handle]::before {
|
||
inset: 50% auto auto 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
translate: -50% -50%;
|
||
}
|
||
|
||
[data-md-switch-handle] > svg {
|
||
grid-area: 1 / 1;
|
||
opacity: 0;
|
||
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
||
}
|
||
|
||
[data-md-switch][data-md-icons='both'] [data-md-switch-handle] {
|
||
--handle: 24px;
|
||
}
|
||
|
||
[data-md-switch][data-md-icons='both'] input:not(:checked) ~ [data-md-switch-handle] [data-md-switch-off],
|
||
[data-md-switch][data-md-icons] input:checked ~ [data-md-switch-handle] [data-md-switch-on] {
|
||
opacity: 1;
|
||
}
|
||
|
||
[data-md-switch] input:checked {
|
||
border-color: var(--md-sys-color-primary);
|
||
background-color: var(--md-sys-color-primary);
|
||
}
|
||
|
||
[data-md-switch] input:checked ~ [data-md-switch-handle] {
|
||
--handle: 24px;
|
||
|
||
inset-inline-start: calc(36px - var(--handle) / 2);
|
||
background-color: var(--md-sys-color-on-primary);
|
||
color: var(--md-sys-color-on-primary-container);
|
||
}
|
||
|
||
[data-md-selection-row]:active [data-md-switch] input:not(:disabled) ~ [data-md-switch-handle] {
|
||
--handle: 28px;
|
||
}
|
||
|
||
@media (hover: hover) {
|
||
[data-md-selection-row]:hover [data-md-switch] input:not(:disabled) ~ [data-md-switch-handle] {
|
||
background-color: var(--md-sys-color-on-surface-variant);
|
||
}
|
||
|
||
[data-md-selection-row]:hover [data-md-switch] input:checked:not(:disabled) ~ [data-md-switch-handle] {
|
||
background-color: var(--md-sys-color-primary-container);
|
||
}
|
||
}
|
||
|
||
[data-md-switch] input:focus-visible ~ [data-md-switch-handle],
|
||
[data-md-selection-row]:active [data-md-switch] input:not(:disabled) ~ [data-md-switch-handle] {
|
||
background-color: var(--md-sys-color-on-surface-variant);
|
||
}
|
||
|
||
[data-md-switch] input:checked:focus-visible ~ [data-md-switch-handle],
|
||
[data-md-selection-row]:active [data-md-switch] input:checked:not(:disabled) ~ [data-md-switch-handle] {
|
||
background-color: var(--md-sys-color-primary-container);
|
||
}
|
||
|
||
[data-md-switch] input:disabled {
|
||
border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
||
background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
||
}
|
||
|
||
[data-md-switch] input:disabled ~ [data-md-switch-handle] {
|
||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
||
color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
||
}
|
||
|
||
[data-md-switch] input:disabled:checked {
|
||
border-color: transparent;
|
||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
||
}
|
||
|
||
[data-md-switch] input:disabled:checked ~ [data-md-switch-handle] {
|
||
background-color: var(--md-sys-color-surface);
|
||
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
||
}
|
||
}
|