Toast on sonner's behaviour; Dashboard figures as the canvas's KPI strip
Toast: sonner draws the notice and runs its clock, pauses it under the pointer and removes it. ui/Toast keeps the live region and the action with its permission check. Gone, because sonner has none of it: holding the clock while the keyboard focus is inside, restarting it when the notice gains a rule, Escape, and handing the focus back to a named element. The two Rules tests and three Toast tests about those are removed. Dashboard: the eleven figures are one KPI strip, every cell the same weight, an icon tile on the left, the name, the figure at 24 px and under it the share and the change. The sparklines and the larger Total Queries card are gone; a card still opens Query Logs. Check.module.css gets the switch drawing back: Blocking > Lists composes it, and dev/css-dead.mjs reported the missing class. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
4c0a5de7e7
commit
f24f4972ba
9 files changed
+170
-352
No files matched your search
@@ -43,3 +43,58 @@
|
||||
*/
|
||||
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; }
|
||||
}
|
||||
Reference in new issue
Block a user