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