mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-02-21 16:42:05 +00:00
143 lines
2.8 KiB
SCSS
143 lines
2.8 KiB
SCSS
$padding: 3px;
|
|
$border: 2px;
|
|
$height: 1.5em;
|
|
|
|
label:has(input[type="checkbox"]) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: $padding;
|
|
cursor: pointer;
|
|
|
|
font-size: 12px;
|
|
user-select: none;
|
|
|
|
input[type="checkbox"] {
|
|
$width: calc($height * (5 / 3));
|
|
$diameter: calc($height - ((2 * $padding) + (2 * $border)));
|
|
$radius: calc($diameter / 2);
|
|
display: flex;
|
|
|
|
position: relative;
|
|
|
|
cursor: pointer;
|
|
|
|
outline: $border solid currentcolor;
|
|
outline-offset: calc(-1 * $border);
|
|
border-radius: calc($height / 2);
|
|
|
|
width: $width;
|
|
height: $height;
|
|
|
|
overflow: hidden;
|
|
color: inherit;
|
|
|
|
font-size: inherit;
|
|
|
|
&::after {
|
|
display: block;
|
|
|
|
position: absolute;
|
|
top: calc($padding + $border);
|
|
left: calc($padding + $border);
|
|
|
|
transition: all 250ms ease;
|
|
|
|
outline-color: inherit;
|
|
outline-style: solid;
|
|
outline-width: $radius;
|
|
outline-offset: calc(-1 * $radius);
|
|
border-radius: calc($radius);
|
|
|
|
width: $diameter;
|
|
height: $diameter;
|
|
content: "";
|
|
}
|
|
|
|
&:checked::after {
|
|
translate: calc($width - 2 * $diameter - $padding / 2) 0;
|
|
outline-width: calc($width - ($height - $border) + $padding);
|
|
outline-offset: calc($padding / 2);
|
|
}
|
|
}
|
|
|
|
&:has(span.icon) {
|
|
$line-width: 10%;
|
|
$side: calc(($line-width * 2) / sqrt(2));
|
|
$mid: calc($side / 2);
|
|
|
|
> input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
|
|
> span.icon {
|
|
display: block;
|
|
position: relative;
|
|
|
|
clip-path: polygon(
|
|
0% $side,
|
|
$mid $mid,
|
|
calc(100% - $mid) calc(100% - $mid),
|
|
calc(100% - $side) 100%,
|
|
0% 100%,
|
|
0% $side,
|
|
$side 0%,
|
|
100% calc(100% - $side),
|
|
calc(100% - $side) 100%,
|
|
calc(100% - $side) 100%,
|
|
100% calc(100% - $side),
|
|
100% calc(100% - $side),
|
|
100% 0%,
|
|
$side 0%
|
|
);
|
|
|
|
transition: all 250ms ease;
|
|
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
font-size: inherit;
|
|
|
|
&::before {
|
|
display: block;
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0) rotate(45deg);
|
|
|
|
transition: all 250ms ease;
|
|
|
|
background-color: currentcolor;
|
|
|
|
width: calc(100% * sqrt(2));
|
|
height: $line-width;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
&:has(:checked) > span.icon {
|
|
clip-path: polygon(
|
|
0% $side,
|
|
$mid $mid,
|
|
calc(100% - $mid) calc(100% - $mid),
|
|
calc(100% - $side) 100%,
|
|
0% 100%,
|
|
0% $side,
|
|
$side 0%,
|
|
100% calc(100% - $side),
|
|
calc(100% - $side) 100%,
|
|
0% $side,
|
|
$side 0%,
|
|
100% calc(100% - $side),
|
|
100% 0%,
|
|
$side 0%
|
|
);
|
|
|
|
&::before {
|
|
transform: translate(-50%, 0) rotate(45deg) translateX(-100%);
|
|
}
|
|
}
|
|
}
|
|
}
|