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