@utrecht/component-library-css 1.0.0-alpha.24 → 1.0.0-alpha.240
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 +1043 -376
- package/dist/index.css +3106 -1118
- 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 -497
- package/src/bem.scss +0 -35
- package/src/root-theme.scss +0 -9
package/dist/html.css
CHANGED
|
@@ -8,485 +8,1152 @@
|
|
|
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;
|
|
488
|
+
/* reset native margin for input[type="checkbox"] */
|
|
489
|
+
margin-block-start: 0;
|
|
490
|
+
margin-inline-end: 0;
|
|
491
|
+
margin-inline-start: 0;
|
|
133
492
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
border-color: var(--utrecht-textarea-read-only-border-color);
|
|
137
|
-
color: var(--utrecht-textarea-read-only-color);
|
|
493
|
+
.utrecht-html input[type=checkbox i]:disabled {
|
|
494
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
138
495
|
}
|
|
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);
|
|
496
|
+
.utrecht-html input[type=checkbox i]:focus {
|
|
497
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
498
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
499
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
500
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
501
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
160
502
|
}
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
166
|
-
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
503
|
+
.utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
|
|
504
|
+
/* undo focus ring */
|
|
505
|
+
box-shadow: none;
|
|
506
|
+
outline-style: none;
|
|
167
507
|
}
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
508
|
+
.utrecht-html body {
|
|
509
|
+
/* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
|
|
510
|
+
color: var(--utrecht-document-color, inherit);
|
|
511
|
+
font-family: var(--utrecht-document-font-family, inherit);
|
|
512
|
+
font-size: var(--utrecht-document-font-size, inherit);
|
|
513
|
+
font-weight: var(--utrecht-document-font-weight, inherit);
|
|
514
|
+
line-height: var(--utrecht-document-line-height, inherit);
|
|
515
|
+
text-rendering: optimizeLegibility;
|
|
516
|
+
background-color: var(--utrecht-document-background-color, inherit);
|
|
173
517
|
}
|
|
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);
|
|
518
|
+
.utrecht-html body :lang(ar) {
|
|
519
|
+
/* `letter-spacing` design tokens break Arabic text rendering, avoid that */
|
|
520
|
+
letter-spacing: 0 !important;
|
|
184
521
|
}
|
|
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));
|
|
522
|
+
.utrecht-html em {
|
|
523
|
+
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
191
524
|
}
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
525
|
+
.utrecht-html strong {
|
|
526
|
+
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
527
|
+
}
|
|
528
|
+
.utrecht-html fieldset {
|
|
529
|
+
border: 0;
|
|
530
|
+
margin-inline-end: 0;
|
|
531
|
+
margin-inline-start: 0;
|
|
532
|
+
min-width: 0;
|
|
533
|
+
padding-block-end: 0;
|
|
534
|
+
padding-block-start: 0.01em;
|
|
535
|
+
padding-inline-end: 0;
|
|
536
|
+
padding-inline-start: 0;
|
|
537
|
+
margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
|
|
538
|
+
margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
|
|
539
|
+
}
|
|
540
|
+
.utrecht-html legend {
|
|
541
|
+
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
542
|
+
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
543
|
+
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
544
|
+
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
545
|
+
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
546
|
+
page-break-after: avoid;
|
|
547
|
+
page-break-inside: avoid;
|
|
548
|
+
text-transform: var(--utrecht-form-fieldset-legend-text-transform);
|
|
549
|
+
padding-inline-end: 0;
|
|
550
|
+
padding-inline-start: 0;
|
|
551
|
+
margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
|
|
552
|
+
margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
|
|
553
|
+
}
|
|
554
|
+
.utrecht-html label {
|
|
555
|
+
color: var(--utrecht-form-label-color);
|
|
556
|
+
font-size: var(--utrecht-form-label-font-size);
|
|
557
|
+
font-weight: var(--utrecht-form-label-font-weight);
|
|
558
|
+
}
|
|
559
|
+
.utrecht-html input[type=checkbox i] ~ label {
|
|
560
|
+
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
561
|
+
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
562
|
+
}
|
|
563
|
+
.utrecht-html input[type=radio i] ~ label {
|
|
564
|
+
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
565
|
+
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
566
|
+
}
|
|
567
|
+
.utrecht-html h1 {
|
|
568
|
+
page-break-after: avoid;
|
|
569
|
+
page-break-inside: avoid;
|
|
570
|
+
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
204
571
|
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
205
572
|
font-size: var(--utrecht-heading-1-font-size);
|
|
206
573
|
font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
207
574
|
letter-spacing: var(--utrecht-heading-1-letter-spacing);
|
|
208
575
|
line-height: var(--utrecht-heading-1-line-height);
|
|
576
|
+
margin-block-end: 0;
|
|
577
|
+
margin-block-start: 0;
|
|
209
578
|
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
579
|
margin-block-end: var(--utrecht-heading-1-margin-block-end);
|
|
580
|
+
margin-block-start: var(--utrecht-heading-1-margin-block-start);
|
|
216
581
|
}
|
|
217
|
-
|
|
218
|
-
|
|
582
|
+
.utrecht-html h2 {
|
|
583
|
+
page-break-after: avoid;
|
|
584
|
+
page-break-inside: avoid;
|
|
585
|
+
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
219
586
|
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
220
587
|
font-size: var(--utrecht-heading-2-font-size);
|
|
221
588
|
font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
222
589
|
letter-spacing: var(--utrecht-heading-2-letter-spacing);
|
|
223
590
|
line-height: var(--utrecht-heading-2-line-height);
|
|
591
|
+
margin-block-end: 0;
|
|
592
|
+
margin-block-start: 0;
|
|
224
593
|
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
594
|
margin-block-end: var(--utrecht-heading-2-margin-block-end);
|
|
595
|
+
margin-block-start: var(--utrecht-heading-2-margin-block-start);
|
|
231
596
|
}
|
|
232
|
-
|
|
233
|
-
|
|
597
|
+
.utrecht-html h3 {
|
|
598
|
+
page-break-after: avoid;
|
|
599
|
+
page-break-inside: avoid;
|
|
600
|
+
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
234
601
|
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
235
602
|
font-size: var(--utrecht-heading-3-font-size);
|
|
236
603
|
font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
237
604
|
letter-spacing: var(--utrecht-heading-3-letter-spacing);
|
|
238
605
|
line-height: var(--utrecht-heading-3-line-height);
|
|
606
|
+
margin-block-end: 0;
|
|
607
|
+
margin-block-start: 0;
|
|
239
608
|
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
609
|
margin-block-end: var(--utrecht-heading-3-margin-block-end);
|
|
610
|
+
margin-block-start: var(--utrecht-heading-3-margin-block-start);
|
|
246
611
|
}
|
|
247
|
-
|
|
248
|
-
|
|
612
|
+
.utrecht-html h4 {
|
|
613
|
+
page-break-after: avoid;
|
|
614
|
+
page-break-inside: avoid;
|
|
615
|
+
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
249
616
|
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
250
617
|
font-size: var(--utrecht-heading-4-font-size);
|
|
251
618
|
font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
252
619
|
letter-spacing: var(--utrecht-heading-4-letter-spacing);
|
|
253
620
|
line-height: var(--utrecht-heading-4-line-height);
|
|
621
|
+
margin-block-end: 0;
|
|
622
|
+
margin-block-start: 0;
|
|
254
623
|
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
624
|
margin-block-end: var(--utrecht-heading-4-margin-block-end);
|
|
625
|
+
margin-block-start: var(--utrecht-heading-4-margin-block-start);
|
|
261
626
|
}
|
|
262
|
-
|
|
263
|
-
|
|
627
|
+
.utrecht-html h5 {
|
|
628
|
+
page-break-after: avoid;
|
|
629
|
+
page-break-inside: avoid;
|
|
630
|
+
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
264
631
|
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
265
632
|
font-size: var(--utrecht-heading-5-font-size);
|
|
266
633
|
font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
267
634
|
letter-spacing: var(--utrecht-heading-5-letter-spacing);
|
|
268
635
|
line-height: var(--utrecht-heading-5-line-height);
|
|
636
|
+
margin-block-end: 0;
|
|
637
|
+
margin-block-start: 0;
|
|
269
638
|
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
639
|
margin-block-end: var(--utrecht-heading-5-margin-block-end);
|
|
640
|
+
margin-block-start: var(--utrecht-heading-5-margin-block-start);
|
|
276
641
|
}
|
|
277
|
-
|
|
278
|
-
|
|
642
|
+
.utrecht-html h6 {
|
|
643
|
+
page-break-after: avoid;
|
|
644
|
+
page-break-inside: avoid;
|
|
645
|
+
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
279
646
|
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
280
647
|
font-size: var(--utrecht-heading-6-font-size);
|
|
281
648
|
font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
282
649
|
letter-spacing: var(--utrecht-heading-6-letter-spacing);
|
|
283
650
|
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
651
|
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
652
|
margin-block-start: 0;
|
|
381
|
-
|
|
382
|
-
margin-
|
|
383
|
-
margin-
|
|
653
|
+
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
654
|
+
margin-block-end: var(--utrecht-heading-6-margin-block-end);
|
|
655
|
+
margin-block-start: var(--utrecht-heading-6-margin-block-start);
|
|
384
656
|
}
|
|
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);
|
|
657
|
+
.utrecht-html a:link {
|
|
397
658
|
color: var(--utrecht-link-color, blue);
|
|
659
|
+
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
660
|
+
text-decoration-skip-ink: all;
|
|
661
|
+
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
662
|
+
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
398
663
|
}
|
|
399
|
-
|
|
400
|
-
.utrecht-link:visited,
|
|
401
|
-
.utrecht-link--visited,
|
|
402
664
|
.utrecht-html a:visited {
|
|
403
665
|
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
404
666
|
}
|
|
405
|
-
|
|
406
|
-
.utrecht-link:hover,
|
|
407
|
-
.utrecht-link--hover,
|
|
408
667
|
.utrecht-html a:hover {
|
|
409
668
|
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
410
669
|
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
670
|
+
text-decoration-skip: none;
|
|
671
|
+
text-decoration-skip-ink: none;
|
|
672
|
+
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
411
673
|
}
|
|
412
|
-
|
|
413
|
-
.utrecht-link:active,
|
|
414
|
-
.utrecht-link--active,
|
|
415
674
|
.utrecht-html a:active {
|
|
416
675
|
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
417
676
|
}
|
|
418
|
-
|
|
419
|
-
.utrecht-link:focus,
|
|
420
|
-
.utrecht-link--focus,
|
|
421
677
|
.utrecht-html a:focus {
|
|
678
|
+
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
422
679
|
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
423
680
|
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
color: var(--utrecht-focus-color, inherit);
|
|
681
|
+
text-decoration-skip: none;
|
|
682
|
+
text-decoration-skip-ink: none;
|
|
683
|
+
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
428
684
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
429
|
-
outline-
|
|
430
|
-
|
|
685
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
686
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
687
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
688
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
431
689
|
}
|
|
432
|
-
|
|
433
|
-
/*
|
|
434
|
-
|
|
690
|
+
.utrecht-html a:focus:not(:focus-visible) {
|
|
691
|
+
/* undo focus ring */
|
|
692
|
+
box-shadow: none;
|
|
693
|
+
outline-style: none;
|
|
694
|
+
}
|
|
695
|
+
.utrecht-html a[href^="tel:" i] {
|
|
435
696
|
white-space: nowrap;
|
|
436
697
|
}
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
698
|
+
.utrecht-html ol {
|
|
699
|
+
font-family: var(--utrecht-document-font-family, inherit);
|
|
700
|
+
margin-block-end: 0;
|
|
701
|
+
margin-block-start: 0;
|
|
702
|
+
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
703
|
+
margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
|
|
704
|
+
margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
|
|
705
|
+
}
|
|
706
|
+
.utrecht-html ol > li {
|
|
707
|
+
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
|
|
708
|
+
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
709
|
+
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
710
|
+
}
|
|
711
|
+
.utrecht-html ol:lang(ar) {
|
|
712
|
+
list-style: arabic-indic;
|
|
713
|
+
}
|
|
714
|
+
.utrecht-html p {
|
|
715
|
+
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
716
|
+
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
717
|
+
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
718
|
+
font-weight: var(--utrecht-paragraph-font-weight, inherit);
|
|
719
|
+
line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
|
|
720
|
+
margin-block-end: 0;
|
|
721
|
+
margin-block-start: 0;
|
|
722
|
+
}
|
|
723
|
+
.utrecht-html p.lead {
|
|
724
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
725
|
+
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
726
|
+
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
727
|
+
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
728
|
+
}
|
|
729
|
+
.utrecht-html * ~ p {
|
|
730
|
+
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
731
|
+
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
732
|
+
}
|
|
733
|
+
.utrecht-html input[type=radio i] {
|
|
734
|
+
/* reset native margin for input[type="radio" i] */
|
|
735
|
+
margin-block-end: 0;
|
|
736
|
+
margin-block-start: 0;
|
|
737
|
+
margin-inline-end: 0;
|
|
738
|
+
margin-inline-start: 0;
|
|
739
|
+
}
|
|
740
|
+
.utrecht-html input[type=radio i]:disabled {
|
|
741
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
742
|
+
}
|
|
743
|
+
.utrecht-html input[type=radio i]:focus {
|
|
744
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
745
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
746
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
747
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
748
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
749
|
+
}
|
|
750
|
+
.utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
751
|
+
/* undo focus ring */
|
|
752
|
+
box-shadow: none;
|
|
753
|
+
outline-style: none;
|
|
754
|
+
}
|
|
755
|
+
.utrecht-html select {
|
|
756
|
+
-moz-appearance: none;
|
|
757
|
+
-webkit-appearance: none;
|
|
758
|
+
appearance: none;
|
|
759
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
|
|
760
|
+
background-image: var(--utrecht-select-background-image);
|
|
761
|
+
background-position: 100%;
|
|
762
|
+
background-repeat: no-repeat;
|
|
763
|
+
background-size: 1.4em;
|
|
764
|
+
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
|
|
765
|
+
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
766
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
|
|
767
|
+
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
768
|
+
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
769
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
449
770
|
border-style: solid;
|
|
771
|
+
color: var(--utrecht-select-color, var(--utrecht-form-input-color));
|
|
772
|
+
font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
|
|
773
|
+
font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
|
|
774
|
+
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
775
|
+
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
776
|
+
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
777
|
+
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
778
|
+
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
779
|
+
width: 100%;
|
|
780
|
+
/* <select> does not support :read-only */
|
|
781
|
+
}
|
|
782
|
+
.utrecht-html select:disabled {
|
|
783
|
+
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))));
|
|
784
|
+
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))));
|
|
785
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
786
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
787
|
+
}
|
|
788
|
+
.utrecht-html select:focus {
|
|
789
|
+
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))));
|
|
790
|
+
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))));
|
|
791
|
+
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
792
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
793
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
794
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
795
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
796
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
797
|
+
}
|
|
798
|
+
.utrecht-html select:focus:not(:focus-visible) {
|
|
799
|
+
/* undo focus ring */
|
|
800
|
+
box-shadow: none;
|
|
801
|
+
outline-style: none;
|
|
802
|
+
}
|
|
803
|
+
.utrecht-html select:invalid, .utrecht-html select[aria-invalid=true] {
|
|
804
|
+
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))));
|
|
805
|
+
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))));
|
|
806
|
+
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))));
|
|
807
|
+
}
|
|
808
|
+
.utrecht-html hr {
|
|
450
809
|
border-color: var(--utrecht-separator-color);
|
|
451
|
-
border-
|
|
452
|
-
|
|
810
|
+
border-style: solid;
|
|
811
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
453
812
|
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
813
|
+
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
454
814
|
}
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
815
|
+
.utrecht-html table {
|
|
816
|
+
border-collapse: collapse;
|
|
817
|
+
border-color: var(--utrecht-table-border-color, 0);
|
|
818
|
+
border-style: solid;
|
|
819
|
+
border-width: var(--utrecht-table-border-width, 0);
|
|
820
|
+
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
821
|
+
font-size: var(--utrecht-table-font-size, inherit);
|
|
822
|
+
width: 100%;
|
|
823
|
+
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
824
|
+
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
825
|
+
}
|
|
826
|
+
.utrecht-html caption {
|
|
827
|
+
color: var(--utrecht-table-caption-color);
|
|
828
|
+
font-family: var(--utrecht-table-caption-font-family);
|
|
829
|
+
font-size: var(--utrecht-table-caption-font-size);
|
|
830
|
+
font-weight: var(--utrecht-table-caption-font-weight);
|
|
831
|
+
line-height: var(--utrecht-table-caption-line-height);
|
|
832
|
+
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
833
|
+
text-align: var(--utrecht-table-caption-text-align, center);
|
|
834
|
+
}
|
|
835
|
+
.utrecht-html thead {
|
|
836
|
+
background-color: var(--utrecht-table-header-background-color);
|
|
837
|
+
color: var(--utrecht-table-header-color);
|
|
838
|
+
font-weight: var(--utrecht-table-header-font-weight);
|
|
839
|
+
text-transform: var(--utrecht-table-header-text-transform);
|
|
840
|
+
vertical-align: bottom;
|
|
841
|
+
}
|
|
842
|
+
.utrecht-html tbody {
|
|
843
|
+
vertical-align: baseline;
|
|
844
|
+
}
|
|
845
|
+
.utrecht-html th {
|
|
846
|
+
color: var(--utrecht-table-header-cell-color);
|
|
847
|
+
font-size: var(--utrecht-table-header-cell-font-size);
|
|
848
|
+
font-weight: var(--utrecht-table-header-cell-font-weight);
|
|
849
|
+
text-align: start;
|
|
850
|
+
text-transform: var(--utrecht-table-header-cell-text-transform);
|
|
851
|
+
}
|
|
852
|
+
.utrecht-html th,
|
|
853
|
+
.utrecht-html td {
|
|
854
|
+
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
855
|
+
border-block-end-style: solid;
|
|
856
|
+
border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
|
|
857
|
+
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
858
|
+
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
859
|
+
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
860
|
+
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
861
|
+
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
862
|
+
text-align: start;
|
|
863
|
+
}
|
|
864
|
+
.utrecht-html td:first-child,
|
|
865
|
+
.utrecht-html th:first-child {
|
|
866
|
+
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
867
|
+
}
|
|
868
|
+
.utrecht-html td:last-child,
|
|
869
|
+
.utrecht-html th:last-child {
|
|
870
|
+
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
871
|
+
}
|
|
872
|
+
.utrecht-html thead tr:last-child th {
|
|
873
|
+
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
874
|
+
border-block-end-style: solid;
|
|
875
|
+
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
876
|
+
}
|
|
877
|
+
.utrecht-html thead > tr > th.numeric,
|
|
878
|
+
.utrecht-html tfoot > tr > th.numeric,
|
|
879
|
+
.utrecht-html th[scope=column].numeric {
|
|
880
|
+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
881
|
+
text-align: right;
|
|
882
|
+
}
|
|
883
|
+
.utrecht-html td.numeric {
|
|
884
|
+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
885
|
+
text-align: right;
|
|
886
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
887
|
+
}
|
|
888
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
|
|
889
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
890
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
891
|
+
}
|
|
892
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
|
|
893
|
+
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
894
|
+
color: var(--utrecht-table-row-alternate-odd-color);
|
|
895
|
+
}
|
|
896
|
+
.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
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
898
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
899
|
+
}
|
|
900
|
+
.utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
|
|
901
|
+
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
902
|
+
color: var(--utrecht-table-row-alternate-odd-color);
|
|
903
|
+
}
|
|
904
|
+
.utrecht-html textarea {
|
|
905
|
+
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
|
|
906
|
+
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
|
|
907
|
+
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
|
|
908
|
+
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
|
|
909
|
+
border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
910
|
+
border-style: solid;
|
|
911
|
+
box-sizing: border-box;
|
|
912
|
+
color: var(--utrecht-textarea-color, var(--utrecht-form-input-color));
|
|
913
|
+
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
914
|
+
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
915
|
+
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
916
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
917
|
+
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
918
|
+
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
919
|
+
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
920
|
+
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
921
|
+
resize: vertical;
|
|
922
|
+
width: 100%;
|
|
923
|
+
}
|
|
924
|
+
.utrecht-html textarea:disabled {
|
|
925
|
+
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))));
|
|
926
|
+
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))));
|
|
927
|
+
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
928
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
929
|
+
}
|
|
930
|
+
.utrecht-html textarea:focus {
|
|
931
|
+
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))));
|
|
932
|
+
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))));
|
|
933
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
934
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
935
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
936
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
937
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
938
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
939
|
+
}
|
|
940
|
+
.utrecht-html textarea:focus:not(:focus-visible) {
|
|
941
|
+
/* undo focus ring */
|
|
942
|
+
box-shadow: none;
|
|
943
|
+
outline-style: none;
|
|
944
|
+
}
|
|
945
|
+
.utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
|
|
946
|
+
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))));
|
|
947
|
+
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))));
|
|
948
|
+
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))));
|
|
949
|
+
}
|
|
950
|
+
.utrecht-html textarea:read-only {
|
|
951
|
+
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))));
|
|
952
|
+
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
953
|
+
}
|
|
954
|
+
.utrecht-html textarea::placeholder {
|
|
955
|
+
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
956
|
+
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
957
|
+
opacity: 100%;
|
|
958
|
+
}
|
|
959
|
+
.utrecht-html input:not([type]),
|
|
960
|
+
.utrecht-html input[type=date i],
|
|
961
|
+
.utrecht-html input[type=datetime-local i],
|
|
962
|
+
.utrecht-html input[type=email i],
|
|
963
|
+
.utrecht-html input[type=month i],
|
|
964
|
+
.utrecht-html input[type=number i],
|
|
965
|
+
.utrecht-html input[type=password i],
|
|
966
|
+
.utrecht-html input[type=search i],
|
|
967
|
+
.utrecht-html input[type=tel i],
|
|
968
|
+
.utrecht-html input[type=text i],
|
|
969
|
+
.utrecht-html input[type=time i],
|
|
970
|
+
.utrecht-html input[type=url i],
|
|
971
|
+
.utrecht-html input[type=week i] {
|
|
972
|
+
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
|
|
973
|
+
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
|
|
974
|
+
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
|
|
975
|
+
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
|
|
976
|
+
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
977
|
+
border-style: solid;
|
|
978
|
+
box-sizing: border-box;
|
|
979
|
+
color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
|
|
980
|
+
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
|
|
981
|
+
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
982
|
+
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
983
|
+
padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
984
|
+
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
985
|
+
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
986
|
+
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
987
|
+
width: 100%;
|
|
988
|
+
}
|
|
989
|
+
.utrecht-html input:not([type]):disabled,
|
|
990
|
+
.utrecht-html input[type=date i]:disabled,
|
|
991
|
+
.utrecht-html input[type=datetime-local i]:disabled,
|
|
992
|
+
.utrecht-html input[type=email i]:disabled,
|
|
993
|
+
.utrecht-html input[type=month i]:disabled,
|
|
994
|
+
.utrecht-html input[type=number i]:disabled,
|
|
995
|
+
.utrecht-html input[type=password i]:disabled,
|
|
996
|
+
.utrecht-html input[type=search i]:disabled,
|
|
997
|
+
.utrecht-html input[type=tel i]:disabled,
|
|
998
|
+
.utrecht-html input[type=text i]:disabled,
|
|
999
|
+
.utrecht-html input[type=time i]:disabled,
|
|
1000
|
+
.utrecht-html input[type=url i]:disabled,
|
|
1001
|
+
.utrecht-html input[type=week i]:disabled {
|
|
1002
|
+
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))));
|
|
1003
|
+
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))));
|
|
1004
|
+
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1005
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1006
|
+
}
|
|
1007
|
+
.utrecht-html input:not([type]):focus,
|
|
1008
|
+
.utrecht-html input[type=date i]:focus,
|
|
1009
|
+
.utrecht-html input[type=datetime-local i]:focus,
|
|
1010
|
+
.utrecht-html input[type=email i]:focus,
|
|
1011
|
+
.utrecht-html input[type=month i]:focus,
|
|
1012
|
+
.utrecht-html input[type=number i]:focus,
|
|
1013
|
+
.utrecht-html input[type=password i]:focus,
|
|
1014
|
+
.utrecht-html input[type=search i]:focus,
|
|
1015
|
+
.utrecht-html input[type=tel i]:focus,
|
|
1016
|
+
.utrecht-html input[type=text i]:focus,
|
|
1017
|
+
.utrecht-html input[type=time i]:focus,
|
|
1018
|
+
.utrecht-html input[type=url i]:focus,
|
|
1019
|
+
.utrecht-html input[type=week i]:focus {
|
|
1020
|
+
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))));
|
|
1021
|
+
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))));
|
|
1022
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1023
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1024
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1025
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1026
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1027
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1028
|
+
}
|
|
1029
|
+
.utrecht-html input:not([type]):focus:not(:focus-visible),
|
|
1030
|
+
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
1031
|
+
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
1032
|
+
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
1033
|
+
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
1034
|
+
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
1035
|
+
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
1036
|
+
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
1037
|
+
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
1038
|
+
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
1039
|
+
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
1040
|
+
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
1041
|
+
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
1042
|
+
/* undo focus ring */
|
|
1043
|
+
box-shadow: none;
|
|
1044
|
+
outline-style: none;
|
|
1045
|
+
}
|
|
1046
|
+
.utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
|
|
1047
|
+
.utrecht-html input[type=date i]:invalid,
|
|
1048
|
+
.utrecht-html input[type=date i][aria-invalid=true],
|
|
1049
|
+
.utrecht-html input[type=datetime-local i]:invalid,
|
|
1050
|
+
.utrecht-html input[type=datetime-local i][aria-invalid=true],
|
|
1051
|
+
.utrecht-html input[type=email i]:invalid,
|
|
1052
|
+
.utrecht-html input[type=email i][aria-invalid=true],
|
|
1053
|
+
.utrecht-html input[type=month i]:invalid,
|
|
1054
|
+
.utrecht-html input[type=month i][aria-invalid=true],
|
|
1055
|
+
.utrecht-html input[type=number i]:invalid,
|
|
1056
|
+
.utrecht-html input[type=number i][aria-invalid=true],
|
|
1057
|
+
.utrecht-html input[type=password i]:invalid,
|
|
1058
|
+
.utrecht-html input[type=password i][aria-invalid=true],
|
|
1059
|
+
.utrecht-html input[type=search i]:invalid,
|
|
1060
|
+
.utrecht-html input[type=search i][aria-invalid=true],
|
|
1061
|
+
.utrecht-html input[type=tel i]:invalid,
|
|
1062
|
+
.utrecht-html input[type=tel i][aria-invalid=true],
|
|
1063
|
+
.utrecht-html input[type=text i]:invalid,
|
|
1064
|
+
.utrecht-html input[type=text i][aria-invalid=true],
|
|
1065
|
+
.utrecht-html input[type=time i]:invalid,
|
|
1066
|
+
.utrecht-html input[type=time i][aria-invalid=true],
|
|
1067
|
+
.utrecht-html input[type=url i]:invalid,
|
|
1068
|
+
.utrecht-html input[type=url i][aria-invalid=true],
|
|
1069
|
+
.utrecht-html input[type=week i]:invalid,
|
|
1070
|
+
.utrecht-html input[type=week i][aria-invalid=true] {
|
|
1071
|
+
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))));
|
|
1072
|
+
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))));
|
|
1073
|
+
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))));
|
|
1074
|
+
}
|
|
1075
|
+
.utrecht-html input:not([type]):read-only,
|
|
1076
|
+
.utrecht-html input[type=date i]:read-only,
|
|
1077
|
+
.utrecht-html input[type=datetime-local i]:read-only,
|
|
1078
|
+
.utrecht-html input[type=email i]:read-only,
|
|
1079
|
+
.utrecht-html input[type=month i]:read-only,
|
|
1080
|
+
.utrecht-html input[type=number i]:read-only,
|
|
1081
|
+
.utrecht-html input[type=password i]:read-only,
|
|
1082
|
+
.utrecht-html input[type=search i]:read-only,
|
|
1083
|
+
.utrecht-html input[type=tel i]:read-only,
|
|
1084
|
+
.utrecht-html input[type=text i]:read-only,
|
|
1085
|
+
.utrecht-html input[type=time i]:read-only,
|
|
1086
|
+
.utrecht-html input[type=url i]:read-only,
|
|
1087
|
+
.utrecht-html input[type=week i]:read-only {
|
|
1088
|
+
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))));
|
|
1089
|
+
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1090
|
+
}
|
|
1091
|
+
.utrecht-html input:not([type])::placeholder,
|
|
1092
|
+
.utrecht-html input[type=date i]::placeholder,
|
|
1093
|
+
.utrecht-html input[type=datetime-local i]::placeholder,
|
|
1094
|
+
.utrecht-html input[type=email i]::placeholder,
|
|
1095
|
+
.utrecht-html input[type=month i]::placeholder,
|
|
1096
|
+
.utrecht-html input[type=number i]::placeholder,
|
|
1097
|
+
.utrecht-html input[type=password i]::placeholder,
|
|
1098
|
+
.utrecht-html input[type=search i]::placeholder,
|
|
1099
|
+
.utrecht-html input[type=tel i]::placeholder,
|
|
1100
|
+
.utrecht-html input[type=text i]::placeholder,
|
|
1101
|
+
.utrecht-html input[type=time i]::placeholder,
|
|
1102
|
+
.utrecht-html input[type=url i]::placeholder,
|
|
1103
|
+
.utrecht-html input[type=week i]::placeholder {
|
|
1104
|
+
color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1105
|
+
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
1106
|
+
opacity: 100%;
|
|
1107
|
+
}
|
|
1108
|
+
.utrecht-html input[autocomplete~=current-password i],
|
|
1109
|
+
.utrecht-html input[autocomplete~=new-password i] {
|
|
1110
|
+
font-variant-ligatures: none;
|
|
1111
|
+
font-variant-numeric: slashed-zero;
|
|
1112
|
+
}
|
|
1113
|
+
.utrecht-html input[type=url i] {
|
|
1114
|
+
font-variant-ligatures: none;
|
|
1115
|
+
}
|
|
1116
|
+
.utrecht-html input[autocomplete~=bday i],
|
|
1117
|
+
.utrecht-html input[autocomplete~=bday-day i],
|
|
1118
|
+
.utrecht-html input[autocomplete~=bday-month i],
|
|
1119
|
+
.utrecht-html input[autocomplete~=bday-year i],
|
|
1120
|
+
.utrecht-html input[autocomplete~=cc-csc i],
|
|
1121
|
+
.utrecht-html input[autocomplete~=cc-exp i],
|
|
1122
|
+
.utrecht-html input[autocomplete~=cc-exp-month i],
|
|
1123
|
+
.utrecht-html input[autocomplete~=cc-exp-year i],
|
|
1124
|
+
.utrecht-html input[autocomplete~=cc-number i],
|
|
1125
|
+
.utrecht-html input[autocomplete~=one-time-code i],
|
|
1126
|
+
.utrecht-html input[autocomplete~=postal-code i],
|
|
1127
|
+
.utrecht-html input[autocomplete~=tel i],
|
|
1128
|
+
.utrecht-html input[autocomplete~=tel-area-code i],
|
|
1129
|
+
.utrecht-html input[autocomplete~=tel-country-code i],
|
|
1130
|
+
.utrecht-html input[autocomplete~=tel-extension i],
|
|
1131
|
+
.utrecht-html input[autocomplete~=tel-local i],
|
|
1132
|
+
.utrecht-html input[autocomplete~=tel-national i],
|
|
1133
|
+
.utrecht-html input[autocomplete~=transaction-amount i],
|
|
1134
|
+
.utrecht-html input[inputmode=decimal i],
|
|
1135
|
+
.utrecht-html input[inputmode=numeric i],
|
|
1136
|
+
.utrecht-html input[type=number i] {
|
|
1137
|
+
-moz-appearance: textfield;
|
|
1138
|
+
/* avoid spinner input in Firefox */
|
|
1139
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
1140
|
+
}
|
|
1141
|
+
.utrecht-html ul {
|
|
466
1142
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
467
1143
|
font-size: var(--utrecht-document-font-size, inherit);
|
|
468
1144
|
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
1145
|
margin-block-end: 0;
|
|
1146
|
+
margin-block-start: 0;
|
|
1147
|
+
padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
|
|
1148
|
+
margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
|
|
1149
|
+
margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
|
|
480
1150
|
}
|
|
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);
|
|
1151
|
+
.utrecht-html ul > li {
|
|
485
1152
|
margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
|
|
1153
|
+
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
1154
|
+
padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
|
|
486
1155
|
}
|
|
487
|
-
|
|
488
|
-
.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
|
|
489
|
-
.utrecht-unordered-list__marker {
|
|
1156
|
+
.utrecht-html ul > li::marker {
|
|
490
1157
|
color: var(--utrecht-unordered-list-marker-color);
|
|
491
1158
|
content: "●";
|
|
492
1159
|
}
|