@utrecht/component-library-css 1.0.0-alpha.33 → 1.0.0-alpha.330
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/README.md +44 -0
- package/dist/html.css +1170 -1187
- package/dist/index.css +3348 -2233
- package/html-component.md +25 -0
- package/package.json +7 -4
- package/project.json +18 -0
- package/src/html.scss +1 -19
- package/src/index.scss +12 -7
- package/dist/bem.css +0 -1410
- package/dist/root-theme.css +0 -510
- package/src/bem.scss +0 -52
- package/src/root-theme.scss +0 -9
package/dist/html.css
CHANGED
|
@@ -8,1337 +8,1320 @@
|
|
|
8
8
|
* @license EUPL-1.2
|
|
9
9
|
* Copyright (c) 2021 Robbert Broersma
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
11
|
+
/* Collection of all semantic HTML styles in the component library */
|
|
12
|
+
/* stylelint-disable no-invalid-position-at-import-rule */
|
|
13
|
+
.utrecht-html {
|
|
14
|
+
--utrecht-space-around: 1;
|
|
15
|
+
/**
|
|
16
|
+
* @license EUPL-1.2
|
|
17
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
18
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
19
|
+
*/
|
|
20
|
+
/**
|
|
21
|
+
* @license EUPL-1.2
|
|
22
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
23
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
24
|
+
*/
|
|
25
|
+
/**
|
|
26
|
+
* @license EUPL-1.2
|
|
27
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
28
|
+
*/
|
|
29
|
+
/**
|
|
30
|
+
* @license EUPL-1.2
|
|
31
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
32
|
+
*/
|
|
33
|
+
/**
|
|
34
|
+
* @license EUPL-1.2
|
|
35
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
36
|
+
*/
|
|
37
|
+
/**
|
|
38
|
+
* @license EUPL-1.2
|
|
39
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
40
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
41
|
+
*/
|
|
42
|
+
/**
|
|
43
|
+
* @license EUPL-1.2
|
|
44
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
45
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
46
|
+
*/
|
|
47
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
48
|
+
/* override the `:focus` selector above */
|
|
49
|
+
/* stylelint-disable-next-line no-descending-specificity */
|
|
50
|
+
/**
|
|
51
|
+
* @license EUPL-1.2
|
|
52
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
53
|
+
*/
|
|
54
|
+
/**
|
|
55
|
+
* @license EUPL-1.2
|
|
56
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
57
|
+
*/
|
|
58
|
+
/**
|
|
59
|
+
* @license EUPL-1.2
|
|
60
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
61
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
62
|
+
*/
|
|
63
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
64
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
65
|
+
/**
|
|
66
|
+
* @license EUPL-1.2
|
|
67
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
68
|
+
*/
|
|
69
|
+
/**
|
|
70
|
+
* @license EUPL-1.2
|
|
71
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
72
|
+
*/
|
|
73
|
+
/**
|
|
74
|
+
* @license EUPL-1.2
|
|
75
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
76
|
+
*/
|
|
77
|
+
/**
|
|
78
|
+
* @license EUPL-1.2
|
|
79
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
80
|
+
*/
|
|
81
|
+
/**
|
|
82
|
+
* @license EUPL-1.2
|
|
83
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
84
|
+
*/
|
|
85
|
+
/**
|
|
86
|
+
* @license EUPL-1.2
|
|
87
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
88
|
+
*/
|
|
89
|
+
/**
|
|
90
|
+
* @license EUPL-1.2
|
|
91
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
92
|
+
*/
|
|
93
|
+
/**
|
|
94
|
+
* @license EUPL-1.2
|
|
95
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
96
|
+
*/
|
|
97
|
+
/**
|
|
98
|
+
* @license EUPL-1.2
|
|
99
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
100
|
+
*/
|
|
101
|
+
/**
|
|
102
|
+
* @license EUPL-1.2
|
|
103
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
104
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
105
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
106
|
+
*/
|
|
107
|
+
/**
|
|
108
|
+
* @license EUPL-1.2
|
|
109
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
110
|
+
*/
|
|
111
|
+
/**
|
|
112
|
+
* @license EUPL-1.2
|
|
113
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
114
|
+
*/
|
|
115
|
+
/**
|
|
116
|
+
* @license EUPL-1.2
|
|
117
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
118
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
119
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
120
|
+
*/
|
|
121
|
+
/**
|
|
122
|
+
* @license EUPL-1.2
|
|
123
|
+
* Copyright (c) 2021-2022 Frameless 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-2022 Frameless B.V.
|
|
138
|
+
*/
|
|
139
|
+
/**
|
|
140
|
+
* @license EUPL-1.2
|
|
141
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
142
|
+
*/
|
|
143
|
+
/**
|
|
144
|
+
* @license EUPL-1.2
|
|
145
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
146
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
147
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
148
|
+
*/
|
|
149
|
+
/**
|
|
150
|
+
* @license EUPL-1.2
|
|
151
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
152
|
+
*/
|
|
153
|
+
/**
|
|
154
|
+
* @license EUPL-1.2
|
|
155
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
156
|
+
*/
|
|
157
|
+
/**
|
|
158
|
+
* @license EUPL-1.2
|
|
159
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
160
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
161
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
162
|
+
*/
|
|
163
|
+
/**
|
|
164
|
+
* @license EUPL-1.2
|
|
165
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
166
|
+
*/
|
|
167
|
+
/**
|
|
168
|
+
* @license EUPL-1.2
|
|
169
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
170
|
+
*/
|
|
171
|
+
/**
|
|
172
|
+
* @license EUPL-1.2
|
|
173
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
174
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
175
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
176
|
+
*/
|
|
177
|
+
/**
|
|
178
|
+
* @license EUPL-1.2
|
|
179
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
180
|
+
*/
|
|
181
|
+
/**
|
|
182
|
+
* @license EUPL-1.2
|
|
183
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
184
|
+
*/
|
|
185
|
+
/**
|
|
186
|
+
* @license EUPL-1.2
|
|
187
|
+
* Copyright (c) 2022 Gemeente Utrecht
|
|
188
|
+
* Copyright (c) 2022 Robbert Broersma
|
|
189
|
+
* Copyright (c) 2022 The Knights Who Say NIH! B.V.
|
|
190
|
+
*/
|
|
191
|
+
/**
|
|
192
|
+
* @license EUPL-1.2
|
|
193
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
194
|
+
*/
|
|
195
|
+
/**
|
|
196
|
+
* @license EUPL-1.2
|
|
197
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
198
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
199
|
+
*/
|
|
200
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
201
|
+
/**
|
|
202
|
+
* @license EUPL-1.2
|
|
203
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
204
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
205
|
+
*/
|
|
206
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
207
|
+
/*
|
|
208
|
+
|
|
209
|
+
# CSS implementation
|
|
210
|
+
|
|
211
|
+
## `text-decoration-skip`
|
|
212
|
+
|
|
213
|
+
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
214
|
+
For example by obscuring Arabic diacritics.
|
|
215
|
+
|
|
216
|
+
However, the combination of a greater thickness and skipping this thick underline
|
|
217
|
+
leads to a very unappealing rendering of the underline. To avoid this,
|
|
218
|
+
`text-decoration-skip` is disabled for interactive states.
|
|
219
|
+
|
|
220
|
+
For design token configurations that have identical thickness for normal and interactive
|
|
221
|
+
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
222
|
+
from an interrupted to an uninterrupted underline (for some texts).
|
|
223
|
+
|
|
224
|
+
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
228
|
+
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
229
|
+
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
230
|
+
not make this too inconvenient.
|
|
231
|
+
|
|
232
|
+
---
|
|
233
|
+
|
|
234
|
+
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
235
|
+
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
236
|
+
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
237
|
+
|
|
238
|
+
## `text-decoration-thickness`
|
|
239
|
+
|
|
240
|
+
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
241
|
+
|
|
242
|
+
---
|
|
243
|
+
|
|
244
|
+
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
245
|
+
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
246
|
+
the underline offset also seems to increase along with the thickness, which effectively means
|
|
247
|
+
the underline is closer to the next line than in Safari.
|
|
248
|
+
|
|
249
|
+
---
|
|
250
|
+
|
|
251
|
+
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
252
|
+
use the `max()` function to ensure the underline remains visible for every font size.
|
|
253
|
+
|
|
254
|
+
## `transition`
|
|
255
|
+
|
|
256
|
+
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
257
|
+
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
258
|
+
|
|
259
|
+
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
260
|
+
|
|
261
|
+
*/
|
|
262
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
263
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
264
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
265
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
266
|
+
/**
|
|
267
|
+
* Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
|
|
268
|
+
*
|
|
269
|
+
* Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
|
|
270
|
+
*/
|
|
271
|
+
/**
|
|
272
|
+
* @license EUPL-1.2
|
|
273
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
274
|
+
*/
|
|
275
|
+
/**
|
|
276
|
+
* @license EUPL-1.2
|
|
277
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
278
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
279
|
+
*/
|
|
280
|
+
/**
|
|
281
|
+
* @license EUPL-1.2
|
|
282
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
283
|
+
*/
|
|
284
|
+
/**
|
|
285
|
+
* @license EUPL-1.2
|
|
286
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
287
|
+
*/
|
|
288
|
+
/* stylelint-disable selector-class-pattern */
|
|
289
|
+
/**
|
|
290
|
+
* @license EUPL-1.2
|
|
291
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
292
|
+
*/
|
|
293
|
+
/**
|
|
294
|
+
* @license EUPL-1.2
|
|
295
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
296
|
+
*/
|
|
297
|
+
/**
|
|
298
|
+
* @license EUPL-1.2
|
|
299
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
300
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
301
|
+
*/
|
|
302
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
303
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
304
|
+
/**
|
|
305
|
+
* @license EUPL-1.2
|
|
306
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
307
|
+
*/
|
|
308
|
+
/**
|
|
309
|
+
* @license EUPL-1.2
|
|
310
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
311
|
+
*/
|
|
312
|
+
/**
|
|
313
|
+
* @license EUPL-1.2
|
|
314
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
315
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
316
|
+
*/
|
|
317
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
318
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
319
|
+
/**
|
|
320
|
+
* @license EUPL-1.2
|
|
321
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
322
|
+
*/
|
|
323
|
+
/**
|
|
324
|
+
* @license EUPL-1.2
|
|
325
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
326
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
327
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
328
|
+
*/
|
|
329
|
+
/**
|
|
330
|
+
* @license EUPL-1.2
|
|
331
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
332
|
+
*/
|
|
333
|
+
/**
|
|
334
|
+
* @license EUPL-1.2
|
|
335
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
336
|
+
*/
|
|
337
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
338
|
+
/* stylelint-disable selector-class-pattern */
|
|
339
|
+
/**
|
|
340
|
+
* @license EUPL-1.2
|
|
341
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
342
|
+
*/
|
|
343
|
+
/**
|
|
344
|
+
* @license EUPL-1.2
|
|
345
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
346
|
+
*/
|
|
347
|
+
/**
|
|
348
|
+
* @license EUPL-1.2
|
|
349
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
350
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
351
|
+
*/
|
|
352
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
353
|
+
/**
|
|
354
|
+
* @license EUPL-1.2
|
|
355
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
356
|
+
*/
|
|
357
|
+
/**
|
|
358
|
+
* @license EUPL-1.2
|
|
359
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
360
|
+
*/
|
|
361
|
+
/**
|
|
362
|
+
* @license EUPL-1.2
|
|
363
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
364
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
365
|
+
*/
|
|
366
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
367
|
+
/**
|
|
368
|
+
* @license EUPL-1.2
|
|
369
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
370
|
+
*/
|
|
371
|
+
/**
|
|
372
|
+
* @license EUPL-1.2
|
|
373
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
374
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
375
|
+
*/
|
|
376
|
+
}
|
|
377
|
+
.utrecht-html article {
|
|
26
378
|
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
27
379
|
}
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* @license EUPL-1.2
|
|
31
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
32
|
-
*/
|
|
33
|
-
/**
|
|
34
|
-
* @license EUPL-1.2
|
|
35
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
36
|
-
*/
|
|
37
|
-
.utrecht-blockquote, .utrecht-html blockquote {
|
|
380
|
+
.utrecht-html blockquote {
|
|
38
381
|
font-family: var(--utrecht-document-font-family);
|
|
39
382
|
font-size: var(--utrecht-blockquote-font-size);
|
|
40
|
-
margin-
|
|
383
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
|
|
384
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
|
|
41
385
|
margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
.utrecht-blockquote__attribution {
|
|
45
|
-
color: var(--utrecht-blockquote-attribution-color, inherit);
|
|
46
|
-
font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.utrecht-blockquote__content, .utrecht-html blockquote {
|
|
386
|
+
margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
|
|
50
387
|
--utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
|
|
51
388
|
--utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
52
389
|
color: var(--utrecht-blockquote-content-color, inherit);
|
|
53
390
|
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
.utrecht-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
color: var(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
391
|
+
--utrecht-space-around: 1;
|
|
392
|
+
}
|
|
393
|
+
.utrecht-html input[type=button i],
|
|
394
|
+
.utrecht-html input[type=reset i],
|
|
395
|
+
.utrecht-html input[type=submit i],
|
|
396
|
+
.utrecht-html button {
|
|
397
|
+
/*
|
|
398
|
+
`--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
|
|
399
|
+
The hint color takes priority over the appearance color.
|
|
400
|
+
|
|
401
|
+
`--_utrecht-button-appearance` is the internal prefix for the appearance
|
|
402
|
+
(primary-action, secondary-action or subtle), it is not an API.
|
|
403
|
+
*/
|
|
404
|
+
--_utrecht-button-background-color: var(
|
|
405
|
+
--_utrecht-button-hint-background-color,
|
|
406
|
+
var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
|
|
407
|
+
);
|
|
408
|
+
--_utrecht-button-color: var(
|
|
409
|
+
--_utrecht-button-hint-color,
|
|
410
|
+
var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
|
|
411
|
+
);
|
|
412
|
+
--_utrecht-button-border-color: var(
|
|
413
|
+
--_utrecht-button-hint-border-color,
|
|
414
|
+
var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
|
|
415
|
+
);
|
|
416
|
+
--_utrecht-button-border-bottom-color: var(
|
|
417
|
+
--_utrecht-button-hint-border-bottom-color,
|
|
418
|
+
var(
|
|
419
|
+
--_utrecht-button-hint-border-color,
|
|
420
|
+
var(
|
|
421
|
+
--_utrecht-button-appearance-border-bottom-color,
|
|
422
|
+
var(
|
|
423
|
+
--_utrecht-button-appearance-border-color,
|
|
424
|
+
var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
|
|
425
|
+
)
|
|
426
|
+
)
|
|
427
|
+
)
|
|
428
|
+
);
|
|
429
|
+
--_utrecht-button-disabled-background-color: var(
|
|
430
|
+
--_utrecht-button-hint-disabled-background-color,
|
|
431
|
+
var(
|
|
432
|
+
--_utrecht-button-appearance-disabled-background-color,
|
|
433
|
+
var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
|
|
434
|
+
)
|
|
435
|
+
);
|
|
436
|
+
--_utrecht-button-disabled-border-color: var(
|
|
437
|
+
--_utrecht-button-hint-disabled-border-color,
|
|
438
|
+
var(
|
|
439
|
+
--_utrecht-button-appearance-disabled-border-color,
|
|
440
|
+
var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
|
|
441
|
+
)
|
|
442
|
+
);
|
|
443
|
+
--_utrecht-button-disabled-color: var(
|
|
444
|
+
--utrecht-hint-button-disabled-color,
|
|
445
|
+
var(
|
|
446
|
+
--utrecht-button-appearance-button-disabled-color,
|
|
447
|
+
var(--utrecht-button-disabled-color, var(--utrecht-button-color))
|
|
448
|
+
)
|
|
449
|
+
);
|
|
450
|
+
--_utrecht-button-focus-background-color: var(
|
|
451
|
+
--_utrecht-button-hint-focus-background-color,
|
|
452
|
+
var(
|
|
453
|
+
--_utrecht-button-hint-background-color,
|
|
454
|
+
var(
|
|
455
|
+
--_utrecht-button-appearance-focus-background-color,
|
|
456
|
+
var(
|
|
457
|
+
--_utrecht-button-appearance-background-color,
|
|
458
|
+
var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
|
|
459
|
+
)
|
|
460
|
+
)
|
|
461
|
+
)
|
|
462
|
+
);
|
|
463
|
+
--_utrecht-button-focus-border-color: var(
|
|
464
|
+
--_utrecht-button-hint-focus-border-color,
|
|
465
|
+
var(
|
|
466
|
+
--_utrecht-button-hint-border-color,
|
|
467
|
+
var(
|
|
468
|
+
--_utrecht-button-appearance-focus-border-color,
|
|
469
|
+
var(
|
|
470
|
+
--_utrecht-button-appearance-border-color,
|
|
471
|
+
var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
|
|
472
|
+
)
|
|
473
|
+
)
|
|
474
|
+
)
|
|
475
|
+
);
|
|
476
|
+
--_utrecht-button-focus-color: var(
|
|
477
|
+
--_utrecht-button-hint-focus-color,
|
|
478
|
+
var(
|
|
479
|
+
--_utrecht-button-hint-color,
|
|
480
|
+
var(
|
|
481
|
+
--_utrecht-button-appearance-focus-color,
|
|
482
|
+
var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
|
|
483
|
+
)
|
|
484
|
+
)
|
|
485
|
+
);
|
|
486
|
+
--_utrecht-button-hover-background-color: var(
|
|
487
|
+
--_utrecht-button-hint-hover-background-color,
|
|
488
|
+
var(
|
|
489
|
+
--_utrecht-button-hint-background-color,
|
|
490
|
+
var(
|
|
491
|
+
--_utrecht-button-appearance-hover-background-color,
|
|
492
|
+
var(
|
|
493
|
+
--_utrecht-button-appearance-background-color,
|
|
494
|
+
var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
|
|
495
|
+
)
|
|
496
|
+
)
|
|
497
|
+
)
|
|
498
|
+
);
|
|
499
|
+
--_utrecht-button-hover-border-color: var(
|
|
500
|
+
--_utrecht-button-hint-hover-border-color,
|
|
501
|
+
var(
|
|
502
|
+
--_utrecht-button-hint-border-color,
|
|
503
|
+
var(
|
|
504
|
+
--_utrecht-button-appearance-hover-border-color,
|
|
505
|
+
var(
|
|
506
|
+
--_utrecht-button-appearance-border-color,
|
|
507
|
+
var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
|
|
508
|
+
)
|
|
509
|
+
)
|
|
510
|
+
)
|
|
511
|
+
);
|
|
512
|
+
--_utrecht-button-hover-color: var(
|
|
513
|
+
--_utrecht-button-hint-hover-color,
|
|
514
|
+
var(
|
|
515
|
+
--_utrecht-button-hint-color,
|
|
516
|
+
var(
|
|
517
|
+
--_utrecht-button-appearance-hover-color,
|
|
518
|
+
var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
|
|
519
|
+
)
|
|
520
|
+
)
|
|
521
|
+
);
|
|
522
|
+
--_utrecht-button-active-background-color: var(
|
|
523
|
+
--_utrecht-button-hint-active-background-color,
|
|
524
|
+
var(
|
|
525
|
+
--_utrecht-button-hint-background-color,
|
|
526
|
+
var(
|
|
527
|
+
--_utrecht-button-appearance-active-background-color,
|
|
528
|
+
var(
|
|
529
|
+
--_utrecht-button-appearance-background-color,
|
|
530
|
+
var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
|
|
531
|
+
)
|
|
532
|
+
)
|
|
533
|
+
)
|
|
534
|
+
);
|
|
535
|
+
--_utrecht-button-active-border-color: var(
|
|
536
|
+
--_utrecht-button-hint-active-border-color,
|
|
537
|
+
var(
|
|
538
|
+
--_utrecht-button-hint-border-color,
|
|
539
|
+
var(
|
|
540
|
+
--_utrecht-button-appearance-active-border-color,
|
|
541
|
+
var(
|
|
542
|
+
--_utrecht-button-appearance-border-color,
|
|
543
|
+
var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
|
|
544
|
+
)
|
|
545
|
+
)
|
|
546
|
+
)
|
|
547
|
+
);
|
|
548
|
+
--_utrecht-button-active-color: var(
|
|
549
|
+
--_utrecht-button-hint-active-color,
|
|
550
|
+
var(
|
|
551
|
+
--_utrecht-button-hint-color,
|
|
552
|
+
var(
|
|
553
|
+
--_utrecht-button-appearance-active-color,
|
|
554
|
+
var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
|
|
555
|
+
)
|
|
556
|
+
)
|
|
557
|
+
);
|
|
558
|
+
--_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
|
|
559
|
+
--_utrecht-button-border-bottom-width: var(
|
|
560
|
+
--utrecht-button-border-bottom-width,
|
|
561
|
+
var(--_utrecht-button-border-width, 0)
|
|
562
|
+
);
|
|
563
|
+
--utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
|
|
564
|
+
align-items: center;
|
|
565
|
+
background-color: var(--_utrecht-button-background-color);
|
|
566
|
+
border-color: var(--_utrecht-button-border-color);
|
|
567
|
+
border-bottom-color: var(--_utrecht-button-border-bottom-color);
|
|
75
568
|
border-radius: var(--utrecht-button-border-radius);
|
|
76
|
-
border-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
569
|
+
border-style: solid;
|
|
570
|
+
border-width: var(--_utrecht-button-border-width);
|
|
571
|
+
border-bottom-width: var(--_utrecht-button-border-bottom-width);
|
|
572
|
+
box-sizing: border-box;
|
|
573
|
+
color: var(--_utrecht-button-color);
|
|
574
|
+
display: inline-flex;
|
|
575
|
+
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
576
|
+
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
577
|
+
font-weight: var(--utrecht-button-font-weight);
|
|
578
|
+
gap: var(--utrecht-button-icon-gap);
|
|
579
|
+
inline-size: var(--utrecht-button-inline-size, auto);
|
|
580
|
+
justify-content: center;
|
|
581
|
+
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
582
|
+
line-height: var(--utrecht-button-line-height);
|
|
583
|
+
min-block-size: var(--utrecht-button-min-block-size, 44px);
|
|
584
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 44px);
|
|
80
585
|
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
586
|
+
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
587
|
+
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
588
|
+
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
589
|
+
text-transform: var(--utrecht-button-text-transform);
|
|
590
|
+
user-select: none;
|
|
87
591
|
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
592
|
+
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
593
|
+
margin-inline-end: var(--utrecht-button-margin-inline-end);
|
|
594
|
+
margin-inline-start: var(--utrecht-button-margin-inline-start);
|
|
88
595
|
}
|
|
89
|
-
|
|
90
|
-
.utrecht-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
596
|
+
.utrecht-html button[type=submit i],
|
|
597
|
+
.utrecht-html input[type=submit i] {
|
|
598
|
+
cursor: var(--utrecht-action-submit-cursor);
|
|
599
|
+
}
|
|
600
|
+
.utrecht-html button:disabled,
|
|
601
|
+
.utrecht-html button[aria-disabled=true] {
|
|
602
|
+
background-color: var(--_utrecht-button-disabled-background-color);
|
|
603
|
+
border-color: var(--_utrecht-button-disabled-border-color);
|
|
604
|
+
color: var(--_utrecht-button-disabled-color);
|
|
605
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
606
|
+
}
|
|
607
|
+
.utrecht-html button[aria-busy=true],
|
|
608
|
+
.utrecht-html button[aria-disabled=true][aria-busy=true],
|
|
609
|
+
.utrecht-html button:disabled[aria-busy=true] {
|
|
610
|
+
cursor: var(--utrecht-action-busy-cursor);
|
|
611
|
+
}
|
|
612
|
+
.utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
|
|
613
|
+
background-color: var(--_utrecht-button-active-background-color);
|
|
614
|
+
border-color: var(--_utrecht-button-active-border-color);
|
|
615
|
+
color: var(--_utrecht-button-active-color);
|
|
616
|
+
}
|
|
617
|
+
.utrecht-html button:hover:not([aria-disabled=true]):not(:disabled) {
|
|
618
|
+
background-color: var(--_utrecht-button-hover-background-color);
|
|
619
|
+
border-color: var(--_utrecht-button-hover-border-color);
|
|
620
|
+
color: var(--_utrecht-button-hover-color);
|
|
621
|
+
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
94
622
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
100
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
101
|
-
color: var(--utrecht-focus-color, inherit);
|
|
102
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
103
|
-
outline-offset: 0;
|
|
104
|
-
background-color: var(--utrecht-focus-background-color);
|
|
623
|
+
.utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
|
|
624
|
+
background-color: var(--_utrecht-button-focus-background-color);
|
|
625
|
+
border-color: var(--_utrecht-button-focus-border-color);
|
|
626
|
+
color: var(--_utrecht-button-focus-color);
|
|
105
627
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
color: var(--utrecht-
|
|
110
|
-
|
|
111
|
-
|
|
628
|
+
.utrecht-html button:focus-visible {
|
|
629
|
+
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
630
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
631
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
632
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
633
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
634
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
112
635
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
* @license EUPL-1.2
|
|
116
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
117
|
-
*/
|
|
118
|
-
/**
|
|
119
|
-
* @license EUPL-1.2
|
|
120
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
121
|
-
*/
|
|
122
|
-
.utrecht-checkbox, .utrecht-html input[type=checkbox] {
|
|
123
|
-
/* reset native margin for input[type="checkbox"] */
|
|
636
|
+
.utrecht-html input[type=checkbox i] {
|
|
637
|
+
margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
|
|
124
638
|
margin-block-start: 0;
|
|
125
|
-
margin-block-end: 0;
|
|
126
|
-
margin-inline-start: 0;
|
|
127
639
|
margin-inline-end: 0;
|
|
640
|
+
margin-inline-start: 0;
|
|
128
641
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
* @license EUPL-1.2
|
|
132
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
133
|
-
*/
|
|
134
|
-
/**
|
|
135
|
-
* @license EUPL-1.2
|
|
136
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
137
|
-
*/
|
|
138
|
-
.utrecht-emphasis--stressed, .utrecht-html em {
|
|
139
|
-
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
642
|
+
.utrecht-html input[type=checkbox i]:disabled {
|
|
643
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
140
644
|
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
645
|
+
.utrecht-html input[type=checkbox i]:focus {
|
|
646
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
647
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
648
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
649
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
650
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
144
651
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
*/
|
|
150
|
-
/**
|
|
151
|
-
* @license EUPL-1.2
|
|
152
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
153
|
-
*/
|
|
154
|
-
.utrecht-form-fieldset--distanced, .utrecht-html fieldset {
|
|
155
|
-
margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
|
|
156
|
-
margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
|
|
652
|
+
.utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
|
|
653
|
+
/* undo focus ring */
|
|
654
|
+
box-shadow: none;
|
|
655
|
+
outline-style: none;
|
|
157
656
|
}
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
font-
|
|
162
|
-
font-
|
|
163
|
-
|
|
164
|
-
|
|
657
|
+
.utrecht-html body {
|
|
658
|
+
/* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
|
|
659
|
+
color: var(--utrecht-document-color, inherit);
|
|
660
|
+
font-family: var(--utrecht-document-font-family, inherit);
|
|
661
|
+
font-size: var(--utrecht-document-font-size, inherit);
|
|
662
|
+
font-weight: var(--utrecht-document-font-weight, inherit);
|
|
663
|
+
line-height: var(--utrecht-document-line-height, inherit);
|
|
664
|
+
text-rendering: optimizeLegibility;
|
|
665
|
+
background-color: var(--utrecht-document-background-color, inherit);
|
|
165
666
|
}
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
667
|
+
.utrecht-html body :lang(ar) {
|
|
668
|
+
/* `letter-spacing` design tokens break Arabic text rendering, avoid that */
|
|
669
|
+
letter-spacing: 0 !important;
|
|
670
|
+
}
|
|
671
|
+
.utrecht-html em {
|
|
672
|
+
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
673
|
+
}
|
|
674
|
+
.utrecht-html strong {
|
|
675
|
+
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
170
676
|
}
|
|
171
|
-
|
|
172
677
|
.utrecht-html fieldset {
|
|
678
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
|
|
679
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
|
|
173
680
|
border: 0;
|
|
174
|
-
margin: 0;
|
|
681
|
+
margin-inline-end: 0;
|
|
682
|
+
margin-inline-start: 0;
|
|
175
683
|
min-width: 0;
|
|
176
684
|
padding-block-end: 0;
|
|
177
685
|
padding-block-start: 0.01em;
|
|
178
686
|
padding-inline-end: 0;
|
|
179
687
|
padding-inline-start: 0;
|
|
688
|
+
--utrecht-space-around: 1;
|
|
180
689
|
}
|
|
181
|
-
|
|
182
690
|
.utrecht-html legend {
|
|
691
|
+
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
692
|
+
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
693
|
+
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
694
|
+
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
695
|
+
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
696
|
+
page-break-after: avoid;
|
|
697
|
+
page-break-inside: avoid;
|
|
698
|
+
text-transform: var(--utrecht-form-fieldset-legend-text-transform);
|
|
183
699
|
padding-inline-end: 0;
|
|
184
700
|
padding-inline-start: 0;
|
|
701
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
|
|
702
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
|
|
185
703
|
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
* @license EUPL-1.2
|
|
189
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
190
|
-
*/
|
|
191
|
-
/**
|
|
192
|
-
* @license EUPL-1.2
|
|
193
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
194
|
-
*/
|
|
195
|
-
.utrecht-form-label, .utrecht-html label {
|
|
196
|
-
font-weight: var(--utrecht-form-label-font-weight);
|
|
704
|
+
.utrecht-html label {
|
|
705
|
+
color: var(--utrecht-form-label-color);
|
|
197
706
|
font-size: var(--utrecht-form-label-font-size);
|
|
707
|
+
font-weight: var(--utrecht-form-label-font-weight);
|
|
198
708
|
}
|
|
199
|
-
|
|
200
|
-
|
|
709
|
+
.utrecht-html input[type=checkbox i] ~ label {
|
|
710
|
+
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
201
711
|
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
202
712
|
}
|
|
203
|
-
|
|
204
|
-
|
|
713
|
+
.utrecht-html input[type=radio i] ~ label {
|
|
714
|
+
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
205
715
|
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
206
716
|
}
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
*/
|
|
212
|
-
/**
|
|
213
|
-
* @license EUPL-1.2
|
|
214
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
215
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
216
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
217
|
-
*/
|
|
218
|
-
.utrecht-heading-1, .utrecht-html h1 {
|
|
717
|
+
.utrecht-html h1 {
|
|
718
|
+
page-break-after: avoid;
|
|
719
|
+
page-break-inside: avoid;
|
|
720
|
+
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
219
721
|
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
220
722
|
font-size: var(--utrecht-heading-1-font-size);
|
|
221
723
|
font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
222
|
-
letter-spacing: var(--utrecht-heading-1-letter-spacing);
|
|
223
|
-
line-height: var(--utrecht-heading-1-line-height);
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
margin-block-start: var(--utrecht-heading-1-margin-block-start);
|
|
230
|
-
margin-block-end: var(--utrecht-heading-1-margin-block-end);
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
.utrecht-heading-2, .utrecht-html h2 {
|
|
234
|
-
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
235
|
-
font-size: var(--utrecht-heading-2-font-size);
|
|
236
|
-
font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
237
|
-
letter-spacing: var(--utrecht-heading-2-letter-spacing);
|
|
238
|
-
line-height: var(--utrecht-heading-2-line-height);
|
|
239
|
-
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
240
|
-
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.utrecht-heading-2--distanced, .utrecht-html h2 {
|
|
244
|
-
margin-block-start: var(--utrecht-heading-2-margin-block-start);
|
|
245
|
-
margin-block-end: var(--utrecht-heading-2-margin-block-end);
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.utrecht-heading-3, .utrecht-html h3 {
|
|
249
|
-
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
250
|
-
font-size: var(--utrecht-heading-3-font-size);
|
|
251
|
-
font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
252
|
-
letter-spacing: var(--utrecht-heading-3-letter-spacing);
|
|
253
|
-
line-height: var(--utrecht-heading-3-line-height);
|
|
254
|
-
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
255
|
-
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
.utrecht-heading-3--distanced, .utrecht-html h3 {
|
|
259
|
-
margin-block-start: var(--utrecht-heading-3-margin-block-start);
|
|
260
|
-
margin-block-end: var(--utrecht-heading-3-margin-block-end);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.utrecht-heading-4, .utrecht-html h4 {
|
|
264
|
-
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
265
|
-
font-size: var(--utrecht-heading-4-font-size);
|
|
266
|
-
font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
267
|
-
letter-spacing: var(--utrecht-heading-4-letter-spacing);
|
|
268
|
-
line-height: var(--utrecht-heading-4-line-height);
|
|
269
|
-
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
270
|
-
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
.utrecht-heading-4--distanced, .utrecht-html h4 {
|
|
274
|
-
margin-block-start: var(--utrecht-heading-4-margin-block-start);
|
|
275
|
-
margin-block-end: var(--utrecht-heading-4-margin-block-end);
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.utrecht-heading-5, .utrecht-html h5 {
|
|
279
|
-
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
280
|
-
font-size: var(--utrecht-heading-5-font-size);
|
|
281
|
-
font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
282
|
-
letter-spacing: var(--utrecht-heading-5-letter-spacing);
|
|
283
|
-
line-height: var(--utrecht-heading-5-line-height);
|
|
284
|
-
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
285
|
-
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
.utrecht-heading-5--distanced, .utrecht-html h5 {
|
|
289
|
-
margin-block-start: var(--utrecht-heading-5-margin-block-start);
|
|
290
|
-
margin-block-end: var(--utrecht-heading-5-margin-block-end);
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
.utrecht-heading-6, .utrecht-html h6 {
|
|
294
|
-
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
295
|
-
font-size: var(--utrecht-heading-6-font-size);
|
|
296
|
-
font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
297
|
-
letter-spacing: var(--utrecht-heading-6-letter-spacing);
|
|
298
|
-
line-height: var(--utrecht-heading-6-line-height);
|
|
299
|
-
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
300
|
-
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
.utrecht-heading-6--distanced, .utrecht-html h6 {
|
|
304
|
-
margin-block-start: var(--utrecht-heading-6-margin-block-start);
|
|
305
|
-
margin-block-end: var(--utrecht-heading-6-margin-block-end);
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
/**
|
|
309
|
-
* @license EUPL-1.2
|
|
310
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
311
|
-
*/
|
|
312
|
-
/* Collection of all semantic HTML styles in the component library */
|
|
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
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
322
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
323
|
-
/**
|
|
324
|
-
* @license EUPL-1.2
|
|
325
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
326
|
-
*/
|
|
327
|
-
/**
|
|
328
|
-
* @license EUPL-1.2
|
|
329
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
330
|
-
*/
|
|
331
|
-
.utrecht-article, .utrecht-html article {
|
|
332
|
-
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
/**
|
|
336
|
-
* @license EUPL-1.2
|
|
337
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
338
|
-
*/
|
|
339
|
-
/**
|
|
340
|
-
* @license EUPL-1.2
|
|
341
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
342
|
-
*/
|
|
343
|
-
.utrecht-blockquote, .utrecht-html blockquote {
|
|
344
|
-
font-family: var(--utrecht-document-font-family);
|
|
345
|
-
font-size: var(--utrecht-blockquote-font-size);
|
|
346
|
-
margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
|
|
347
|
-
margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
.utrecht-blockquote__attribution {
|
|
351
|
-
color: var(--utrecht-blockquote-attribution-color, inherit);
|
|
352
|
-
font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
.utrecht-blockquote__content, .utrecht-html blockquote {
|
|
356
|
-
--utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
|
|
357
|
-
--utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
358
|
-
color: var(--utrecht-blockquote-content-color, inherit);
|
|
359
|
-
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
.utrecht-blockquote--distanced, .utrecht-html blockquote {
|
|
363
|
-
margin-block-start: var(--utrecht-blockquote-margin-block-start);
|
|
364
|
-
margin-block-end: var(--utrecht-blockquote-margin-block-end);
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
/**
|
|
368
|
-
* @license EUPL-1.2
|
|
369
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
370
|
-
*/
|
|
371
|
-
/**
|
|
372
|
-
* @license EUPL-1.2
|
|
373
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
374
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
375
|
-
*/
|
|
376
|
-
.utrecht-button, .utrecht-html button {
|
|
377
|
-
color: var(--utrecht-button-primary-action-color);
|
|
378
|
-
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
379
|
-
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
380
|
-
background-color: var(--utrecht-button-primary-action-background-color);
|
|
381
|
-
border-radius: var(--utrecht-button-border-radius);
|
|
382
|
-
border-width: var(--utrecht-button-border-width);
|
|
383
|
-
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
384
|
-
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
385
|
-
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
386
|
-
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
.utrecht-button--distanced, .utrecht-html button {
|
|
390
|
-
margin-inline-start: var(--utrecht-button-margin-inline-start);
|
|
391
|
-
margin-inline-end: var(--utrecht-button-margin-inline-end);
|
|
392
|
-
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
393
|
-
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
.utrecht-button:disabled, .utrecht-html button:disabled,
|
|
397
|
-
.utrecht-button--disabled {
|
|
398
|
-
color: var(--utrecht-button-disabled-color);
|
|
399
|
-
background-color: var(--utrecht-button-disabled-background-color);
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
.utrecht-button--focus, .utrecht-html button:focus,
|
|
403
|
-
.utrecht-button:not(.utrecht-button--disabled):focus {
|
|
404
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
405
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
406
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
407
|
-
color: var(--utrecht-focus-color, inherit);
|
|
408
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
409
|
-
outline-offset: 0;
|
|
410
|
-
background-color: var(--utrecht-focus-background-color);
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
|
|
414
|
-
.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
|
|
415
|
-
color: var(--utrecht-button-primary-action-color);
|
|
416
|
-
background-color: var(--utrecht-button-primary-action-hover-background-color);
|
|
417
|
-
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
/**
|
|
421
|
-
* @license EUPL-1.2
|
|
422
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
423
|
-
*/
|
|
424
|
-
/**
|
|
425
|
-
* @license EUPL-1.2
|
|
426
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
427
|
-
*/
|
|
428
|
-
.utrecht-checkbox, .utrecht-html input[type=checkbox] {
|
|
429
|
-
/* reset native margin for input[type="checkbox"] */
|
|
430
|
-
margin-block-start: 0;
|
|
431
|
-
margin-block-end: 0;
|
|
432
|
-
margin-inline-start: 0;
|
|
433
|
-
margin-inline-end: 0;
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
/**
|
|
437
|
-
* @license EUPL-1.2
|
|
438
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
439
|
-
*/
|
|
440
|
-
/**
|
|
441
|
-
* @license EUPL-1.2
|
|
442
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
443
|
-
*/
|
|
444
|
-
.utrecht-emphasis--stressed, .utrecht-html em {
|
|
445
|
-
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
446
|
-
}
|
|
447
|
-
|
|
448
|
-
.utrecht-emphasis--strong, .utrecht-html strong {
|
|
449
|
-
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
450
|
-
}
|
|
451
|
-
|
|
452
|
-
/**
|
|
453
|
-
* @license EUPL-1.2
|
|
454
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
455
|
-
*/
|
|
456
|
-
/**
|
|
457
|
-
* @license EUPL-1.2
|
|
458
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
459
|
-
*/
|
|
460
|
-
.utrecht-form-fieldset--distanced, .utrecht-html fieldset {
|
|
461
|
-
margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
|
|
462
|
-
margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
.utrecht-form-fieldset__legend, .utrecht-html legend {
|
|
466
|
-
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
467
|
-
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
468
|
-
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
469
|
-
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
470
|
-
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
.utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
|
|
474
|
-
margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
|
|
475
|
-
margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
|
|
476
|
-
}
|
|
477
|
-
|
|
478
|
-
.utrecht-html fieldset {
|
|
479
|
-
border: 0;
|
|
480
|
-
margin: 0;
|
|
481
|
-
min-width: 0;
|
|
482
|
-
padding-block-end: 0;
|
|
483
|
-
padding-block-start: 0.01em;
|
|
484
|
-
padding-inline-end: 0;
|
|
485
|
-
padding-inline-start: 0;
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
.utrecht-html legend {
|
|
489
|
-
padding-inline-end: 0;
|
|
490
|
-
padding-inline-start: 0;
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
/**
|
|
494
|
-
* @license EUPL-1.2
|
|
495
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
496
|
-
*/
|
|
497
|
-
/**
|
|
498
|
-
* @license EUPL-1.2
|
|
499
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
500
|
-
*/
|
|
501
|
-
.utrecht-form-label, .utrecht-html label {
|
|
502
|
-
font-weight: var(--utrecht-form-label-font-weight);
|
|
503
|
-
font-size: var(--utrecht-form-label-font-size);
|
|
504
|
-
}
|
|
505
|
-
|
|
506
|
-
.utrecht-form-label--checkbox, .utrecht-html input[type=checkbox] ~ label {
|
|
507
|
-
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
.utrecht-form-label--radio, .utrecht-html input[type=radio] ~ label {
|
|
511
|
-
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
/**
|
|
515
|
-
* @license EUPL-1.2
|
|
516
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
517
|
-
*/
|
|
518
|
-
/**
|
|
519
|
-
* @license EUPL-1.2
|
|
520
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
521
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
522
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
523
|
-
*/
|
|
524
|
-
.utrecht-heading-1, .utrecht-html h1 {
|
|
525
|
-
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
526
|
-
font-size: var(--utrecht-heading-1-font-size);
|
|
527
|
-
font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
528
|
-
letter-spacing: var(--utrecht-heading-1-letter-spacing);
|
|
529
|
-
line-height: var(--utrecht-heading-1-line-height);
|
|
530
|
-
text-transform: var(--utrecht-heading-1-text-transform, inherit);
|
|
531
|
-
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
.utrecht-heading-1--distanced, .utrecht-html h1 {
|
|
535
|
-
margin-block-start: var(--utrecht-heading-1-margin-block-start);
|
|
536
|
-
margin-block-end: var(--utrecht-heading-1-margin-block-end);
|
|
537
|
-
}
|
|
538
|
-
|
|
539
|
-
.utrecht-heading-2, .utrecht-html h2 {
|
|
540
|
-
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
541
|
-
font-size: var(--utrecht-heading-2-font-size);
|
|
542
|
-
font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
543
|
-
letter-spacing: var(--utrecht-heading-2-letter-spacing);
|
|
544
|
-
line-height: var(--utrecht-heading-2-line-height);
|
|
545
|
-
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
546
|
-
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
547
|
-
}
|
|
548
|
-
|
|
549
|
-
.utrecht-heading-2--distanced, .utrecht-html h2 {
|
|
550
|
-
margin-block-start: var(--utrecht-heading-2-margin-block-start);
|
|
551
|
-
margin-block-end: var(--utrecht-heading-2-margin-block-end);
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
.utrecht-heading-3, .utrecht-html h3 {
|
|
555
|
-
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
556
|
-
font-size: var(--utrecht-heading-3-font-size);
|
|
557
|
-
font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
558
|
-
letter-spacing: var(--utrecht-heading-3-letter-spacing);
|
|
559
|
-
line-height: var(--utrecht-heading-3-line-height);
|
|
560
|
-
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
561
|
-
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
.utrecht-heading-3--distanced, .utrecht-html h3 {
|
|
565
|
-
margin-block-start: var(--utrecht-heading-3-margin-block-start);
|
|
566
|
-
margin-block-end: var(--utrecht-heading-3-margin-block-end);
|
|
567
|
-
}
|
|
568
|
-
|
|
569
|
-
.utrecht-heading-4, .utrecht-html h4 {
|
|
570
|
-
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
571
|
-
font-size: var(--utrecht-heading-4-font-size);
|
|
572
|
-
font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
573
|
-
letter-spacing: var(--utrecht-heading-4-letter-spacing);
|
|
574
|
-
line-height: var(--utrecht-heading-4-line-height);
|
|
575
|
-
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
576
|
-
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
577
|
-
}
|
|
578
|
-
|
|
579
|
-
.utrecht-heading-4--distanced, .utrecht-html h4 {
|
|
580
|
-
margin-block-start: var(--utrecht-heading-4-margin-block-start);
|
|
581
|
-
margin-block-end: var(--utrecht-heading-4-margin-block-end);
|
|
582
|
-
}
|
|
583
|
-
|
|
584
|
-
.utrecht-heading-5, .utrecht-html h5 {
|
|
585
|
-
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
586
|
-
font-size: var(--utrecht-heading-5-font-size);
|
|
587
|
-
font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
588
|
-
letter-spacing: var(--utrecht-heading-5-letter-spacing);
|
|
589
|
-
line-height: var(--utrecht-heading-5-line-height);
|
|
590
|
-
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
591
|
-
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
592
|
-
}
|
|
593
|
-
|
|
594
|
-
.utrecht-heading-5--distanced, .utrecht-html h5 {
|
|
595
|
-
margin-block-start: var(--utrecht-heading-5-margin-block-start);
|
|
596
|
-
margin-block-end: var(--utrecht-heading-5-margin-block-end);
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
.utrecht-heading-6, .utrecht-html h6 {
|
|
600
|
-
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
601
|
-
font-size: var(--utrecht-heading-6-font-size);
|
|
602
|
-
font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
603
|
-
letter-spacing: var(--utrecht-heading-6-letter-spacing);
|
|
604
|
-
line-height: var(--utrecht-heading-6-line-height);
|
|
605
|
-
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
606
|
-
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
607
|
-
}
|
|
608
|
-
|
|
609
|
-
.utrecht-heading-6--distanced, .utrecht-html h6 {
|
|
610
|
-
margin-block-start: var(--utrecht-heading-6-margin-block-start);
|
|
611
|
-
margin-block-end: var(--utrecht-heading-6-margin-block-end);
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
/**
|
|
615
|
-
* @license EUPL-1.2
|
|
616
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
617
|
-
*/
|
|
618
|
-
/**
|
|
619
|
-
* @license EUPL-1.2
|
|
620
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
621
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
622
|
-
*/
|
|
623
|
-
.utrecht-link, .utrecht-html a:link {
|
|
624
|
-
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
625
|
-
color: var(--utrecht-link-color, blue);
|
|
626
|
-
}
|
|
627
|
-
|
|
628
|
-
.utrecht-link:visited,
|
|
629
|
-
.utrecht-link--visited,
|
|
630
|
-
.utrecht-html a:visited {
|
|
631
|
-
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
632
|
-
}
|
|
633
|
-
|
|
634
|
-
.utrecht-link:hover,
|
|
635
|
-
.utrecht-link--hover,
|
|
636
|
-
.utrecht-html a:hover {
|
|
637
|
-
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
638
|
-
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
.utrecht-link:active,
|
|
642
|
-
.utrecht-link--active,
|
|
643
|
-
.utrecht-html a:active {
|
|
644
|
-
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
645
|
-
}
|
|
646
|
-
|
|
647
|
-
.utrecht-link:focus,
|
|
648
|
-
.utrecht-link--focus,
|
|
649
|
-
.utrecht-html a:focus {
|
|
650
|
-
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
651
|
-
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
652
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
653
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
654
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
655
|
-
color: var(--utrecht-focus-color, inherit);
|
|
656
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
657
|
-
outline-offset: 0;
|
|
658
|
-
background-color: var(--utrecht-focus-background-color);
|
|
659
|
-
}
|
|
660
|
-
|
|
661
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
662
|
-
.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
|
|
663
|
-
white-space: nowrap;
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
/**
|
|
667
|
-
* @license EUPL-1.2
|
|
668
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
669
|
-
*/
|
|
670
|
-
/**
|
|
671
|
-
* @license EUPL-1.2
|
|
672
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
673
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
674
|
-
*/
|
|
675
|
-
.utrecht-ordered-list, .utrecht-html ol {
|
|
676
|
-
font-family: var(--utrecht-document-font-family, inherit);
|
|
677
|
-
}
|
|
678
|
-
|
|
679
|
-
.utrecht-ordered-list--distanced, .utrecht-html ol {
|
|
680
|
-
margin-block-end: var(--utrecht-ordered-list-margin-block-end);
|
|
681
|
-
margin-block-start: var(--utrecht-ordered-list-margin-block-start);
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
.utrecht-ordered-list__item, .utrecht-html ol > li {
|
|
685
|
-
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
|
|
686
|
-
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
|
|
687
|
-
}
|
|
688
|
-
|
|
689
|
-
/**
|
|
690
|
-
* @license EUPL-1.2
|
|
691
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
692
|
-
*/
|
|
693
|
-
/**
|
|
694
|
-
* @license EUPL-1.2
|
|
695
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
696
|
-
*/
|
|
697
|
-
.utrecht-paragraph, .utrecht-html p {
|
|
698
|
-
color: var(--utrecht-document-color, inherit);
|
|
699
|
-
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
700
|
-
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
701
|
-
font-weight: var(--utrecht-paragraph-font-weight, inherit);
|
|
702
|
-
line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
|
|
703
|
-
}
|
|
704
|
-
|
|
705
|
-
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
706
|
-
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
707
|
-
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
708
|
-
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
709
|
-
}
|
|
710
|
-
|
|
711
|
-
.utrecht-paragraph--distanced, .utrecht-html * ~ p {
|
|
712
|
-
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
713
|
-
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
714
|
-
}
|
|
715
|
-
|
|
716
|
-
/**
|
|
717
|
-
* @license EUPL-1.2
|
|
718
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
719
|
-
*/
|
|
720
|
-
/**
|
|
721
|
-
* @license EUPL-1.2
|
|
722
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
723
|
-
*/
|
|
724
|
-
.utrecht-radio-button, .utrecht-html input[type=radio] {
|
|
725
|
-
/* reset native margin for input[type="radio"] */
|
|
726
|
-
margin-block-start: 0;
|
|
727
|
-
margin-block-end: 0;
|
|
728
|
-
margin-inline-start: 0;
|
|
729
|
-
margin-inline-end: 0;
|
|
730
|
-
}
|
|
731
|
-
|
|
732
|
-
/**
|
|
733
|
-
* @license EUPL-1.2
|
|
734
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
735
|
-
*/
|
|
736
|
-
/**
|
|
737
|
-
* @license EUPL-1.2
|
|
738
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
739
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
740
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
741
|
-
*/
|
|
742
|
-
.utrecht-separator, .utrecht-html hr {
|
|
743
|
-
border-style: solid;
|
|
744
|
-
border-color: var(--utrecht-separator-color);
|
|
745
|
-
border-width: 0 0 var(--utrecht-separator-width) 0;
|
|
746
|
-
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
747
|
-
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
748
|
-
}
|
|
749
|
-
|
|
750
|
-
/**
|
|
751
|
-
* @license EUPL-1.2
|
|
752
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
753
|
-
*/
|
|
754
|
-
/**
|
|
755
|
-
* @license EUPL-1.2
|
|
756
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
757
|
-
*/
|
|
758
|
-
.utrecht-table, .utrecht-html table {
|
|
759
|
-
border-collapse: collapse;
|
|
760
|
-
width: 100%;
|
|
761
|
-
}
|
|
762
|
-
|
|
763
|
-
.utrecht-table--distanced, .utrecht-html table {
|
|
764
|
-
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
765
|
-
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
766
|
-
}
|
|
767
|
-
|
|
768
|
-
.utrecht-table__caption, .utrecht-html caption {
|
|
769
|
-
font-weight: var(--utrecht-table-caption-font-weight);
|
|
770
|
-
font-family: var(--utrecht-table-caption-font-family);
|
|
771
|
-
font-size: var(--utrecht-table-caption-font-size);
|
|
772
|
-
color: var(--utrecht-table-caption-color);
|
|
773
|
-
line-height: var(--utrecht-table-caption-line-height);
|
|
774
|
-
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
775
|
-
text-align: var(--utrecht-table-caption-text-align, center);
|
|
776
|
-
}
|
|
777
|
-
|
|
778
|
-
.utrecht-table__header, .utrecht-html thead {
|
|
779
|
-
font-weight: var(--utrecht-table-header-font-weight);
|
|
780
|
-
color: var(--utrecht-table-header-color);
|
|
781
|
-
text-transform: var(--utrecht-table-header-text-transform);
|
|
782
|
-
vertical-align: bottom;
|
|
783
|
-
}
|
|
784
|
-
|
|
785
|
-
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
786
|
-
border-block-end-style: solid;
|
|
787
|
-
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
788
|
-
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
789
|
-
}
|
|
790
|
-
|
|
791
|
-
.utrecht-table__body, .utrecht-html tbody {
|
|
792
|
-
vertical-align: baseline;
|
|
793
|
-
}
|
|
794
|
-
|
|
795
|
-
.utrecht-table__heading, .utrecht-html th {
|
|
796
|
-
font-weight: var(--utrecht-table-heading-font-weight);
|
|
797
|
-
color: var(--utrecht-table-heading-color);
|
|
798
|
-
text-transform: var(--utrecht-table-heading-text-transform);
|
|
799
|
-
}
|
|
800
|
-
|
|
801
|
-
.utrecht-table__cell, .utrecht-html th,
|
|
802
|
-
.utrecht-html td {
|
|
803
|
-
border-block-end-style: solid;
|
|
804
|
-
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
805
|
-
border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
|
|
806
|
-
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
807
|
-
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
808
|
-
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
809
|
-
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
810
|
-
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
811
|
-
text-align: start;
|
|
812
|
-
}
|
|
813
|
-
|
|
814
|
-
.utrecht-table__cell--first, .utrecht-html td:first-child,
|
|
815
|
-
.utrecht-html th:first-child {
|
|
816
|
-
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
817
|
-
}
|
|
818
|
-
|
|
819
|
-
.utrecht-table__cell--last, .utrecht-html td:last-child,
|
|
820
|
-
.utrecht-html th:last-child {
|
|
821
|
-
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
822
|
-
}
|
|
823
|
-
|
|
824
|
-
.utrecht-table__cell--numeric, .utrecht-html th.numeric,
|
|
825
|
-
.utrecht-html td.numeric {
|
|
826
|
-
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
827
|
-
text-align: right;
|
|
828
|
-
}
|
|
829
|
-
|
|
830
|
-
.utrecht-table__row--alternate-odd, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
|
|
831
|
-
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
832
|
-
color: var(--utrecht-table-row-alternate-odd-color);
|
|
833
|
-
}
|
|
834
|
-
|
|
835
|
-
.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 {
|
|
836
|
-
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
837
|
-
color: var(--utrecht-table-row-alternate-even-color);
|
|
838
|
-
}
|
|
839
|
-
|
|
840
|
-
/**
|
|
841
|
-
* @license EUPL-1.2
|
|
842
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
843
|
-
*/
|
|
844
|
-
/**
|
|
845
|
-
* @license EUPL-1.2
|
|
846
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
847
|
-
*/
|
|
848
|
-
.utrecht-textarea, .utrecht-html textarea {
|
|
849
|
-
border-width: var(--utrecht-textarea-border-width);
|
|
850
|
-
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
|
|
851
|
-
border-color: var(--utrecht-textarea-border-color);
|
|
852
|
-
border-radius: var(--utrecht-textarea-border-radius, 0);
|
|
853
|
-
border-style: solid;
|
|
854
|
-
color: var(--utrecht-textarea-color);
|
|
855
|
-
font-family: var(--utrecht-textarea-font-family);
|
|
856
|
-
font-size: var(--utrecht-textarea-font-size, 1em);
|
|
857
|
-
max-width: var(--utrecht-textarea-max-width);
|
|
858
|
-
padding-block-end: var(--utrecht-textarea-padding-block-end);
|
|
859
|
-
padding-block-start: var(--utrecht-textarea-padding-block-start);
|
|
860
|
-
padding-inline-end: var(--utrecht-textarea-padding-inline-end);
|
|
861
|
-
padding-inline-start: var(--utrecht-textarea-padding-inline-start);
|
|
862
|
-
width: 100%;
|
|
863
|
-
}
|
|
864
|
-
|
|
865
|
-
.utrecht-textarea--invalid, .utrecht-html textarea:invalid,
|
|
866
|
-
.utrecht-html textarea[aria-invalid=true] {
|
|
867
|
-
border-color: var(--utrecht-textarea-invalid-border-color);
|
|
868
|
-
border-width: var(--utrecht-textarea-invalid-border-width);
|
|
869
|
-
}
|
|
870
|
-
|
|
871
|
-
.utrecht-textarea--disabled, .utrecht-html textarea:disabled {
|
|
872
|
-
border-color: var(--utrecht-textarea-disabled-border-color);
|
|
873
|
-
color: var(--utrecht-textarea-disabled-color);
|
|
874
|
-
}
|
|
875
|
-
|
|
876
|
-
.utrecht-textarea--read-only, .utrecht-html textarea:read-only {
|
|
877
|
-
border-color: var(--utrecht-textarea-read-only-border-color);
|
|
878
|
-
color: var(--utrecht-textarea-read-only-color);
|
|
879
|
-
}
|
|
880
|
-
|
|
881
|
-
/**
|
|
882
|
-
* @license EUPL-1.2
|
|
883
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
884
|
-
*/
|
|
885
|
-
/**
|
|
886
|
-
* @license EUPL-1.2
|
|
887
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
888
|
-
*/
|
|
889
|
-
.utrecht-textbox, .utrecht-html input[type=text],
|
|
890
|
-
.utrecht-html input[type=email],
|
|
891
|
-
.utrecht-html input[type=search],
|
|
892
|
-
.utrecht-html input[type=tel],
|
|
893
|
-
.utrecht-html input[type=url] {
|
|
894
|
-
border-width: var(--utrecht-textbox-border-width);
|
|
895
|
-
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
|
|
896
|
-
border-color: var(--utrecht-textbox-border-color);
|
|
897
|
-
border-radius: var(--utrecht-textbox-border-radius, 0);
|
|
898
|
-
border-style: solid;
|
|
899
|
-
color: var(--utrecht-textbox-color);
|
|
900
|
-
font-family: var(--utrecht-textbox-font-family);
|
|
901
|
-
font-size: var(--utrecht-textbox-font-size, 1em);
|
|
902
|
-
max-width: var(--utrecht-textbox-max-width);
|
|
903
|
-
padding-block-end: var(--utrecht-textbox-padding-block-end);
|
|
904
|
-
padding-block-start: var(--utrecht-textbox-padding-block-start);
|
|
905
|
-
padding-inline-end: var(--utrecht-textbox-padding-inline-end);
|
|
906
|
-
padding-inline-start: var(--utrecht-textbox-padding-inline-start);
|
|
907
|
-
box-sizing: border-box;
|
|
908
|
-
width: 100%;
|
|
909
|
-
}
|
|
910
|
-
|
|
911
|
-
.utrecht-textbox--invalid, .utrecht-html input[type=text]:invalid, .utrecht-html input[type=text][aria-invalid=true],
|
|
912
|
-
.utrecht-html input[type=email]:invalid,
|
|
913
|
-
.utrecht-html input[type=email][aria-invalid=true],
|
|
914
|
-
.utrecht-html input[type=search]:invalid,
|
|
915
|
-
.utrecht-html input[type=search][aria-invalid=true],
|
|
916
|
-
.utrecht-html input[type=tel]:invalid,
|
|
917
|
-
.utrecht-html input[type=tel][aria-invalid=true],
|
|
918
|
-
.utrecht-html input[type=url]:invalid,
|
|
919
|
-
.utrecht-html input[type=url][aria-invalid=true] {
|
|
920
|
-
border-color: var(--utrecht-textbox-invalid-border-color);
|
|
921
|
-
border-width: var(--utrecht-textbox-invalid-border-width);
|
|
724
|
+
letter-spacing: var(--utrecht-heading-1-letter-spacing);
|
|
725
|
+
line-height: var(--utrecht-heading-1-line-height);
|
|
726
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
|
|
727
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
|
|
728
|
+
page-break-after: avoid;
|
|
729
|
+
text-transform: var(--utrecht-heading-1-text-transform, inherit);
|
|
730
|
+
--utrecht-space-around: 1;
|
|
922
731
|
}
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
732
|
+
.utrecht-html h2 {
|
|
733
|
+
page-break-after: avoid;
|
|
734
|
+
page-break-inside: avoid;
|
|
735
|
+
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
736
|
+
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
737
|
+
font-size: var(--utrecht-heading-2-font-size);
|
|
738
|
+
font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
739
|
+
letter-spacing: var(--utrecht-heading-2-letter-spacing);
|
|
740
|
+
line-height: var(--utrecht-heading-2-line-height);
|
|
741
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
|
|
742
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
|
|
743
|
+
page-break-after: avoid;
|
|
744
|
+
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
745
|
+
--utrecht-space-around: 1;
|
|
931
746
|
}
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
747
|
+
.utrecht-html h3 {
|
|
748
|
+
page-break-after: avoid;
|
|
749
|
+
page-break-inside: avoid;
|
|
750
|
+
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
751
|
+
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
752
|
+
font-size: var(--utrecht-heading-3-font-size);
|
|
753
|
+
font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
754
|
+
letter-spacing: var(--utrecht-heading-3-letter-spacing);
|
|
755
|
+
line-height: var(--utrecht-heading-3-line-height);
|
|
756
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
|
|
757
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
|
|
758
|
+
page-break-after: avoid;
|
|
759
|
+
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
760
|
+
--utrecht-space-around: 1;
|
|
940
761
|
}
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
padding-inline-start: 2ch;
|
|
762
|
+
.utrecht-html h4 {
|
|
763
|
+
page-break-after: avoid;
|
|
764
|
+
page-break-inside: avoid;
|
|
765
|
+
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
766
|
+
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
767
|
+
font-size: var(--utrecht-heading-4-font-size);
|
|
768
|
+
font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
769
|
+
letter-spacing: var(--utrecht-heading-4-letter-spacing);
|
|
770
|
+
line-height: var(--utrecht-heading-4-line-height);
|
|
771
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
|
|
772
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
|
|
773
|
+
page-break-after: avoid;
|
|
774
|
+
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
775
|
+
--utrecht-space-around: 1;
|
|
956
776
|
}
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
777
|
+
.utrecht-html h5 {
|
|
778
|
+
page-break-after: avoid;
|
|
779
|
+
page-break-inside: avoid;
|
|
780
|
+
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
781
|
+
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
782
|
+
font-size: var(--utrecht-heading-5-font-size);
|
|
783
|
+
font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
784
|
+
letter-spacing: var(--utrecht-heading-5-letter-spacing);
|
|
785
|
+
line-height: var(--utrecht-heading-5-line-height);
|
|
786
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
|
|
787
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
|
|
788
|
+
page-break-after: avoid;
|
|
789
|
+
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
790
|
+
--utrecht-space-around: 1;
|
|
961
791
|
}
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
792
|
+
.utrecht-html h6 {
|
|
793
|
+
page-break-after: avoid;
|
|
794
|
+
page-break-inside: avoid;
|
|
795
|
+
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
796
|
+
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
797
|
+
font-size: var(--utrecht-heading-6-font-size);
|
|
798
|
+
font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
799
|
+
letter-spacing: var(--utrecht-heading-6-letter-spacing);
|
|
800
|
+
line-height: var(--utrecht-heading-6-line-height);
|
|
801
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
|
|
802
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
|
|
803
|
+
page-break-after: avoid;
|
|
804
|
+
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
805
|
+
--utrecht-space-around: 1;
|
|
966
806
|
}
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
margin-block-end: var(--utrecht-
|
|
807
|
+
.utrecht-html hgroup {
|
|
808
|
+
--utrecht-pre-heading-order: -1;
|
|
809
|
+
display: flex;
|
|
810
|
+
flex-direction: column;
|
|
811
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-end, 0));
|
|
812
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-start, 0));
|
|
813
|
+
--utrecht-space-around: 1;
|
|
972
814
|
}
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
.utrecht-unordered-list__marker {
|
|
976
|
-
color: var(--utrecht-unordered-list-marker-color);
|
|
977
|
-
content: "●";
|
|
815
|
+
.utrecht-html hgroup > * {
|
|
816
|
+
--utrecht-space-around: 0;
|
|
978
817
|
}
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
* @license EUPL-1.2
|
|
982
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
983
|
-
*/
|
|
984
|
-
/**
|
|
985
|
-
* @license EUPL-1.2
|
|
986
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
987
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
988
|
-
*/
|
|
989
|
-
.utrecht-link, .utrecht-html a:link {
|
|
990
|
-
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
818
|
+
.utrecht-html a:link {
|
|
819
|
+
--utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
|
|
991
820
|
color: var(--utrecht-link-color, blue);
|
|
821
|
+
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
822
|
+
text-decoration-skip-ink: all;
|
|
823
|
+
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
824
|
+
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
992
825
|
}
|
|
993
|
-
|
|
994
|
-
.utrecht-link:visited,
|
|
995
|
-
.utrecht-link--visited,
|
|
996
826
|
.utrecht-html a:visited {
|
|
997
827
|
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
998
828
|
}
|
|
999
|
-
|
|
1000
|
-
.utrecht-link:hover,
|
|
1001
|
-
.utrecht-link--hover,
|
|
1002
829
|
.utrecht-html a:hover {
|
|
1003
830
|
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
1004
831
|
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
832
|
+
text-decoration-skip: none;
|
|
833
|
+
text-decoration-skip-ink: none;
|
|
834
|
+
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1005
835
|
}
|
|
1006
|
-
|
|
1007
|
-
.utrecht-link:active,
|
|
1008
|
-
.utrecht-link--active,
|
|
1009
836
|
.utrecht-html a:active {
|
|
1010
837
|
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
1011
838
|
}
|
|
1012
|
-
|
|
1013
|
-
.utrecht-link:focus,
|
|
1014
|
-
.utrecht-link--focus,
|
|
1015
839
|
.utrecht-html a:focus {
|
|
840
|
+
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
1016
841
|
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
1017
842
|
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
color: var(--utrecht-focus-color, inherit);
|
|
843
|
+
text-decoration-skip: none;
|
|
844
|
+
text-decoration-skip-ink: none;
|
|
845
|
+
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1022
846
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1023
|
-
outline-
|
|
1024
|
-
|
|
847
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
848
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
849
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
850
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1025
851
|
}
|
|
1026
|
-
|
|
1027
|
-
/*
|
|
1028
|
-
|
|
852
|
+
.utrecht-html a:focus:not(:focus-visible) {
|
|
853
|
+
/* undo focus ring */
|
|
854
|
+
box-shadow: none;
|
|
855
|
+
outline-style: none;
|
|
856
|
+
}
|
|
857
|
+
.utrecht-html a[href^="tel:" i] {
|
|
1029
858
|
white-space: nowrap;
|
|
1030
859
|
}
|
|
1031
|
-
|
|
1032
|
-
/**
|
|
1033
|
-
* @license EUPL-1.2
|
|
1034
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1035
|
-
*/
|
|
1036
|
-
/**
|
|
1037
|
-
* @license EUPL-1.2
|
|
1038
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1039
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1040
|
-
*/
|
|
1041
|
-
.utrecht-ordered-list, .utrecht-html ol {
|
|
860
|
+
.utrecht-html ol {
|
|
1042
861
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
862
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
|
|
863
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
|
|
864
|
+
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
865
|
+
--utrecht-space-around: 1;
|
|
1043
866
|
}
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
margin-block-
|
|
1047
|
-
|
|
867
|
+
.utrecht-html ol > li {
|
|
868
|
+
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
|
|
869
|
+
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
870
|
+
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
1048
871
|
}
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
|
|
1052
|
-
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
|
|
872
|
+
.utrecht-html ol:lang(ar) {
|
|
873
|
+
list-style: arabic-indic;
|
|
1053
874
|
}
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
* @license EUPL-1.2
|
|
1057
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1058
|
-
*/
|
|
1059
|
-
/**
|
|
1060
|
-
* @license EUPL-1.2
|
|
1061
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1062
|
-
*/
|
|
1063
|
-
.utrecht-paragraph, .utrecht-html p {
|
|
1064
|
-
color: var(--utrecht-document-color, inherit);
|
|
875
|
+
.utrecht-html p {
|
|
876
|
+
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
1065
877
|
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
1066
878
|
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
1067
879
|
font-weight: var(--utrecht-paragraph-font-weight, inherit);
|
|
1068
880
|
line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
|
|
881
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
|
|
882
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
|
|
1069
883
|
}
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
1073
|
-
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
1074
|
-
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
884
|
+
.utrecht-html p.lead {
|
|
885
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
|
|
886
|
+
font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
|
|
887
|
+
font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
|
|
888
|
+
line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
|
|
1075
889
|
}
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
1079
|
-
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
890
|
+
.utrecht-html * ~ p {
|
|
891
|
+
--utrecht-space-around: 1;
|
|
1080
892
|
}
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
* @license EUPL-1.2
|
|
1084
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1085
|
-
*/
|
|
1086
|
-
/**
|
|
1087
|
-
* @license EUPL-1.2
|
|
1088
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1089
|
-
*/
|
|
1090
|
-
.utrecht-radio-button, .utrecht-html input[type=radio] {
|
|
1091
|
-
/* reset native margin for input[type="radio"] */
|
|
1092
|
-
margin-block-start: 0;
|
|
893
|
+
.utrecht-html input[type=radio i] {
|
|
894
|
+
/* reset native margin for input[type="radio" i] */
|
|
1093
895
|
margin-block-end: 0;
|
|
1094
|
-
margin-
|
|
896
|
+
margin-block-start: 0;
|
|
1095
897
|
margin-inline-end: 0;
|
|
898
|
+
margin-inline-start: 0;
|
|
1096
899
|
}
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
900
|
+
.utrecht-html input[type=radio i]:disabled {
|
|
901
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
902
|
+
}
|
|
903
|
+
.utrecht-html input[type=radio i]:focus {
|
|
904
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
905
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
906
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
907
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
908
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
909
|
+
}
|
|
910
|
+
.utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
911
|
+
/* undo focus ring */
|
|
912
|
+
box-shadow: none;
|
|
913
|
+
outline-style: none;
|
|
914
|
+
}
|
|
915
|
+
.utrecht-html select {
|
|
916
|
+
-moz-appearance: none;
|
|
917
|
+
-webkit-appearance: none;
|
|
918
|
+
appearance: none;
|
|
919
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
|
|
920
|
+
background-image: var(--utrecht-select-background-image);
|
|
921
|
+
background-position: 100%;
|
|
922
|
+
background-repeat: no-repeat;
|
|
923
|
+
background-size: 1.4em;
|
|
924
|
+
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
|
|
925
|
+
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
926
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
|
|
927
|
+
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
928
|
+
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
929
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1109
930
|
border-style: solid;
|
|
931
|
+
color: var(--utrecht-select-color, var(--utrecht-form-input-color));
|
|
932
|
+
font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
|
|
933
|
+
font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
|
|
934
|
+
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
935
|
+
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
936
|
+
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
937
|
+
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
938
|
+
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
939
|
+
width: 100%;
|
|
940
|
+
/* <select> does not support :read-only */
|
|
941
|
+
}
|
|
942
|
+
.utrecht-html select:disabled {
|
|
943
|
+
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))));
|
|
944
|
+
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))));
|
|
945
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
946
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
947
|
+
}
|
|
948
|
+
.utrecht-html select:focus {
|
|
949
|
+
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))));
|
|
950
|
+
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))));
|
|
951
|
+
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
952
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
953
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
954
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
955
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
956
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
957
|
+
}
|
|
958
|
+
.utrecht-html select:focus:not(:focus-visible) {
|
|
959
|
+
/* undo focus ring */
|
|
960
|
+
box-shadow: none;
|
|
961
|
+
outline-style: none;
|
|
962
|
+
}
|
|
963
|
+
.utrecht-html select[aria-invalid=true] {
|
|
964
|
+
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))));
|
|
965
|
+
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))));
|
|
966
|
+
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))));
|
|
967
|
+
}
|
|
968
|
+
.utrecht-html hr {
|
|
1110
969
|
border-color: var(--utrecht-separator-color);
|
|
1111
|
-
border-
|
|
1112
|
-
|
|
1113
|
-
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
970
|
+
border-style: solid;
|
|
971
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
972
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
|
|
973
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
|
|
974
|
+
--utrecht-space-around: 1;
|
|
1114
975
|
}
|
|
1115
|
-
|
|
1116
|
-
/**
|
|
1117
|
-
* @license EUPL-1.2
|
|
1118
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1119
|
-
*/
|
|
1120
|
-
/**
|
|
1121
|
-
* @license EUPL-1.2
|
|
1122
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1123
|
-
*/
|
|
1124
|
-
.utrecht-table, .utrecht-html table {
|
|
976
|
+
.utrecht-html table {
|
|
1125
977
|
border-collapse: collapse;
|
|
978
|
+
border-color: var(--utrecht-table-border-color, 0);
|
|
979
|
+
border-style: solid;
|
|
980
|
+
border-width: var(--utrecht-table-border-width, 0);
|
|
981
|
+
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
982
|
+
font-size: var(--utrecht-table-font-size, inherit);
|
|
983
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
|
|
984
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
|
|
1126
985
|
width: 100%;
|
|
986
|
+
--utrecht-space-around: 1;
|
|
1127
987
|
}
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
1131
|
-
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
1132
|
-
}
|
|
1133
|
-
|
|
1134
|
-
.utrecht-table__caption, .utrecht-html caption {
|
|
1135
|
-
font-weight: var(--utrecht-table-caption-font-weight);
|
|
988
|
+
.utrecht-html caption {
|
|
989
|
+
color: var(--utrecht-table-caption-color);
|
|
1136
990
|
font-family: var(--utrecht-table-caption-font-family);
|
|
1137
991
|
font-size: var(--utrecht-table-caption-font-size);
|
|
1138
|
-
|
|
992
|
+
font-weight: var(--utrecht-table-caption-font-weight);
|
|
1139
993
|
line-height: var(--utrecht-table-caption-line-height);
|
|
1140
994
|
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
995
|
+
page-break-after: avoid;
|
|
1141
996
|
text-align: var(--utrecht-table-caption-text-align, center);
|
|
1142
997
|
}
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
font-weight: var(--utrecht-table-header-font-weight);
|
|
998
|
+
.utrecht-html thead {
|
|
999
|
+
background-color: var(--utrecht-table-header-background-color);
|
|
1146
1000
|
color: var(--utrecht-table-header-color);
|
|
1001
|
+
font-weight: var(--utrecht-table-header-font-weight);
|
|
1002
|
+
page-break-inside: avoid;
|
|
1147
1003
|
text-transform: var(--utrecht-table-header-text-transform);
|
|
1148
1004
|
vertical-align: bottom;
|
|
1149
1005
|
}
|
|
1150
|
-
|
|
1151
|
-
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
1152
|
-
border-block-end-style: solid;
|
|
1153
|
-
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
1154
|
-
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
1155
|
-
}
|
|
1156
|
-
|
|
1157
|
-
.utrecht-table__body, .utrecht-html tbody {
|
|
1006
|
+
.utrecht-html tbody {
|
|
1158
1007
|
vertical-align: baseline;
|
|
1159
1008
|
}
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
font-
|
|
1163
|
-
|
|
1164
|
-
text-
|
|
1009
|
+
.utrecht-html th {
|
|
1010
|
+
color: var(--utrecht-table-header-cell-color);
|
|
1011
|
+
font-size: var(--utrecht-table-header-cell-font-size);
|
|
1012
|
+
font-weight: var(--utrecht-table-header-cell-font-weight);
|
|
1013
|
+
text-align: start;
|
|
1014
|
+
text-transform: var(--utrecht-table-header-cell-text-transform);
|
|
1165
1015
|
}
|
|
1166
|
-
|
|
1167
|
-
.utrecht-table__cell, .utrecht-html th,
|
|
1016
|
+
.utrecht-html th,
|
|
1168
1017
|
.utrecht-html td {
|
|
1169
|
-
border-block-end-style: solid;
|
|
1170
1018
|
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
1019
|
+
border-block-end-style: solid;
|
|
1171
1020
|
border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
|
|
1172
1021
|
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
1173
|
-
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
1174
|
-
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
1175
|
-
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
1176
1022
|
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
1023
|
+
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
1024
|
+
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
1025
|
+
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
1177
1026
|
text-align: start;
|
|
1178
1027
|
}
|
|
1179
|
-
|
|
1180
|
-
.utrecht-table__cell--first, .utrecht-html td:first-child,
|
|
1028
|
+
.utrecht-html td:first-child,
|
|
1181
1029
|
.utrecht-html th:first-child {
|
|
1182
1030
|
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
1183
1031
|
}
|
|
1184
|
-
|
|
1185
|
-
.utrecht-table__cell--last, .utrecht-html td:last-child,
|
|
1032
|
+
.utrecht-html td:last-child,
|
|
1186
1033
|
.utrecht-html th:last-child {
|
|
1187
1034
|
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
1188
1035
|
}
|
|
1189
|
-
|
|
1190
|
-
|
|
1036
|
+
.utrecht-html thead tr:last-child th {
|
|
1037
|
+
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
1038
|
+
border-block-end-style: solid;
|
|
1039
|
+
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
1040
|
+
}
|
|
1041
|
+
.utrecht-html thead > tr > th.numeric,
|
|
1042
|
+
.utrecht-html tfoot > tr > th.numeric,
|
|
1043
|
+
.utrecht-html th[scope=column].numeric {
|
|
1044
|
+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
1045
|
+
text-align: right;
|
|
1046
|
+
}
|
|
1191
1047
|
.utrecht-html td.numeric {
|
|
1192
1048
|
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
1193
1049
|
text-align: right;
|
|
1050
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
1194
1051
|
}
|
|
1195
|
-
|
|
1196
|
-
|
|
1052
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
|
|
1053
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
1054
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
1055
|
+
}
|
|
1056
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
|
|
1197
1057
|
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
1198
1058
|
color: var(--utrecht-table-row-alternate-odd-color);
|
|
1199
1059
|
}
|
|
1200
|
-
|
|
1201
|
-
.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 {
|
|
1060
|
+
.utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
|
|
1202
1061
|
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
1203
1062
|
color: var(--utrecht-table-row-alternate-even-color);
|
|
1204
1063
|
}
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
border-width: var(--utrecht-textarea-border-width);
|
|
1216
|
-
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
|
|
1217
|
-
border-color: var(--utrecht-textarea-border-color);
|
|
1218
|
-
border-radius: var(--utrecht-textarea-border-radius, 0);
|
|
1064
|
+
.utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
|
|
1065
|
+
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
1066
|
+
color: var(--utrecht-table-row-alternate-odd-color);
|
|
1067
|
+
}
|
|
1068
|
+
.utrecht-html textarea {
|
|
1069
|
+
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
|
|
1070
|
+
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
|
|
1071
|
+
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
|
|
1072
|
+
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
|
|
1073
|
+
border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1219
1074
|
border-style: solid;
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
font-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
padding-
|
|
1227
|
-
padding-
|
|
1075
|
+
box-sizing: border-box;
|
|
1076
|
+
color: var(--utrecht-textarea-color, var(--utrecht-form-input-color));
|
|
1077
|
+
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
1078
|
+
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1079
|
+
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1080
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
1081
|
+
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1082
|
+
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1083
|
+
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1084
|
+
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1085
|
+
resize: vertical;
|
|
1228
1086
|
width: 100%;
|
|
1229
1087
|
}
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
}
|
|
1236
|
-
|
|
1237
|
-
.utrecht-textarea--disabled, .utrecht-html textarea:disabled {
|
|
1238
|
-
border-color: var(--utrecht-textarea-disabled-border-color);
|
|
1239
|
-
color: var(--utrecht-textarea-disabled-color);
|
|
1088
|
+
.utrecht-html textarea:disabled {
|
|
1089
|
+
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))));
|
|
1090
|
+
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))));
|
|
1091
|
+
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1092
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1240
1093
|
}
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
border-color: var(--utrecht-textarea-
|
|
1244
|
-
color: var(--utrecht-textarea-
|
|
1094
|
+
.utrecht-html textarea:focus {
|
|
1095
|
+
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))));
|
|
1096
|
+
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))));
|
|
1097
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1098
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1099
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1100
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1101
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1102
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1245
1103
|
}
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
.utrecht-html
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1104
|
+
.utrecht-html textarea:focus:not(:focus-visible) {
|
|
1105
|
+
/* undo focus ring */
|
|
1106
|
+
box-shadow: none;
|
|
1107
|
+
outline-style: none;
|
|
1108
|
+
}
|
|
1109
|
+
.utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
|
|
1110
|
+
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))));
|
|
1111
|
+
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))));
|
|
1112
|
+
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))));
|
|
1113
|
+
}
|
|
1114
|
+
.utrecht-html textarea:read-only {
|
|
1115
|
+
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))));
|
|
1116
|
+
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1117
|
+
}
|
|
1118
|
+
.utrecht-html textarea::placeholder {
|
|
1119
|
+
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1120
|
+
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
1121
|
+
opacity: 100%;
|
|
1122
|
+
}
|
|
1123
|
+
.utrecht-html input:not([type]),
|
|
1124
|
+
.utrecht-html input[type=date i],
|
|
1125
|
+
.utrecht-html input[type=datetime-local i],
|
|
1126
|
+
.utrecht-html input[type=email i],
|
|
1127
|
+
.utrecht-html input[type=month i],
|
|
1128
|
+
.utrecht-html input[type=number i],
|
|
1129
|
+
.utrecht-html input[type=password i],
|
|
1130
|
+
.utrecht-html input[type=search i],
|
|
1131
|
+
.utrecht-html input[type=tel i],
|
|
1132
|
+
.utrecht-html input[type=text i],
|
|
1133
|
+
.utrecht-html input[type=time i],
|
|
1134
|
+
.utrecht-html input[type=url i],
|
|
1135
|
+
.utrecht-html input[type=week i] {
|
|
1136
|
+
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
|
|
1137
|
+
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
|
|
1138
|
+
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
|
|
1139
|
+
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
|
|
1140
|
+
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1264
1141
|
border-style: solid;
|
|
1265
|
-
color: var(--utrecht-textbox-color);
|
|
1266
|
-
font-family: var(--utrecht-textbox-font-family);
|
|
1267
|
-
font-size: var(--utrecht-textbox-font-size, 1em);
|
|
1268
|
-
max-width: var(--utrecht-textbox-max-width);
|
|
1269
|
-
padding-block-end: var(--utrecht-textbox-padding-block-end);
|
|
1270
|
-
padding-block-start: var(--utrecht-textbox-padding-block-start);
|
|
1271
|
-
padding-inline-end: var(--utrecht-textbox-padding-inline-end);
|
|
1272
|
-
padding-inline-start: var(--utrecht-textbox-padding-inline-start);
|
|
1273
1142
|
box-sizing: border-box;
|
|
1143
|
+
color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
|
|
1144
|
+
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
|
|
1145
|
+
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1146
|
+
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1147
|
+
padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1148
|
+
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1149
|
+
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1150
|
+
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1274
1151
|
width: 100%;
|
|
1275
1152
|
}
|
|
1276
|
-
|
|
1277
|
-
.utrecht-
|
|
1278
|
-
.utrecht-html input[type=
|
|
1279
|
-
.utrecht-html input[type=email]
|
|
1280
|
-
.utrecht-html input[type=
|
|
1281
|
-
.utrecht-html input[type=
|
|
1282
|
-
.utrecht-html input[type=
|
|
1283
|
-
.utrecht-html input[type=
|
|
1284
|
-
.utrecht-html input[type=
|
|
1285
|
-
.utrecht-html input[type=
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
.utrecht-html input[type
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
.utrecht-
|
|
1300
|
-
.utrecht-html input[type=
|
|
1301
|
-
.utrecht-html input[type=search]:
|
|
1302
|
-
.utrecht-html input[type=tel]:
|
|
1303
|
-
.utrecht-html input[type=
|
|
1304
|
-
|
|
1305
|
-
|
|
1153
|
+
.utrecht-html input:not([type]):disabled,
|
|
1154
|
+
.utrecht-html input[type=date i]:disabled,
|
|
1155
|
+
.utrecht-html input[type=datetime-local i]:disabled,
|
|
1156
|
+
.utrecht-html input[type=email i]:disabled,
|
|
1157
|
+
.utrecht-html input[type=month i]:disabled,
|
|
1158
|
+
.utrecht-html input[type=number i]:disabled,
|
|
1159
|
+
.utrecht-html input[type=password i]:disabled,
|
|
1160
|
+
.utrecht-html input[type=search i]:disabled,
|
|
1161
|
+
.utrecht-html input[type=tel i]:disabled,
|
|
1162
|
+
.utrecht-html input[type=text i]:disabled,
|
|
1163
|
+
.utrecht-html input[type=time i]:disabled,
|
|
1164
|
+
.utrecht-html input[type=url i]:disabled,
|
|
1165
|
+
.utrecht-html input[type=week i]:disabled {
|
|
1166
|
+
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))));
|
|
1167
|
+
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))));
|
|
1168
|
+
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1169
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1170
|
+
}
|
|
1171
|
+
.utrecht-html input:not([type]):focus,
|
|
1172
|
+
.utrecht-html input[type=date i]:focus,
|
|
1173
|
+
.utrecht-html input[type=datetime-local i]:focus,
|
|
1174
|
+
.utrecht-html input[type=email i]:focus,
|
|
1175
|
+
.utrecht-html input[type=month i]:focus,
|
|
1176
|
+
.utrecht-html input[type=number i]:focus,
|
|
1177
|
+
.utrecht-html input[type=password i]:focus,
|
|
1178
|
+
.utrecht-html input[type=search i]:focus,
|
|
1179
|
+
.utrecht-html input[type=tel i]:focus,
|
|
1180
|
+
.utrecht-html input[type=text i]:focus,
|
|
1181
|
+
.utrecht-html input[type=time i]:focus,
|
|
1182
|
+
.utrecht-html input[type=url i]:focus,
|
|
1183
|
+
.utrecht-html input[type=week i]:focus {
|
|
1184
|
+
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))));
|
|
1185
|
+
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))));
|
|
1186
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1187
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1188
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1189
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1190
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1191
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1306
1192
|
}
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
.utrecht-
|
|
1193
|
+
.utrecht-html input:not([type]):focus:not(:focus-visible),
|
|
1194
|
+
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
1195
|
+
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
1196
|
+
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
1197
|
+
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
1198
|
+
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
1199
|
+
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
1200
|
+
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
1201
|
+
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
1202
|
+
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
1203
|
+
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
1204
|
+
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
1205
|
+
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
1206
|
+
/* undo focus ring */
|
|
1207
|
+
box-shadow: none;
|
|
1208
|
+
outline-style: none;
|
|
1209
|
+
}
|
|
1210
|
+
.utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
|
|
1211
|
+
.utrecht-html input[type=date i]:invalid,
|
|
1212
|
+
.utrecht-html input[type=date i][aria-invalid=true],
|
|
1213
|
+
.utrecht-html input[type=datetime-local i]:invalid,
|
|
1214
|
+
.utrecht-html input[type=datetime-local i][aria-invalid=true],
|
|
1215
|
+
.utrecht-html input[type=email i]:invalid,
|
|
1216
|
+
.utrecht-html input[type=email i][aria-invalid=true],
|
|
1217
|
+
.utrecht-html input[type=month i]:invalid,
|
|
1218
|
+
.utrecht-html input[type=month i][aria-invalid=true],
|
|
1219
|
+
.utrecht-html input[type=number i]:invalid,
|
|
1220
|
+
.utrecht-html input[type=number i][aria-invalid=true],
|
|
1221
|
+
.utrecht-html input[type=password i]:invalid,
|
|
1222
|
+
.utrecht-html input[type=password i][aria-invalid=true],
|
|
1223
|
+
.utrecht-html input[type=search i]:invalid,
|
|
1224
|
+
.utrecht-html input[type=search i][aria-invalid=true],
|
|
1225
|
+
.utrecht-html input[type=tel i]:invalid,
|
|
1226
|
+
.utrecht-html input[type=tel i][aria-invalid=true],
|
|
1227
|
+
.utrecht-html input[type=text i]:invalid,
|
|
1228
|
+
.utrecht-html input[type=text i][aria-invalid=true],
|
|
1229
|
+
.utrecht-html input[type=time i]:invalid,
|
|
1230
|
+
.utrecht-html input[type=time i][aria-invalid=true],
|
|
1231
|
+
.utrecht-html input[type=url i]:invalid,
|
|
1232
|
+
.utrecht-html input[type=url i][aria-invalid=true],
|
|
1233
|
+
.utrecht-html input[type=week i]:invalid,
|
|
1234
|
+
.utrecht-html input[type=week i][aria-invalid=true] {
|
|
1235
|
+
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))));
|
|
1236
|
+
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))));
|
|
1237
|
+
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))));
|
|
1238
|
+
}
|
|
1239
|
+
.utrecht-html input:not([type]):read-only,
|
|
1240
|
+
.utrecht-html input[type=date i]:read-only,
|
|
1241
|
+
.utrecht-html input[type=datetime-local i]:read-only,
|
|
1242
|
+
.utrecht-html input[type=email i]:read-only,
|
|
1243
|
+
.utrecht-html input[type=month i]:read-only,
|
|
1244
|
+
.utrecht-html input[type=number i]:read-only,
|
|
1245
|
+
.utrecht-html input[type=password i]:read-only,
|
|
1246
|
+
.utrecht-html input[type=search i]:read-only,
|
|
1247
|
+
.utrecht-html input[type=tel i]:read-only,
|
|
1248
|
+
.utrecht-html input[type=text i]:read-only,
|
|
1249
|
+
.utrecht-html input[type=time i]:read-only,
|
|
1250
|
+
.utrecht-html input[type=url i]:read-only,
|
|
1251
|
+
.utrecht-html input[type=week i]:read-only {
|
|
1252
|
+
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))));
|
|
1253
|
+
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1254
|
+
}
|
|
1255
|
+
.utrecht-html input:not([type])::placeholder,
|
|
1256
|
+
.utrecht-html input[type=date i]::placeholder,
|
|
1257
|
+
.utrecht-html input[type=datetime-local i]::placeholder,
|
|
1258
|
+
.utrecht-html input[type=email i]::placeholder,
|
|
1259
|
+
.utrecht-html input[type=month i]::placeholder,
|
|
1260
|
+
.utrecht-html input[type=number i]::placeholder,
|
|
1261
|
+
.utrecht-html input[type=password i]::placeholder,
|
|
1262
|
+
.utrecht-html input[type=search i]::placeholder,
|
|
1263
|
+
.utrecht-html input[type=tel i]::placeholder,
|
|
1264
|
+
.utrecht-html input[type=text i]::placeholder,
|
|
1265
|
+
.utrecht-html input[type=time i]::placeholder,
|
|
1266
|
+
.utrecht-html input[type=url i]::placeholder,
|
|
1267
|
+
.utrecht-html input[type=week i]::placeholder {
|
|
1268
|
+
color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1269
|
+
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
1270
|
+
opacity: 100%;
|
|
1271
|
+
}
|
|
1272
|
+
.utrecht-html input[autocomplete~=current-password i],
|
|
1273
|
+
.utrecht-html input[autocomplete~=new-password i],
|
|
1274
|
+
.utrecht-html input[type=password i] {
|
|
1275
|
+
font-variant-ligatures: none;
|
|
1276
|
+
font-variant-numeric: slashed-zero;
|
|
1277
|
+
}
|
|
1278
|
+
.utrecht-html input[autocomplete~=bday i],
|
|
1279
|
+
.utrecht-html input[autocomplete~=bday-day i],
|
|
1280
|
+
.utrecht-html input[autocomplete~=bday-month i],
|
|
1281
|
+
.utrecht-html input[autocomplete~=bday-year i],
|
|
1282
|
+
.utrecht-html input[autocomplete~=cc-csc i],
|
|
1283
|
+
.utrecht-html input[autocomplete~=cc-exp i],
|
|
1284
|
+
.utrecht-html input[autocomplete~=cc-exp-month i],
|
|
1285
|
+
.utrecht-html input[autocomplete~=cc-exp-year i],
|
|
1286
|
+
.utrecht-html input[autocomplete~=cc-number i],
|
|
1287
|
+
.utrecht-html input[autocomplete~=one-time-code i],
|
|
1288
|
+
.utrecht-html input[autocomplete~=postal-code i],
|
|
1289
|
+
.utrecht-html input[autocomplete~=tel i],
|
|
1290
|
+
.utrecht-html input[autocomplete~=tel-area-code i],
|
|
1291
|
+
.utrecht-html input[autocomplete~=tel-country-code i],
|
|
1292
|
+
.utrecht-html input[autocomplete~=tel-extension i],
|
|
1293
|
+
.utrecht-html input[autocomplete~=tel-local i],
|
|
1294
|
+
.utrecht-html input[autocomplete~=tel-national i],
|
|
1295
|
+
.utrecht-html input[autocomplete~=transaction-amount i],
|
|
1296
|
+
.utrecht-html input[inputmode=decimal i],
|
|
1297
|
+
.utrecht-html input[inputmode=numeric i],
|
|
1298
|
+
.utrecht-html input[inputmode=tel i],
|
|
1299
|
+
.utrecht-html input[type=number i],
|
|
1300
|
+
.utrecht-html input[type=tel i] {
|
|
1301
|
+
-moz-appearance: textfield; /* avoid spinner input in Firefox */
|
|
1302
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
1303
|
+
}
|
|
1304
|
+
.utrecht-html input[inputmode=email i],
|
|
1305
|
+
.utrecht-html input[inputmode=url i],
|
|
1306
|
+
.utrecht-html input[type=email i],
|
|
1307
|
+
.utrecht-html input[type=url i] {
|
|
1308
|
+
font-variant-ligatures: none;
|
|
1309
|
+
}
|
|
1310
|
+
.utrecht-html ul {
|
|
1318
1311
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
1319
1312
|
font-size: var(--utrecht-document-font-size, inherit);
|
|
1320
1313
|
line-height: var(--utrecht-document-line-height, inherit);
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
|
|
1326
|
-
margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
|
|
1327
|
-
}
|
|
1328
|
-
|
|
1329
|
-
.utrecht-unordered-list--nested {
|
|
1330
|
-
margin-inline-start: 2ch;
|
|
1331
|
-
margin-block-end: 0;
|
|
1314
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
|
|
1315
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
|
|
1316
|
+
padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
|
|
1317
|
+
--utrecht-space-around: 1;
|
|
1332
1318
|
}
|
|
1333
|
-
|
|
1334
|
-
.utrecht-unordered-list__item, .utrecht-html ul > li {
|
|
1335
|
-
padding-inline-start: 1ch;
|
|
1336
|
-
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
1319
|
+
.utrecht-html ul > li {
|
|
1337
1320
|
margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
|
|
1321
|
+
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
1322
|
+
padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
|
|
1338
1323
|
}
|
|
1339
|
-
|
|
1340
|
-
.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
|
|
1341
|
-
.utrecht-unordered-list__marker {
|
|
1324
|
+
.utrecht-html ul > li::marker {
|
|
1342
1325
|
color: var(--utrecht-unordered-list-marker-color);
|
|
1343
1326
|
content: "●";
|
|
1344
1327
|
}
|