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