55 lines
1.1 KiB
CSS
55 lines
1.1 KiB
CSS
: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));
|
|
}
|
|
}
|