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