mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-01-05 01:22:50 +00:00
66 lines
1.3 KiB
SCSS
66 lines
1.3 KiB
SCSS
$padding: 3px;
|
|
$border: 2px;
|
|
$height: 1.5em;
|
|
|
|
label:has(input[type="checkbox"]) {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
display: flex;
|
|
gap: $padding;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
font-size: 12px;
|
|
|
|
input[type="checkbox"] {
|
|
$width: calc($height * (5 / 3));
|
|
$diameter: calc($height - ((2 * $padding) + (2 * $border)));
|
|
$radius: calc($diameter / 2);
|
|
|
|
cursor: pointer;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
display: flex;
|
|
|
|
width: $width;
|
|
height: $height;
|
|
|
|
font-size: inherit;
|
|
color: inherit;
|
|
|
|
border-radius: calc($height / 2);
|
|
outline: $border solid currentcolor;
|
|
outline-offset: calc(-1 * $border);
|
|
|
|
&::after {
|
|
content: "";
|
|
|
|
position: absolute;
|
|
top: calc($padding + $border);
|
|
left: calc($padding + $border);
|
|
|
|
display: block;
|
|
|
|
width: $diameter;
|
|
height: $diameter;
|
|
|
|
border-radius: calc($radius);
|
|
outline-color: inherit;
|
|
outline-style: solid;
|
|
outline-width: $radius;
|
|
outline-offset: calc(-1 * $radius);
|
|
|
|
transition: all 250ms ease;
|
|
}
|
|
|
|
&:checked::after {
|
|
translate: calc($width - 2 * $diameter - $padding / 2) 0;
|
|
outline-width: calc($width - ($height - $border) + $padding);
|
|
outline-offset: calc($padding / 2);
|
|
}
|
|
}
|
|
}
|