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