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

Add a toggle component

Browse source
This commit is contained in:
Oliver 2026-03-22 23:55:55 -06:00
parent 92553cb1f1
commit 6e2dfa1cf1
5 changed files with 165 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

55
styles/components/toggle.css Normal file
View file

@ -0,0 +1,55 @@
:host {
display: block;
}
input {
width: 0;
height: 0;
margin: 0;
padding: 0;
}
.slider {
width: var(--size, 16px);
height: var(--size, 16px);
background: var(
--slider-colour,
var(--toggle-slider-unchecked-colour)
);
transition: all var(--speed, 150ms) ease-in-out;
border-radius: 9999px;
}
label {
display: flex;
padding: var(--padding, 4px);
height: calc(var(--size, 16px) + (var(--padding, 4px) * 2));
width: calc((var(--size, 16px) * 2) + (var(--padding, 4px) * 2));
border-radius: 9999px;
background: var(
--toggle-background,
var(--toggle-background-colour)
);
box-sizing: border-box;
cursor: pointer;
/* Non-checked, clicking */
&:active .slider {
width: calc(var(--size, 16px) * 1.5);
}
/* checked, non-clicking */
& > :checked + .slider {
transform: translateX(var(--size, 16px));
background: var(
--slider-checked-colour,
var(--toggle-slider-checked-colour)
);
}
/* checked, clicking */
&:active > :checked + .slider {
width: calc(var(--size, 16px) * 1.5);
transform: translateX(calc(var(--size, 16px) * 0.5));
}
}