@utrecht/component-library-css 1.0.0-alpha.219 → 1.0.0-alpha.221
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/html.css +506 -2097
- package/dist/index.css +702 -288
- package/package.json +3 -3
- package/src/html.scss +1 -25
package/dist/html.css
CHANGED
|
@@ -8,62 +8,348 @@
|
|
|
8
8
|
* @license EUPL-1.2
|
|
9
9
|
* Copyright (c) 2021 Robbert Broersma
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
/* Collection of all semantic HTML styles in the component library */
|
|
12
|
+
/* stylelint-disable no-invalid-position-at-import-rule */
|
|
13
|
+
.utrecht-html {
|
|
14
|
+
/**
|
|
15
|
+
* @license EUPL-1.2
|
|
16
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
17
|
+
*/
|
|
18
|
+
/**
|
|
19
|
+
* @license EUPL-1.2
|
|
20
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
21
|
+
*/
|
|
22
|
+
/**
|
|
23
|
+
* @license EUPL-1.2
|
|
24
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
25
|
+
*/
|
|
26
|
+
/**
|
|
27
|
+
* @license EUPL-1.2
|
|
28
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
29
|
+
*/
|
|
30
|
+
/**
|
|
31
|
+
* @license EUPL-1.2
|
|
32
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
33
|
+
*/
|
|
34
|
+
/**
|
|
35
|
+
* @license EUPL-1.2
|
|
36
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
37
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
38
|
+
*/
|
|
39
|
+
/**
|
|
40
|
+
* @license EUPL-1.2
|
|
41
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
42
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
43
|
+
*/
|
|
44
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
45
|
+
/* override the `:focus` selector above */
|
|
46
|
+
/* stylelint-disable-next-line no-descending-specificity */
|
|
47
|
+
/**
|
|
48
|
+
* @license EUPL-1.2
|
|
49
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
50
|
+
*/
|
|
51
|
+
/**
|
|
52
|
+
* @license EUPL-1.2
|
|
53
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
54
|
+
*/
|
|
55
|
+
/**
|
|
56
|
+
* @license EUPL-1.2
|
|
57
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
58
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
59
|
+
*/
|
|
60
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
61
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
62
|
+
/**
|
|
63
|
+
* @license EUPL-1.2
|
|
64
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
65
|
+
*/
|
|
66
|
+
/**
|
|
67
|
+
* @license EUPL-1.2
|
|
68
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
69
|
+
*/
|
|
70
|
+
/**
|
|
71
|
+
* @license EUPL-1.2
|
|
72
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
73
|
+
*/
|
|
74
|
+
/**
|
|
75
|
+
* @license EUPL-1.2
|
|
76
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
77
|
+
*/
|
|
78
|
+
/**
|
|
79
|
+
* @license EUPL-1.2
|
|
80
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
81
|
+
*/
|
|
82
|
+
/**
|
|
83
|
+
* @license EUPL-1.2
|
|
84
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
85
|
+
*/
|
|
86
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
87
|
+
/**
|
|
88
|
+
* @license EUPL-1.2
|
|
89
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
90
|
+
*/
|
|
91
|
+
/**
|
|
92
|
+
* @license EUPL-1.2
|
|
93
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
94
|
+
*/
|
|
95
|
+
/**
|
|
96
|
+
* @license EUPL-1.2
|
|
97
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
98
|
+
*/
|
|
99
|
+
/**
|
|
100
|
+
* @license EUPL-1.2
|
|
101
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
102
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
103
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
104
|
+
*/
|
|
105
|
+
/**
|
|
106
|
+
* @license EUPL-1.2
|
|
107
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
108
|
+
*/
|
|
109
|
+
/**
|
|
110
|
+
* @license EUPL-1.2
|
|
111
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
112
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
113
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
114
|
+
*/
|
|
115
|
+
/**
|
|
116
|
+
* @license EUPL-1.2
|
|
117
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
118
|
+
*/
|
|
119
|
+
/**
|
|
120
|
+
* @license EUPL-1.2
|
|
121
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
122
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
123
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
124
|
+
*/
|
|
125
|
+
/**
|
|
126
|
+
* @license EUPL-1.2
|
|
127
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
128
|
+
*/
|
|
129
|
+
/**
|
|
130
|
+
* @license EUPL-1.2
|
|
131
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
132
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
133
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
134
|
+
*/
|
|
135
|
+
/**
|
|
136
|
+
* @license EUPL-1.2
|
|
137
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
138
|
+
*/
|
|
139
|
+
/**
|
|
140
|
+
* @license EUPL-1.2
|
|
141
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
142
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
143
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
144
|
+
*/
|
|
145
|
+
/**
|
|
146
|
+
* @license EUPL-1.2
|
|
147
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
148
|
+
*/
|
|
149
|
+
/**
|
|
150
|
+
* @license EUPL-1.2
|
|
151
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
152
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
153
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
154
|
+
*/
|
|
155
|
+
/**
|
|
156
|
+
* @license EUPL-1.2
|
|
157
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
158
|
+
*/
|
|
159
|
+
/**
|
|
160
|
+
* @license EUPL-1.2
|
|
161
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
162
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
163
|
+
*/
|
|
164
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
165
|
+
/**
|
|
166
|
+
* @license EUPL-1.2
|
|
167
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
168
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
169
|
+
*/
|
|
170
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
171
|
+
/*
|
|
172
|
+
|
|
173
|
+
# CSS implementation
|
|
174
|
+
|
|
175
|
+
## `text-decoration-skip`
|
|
176
|
+
|
|
177
|
+
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
178
|
+
For example by obscuring Arabic diacritics.
|
|
179
|
+
|
|
180
|
+
However, the combination of a greater thickness and skipping this thick underline
|
|
181
|
+
leads to a very unappealing rendering of the underline. To avoid this,
|
|
182
|
+
`text-decoration-skip` is disabled for interactive states.
|
|
183
|
+
|
|
184
|
+
For design token configurations that have identical thickness for normal and interactive
|
|
185
|
+
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
186
|
+
from an interrupted to an uninterrupted underline (for some texts).
|
|
187
|
+
|
|
188
|
+
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
193
|
+
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
194
|
+
not make this too inconvenient.
|
|
195
|
+
|
|
196
|
+
---
|
|
197
|
+
|
|
198
|
+
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
199
|
+
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
200
|
+
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
201
|
+
|
|
202
|
+
## `text-decoration-thickness`
|
|
203
|
+
|
|
204
|
+
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
205
|
+
|
|
206
|
+
---
|
|
207
|
+
|
|
208
|
+
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
209
|
+
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
210
|
+
the underline offset also seems to increase along with the thickness, which effectively means
|
|
211
|
+
the underline is closer to the next line than in Safari.
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
216
|
+
use the `max()` function to ensure the underline remains visible for every font size.
|
|
217
|
+
|
|
218
|
+
## `transition`
|
|
219
|
+
|
|
220
|
+
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
221
|
+
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
222
|
+
|
|
223
|
+
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
224
|
+
|
|
225
|
+
*/
|
|
226
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
227
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
228
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
229
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
230
|
+
/**
|
|
231
|
+
* @license EUPL-1.2
|
|
232
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
233
|
+
*/
|
|
234
|
+
/**
|
|
235
|
+
* @license EUPL-1.2
|
|
236
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
237
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
238
|
+
*/
|
|
239
|
+
/**
|
|
240
|
+
* @license EUPL-1.2
|
|
241
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
242
|
+
*/
|
|
243
|
+
/**
|
|
244
|
+
* @license EUPL-1.2
|
|
245
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
246
|
+
*/
|
|
247
|
+
/* stylelint-disable selector-class-pattern */
|
|
248
|
+
/**
|
|
249
|
+
* @license EUPL-1.2
|
|
250
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
251
|
+
*/
|
|
252
|
+
/**
|
|
253
|
+
* @license EUPL-1.2
|
|
254
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
255
|
+
*/
|
|
256
|
+
/**
|
|
257
|
+
* @license EUPL-1.2
|
|
258
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
259
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
260
|
+
*/
|
|
261
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
262
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
263
|
+
/**
|
|
264
|
+
* @license EUPL-1.2
|
|
265
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
266
|
+
*/
|
|
267
|
+
/**
|
|
268
|
+
* @license EUPL-1.2
|
|
269
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
270
|
+
*/
|
|
271
|
+
/**
|
|
272
|
+
* @license EUPL-1.2
|
|
273
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
274
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
275
|
+
*/
|
|
276
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
277
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
278
|
+
/**
|
|
279
|
+
* @license EUPL-1.2
|
|
280
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
281
|
+
*/
|
|
282
|
+
/**
|
|
283
|
+
* @license EUPL-1.2
|
|
284
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
285
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
286
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
287
|
+
*/
|
|
288
|
+
/**
|
|
289
|
+
* @license EUPL-1.2
|
|
290
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
291
|
+
*/
|
|
292
|
+
/**
|
|
293
|
+
* @license EUPL-1.2
|
|
294
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
295
|
+
*/
|
|
296
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
297
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
298
|
+
/* stylelint-disable selector-class-pattern */
|
|
299
|
+
/**
|
|
300
|
+
* @license EUPL-1.2
|
|
301
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
302
|
+
*/
|
|
303
|
+
/**
|
|
304
|
+
* @license EUPL-1.2
|
|
305
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
306
|
+
*/
|
|
307
|
+
/**
|
|
308
|
+
* @license EUPL-1.2
|
|
309
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
310
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
311
|
+
*/
|
|
312
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
313
|
+
/**
|
|
314
|
+
* @license EUPL-1.2
|
|
315
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
316
|
+
*/
|
|
317
|
+
/**
|
|
318
|
+
* @license EUPL-1.2
|
|
319
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
320
|
+
*/
|
|
321
|
+
/**
|
|
322
|
+
* @license EUPL-1.2
|
|
323
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
324
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
325
|
+
*/
|
|
326
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
327
|
+
/**
|
|
328
|
+
* @license EUPL-1.2
|
|
329
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
330
|
+
*/
|
|
331
|
+
/**
|
|
332
|
+
* @license EUPL-1.2
|
|
333
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
334
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
335
|
+
*/
|
|
336
|
+
}
|
|
337
|
+
.utrecht-html article {
|
|
16
338
|
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
17
339
|
}
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* @license EUPL-1.2
|
|
21
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
22
|
-
*/
|
|
23
|
-
/**
|
|
24
|
-
* @license EUPL-1.2
|
|
25
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
26
|
-
*/
|
|
27
|
-
.utrecht-blockquote, .utrecht-html blockquote {
|
|
340
|
+
.utrecht-html blockquote {
|
|
28
341
|
font-family: var(--utrecht-document-font-family);
|
|
29
342
|
font-size: var(--utrecht-blockquote-font-size);
|
|
30
343
|
margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
|
|
31
344
|
margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.utrecht-blockquote__attribution {
|
|
35
|
-
color: var(--utrecht-blockquote-attribution-color, inherit);
|
|
36
|
-
font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.utrecht-blockquote__content, .utrecht-html blockquote {
|
|
40
345
|
--utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
|
|
41
346
|
--utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
42
347
|
color: var(--utrecht-blockquote-content-color, inherit);
|
|
43
348
|
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.utrecht-blockquote--distanced, .utrecht-html blockquote {
|
|
47
349
|
margin-block-end: var(--utrecht-blockquote-margin-block-end);
|
|
48
350
|
margin-block-start: var(--utrecht-blockquote-margin-block-start);
|
|
49
351
|
}
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* @license EUPL-1.2
|
|
53
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
54
|
-
*/
|
|
55
|
-
/**
|
|
56
|
-
* @license EUPL-1.2
|
|
57
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
58
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
59
|
-
*/
|
|
60
|
-
/**
|
|
61
|
-
* @license EUPL-1.2
|
|
62
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
63
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
64
|
-
*/
|
|
65
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
66
|
-
.utrecht-button, .utrecht-html input[type=button i],
|
|
352
|
+
.utrecht-html input[type=button i],
|
|
67
353
|
.utrecht-html input[type=reset i],
|
|
68
354
|
.utrecht-html input[type=submit i],
|
|
69
355
|
.utrecht-html button {
|
|
@@ -89,238 +375,74 @@
|
|
|
89
375
|
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
90
376
|
text-transform: var(--utrecht-button-text-transform);
|
|
91
377
|
user-select: none;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.utrecht-button--distanced, .utrecht-html input[type=button i],
|
|
95
|
-
.utrecht-html input[type=reset i],
|
|
96
|
-
.utrecht-html input[type=submit i],
|
|
97
|
-
.utrecht-html button {
|
|
98
378
|
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
99
379
|
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
100
380
|
margin-inline-end: var(--utrecht-button-margin-inline-end);
|
|
101
381
|
margin-inline-start: var(--utrecht-button-margin-inline-start);
|
|
102
382
|
}
|
|
103
|
-
|
|
104
|
-
.utrecht-button--submit, .utrecht-html button[type=submit i],
|
|
383
|
+
.utrecht-html button[type=submit i],
|
|
105
384
|
.utrecht-html input[type=submit i] {
|
|
106
|
-
/* lower priority specificty than busy and disabled cursor */
|
|
107
385
|
cursor: var(--utrecht-action-submit-cursor);
|
|
108
386
|
}
|
|
109
|
-
|
|
110
|
-
.utrecht-button--busy, .utrecht-html button[aria-busy=true],
|
|
111
|
-
.utrecht-html button[aria-disabled=true][aria-busy=true],
|
|
112
|
-
.utrecht-html button:disabled[aria-busy=true] {
|
|
113
|
-
cursor: var(--utrecht-action-busy-cursor);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.utrecht-button:disabled, .utrecht-html input[type=button i]:disabled,
|
|
117
|
-
.utrecht-html input[type=reset i]:disabled,
|
|
118
|
-
.utrecht-html input[type=submit i]:disabled,
|
|
119
387
|
.utrecht-html button:disabled,
|
|
120
|
-
.utrecht-button--disabled,
|
|
121
388
|
.utrecht-html button[aria-disabled=true] {
|
|
122
389
|
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
123
390
|
border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
|
|
124
391
|
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
125
392
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
126
393
|
}
|
|
127
|
-
|
|
128
|
-
.utrecht-button
|
|
129
|
-
.utrecht-html
|
|
130
|
-
|
|
131
|
-
|
|
394
|
+
.utrecht-html button[aria-busy=true],
|
|
395
|
+
.utrecht-html button[aria-disabled=true][aria-busy=true],
|
|
396
|
+
.utrecht-html button:disabled[aria-busy=true] {
|
|
397
|
+
cursor: var(--utrecht-action-busy-cursor);
|
|
398
|
+
}
|
|
132
399
|
.utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
|
|
133
400
|
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
134
401
|
border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
|
|
135
402
|
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
136
403
|
}
|
|
137
|
-
|
|
138
|
-
.utrecht-button--focus-visible, .utrecht-html button:focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
139
|
-
.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
140
|
-
.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
141
|
-
.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
142
|
-
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
143
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
144
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
145
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
146
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
147
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.utrecht-button--focus, .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled), .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
151
|
-
.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
152
|
-
.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
153
|
-
.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
154
|
-
background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
|
|
155
|
-
border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
|
|
156
|
-
color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
/* override the `:focus` selector above */
|
|
160
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
161
|
-
.utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
|
|
162
|
-
.utrecht-html input[type=reset i]:focus:not(:focus-visible),
|
|
163
|
-
.utrecht-html input[type=submit i]:focus:not(:focus-visible),
|
|
164
|
-
.utrecht-html button:focus:not(:focus-visible) {
|
|
165
|
-
/* undo focus ring */
|
|
166
|
-
box-shadow: none;
|
|
167
|
-
outline-style: none;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
|
|
171
|
-
.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
172
|
-
.utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
173
|
-
.utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
174
|
-
.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
404
|
+
.utrecht-html button:hover:not([aria-disabled=true]):not(:disabled) {
|
|
175
405
|
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
176
406
|
border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
|
|
177
407
|
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
178
408
|
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
179
409
|
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
|
|
185
|
-
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.utrecht-button--primary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--primary-action:not(:disabled):hover:not([aria-disabled=true]),
|
|
189
|
-
.utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
190
|
-
.utrecht-html input.utrecht-button--primary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
191
|
-
.utrecht-html input.utrecht-button--primary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
192
|
-
.utrecht-html input.utrecht-button--primary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
193
|
-
background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
194
|
-
border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
195
|
-
color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.utrecht-button--primary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--primary-action[type=button i]:disabled,
|
|
199
|
-
.utrecht-html input.utrecht-button--primary-action[type=reset i]:disabled,
|
|
200
|
-
.utrecht-html input.utrecht-button--primary-action[type=submit i]:disabled,
|
|
201
|
-
.utrecht-html button.utrecht-button--primary-action:disabled,
|
|
202
|
-
.utrecht-button--primary-action.utrecht-button--disabled,
|
|
203
|
-
.utrecht-html button.utrecht-button--primary-action[aria-disabled=true] {
|
|
204
|
-
background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
205
|
-
border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
206
|
-
color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.utrecht-button--secondary-action {
|
|
210
|
-
background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
|
|
211
|
-
border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
|
|
212
|
-
border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
|
|
213
|
-
color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
.utrecht-button--secondary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--secondary-action:not(:disabled):hover:not([aria-disabled=true]),
|
|
217
|
-
.utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
218
|
-
.utrecht-html input.utrecht-button--secondary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
219
|
-
.utrecht-html input.utrecht-button--secondary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
220
|
-
.utrecht-html input.utrecht-button--secondary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
221
|
-
background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
222
|
-
border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
223
|
-
color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.utrecht-button--secondary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--secondary-action[type=button i]:disabled,
|
|
227
|
-
.utrecht-html input.utrecht-button--secondary-action[type=reset i]:disabled,
|
|
228
|
-
.utrecht-html input.utrecht-button--secondary-action[type=submit i]:disabled,
|
|
229
|
-
.utrecht-html button.utrecht-button--secondary-action:disabled,
|
|
230
|
-
.utrecht-button--secondary-action.utrecht-button--disabled,
|
|
231
|
-
.utrecht-html button.utrecht-button--secondary-action[aria-disabled=true] {
|
|
232
|
-
background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
233
|
-
border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
234
|
-
color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.utrecht-button--subtle {
|
|
238
|
-
background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
|
|
239
|
-
border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
|
|
240
|
-
border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
|
|
241
|
-
color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
.utrecht-button--subtle.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--subtle:not(:disabled):hover:not([aria-disabled=true]),
|
|
245
|
-
.utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
246
|
-
.utrecht-html input.utrecht-button--subtle[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
247
|
-
.utrecht-html input.utrecht-button--subtle[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
248
|
-
.utrecht-html input.utrecht-button--subtle[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
249
|
-
background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
250
|
-
border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
251
|
-
color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
410
|
+
.utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
|
|
411
|
+
background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
|
|
412
|
+
border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
|
|
413
|
+
color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
|
|
252
414
|
}
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
261
|
-
border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
262
|
-
color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
415
|
+
.utrecht-html button:focus-visible {
|
|
416
|
+
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
417
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
418
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
419
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
420
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
421
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
263
422
|
}
|
|
264
|
-
|
|
265
|
-
/* override the `:focus` selector above */
|
|
266
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
267
|
-
/**
|
|
268
|
-
* @license EUPL-1.2
|
|
269
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
270
|
-
*/
|
|
271
|
-
/**
|
|
272
|
-
* @license EUPL-1.2
|
|
273
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
274
|
-
*/
|
|
275
|
-
/**
|
|
276
|
-
* @license EUPL-1.2
|
|
277
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
278
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
279
|
-
*/
|
|
280
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
281
|
-
.utrecht-checkbox, .utrecht-html input[type=checkbox i] {
|
|
423
|
+
.utrecht-html input[type=checkbox i] {
|
|
282
424
|
margin-block-end: 0;
|
|
283
425
|
/* reset native margin for input[type="checkbox"] */
|
|
284
426
|
margin-block-start: 0;
|
|
285
427
|
margin-inline-end: 0;
|
|
286
428
|
margin-inline-start: 0;
|
|
287
429
|
}
|
|
288
|
-
|
|
289
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
290
|
-
.utrecht-checkbox--disabled, .utrecht-checkbox--html-input:disabled, .utrecht-html input[type=checkbox i]:disabled {
|
|
430
|
+
.utrecht-html input[type=checkbox i]:disabled {
|
|
291
431
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
292
432
|
}
|
|
293
|
-
|
|
294
|
-
.utrecht-checkbox--focus-visible {
|
|
295
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
296
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
297
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
298
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
299
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
.utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
|
|
433
|
+
.utrecht-html input[type=checkbox i]:focus {
|
|
303
434
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
304
435
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
305
436
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
306
437
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
307
438
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
308
439
|
}
|
|
309
|
-
.utrecht-
|
|
440
|
+
.utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
|
|
310
441
|
/* undo focus ring */
|
|
311
442
|
box-shadow: none;
|
|
312
443
|
outline-style: none;
|
|
313
444
|
}
|
|
314
|
-
|
|
315
|
-
/**
|
|
316
|
-
* @license EUPL-1.2
|
|
317
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
318
|
-
*/
|
|
319
|
-
/**
|
|
320
|
-
* @license EUPL-1.2
|
|
321
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
322
|
-
*/
|
|
323
|
-
.utrecht-document, .utrecht-html body {
|
|
445
|
+
.utrecht-html body {
|
|
324
446
|
/* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
|
|
325
447
|
color: var(--utrecht-document-color, inherit);
|
|
326
448
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
@@ -328,42 +450,19 @@
|
|
|
328
450
|
font-weight: var(--utrecht-document-font-weight, inherit);
|
|
329
451
|
line-height: var(--utrecht-document-line-height, inherit);
|
|
330
452
|
text-rendering: optimizeLegibility;
|
|
453
|
+
background-color: var(--utrecht-document-background-color, inherit);
|
|
331
454
|
}
|
|
332
|
-
.utrecht-
|
|
455
|
+
.utrecht-html body :lang(ar) {
|
|
333
456
|
/* `letter-spacing` design tokens break Arabic text rendering, avoid that */
|
|
334
457
|
letter-spacing: 0 !important;
|
|
335
458
|
}
|
|
336
|
-
|
|
337
|
-
.utrecht-document--surface, .utrecht-html body {
|
|
338
|
-
background-color: var(--utrecht-document-background-color, inherit);
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
/**
|
|
342
|
-
* @license EUPL-1.2
|
|
343
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
344
|
-
*/
|
|
345
|
-
/**
|
|
346
|
-
* @license EUPL-1.2
|
|
347
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
348
|
-
*/
|
|
349
|
-
.utrecht-emphasis--stressed, .utrecht-html em {
|
|
459
|
+
.utrecht-html em {
|
|
350
460
|
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
351
461
|
}
|
|
352
|
-
|
|
353
|
-
.utrecht-emphasis--strong, .utrecht-html strong {
|
|
462
|
+
.utrecht-html strong {
|
|
354
463
|
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
355
464
|
}
|
|
356
|
-
|
|
357
|
-
/**
|
|
358
|
-
* @license EUPL-1.2
|
|
359
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
360
|
-
*/
|
|
361
|
-
/**
|
|
362
|
-
* @license EUPL-1.2
|
|
363
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
364
|
-
*/
|
|
365
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
366
|
-
.utrecht-form-fieldset--reset-fieldset, .utrecht-html fieldset {
|
|
465
|
+
.utrecht-html fieldset {
|
|
367
466
|
border: 0;
|
|
368
467
|
margin-inline-end: 0;
|
|
369
468
|
margin-inline-start: 0;
|
|
@@ -372,76 +471,35 @@
|
|
|
372
471
|
padding-block-start: 0.01em;
|
|
373
472
|
padding-inline-end: 0;
|
|
374
473
|
padding-inline-start: 0;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
.utrecht-form-fieldset__legend--reset-legend, .utrecht-html legend {
|
|
378
|
-
padding-inline-end: 0;
|
|
379
|
-
padding-inline-start: 0;
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
.utrecht-form-fieldset--distanced, .utrecht-html fieldset {
|
|
383
474
|
margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
|
|
384
475
|
margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
|
|
385
476
|
}
|
|
386
|
-
|
|
387
|
-
.utrecht-form-fieldset__legend, .utrecht-html legend {
|
|
477
|
+
.utrecht-html legend {
|
|
388
478
|
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
389
479
|
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
390
480
|
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
391
481
|
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
392
482
|
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
393
483
|
text-transform: var(--utrecht-form-fieldset-legend-text-transform);
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
.utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
|
|
484
|
+
padding-inline-end: 0;
|
|
485
|
+
padding-inline-start: 0;
|
|
397
486
|
margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
|
|
398
487
|
margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
|
|
399
488
|
}
|
|
400
|
-
|
|
401
|
-
/**
|
|
402
|
-
* @license EUPL-1.2
|
|
403
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
404
|
-
*/
|
|
405
|
-
/**
|
|
406
|
-
* @license EUPL-1.2
|
|
407
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
408
|
-
*/
|
|
409
|
-
.utrecht-form-label, .utrecht-html label {
|
|
489
|
+
.utrecht-html label {
|
|
410
490
|
color: var(--utrecht-form-label-color);
|
|
411
491
|
font-size: var(--utrecht-form-label-font-size);
|
|
412
492
|
font-weight: var(--utrecht-form-label-font-weight);
|
|
413
493
|
}
|
|
414
|
-
|
|
415
|
-
.utrecht-form-label--checkbox, .utrecht-html input[type=checkbox i] ~ label {
|
|
494
|
+
.utrecht-html input[type=checkbox i] ~ label {
|
|
416
495
|
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
417
496
|
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
418
497
|
}
|
|
419
|
-
|
|
420
|
-
.utrecht-form-label--checked {
|
|
421
|
-
font-weight: var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight));
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
.utrecht-form-label--disabled {
|
|
425
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
426
|
-
font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
.utrecht-form-label--radio, .utrecht-html input[type=radio i] ~ label {
|
|
498
|
+
.utrecht-html input[type=radio i] ~ label {
|
|
430
499
|
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
431
500
|
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
432
501
|
}
|
|
433
|
-
|
|
434
|
-
/**
|
|
435
|
-
* @license EUPL-1.2
|
|
436
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
437
|
-
*/
|
|
438
|
-
/**
|
|
439
|
-
* @license EUPL-1.2
|
|
440
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
441
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
442
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
443
|
-
*/
|
|
444
|
-
.utrecht-heading-1, .utrecht-html h1 {
|
|
502
|
+
.utrecht-html h1 {
|
|
445
503
|
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
446
504
|
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
447
505
|
font-size: var(--utrecht-heading-1-font-size);
|
|
@@ -451,24 +509,10 @@
|
|
|
451
509
|
margin-block-end: 0;
|
|
452
510
|
margin-block-start: 0;
|
|
453
511
|
text-transform: var(--utrecht-heading-1-text-transform, inherit);
|
|
454
|
-
}
|
|
455
|
-
|
|
456
|
-
.utrecht-heading-1--distanced, .utrecht-html h1 {
|
|
457
512
|
margin-block-end: var(--utrecht-heading-1-margin-block-end);
|
|
458
513
|
margin-block-start: var(--utrecht-heading-1-margin-block-start);
|
|
459
514
|
}
|
|
460
|
-
|
|
461
|
-
/**
|
|
462
|
-
* @license EUPL-1.2
|
|
463
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
464
|
-
*/
|
|
465
|
-
/**
|
|
466
|
-
* @license EUPL-1.2
|
|
467
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
468
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
469
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
470
|
-
*/
|
|
471
|
-
.utrecht-heading-2, .utrecht-html h2 {
|
|
515
|
+
.utrecht-html h2 {
|
|
472
516
|
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
473
517
|
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
474
518
|
font-size: var(--utrecht-heading-2-font-size);
|
|
@@ -478,24 +522,10 @@
|
|
|
478
522
|
margin-block-end: 0;
|
|
479
523
|
margin-block-start: 0;
|
|
480
524
|
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
.utrecht-heading-2--distanced, .utrecht-html h2 {
|
|
484
525
|
margin-block-end: var(--utrecht-heading-2-margin-block-end);
|
|
485
526
|
margin-block-start: var(--utrecht-heading-2-margin-block-start);
|
|
486
527
|
}
|
|
487
|
-
|
|
488
|
-
/**
|
|
489
|
-
* @license EUPL-1.2
|
|
490
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
491
|
-
*/
|
|
492
|
-
/**
|
|
493
|
-
* @license EUPL-1.2
|
|
494
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
495
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
496
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
497
|
-
*/
|
|
498
|
-
.utrecht-heading-3, .utrecht-html h3 {
|
|
528
|
+
.utrecht-html h3 {
|
|
499
529
|
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
500
530
|
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
501
531
|
font-size: var(--utrecht-heading-3-font-size);
|
|
@@ -505,24 +535,10 @@
|
|
|
505
535
|
margin-block-end: 0;
|
|
506
536
|
margin-block-start: 0;
|
|
507
537
|
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
.utrecht-heading-3--distanced, .utrecht-html h3 {
|
|
511
538
|
margin-block-end: var(--utrecht-heading-3-margin-block-end);
|
|
512
539
|
margin-block-start: var(--utrecht-heading-3-margin-block-start);
|
|
513
540
|
}
|
|
514
|
-
|
|
515
|
-
/**
|
|
516
|
-
* @license EUPL-1.2
|
|
517
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
518
|
-
*/
|
|
519
|
-
/**
|
|
520
|
-
* @license EUPL-1.2
|
|
521
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
522
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
523
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
524
|
-
*/
|
|
525
|
-
.utrecht-heading-4, .utrecht-html h4 {
|
|
541
|
+
.utrecht-html h4 {
|
|
526
542
|
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
527
543
|
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
528
544
|
font-size: var(--utrecht-heading-4-font-size);
|
|
@@ -532,24 +548,10 @@
|
|
|
532
548
|
margin-block-end: 0;
|
|
533
549
|
margin-block-start: 0;
|
|
534
550
|
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
.utrecht-heading-4--distanced, .utrecht-html h4 {
|
|
538
551
|
margin-block-end: var(--utrecht-heading-4-margin-block-end);
|
|
539
552
|
margin-block-start: var(--utrecht-heading-4-margin-block-start);
|
|
540
553
|
}
|
|
541
|
-
|
|
542
|
-
/**
|
|
543
|
-
* @license EUPL-1.2
|
|
544
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
545
|
-
*/
|
|
546
|
-
/**
|
|
547
|
-
* @license EUPL-1.2
|
|
548
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
549
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
550
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
551
|
-
*/
|
|
552
|
-
.utrecht-heading-5, .utrecht-html h5 {
|
|
554
|
+
.utrecht-html h5 {
|
|
553
555
|
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
554
556
|
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
555
557
|
font-size: var(--utrecht-heading-5-font-size);
|
|
@@ -559,24 +561,10 @@
|
|
|
559
561
|
margin-block-end: 0;
|
|
560
562
|
margin-block-start: 0;
|
|
561
563
|
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
.utrecht-heading-5--distanced, .utrecht-html h5 {
|
|
565
564
|
margin-block-end: var(--utrecht-heading-5-margin-block-end);
|
|
566
565
|
margin-block-start: var(--utrecht-heading-5-margin-block-start);
|
|
567
566
|
}
|
|
568
|
-
|
|
569
|
-
/**
|
|
570
|
-
* @license EUPL-1.2
|
|
571
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
572
|
-
*/
|
|
573
|
-
/**
|
|
574
|
-
* @license EUPL-1.2
|
|
575
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
576
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
577
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
578
|
-
*/
|
|
579
|
-
.utrecht-heading-6, .utrecht-html h6 {
|
|
567
|
+
.utrecht-html h6 {
|
|
580
568
|
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
581
569
|
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
582
570
|
font-size: var(--utrecht-heading-6-font-size);
|
|
@@ -586,1395 +574,19 @@
|
|
|
586
574
|
margin-block-end: 0;
|
|
587
575
|
margin-block-start: 0;
|
|
588
576
|
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
.utrecht-heading-6--distanced, .utrecht-html h6 {
|
|
592
577
|
margin-block-end: var(--utrecht-heading-6-margin-block-end);
|
|
593
578
|
margin-block-start: var(--utrecht-heading-6-margin-block-start);
|
|
594
579
|
}
|
|
595
|
-
|
|
596
|
-
/**
|
|
597
|
-
* @license EUPL-1.2
|
|
598
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
599
|
-
*/
|
|
600
|
-
/* Collection of all semantic HTML styles in the component library */
|
|
601
|
-
/**
|
|
602
|
-
* @license EUPL-1.2
|
|
603
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
604
|
-
*/
|
|
605
|
-
/**
|
|
606
|
-
* @license EUPL-1.2
|
|
607
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
608
|
-
*/
|
|
609
|
-
.utrecht-article, .utrecht-html article {
|
|
610
|
-
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
/**
|
|
614
|
-
* @license EUPL-1.2
|
|
615
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
616
|
-
*/
|
|
617
|
-
/**
|
|
618
|
-
* @license EUPL-1.2
|
|
619
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
620
|
-
*/
|
|
621
|
-
.utrecht-blockquote, .utrecht-html blockquote {
|
|
622
|
-
font-family: var(--utrecht-document-font-family);
|
|
623
|
-
font-size: var(--utrecht-blockquote-font-size);
|
|
624
|
-
margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
|
|
625
|
-
margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
|
|
626
|
-
}
|
|
627
|
-
|
|
628
|
-
.utrecht-blockquote__attribution {
|
|
629
|
-
color: var(--utrecht-blockquote-attribution-color, inherit);
|
|
630
|
-
font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
|
|
631
|
-
}
|
|
632
|
-
|
|
633
|
-
.utrecht-blockquote__content, .utrecht-html blockquote {
|
|
634
|
-
--utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
|
|
635
|
-
--utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
636
|
-
color: var(--utrecht-blockquote-content-color, inherit);
|
|
637
|
-
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
.utrecht-blockquote--distanced, .utrecht-html blockquote {
|
|
641
|
-
margin-block-end: var(--utrecht-blockquote-margin-block-end);
|
|
642
|
-
margin-block-start: var(--utrecht-blockquote-margin-block-start);
|
|
643
|
-
}
|
|
644
|
-
|
|
645
|
-
/**
|
|
646
|
-
* @license EUPL-1.2
|
|
647
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
648
|
-
*/
|
|
649
|
-
/**
|
|
650
|
-
* @license EUPL-1.2
|
|
651
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
652
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
653
|
-
*/
|
|
654
|
-
/**
|
|
655
|
-
* @license EUPL-1.2
|
|
656
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
657
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
658
|
-
*/
|
|
659
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
660
|
-
.utrecht-button, .utrecht-html input[type=button i],
|
|
661
|
-
.utrecht-html input[type=reset i],
|
|
662
|
-
.utrecht-html input[type=submit i],
|
|
663
|
-
.utrecht-html button {
|
|
664
|
-
background-color: var(--utrecht-button-background-color);
|
|
665
|
-
border-color: var(--utrecht-button-border-color, transparent);
|
|
666
|
-
border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
|
|
667
|
-
border-radius: var(--utrecht-button-border-radius);
|
|
668
|
-
border-style: solid;
|
|
669
|
-
border-width: var(--utrecht-button-border-width, 0);
|
|
670
|
-
border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
|
|
671
|
-
color: var(--utrecht-button-color);
|
|
672
|
-
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
673
|
-
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
674
|
-
font-weight: var(--utrecht-button-font-weight);
|
|
675
|
-
inline-size: var(--utrecht-button-inline-size, auto);
|
|
676
|
-
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
677
|
-
line-height: var(--utrecht-button-line-height);
|
|
678
|
-
min-block-size: var(--utrecht-button-min-block-size, 44px);
|
|
679
|
-
min-inline-size: var(--utrecht-button-min-inline-size, 44px);
|
|
680
|
-
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
681
|
-
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
682
|
-
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
683
|
-
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
684
|
-
text-transform: var(--utrecht-button-text-transform);
|
|
685
|
-
user-select: none;
|
|
686
|
-
}
|
|
687
|
-
|
|
688
|
-
.utrecht-button--distanced, .utrecht-html input[type=button i],
|
|
689
|
-
.utrecht-html input[type=reset i],
|
|
690
|
-
.utrecht-html input[type=submit i],
|
|
691
|
-
.utrecht-html button {
|
|
692
|
-
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
693
|
-
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
694
|
-
margin-inline-end: var(--utrecht-button-margin-inline-end);
|
|
695
|
-
margin-inline-start: var(--utrecht-button-margin-inline-start);
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
.utrecht-button--submit, .utrecht-html button[type=submit i],
|
|
699
|
-
.utrecht-html input[type=submit i] {
|
|
700
|
-
/* lower priority specificty than busy and disabled cursor */
|
|
701
|
-
cursor: var(--utrecht-action-submit-cursor);
|
|
702
|
-
}
|
|
703
|
-
|
|
704
|
-
.utrecht-button--busy, .utrecht-html button[aria-busy=true],
|
|
705
|
-
.utrecht-html button[aria-disabled=true][aria-busy=true],
|
|
706
|
-
.utrecht-html button:disabled[aria-busy=true] {
|
|
707
|
-
cursor: var(--utrecht-action-busy-cursor);
|
|
708
|
-
}
|
|
709
|
-
|
|
710
|
-
.utrecht-button:disabled, .utrecht-html input[type=button i]:disabled,
|
|
711
|
-
.utrecht-html input[type=reset i]:disabled,
|
|
712
|
-
.utrecht-html input[type=submit i]:disabled,
|
|
713
|
-
.utrecht-html button:disabled,
|
|
714
|
-
.utrecht-button--disabled,
|
|
715
|
-
.utrecht-html button[aria-disabled=true] {
|
|
716
|
-
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
717
|
-
border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
|
|
718
|
-
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
719
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
720
|
-
}
|
|
721
|
-
|
|
722
|
-
.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
723
|
-
.utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
724
|
-
.utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
725
|
-
.utrecht-button--active,
|
|
726
|
-
.utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
|
|
727
|
-
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
728
|
-
border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
|
|
729
|
-
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
730
|
-
}
|
|
731
|
-
|
|
732
|
-
.utrecht-button--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
733
|
-
.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
734
|
-
.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
735
|
-
.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus-visible {
|
|
736
|
-
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
737
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
738
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
739
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
740
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
741
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
742
|
-
}
|
|
743
|
-
|
|
744
|
-
.utrecht-button--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
745
|
-
.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
746
|
-
.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
747
|
-
.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
|
|
748
|
-
background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
|
|
749
|
-
border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
|
|
750
|
-
color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
|
|
751
|
-
}
|
|
752
|
-
|
|
753
|
-
/* override the `:focus` selector above */
|
|
754
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
755
|
-
.utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
|
|
756
|
-
.utrecht-html input[type=reset i]:focus:not(:focus-visible),
|
|
757
|
-
.utrecht-html input[type=submit i]:focus:not(:focus-visible),
|
|
758
|
-
.utrecht-html button:focus:not(:focus-visible) {
|
|
759
|
-
/* undo focus ring */
|
|
760
|
-
box-shadow: none;
|
|
761
|
-
outline-style: none;
|
|
762
|
-
}
|
|
763
|
-
|
|
764
|
-
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
|
|
765
|
-
.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
766
|
-
.utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
767
|
-
.utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
768
|
-
.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
769
|
-
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
770
|
-
border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
|
|
771
|
-
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
772
|
-
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
773
|
-
}
|
|
774
|
-
|
|
775
|
-
.utrecht-button--primary-action {
|
|
776
|
-
background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
|
|
777
|
-
border-color: var(--utrecht-button-primary-action-border-color, var(--utrecht-button-border-color));
|
|
778
|
-
border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
|
|
779
|
-
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
.utrecht-button--primary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--primary-action:not(:disabled):hover:not([aria-disabled=true]),
|
|
783
|
-
.utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
784
|
-
.utrecht-html input.utrecht-button--primary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
785
|
-
.utrecht-html input.utrecht-button--primary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
786
|
-
.utrecht-html input.utrecht-button--primary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
787
|
-
background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
788
|
-
border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
789
|
-
color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
790
|
-
}
|
|
791
|
-
|
|
792
|
-
.utrecht-button--primary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--primary-action[type=button i]:disabled,
|
|
793
|
-
.utrecht-html input.utrecht-button--primary-action[type=reset i]:disabled,
|
|
794
|
-
.utrecht-html input.utrecht-button--primary-action[type=submit i]:disabled,
|
|
795
|
-
.utrecht-html button.utrecht-button--primary-action:disabled,
|
|
796
|
-
.utrecht-button--primary-action.utrecht-button--disabled,
|
|
797
|
-
.utrecht-html button.utrecht-button--primary-action[aria-disabled=true] {
|
|
798
|
-
background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
799
|
-
border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
800
|
-
color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
801
|
-
}
|
|
802
|
-
|
|
803
|
-
.utrecht-button--secondary-action {
|
|
804
|
-
background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
|
|
805
|
-
border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
|
|
806
|
-
border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
|
|
807
|
-
color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
|
|
808
|
-
}
|
|
809
|
-
|
|
810
|
-
.utrecht-button--secondary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--secondary-action:not(:disabled):hover:not([aria-disabled=true]),
|
|
811
|
-
.utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
812
|
-
.utrecht-html input.utrecht-button--secondary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
813
|
-
.utrecht-html input.utrecht-button--secondary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
814
|
-
.utrecht-html input.utrecht-button--secondary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
815
|
-
background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
816
|
-
border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
817
|
-
color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
818
|
-
}
|
|
819
|
-
|
|
820
|
-
.utrecht-button--secondary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--secondary-action[type=button i]:disabled,
|
|
821
|
-
.utrecht-html input.utrecht-button--secondary-action[type=reset i]:disabled,
|
|
822
|
-
.utrecht-html input.utrecht-button--secondary-action[type=submit i]:disabled,
|
|
823
|
-
.utrecht-html button.utrecht-button--secondary-action:disabled,
|
|
824
|
-
.utrecht-button--secondary-action.utrecht-button--disabled,
|
|
825
|
-
.utrecht-html button.utrecht-button--secondary-action[aria-disabled=true] {
|
|
826
|
-
background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
827
|
-
border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
828
|
-
color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
829
|
-
}
|
|
830
|
-
|
|
831
|
-
.utrecht-button--subtle {
|
|
832
|
-
background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
|
|
833
|
-
border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
|
|
834
|
-
border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
|
|
835
|
-
color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
|
|
836
|
-
}
|
|
837
|
-
|
|
838
|
-
.utrecht-button--subtle.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--subtle:not(:disabled):hover:not([aria-disabled=true]),
|
|
839
|
-
.utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
840
|
-
.utrecht-html input.utrecht-button--subtle[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
841
|
-
.utrecht-html input.utrecht-button--subtle[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
842
|
-
.utrecht-html input.utrecht-button--subtle[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
843
|
-
background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
844
|
-
border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
845
|
-
color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
846
|
-
}
|
|
847
|
-
|
|
848
|
-
.utrecht-button--subtle.utrecht-button:disabled, .utrecht-html input.utrecht-button--subtle[type=button i]:disabled,
|
|
849
|
-
.utrecht-html input.utrecht-button--subtle[type=reset i]:disabled,
|
|
850
|
-
.utrecht-html input.utrecht-button--subtle[type=submit i]:disabled,
|
|
851
|
-
.utrecht-html button.utrecht-button--subtle:disabled,
|
|
852
|
-
.utrecht-button--subtle.utrecht-button--disabled,
|
|
853
|
-
.utrecht-html button.utrecht-button--subtle[aria-disabled=true] {
|
|
854
|
-
background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
855
|
-
border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
856
|
-
color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
857
|
-
}
|
|
858
|
-
|
|
859
|
-
/* override the `:focus` selector above */
|
|
860
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
861
|
-
/**
|
|
862
|
-
* @license EUPL-1.2
|
|
863
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
864
|
-
*/
|
|
865
|
-
/**
|
|
866
|
-
* @license EUPL-1.2
|
|
867
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
868
|
-
*/
|
|
869
|
-
/**
|
|
870
|
-
* @license EUPL-1.2
|
|
871
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
872
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
873
|
-
*/
|
|
874
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
875
|
-
.utrecht-checkbox, .utrecht-html input[type=checkbox i] {
|
|
876
|
-
margin-block-end: 0;
|
|
877
|
-
/* reset native margin for input[type="checkbox"] */
|
|
878
|
-
margin-block-start: 0;
|
|
879
|
-
margin-inline-end: 0;
|
|
880
|
-
margin-inline-start: 0;
|
|
881
|
-
}
|
|
882
|
-
|
|
883
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
884
|
-
.utrecht-checkbox--disabled, .utrecht-checkbox--html-input:disabled, .utrecht-html input[type=checkbox i]:disabled {
|
|
885
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
886
|
-
}
|
|
887
|
-
|
|
888
|
-
.utrecht-checkbox--focus-visible {
|
|
889
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
890
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
891
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
892
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
893
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
894
|
-
}
|
|
895
|
-
|
|
896
|
-
.utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
|
|
897
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
898
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
899
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
900
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
901
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
902
|
-
}
|
|
903
|
-
.utrecht-checkbox--html-input:focus:not(:focus-visible), .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
|
|
904
|
-
/* undo focus ring */
|
|
905
|
-
box-shadow: none;
|
|
906
|
-
outline-style: none;
|
|
907
|
-
}
|
|
908
|
-
|
|
909
|
-
/**
|
|
910
|
-
* @license EUPL-1.2
|
|
911
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
912
|
-
*/
|
|
913
|
-
/**
|
|
914
|
-
* @license EUPL-1.2
|
|
915
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
916
|
-
*/
|
|
917
|
-
.utrecht-emphasis--stressed, .utrecht-html em {
|
|
918
|
-
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
919
|
-
}
|
|
920
|
-
|
|
921
|
-
.utrecht-emphasis--strong, .utrecht-html strong {
|
|
922
|
-
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
923
|
-
}
|
|
924
|
-
|
|
925
|
-
/**
|
|
926
|
-
* @license EUPL-1.2
|
|
927
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
928
|
-
*/
|
|
929
|
-
/**
|
|
930
|
-
* @license EUPL-1.2
|
|
931
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
932
|
-
*/
|
|
933
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
934
|
-
.utrecht-form-fieldset--reset-fieldset, .utrecht-html fieldset {
|
|
935
|
-
border: 0;
|
|
936
|
-
margin-inline-end: 0;
|
|
937
|
-
margin-inline-start: 0;
|
|
938
|
-
min-width: 0;
|
|
939
|
-
padding-block-end: 0;
|
|
940
|
-
padding-block-start: 0.01em;
|
|
941
|
-
padding-inline-end: 0;
|
|
942
|
-
padding-inline-start: 0;
|
|
943
|
-
}
|
|
944
|
-
|
|
945
|
-
.utrecht-form-fieldset__legend--reset-legend, .utrecht-html legend {
|
|
946
|
-
padding-inline-end: 0;
|
|
947
|
-
padding-inline-start: 0;
|
|
948
|
-
}
|
|
949
|
-
|
|
950
|
-
.utrecht-form-fieldset--distanced, .utrecht-html fieldset {
|
|
951
|
-
margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
|
|
952
|
-
margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
|
|
953
|
-
}
|
|
954
|
-
|
|
955
|
-
.utrecht-form-fieldset__legend, .utrecht-html legend {
|
|
956
|
-
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
957
|
-
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
958
|
-
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
959
|
-
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
960
|
-
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
961
|
-
text-transform: var(--utrecht-form-fieldset-legend-text-transform);
|
|
962
|
-
}
|
|
963
|
-
|
|
964
|
-
.utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
|
|
965
|
-
margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
|
|
966
|
-
margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
|
|
967
|
-
}
|
|
968
|
-
|
|
969
|
-
/**
|
|
970
|
-
* @license EUPL-1.2
|
|
971
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
972
|
-
*/
|
|
973
|
-
/**
|
|
974
|
-
* @license EUPL-1.2
|
|
975
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
976
|
-
*/
|
|
977
|
-
.utrecht-form-label, .utrecht-html label {
|
|
978
|
-
color: var(--utrecht-form-label-color);
|
|
979
|
-
font-size: var(--utrecht-form-label-font-size);
|
|
980
|
-
font-weight: var(--utrecht-form-label-font-weight);
|
|
981
|
-
}
|
|
982
|
-
|
|
983
|
-
.utrecht-form-label--checkbox, .utrecht-html input[type=checkbox i] ~ label {
|
|
984
|
-
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
985
|
-
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
986
|
-
}
|
|
987
|
-
|
|
988
|
-
.utrecht-form-label--checked {
|
|
989
|
-
font-weight: var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight));
|
|
990
|
-
}
|
|
991
|
-
|
|
992
|
-
.utrecht-form-label--disabled {
|
|
993
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
994
|
-
font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
|
|
995
|
-
}
|
|
996
|
-
|
|
997
|
-
.utrecht-form-label--radio, .utrecht-html input[type=radio i] ~ label {
|
|
998
|
-
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
999
|
-
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
1000
|
-
}
|
|
1001
|
-
|
|
1002
|
-
/**
|
|
1003
|
-
* @license EUPL-1.2
|
|
1004
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1005
|
-
*/
|
|
1006
|
-
/**
|
|
1007
|
-
* @license EUPL-1.2
|
|
1008
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1009
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1010
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1011
|
-
*/
|
|
1012
|
-
.utrecht-heading-1, .utrecht-html h1 {
|
|
1013
|
-
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1014
|
-
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1015
|
-
font-size: var(--utrecht-heading-1-font-size);
|
|
1016
|
-
font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1017
|
-
letter-spacing: var(--utrecht-heading-1-letter-spacing);
|
|
1018
|
-
line-height: var(--utrecht-heading-1-line-height);
|
|
1019
|
-
margin-block-end: 0;
|
|
1020
|
-
margin-block-start: 0;
|
|
1021
|
-
text-transform: var(--utrecht-heading-1-text-transform, inherit);
|
|
1022
|
-
}
|
|
1023
|
-
|
|
1024
|
-
.utrecht-heading-1--distanced, .utrecht-html h1 {
|
|
1025
|
-
margin-block-end: var(--utrecht-heading-1-margin-block-end);
|
|
1026
|
-
margin-block-start: var(--utrecht-heading-1-margin-block-start);
|
|
1027
|
-
}
|
|
1028
|
-
|
|
1029
|
-
/**
|
|
1030
|
-
* @license EUPL-1.2
|
|
1031
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1032
|
-
*/
|
|
1033
|
-
/**
|
|
1034
|
-
* @license EUPL-1.2
|
|
1035
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1036
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1037
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1038
|
-
*/
|
|
1039
|
-
.utrecht-heading-2, .utrecht-html h2 {
|
|
1040
|
-
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1041
|
-
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1042
|
-
font-size: var(--utrecht-heading-2-font-size);
|
|
1043
|
-
font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1044
|
-
letter-spacing: var(--utrecht-heading-2-letter-spacing);
|
|
1045
|
-
line-height: var(--utrecht-heading-2-line-height);
|
|
1046
|
-
margin-block-end: 0;
|
|
1047
|
-
margin-block-start: 0;
|
|
1048
|
-
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
1049
|
-
}
|
|
1050
|
-
|
|
1051
|
-
.utrecht-heading-2--distanced, .utrecht-html h2 {
|
|
1052
|
-
margin-block-end: var(--utrecht-heading-2-margin-block-end);
|
|
1053
|
-
margin-block-start: var(--utrecht-heading-2-margin-block-start);
|
|
1054
|
-
}
|
|
1055
|
-
|
|
1056
|
-
/**
|
|
1057
|
-
* @license EUPL-1.2
|
|
1058
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1059
|
-
*/
|
|
1060
|
-
/**
|
|
1061
|
-
* @license EUPL-1.2
|
|
1062
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1063
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1064
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1065
|
-
*/
|
|
1066
|
-
.utrecht-heading-3, .utrecht-html h3 {
|
|
1067
|
-
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1068
|
-
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1069
|
-
font-size: var(--utrecht-heading-3-font-size);
|
|
1070
|
-
font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1071
|
-
letter-spacing: var(--utrecht-heading-3-letter-spacing);
|
|
1072
|
-
line-height: var(--utrecht-heading-3-line-height);
|
|
1073
|
-
margin-block-end: 0;
|
|
1074
|
-
margin-block-start: 0;
|
|
1075
|
-
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
1076
|
-
}
|
|
1077
|
-
|
|
1078
|
-
.utrecht-heading-3--distanced, .utrecht-html h3 {
|
|
1079
|
-
margin-block-end: var(--utrecht-heading-3-margin-block-end);
|
|
1080
|
-
margin-block-start: var(--utrecht-heading-3-margin-block-start);
|
|
1081
|
-
}
|
|
1082
|
-
|
|
1083
|
-
/**
|
|
1084
|
-
* @license EUPL-1.2
|
|
1085
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1086
|
-
*/
|
|
1087
|
-
/**
|
|
1088
|
-
* @license EUPL-1.2
|
|
1089
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1090
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1091
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1092
|
-
*/
|
|
1093
|
-
.utrecht-heading-4, .utrecht-html h4 {
|
|
1094
|
-
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1095
|
-
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1096
|
-
font-size: var(--utrecht-heading-4-font-size);
|
|
1097
|
-
font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1098
|
-
letter-spacing: var(--utrecht-heading-4-letter-spacing);
|
|
1099
|
-
line-height: var(--utrecht-heading-4-line-height);
|
|
1100
|
-
margin-block-end: 0;
|
|
1101
|
-
margin-block-start: 0;
|
|
1102
|
-
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
1103
|
-
}
|
|
1104
|
-
|
|
1105
|
-
.utrecht-heading-4--distanced, .utrecht-html h4 {
|
|
1106
|
-
margin-block-end: var(--utrecht-heading-4-margin-block-end);
|
|
1107
|
-
margin-block-start: var(--utrecht-heading-4-margin-block-start);
|
|
1108
|
-
}
|
|
1109
|
-
|
|
1110
|
-
/**
|
|
1111
|
-
* @license EUPL-1.2
|
|
1112
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1113
|
-
*/
|
|
1114
|
-
/**
|
|
1115
|
-
* @license EUPL-1.2
|
|
1116
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1117
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1118
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1119
|
-
*/
|
|
1120
|
-
.utrecht-heading-5, .utrecht-html h5 {
|
|
1121
|
-
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1122
|
-
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1123
|
-
font-size: var(--utrecht-heading-5-font-size);
|
|
1124
|
-
font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1125
|
-
letter-spacing: var(--utrecht-heading-5-letter-spacing);
|
|
1126
|
-
line-height: var(--utrecht-heading-5-line-height);
|
|
1127
|
-
margin-block-end: 0;
|
|
1128
|
-
margin-block-start: 0;
|
|
1129
|
-
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
1130
|
-
}
|
|
1131
|
-
|
|
1132
|
-
.utrecht-heading-5--distanced, .utrecht-html h5 {
|
|
1133
|
-
margin-block-end: var(--utrecht-heading-5-margin-block-end);
|
|
1134
|
-
margin-block-start: var(--utrecht-heading-5-margin-block-start);
|
|
1135
|
-
}
|
|
1136
|
-
|
|
1137
|
-
/**
|
|
1138
|
-
* @license EUPL-1.2
|
|
1139
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1140
|
-
*/
|
|
1141
|
-
/**
|
|
1142
|
-
* @license EUPL-1.2
|
|
1143
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1144
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1145
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1146
|
-
*/
|
|
1147
|
-
.utrecht-heading-6, .utrecht-html h6 {
|
|
1148
|
-
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1149
|
-
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1150
|
-
font-size: var(--utrecht-heading-6-font-size);
|
|
1151
|
-
font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1152
|
-
letter-spacing: var(--utrecht-heading-6-letter-spacing);
|
|
1153
|
-
line-height: var(--utrecht-heading-6-line-height);
|
|
1154
|
-
margin-block-end: 0;
|
|
1155
|
-
margin-block-start: 0;
|
|
1156
|
-
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
1157
|
-
}
|
|
1158
|
-
|
|
1159
|
-
.utrecht-heading-6--distanced, .utrecht-html h6 {
|
|
1160
|
-
margin-block-end: var(--utrecht-heading-6-margin-block-end);
|
|
1161
|
-
margin-block-start: var(--utrecht-heading-6-margin-block-start);
|
|
1162
|
-
}
|
|
1163
|
-
|
|
1164
|
-
/**
|
|
1165
|
-
* @license EUPL-1.2
|
|
1166
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1167
|
-
*/
|
|
1168
|
-
/**
|
|
1169
|
-
* @license EUPL-1.2
|
|
1170
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1171
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1172
|
-
*/
|
|
1173
|
-
/* stylelint-disable scss/no-global-function-names */
|
|
1174
|
-
/**
|
|
1175
|
-
* @license EUPL-1.2
|
|
1176
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1177
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1178
|
-
*/
|
|
1179
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1180
|
-
/*
|
|
1181
|
-
|
|
1182
|
-
# CSS implementation
|
|
1183
|
-
|
|
1184
|
-
## `text-decoration-skip`
|
|
1185
|
-
|
|
1186
|
-
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
1187
|
-
For example by obscuring Arabic diacritics.
|
|
1188
|
-
|
|
1189
|
-
However, the combination of a greater thickness and skipping this thick underline
|
|
1190
|
-
leads to a very unappealing rendering of the underline. To avoid this,
|
|
1191
|
-
`text-decoration-skip` is disabled for interactive states.
|
|
1192
|
-
|
|
1193
|
-
For design token configurations that have identical thickness for normal and interactive
|
|
1194
|
-
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
1195
|
-
from an interrupted to an uninterrupted underline (for some texts).
|
|
1196
|
-
|
|
1197
|
-
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
1198
|
-
|
|
1199
|
-
---
|
|
1200
|
-
|
|
1201
|
-
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
1202
|
-
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
1203
|
-
not make this too inconvenient.
|
|
1204
|
-
|
|
1205
|
-
---
|
|
1206
|
-
|
|
1207
|
-
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
1208
|
-
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
1209
|
-
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
1210
|
-
|
|
1211
|
-
## `text-decoration-thickness`
|
|
1212
|
-
|
|
1213
|
-
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
1214
|
-
|
|
1215
|
-
---
|
|
1216
|
-
|
|
1217
|
-
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
1218
|
-
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
1219
|
-
the underline offset also seems to increase along with the thickness, which effectively means
|
|
1220
|
-
the underline is closer to the next line than in Safari.
|
|
1221
|
-
|
|
1222
|
-
---
|
|
1223
|
-
|
|
1224
|
-
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
1225
|
-
use the `max()` function to ensure the underline remains visible for every font size.
|
|
1226
|
-
|
|
1227
|
-
## `transition`
|
|
1228
|
-
|
|
1229
|
-
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
1230
|
-
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
1231
|
-
|
|
1232
|
-
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
1233
|
-
|
|
1234
|
-
*/
|
|
1235
|
-
.utrecht-link, .utrecht-html a:link {
|
|
1236
|
-
color: var(--utrecht-link-color, blue);
|
|
1237
|
-
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
1238
|
-
text-decoration-skip-ink: all;
|
|
1239
|
-
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
1240
|
-
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
1241
|
-
}
|
|
1242
|
-
|
|
1243
|
-
.utrecht-link--icon-left {
|
|
1244
|
-
background-image: var(--utrecht-link-icon-left-background-image, none);
|
|
1245
|
-
background-position: 0 0.25em;
|
|
1246
|
-
background-repeat: no-repeat;
|
|
1247
|
-
color: var(--utrecht-link-color, blue);
|
|
1248
|
-
font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
1249
|
-
padding-inline-start: var(--utrecht-space-block-md);
|
|
1250
|
-
text-decoration: none;
|
|
1251
|
-
}
|
|
1252
|
-
|
|
1253
|
-
.utrecht-link:visited,
|
|
1254
|
-
.utrecht-link--visited,
|
|
1255
|
-
.utrecht-html a:visited {
|
|
1256
|
-
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
1257
|
-
}
|
|
1258
|
-
|
|
1259
|
-
.utrecht-link:hover,
|
|
1260
|
-
.utrecht-link--hover,
|
|
1261
|
-
.utrecht-html a:hover {
|
|
1262
|
-
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
1263
|
-
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1264
|
-
text-decoration-skip: none;
|
|
1265
|
-
text-decoration-skip-ink: none;
|
|
1266
|
-
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1267
|
-
}
|
|
1268
|
-
|
|
1269
|
-
.utrecht-link:active,
|
|
1270
|
-
.utrecht-link--active,
|
|
1271
|
-
.utrecht-html a:active {
|
|
1272
|
-
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
1273
|
-
}
|
|
1274
|
-
|
|
1275
|
-
.utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus {
|
|
1276
|
-
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
1277
|
-
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
1278
|
-
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1279
|
-
text-decoration-skip: none;
|
|
1280
|
-
text-decoration-skip-ink: none;
|
|
1281
|
-
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1282
|
-
}
|
|
1283
|
-
|
|
1284
|
-
.utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
|
|
1285
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1286
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1287
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1288
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1289
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1290
|
-
}
|
|
1291
|
-
|
|
1292
|
-
.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
|
|
1293
|
-
/* undo focus ring */
|
|
1294
|
-
box-shadow: none;
|
|
1295
|
-
outline-style: none;
|
|
1296
|
-
}
|
|
1297
|
-
|
|
1298
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1299
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1300
|
-
.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
|
|
1301
|
-
white-space: nowrap;
|
|
1302
|
-
}
|
|
1303
|
-
|
|
1304
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1305
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1306
|
-
.utrecht-html a:focus:not(:focus-visible) {
|
|
1307
|
-
/* undo focus ring */
|
|
1308
|
-
box-shadow: none;
|
|
1309
|
-
outline-style: none;
|
|
1310
|
-
}
|
|
1311
|
-
|
|
1312
|
-
/**
|
|
1313
|
-
* @license EUPL-1.2
|
|
1314
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1315
|
-
*/
|
|
1316
|
-
/**
|
|
1317
|
-
* @license EUPL-1.2
|
|
1318
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1319
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1320
|
-
*/
|
|
1321
|
-
.utrecht-ordered-list, .utrecht-html ol {
|
|
1322
|
-
font-family: var(--utrecht-document-font-family, inherit);
|
|
1323
|
-
margin-block-end: 0;
|
|
1324
|
-
margin-block-start: 0;
|
|
1325
|
-
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
1326
|
-
}
|
|
1327
|
-
|
|
1328
|
-
.utrecht-ordered-list--distanced, .utrecht-html ol {
|
|
1329
|
-
margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
|
|
1330
|
-
margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
|
|
1331
|
-
}
|
|
1332
|
-
|
|
1333
|
-
.utrecht-ordered-list--arabic, .utrecht-html ol:lang(ar) {
|
|
1334
|
-
list-style: arabic-indic;
|
|
1335
|
-
}
|
|
1336
|
-
|
|
1337
|
-
.utrecht-ordered-list__item, .utrecht-html ol > li {
|
|
1338
|
-
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
|
|
1339
|
-
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
1340
|
-
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
1341
|
-
}
|
|
1342
|
-
|
|
1343
|
-
/**
|
|
1344
|
-
* @license EUPL-1.2
|
|
1345
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1346
|
-
*/
|
|
1347
|
-
/**
|
|
1348
|
-
* @license EUPL-1.2
|
|
1349
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1350
|
-
*/
|
|
1351
|
-
.utrecht-paragraph, .utrecht-html p {
|
|
1352
|
-
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
1353
|
-
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
1354
|
-
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
1355
|
-
font-weight: var(--utrecht-paragraph-font-weight, inherit);
|
|
1356
|
-
line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
|
|
1357
|
-
margin-block-end: 0;
|
|
1358
|
-
margin-block-start: 0;
|
|
1359
|
-
}
|
|
1360
|
-
|
|
1361
|
-
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
1362
|
-
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
1363
|
-
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
1364
|
-
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
1365
|
-
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
1366
|
-
}
|
|
1367
|
-
|
|
1368
|
-
.utrecht-paragraph--distanced, .utrecht-html * ~ p {
|
|
1369
|
-
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
1370
|
-
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
1371
|
-
}
|
|
1372
|
-
|
|
1373
|
-
/* stylelint-disable selector-class-pattern */
|
|
1374
|
-
/**
|
|
1375
|
-
* @license EUPL-1.2
|
|
1376
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1377
|
-
*/
|
|
1378
|
-
/**
|
|
1379
|
-
* @license EUPL-1.2
|
|
1380
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1381
|
-
*/
|
|
1382
|
-
/**
|
|
1383
|
-
* @license EUPL-1.2
|
|
1384
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1385
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1386
|
-
*/
|
|
1387
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1388
|
-
.utrecht-radio-button, .utrecht-html input[type=radio i] {
|
|
1389
|
-
margin-block-end: 0;
|
|
1390
|
-
/* reset native margin for input[type="radio" i] */
|
|
1391
|
-
margin-block-start: 0;
|
|
1392
|
-
margin-inline-end: 0;
|
|
1393
|
-
margin-inline-start: 0;
|
|
1394
|
-
}
|
|
1395
|
-
|
|
1396
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1397
|
-
.utrecht-radio-button--disabled, .utrecht-radio-button--html-input:disabled, .utrecht-html input[type=radio i]:disabled {
|
|
1398
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
1399
|
-
}
|
|
1400
|
-
|
|
1401
|
-
.utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
|
|
1402
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1403
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1404
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1405
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1406
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1407
|
-
}
|
|
1408
|
-
|
|
1409
|
-
.utrecht-radio-button--html-input:focus:not(:focus-visible), .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
1410
|
-
/* undo focus ring */
|
|
1411
|
-
box-shadow: none;
|
|
1412
|
-
outline-style: none;
|
|
1413
|
-
}
|
|
1414
|
-
|
|
1415
|
-
/**
|
|
1416
|
-
* @license EUPL-1.2
|
|
1417
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1418
|
-
*/
|
|
1419
|
-
/**
|
|
1420
|
-
* @license EUPL-1.2
|
|
1421
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1422
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1423
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1424
|
-
*/
|
|
1425
|
-
.utrecht-separator, .utrecht-html hr {
|
|
1426
|
-
border-color: var(--utrecht-separator-color);
|
|
1427
|
-
border-style: solid;
|
|
1428
|
-
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
1429
|
-
}
|
|
1430
|
-
|
|
1431
|
-
.utrecht-separator--distanced, .utrecht-html hr {
|
|
1432
|
-
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
1433
|
-
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
1434
|
-
}
|
|
1435
|
-
|
|
1436
|
-
/**
|
|
1437
|
-
* @license EUPL-1.2
|
|
1438
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1439
|
-
*/
|
|
1440
|
-
/**
|
|
1441
|
-
* @license EUPL-1.2
|
|
1442
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1443
|
-
*/
|
|
1444
|
-
.utrecht-table, .utrecht-html table {
|
|
1445
|
-
border-collapse: collapse;
|
|
1446
|
-
border-color: var(--utrecht-table-border-color, 0);
|
|
1447
|
-
border-style: solid;
|
|
1448
|
-
border-width: var(--utrecht-table-border-width, 0);
|
|
1449
|
-
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
1450
|
-
font-size: var(--utrecht-table-font-size, inherit);
|
|
1451
|
-
width: 100%;
|
|
1452
|
-
}
|
|
1453
|
-
|
|
1454
|
-
.utrecht-table--distanced, .utrecht-html table {
|
|
1455
|
-
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
1456
|
-
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
1457
|
-
}
|
|
1458
|
-
|
|
1459
|
-
.utrecht-table__caption, .utrecht-html caption {
|
|
1460
|
-
color: var(--utrecht-table-caption-color);
|
|
1461
|
-
font-family: var(--utrecht-table-caption-font-family);
|
|
1462
|
-
font-size: var(--utrecht-table-caption-font-size);
|
|
1463
|
-
font-weight: var(--utrecht-table-caption-font-weight);
|
|
1464
|
-
line-height: var(--utrecht-table-caption-line-height);
|
|
1465
|
-
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
1466
|
-
text-align: var(--utrecht-table-caption-text-align, center);
|
|
1467
|
-
}
|
|
1468
|
-
|
|
1469
|
-
.utrecht-table__header, .utrecht-html thead {
|
|
1470
|
-
background-color: var(--utrecht-table-header-background-color);
|
|
1471
|
-
color: var(--utrecht-table-header-color);
|
|
1472
|
-
font-weight: var(--utrecht-table-header-font-weight);
|
|
1473
|
-
text-transform: var(--utrecht-table-header-text-transform);
|
|
1474
|
-
vertical-align: bottom;
|
|
1475
|
-
}
|
|
1476
|
-
|
|
1477
|
-
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
1478
|
-
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
1479
|
-
border-block-end-style: solid;
|
|
1480
|
-
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
1481
|
-
}
|
|
1482
|
-
|
|
1483
|
-
.utrecht-table__body, .utrecht-html tbody {
|
|
1484
|
-
vertical-align: baseline;
|
|
1485
|
-
}
|
|
1486
|
-
|
|
1487
|
-
.utrecht-table__header-cell, .utrecht-html th {
|
|
1488
|
-
color: var(--utrecht-table-header-cell-color);
|
|
1489
|
-
font-size: var(--utrecht-table-header-cell-font-size);
|
|
1490
|
-
font-weight: var(--utrecht-table-header-cell-font-weight);
|
|
1491
|
-
text-align: start;
|
|
1492
|
-
text-transform: var(--utrecht-table-header-cell-text-transform);
|
|
1493
|
-
}
|
|
1494
|
-
|
|
1495
|
-
.utrecht-table__cell, .utrecht-html th,
|
|
1496
|
-
.utrecht-html td {
|
|
1497
|
-
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
1498
|
-
border-block-end-style: solid;
|
|
1499
|
-
border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
|
|
1500
|
-
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
1501
|
-
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
1502
|
-
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
1503
|
-
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
1504
|
-
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
1505
|
-
text-align: start;
|
|
1506
|
-
}
|
|
1507
|
-
|
|
1508
|
-
.utrecht-table__cell--first, .utrecht-html td:first-child,
|
|
1509
|
-
.utrecht-html th:first-child {
|
|
1510
|
-
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
1511
|
-
}
|
|
1512
|
-
|
|
1513
|
-
.utrecht-table__cell--last, .utrecht-html td:last-child,
|
|
1514
|
-
.utrecht-html th:last-child {
|
|
1515
|
-
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
1516
|
-
}
|
|
1517
|
-
|
|
1518
|
-
.utrecht-table__header-cell--numeric-column,
|
|
1519
|
-
.utrecht-table__cell--numeric-column,
|
|
1520
|
-
.utrecht-html td.numeric,
|
|
1521
|
-
.utrecht-html thead > tr > th.numeric,
|
|
1522
|
-
.utrecht-html tfoot > tr > th.numeric,
|
|
1523
|
-
.utrecht-html th[scope=column].numeric {
|
|
1524
|
-
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
1525
|
-
text-align: right;
|
|
1526
|
-
}
|
|
1527
|
-
|
|
1528
|
-
.utrecht-table__cell--numeric-data, .utrecht-html td.numeric {
|
|
1529
|
-
font-variant-numeric: lining-nums tabular-nums;
|
|
1530
|
-
}
|
|
1531
|
-
|
|
1532
|
-
.utrecht-table__row--alternate-odd, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
|
|
1533
|
-
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
1534
|
-
color: var(--utrecht-table-row-alternate-odd-color);
|
|
1535
|
-
}
|
|
1536
|
-
|
|
1537
|
-
.utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
|
|
1538
|
-
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
1539
|
-
color: var(--utrecht-table-row-alternate-even-color);
|
|
1540
|
-
}
|
|
1541
|
-
|
|
1542
|
-
/* stylelint-disable selector-class-pattern */
|
|
1543
|
-
/**
|
|
1544
|
-
* @license EUPL-1.2
|
|
1545
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1546
|
-
*/
|
|
1547
|
-
/**
|
|
1548
|
-
* @license EUPL-1.2
|
|
1549
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1550
|
-
*/
|
|
1551
|
-
/**
|
|
1552
|
-
* @license EUPL-1.2
|
|
1553
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1554
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1555
|
-
*/
|
|
1556
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1557
|
-
.utrecht-textarea, .utrecht-html textarea {
|
|
1558
|
-
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
|
|
1559
|
-
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
|
|
1560
|
-
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
|
|
1561
|
-
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
|
|
1562
|
-
border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1563
|
-
border-style: solid;
|
|
1564
|
-
box-sizing: border-box;
|
|
1565
|
-
color: var(--utrecht-textarea-color, var(--utrecht-form-input-color));
|
|
1566
|
-
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
1567
|
-
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1568
|
-
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1569
|
-
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
1570
|
-
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1571
|
-
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1572
|
-
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1573
|
-
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1574
|
-
resize: vertical;
|
|
1575
|
-
width: 100%;
|
|
1576
|
-
}
|
|
1577
|
-
|
|
1578
|
-
.utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-html textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true], .utrecht-html textarea[aria-invalid=true] {
|
|
1579
|
-
background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1580
|
-
border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1581
|
-
border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))));
|
|
1582
|
-
}
|
|
1583
|
-
|
|
1584
|
-
.utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
|
|
1585
|
-
background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1586
|
-
border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1587
|
-
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1588
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
1589
|
-
}
|
|
1590
|
-
|
|
1591
|
-
.utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
1592
|
-
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1593
|
-
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1594
|
-
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1595
|
-
}
|
|
1596
|
-
|
|
1597
|
-
.utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
1598
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1599
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1600
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1601
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1602
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1603
|
-
}
|
|
1604
|
-
|
|
1605
|
-
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
|
|
1606
|
-
border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));
|
|
1607
|
-
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1608
|
-
}
|
|
1609
|
-
|
|
1610
|
-
.utrecht-textarea__placeholder, .utrecht-textarea--html-textarea::placeholder, .utrecht-html textarea::placeholder {
|
|
1611
|
-
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1612
|
-
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
1613
|
-
opacity: 100%;
|
|
1614
|
-
}
|
|
1615
|
-
|
|
1616
|
-
.utrecht-textarea--html-textarea:focus:not(:focus-visible), .utrecht-html textarea:focus:not(:focus-visible) {
|
|
1617
|
-
/* undo focus ring */
|
|
1618
|
-
box-shadow: none;
|
|
1619
|
-
outline-style: none;
|
|
1620
|
-
}
|
|
1621
|
-
/**
|
|
1622
|
-
* @license EUPL-1.2
|
|
1623
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1624
|
-
*/
|
|
1625
|
-
/**
|
|
1626
|
-
* @license EUPL-1.2
|
|
1627
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1628
|
-
*/
|
|
1629
|
-
/**
|
|
1630
|
-
* @license EUPL-1.2
|
|
1631
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1632
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1633
|
-
*/
|
|
1634
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1635
|
-
.utrecht-textbox, .utrecht-html input:not([type]),
|
|
1636
|
-
.utrecht-html input[type=date i],
|
|
1637
|
-
.utrecht-html input[type=datetime-local i],
|
|
1638
|
-
.utrecht-html input[type=email i],
|
|
1639
|
-
.utrecht-html input[type=month i],
|
|
1640
|
-
.utrecht-html input[type=number i],
|
|
1641
|
-
.utrecht-html input[type=password i],
|
|
1642
|
-
.utrecht-html input[type=search i],
|
|
1643
|
-
.utrecht-html input[type=tel i],
|
|
1644
|
-
.utrecht-html input[type=text i],
|
|
1645
|
-
.utrecht-html input[type=time i],
|
|
1646
|
-
.utrecht-html input[type=url i],
|
|
1647
|
-
.utrecht-html input[type=week i] {
|
|
1648
|
-
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
|
|
1649
|
-
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
|
|
1650
|
-
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
|
|
1651
|
-
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
|
|
1652
|
-
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1653
|
-
border-style: solid;
|
|
1654
|
-
box-sizing: border-box;
|
|
1655
|
-
color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
|
|
1656
|
-
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
|
|
1657
|
-
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1658
|
-
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1659
|
-
padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1660
|
-
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1661
|
-
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1662
|
-
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1663
|
-
width: 100%;
|
|
1664
|
-
}
|
|
1665
|
-
|
|
1666
|
-
.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-html input:invalid:not([type]),
|
|
1667
|
-
.utrecht-html input[type=date i]:invalid,
|
|
1668
|
-
.utrecht-html input[type=datetime-local i]:invalid,
|
|
1669
|
-
.utrecht-html input[type=email i]:invalid,
|
|
1670
|
-
.utrecht-html input[type=month i]:invalid,
|
|
1671
|
-
.utrecht-html input[type=number i]:invalid,
|
|
1672
|
-
.utrecht-html input[type=password i]:invalid,
|
|
1673
|
-
.utrecht-html input[type=search i]:invalid,
|
|
1674
|
-
.utrecht-html input[type=tel i]:invalid,
|
|
1675
|
-
.utrecht-html input[type=text i]:invalid,
|
|
1676
|
-
.utrecht-html input[type=time i]:invalid,
|
|
1677
|
-
.utrecht-html input[type=url i]:invalid,
|
|
1678
|
-
.utrecht-html input[type=week i]:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input[aria-invalid=true]:not([type]),
|
|
1679
|
-
.utrecht-html input[aria-invalid=true][type=date i],
|
|
1680
|
-
.utrecht-html input[aria-invalid=true][type=datetime-local i],
|
|
1681
|
-
.utrecht-html input[aria-invalid=true][type=email i],
|
|
1682
|
-
.utrecht-html input[aria-invalid=true][type=month i],
|
|
1683
|
-
.utrecht-html input[aria-invalid=true][type=number i],
|
|
1684
|
-
.utrecht-html input[aria-invalid=true][type=password i],
|
|
1685
|
-
.utrecht-html input[aria-invalid=true][type=search i],
|
|
1686
|
-
.utrecht-html input[aria-invalid=true][type=tel i],
|
|
1687
|
-
.utrecht-html input[aria-invalid=true][type=text i],
|
|
1688
|
-
.utrecht-html input[aria-invalid=true][type=time i],
|
|
1689
|
-
.utrecht-html input[aria-invalid=true][type=url i],
|
|
1690
|
-
.utrecht-html input[aria-invalid=true][type=week i] {
|
|
1691
|
-
background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
|
|
1692
|
-
border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
|
|
1693
|
-
border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
|
|
1694
|
-
}
|
|
1695
|
-
|
|
1696
|
-
.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input:disabled:not([type]),
|
|
1697
|
-
.utrecht-html input[type=date i]:disabled,
|
|
1698
|
-
.utrecht-html input[type=datetime-local i]:disabled,
|
|
1699
|
-
.utrecht-html input[type=email i]:disabled,
|
|
1700
|
-
.utrecht-html input[type=month i]:disabled,
|
|
1701
|
-
.utrecht-html input[type=number i]:disabled,
|
|
1702
|
-
.utrecht-html input[type=password i]:disabled,
|
|
1703
|
-
.utrecht-html input[type=search i]:disabled,
|
|
1704
|
-
.utrecht-html input[type=tel i]:disabled,
|
|
1705
|
-
.utrecht-html input[type=text i]:disabled,
|
|
1706
|
-
.utrecht-html input[type=time i]:disabled,
|
|
1707
|
-
.utrecht-html input[type=url i]:disabled,
|
|
1708
|
-
.utrecht-html input[type=week i]:disabled {
|
|
1709
|
-
background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1710
|
-
border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1711
|
-
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1712
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
1713
|
-
}
|
|
1714
|
-
|
|
1715
|
-
.utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
1716
|
-
.utrecht-html input[type=date i]:focus,
|
|
1717
|
-
.utrecht-html input[type=datetime-local i]:focus,
|
|
1718
|
-
.utrecht-html input[type=email i]:focus,
|
|
1719
|
-
.utrecht-html input[type=month i]:focus,
|
|
1720
|
-
.utrecht-html input[type=number i]:focus,
|
|
1721
|
-
.utrecht-html input[type=password i]:focus,
|
|
1722
|
-
.utrecht-html input[type=search i]:focus,
|
|
1723
|
-
.utrecht-html input[type=tel i]:focus,
|
|
1724
|
-
.utrecht-html input[type=text i]:focus,
|
|
1725
|
-
.utrecht-html input[type=time i]:focus,
|
|
1726
|
-
.utrecht-html input[type=url i]:focus,
|
|
1727
|
-
.utrecht-html input[type=week i]:focus {
|
|
1728
|
-
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1729
|
-
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1730
|
-
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1731
|
-
}
|
|
1732
|
-
|
|
1733
|
-
.utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
1734
|
-
.utrecht-html input[type=date i]:focus,
|
|
1735
|
-
.utrecht-html input[type=datetime-local i]:focus,
|
|
1736
|
-
.utrecht-html input[type=email i]:focus,
|
|
1737
|
-
.utrecht-html input[type=month i]:focus,
|
|
1738
|
-
.utrecht-html input[type=number i]:focus,
|
|
1739
|
-
.utrecht-html input[type=password i]:focus,
|
|
1740
|
-
.utrecht-html input[type=search i]:focus,
|
|
1741
|
-
.utrecht-html input[type=tel i]:focus,
|
|
1742
|
-
.utrecht-html input[type=text i]:focus,
|
|
1743
|
-
.utrecht-html input[type=time i]:focus,
|
|
1744
|
-
.utrecht-html input[type=url i]:focus,
|
|
1745
|
-
.utrecht-html input[type=week i]:focus {
|
|
1746
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1747
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1748
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1749
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1750
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1751
|
-
}
|
|
1752
|
-
|
|
1753
|
-
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
|
|
1754
|
-
.utrecht-html input[type=date i]:read-only,
|
|
1755
|
-
.utrecht-html input[type=datetime-local i]:read-only,
|
|
1756
|
-
.utrecht-html input[type=email i]:read-only,
|
|
1757
|
-
.utrecht-html input[type=month i]:read-only,
|
|
1758
|
-
.utrecht-html input[type=number i]:read-only,
|
|
1759
|
-
.utrecht-html input[type=password i]:read-only,
|
|
1760
|
-
.utrecht-html input[type=search i]:read-only,
|
|
1761
|
-
.utrecht-html input[type=tel i]:read-only,
|
|
1762
|
-
.utrecht-html input[type=text i]:read-only,
|
|
1763
|
-
.utrecht-html input[type=time i]:read-only,
|
|
1764
|
-
.utrecht-html input[type=url i]:read-only,
|
|
1765
|
-
.utrecht-html input[type=week i]:read-only {
|
|
1766
|
-
border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
|
|
1767
|
-
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1768
|
-
}
|
|
1769
|
-
|
|
1770
|
-
.utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder, .utrecht-html input:not([type])::placeholder,
|
|
1771
|
-
.utrecht-html input[type=date i]::placeholder,
|
|
1772
|
-
.utrecht-html input[type=datetime-local i]::placeholder,
|
|
1773
|
-
.utrecht-html input[type=email i]::placeholder,
|
|
1774
|
-
.utrecht-html input[type=month i]::placeholder,
|
|
1775
|
-
.utrecht-html input[type=number i]::placeholder,
|
|
1776
|
-
.utrecht-html input[type=password i]::placeholder,
|
|
1777
|
-
.utrecht-html input[type=search i]::placeholder,
|
|
1778
|
-
.utrecht-html input[type=tel i]::placeholder,
|
|
1779
|
-
.utrecht-html input[type=text i]::placeholder,
|
|
1780
|
-
.utrecht-html input[type=time i]::placeholder,
|
|
1781
|
-
.utrecht-html input[type=url i]::placeholder,
|
|
1782
|
-
.utrecht-html input[type=week i]::placeholder {
|
|
1783
|
-
color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1784
|
-
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
1785
|
-
opacity: 100%;
|
|
1786
|
-
}
|
|
1787
|
-
|
|
1788
|
-
.utrecht-textbox--numeric, .utrecht-html input[autocomplete~=bday i],
|
|
1789
|
-
.utrecht-html input[autocomplete~=bday-day i],
|
|
1790
|
-
.utrecht-html input[autocomplete~=bday-month i],
|
|
1791
|
-
.utrecht-html input[autocomplete~=bday-year i],
|
|
1792
|
-
.utrecht-html input[autocomplete~=cc-csc i],
|
|
1793
|
-
.utrecht-html input[autocomplete~=cc-exp i],
|
|
1794
|
-
.utrecht-html input[autocomplete~=cc-exp-month i],
|
|
1795
|
-
.utrecht-html input[autocomplete~=cc-exp-year i],
|
|
1796
|
-
.utrecht-html input[autocomplete~=cc-number i],
|
|
1797
|
-
.utrecht-html input[autocomplete~=one-time-code i],
|
|
1798
|
-
.utrecht-html input[autocomplete~=postal-code i],
|
|
1799
|
-
.utrecht-html input[autocomplete~=tel i],
|
|
1800
|
-
.utrecht-html input[autocomplete~=tel-area-code i],
|
|
1801
|
-
.utrecht-html input[autocomplete~=tel-country-code i],
|
|
1802
|
-
.utrecht-html input[autocomplete~=tel-extension i],
|
|
1803
|
-
.utrecht-html input[autocomplete~=tel-local i],
|
|
1804
|
-
.utrecht-html input[autocomplete~=tel-national i],
|
|
1805
|
-
.utrecht-html input[autocomplete~=transaction-amount i],
|
|
1806
|
-
.utrecht-html input[inputmode=decimal i],
|
|
1807
|
-
.utrecht-html input[inputmode=numeric i],
|
|
1808
|
-
.utrecht-html input[type=number i] {
|
|
1809
|
-
-moz-appearance: textfield;
|
|
1810
|
-
/* avoid spinner input in Firefox */
|
|
1811
|
-
font-variant-numeric: lining-nums tabular-nums;
|
|
1812
|
-
}
|
|
1813
|
-
|
|
1814
|
-
.utrecht-textbox--password, .utrecht-html input[autocomplete~=current-password i],
|
|
1815
|
-
.utrecht-html input[autocomplete~=new-password i] {
|
|
1816
|
-
font-variant-ligatures: none;
|
|
1817
|
-
font-variant-numeric: slashed-zero;
|
|
1818
|
-
}
|
|
1819
|
-
|
|
1820
|
-
.utrecht-textbox--url, .utrecht-html input[type=url i] {
|
|
1821
|
-
font-variant-ligatures: none;
|
|
1822
|
-
}
|
|
1823
|
-
|
|
1824
|
-
.utrecht-textbox--html-input:focus:not(:focus-visible), .utrecht-html input:focus:not(:focus-visible):not([type]),
|
|
1825
|
-
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
1826
|
-
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
1827
|
-
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
1828
|
-
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
1829
|
-
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
1830
|
-
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
1831
|
-
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
1832
|
-
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
1833
|
-
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
1834
|
-
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
1835
|
-
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
1836
|
-
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
1837
|
-
/* undo focus ring */
|
|
1838
|
-
box-shadow: none;
|
|
1839
|
-
outline-style: none;
|
|
1840
|
-
}
|
|
1841
|
-
/**
|
|
1842
|
-
* @license EUPL-1.2
|
|
1843
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1844
|
-
*/
|
|
1845
|
-
/**
|
|
1846
|
-
* @license EUPL-1.2
|
|
1847
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1848
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1849
|
-
*/
|
|
1850
|
-
.utrecht-unordered-list, .utrecht-html ul {
|
|
1851
|
-
font-family: var(--utrecht-document-font-family, inherit);
|
|
1852
|
-
font-size: var(--utrecht-document-font-size, inherit);
|
|
1853
|
-
line-height: var(--utrecht-document-line-height, inherit);
|
|
1854
|
-
margin-block-end: 0;
|
|
1855
|
-
margin-block-start: 0;
|
|
1856
|
-
padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
|
|
1857
|
-
}
|
|
1858
|
-
|
|
1859
|
-
.utrecht-unordered-list--distanced, .utrecht-html ul {
|
|
1860
|
-
margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
|
|
1861
|
-
margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
|
|
1862
|
-
}
|
|
1863
|
-
|
|
1864
|
-
.utrecht-unordered-list--nested {
|
|
1865
|
-
margin-block-end: 0;
|
|
1866
|
-
margin-inline-start: 2ch;
|
|
1867
|
-
}
|
|
1868
|
-
|
|
1869
|
-
.utrecht-unordered-list__item, .utrecht-html ul > li {
|
|
1870
|
-
margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
|
|
1871
|
-
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
1872
|
-
padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
|
|
1873
|
-
}
|
|
1874
|
-
|
|
1875
|
-
.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
|
|
1876
|
-
.utrecht-unordered-list__marker {
|
|
1877
|
-
color: var(--utrecht-unordered-list-marker-color);
|
|
1878
|
-
content: "●";
|
|
1879
|
-
}
|
|
1880
|
-
|
|
1881
|
-
/**
|
|
1882
|
-
* @license EUPL-1.2
|
|
1883
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1884
|
-
*/
|
|
1885
|
-
/**
|
|
1886
|
-
* @license EUPL-1.2
|
|
1887
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1888
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1889
|
-
*/
|
|
1890
|
-
/* stylelint-disable scss/no-global-function-names */
|
|
1891
|
-
/**
|
|
1892
|
-
* @license EUPL-1.2
|
|
1893
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1894
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1895
|
-
*/
|
|
1896
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1897
|
-
/*
|
|
1898
|
-
|
|
1899
|
-
# CSS implementation
|
|
1900
|
-
|
|
1901
|
-
## `text-decoration-skip`
|
|
1902
|
-
|
|
1903
|
-
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
1904
|
-
For example by obscuring Arabic diacritics.
|
|
1905
|
-
|
|
1906
|
-
However, the combination of a greater thickness and skipping this thick underline
|
|
1907
|
-
leads to a very unappealing rendering of the underline. To avoid this,
|
|
1908
|
-
`text-decoration-skip` is disabled for interactive states.
|
|
1909
|
-
|
|
1910
|
-
For design token configurations that have identical thickness for normal and interactive
|
|
1911
|
-
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
1912
|
-
from an interrupted to an uninterrupted underline (for some texts).
|
|
1913
|
-
|
|
1914
|
-
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
1915
|
-
|
|
1916
|
-
---
|
|
1917
|
-
|
|
1918
|
-
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
1919
|
-
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
1920
|
-
not make this too inconvenient.
|
|
1921
|
-
|
|
1922
|
-
---
|
|
1923
|
-
|
|
1924
|
-
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
1925
|
-
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
1926
|
-
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
1927
|
-
|
|
1928
|
-
## `text-decoration-thickness`
|
|
1929
|
-
|
|
1930
|
-
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
1931
|
-
|
|
1932
|
-
---
|
|
1933
|
-
|
|
1934
|
-
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
1935
|
-
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
1936
|
-
the underline offset also seems to increase along with the thickness, which effectively means
|
|
1937
|
-
the underline is closer to the next line than in Safari.
|
|
1938
|
-
|
|
1939
|
-
---
|
|
1940
|
-
|
|
1941
|
-
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
1942
|
-
use the `max()` function to ensure the underline remains visible for every font size.
|
|
1943
|
-
|
|
1944
|
-
## `transition`
|
|
1945
|
-
|
|
1946
|
-
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
1947
|
-
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
1948
|
-
|
|
1949
|
-
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
1950
|
-
|
|
1951
|
-
*/
|
|
1952
|
-
.utrecht-link, .utrecht-html a:link {
|
|
580
|
+
.utrecht-html a:link {
|
|
1953
581
|
color: var(--utrecht-link-color, blue);
|
|
1954
582
|
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
1955
583
|
text-decoration-skip-ink: all;
|
|
1956
584
|
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
1957
585
|
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
1958
586
|
}
|
|
1959
|
-
|
|
1960
|
-
.utrecht-link--icon-left {
|
|
1961
|
-
background-image: var(--utrecht-link-icon-left-background-image, none);
|
|
1962
|
-
background-position: 0 0.25em;
|
|
1963
|
-
background-repeat: no-repeat;
|
|
1964
|
-
color: var(--utrecht-link-color, blue);
|
|
1965
|
-
font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
1966
|
-
padding-inline-start: var(--utrecht-space-block-md);
|
|
1967
|
-
text-decoration: none;
|
|
1968
|
-
}
|
|
1969
|
-
|
|
1970
|
-
.utrecht-link:visited,
|
|
1971
|
-
.utrecht-link--visited,
|
|
1972
587
|
.utrecht-html a:visited {
|
|
1973
588
|
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
1974
589
|
}
|
|
1975
|
-
|
|
1976
|
-
.utrecht-link:hover,
|
|
1977
|
-
.utrecht-link--hover,
|
|
1978
590
|
.utrecht-html a:hover {
|
|
1979
591
|
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
1980
592
|
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
@@ -1982,90 +594,47 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1982
594
|
text-decoration-skip-ink: none;
|
|
1983
595
|
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1984
596
|
}
|
|
1985
|
-
|
|
1986
|
-
.utrecht-link:active,
|
|
1987
|
-
.utrecht-link--active,
|
|
1988
597
|
.utrecht-html a:active {
|
|
1989
598
|
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
1990
599
|
}
|
|
1991
|
-
|
|
1992
|
-
.utrecht-link--focus, .utrecht-link:focus, .utrecht-html a:focus {
|
|
600
|
+
.utrecht-html a:focus {
|
|
1993
601
|
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
1994
602
|
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
1995
603
|
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1996
604
|
text-decoration-skip: none;
|
|
1997
605
|
text-decoration-skip-ink: none;
|
|
1998
606
|
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1999
|
-
}
|
|
2000
|
-
|
|
2001
|
-
.utrecht-link--focus-visible, .utrecht-link:focus, .utrecht-html a:focus {
|
|
2002
607
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2003
608
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2004
609
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2005
610
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2006
611
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2007
612
|
}
|
|
2008
|
-
|
|
2009
|
-
.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
|
|
613
|
+
.utrecht-html a:focus:not(:focus-visible) {
|
|
2010
614
|
/* undo focus ring */
|
|
2011
615
|
box-shadow: none;
|
|
2012
616
|
outline-style: none;
|
|
2013
617
|
}
|
|
2014
|
-
|
|
2015
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2016
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2017
|
-
.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
|
|
618
|
+
.utrecht-html a[href^="tel:" i] {
|
|
2018
619
|
white-space: nowrap;
|
|
2019
620
|
}
|
|
2020
|
-
|
|
2021
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2022
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2023
|
-
.utrecht-html a:focus:not(:focus-visible) {
|
|
2024
|
-
/* undo focus ring */
|
|
2025
|
-
box-shadow: none;
|
|
2026
|
-
outline-style: none;
|
|
2027
|
-
}
|
|
2028
|
-
|
|
2029
|
-
/**
|
|
2030
|
-
* @license EUPL-1.2
|
|
2031
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2032
|
-
*/
|
|
2033
|
-
/**
|
|
2034
|
-
* @license EUPL-1.2
|
|
2035
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2036
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2037
|
-
*/
|
|
2038
|
-
.utrecht-ordered-list, .utrecht-html ol {
|
|
621
|
+
.utrecht-html ol {
|
|
2039
622
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
2040
623
|
margin-block-end: 0;
|
|
2041
624
|
margin-block-start: 0;
|
|
2042
625
|
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
2043
|
-
}
|
|
2044
|
-
|
|
2045
|
-
.utrecht-ordered-list--distanced, .utrecht-html ol {
|
|
2046
626
|
margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
|
|
2047
627
|
margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
|
|
2048
628
|
}
|
|
2049
|
-
|
|
2050
|
-
.utrecht-ordered-list--arabic, .utrecht-html ol:lang(ar) {
|
|
2051
|
-
list-style: arabic-indic;
|
|
2052
|
-
}
|
|
2053
|
-
|
|
2054
|
-
.utrecht-ordered-list__item, .utrecht-html ol > li {
|
|
629
|
+
.utrecht-html ol > li {
|
|
2055
630
|
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
|
|
2056
631
|
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
2057
632
|
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
2058
633
|
}
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
*/
|
|
2064
|
-
/**
|
|
2065
|
-
* @license EUPL-1.2
|
|
2066
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
2067
|
-
*/
|
|
2068
|
-
.utrecht-paragraph, .utrecht-html p {
|
|
634
|
+
.utrecht-html ol:lang(ar) {
|
|
635
|
+
list-style: arabic-indic;
|
|
636
|
+
}
|
|
637
|
+
.utrecht-html p {
|
|
2069
638
|
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
2070
639
|
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
2071
640
|
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
@@ -2074,76 +643,39 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2074
643
|
margin-block-end: 0;
|
|
2075
644
|
margin-block-start: 0;
|
|
2076
645
|
}
|
|
2077
|
-
|
|
2078
|
-
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
646
|
+
.utrecht-html p.lead {
|
|
2079
647
|
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
2080
648
|
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
2081
649
|
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
2082
650
|
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
2083
|
-
}
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
margin-block-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
/* stylelint-disable selector-class-pattern */
|
|
2091
|
-
/**
|
|
2092
|
-
* @license EUPL-1.2
|
|
2093
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2094
|
-
*/
|
|
2095
|
-
/**
|
|
2096
|
-
* @license EUPL-1.2
|
|
2097
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2098
|
-
*/
|
|
2099
|
-
/**
|
|
2100
|
-
* @license EUPL-1.2
|
|
2101
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2102
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2103
|
-
*/
|
|
2104
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2105
|
-
.utrecht-radio-button, .utrecht-html input[type=radio i] {
|
|
2106
|
-
margin-block-end: 0;
|
|
651
|
+
}
|
|
652
|
+
.utrecht-html * ~ p {
|
|
653
|
+
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
654
|
+
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
655
|
+
}
|
|
656
|
+
.utrecht-html input[type=radio i] {
|
|
2107
657
|
/* reset native margin for input[type="radio" i] */
|
|
658
|
+
margin-block-end: 0;
|
|
2108
659
|
margin-block-start: 0;
|
|
2109
660
|
margin-inline-end: 0;
|
|
2110
661
|
margin-inline-start: 0;
|
|
2111
662
|
}
|
|
2112
|
-
|
|
2113
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2114
|
-
.utrecht-radio-button--disabled, .utrecht-radio-button--html-input:disabled, .utrecht-html input[type=radio i]:disabled {
|
|
663
|
+
.utrecht-html input[type=radio i]:disabled {
|
|
2115
664
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
2116
665
|
}
|
|
2117
|
-
|
|
2118
|
-
.utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
|
|
666
|
+
.utrecht-html input[type=radio i]:focus {
|
|
2119
667
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2120
668
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2121
669
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2122
670
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2123
671
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2124
672
|
}
|
|
2125
|
-
|
|
2126
|
-
.utrecht-radio-button--html-input:focus:not(:focus-visible), .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
673
|
+
.utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
2127
674
|
/* undo focus ring */
|
|
2128
675
|
box-shadow: none;
|
|
2129
676
|
outline-style: none;
|
|
2130
677
|
}
|
|
2131
|
-
|
|
2132
|
-
/**
|
|
2133
|
-
* @license EUPL-1.2
|
|
2134
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2135
|
-
*/
|
|
2136
|
-
/**
|
|
2137
|
-
* @license EUPL-1.2
|
|
2138
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2139
|
-
*/
|
|
2140
|
-
/**
|
|
2141
|
-
* @license EUPL-1.2
|
|
2142
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2143
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2144
|
-
*/
|
|
2145
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2146
|
-
.utrecht-select, .utrecht-html select {
|
|
678
|
+
.utrecht-html select {
|
|
2147
679
|
-moz-appearance: none;
|
|
2148
680
|
-webkit-appearance: none;
|
|
2149
681
|
appearance: none;
|
|
@@ -2168,74 +700,42 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2168
700
|
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
2169
701
|
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
2170
702
|
width: 100%;
|
|
703
|
+
/* <select> does not support :read-only */
|
|
2171
704
|
}
|
|
2172
|
-
|
|
2173
|
-
.utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
|
|
705
|
+
.utrecht-html select:disabled {
|
|
2174
706
|
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
2175
707
|
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
2176
708
|
color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
2177
709
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
2178
710
|
}
|
|
2179
|
-
|
|
2180
|
-
.utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
|
|
711
|
+
.utrecht-html select:focus {
|
|
2181
712
|
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
2182
713
|
border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
2183
714
|
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
2184
|
-
}
|
|
2185
|
-
|
|
2186
|
-
.utrecht-select--focus-visible, .utrecht-select--html-select:focus, .utrecht-html select:focus {
|
|
2187
715
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2188
716
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2189
717
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2190
718
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2191
719
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2192
720
|
}
|
|
2193
|
-
|
|
2194
|
-
.utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
|
|
2195
|
-
background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
2196
|
-
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
2197
|
-
border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
|
|
2198
|
-
}
|
|
2199
|
-
|
|
2200
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2201
|
-
.utrecht-select--html-select, .utrecht-html select {
|
|
2202
|
-
/* <select> does not support :read-only */
|
|
2203
|
-
}
|
|
2204
|
-
.utrecht-select--html-select:focus:not(:focus-visible), .utrecht-html select:focus:not(:focus-visible) {
|
|
721
|
+
.utrecht-html select:focus:not(:focus-visible) {
|
|
2205
722
|
/* undo focus ring */
|
|
2206
723
|
box-shadow: none;
|
|
2207
724
|
outline-style: none;
|
|
2208
725
|
}
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2216
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2217
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
2218
|
-
*/
|
|
2219
|
-
.utrecht-separator, .utrecht-html hr {
|
|
726
|
+
.utrecht-html select:invalid, .utrecht-html select[aria-invalid=true] {
|
|
727
|
+
background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
728
|
+
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
729
|
+
border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
|
|
730
|
+
}
|
|
731
|
+
.utrecht-html hr {
|
|
2220
732
|
border-color: var(--utrecht-separator-color);
|
|
2221
733
|
border-style: solid;
|
|
2222
734
|
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
2223
|
-
}
|
|
2224
|
-
|
|
2225
|
-
.utrecht-separator--distanced, .utrecht-html hr {
|
|
2226
735
|
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
2227
736
|
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
2228
737
|
}
|
|
2229
|
-
|
|
2230
|
-
/**
|
|
2231
|
-
* @license EUPL-1.2
|
|
2232
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2233
|
-
*/
|
|
2234
|
-
/**
|
|
2235
|
-
* @license EUPL-1.2
|
|
2236
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2237
|
-
*/
|
|
2238
|
-
.utrecht-table, .utrecht-html table {
|
|
738
|
+
.utrecht-html table {
|
|
2239
739
|
border-collapse: collapse;
|
|
2240
740
|
border-color: var(--utrecht-table-border-color, 0);
|
|
2241
741
|
border-style: solid;
|
|
@@ -2243,14 +743,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2243
743
|
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
2244
744
|
font-size: var(--utrecht-table-font-size, inherit);
|
|
2245
745
|
width: 100%;
|
|
2246
|
-
}
|
|
2247
|
-
|
|
2248
|
-
.utrecht-table--distanced, .utrecht-html table {
|
|
2249
746
|
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
2250
747
|
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
2251
748
|
}
|
|
2252
|
-
|
|
2253
|
-
.utrecht-table__caption, .utrecht-html caption {
|
|
749
|
+
.utrecht-html caption {
|
|
2254
750
|
color: var(--utrecht-table-caption-color);
|
|
2255
751
|
font-family: var(--utrecht-table-caption-font-family);
|
|
2256
752
|
font-size: var(--utrecht-table-caption-font-size);
|
|
@@ -2259,34 +755,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2259
755
|
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
2260
756
|
text-align: var(--utrecht-table-caption-text-align, center);
|
|
2261
757
|
}
|
|
2262
|
-
|
|
2263
|
-
.utrecht-table__header, .utrecht-html thead {
|
|
758
|
+
.utrecht-html thead {
|
|
2264
759
|
background-color: var(--utrecht-table-header-background-color);
|
|
2265
760
|
color: var(--utrecht-table-header-color);
|
|
2266
761
|
font-weight: var(--utrecht-table-header-font-weight);
|
|
2267
762
|
text-transform: var(--utrecht-table-header-text-transform);
|
|
2268
763
|
vertical-align: bottom;
|
|
2269
764
|
}
|
|
2270
|
-
|
|
2271
|
-
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
2272
|
-
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
2273
|
-
border-block-end-style: solid;
|
|
2274
|
-
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
2275
|
-
}
|
|
2276
|
-
|
|
2277
|
-
.utrecht-table__body, .utrecht-html tbody {
|
|
765
|
+
.utrecht-html tbody {
|
|
2278
766
|
vertical-align: baseline;
|
|
2279
767
|
}
|
|
2280
|
-
|
|
2281
|
-
.utrecht-table__header-cell, .utrecht-html th {
|
|
768
|
+
.utrecht-html th {
|
|
2282
769
|
color: var(--utrecht-table-header-cell-color);
|
|
2283
770
|
font-size: var(--utrecht-table-header-cell-font-size);
|
|
2284
771
|
font-weight: var(--utrecht-table-header-cell-font-weight);
|
|
2285
772
|
text-align: start;
|
|
2286
773
|
text-transform: var(--utrecht-table-header-cell-text-transform);
|
|
2287
774
|
}
|
|
2288
|
-
|
|
2289
|
-
.utrecht-table__cell, .utrecht-html th,
|
|
775
|
+
.utrecht-html th,
|
|
2290
776
|
.utrecht-html td {
|
|
2291
777
|
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
2292
778
|
border-block-end-style: solid;
|
|
@@ -2298,57 +784,47 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2298
784
|
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
2299
785
|
text-align: start;
|
|
2300
786
|
}
|
|
2301
|
-
|
|
2302
|
-
.utrecht-table__cell--first, .utrecht-html td:first-child,
|
|
787
|
+
.utrecht-html td:first-child,
|
|
2303
788
|
.utrecht-html th:first-child {
|
|
2304
789
|
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
2305
790
|
}
|
|
2306
|
-
|
|
2307
|
-
.utrecht-table__cell--last, .utrecht-html td:last-child,
|
|
791
|
+
.utrecht-html td:last-child,
|
|
2308
792
|
.utrecht-html th:last-child {
|
|
2309
793
|
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
2310
794
|
}
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
795
|
+
.utrecht-html thead tr:last-child th {
|
|
796
|
+
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
797
|
+
border-block-end-style: solid;
|
|
798
|
+
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
799
|
+
}
|
|
2314
800
|
.utrecht-html thead > tr > th.numeric,
|
|
2315
801
|
.utrecht-html tfoot > tr > th.numeric,
|
|
2316
|
-
.utrecht-html th[scope=column].numeric
|
|
2317
|
-
.utrecht-html td.numeric {
|
|
802
|
+
.utrecht-html th[scope=column].numeric {
|
|
2318
803
|
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
2319
804
|
text-align: right;
|
|
2320
805
|
}
|
|
2321
|
-
|
|
2322
|
-
|
|
806
|
+
.utrecht-html td.numeric {
|
|
807
|
+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
808
|
+
text-align: right;
|
|
2323
809
|
font-variant-numeric: lining-nums tabular-nums;
|
|
2324
810
|
}
|
|
2325
|
-
|
|
2326
|
-
|
|
811
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
|
|
812
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
813
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
814
|
+
}
|
|
815
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
|
|
2327
816
|
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
2328
817
|
color: var(--utrecht-table-row-alternate-odd-color);
|
|
2329
818
|
}
|
|
2330
|
-
|
|
2331
|
-
.utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
|
|
819
|
+
.utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
|
|
2332
820
|
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
2333
821
|
color: var(--utrecht-table-row-alternate-even-color);
|
|
2334
822
|
}
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
*/
|
|
2341
|
-
/**
|
|
2342
|
-
* @license EUPL-1.2
|
|
2343
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2344
|
-
*/
|
|
2345
|
-
/**
|
|
2346
|
-
* @license EUPL-1.2
|
|
2347
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2348
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2349
|
-
*/
|
|
2350
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2351
|
-
.utrecht-textarea, .utrecht-html textarea {
|
|
823
|
+
.utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
|
|
824
|
+
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
825
|
+
color: var(--utrecht-table-row-alternate-odd-color);
|
|
826
|
+
}
|
|
827
|
+
.utrecht-html textarea {
|
|
2352
828
|
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
|
|
2353
829
|
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
|
|
2354
830
|
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
|
|
@@ -2368,65 +844,42 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2368
844
|
resize: vertical;
|
|
2369
845
|
width: 100%;
|
|
2370
846
|
}
|
|
2371
|
-
|
|
2372
|
-
.utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true], .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
|
|
2373
|
-
background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
2374
|
-
border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
2375
|
-
border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))));
|
|
2376
|
-
}
|
|
2377
|
-
|
|
2378
|
-
.utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
|
|
847
|
+
.utrecht-html textarea:disabled {
|
|
2379
848
|
background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
2380
849
|
border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
2381
850
|
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2382
851
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
2383
852
|
}
|
|
2384
|
-
|
|
2385
|
-
.utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
853
|
+
.utrecht-html textarea:focus {
|
|
2386
854
|
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
2387
855
|
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
2388
856
|
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2389
|
-
}
|
|
2390
|
-
|
|
2391
|
-
.utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
2392
857
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2393
858
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2394
859
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2395
860
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2396
861
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2397
862
|
}
|
|
2398
|
-
|
|
2399
|
-
|
|
863
|
+
.utrecht-html textarea:focus:not(:focus-visible) {
|
|
864
|
+
/* undo focus ring */
|
|
865
|
+
box-shadow: none;
|
|
866
|
+
outline-style: none;
|
|
867
|
+
}
|
|
868
|
+
.utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
|
|
869
|
+
background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
870
|
+
border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
871
|
+
border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))));
|
|
872
|
+
}
|
|
873
|
+
.utrecht-html textarea:read-only {
|
|
2400
874
|
border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));
|
|
2401
875
|
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2402
876
|
}
|
|
2403
|
-
|
|
2404
|
-
.utrecht-textarea__placeholder, .utrecht-textarea--html-textarea::placeholder, .utrecht-html textarea::placeholder {
|
|
877
|
+
.utrecht-html textarea::placeholder {
|
|
2405
878
|
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2406
879
|
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
2407
880
|
opacity: 100%;
|
|
2408
881
|
}
|
|
2409
|
-
|
|
2410
|
-
.utrecht-textarea--html-textarea:focus:not(:focus-visible), .utrecht-html textarea:focus:not(:focus-visible) {
|
|
2411
|
-
/* undo focus ring */
|
|
2412
|
-
box-shadow: none;
|
|
2413
|
-
outline-style: none;
|
|
2414
|
-
}
|
|
2415
|
-
/**
|
|
2416
|
-
* @license EUPL-1.2
|
|
2417
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2418
|
-
*/
|
|
2419
|
-
/**
|
|
2420
|
-
* @license EUPL-1.2
|
|
2421
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2422
|
-
*/
|
|
2423
|
-
/**
|
|
2424
|
-
* @license EUPL-1.2
|
|
2425
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2426
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2427
|
-
*/
|
|
2428
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2429
|
-
.utrecht-textbox, .utrecht-html input:not([type]),
|
|
882
|
+
.utrecht-html input:not([type]),
|
|
2430
883
|
.utrecht-html input[type=date i],
|
|
2431
884
|
.utrecht-html input[type=datetime-local i],
|
|
2432
885
|
.utrecht-html input[type=email i],
|
|
@@ -2456,38 +909,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2456
909
|
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
2457
910
|
width: 100%;
|
|
2458
911
|
}
|
|
2459
|
-
|
|
2460
|
-
.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input:invalid:not([type]),
|
|
2461
|
-
.utrecht-html input[type=date i]:invalid,
|
|
2462
|
-
.utrecht-html input[type=datetime-local i]:invalid,
|
|
2463
|
-
.utrecht-html input[type=email i]:invalid,
|
|
2464
|
-
.utrecht-html input[type=month i]:invalid,
|
|
2465
|
-
.utrecht-html input[type=number i]:invalid,
|
|
2466
|
-
.utrecht-html input[type=password i]:invalid,
|
|
2467
|
-
.utrecht-html input[type=search i]:invalid,
|
|
2468
|
-
.utrecht-html input[type=tel i]:invalid,
|
|
2469
|
-
.utrecht-html input[type=text i]:invalid,
|
|
2470
|
-
.utrecht-html input[type=time i]:invalid,
|
|
2471
|
-
.utrecht-html input[type=url i]:invalid,
|
|
2472
|
-
.utrecht-html input[type=week i]:invalid, .utrecht-html input[aria-invalid=true]:not([type]),
|
|
2473
|
-
.utrecht-html input[aria-invalid=true][type=date i],
|
|
2474
|
-
.utrecht-html input[aria-invalid=true][type=datetime-local i],
|
|
2475
|
-
.utrecht-html input[aria-invalid=true][type=email i],
|
|
2476
|
-
.utrecht-html input[aria-invalid=true][type=month i],
|
|
2477
|
-
.utrecht-html input[aria-invalid=true][type=number i],
|
|
2478
|
-
.utrecht-html input[aria-invalid=true][type=password i],
|
|
2479
|
-
.utrecht-html input[aria-invalid=true][type=search i],
|
|
2480
|
-
.utrecht-html input[aria-invalid=true][type=tel i],
|
|
2481
|
-
.utrecht-html input[aria-invalid=true][type=text i],
|
|
2482
|
-
.utrecht-html input[aria-invalid=true][type=time i],
|
|
2483
|
-
.utrecht-html input[aria-invalid=true][type=url i],
|
|
2484
|
-
.utrecht-html input[aria-invalid=true][type=week i] {
|
|
2485
|
-
background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
|
|
2486
|
-
border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
|
|
2487
|
-
border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
|
|
2488
|
-
}
|
|
2489
|
-
|
|
2490
|
-
.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input:disabled:not([type]),
|
|
912
|
+
.utrecht-html input:not([type]):disabled,
|
|
2491
913
|
.utrecht-html input[type=date i]:disabled,
|
|
2492
914
|
.utrecht-html input[type=datetime-local i]:disabled,
|
|
2493
915
|
.utrecht-html input[type=email i]:disabled,
|
|
@@ -2505,8 +927,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2505
927
|
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2506
928
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
2507
929
|
}
|
|
2508
|
-
|
|
2509
|
-
.utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
930
|
+
.utrecht-html input:not([type]):focus,
|
|
2510
931
|
.utrecht-html input[type=date i]:focus,
|
|
2511
932
|
.utrecht-html input[type=datetime-local i]:focus,
|
|
2512
933
|
.utrecht-html input[type=email i]:focus,
|
|
@@ -2522,29 +943,59 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2522
943
|
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
2523
944
|
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
2524
945
|
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2525
|
-
}
|
|
2526
|
-
|
|
2527
|
-
.utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
2528
|
-
.utrecht-html input[type=date i]:focus,
|
|
2529
|
-
.utrecht-html input[type=datetime-local i]:focus,
|
|
2530
|
-
.utrecht-html input[type=email i]:focus,
|
|
2531
|
-
.utrecht-html input[type=month i]:focus,
|
|
2532
|
-
.utrecht-html input[type=number i]:focus,
|
|
2533
|
-
.utrecht-html input[type=password i]:focus,
|
|
2534
|
-
.utrecht-html input[type=search i]:focus,
|
|
2535
|
-
.utrecht-html input[type=tel i]:focus,
|
|
2536
|
-
.utrecht-html input[type=text i]:focus,
|
|
2537
|
-
.utrecht-html input[type=time i]:focus,
|
|
2538
|
-
.utrecht-html input[type=url i]:focus,
|
|
2539
|
-
.utrecht-html input[type=week i]:focus {
|
|
2540
946
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2541
947
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2542
948
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2543
949
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2544
950
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2545
951
|
}
|
|
2546
|
-
|
|
2547
|
-
.utrecht-
|
|
952
|
+
.utrecht-html input:not([type]):focus:not(:focus-visible),
|
|
953
|
+
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
954
|
+
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
955
|
+
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
956
|
+
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
957
|
+
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
958
|
+
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
959
|
+
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
960
|
+
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
961
|
+
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
962
|
+
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
963
|
+
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
964
|
+
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
965
|
+
/* undo focus ring */
|
|
966
|
+
box-shadow: none;
|
|
967
|
+
outline-style: none;
|
|
968
|
+
}
|
|
969
|
+
.utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
|
|
970
|
+
.utrecht-html input[type=date i]:invalid,
|
|
971
|
+
.utrecht-html input[type=date i][aria-invalid=true],
|
|
972
|
+
.utrecht-html input[type=datetime-local i]:invalid,
|
|
973
|
+
.utrecht-html input[type=datetime-local i][aria-invalid=true],
|
|
974
|
+
.utrecht-html input[type=email i]:invalid,
|
|
975
|
+
.utrecht-html input[type=email i][aria-invalid=true],
|
|
976
|
+
.utrecht-html input[type=month i]:invalid,
|
|
977
|
+
.utrecht-html input[type=month i][aria-invalid=true],
|
|
978
|
+
.utrecht-html input[type=number i]:invalid,
|
|
979
|
+
.utrecht-html input[type=number i][aria-invalid=true],
|
|
980
|
+
.utrecht-html input[type=password i]:invalid,
|
|
981
|
+
.utrecht-html input[type=password i][aria-invalid=true],
|
|
982
|
+
.utrecht-html input[type=search i]:invalid,
|
|
983
|
+
.utrecht-html input[type=search i][aria-invalid=true],
|
|
984
|
+
.utrecht-html input[type=tel i]:invalid,
|
|
985
|
+
.utrecht-html input[type=tel i][aria-invalid=true],
|
|
986
|
+
.utrecht-html input[type=text i]:invalid,
|
|
987
|
+
.utrecht-html input[type=text i][aria-invalid=true],
|
|
988
|
+
.utrecht-html input[type=time i]:invalid,
|
|
989
|
+
.utrecht-html input[type=time i][aria-invalid=true],
|
|
990
|
+
.utrecht-html input[type=url i]:invalid,
|
|
991
|
+
.utrecht-html input[type=url i][aria-invalid=true],
|
|
992
|
+
.utrecht-html input[type=week i]:invalid,
|
|
993
|
+
.utrecht-html input[type=week i][aria-invalid=true] {
|
|
994
|
+
background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
|
|
995
|
+
border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
|
|
996
|
+
border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
|
|
997
|
+
}
|
|
998
|
+
.utrecht-html input:not([type]):read-only,
|
|
2548
999
|
.utrecht-html input[type=date i]:read-only,
|
|
2549
1000
|
.utrecht-html input[type=datetime-local i]:read-only,
|
|
2550
1001
|
.utrecht-html input[type=email i]:read-only,
|
|
@@ -2560,8 +1011,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2560
1011
|
border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
|
|
2561
1012
|
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
2562
1013
|
}
|
|
2563
|
-
|
|
2564
|
-
.utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder, .utrecht-html input:not([type])::placeholder,
|
|
1014
|
+
.utrecht-html input:not([type])::placeholder,
|
|
2565
1015
|
.utrecht-html input[type=date i]::placeholder,
|
|
2566
1016
|
.utrecht-html input[type=datetime-local i]::placeholder,
|
|
2567
1017
|
.utrecht-html input[type=email i]::placeholder,
|
|
@@ -2578,8 +1028,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2578
1028
|
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
2579
1029
|
opacity: 100%;
|
|
2580
1030
|
}
|
|
2581
|
-
|
|
2582
|
-
.utrecht-
|
|
1031
|
+
.utrecht-html input[autocomplete~=current-password i],
|
|
1032
|
+
.utrecht-html input[autocomplete~=new-password i] {
|
|
1033
|
+
font-variant-ligatures: none;
|
|
1034
|
+
font-variant-numeric: slashed-zero;
|
|
1035
|
+
}
|
|
1036
|
+
.utrecht-html input[type=url i] {
|
|
1037
|
+
font-variant-ligatures: none;
|
|
1038
|
+
}
|
|
1039
|
+
.utrecht-html input[autocomplete~=bday i],
|
|
2583
1040
|
.utrecht-html input[autocomplete~=bday-day i],
|
|
2584
1041
|
.utrecht-html input[autocomplete~=bday-month i],
|
|
2585
1042
|
.utrecht-html input[autocomplete~=bday-year i],
|
|
@@ -2604,70 +1061,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2604
1061
|
/* avoid spinner input in Firefox */
|
|
2605
1062
|
font-variant-numeric: lining-nums tabular-nums;
|
|
2606
1063
|
}
|
|
2607
|
-
|
|
2608
|
-
.utrecht-textbox--password, .utrecht-html input[autocomplete~=current-password i],
|
|
2609
|
-
.utrecht-html input[autocomplete~=new-password i] {
|
|
2610
|
-
font-variant-ligatures: none;
|
|
2611
|
-
font-variant-numeric: slashed-zero;
|
|
2612
|
-
}
|
|
2613
|
-
|
|
2614
|
-
.utrecht-textbox--url, .utrecht-html input[type=url i] {
|
|
2615
|
-
font-variant-ligatures: none;
|
|
2616
|
-
}
|
|
2617
|
-
|
|
2618
|
-
.utrecht-textbox--html-input:focus:not(:focus-visible), .utrecht-html input:focus:not(:focus-visible):not([type]),
|
|
2619
|
-
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
2620
|
-
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
2621
|
-
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
2622
|
-
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
2623
|
-
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
2624
|
-
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
2625
|
-
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
2626
|
-
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
2627
|
-
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
2628
|
-
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
2629
|
-
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
2630
|
-
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
2631
|
-
/* undo focus ring */
|
|
2632
|
-
box-shadow: none;
|
|
2633
|
-
outline-style: none;
|
|
2634
|
-
}
|
|
2635
|
-
/**
|
|
2636
|
-
* @license EUPL-1.2
|
|
2637
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2638
|
-
*/
|
|
2639
|
-
/**
|
|
2640
|
-
* @license EUPL-1.2
|
|
2641
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2642
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2643
|
-
*/
|
|
2644
|
-
.utrecht-unordered-list, .utrecht-html ul {
|
|
1064
|
+
.utrecht-html ul {
|
|
2645
1065
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
2646
1066
|
font-size: var(--utrecht-document-font-size, inherit);
|
|
2647
1067
|
line-height: var(--utrecht-document-line-height, inherit);
|
|
2648
1068
|
margin-block-end: 0;
|
|
2649
1069
|
margin-block-start: 0;
|
|
2650
1070
|
padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
|
|
2651
|
-
}
|
|
2652
|
-
|
|
2653
|
-
.utrecht-unordered-list--distanced, .utrecht-html ul {
|
|
2654
1071
|
margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
|
|
2655
1072
|
margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
|
|
2656
1073
|
}
|
|
2657
|
-
|
|
2658
|
-
.utrecht-unordered-list--nested {
|
|
2659
|
-
margin-block-end: 0;
|
|
2660
|
-
margin-inline-start: 2ch;
|
|
2661
|
-
}
|
|
2662
|
-
|
|
2663
|
-
.utrecht-unordered-list__item, .utrecht-html ul > li {
|
|
1074
|
+
.utrecht-html ul > li {
|
|
2664
1075
|
margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
|
|
2665
1076
|
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
2666
1077
|
padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
|
|
2667
1078
|
}
|
|
2668
|
-
|
|
2669
|
-
.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
|
|
2670
|
-
.utrecht-unordered-list__marker {
|
|
1079
|
+
.utrecht-html ul > li::marker {
|
|
2671
1080
|
color: var(--utrecht-unordered-list-marker-color);
|
|
2672
1081
|
content: "●";
|
|
2673
1082
|
}
|