Andreas Reinhold / reiniandClaude Opus 5
f86afc0542
<x-checkbox> renders data-md-checkbox, its box, tick and dash, and its row, text and errors as data-md-* attributes; the 18px tick takes a size prop and a label-less box md-touch-target (plan step 36). selection.css moves into material.components as the row, text and state layer the three controls share, and each control's drawing goes to its own file: checkbox.css, radio.css, toggle.css, on the state tokens. The radio and the switch take the renamed shared hooks now and lose their layout classes in their own commits. field.js follows data-md-indeterminate. Renaming the switch's data-handle also stops selection.css matching the slider's handles, which it drew 24px above the track. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
80 lines
2.6 KiB
CSS
80 lines
2.6 KiB
CSS
/*
|
|
* <x-radio>: M3's radio buttons (resources/views/components/radio.blade.php), on the row the
|
|
* selection controls share (components/selection.css).
|
|
*
|
|
* RadioButtonTokens (androidx Compose Material 3, Apache-2.0): a 20px ring with a 2px
|
|
* on-surface-variant outline, primary once chosen, and a 10px primary dot that grows in on the fast
|
|
* spatial spring; the state layer a 40px circle around it. With the server's error the ring and
|
|
* the dot are error. Disabled, both are on-surface at 38%.
|
|
*
|
|
* [data-md-radio-button] the ring: input, [data-md-radio-dot]
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './selection.css';
|
|
|
|
@layer material.components {
|
|
[data-md-radio-button] {
|
|
position: relative;
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
[data-md-radio-button] > * {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
[data-md-radio-button]::before {
|
|
inset: -10px;
|
|
}
|
|
|
|
[data-md-radio-button]:has(input:focus-visible)::before {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
}
|
|
|
|
[data-md-radio-button] input {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--md-sys-color-on-surface-variant);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
[data-md-radio-button] [data-md-radio-dot] {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-primary);
|
|
scale: 0;
|
|
pointer-events: none;
|
|
transition: scale var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-radio-button] input:checked {
|
|
border-color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-radio-button] input:checked ~ [data-md-radio-dot] {
|
|
scale: 1;
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-radio-button] input {
|
|
border-color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-radio-button] [data-md-radio-dot] {
|
|
background-color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-radio-button] 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-radio-button] input:disabled ~ [data-md-radio-dot] {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
}
|