ASCII text
1
/* Checkbox */
2
input[type="checkbox"]:not(.switch) {
4
width: var(--size-checkbox);
5
height: var(--size-checkbox);
6
aspect-ratio: 1/1;
7
appearance: none; /* Remove browser default styles */
8
border: var(--border-checkbox);
9
border-radius: var(--radius-checkbox);
10
color: var(--color-checkbox-text);
11
background: var(--color-checkbox);
12
box-shadow: inset 0 0 0 0 transparent, var(--shadow-form);
13
/* Centre the checkmark */
14
display: inline-flex;
15
align-items: center;
16
justify-content: center;
17
position: relative;
18
cursor: pointer; /* a11y */
19
}
20
input[type="checkbox"]:not(.switch):hover {
22
box-shadow: inset 0 0 0 0 transparent, var(--shadow-form-hover);
23
border: var(--border-checkbox-hover);
24
background: var(--color-checkbox-hover);
25
color: var(--color-checkbox-hover-text);
26
}
27
input[type="checkbox"]:not(.switch):checked {
29
/* Box shadows are shown when printed */
30
box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-checkbox-active), var(--shadow-form-checked);
31
border: var(--border-checkbox-checked);
32
color: var(--color-checkbox-active-text);
33
}
34
input[type="checkbox"]:not(.switch):checked:hover {
36
box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-checkbox-active-hover), var(--shadow-form-checked-hover);
37
border: var(--border-checkbox-checked-hover);
38
color: var(--color-checkbox-active-hover-text);
39
}
40
input[type="checkbox"]:not(.switch):indeterminate {
42
/* Box shadows are shown when printed */
43
box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-checkbox-indeterminate), var(--shadow-form-indeterminate);
44
border: var(--border-checkbox-indeterminate);
45
color: var(--color-checkbox-indeterminate-text);
46
}
47
input[type="checkbox"]:not(.switch):indeterminate:hover {
49
box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-checkbox-indeterminate-hover), var(--shadow-form-indeterminate-hover);
50
border: var(--border-checkbox-indeterminate-hover);
51
color: var(--color-checkbox-active-hover-text);
52
}
53
input[type="checkbox"]:not(.switch):indeterminate:hover::after {
55
background: var(--color-checkbox-indeterminate-hover-text);
56
}
57
input[type="checkbox"]:not(.switch):indeterminate::after {
59
/* Position directly on top of the checkbox */
60
position: absolute;
61
width: var(--size-checkbox);
62
height: var(--size-checkbox);
63
content: "";
64
background: var(--color-checkbox-indeterminate-text);
65
/* Display the checkmark */
66
-webkit-mask: url("./icons/checkbox-indeterminate.svg");
67
mask: url("./icons/checkbox-indeterminate.svg");
68
}
69
input[type="checkbox"]:not(.switch):checked::after {
71
/* Position directly on top of the checkbox */
72
position: absolute;
73
width: var(--size-checkbox);
74
height: var(--size-checkbox);
75
content: "";
76
background: var(--color-checkbox-active-text);
77
/* Display the checkmark */
78
-webkit-mask: url("./icons/checkbox.svg");
79
mask: url("./icons/checkbox.svg");
80
}
81
input[type="checkbox"]:not(.switch):checked:hover::after {
83
background: var(--color-checkbox-active-hover-text);
84
}
85
label:has(input[type="checkbox"]) {
87
display: inline-flex; /* So they are aligned */
88
gap: var(--gap-label-checkbox);
89
align-items: center;
90
cursor: pointer; /* a11y */
91
}
92
/* Radio */
94
input[type="radio"]:not(.switch) {
96
width: var(--size-checkbox);
97
height: var(--size-checkbox);
98
aspect-ratio: 1/1;
99
appearance: none; /* Remove browser default styles */
100
border: var(--border-radio);
101
border-radius: var(--radius-radio);
102
color: var(--color-radio-text);
103
background: var(--color-radio);
104
box-shadow: inset 0 0 0 0 transparent, var(--shadow-form);
105
/* Centre the checkmark */
106
display: inline-flex;
107
align-items: center;
108
justify-content: center;
109
position: relative;
110
cursor: pointer; /* a11y */
111
}
112
input[type="radio"]:not(.switch):hover {
114
box-shadow: inset 0 0 0 0 transparent, var(--shadow-form-hover);
115
border: var(--border-radio-hover);
116
background: var(--color-radio-hover);
117
color: var(--color-radio-hover-text);
118
}
119
input[type="radio"]:not(.switch):checked {
121
/* Box shadows are shown when printed */
122
box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-radio-active), var(--shadow-form-checked);
123
border: var(--border-radio-checked);
124
color: var(--color-radio-active-text);
125
}
126
input[type="radio"]:not(.switch):checked:hover {
128
box-shadow: inset 0 0 0 var(--size-checkbox) var(--color-radio-active-hover), var(--shadow-form-checked-hover);
129
border: var(--border-checkbox-checked-hover);
130
color: var(--color-radio-active-hover-text);
131
}
132
input[type="radio"]:not(.switch):checked:hover::after {
134
background: var(--color-radio-active-hover-text);
135
}
136
input[type="radio"]:not(.switch):checked::after {
138
/* Position directly on top of the checkbox */
139
position: absolute;
140
width: var(--size-checkbox);
141
height: var(--size-checkbox);
142
content: "";
143
background: var(--color-radio-active-text);
144
/* Display the checkmark */
145
-webkit-mask: url("./icons/radio.svg");
146
mask: url("./icons/radio.svg");
147
}
148
label:has(input[type="radio"]) {
150
display: inline-flex; /* So they are aligned */
151
gap: var(--gap-label-checkbox);
152
align-items: center;
153
cursor: pointer; /* a11y */
154
}
155
/* Checkbox - switch style */
157
:is(input[type="checkbox"], input[type=radio]).switch {
159
appearance: none;
160
width: var(--width-switch);
161
height: var(--height-switch);
162
background: var(--color-switch);
163
border-radius: var(--radius-switch);
164
cursor: pointer;
165
display: flex;
166
align-items: center;
167
justify-content: flex-start;
168
}
169
:is(input[type="checkbox"], input[type=radio]).switch:checked {
171
background: var(--color-switch-on);
172
border-radius: var(--radius-switch);
173
cursor: pointer;
174
display: flex;
175
align-items: center;
176
justify-content: flex-start;
177
}
178
:is(input[type="checkbox"], input[type=radio]).switch::after {
180
background: var(--color-switch-thumb);
181
box-shadow: var(--shadow-switch-thumb);
182
content: "";
183
width: var(--width-switch-thumb);
184
height: var(--height-switch-thumb);
185
border-radius: var(--radius-switch-thumb);
186
transform: translateX(calc(var(--padding-switch-thumb)));
187
}
188
:is(input[type="checkbox"], input[type=radio]).switch:checked::after {
190
background-color: var(--color-switch-thumb-on);
191
box-shadow: var(--shadow-switch-thumb-on);
192
border: var(--border-switch-thumb-on);
193
transform: translateX(calc(var(--width-switch) - var(--width-switch-thumb-on) - var(--padding-switch-thumb-on)));
194
border-radius: var(--radius-switch-thumb-on);
195
}
196
:is(input[type="checkbox"], input[type=radio]).switch:hover {
198
background-color: var(--color-switch-hover);
199
box-shadow: var(--shadow-switch-hover);
200
border: var(--border-switch-hover);
201
}
202
:is(input[type="checkbox"], input[type=radio]).switch:hover::after {
204
background-color: var(--color-switch-thumb-hover);
205
box-shadow: var(--shadow-switch-thumb-hover);
206
border: var(--border-switch-thumb-hover);
207
width: var(--width-switch-thumb-hover);
208
height: var(--height-switch-thumb-hover);
209
}
210
:is(input[type="checkbox"], input[type=radio]).switch:checked:hover {
212
background-color: var(--color-switch-on-hover);
213
box-shadow: var(--shadow-switch-on-hover);
214
border: var(--border-switch-on-hover);
215
}
216
:is(input[type="checkbox"], input[type=radio]).switch:checked:hover::after {
218
background-color: var(--color-switch-thumb-on-hover);
219
box-shadow: var(--shadow-switch-thumb-on-hover);
220
border: var(--border-switch-thumb-on-hover);
221
width: var(--width-switch-thumb-on-hover);
222
height: var(--height-switch-thumb-on-hover);
223
}
224