denozord/technitium-console
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch knob sat 7px off the edge: no preflight left the browser's button padding on ReUI buttons

Browse Source 
button[data-slot] gets padding 0 in the base layer (ReUI size utilities and the
console's own styles still win). The switch's help now lines up under its label by
the switch's 32px, and the dead .toggle input CSS from the native-switch days is gone.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
DenozordecandClaude Sonnet 5.5 committed 2026-10-30 14:55:20 +07:00
1 parent 03fed773f1
commit 7f60dc9960
3 files changed
+15 -55
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/ui/Check.module.css
+2 -54
View File
@@ -44,57 +44,5 @@
max-width: 720px;
}
/*
The switch. It is the same `input[type=checkbox]`, redrawn: the track is the
input's own box and the knob is its offset inset shadow, so neither an extra
element nor a pseudo-element the browser paints its own way is needed.
*/
.toggle input {
width: var(--ctrl-track-w);
height: var(--ctrl-track-h);
border-radius: var(--r-full);
background: var(--field);
background-image: none;
box-shadow:
var(--sunken),
inset calc(var(--ctrl-track-w) - var(--ctrl-track-h)) 0 0 -1px transparent;
position: relative;
transition:
background-color var(--t-fast),
border-color var(--t-fast);
}
/* The knob: a circle that travels from one end of the track to the other. */
.toggle input::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(var(--ctrl-track-h) - 6px);
height: calc(var(--ctrl-track-h) - 6px);
border-radius: var(--r-full);
background: var(--mute);
box-shadow: var(--shadow-knob);
transition: transform var(--t-medium), background var(--t-fast);
}
.toggle input:checked {
background-color: var(--acc);
background-image: none;
border-color: var(--acc-ink);
box-shadow: var(--edge-strong);
}
.toggle input:checked::after {
background: var(--on-acc);
transform: translateX(calc(var(--ctrl-track-w) - var(--ctrl-track-h)));
}
.toggle input:active:not(:disabled) { transform: none; }
.toggle .help { margin-left: calc(var(--ctrl-track-w) + var(--s-6)); }
@media (prefers-reduced-motion: reduce) {
.toggle input,
.toggle input::after { transition: none; }
}
/* The switch is ReUI's (32px wide), so its help lines up under the label by that width. */
.helpSwitch { margin-left: calc(32px + var(--s-6)); }