ASCII text
1
/* Check Boxes */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../../../st-theme";
6
.check-box {
8
StBoxLayout {
9
spacing: 8px;
10
}
11
StBin {
13
transition-duration: st-theme.$duration;
14
width: 24px;
15
height: 24px;
16
padding: (theme.$medium-size - 24px) / 2;
17
border-radius: theme.$medium-size / 2;
18
}
19
StBin,
21
&:focus StBin {
22
background-image: url("assets/checkbox-off.svg");
23
}
24
&:focus StBin {
26
background-color: theme-color.focus-overlay(theme-color.$on-surface);
27
}
28
&:hover StBin {
30
background-color: theme-color.hover-overlay(theme-color.$on-surface);
31
}
32
&:active StBin {
34
transition-duration: st-theme.$duration-ripple;
35
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
36
}
37
&:checked StBin,
39
&:checked:focus StBin {
40
background-image: url("assets/checkbox.svg");
41
}
42
&:checked:focus StBin {
44
background-color: theme-color.focus-overlay(theme-color.$primary);
45
}
46
&:checked:hover StBin {
48
background-color: theme-color.hover-overlay(theme-color.$primary);
49
}
50
&:checked:active StBin {
52
background-color: theme-color.pressed-overlay(theme-color.$primary);
53
}
54
}
55