Foundry/taf
1
0
Fork 0
Code Issues 12 Pull requests Releases 6 Wiki Activity Actions

Update the toggle so that the animation plays fully before the events are emitted

Browse source
This commit is contained in:
Oliver 2026-03-28 20:01:16 -06:00
parent e4b6a5c635
commit b20240699b
2 changed files with 23 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

8
styles/components/toggle.css
View file

@ -16,11 +16,11 @@ input {
--slider-colour,
var(--toggle-slider-unchecked-colour)
);
transition: all var(--speed, 150ms) ease-in-out;
transition: all 150ms ease-in-out;
border-radius: 9999px;
}
label {
.toggle {
display: flex;
padding: var(--padding, 4px);
height: calc(var(--size, 16px) + (var(--padding, 4px) * 2));
@ -34,7 +34,7 @@ label {
cursor: pointer;
/* Non-checked, clicking */
&:active .slider {
&:is(&:active, &.active) .slider {
width: calc(var(--size, 16px) * 1.5);
}
@ -48,7 +48,7 @@ label {
}
/* checked, clicking */
&:active > :checked + .slider {
&:is(&:active, &.active) > :checked + .slider {
width: calc(var(--size, 16px) * 1.5);
transform: translateX(calc(var(--size, 16px) * 0.5));
}