@utrecht/component-library-css 1.0.0-alpha.218 → 1.0.0-alpha.220
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/dist/html.css +504 -2097
- package/dist/index.css +700 -288
- package/package.json +3 -3
- package/src/html.scss +1 -25
package/dist/html.css
CHANGED
|
@@ -8,62 +8,346 @@
|
|
|
8
8
|
* @license EUPL-1.2
|
|
9
9
|
* Copyright (c) 2021 Robbert Broersma
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
/* Collection of all semantic HTML styles in the component library */
|
|
12
|
+
/* stylelint-disable no-invalid-position-at-import-rule */
|
|
13
|
+
.utrecht-html {
|
|
14
|
+
/**
|
|
15
|
+
* @license EUPL-1.2
|
|
16
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
17
|
+
*/
|
|
18
|
+
/**
|
|
19
|
+
* @license EUPL-1.2
|
|
20
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
21
|
+
*/
|
|
22
|
+
/**
|
|
23
|
+
* @license EUPL-1.2
|
|
24
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
25
|
+
*/
|
|
26
|
+
/**
|
|
27
|
+
* @license EUPL-1.2
|
|
28
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
29
|
+
*/
|
|
30
|
+
/**
|
|
31
|
+
* @license EUPL-1.2
|
|
32
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
33
|
+
*/
|
|
34
|
+
/**
|
|
35
|
+
* @license EUPL-1.2
|
|
36
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
37
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
38
|
+
*/
|
|
39
|
+
/**
|
|
40
|
+
* @license EUPL-1.2
|
|
41
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
42
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
43
|
+
*/
|
|
44
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
45
|
+
/* override the `:focus` selector above */
|
|
46
|
+
/* stylelint-disable-next-line no-descending-specificity */
|
|
47
|
+
/**
|
|
48
|
+
* @license EUPL-1.2
|
|
49
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
50
|
+
*/
|
|
51
|
+
/**
|
|
52
|
+
* @license EUPL-1.2
|
|
53
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
54
|
+
*/
|
|
55
|
+
/**
|
|
56
|
+
* @license EUPL-1.2
|
|
57
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
58
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
59
|
+
*/
|
|
60
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
61
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
62
|
+
/**
|
|
63
|
+
* @license EUPL-1.2
|
|
64
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
65
|
+
*/
|
|
66
|
+
/**
|
|
67
|
+
* @license EUPL-1.2
|
|
68
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
69
|
+
*/
|
|
70
|
+
/**
|
|
71
|
+
* @license EUPL-1.2
|
|
72
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
73
|
+
*/
|
|
74
|
+
/**
|
|
75
|
+
* @license EUPL-1.2
|
|
76
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
77
|
+
*/
|
|
78
|
+
/**
|
|
79
|
+
* @license EUPL-1.2
|
|
80
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
81
|
+
*/
|
|
82
|
+
/**
|
|
83
|
+
* @license EUPL-1.2
|
|
84
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
85
|
+
*/
|
|
86
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
87
|
+
/**
|
|
88
|
+
* @license EUPL-1.2
|
|
89
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
90
|
+
*/
|
|
91
|
+
/**
|
|
92
|
+
* @license EUPL-1.2
|
|
93
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
94
|
+
*/
|
|
95
|
+
/**
|
|
96
|
+
* @license EUPL-1.2
|
|
97
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
98
|
+
*/
|
|
99
|
+
/**
|
|
100
|
+
* @license EUPL-1.2
|
|
101
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
102
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
103
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
104
|
+
*/
|
|
105
|
+
/**
|
|
106
|
+
* @license EUPL-1.2
|
|
107
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
108
|
+
*/
|
|
109
|
+
/**
|
|
110
|
+
* @license EUPL-1.2
|
|
111
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
112
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
113
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
114
|
+
*/
|
|
115
|
+
/**
|
|
116
|
+
* @license EUPL-1.2
|
|
117
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
118
|
+
*/
|
|
119
|
+
/**
|
|
120
|
+
* @license EUPL-1.2
|
|
121
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
122
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
123
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
124
|
+
*/
|
|
125
|
+
/**
|
|
126
|
+
* @license EUPL-1.2
|
|
127
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
128
|
+
*/
|
|
129
|
+
/**
|
|
130
|
+
* @license EUPL-1.2
|
|
131
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
132
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
133
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
134
|
+
*/
|
|
135
|
+
/**
|
|
136
|
+
* @license EUPL-1.2
|
|
137
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
138
|
+
*/
|
|
139
|
+
/**
|
|
140
|
+
* @license EUPL-1.2
|
|
141
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
142
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
143
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
144
|
+
*/
|
|
145
|
+
/**
|
|
146
|
+
* @license EUPL-1.2
|
|
147
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
148
|
+
*/
|
|
149
|
+
/**
|
|
150
|
+
* @license EUPL-1.2
|
|
151
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
152
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
153
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
154
|
+
*/
|
|
155
|
+
/**
|
|
156
|
+
* @license EUPL-1.2
|
|
157
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
158
|
+
*/
|
|
159
|
+
/**
|
|
160
|
+
* @license EUPL-1.2
|
|
161
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
162
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
163
|
+
*/
|
|
164
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
165
|
+
/**
|
|
166
|
+
* @license EUPL-1.2
|
|
167
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
168
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
169
|
+
*/
|
|
170
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
171
|
+
/*
|
|
172
|
+
|
|
173
|
+
# CSS implementation
|
|
174
|
+
|
|
175
|
+
## `text-decoration-skip`
|
|
176
|
+
|
|
177
|
+
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
178
|
+
For example by obscuring Arabic diacritics.
|
|
179
|
+
|
|
180
|
+
However, the combination of a greater thickness and skipping this thick underline
|
|
181
|
+
leads to a very unappealing rendering of the underline. To avoid this,
|
|
182
|
+
`text-decoration-skip` is disabled for interactive states.
|
|
183
|
+
|
|
184
|
+
For design token configurations that have identical thickness for normal and interactive
|
|
185
|
+
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
186
|
+
from an interrupted to an uninterrupted underline (for some texts).
|
|
187
|
+
|
|
188
|
+
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
193
|
+
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
194
|
+
not make this too inconvenient.
|
|
195
|
+
|
|
196
|
+
---
|
|
197
|
+
|
|
198
|
+
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
199
|
+
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
200
|
+
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
201
|
+
|
|
202
|
+
## `text-decoration-thickness`
|
|
203
|
+
|
|
204
|
+
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
205
|
+
|
|
206
|
+
---
|
|
207
|
+
|
|
208
|
+
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
209
|
+
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
210
|
+
the underline offset also seems to increase along with the thickness, which effectively means
|
|
211
|
+
the underline is closer to the next line than in Safari.
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
216
|
+
use the `max()` function to ensure the underline remains visible for every font size.
|
|
217
|
+
|
|
218
|
+
## `transition`
|
|
219
|
+
|
|
220
|
+
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
221
|
+
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
222
|
+
|
|
223
|
+
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
224
|
+
|
|
225
|
+
*/
|
|
226
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
227
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
228
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
229
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
230
|
+
/**
|
|
231
|
+
* @license EUPL-1.2
|
|
232
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
233
|
+
*/
|
|
234
|
+
/**
|
|
235
|
+
* @license EUPL-1.2
|
|
236
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
237
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
238
|
+
*/
|
|
239
|
+
/**
|
|
240
|
+
* @license EUPL-1.2
|
|
241
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
242
|
+
*/
|
|
243
|
+
/**
|
|
244
|
+
* @license EUPL-1.2
|
|
245
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
246
|
+
*/
|
|
247
|
+
/* stylelint-disable selector-class-pattern */
|
|
248
|
+
/**
|
|
249
|
+
* @license EUPL-1.2
|
|
250
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
251
|
+
*/
|
|
252
|
+
/**
|
|
253
|
+
* @license EUPL-1.2
|
|
254
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
255
|
+
*/
|
|
256
|
+
/**
|
|
257
|
+
* @license EUPL-1.2
|
|
258
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
259
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
260
|
+
*/
|
|
261
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
262
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
263
|
+
/**
|
|
264
|
+
* @license EUPL-1.2
|
|
265
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
266
|
+
*/
|
|
267
|
+
/**
|
|
268
|
+
* @license EUPL-1.2
|
|
269
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
270
|
+
*/
|
|
271
|
+
/**
|
|
272
|
+
* @license EUPL-1.2
|
|
273
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
274
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
275
|
+
*/
|
|
276
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
277
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
278
|
+
/**
|
|
279
|
+
* @license EUPL-1.2
|
|
280
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
281
|
+
*/
|
|
282
|
+
/**
|
|
283
|
+
* @license EUPL-1.2
|
|
284
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
285
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
286
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
287
|
+
*/
|
|
288
|
+
/**
|
|
289
|
+
* @license EUPL-1.2
|
|
290
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
291
|
+
*/
|
|
292
|
+
/**
|
|
293
|
+
* @license EUPL-1.2
|
|
294
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
295
|
+
*/
|
|
296
|
+
/* stylelint-disable selector-class-pattern */
|
|
297
|
+
/**
|
|
298
|
+
* @license EUPL-1.2
|
|
299
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
300
|
+
*/
|
|
301
|
+
/**
|
|
302
|
+
* @license EUPL-1.2
|
|
303
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
304
|
+
*/
|
|
305
|
+
/**
|
|
306
|
+
* @license EUPL-1.2
|
|
307
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
308
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
309
|
+
*/
|
|
310
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
311
|
+
/**
|
|
312
|
+
* @license EUPL-1.2
|
|
313
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
314
|
+
*/
|
|
315
|
+
/**
|
|
316
|
+
* @license EUPL-1.2
|
|
317
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
318
|
+
*/
|
|
319
|
+
/**
|
|
320
|
+
* @license EUPL-1.2
|
|
321
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
322
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
323
|
+
*/
|
|
324
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
325
|
+
/**
|
|
326
|
+
* @license EUPL-1.2
|
|
327
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
328
|
+
*/
|
|
329
|
+
/**
|
|
330
|
+
* @license EUPL-1.2
|
|
331
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
332
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
333
|
+
*/
|
|
334
|
+
}
|
|
335
|
+
.utrecht-html article {
|
|
16
336
|
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
17
337
|
}
|
|
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 {
|
|
338
|
+
.utrecht-html blockquote {
|
|
28
339
|
font-family: var(--utrecht-document-font-family);
|
|
29
340
|
font-size: var(--utrecht-blockquote-font-size);
|
|
30
341
|
margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
|
|
31
342
|
margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.utrecht-blockquote__attribution {
|
|
35
|
-
color: var(--utrecht-blockquote-attribution-color, inherit);
|
|
36
|
-
font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.utrecht-blockquote__content, .utrecht-html blockquote {
|
|
40
343
|
--utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
|
|
41
344
|
--utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
42
345
|
color: var(--utrecht-blockquote-content-color, inherit);
|
|
43
346
|
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.utrecht-blockquote--distanced, .utrecht-html blockquote {
|
|
47
347
|
margin-block-end: var(--utrecht-blockquote-margin-block-end);
|
|
48
348
|
margin-block-start: var(--utrecht-blockquote-margin-block-start);
|
|
49
349
|
}
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* @license EUPL-1.2
|
|
53
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
54
|
-
*/
|
|
55
|
-
/**
|
|
56
|
-
* @license EUPL-1.2
|
|
57
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
58
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
59
|
-
*/
|
|
60
|
-
/**
|
|
61
|
-
* @license EUPL-1.2
|
|
62
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
63
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
64
|
-
*/
|
|
65
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
66
|
-
.utrecht-button, .utrecht-html input[type=button i],
|
|
350
|
+
.utrecht-html input[type=button i],
|
|
67
351
|
.utrecht-html input[type=reset i],
|
|
68
352
|
.utrecht-html input[type=submit i],
|
|
69
353
|
.utrecht-html button {
|
|
@@ -89,238 +373,74 @@
|
|
|
89
373
|
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
90
374
|
text-transform: var(--utrecht-button-text-transform);
|
|
91
375
|
user-select: none;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.utrecht-button--distanced, .utrecht-html input[type=button i],
|
|
95
|
-
.utrecht-html input[type=reset i],
|
|
96
|
-
.utrecht-html input[type=submit i],
|
|
97
|
-
.utrecht-html button {
|
|
98
376
|
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
99
377
|
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
100
378
|
margin-inline-end: var(--utrecht-button-margin-inline-end);
|
|
101
379
|
margin-inline-start: var(--utrecht-button-margin-inline-start);
|
|
102
380
|
}
|
|
103
|
-
|
|
104
|
-
.utrecht-button--submit, .utrecht-html button[type=submit i],
|
|
381
|
+
.utrecht-html button[type=submit i],
|
|
105
382
|
.utrecht-html input[type=submit i] {
|
|
106
|
-
/* lower priority specificty than busy and disabled cursor */
|
|
107
383
|
cursor: var(--utrecht-action-submit-cursor);
|
|
108
384
|
}
|
|
109
|
-
|
|
110
|
-
.utrecht-button--busy, .utrecht-html button[aria-busy=true],
|
|
111
|
-
.utrecht-html button[aria-disabled=true][aria-busy=true],
|
|
112
|
-
.utrecht-html button:disabled[aria-busy=true] {
|
|
113
|
-
cursor: var(--utrecht-action-busy-cursor);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.utrecht-button:disabled, .utrecht-html input[type=button i]:disabled,
|
|
117
|
-
.utrecht-html input[type=reset i]:disabled,
|
|
118
|
-
.utrecht-html input[type=submit i]:disabled,
|
|
119
385
|
.utrecht-html button:disabled,
|
|
120
|
-
.utrecht-button--disabled,
|
|
121
386
|
.utrecht-html button[aria-disabled=true] {
|
|
122
387
|
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
123
388
|
border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
|
|
124
389
|
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
125
390
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
126
391
|
}
|
|
127
|
-
|
|
128
|
-
.utrecht-button
|
|
129
|
-
.utrecht-html
|
|
130
|
-
|
|
131
|
-
|
|
392
|
+
.utrecht-html button[aria-busy=true],
|
|
393
|
+
.utrecht-html button[aria-disabled=true][aria-busy=true],
|
|
394
|
+
.utrecht-html button:disabled[aria-busy=true] {
|
|
395
|
+
cursor: var(--utrecht-action-busy-cursor);
|
|
396
|
+
}
|
|
132
397
|
.utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
|
|
133
398
|
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
134
399
|
border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
|
|
135
400
|
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
136
401
|
}
|
|
137
|
-
|
|
138
|
-
.utrecht-button--focus-visible, .utrecht-html button:focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
139
|
-
.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
140
|
-
.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
141
|
-
.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
142
|
-
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
143
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
144
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
145
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
146
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
147
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.utrecht-button--focus, .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled), .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
151
|
-
.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
152
|
-
.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
153
|
-
.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
154
|
-
background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
|
|
155
|
-
border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
|
|
156
|
-
color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
/* override the `:focus` selector above */
|
|
160
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
161
|
-
.utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
|
|
162
|
-
.utrecht-html input[type=reset i]:focus:not(:focus-visible),
|
|
163
|
-
.utrecht-html input[type=submit i]:focus:not(:focus-visible),
|
|
164
|
-
.utrecht-html button:focus:not(:focus-visible) {
|
|
165
|
-
/* undo focus ring */
|
|
166
|
-
box-shadow: none;
|
|
167
|
-
outline-style: none;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
|
|
171
|
-
.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
172
|
-
.utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
173
|
-
.utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
174
|
-
.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
402
|
+
.utrecht-html button:hover:not([aria-disabled=true]):not(:disabled) {
|
|
175
403
|
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
176
404
|
border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
|
|
177
405
|
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
178
406
|
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
179
407
|
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
|
|
185
|
-
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.utrecht-button--primary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--primary-action:not(:disabled):hover:not([aria-disabled=true]),
|
|
189
|
-
.utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
190
|
-
.utrecht-html input.utrecht-button--primary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
191
|
-
.utrecht-html input.utrecht-button--primary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
192
|
-
.utrecht-html input.utrecht-button--primary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
193
|
-
background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
194
|
-
border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
195
|
-
color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.utrecht-button--primary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--primary-action[type=button i]:disabled,
|
|
199
|
-
.utrecht-html input.utrecht-button--primary-action[type=reset i]:disabled,
|
|
200
|
-
.utrecht-html input.utrecht-button--primary-action[type=submit i]:disabled,
|
|
201
|
-
.utrecht-html button.utrecht-button--primary-action:disabled,
|
|
202
|
-
.utrecht-button--primary-action.utrecht-button--disabled,
|
|
203
|
-
.utrecht-html button.utrecht-button--primary-action[aria-disabled=true] {
|
|
204
|
-
background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
205
|
-
border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
206
|
-
color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.utrecht-button--secondary-action {
|
|
210
|
-
background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
|
|
211
|
-
border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
|
|
212
|
-
border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
|
|
213
|
-
color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
.utrecht-button--secondary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--secondary-action:not(:disabled):hover:not([aria-disabled=true]),
|
|
217
|
-
.utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
218
|
-
.utrecht-html input.utrecht-button--secondary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
219
|
-
.utrecht-html input.utrecht-button--secondary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
220
|
-
.utrecht-html input.utrecht-button--secondary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
221
|
-
background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
222
|
-
border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
223
|
-
color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.utrecht-button--secondary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--secondary-action[type=button i]:disabled,
|
|
227
|
-
.utrecht-html input.utrecht-button--secondary-action[type=reset i]:disabled,
|
|
228
|
-
.utrecht-html input.utrecht-button--secondary-action[type=submit i]:disabled,
|
|
229
|
-
.utrecht-html button.utrecht-button--secondary-action:disabled,
|
|
230
|
-
.utrecht-button--secondary-action.utrecht-button--disabled,
|
|
231
|
-
.utrecht-html button.utrecht-button--secondary-action[aria-disabled=true] {
|
|
232
|
-
background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
233
|
-
border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
234
|
-
color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.utrecht-button--subtle {
|
|
238
|
-
background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
|
|
239
|
-
border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
|
|
240
|
-
border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
|
|
241
|
-
color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
.utrecht-button--subtle.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--subtle:not(:disabled):hover:not([aria-disabled=true]),
|
|
245
|
-
.utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
246
|
-
.utrecht-html input.utrecht-button--subtle[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
247
|
-
.utrecht-html input.utrecht-button--subtle[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
248
|
-
.utrecht-html input.utrecht-button--subtle[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
249
|
-
background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
250
|
-
border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
251
|
-
color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
408
|
+
.utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
|
|
409
|
+
background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
|
|
410
|
+
border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
|
|
411
|
+
color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
|
|
252
412
|
}
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
261
|
-
border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
262
|
-
color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
413
|
+
.utrecht-html button:focus-visible {
|
|
414
|
+
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
415
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
416
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
417
|
+
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
418
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
419
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
263
420
|
}
|
|
264
|
-
|
|
265
|
-
/* override the `:focus` selector above */
|
|
266
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
267
|
-
/**
|
|
268
|
-
* @license EUPL-1.2
|
|
269
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
270
|
-
*/
|
|
271
|
-
/**
|
|
272
|
-
* @license EUPL-1.2
|
|
273
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
274
|
-
*/
|
|
275
|
-
/**
|
|
276
|
-
* @license EUPL-1.2
|
|
277
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
278
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
279
|
-
*/
|
|
280
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
281
|
-
.utrecht-checkbox, .utrecht-html input[type=checkbox i] {
|
|
421
|
+
.utrecht-html input[type=checkbox i] {
|
|
282
422
|
margin-block-end: 0;
|
|
283
423
|
/* reset native margin for input[type="checkbox"] */
|
|
284
424
|
margin-block-start: 0;
|
|
285
425
|
margin-inline-end: 0;
|
|
286
426
|
margin-inline-start: 0;
|
|
287
427
|
}
|
|
288
|
-
|
|
289
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
290
|
-
.utrecht-checkbox--disabled, .utrecht-checkbox--html-input:disabled, .utrecht-html input[type=checkbox i]:disabled {
|
|
428
|
+
.utrecht-html input[type=checkbox i]:disabled {
|
|
291
429
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
292
430
|
}
|
|
293
|
-
|
|
294
|
-
.utrecht-checkbox--focus-visible {
|
|
295
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
296
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
297
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
298
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
299
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
.utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
|
|
431
|
+
.utrecht-html input[type=checkbox i]:focus {
|
|
303
432
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
304
433
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
305
434
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
306
435
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
307
436
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
308
437
|
}
|
|
309
|
-
.utrecht-
|
|
438
|
+
.utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
|
|
310
439
|
/* undo focus ring */
|
|
311
440
|
box-shadow: none;
|
|
312
441
|
outline-style: none;
|
|
313
442
|
}
|
|
314
|
-
|
|
315
|
-
/**
|
|
316
|
-
* @license EUPL-1.2
|
|
317
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
318
|
-
*/
|
|
319
|
-
/**
|
|
320
|
-
* @license EUPL-1.2
|
|
321
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
322
|
-
*/
|
|
323
|
-
.utrecht-document, .utrecht-html body {
|
|
443
|
+
.utrecht-html body {
|
|
324
444
|
/* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
|
|
325
445
|
color: var(--utrecht-document-color, inherit);
|
|
326
446
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
@@ -328,42 +448,19 @@
|
|
|
328
448
|
font-weight: var(--utrecht-document-font-weight, inherit);
|
|
329
449
|
line-height: var(--utrecht-document-line-height, inherit);
|
|
330
450
|
text-rendering: optimizeLegibility;
|
|
451
|
+
background-color: var(--utrecht-document-background-color, inherit);
|
|
331
452
|
}
|
|
332
|
-
.utrecht-
|
|
453
|
+
.utrecht-html body :lang(ar) {
|
|
333
454
|
/* `letter-spacing` design tokens break Arabic text rendering, avoid that */
|
|
334
455
|
letter-spacing: 0 !important;
|
|
335
456
|
}
|
|
336
|
-
|
|
337
|
-
.utrecht-document--surface, .utrecht-html body {
|
|
338
|
-
background-color: var(--utrecht-document-background-color, inherit);
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
/**
|
|
342
|
-
* @license EUPL-1.2
|
|
343
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
344
|
-
*/
|
|
345
|
-
/**
|
|
346
|
-
* @license EUPL-1.2
|
|
347
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
348
|
-
*/
|
|
349
|
-
.utrecht-emphasis--stressed, .utrecht-html em {
|
|
457
|
+
.utrecht-html em {
|
|
350
458
|
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
351
459
|
}
|
|
352
|
-
|
|
353
|
-
.utrecht-emphasis--strong, .utrecht-html strong {
|
|
460
|
+
.utrecht-html strong {
|
|
354
461
|
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
355
462
|
}
|
|
356
|
-
|
|
357
|
-
/**
|
|
358
|
-
* @license EUPL-1.2
|
|
359
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
360
|
-
*/
|
|
361
|
-
/**
|
|
362
|
-
* @license EUPL-1.2
|
|
363
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
364
|
-
*/
|
|
365
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
366
|
-
.utrecht-form-fieldset--reset-fieldset, .utrecht-html fieldset {
|
|
463
|
+
.utrecht-html fieldset {
|
|
367
464
|
border: 0;
|
|
368
465
|
margin-inline-end: 0;
|
|
369
466
|
margin-inline-start: 0;
|
|
@@ -372,76 +469,35 @@
|
|
|
372
469
|
padding-block-start: 0.01em;
|
|
373
470
|
padding-inline-end: 0;
|
|
374
471
|
padding-inline-start: 0;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
.utrecht-form-fieldset__legend--reset-legend, .utrecht-html legend {
|
|
378
|
-
padding-inline-end: 0;
|
|
379
|
-
padding-inline-start: 0;
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
.utrecht-form-fieldset--distanced, .utrecht-html fieldset {
|
|
383
472
|
margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
|
|
384
473
|
margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
|
|
385
474
|
}
|
|
386
|
-
|
|
387
|
-
.utrecht-form-fieldset__legend, .utrecht-html legend {
|
|
475
|
+
.utrecht-html legend {
|
|
388
476
|
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
389
477
|
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
390
478
|
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
391
479
|
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
392
480
|
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
393
481
|
text-transform: var(--utrecht-form-fieldset-legend-text-transform);
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
.utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
|
|
482
|
+
padding-inline-end: 0;
|
|
483
|
+
padding-inline-start: 0;
|
|
397
484
|
margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
|
|
398
485
|
margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
|
|
399
486
|
}
|
|
400
|
-
|
|
401
|
-
/**
|
|
402
|
-
* @license EUPL-1.2
|
|
403
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
404
|
-
*/
|
|
405
|
-
/**
|
|
406
|
-
* @license EUPL-1.2
|
|
407
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
408
|
-
*/
|
|
409
|
-
.utrecht-form-label, .utrecht-html label {
|
|
487
|
+
.utrecht-html label {
|
|
410
488
|
color: var(--utrecht-form-label-color);
|
|
411
489
|
font-size: var(--utrecht-form-label-font-size);
|
|
412
490
|
font-weight: var(--utrecht-form-label-font-weight);
|
|
413
491
|
}
|
|
414
|
-
|
|
415
|
-
.utrecht-form-label--checkbox, .utrecht-html input[type=checkbox i] ~ label {
|
|
492
|
+
.utrecht-html input[type=checkbox i] ~ label {
|
|
416
493
|
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
417
494
|
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
418
495
|
}
|
|
419
|
-
|
|
420
|
-
.utrecht-form-label--checked {
|
|
421
|
-
font-weight: var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight));
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
.utrecht-form-label--disabled {
|
|
425
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
426
|
-
font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
.utrecht-form-label--radio, .utrecht-html input[type=radio i] ~ label {
|
|
496
|
+
.utrecht-html input[type=radio i] ~ label {
|
|
430
497
|
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
431
498
|
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
432
499
|
}
|
|
433
|
-
|
|
434
|
-
/**
|
|
435
|
-
* @license EUPL-1.2
|
|
436
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
437
|
-
*/
|
|
438
|
-
/**
|
|
439
|
-
* @license EUPL-1.2
|
|
440
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
441
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
442
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
443
|
-
*/
|
|
444
|
-
.utrecht-heading-1, .utrecht-html h1 {
|
|
500
|
+
.utrecht-html h1 {
|
|
445
501
|
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
446
502
|
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
447
503
|
font-size: var(--utrecht-heading-1-font-size);
|
|
@@ -451,24 +507,10 @@
|
|
|
451
507
|
margin-block-end: 0;
|
|
452
508
|
margin-block-start: 0;
|
|
453
509
|
text-transform: var(--utrecht-heading-1-text-transform, inherit);
|
|
454
|
-
}
|
|
455
|
-
|
|
456
|
-
.utrecht-heading-1--distanced, .utrecht-html h1 {
|
|
457
510
|
margin-block-end: var(--utrecht-heading-1-margin-block-end);
|
|
458
511
|
margin-block-start: var(--utrecht-heading-1-margin-block-start);
|
|
459
512
|
}
|
|
460
|
-
|
|
461
|
-
/**
|
|
462
|
-
* @license EUPL-1.2
|
|
463
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
464
|
-
*/
|
|
465
|
-
/**
|
|
466
|
-
* @license EUPL-1.2
|
|
467
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
468
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
469
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
470
|
-
*/
|
|
471
|
-
.utrecht-heading-2, .utrecht-html h2 {
|
|
513
|
+
.utrecht-html h2 {
|
|
472
514
|
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
473
515
|
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
474
516
|
font-size: var(--utrecht-heading-2-font-size);
|
|
@@ -478,24 +520,10 @@
|
|
|
478
520
|
margin-block-end: 0;
|
|
479
521
|
margin-block-start: 0;
|
|
480
522
|
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
.utrecht-heading-2--distanced, .utrecht-html h2 {
|
|
484
523
|
margin-block-end: var(--utrecht-heading-2-margin-block-end);
|
|
485
524
|
margin-block-start: var(--utrecht-heading-2-margin-block-start);
|
|
486
525
|
}
|
|
487
|
-
|
|
488
|
-
/**
|
|
489
|
-
* @license EUPL-1.2
|
|
490
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
491
|
-
*/
|
|
492
|
-
/**
|
|
493
|
-
* @license EUPL-1.2
|
|
494
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
495
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
496
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
497
|
-
*/
|
|
498
|
-
.utrecht-heading-3, .utrecht-html h3 {
|
|
526
|
+
.utrecht-html h3 {
|
|
499
527
|
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
500
528
|
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
501
529
|
font-size: var(--utrecht-heading-3-font-size);
|
|
@@ -505,24 +533,10 @@
|
|
|
505
533
|
margin-block-end: 0;
|
|
506
534
|
margin-block-start: 0;
|
|
507
535
|
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
.utrecht-heading-3--distanced, .utrecht-html h3 {
|
|
511
536
|
margin-block-end: var(--utrecht-heading-3-margin-block-end);
|
|
512
537
|
margin-block-start: var(--utrecht-heading-3-margin-block-start);
|
|
513
538
|
}
|
|
514
|
-
|
|
515
|
-
/**
|
|
516
|
-
* @license EUPL-1.2
|
|
517
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
518
|
-
*/
|
|
519
|
-
/**
|
|
520
|
-
* @license EUPL-1.2
|
|
521
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
522
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
523
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
524
|
-
*/
|
|
525
|
-
.utrecht-heading-4, .utrecht-html h4 {
|
|
539
|
+
.utrecht-html h4 {
|
|
526
540
|
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
527
541
|
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
528
542
|
font-size: var(--utrecht-heading-4-font-size);
|
|
@@ -532,24 +546,10 @@
|
|
|
532
546
|
margin-block-end: 0;
|
|
533
547
|
margin-block-start: 0;
|
|
534
548
|
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
.utrecht-heading-4--distanced, .utrecht-html h4 {
|
|
538
549
|
margin-block-end: var(--utrecht-heading-4-margin-block-end);
|
|
539
550
|
margin-block-start: var(--utrecht-heading-4-margin-block-start);
|
|
540
551
|
}
|
|
541
|
-
|
|
542
|
-
/**
|
|
543
|
-
* @license EUPL-1.2
|
|
544
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
545
|
-
*/
|
|
546
|
-
/**
|
|
547
|
-
* @license EUPL-1.2
|
|
548
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
549
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
550
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
551
|
-
*/
|
|
552
|
-
.utrecht-heading-5, .utrecht-html h5 {
|
|
552
|
+
.utrecht-html h5 {
|
|
553
553
|
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
554
554
|
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
555
555
|
font-size: var(--utrecht-heading-5-font-size);
|
|
@@ -559,24 +559,10 @@
|
|
|
559
559
|
margin-block-end: 0;
|
|
560
560
|
margin-block-start: 0;
|
|
561
561
|
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
.utrecht-heading-5--distanced, .utrecht-html h5 {
|
|
565
562
|
margin-block-end: var(--utrecht-heading-5-margin-block-end);
|
|
566
563
|
margin-block-start: var(--utrecht-heading-5-margin-block-start);
|
|
567
564
|
}
|
|
568
|
-
|
|
569
|
-
/**
|
|
570
|
-
* @license EUPL-1.2
|
|
571
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
572
|
-
*/
|
|
573
|
-
/**
|
|
574
|
-
* @license EUPL-1.2
|
|
575
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
576
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
577
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
578
|
-
*/
|
|
579
|
-
.utrecht-heading-6, .utrecht-html h6 {
|
|
565
|
+
.utrecht-html h6 {
|
|
580
566
|
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
581
567
|
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
582
568
|
font-size: var(--utrecht-heading-6-font-size);
|
|
@@ -586,1395 +572,19 @@
|
|
|
586
572
|
margin-block-end: 0;
|
|
587
573
|
margin-block-start: 0;
|
|
588
574
|
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
.utrecht-heading-6--distanced, .utrecht-html h6 {
|
|
592
575
|
margin-block-end: var(--utrecht-heading-6-margin-block-end);
|
|
593
576
|
margin-block-start: var(--utrecht-heading-6-margin-block-start);
|
|
594
577
|
}
|
|
595
|
-
|
|
596
|
-
/**
|
|
597
|
-
* @license EUPL-1.2
|
|
598
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
599
|
-
*/
|
|
600
|
-
/* Collection of all semantic HTML styles in the component library */
|
|
601
|
-
/**
|
|
602
|
-
* @license EUPL-1.2
|
|
603
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
604
|
-
*/
|
|
605
|
-
/**
|
|
606
|
-
* @license EUPL-1.2
|
|
607
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
608
|
-
*/
|
|
609
|
-
.utrecht-article, .utrecht-html article {
|
|
610
|
-
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
/**
|
|
614
|
-
* @license EUPL-1.2
|
|
615
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
616
|
-
*/
|
|
617
|
-
/**
|
|
618
|
-
* @license EUPL-1.2
|
|
619
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
620
|
-
*/
|
|
621
|
-
.utrecht-blockquote, .utrecht-html blockquote {
|
|
622
|
-
font-family: var(--utrecht-document-font-family);
|
|
623
|
-
font-size: var(--utrecht-blockquote-font-size);
|
|
624
|
-
margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
|
|
625
|
-
margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
|
|
626
|
-
}
|
|
627
|
-
|
|
628
|
-
.utrecht-blockquote__attribution {
|
|
629
|
-
color: var(--utrecht-blockquote-attribution-color, inherit);
|
|
630
|
-
font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
|
|
631
|
-
}
|
|
632
|
-
|
|
633
|
-
.utrecht-blockquote__content, .utrecht-html blockquote {
|
|
634
|
-
--utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
|
|
635
|
-
--utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
636
|
-
color: var(--utrecht-blockquote-content-color, inherit);
|
|
637
|
-
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
.utrecht-blockquote--distanced, .utrecht-html blockquote {
|
|
641
|
-
margin-block-end: var(--utrecht-blockquote-margin-block-end);
|
|
642
|
-
margin-block-start: var(--utrecht-blockquote-margin-block-start);
|
|
643
|
-
}
|
|
644
|
-
|
|
645
|
-
/**
|
|
646
|
-
* @license EUPL-1.2
|
|
647
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
648
|
-
*/
|
|
649
|
-
/**
|
|
650
|
-
* @license EUPL-1.2
|
|
651
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
652
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
653
|
-
*/
|
|
654
|
-
/**
|
|
655
|
-
* @license EUPL-1.2
|
|
656
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
657
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
658
|
-
*/
|
|
659
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
660
|
-
.utrecht-button, .utrecht-html input[type=button i],
|
|
661
|
-
.utrecht-html input[type=reset i],
|
|
662
|
-
.utrecht-html input[type=submit i],
|
|
663
|
-
.utrecht-html button {
|
|
664
|
-
background-color: var(--utrecht-button-background-color);
|
|
665
|
-
border-color: var(--utrecht-button-border-color, transparent);
|
|
666
|
-
border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
|
|
667
|
-
border-radius: var(--utrecht-button-border-radius);
|
|
668
|
-
border-style: solid;
|
|
669
|
-
border-width: var(--utrecht-button-border-width, 0);
|
|
670
|
-
border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
|
|
671
|
-
color: var(--utrecht-button-color);
|
|
672
|
-
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
673
|
-
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
674
|
-
font-weight: var(--utrecht-button-font-weight);
|
|
675
|
-
inline-size: var(--utrecht-button-inline-size, auto);
|
|
676
|
-
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
677
|
-
line-height: var(--utrecht-button-line-height);
|
|
678
|
-
min-block-size: var(--utrecht-button-min-block-size, 44px);
|
|
679
|
-
min-inline-size: var(--utrecht-button-min-inline-size, 44px);
|
|
680
|
-
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
681
|
-
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
682
|
-
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
683
|
-
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
684
|
-
text-transform: var(--utrecht-button-text-transform);
|
|
685
|
-
user-select: none;
|
|
686
|
-
}
|
|
687
|
-
|
|
688
|
-
.utrecht-button--distanced, .utrecht-html input[type=button i],
|
|
689
|
-
.utrecht-html input[type=reset i],
|
|
690
|
-
.utrecht-html input[type=submit i],
|
|
691
|
-
.utrecht-html button {
|
|
692
|
-
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
693
|
-
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
694
|
-
margin-inline-end: var(--utrecht-button-margin-inline-end);
|
|
695
|
-
margin-inline-start: var(--utrecht-button-margin-inline-start);
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
.utrecht-button--submit, .utrecht-html button[type=submit i],
|
|
699
|
-
.utrecht-html input[type=submit i] {
|
|
700
|
-
/* lower priority specificty than busy and disabled cursor */
|
|
701
|
-
cursor: var(--utrecht-action-submit-cursor);
|
|
702
|
-
}
|
|
703
|
-
|
|
704
|
-
.utrecht-button--busy, .utrecht-html button[aria-busy=true],
|
|
705
|
-
.utrecht-html button[aria-disabled=true][aria-busy=true],
|
|
706
|
-
.utrecht-html button:disabled[aria-busy=true] {
|
|
707
|
-
cursor: var(--utrecht-action-busy-cursor);
|
|
708
|
-
}
|
|
709
|
-
|
|
710
|
-
.utrecht-button:disabled, .utrecht-html input[type=button i]:disabled,
|
|
711
|
-
.utrecht-html input[type=reset i]:disabled,
|
|
712
|
-
.utrecht-html input[type=submit i]:disabled,
|
|
713
|
-
.utrecht-html button:disabled,
|
|
714
|
-
.utrecht-button--disabled,
|
|
715
|
-
.utrecht-html button[aria-disabled=true] {
|
|
716
|
-
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
717
|
-
border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
|
|
718
|
-
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
719
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
720
|
-
}
|
|
721
|
-
|
|
722
|
-
.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
723
|
-
.utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
724
|
-
.utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
725
|
-
.utrecht-button--active,
|
|
726
|
-
.utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
|
|
727
|
-
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
728
|
-
border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
|
|
729
|
-
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
730
|
-
}
|
|
731
|
-
|
|
732
|
-
.utrecht-button--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
733
|
-
.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
734
|
-
.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
735
|
-
.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus-visible {
|
|
736
|
-
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
737
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
738
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
739
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
740
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
741
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
742
|
-
}
|
|
743
|
-
|
|
744
|
-
.utrecht-button--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
745
|
-
.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
746
|
-
.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
747
|
-
.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
|
|
748
|
-
background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
|
|
749
|
-
border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
|
|
750
|
-
color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
|
|
751
|
-
}
|
|
752
|
-
|
|
753
|
-
/* override the `:focus` selector above */
|
|
754
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
755
|
-
.utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
|
|
756
|
-
.utrecht-html input[type=reset i]:focus:not(:focus-visible),
|
|
757
|
-
.utrecht-html input[type=submit i]:focus:not(:focus-visible),
|
|
758
|
-
.utrecht-html button:focus:not(:focus-visible) {
|
|
759
|
-
/* undo focus ring */
|
|
760
|
-
box-shadow: none;
|
|
761
|
-
outline-style: none;
|
|
762
|
-
}
|
|
763
|
-
|
|
764
|
-
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
|
|
765
|
-
.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
766
|
-
.utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
767
|
-
.utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
768
|
-
.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
769
|
-
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
770
|
-
border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
|
|
771
|
-
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
772
|
-
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
773
|
-
}
|
|
774
|
-
|
|
775
|
-
.utrecht-button--primary-action {
|
|
776
|
-
background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
|
|
777
|
-
border-color: var(--utrecht-button-primary-action-border-color, var(--utrecht-button-border-color));
|
|
778
|
-
border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
|
|
779
|
-
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
.utrecht-button--primary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--primary-action:not(:disabled):hover:not([aria-disabled=true]),
|
|
783
|
-
.utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
784
|
-
.utrecht-html input.utrecht-button--primary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
785
|
-
.utrecht-html input.utrecht-button--primary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
786
|
-
.utrecht-html input.utrecht-button--primary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
787
|
-
background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
788
|
-
border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
789
|
-
color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
790
|
-
}
|
|
791
|
-
|
|
792
|
-
.utrecht-button--primary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--primary-action[type=button i]:disabled,
|
|
793
|
-
.utrecht-html input.utrecht-button--primary-action[type=reset i]:disabled,
|
|
794
|
-
.utrecht-html input.utrecht-button--primary-action[type=submit i]:disabled,
|
|
795
|
-
.utrecht-html button.utrecht-button--primary-action:disabled,
|
|
796
|
-
.utrecht-button--primary-action.utrecht-button--disabled,
|
|
797
|
-
.utrecht-html button.utrecht-button--primary-action[aria-disabled=true] {
|
|
798
|
-
background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
799
|
-
border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
800
|
-
color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
801
|
-
}
|
|
802
|
-
|
|
803
|
-
.utrecht-button--secondary-action {
|
|
804
|
-
background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
|
|
805
|
-
border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
|
|
806
|
-
border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
|
|
807
|
-
color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
|
|
808
|
-
}
|
|
809
|
-
|
|
810
|
-
.utrecht-button--secondary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--secondary-action:not(:disabled):hover:not([aria-disabled=true]),
|
|
811
|
-
.utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
812
|
-
.utrecht-html input.utrecht-button--secondary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
813
|
-
.utrecht-html input.utrecht-button--secondary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
814
|
-
.utrecht-html input.utrecht-button--secondary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
815
|
-
background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
816
|
-
border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
817
|
-
color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
818
|
-
}
|
|
819
|
-
|
|
820
|
-
.utrecht-button--secondary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--secondary-action[type=button i]:disabled,
|
|
821
|
-
.utrecht-html input.utrecht-button--secondary-action[type=reset i]:disabled,
|
|
822
|
-
.utrecht-html input.utrecht-button--secondary-action[type=submit i]:disabled,
|
|
823
|
-
.utrecht-html button.utrecht-button--secondary-action:disabled,
|
|
824
|
-
.utrecht-button--secondary-action.utrecht-button--disabled,
|
|
825
|
-
.utrecht-html button.utrecht-button--secondary-action[aria-disabled=true] {
|
|
826
|
-
background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
827
|
-
border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
828
|
-
color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
829
|
-
}
|
|
830
|
-
|
|
831
|
-
.utrecht-button--subtle {
|
|
832
|
-
background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
|
|
833
|
-
border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
|
|
834
|
-
border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
|
|
835
|
-
color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
|
|
836
|
-
}
|
|
837
|
-
|
|
838
|
-
.utrecht-button--subtle.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--subtle:not(:disabled):hover:not([aria-disabled=true]),
|
|
839
|
-
.utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
840
|
-
.utrecht-html input.utrecht-button--subtle[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
841
|
-
.utrecht-html input.utrecht-button--subtle[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
|
|
842
|
-
.utrecht-html input.utrecht-button--subtle[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
843
|
-
background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
|
|
844
|
-
border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
|
|
845
|
-
color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
|
|
846
|
-
}
|
|
847
|
-
|
|
848
|
-
.utrecht-button--subtle.utrecht-button:disabled, .utrecht-html input.utrecht-button--subtle[type=button i]:disabled,
|
|
849
|
-
.utrecht-html input.utrecht-button--subtle[type=reset i]:disabled,
|
|
850
|
-
.utrecht-html input.utrecht-button--subtle[type=submit i]:disabled,
|
|
851
|
-
.utrecht-html button.utrecht-button--subtle:disabled,
|
|
852
|
-
.utrecht-button--subtle.utrecht-button--disabled,
|
|
853
|
-
.utrecht-html button.utrecht-button--subtle[aria-disabled=true] {
|
|
854
|
-
background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
|
|
855
|
-
border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
|
|
856
|
-
color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
|
|
857
|
-
}
|
|
858
|
-
|
|
859
|
-
/* override the `:focus` selector above */
|
|
860
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
861
|
-
/**
|
|
862
|
-
* @license EUPL-1.2
|
|
863
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
864
|
-
*/
|
|
865
|
-
/**
|
|
866
|
-
* @license EUPL-1.2
|
|
867
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
868
|
-
*/
|
|
869
|
-
/**
|
|
870
|
-
* @license EUPL-1.2
|
|
871
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
872
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
873
|
-
*/
|
|
874
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
875
|
-
.utrecht-checkbox, .utrecht-html input[type=checkbox i] {
|
|
876
|
-
margin-block-end: 0;
|
|
877
|
-
/* reset native margin for input[type="checkbox"] */
|
|
878
|
-
margin-block-start: 0;
|
|
879
|
-
margin-inline-end: 0;
|
|
880
|
-
margin-inline-start: 0;
|
|
881
|
-
}
|
|
882
|
-
|
|
883
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
884
|
-
.utrecht-checkbox--disabled, .utrecht-checkbox--html-input:disabled, .utrecht-html input[type=checkbox i]:disabled {
|
|
885
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
886
|
-
}
|
|
887
|
-
|
|
888
|
-
.utrecht-checkbox--focus-visible {
|
|
889
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
890
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
891
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
892
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
893
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
894
|
-
}
|
|
895
|
-
|
|
896
|
-
.utrecht-checkbox--html-input:focus, .utrecht-html input[type=checkbox i]:focus {
|
|
897
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
898
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
899
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
900
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
901
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
902
|
-
}
|
|
903
|
-
.utrecht-checkbox--html-input:focus:not(:focus-visible), .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
|
|
904
|
-
/* undo focus ring */
|
|
905
|
-
box-shadow: none;
|
|
906
|
-
outline-style: none;
|
|
907
|
-
}
|
|
908
|
-
|
|
909
|
-
/**
|
|
910
|
-
* @license EUPL-1.2
|
|
911
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
912
|
-
*/
|
|
913
|
-
/**
|
|
914
|
-
* @license EUPL-1.2
|
|
915
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
916
|
-
*/
|
|
917
|
-
.utrecht-emphasis--stressed, .utrecht-html em {
|
|
918
|
-
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
919
|
-
}
|
|
920
|
-
|
|
921
|
-
.utrecht-emphasis--strong, .utrecht-html strong {
|
|
922
|
-
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
923
|
-
}
|
|
924
|
-
|
|
925
|
-
/**
|
|
926
|
-
* @license EUPL-1.2
|
|
927
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
928
|
-
*/
|
|
929
|
-
/**
|
|
930
|
-
* @license EUPL-1.2
|
|
931
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
932
|
-
*/
|
|
933
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
934
|
-
.utrecht-form-fieldset--reset-fieldset, .utrecht-html fieldset {
|
|
935
|
-
border: 0;
|
|
936
|
-
margin-inline-end: 0;
|
|
937
|
-
margin-inline-start: 0;
|
|
938
|
-
min-width: 0;
|
|
939
|
-
padding-block-end: 0;
|
|
940
|
-
padding-block-start: 0.01em;
|
|
941
|
-
padding-inline-end: 0;
|
|
942
|
-
padding-inline-start: 0;
|
|
943
|
-
}
|
|
944
|
-
|
|
945
|
-
.utrecht-form-fieldset__legend--reset-legend, .utrecht-html legend {
|
|
946
|
-
padding-inline-end: 0;
|
|
947
|
-
padding-inline-start: 0;
|
|
948
|
-
}
|
|
949
|
-
|
|
950
|
-
.utrecht-form-fieldset--distanced, .utrecht-html fieldset {
|
|
951
|
-
margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
|
|
952
|
-
margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
|
|
953
|
-
}
|
|
954
|
-
|
|
955
|
-
.utrecht-form-fieldset__legend, .utrecht-html legend {
|
|
956
|
-
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
957
|
-
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
958
|
-
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
959
|
-
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
960
|
-
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
961
|
-
text-transform: var(--utrecht-form-fieldset-legend-text-transform);
|
|
962
|
-
}
|
|
963
|
-
|
|
964
|
-
.utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
|
|
965
|
-
margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
|
|
966
|
-
margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
|
|
967
|
-
}
|
|
968
|
-
|
|
969
|
-
/**
|
|
970
|
-
* @license EUPL-1.2
|
|
971
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
972
|
-
*/
|
|
973
|
-
/**
|
|
974
|
-
* @license EUPL-1.2
|
|
975
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
976
|
-
*/
|
|
977
|
-
.utrecht-form-label, .utrecht-html label {
|
|
978
|
-
color: var(--utrecht-form-label-color);
|
|
979
|
-
font-size: var(--utrecht-form-label-font-size);
|
|
980
|
-
font-weight: var(--utrecht-form-label-font-weight);
|
|
981
|
-
}
|
|
982
|
-
|
|
983
|
-
.utrecht-form-label--checkbox, .utrecht-html input[type=checkbox i] ~ label {
|
|
984
|
-
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
985
|
-
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
986
|
-
}
|
|
987
|
-
|
|
988
|
-
.utrecht-form-label--checked {
|
|
989
|
-
font-weight: var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight));
|
|
990
|
-
}
|
|
991
|
-
|
|
992
|
-
.utrecht-form-label--disabled {
|
|
993
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
994
|
-
font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
|
|
995
|
-
}
|
|
996
|
-
|
|
997
|
-
.utrecht-form-label--radio, .utrecht-html input[type=radio i] ~ label {
|
|
998
|
-
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
999
|
-
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
1000
|
-
}
|
|
1001
|
-
|
|
1002
|
-
/**
|
|
1003
|
-
* @license EUPL-1.2
|
|
1004
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1005
|
-
*/
|
|
1006
|
-
/**
|
|
1007
|
-
* @license EUPL-1.2
|
|
1008
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1009
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1010
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1011
|
-
*/
|
|
1012
|
-
.utrecht-heading-1, .utrecht-html h1 {
|
|
1013
|
-
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1014
|
-
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1015
|
-
font-size: var(--utrecht-heading-1-font-size);
|
|
1016
|
-
font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1017
|
-
letter-spacing: var(--utrecht-heading-1-letter-spacing);
|
|
1018
|
-
line-height: var(--utrecht-heading-1-line-height);
|
|
1019
|
-
margin-block-end: 0;
|
|
1020
|
-
margin-block-start: 0;
|
|
1021
|
-
text-transform: var(--utrecht-heading-1-text-transform, inherit);
|
|
1022
|
-
}
|
|
1023
|
-
|
|
1024
|
-
.utrecht-heading-1--distanced, .utrecht-html h1 {
|
|
1025
|
-
margin-block-end: var(--utrecht-heading-1-margin-block-end);
|
|
1026
|
-
margin-block-start: var(--utrecht-heading-1-margin-block-start);
|
|
1027
|
-
}
|
|
1028
|
-
|
|
1029
|
-
/**
|
|
1030
|
-
* @license EUPL-1.2
|
|
1031
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1032
|
-
*/
|
|
1033
|
-
/**
|
|
1034
|
-
* @license EUPL-1.2
|
|
1035
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1036
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1037
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1038
|
-
*/
|
|
1039
|
-
.utrecht-heading-2, .utrecht-html h2 {
|
|
1040
|
-
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1041
|
-
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1042
|
-
font-size: var(--utrecht-heading-2-font-size);
|
|
1043
|
-
font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1044
|
-
letter-spacing: var(--utrecht-heading-2-letter-spacing);
|
|
1045
|
-
line-height: var(--utrecht-heading-2-line-height);
|
|
1046
|
-
margin-block-end: 0;
|
|
1047
|
-
margin-block-start: 0;
|
|
1048
|
-
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
1049
|
-
}
|
|
1050
|
-
|
|
1051
|
-
.utrecht-heading-2--distanced, .utrecht-html h2 {
|
|
1052
|
-
margin-block-end: var(--utrecht-heading-2-margin-block-end);
|
|
1053
|
-
margin-block-start: var(--utrecht-heading-2-margin-block-start);
|
|
1054
|
-
}
|
|
1055
|
-
|
|
1056
|
-
/**
|
|
1057
|
-
* @license EUPL-1.2
|
|
1058
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1059
|
-
*/
|
|
1060
|
-
/**
|
|
1061
|
-
* @license EUPL-1.2
|
|
1062
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1063
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1064
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1065
|
-
*/
|
|
1066
|
-
.utrecht-heading-3, .utrecht-html h3 {
|
|
1067
|
-
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1068
|
-
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1069
|
-
font-size: var(--utrecht-heading-3-font-size);
|
|
1070
|
-
font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1071
|
-
letter-spacing: var(--utrecht-heading-3-letter-spacing);
|
|
1072
|
-
line-height: var(--utrecht-heading-3-line-height);
|
|
1073
|
-
margin-block-end: 0;
|
|
1074
|
-
margin-block-start: 0;
|
|
1075
|
-
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
1076
|
-
}
|
|
1077
|
-
|
|
1078
|
-
.utrecht-heading-3--distanced, .utrecht-html h3 {
|
|
1079
|
-
margin-block-end: var(--utrecht-heading-3-margin-block-end);
|
|
1080
|
-
margin-block-start: var(--utrecht-heading-3-margin-block-start);
|
|
1081
|
-
}
|
|
1082
|
-
|
|
1083
|
-
/**
|
|
1084
|
-
* @license EUPL-1.2
|
|
1085
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1086
|
-
*/
|
|
1087
|
-
/**
|
|
1088
|
-
* @license EUPL-1.2
|
|
1089
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1090
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1091
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1092
|
-
*/
|
|
1093
|
-
.utrecht-heading-4, .utrecht-html h4 {
|
|
1094
|
-
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1095
|
-
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1096
|
-
font-size: var(--utrecht-heading-4-font-size);
|
|
1097
|
-
font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1098
|
-
letter-spacing: var(--utrecht-heading-4-letter-spacing);
|
|
1099
|
-
line-height: var(--utrecht-heading-4-line-height);
|
|
1100
|
-
margin-block-end: 0;
|
|
1101
|
-
margin-block-start: 0;
|
|
1102
|
-
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
1103
|
-
}
|
|
1104
|
-
|
|
1105
|
-
.utrecht-heading-4--distanced, .utrecht-html h4 {
|
|
1106
|
-
margin-block-end: var(--utrecht-heading-4-margin-block-end);
|
|
1107
|
-
margin-block-start: var(--utrecht-heading-4-margin-block-start);
|
|
1108
|
-
}
|
|
1109
|
-
|
|
1110
|
-
/**
|
|
1111
|
-
* @license EUPL-1.2
|
|
1112
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1113
|
-
*/
|
|
1114
|
-
/**
|
|
1115
|
-
* @license EUPL-1.2
|
|
1116
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1117
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1118
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1119
|
-
*/
|
|
1120
|
-
.utrecht-heading-5, .utrecht-html h5 {
|
|
1121
|
-
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1122
|
-
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1123
|
-
font-size: var(--utrecht-heading-5-font-size);
|
|
1124
|
-
font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1125
|
-
letter-spacing: var(--utrecht-heading-5-letter-spacing);
|
|
1126
|
-
line-height: var(--utrecht-heading-5-line-height);
|
|
1127
|
-
margin-block-end: 0;
|
|
1128
|
-
margin-block-start: 0;
|
|
1129
|
-
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
1130
|
-
}
|
|
1131
|
-
|
|
1132
|
-
.utrecht-heading-5--distanced, .utrecht-html h5 {
|
|
1133
|
-
margin-block-end: var(--utrecht-heading-5-margin-block-end);
|
|
1134
|
-
margin-block-start: var(--utrecht-heading-5-margin-block-start);
|
|
1135
|
-
}
|
|
1136
|
-
|
|
1137
|
-
/**
|
|
1138
|
-
* @license EUPL-1.2
|
|
1139
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1140
|
-
*/
|
|
1141
|
-
/**
|
|
1142
|
-
* @license EUPL-1.2
|
|
1143
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1144
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1145
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1146
|
-
*/
|
|
1147
|
-
.utrecht-heading-6, .utrecht-html h6 {
|
|
1148
|
-
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
1149
|
-
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
1150
|
-
font-size: var(--utrecht-heading-6-font-size);
|
|
1151
|
-
font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
1152
|
-
letter-spacing: var(--utrecht-heading-6-letter-spacing);
|
|
1153
|
-
line-height: var(--utrecht-heading-6-line-height);
|
|
1154
|
-
margin-block-end: 0;
|
|
1155
|
-
margin-block-start: 0;
|
|
1156
|
-
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
1157
|
-
}
|
|
1158
|
-
|
|
1159
|
-
.utrecht-heading-6--distanced, .utrecht-html h6 {
|
|
1160
|
-
margin-block-end: var(--utrecht-heading-6-margin-block-end);
|
|
1161
|
-
margin-block-start: var(--utrecht-heading-6-margin-block-start);
|
|
1162
|
-
}
|
|
1163
|
-
|
|
1164
|
-
/**
|
|
1165
|
-
* @license EUPL-1.2
|
|
1166
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1167
|
-
*/
|
|
1168
|
-
/**
|
|
1169
|
-
* @license EUPL-1.2
|
|
1170
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1171
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1172
|
-
*/
|
|
1173
|
-
/* stylelint-disable scss/no-global-function-names */
|
|
1174
|
-
/**
|
|
1175
|
-
* @license EUPL-1.2
|
|
1176
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1177
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1178
|
-
*/
|
|
1179
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1180
|
-
/*
|
|
1181
|
-
|
|
1182
|
-
# CSS implementation
|
|
1183
|
-
|
|
1184
|
-
## `text-decoration-skip`
|
|
1185
|
-
|
|
1186
|
-
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
1187
|
-
For example by obscuring Arabic diacritics.
|
|
1188
|
-
|
|
1189
|
-
However, the combination of a greater thickness and skipping this thick underline
|
|
1190
|
-
leads to a very unappealing rendering of the underline. To avoid this,
|
|
1191
|
-
`text-decoration-skip` is disabled for interactive states.
|
|
1192
|
-
|
|
1193
|
-
For design token configurations that have identical thickness for normal and interactive
|
|
1194
|
-
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
1195
|
-
from an interrupted to an uninterrupted underline (for some texts).
|
|
1196
|
-
|
|
1197
|
-
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
1198
|
-
|
|
1199
|
-
---
|
|
1200
|
-
|
|
1201
|
-
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
1202
|
-
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
1203
|
-
not make this too inconvenient.
|
|
1204
|
-
|
|
1205
|
-
---
|
|
1206
|
-
|
|
1207
|
-
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
1208
|
-
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
1209
|
-
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
1210
|
-
|
|
1211
|
-
## `text-decoration-thickness`
|
|
1212
|
-
|
|
1213
|
-
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
1214
|
-
|
|
1215
|
-
---
|
|
1216
|
-
|
|
1217
|
-
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
1218
|
-
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
1219
|
-
the underline offset also seems to increase along with the thickness, which effectively means
|
|
1220
|
-
the underline is closer to the next line than in Safari.
|
|
1221
|
-
|
|
1222
|
-
---
|
|
1223
|
-
|
|
1224
|
-
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
1225
|
-
use the `max()` function to ensure the underline remains visible for every font size.
|
|
1226
|
-
|
|
1227
|
-
## `transition`
|
|
1228
|
-
|
|
1229
|
-
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
1230
|
-
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
1231
|
-
|
|
1232
|
-
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
1233
|
-
|
|
1234
|
-
*/
|
|
1235
|
-
.utrecht-link, .utrecht-html a:link {
|
|
1236
|
-
color: var(--utrecht-link-color, blue);
|
|
1237
|
-
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
1238
|
-
text-decoration-skip-ink: all;
|
|
1239
|
-
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
1240
|
-
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
1241
|
-
}
|
|
1242
|
-
|
|
1243
|
-
.utrecht-link--icon-left {
|
|
1244
|
-
background-image: var(--utrecht-link-icon-left-background-image, none);
|
|
1245
|
-
background-position: 0 0.25em;
|
|
1246
|
-
background-repeat: no-repeat;
|
|
1247
|
-
color: var(--utrecht-link-color, blue);
|
|
1248
|
-
font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
1249
|
-
padding-inline-start: var(--utrecht-space-block-md);
|
|
1250
|
-
text-decoration: none;
|
|
1251
|
-
}
|
|
1252
|
-
|
|
1253
|
-
.utrecht-link:visited,
|
|
1254
|
-
.utrecht-link--visited,
|
|
1255
|
-
.utrecht-html a:visited {
|
|
1256
|
-
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
1257
|
-
}
|
|
1258
|
-
|
|
1259
|
-
.utrecht-link:hover,
|
|
1260
|
-
.utrecht-link--hover,
|
|
1261
|
-
.utrecht-html a:hover {
|
|
1262
|
-
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
1263
|
-
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1264
|
-
text-decoration-skip: none;
|
|
1265
|
-
text-decoration-skip-ink: none;
|
|
1266
|
-
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1267
|
-
}
|
|
1268
|
-
|
|
1269
|
-
.utrecht-link:active,
|
|
1270
|
-
.utrecht-link--active,
|
|
1271
|
-
.utrecht-html a:active {
|
|
1272
|
-
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
1273
|
-
}
|
|
1274
|
-
|
|
1275
|
-
.utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus {
|
|
1276
|
-
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
1277
|
-
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
1278
|
-
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1279
|
-
text-decoration-skip: none;
|
|
1280
|
-
text-decoration-skip-ink: none;
|
|
1281
|
-
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1282
|
-
}
|
|
1283
|
-
|
|
1284
|
-
.utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
|
|
1285
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1286
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1287
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1288
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1289
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1290
|
-
}
|
|
1291
|
-
|
|
1292
|
-
.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
|
|
1293
|
-
/* undo focus ring */
|
|
1294
|
-
box-shadow: none;
|
|
1295
|
-
outline-style: none;
|
|
1296
|
-
}
|
|
1297
|
-
|
|
1298
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1299
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1300
|
-
.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
|
|
1301
|
-
white-space: nowrap;
|
|
1302
|
-
}
|
|
1303
|
-
|
|
1304
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1305
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1306
|
-
.utrecht-html a:focus:not(:focus-visible) {
|
|
1307
|
-
/* undo focus ring */
|
|
1308
|
-
box-shadow: none;
|
|
1309
|
-
outline-style: none;
|
|
1310
|
-
}
|
|
1311
|
-
|
|
1312
|
-
/**
|
|
1313
|
-
* @license EUPL-1.2
|
|
1314
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1315
|
-
*/
|
|
1316
|
-
/**
|
|
1317
|
-
* @license EUPL-1.2
|
|
1318
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1319
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1320
|
-
*/
|
|
1321
|
-
.utrecht-ordered-list, .utrecht-html ol {
|
|
1322
|
-
font-family: var(--utrecht-document-font-family, inherit);
|
|
1323
|
-
margin-block-end: 0;
|
|
1324
|
-
margin-block-start: 0;
|
|
1325
|
-
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
1326
|
-
}
|
|
1327
|
-
|
|
1328
|
-
.utrecht-ordered-list--distanced, .utrecht-html ol {
|
|
1329
|
-
margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
|
|
1330
|
-
margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
|
|
1331
|
-
}
|
|
1332
|
-
|
|
1333
|
-
.utrecht-ordered-list--arabic, .utrecht-html ol:lang(ar) {
|
|
1334
|
-
list-style: arabic-indic;
|
|
1335
|
-
}
|
|
1336
|
-
|
|
1337
|
-
.utrecht-ordered-list__item, .utrecht-html ol > li {
|
|
1338
|
-
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
|
|
1339
|
-
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
1340
|
-
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
1341
|
-
}
|
|
1342
|
-
|
|
1343
|
-
/**
|
|
1344
|
-
* @license EUPL-1.2
|
|
1345
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1346
|
-
*/
|
|
1347
|
-
/**
|
|
1348
|
-
* @license EUPL-1.2
|
|
1349
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1350
|
-
*/
|
|
1351
|
-
.utrecht-paragraph, .utrecht-html p {
|
|
1352
|
-
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
1353
|
-
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
1354
|
-
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
1355
|
-
font-weight: var(--utrecht-paragraph-font-weight, inherit);
|
|
1356
|
-
line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
|
|
1357
|
-
margin-block-end: 0;
|
|
1358
|
-
margin-block-start: 0;
|
|
1359
|
-
}
|
|
1360
|
-
|
|
1361
|
-
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
1362
|
-
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
1363
|
-
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
1364
|
-
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
1365
|
-
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
1366
|
-
}
|
|
1367
|
-
|
|
1368
|
-
.utrecht-paragraph--distanced, .utrecht-html * ~ p {
|
|
1369
|
-
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
1370
|
-
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
1371
|
-
}
|
|
1372
|
-
|
|
1373
|
-
/* stylelint-disable selector-class-pattern */
|
|
1374
|
-
/**
|
|
1375
|
-
* @license EUPL-1.2
|
|
1376
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1377
|
-
*/
|
|
1378
|
-
/**
|
|
1379
|
-
* @license EUPL-1.2
|
|
1380
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1381
|
-
*/
|
|
1382
|
-
/**
|
|
1383
|
-
* @license EUPL-1.2
|
|
1384
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1385
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1386
|
-
*/
|
|
1387
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1388
|
-
.utrecht-radio-button, .utrecht-html input[type=radio i] {
|
|
1389
|
-
margin-block-end: 0;
|
|
1390
|
-
/* reset native margin for input[type="radio" i] */
|
|
1391
|
-
margin-block-start: 0;
|
|
1392
|
-
margin-inline-end: 0;
|
|
1393
|
-
margin-inline-start: 0;
|
|
1394
|
-
}
|
|
1395
|
-
|
|
1396
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1397
|
-
.utrecht-radio-button--disabled, .utrecht-radio-button--html-input:disabled, .utrecht-html input[type=radio i]:disabled {
|
|
1398
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
1399
|
-
}
|
|
1400
|
-
|
|
1401
|
-
.utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
|
|
1402
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1403
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1404
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1405
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1406
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1407
|
-
}
|
|
1408
|
-
|
|
1409
|
-
.utrecht-radio-button--html-input:focus:not(:focus-visible), .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
1410
|
-
/* undo focus ring */
|
|
1411
|
-
box-shadow: none;
|
|
1412
|
-
outline-style: none;
|
|
1413
|
-
}
|
|
1414
|
-
|
|
1415
|
-
/**
|
|
1416
|
-
* @license EUPL-1.2
|
|
1417
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1418
|
-
*/
|
|
1419
|
-
/**
|
|
1420
|
-
* @license EUPL-1.2
|
|
1421
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1422
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1423
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1424
|
-
*/
|
|
1425
|
-
.utrecht-separator, .utrecht-html hr {
|
|
1426
|
-
border-color: var(--utrecht-separator-color);
|
|
1427
|
-
border-style: solid;
|
|
1428
|
-
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
1429
|
-
}
|
|
1430
|
-
|
|
1431
|
-
.utrecht-separator--distanced, .utrecht-html hr {
|
|
1432
|
-
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
1433
|
-
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
1434
|
-
}
|
|
1435
|
-
|
|
1436
|
-
/**
|
|
1437
|
-
* @license EUPL-1.2
|
|
1438
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1439
|
-
*/
|
|
1440
|
-
/**
|
|
1441
|
-
* @license EUPL-1.2
|
|
1442
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1443
|
-
*/
|
|
1444
|
-
.utrecht-table, .utrecht-html table {
|
|
1445
|
-
border-collapse: collapse;
|
|
1446
|
-
border-color: var(--utrecht-table-border-color, 0);
|
|
1447
|
-
border-style: solid;
|
|
1448
|
-
border-width: var(--utrecht-table-border-width, 0);
|
|
1449
|
-
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
1450
|
-
font-size: var(--utrecht-table-font-size, inherit);
|
|
1451
|
-
width: 100%;
|
|
1452
|
-
}
|
|
1453
|
-
|
|
1454
|
-
.utrecht-table--distanced, .utrecht-html table {
|
|
1455
|
-
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
1456
|
-
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
1457
|
-
}
|
|
1458
|
-
|
|
1459
|
-
.utrecht-table__caption, .utrecht-html caption {
|
|
1460
|
-
color: var(--utrecht-table-caption-color);
|
|
1461
|
-
font-family: var(--utrecht-table-caption-font-family);
|
|
1462
|
-
font-size: var(--utrecht-table-caption-font-size);
|
|
1463
|
-
font-weight: var(--utrecht-table-caption-font-weight);
|
|
1464
|
-
line-height: var(--utrecht-table-caption-line-height);
|
|
1465
|
-
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
1466
|
-
text-align: var(--utrecht-table-caption-text-align, center);
|
|
1467
|
-
}
|
|
1468
|
-
|
|
1469
|
-
.utrecht-table__header, .utrecht-html thead {
|
|
1470
|
-
background-color: var(--utrecht-table-header-background-color);
|
|
1471
|
-
color: var(--utrecht-table-header-color);
|
|
1472
|
-
font-weight: var(--utrecht-table-header-font-weight);
|
|
1473
|
-
text-transform: var(--utrecht-table-header-text-transform);
|
|
1474
|
-
vertical-align: bottom;
|
|
1475
|
-
}
|
|
1476
|
-
|
|
1477
|
-
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
1478
|
-
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
1479
|
-
border-block-end-style: solid;
|
|
1480
|
-
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
1481
|
-
}
|
|
1482
|
-
|
|
1483
|
-
.utrecht-table__body, .utrecht-html tbody {
|
|
1484
|
-
vertical-align: baseline;
|
|
1485
|
-
}
|
|
1486
|
-
|
|
1487
|
-
.utrecht-table__header-cell, .utrecht-html th {
|
|
1488
|
-
color: var(--utrecht-table-header-cell-color);
|
|
1489
|
-
font-size: var(--utrecht-table-header-cell-font-size);
|
|
1490
|
-
font-weight: var(--utrecht-table-header-cell-font-weight);
|
|
1491
|
-
text-align: start;
|
|
1492
|
-
text-transform: var(--utrecht-table-header-cell-text-transform);
|
|
1493
|
-
}
|
|
1494
|
-
|
|
1495
|
-
.utrecht-table__cell, .utrecht-html th,
|
|
1496
|
-
.utrecht-html td {
|
|
1497
|
-
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
1498
|
-
border-block-end-style: solid;
|
|
1499
|
-
border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
|
|
1500
|
-
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
1501
|
-
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
1502
|
-
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
1503
|
-
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
1504
|
-
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
1505
|
-
text-align: start;
|
|
1506
|
-
}
|
|
1507
|
-
|
|
1508
|
-
.utrecht-table__cell--first, .utrecht-html td:first-child,
|
|
1509
|
-
.utrecht-html th:first-child {
|
|
1510
|
-
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
1511
|
-
}
|
|
1512
|
-
|
|
1513
|
-
.utrecht-table__cell--last, .utrecht-html td:last-child,
|
|
1514
|
-
.utrecht-html th:last-child {
|
|
1515
|
-
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
1516
|
-
}
|
|
1517
|
-
|
|
1518
|
-
.utrecht-table__header-cell--numeric-column,
|
|
1519
|
-
.utrecht-table__cell--numeric-column,
|
|
1520
|
-
.utrecht-html td.numeric,
|
|
1521
|
-
.utrecht-html thead > tr > th.numeric,
|
|
1522
|
-
.utrecht-html tfoot > tr > th.numeric,
|
|
1523
|
-
.utrecht-html th[scope=column].numeric {
|
|
1524
|
-
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
1525
|
-
text-align: right;
|
|
1526
|
-
}
|
|
1527
|
-
|
|
1528
|
-
.utrecht-table__cell--numeric-data, .utrecht-html td.numeric {
|
|
1529
|
-
font-variant-numeric: lining-nums tabular-nums;
|
|
1530
|
-
}
|
|
1531
|
-
|
|
1532
|
-
.utrecht-table__row--alternate-odd, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
|
|
1533
|
-
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
1534
|
-
color: var(--utrecht-table-row-alternate-odd-color);
|
|
1535
|
-
}
|
|
1536
|
-
|
|
1537
|
-
.utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
|
|
1538
|
-
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
1539
|
-
color: var(--utrecht-table-row-alternate-even-color);
|
|
1540
|
-
}
|
|
1541
|
-
|
|
1542
|
-
/* stylelint-disable selector-class-pattern */
|
|
1543
|
-
/**
|
|
1544
|
-
* @license EUPL-1.2
|
|
1545
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1546
|
-
*/
|
|
1547
|
-
/**
|
|
1548
|
-
* @license EUPL-1.2
|
|
1549
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1550
|
-
*/
|
|
1551
|
-
/**
|
|
1552
|
-
* @license EUPL-1.2
|
|
1553
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1554
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1555
|
-
*/
|
|
1556
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1557
|
-
.utrecht-textarea, .utrecht-html textarea {
|
|
1558
|
-
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
|
|
1559
|
-
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
|
|
1560
|
-
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
|
|
1561
|
-
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
|
|
1562
|
-
border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1563
|
-
border-style: solid;
|
|
1564
|
-
box-sizing: border-box;
|
|
1565
|
-
color: var(--utrecht-textarea-color, var(--utrecht-form-input-color));
|
|
1566
|
-
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
1567
|
-
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1568
|
-
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1569
|
-
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
1570
|
-
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1571
|
-
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1572
|
-
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1573
|
-
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1574
|
-
resize: vertical;
|
|
1575
|
-
width: 100%;
|
|
1576
|
-
}
|
|
1577
|
-
|
|
1578
|
-
.utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-html textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true], .utrecht-html textarea[aria-invalid=true] {
|
|
1579
|
-
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))));
|
|
1580
|
-
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))));
|
|
1581
|
-
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))));
|
|
1582
|
-
}
|
|
1583
|
-
|
|
1584
|
-
.utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
|
|
1585
|
-
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))));
|
|
1586
|
-
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))));
|
|
1587
|
-
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1588
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
1589
|
-
}
|
|
1590
|
-
|
|
1591
|
-
.utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
1592
|
-
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))));
|
|
1593
|
-
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))));
|
|
1594
|
-
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1595
|
-
}
|
|
1596
|
-
|
|
1597
|
-
.utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
1598
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1599
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1600
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1601
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1602
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1603
|
-
}
|
|
1604
|
-
|
|
1605
|
-
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
|
|
1606
|
-
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))));
|
|
1607
|
-
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1608
|
-
}
|
|
1609
|
-
|
|
1610
|
-
.utrecht-textarea__placeholder, .utrecht-textarea--html-textarea::placeholder, .utrecht-html textarea::placeholder {
|
|
1611
|
-
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1612
|
-
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
1613
|
-
opacity: 100%;
|
|
1614
|
-
}
|
|
1615
|
-
|
|
1616
|
-
.utrecht-textarea--html-textarea:focus:not(:focus-visible), .utrecht-html textarea:focus:not(:focus-visible) {
|
|
1617
|
-
/* undo focus ring */
|
|
1618
|
-
box-shadow: none;
|
|
1619
|
-
outline-style: none;
|
|
1620
|
-
}
|
|
1621
|
-
/**
|
|
1622
|
-
* @license EUPL-1.2
|
|
1623
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1624
|
-
*/
|
|
1625
|
-
/**
|
|
1626
|
-
* @license EUPL-1.2
|
|
1627
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1628
|
-
*/
|
|
1629
|
-
/**
|
|
1630
|
-
* @license EUPL-1.2
|
|
1631
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1632
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1633
|
-
*/
|
|
1634
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1635
|
-
.utrecht-textbox, .utrecht-html input:not([type]),
|
|
1636
|
-
.utrecht-html input[type=date i],
|
|
1637
|
-
.utrecht-html input[type=datetime-local i],
|
|
1638
|
-
.utrecht-html input[type=email i],
|
|
1639
|
-
.utrecht-html input[type=month i],
|
|
1640
|
-
.utrecht-html input[type=number i],
|
|
1641
|
-
.utrecht-html input[type=password i],
|
|
1642
|
-
.utrecht-html input[type=search i],
|
|
1643
|
-
.utrecht-html input[type=tel i],
|
|
1644
|
-
.utrecht-html input[type=text i],
|
|
1645
|
-
.utrecht-html input[type=time i],
|
|
1646
|
-
.utrecht-html input[type=url i],
|
|
1647
|
-
.utrecht-html input[type=week i] {
|
|
1648
|
-
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
|
|
1649
|
-
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
|
|
1650
|
-
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
|
|
1651
|
-
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
|
|
1652
|
-
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1653
|
-
border-style: solid;
|
|
1654
|
-
box-sizing: border-box;
|
|
1655
|
-
color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
|
|
1656
|
-
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
|
|
1657
|
-
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1658
|
-
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1659
|
-
padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1660
|
-
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1661
|
-
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1662
|
-
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1663
|
-
width: 100%;
|
|
1664
|
-
}
|
|
1665
|
-
|
|
1666
|
-
.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-html input:invalid:not([type]),
|
|
1667
|
-
.utrecht-html input[type=date i]:invalid,
|
|
1668
|
-
.utrecht-html input[type=datetime-local i]:invalid,
|
|
1669
|
-
.utrecht-html input[type=email i]:invalid,
|
|
1670
|
-
.utrecht-html input[type=month i]:invalid,
|
|
1671
|
-
.utrecht-html input[type=number i]:invalid,
|
|
1672
|
-
.utrecht-html input[type=password i]:invalid,
|
|
1673
|
-
.utrecht-html input[type=search i]:invalid,
|
|
1674
|
-
.utrecht-html input[type=tel i]:invalid,
|
|
1675
|
-
.utrecht-html input[type=text i]:invalid,
|
|
1676
|
-
.utrecht-html input[type=time i]:invalid,
|
|
1677
|
-
.utrecht-html input[type=url i]:invalid,
|
|
1678
|
-
.utrecht-html input[type=week i]:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input[aria-invalid=true]:not([type]),
|
|
1679
|
-
.utrecht-html input[aria-invalid=true][type=date i],
|
|
1680
|
-
.utrecht-html input[aria-invalid=true][type=datetime-local i],
|
|
1681
|
-
.utrecht-html input[aria-invalid=true][type=email i],
|
|
1682
|
-
.utrecht-html input[aria-invalid=true][type=month i],
|
|
1683
|
-
.utrecht-html input[aria-invalid=true][type=number i],
|
|
1684
|
-
.utrecht-html input[aria-invalid=true][type=password i],
|
|
1685
|
-
.utrecht-html input[aria-invalid=true][type=search i],
|
|
1686
|
-
.utrecht-html input[aria-invalid=true][type=tel i],
|
|
1687
|
-
.utrecht-html input[aria-invalid=true][type=text i],
|
|
1688
|
-
.utrecht-html input[aria-invalid=true][type=time i],
|
|
1689
|
-
.utrecht-html input[aria-invalid=true][type=url i],
|
|
1690
|
-
.utrecht-html input[aria-invalid=true][type=week i] {
|
|
1691
|
-
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))));
|
|
1692
|
-
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))));
|
|
1693
|
-
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))));
|
|
1694
|
-
}
|
|
1695
|
-
|
|
1696
|
-
.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input:disabled:not([type]),
|
|
1697
|
-
.utrecht-html input[type=date i]:disabled,
|
|
1698
|
-
.utrecht-html input[type=datetime-local i]:disabled,
|
|
1699
|
-
.utrecht-html input[type=email i]:disabled,
|
|
1700
|
-
.utrecht-html input[type=month i]:disabled,
|
|
1701
|
-
.utrecht-html input[type=number i]:disabled,
|
|
1702
|
-
.utrecht-html input[type=password i]:disabled,
|
|
1703
|
-
.utrecht-html input[type=search i]:disabled,
|
|
1704
|
-
.utrecht-html input[type=tel i]:disabled,
|
|
1705
|
-
.utrecht-html input[type=text i]:disabled,
|
|
1706
|
-
.utrecht-html input[type=time i]:disabled,
|
|
1707
|
-
.utrecht-html input[type=url i]:disabled,
|
|
1708
|
-
.utrecht-html input[type=week i]:disabled {
|
|
1709
|
-
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))));
|
|
1710
|
-
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))));
|
|
1711
|
-
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1712
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
1713
|
-
}
|
|
1714
|
-
|
|
1715
|
-
.utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
1716
|
-
.utrecht-html input[type=date i]:focus,
|
|
1717
|
-
.utrecht-html input[type=datetime-local i]:focus,
|
|
1718
|
-
.utrecht-html input[type=email i]:focus,
|
|
1719
|
-
.utrecht-html input[type=month i]:focus,
|
|
1720
|
-
.utrecht-html input[type=number i]:focus,
|
|
1721
|
-
.utrecht-html input[type=password i]:focus,
|
|
1722
|
-
.utrecht-html input[type=search i]:focus,
|
|
1723
|
-
.utrecht-html input[type=tel i]:focus,
|
|
1724
|
-
.utrecht-html input[type=text i]:focus,
|
|
1725
|
-
.utrecht-html input[type=time i]:focus,
|
|
1726
|
-
.utrecht-html input[type=url i]:focus,
|
|
1727
|
-
.utrecht-html input[type=week i]:focus {
|
|
1728
|
-
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))));
|
|
1729
|
-
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))));
|
|
1730
|
-
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1731
|
-
}
|
|
1732
|
-
|
|
1733
|
-
.utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
1734
|
-
.utrecht-html input[type=date i]:focus,
|
|
1735
|
-
.utrecht-html input[type=datetime-local i]:focus,
|
|
1736
|
-
.utrecht-html input[type=email i]:focus,
|
|
1737
|
-
.utrecht-html input[type=month i]:focus,
|
|
1738
|
-
.utrecht-html input[type=number i]:focus,
|
|
1739
|
-
.utrecht-html input[type=password i]:focus,
|
|
1740
|
-
.utrecht-html input[type=search i]:focus,
|
|
1741
|
-
.utrecht-html input[type=tel i]:focus,
|
|
1742
|
-
.utrecht-html input[type=text i]:focus,
|
|
1743
|
-
.utrecht-html input[type=time i]:focus,
|
|
1744
|
-
.utrecht-html input[type=url i]:focus,
|
|
1745
|
-
.utrecht-html input[type=week i]:focus {
|
|
1746
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1747
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1748
|
-
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
1749
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1750
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1751
|
-
}
|
|
1752
|
-
|
|
1753
|
-
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
|
|
1754
|
-
.utrecht-html input[type=date i]:read-only,
|
|
1755
|
-
.utrecht-html input[type=datetime-local i]:read-only,
|
|
1756
|
-
.utrecht-html input[type=email i]:read-only,
|
|
1757
|
-
.utrecht-html input[type=month i]:read-only,
|
|
1758
|
-
.utrecht-html input[type=number i]:read-only,
|
|
1759
|
-
.utrecht-html input[type=password i]:read-only,
|
|
1760
|
-
.utrecht-html input[type=search i]:read-only,
|
|
1761
|
-
.utrecht-html input[type=tel i]:read-only,
|
|
1762
|
-
.utrecht-html input[type=text i]:read-only,
|
|
1763
|
-
.utrecht-html input[type=time i]:read-only,
|
|
1764
|
-
.utrecht-html input[type=url i]:read-only,
|
|
1765
|
-
.utrecht-html input[type=week i]:read-only {
|
|
1766
|
-
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))));
|
|
1767
|
-
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1768
|
-
}
|
|
1769
|
-
|
|
1770
|
-
.utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder, .utrecht-html input:not([type])::placeholder,
|
|
1771
|
-
.utrecht-html input[type=date i]::placeholder,
|
|
1772
|
-
.utrecht-html input[type=datetime-local i]::placeholder,
|
|
1773
|
-
.utrecht-html input[type=email i]::placeholder,
|
|
1774
|
-
.utrecht-html input[type=month i]::placeholder,
|
|
1775
|
-
.utrecht-html input[type=number i]::placeholder,
|
|
1776
|
-
.utrecht-html input[type=password i]::placeholder,
|
|
1777
|
-
.utrecht-html input[type=search i]::placeholder,
|
|
1778
|
-
.utrecht-html input[type=tel i]::placeholder,
|
|
1779
|
-
.utrecht-html input[type=text i]::placeholder,
|
|
1780
|
-
.utrecht-html input[type=time i]::placeholder,
|
|
1781
|
-
.utrecht-html input[type=url i]::placeholder,
|
|
1782
|
-
.utrecht-html input[type=week i]::placeholder {
|
|
1783
|
-
color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1784
|
-
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
1785
|
-
opacity: 100%;
|
|
1786
|
-
}
|
|
1787
|
-
|
|
1788
|
-
.utrecht-textbox--numeric, .utrecht-html input[autocomplete~=bday i],
|
|
1789
|
-
.utrecht-html input[autocomplete~=bday-day i],
|
|
1790
|
-
.utrecht-html input[autocomplete~=bday-month i],
|
|
1791
|
-
.utrecht-html input[autocomplete~=bday-year i],
|
|
1792
|
-
.utrecht-html input[autocomplete~=cc-csc i],
|
|
1793
|
-
.utrecht-html input[autocomplete~=cc-exp i],
|
|
1794
|
-
.utrecht-html input[autocomplete~=cc-exp-month i],
|
|
1795
|
-
.utrecht-html input[autocomplete~=cc-exp-year i],
|
|
1796
|
-
.utrecht-html input[autocomplete~=cc-number i],
|
|
1797
|
-
.utrecht-html input[autocomplete~=one-time-code i],
|
|
1798
|
-
.utrecht-html input[autocomplete~=postal-code i],
|
|
1799
|
-
.utrecht-html input[autocomplete~=tel i],
|
|
1800
|
-
.utrecht-html input[autocomplete~=tel-area-code i],
|
|
1801
|
-
.utrecht-html input[autocomplete~=tel-country-code i],
|
|
1802
|
-
.utrecht-html input[autocomplete~=tel-extension i],
|
|
1803
|
-
.utrecht-html input[autocomplete~=tel-local i],
|
|
1804
|
-
.utrecht-html input[autocomplete~=tel-national i],
|
|
1805
|
-
.utrecht-html input[autocomplete~=transaction-amount i],
|
|
1806
|
-
.utrecht-html input[inputmode=decimal i],
|
|
1807
|
-
.utrecht-html input[inputmode=numeric i],
|
|
1808
|
-
.utrecht-html input[type=number i] {
|
|
1809
|
-
-moz-appearance: textfield;
|
|
1810
|
-
/* avoid spinner input in Firefox */
|
|
1811
|
-
font-variant-numeric: lining-nums tabular-nums;
|
|
1812
|
-
}
|
|
1813
|
-
|
|
1814
|
-
.utrecht-textbox--password, .utrecht-html input[autocomplete~=current-password i],
|
|
1815
|
-
.utrecht-html input[autocomplete~=new-password i] {
|
|
1816
|
-
font-variant-ligatures: none;
|
|
1817
|
-
font-variant-numeric: slashed-zero;
|
|
1818
|
-
}
|
|
1819
|
-
|
|
1820
|
-
.utrecht-textbox--url, .utrecht-html input[type=url i] {
|
|
1821
|
-
font-variant-ligatures: none;
|
|
1822
|
-
}
|
|
1823
|
-
|
|
1824
|
-
.utrecht-textbox--html-input:focus:not(:focus-visible), .utrecht-html input:focus:not(:focus-visible):not([type]),
|
|
1825
|
-
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
1826
|
-
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
1827
|
-
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
1828
|
-
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
1829
|
-
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
1830
|
-
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
1831
|
-
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
1832
|
-
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
1833
|
-
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
1834
|
-
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
1835
|
-
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
1836
|
-
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
1837
|
-
/* undo focus ring */
|
|
1838
|
-
box-shadow: none;
|
|
1839
|
-
outline-style: none;
|
|
1840
|
-
}
|
|
1841
|
-
/**
|
|
1842
|
-
* @license EUPL-1.2
|
|
1843
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1844
|
-
*/
|
|
1845
|
-
/**
|
|
1846
|
-
* @license EUPL-1.2
|
|
1847
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1848
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1849
|
-
*/
|
|
1850
|
-
.utrecht-unordered-list, .utrecht-html ul {
|
|
1851
|
-
font-family: var(--utrecht-document-font-family, inherit);
|
|
1852
|
-
font-size: var(--utrecht-document-font-size, inherit);
|
|
1853
|
-
line-height: var(--utrecht-document-line-height, inherit);
|
|
1854
|
-
margin-block-end: 0;
|
|
1855
|
-
margin-block-start: 0;
|
|
1856
|
-
padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
|
|
1857
|
-
}
|
|
1858
|
-
|
|
1859
|
-
.utrecht-unordered-list--distanced, .utrecht-html ul {
|
|
1860
|
-
margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
|
|
1861
|
-
margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
|
|
1862
|
-
}
|
|
1863
|
-
|
|
1864
|
-
.utrecht-unordered-list--nested {
|
|
1865
|
-
margin-block-end: 0;
|
|
1866
|
-
margin-inline-start: 2ch;
|
|
1867
|
-
}
|
|
1868
|
-
|
|
1869
|
-
.utrecht-unordered-list__item, .utrecht-html ul > li {
|
|
1870
|
-
margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
|
|
1871
|
-
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
1872
|
-
padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
|
|
1873
|
-
}
|
|
1874
|
-
|
|
1875
|
-
.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
|
|
1876
|
-
.utrecht-unordered-list__marker {
|
|
1877
|
-
color: var(--utrecht-unordered-list-marker-color);
|
|
1878
|
-
content: "●";
|
|
1879
|
-
}
|
|
1880
|
-
|
|
1881
|
-
/**
|
|
1882
|
-
* @license EUPL-1.2
|
|
1883
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1884
|
-
*/
|
|
1885
|
-
/**
|
|
1886
|
-
* @license EUPL-1.2
|
|
1887
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1888
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1889
|
-
*/
|
|
1890
|
-
/* stylelint-disable scss/no-global-function-names */
|
|
1891
|
-
/**
|
|
1892
|
-
* @license EUPL-1.2
|
|
1893
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1894
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1895
|
-
*/
|
|
1896
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1897
|
-
/*
|
|
1898
|
-
|
|
1899
|
-
# CSS implementation
|
|
1900
|
-
|
|
1901
|
-
## `text-decoration-skip`
|
|
1902
|
-
|
|
1903
|
-
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
1904
|
-
For example by obscuring Arabic diacritics.
|
|
1905
|
-
|
|
1906
|
-
However, the combination of a greater thickness and skipping this thick underline
|
|
1907
|
-
leads to a very unappealing rendering of the underline. To avoid this,
|
|
1908
|
-
`text-decoration-skip` is disabled for interactive states.
|
|
1909
|
-
|
|
1910
|
-
For design token configurations that have identical thickness for normal and interactive
|
|
1911
|
-
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
1912
|
-
from an interrupted to an uninterrupted underline (for some texts).
|
|
1913
|
-
|
|
1914
|
-
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
1915
|
-
|
|
1916
|
-
---
|
|
1917
|
-
|
|
1918
|
-
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
1919
|
-
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
1920
|
-
not make this too inconvenient.
|
|
1921
|
-
|
|
1922
|
-
---
|
|
1923
|
-
|
|
1924
|
-
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
1925
|
-
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
1926
|
-
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
1927
|
-
|
|
1928
|
-
## `text-decoration-thickness`
|
|
1929
|
-
|
|
1930
|
-
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
1931
|
-
|
|
1932
|
-
---
|
|
1933
|
-
|
|
1934
|
-
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
1935
|
-
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
1936
|
-
the underline offset also seems to increase along with the thickness, which effectively means
|
|
1937
|
-
the underline is closer to the next line than in Safari.
|
|
1938
|
-
|
|
1939
|
-
---
|
|
1940
|
-
|
|
1941
|
-
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
1942
|
-
use the `max()` function to ensure the underline remains visible for every font size.
|
|
1943
|
-
|
|
1944
|
-
## `transition`
|
|
1945
|
-
|
|
1946
|
-
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
1947
|
-
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
1948
|
-
|
|
1949
|
-
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
1950
|
-
|
|
1951
|
-
*/
|
|
1952
|
-
.utrecht-link, .utrecht-html a:link {
|
|
578
|
+
.utrecht-html a:link {
|
|
1953
579
|
color: var(--utrecht-link-color, blue);
|
|
1954
580
|
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
1955
581
|
text-decoration-skip-ink: all;
|
|
1956
582
|
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
1957
583
|
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
1958
584
|
}
|
|
1959
|
-
|
|
1960
|
-
.utrecht-link--icon-left {
|
|
1961
|
-
background-image: var(--utrecht-link-icon-left-background-image, none);
|
|
1962
|
-
background-position: 0 0.25em;
|
|
1963
|
-
background-repeat: no-repeat;
|
|
1964
|
-
color: var(--utrecht-link-color, blue);
|
|
1965
|
-
font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
1966
|
-
padding-inline-start: var(--utrecht-space-block-md);
|
|
1967
|
-
text-decoration: none;
|
|
1968
|
-
}
|
|
1969
|
-
|
|
1970
|
-
.utrecht-link:visited,
|
|
1971
|
-
.utrecht-link--visited,
|
|
1972
585
|
.utrecht-html a:visited {
|
|
1973
586
|
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
1974
587
|
}
|
|
1975
|
-
|
|
1976
|
-
.utrecht-link:hover,
|
|
1977
|
-
.utrecht-link--hover,
|
|
1978
588
|
.utrecht-html a:hover {
|
|
1979
589
|
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
1980
590
|
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
@@ -1982,90 +592,47 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1982
592
|
text-decoration-skip-ink: none;
|
|
1983
593
|
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1984
594
|
}
|
|
1985
|
-
|
|
1986
|
-
.utrecht-link:active,
|
|
1987
|
-
.utrecht-link--active,
|
|
1988
595
|
.utrecht-html a:active {
|
|
1989
596
|
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
1990
597
|
}
|
|
1991
|
-
|
|
1992
|
-
.utrecht-link--focus, .utrecht-link:focus, .utrecht-html a:focus {
|
|
598
|
+
.utrecht-html a:focus {
|
|
1993
599
|
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
1994
600
|
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
1995
601
|
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1996
602
|
text-decoration-skip: none;
|
|
1997
603
|
text-decoration-skip-ink: none;
|
|
1998
604
|
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1999
|
-
}
|
|
2000
|
-
|
|
2001
|
-
.utrecht-link--focus-visible, .utrecht-link:focus, .utrecht-html a:focus {
|
|
2002
605
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2003
606
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2004
607
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2005
608
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2006
609
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2007
610
|
}
|
|
2008
|
-
|
|
2009
|
-
.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
|
|
611
|
+
.utrecht-html a:focus:not(:focus-visible) {
|
|
2010
612
|
/* undo focus ring */
|
|
2011
613
|
box-shadow: none;
|
|
2012
614
|
outline-style: none;
|
|
2013
615
|
}
|
|
2014
|
-
|
|
2015
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2016
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2017
|
-
.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
|
|
616
|
+
.utrecht-html a[href^="tel:" i] {
|
|
2018
617
|
white-space: nowrap;
|
|
2019
618
|
}
|
|
2020
|
-
|
|
2021
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2022
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2023
|
-
.utrecht-html a:focus:not(:focus-visible) {
|
|
2024
|
-
/* undo focus ring */
|
|
2025
|
-
box-shadow: none;
|
|
2026
|
-
outline-style: none;
|
|
2027
|
-
}
|
|
2028
|
-
|
|
2029
|
-
/**
|
|
2030
|
-
* @license EUPL-1.2
|
|
2031
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2032
|
-
*/
|
|
2033
|
-
/**
|
|
2034
|
-
* @license EUPL-1.2
|
|
2035
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2036
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2037
|
-
*/
|
|
2038
|
-
.utrecht-ordered-list, .utrecht-html ol {
|
|
619
|
+
.utrecht-html ol {
|
|
2039
620
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
2040
621
|
margin-block-end: 0;
|
|
2041
622
|
margin-block-start: 0;
|
|
2042
623
|
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
2043
|
-
}
|
|
2044
|
-
|
|
2045
|
-
.utrecht-ordered-list--distanced, .utrecht-html ol {
|
|
2046
624
|
margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
|
|
2047
625
|
margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
|
|
2048
626
|
}
|
|
2049
|
-
|
|
2050
|
-
.utrecht-ordered-list--arabic, .utrecht-html ol:lang(ar) {
|
|
2051
|
-
list-style: arabic-indic;
|
|
2052
|
-
}
|
|
2053
|
-
|
|
2054
|
-
.utrecht-ordered-list__item, .utrecht-html ol > li {
|
|
627
|
+
.utrecht-html ol > li {
|
|
2055
628
|
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
|
|
2056
629
|
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
2057
630
|
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
2058
631
|
}
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
*/
|
|
2064
|
-
/**
|
|
2065
|
-
* @license EUPL-1.2
|
|
2066
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
2067
|
-
*/
|
|
2068
|
-
.utrecht-paragraph, .utrecht-html p {
|
|
632
|
+
.utrecht-html ol:lang(ar) {
|
|
633
|
+
list-style: arabic-indic;
|
|
634
|
+
}
|
|
635
|
+
.utrecht-html p {
|
|
2069
636
|
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
2070
637
|
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
2071
638
|
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
@@ -2074,76 +641,39 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2074
641
|
margin-block-end: 0;
|
|
2075
642
|
margin-block-start: 0;
|
|
2076
643
|
}
|
|
2077
|
-
|
|
2078
|
-
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
644
|
+
.utrecht-html p.lead {
|
|
2079
645
|
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
2080
646
|
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
2081
647
|
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
2082
648
|
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
2083
|
-
}
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
margin-block-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
/* stylelint-disable selector-class-pattern */
|
|
2091
|
-
/**
|
|
2092
|
-
* @license EUPL-1.2
|
|
2093
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2094
|
-
*/
|
|
2095
|
-
/**
|
|
2096
|
-
* @license EUPL-1.2
|
|
2097
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2098
|
-
*/
|
|
2099
|
-
/**
|
|
2100
|
-
* @license EUPL-1.2
|
|
2101
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2102
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2103
|
-
*/
|
|
2104
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2105
|
-
.utrecht-radio-button, .utrecht-html input[type=radio i] {
|
|
2106
|
-
margin-block-end: 0;
|
|
649
|
+
}
|
|
650
|
+
.utrecht-html * ~ p {
|
|
651
|
+
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
652
|
+
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
653
|
+
}
|
|
654
|
+
.utrecht-html input[type=radio i] {
|
|
2107
655
|
/* reset native margin for input[type="radio" i] */
|
|
656
|
+
margin-block-end: 0;
|
|
2108
657
|
margin-block-start: 0;
|
|
2109
658
|
margin-inline-end: 0;
|
|
2110
659
|
margin-inline-start: 0;
|
|
2111
660
|
}
|
|
2112
|
-
|
|
2113
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2114
|
-
.utrecht-radio-button--disabled, .utrecht-radio-button--html-input:disabled, .utrecht-html input[type=radio i]:disabled {
|
|
661
|
+
.utrecht-html input[type=radio i]:disabled {
|
|
2115
662
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
2116
663
|
}
|
|
2117
|
-
|
|
2118
|
-
.utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
|
|
664
|
+
.utrecht-html input[type=radio i]:focus {
|
|
2119
665
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2120
666
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2121
667
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2122
668
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2123
669
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2124
670
|
}
|
|
2125
|
-
|
|
2126
|
-
.utrecht-radio-button--html-input:focus:not(:focus-visible), .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
671
|
+
.utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
2127
672
|
/* undo focus ring */
|
|
2128
673
|
box-shadow: none;
|
|
2129
674
|
outline-style: none;
|
|
2130
675
|
}
|
|
2131
|
-
|
|
2132
|
-
/**
|
|
2133
|
-
* @license EUPL-1.2
|
|
2134
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2135
|
-
*/
|
|
2136
|
-
/**
|
|
2137
|
-
* @license EUPL-1.2
|
|
2138
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2139
|
-
*/
|
|
2140
|
-
/**
|
|
2141
|
-
* @license EUPL-1.2
|
|
2142
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2143
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2144
|
-
*/
|
|
2145
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2146
|
-
.utrecht-select, .utrecht-html select {
|
|
676
|
+
.utrecht-html select {
|
|
2147
677
|
-moz-appearance: none;
|
|
2148
678
|
-webkit-appearance: none;
|
|
2149
679
|
appearance: none;
|
|
@@ -2168,74 +698,42 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2168
698
|
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
2169
699
|
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
2170
700
|
width: 100%;
|
|
701
|
+
/* <select> does not support :read-only */
|
|
2171
702
|
}
|
|
2172
|
-
|
|
2173
|
-
.utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
|
|
703
|
+
.utrecht-html select:disabled {
|
|
2174
704
|
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))));
|
|
2175
705
|
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))));
|
|
2176
706
|
color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
2177
707
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
2178
708
|
}
|
|
2179
|
-
|
|
2180
|
-
.utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
|
|
709
|
+
.utrecht-html select:focus {
|
|
2181
710
|
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))));
|
|
2182
711
|
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))));
|
|
2183
712
|
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
2184
|
-
}
|
|
2185
|
-
|
|
2186
|
-
.utrecht-select--focus-visible, .utrecht-select--html-select:focus, .utrecht-html select:focus {
|
|
2187
713
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2188
714
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2189
715
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2190
716
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2191
717
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2192
718
|
}
|
|
2193
|
-
|
|
2194
|
-
.utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
|
|
2195
|
-
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))));
|
|
2196
|
-
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))));
|
|
2197
|
-
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))));
|
|
2198
|
-
}
|
|
2199
|
-
|
|
2200
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2201
|
-
.utrecht-select--html-select, .utrecht-html select {
|
|
2202
|
-
/* <select> does not support :read-only */
|
|
2203
|
-
}
|
|
2204
|
-
.utrecht-select--html-select:focus:not(:focus-visible), .utrecht-html select:focus:not(:focus-visible) {
|
|
719
|
+
.utrecht-html select:focus:not(:focus-visible) {
|
|
2205
720
|
/* undo focus ring */
|
|
2206
721
|
box-shadow: none;
|
|
2207
722
|
outline-style: none;
|
|
2208
723
|
}
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2216
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2217
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
2218
|
-
*/
|
|
2219
|
-
.utrecht-separator, .utrecht-html hr {
|
|
724
|
+
.utrecht-html select:invalid, .utrecht-html select[aria-invalid=true] {
|
|
725
|
+
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))));
|
|
726
|
+
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))));
|
|
727
|
+
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))));
|
|
728
|
+
}
|
|
729
|
+
.utrecht-html hr {
|
|
2220
730
|
border-color: var(--utrecht-separator-color);
|
|
2221
731
|
border-style: solid;
|
|
2222
732
|
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
2223
|
-
}
|
|
2224
|
-
|
|
2225
|
-
.utrecht-separator--distanced, .utrecht-html hr {
|
|
2226
733
|
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
2227
734
|
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
2228
735
|
}
|
|
2229
|
-
|
|
2230
|
-
/**
|
|
2231
|
-
* @license EUPL-1.2
|
|
2232
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2233
|
-
*/
|
|
2234
|
-
/**
|
|
2235
|
-
* @license EUPL-1.2
|
|
2236
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2237
|
-
*/
|
|
2238
|
-
.utrecht-table, .utrecht-html table {
|
|
736
|
+
.utrecht-html table {
|
|
2239
737
|
border-collapse: collapse;
|
|
2240
738
|
border-color: var(--utrecht-table-border-color, 0);
|
|
2241
739
|
border-style: solid;
|
|
@@ -2243,14 +741,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2243
741
|
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
2244
742
|
font-size: var(--utrecht-table-font-size, inherit);
|
|
2245
743
|
width: 100%;
|
|
2246
|
-
}
|
|
2247
|
-
|
|
2248
|
-
.utrecht-table--distanced, .utrecht-html table {
|
|
2249
744
|
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
2250
745
|
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
2251
746
|
}
|
|
2252
|
-
|
|
2253
|
-
.utrecht-table__caption, .utrecht-html caption {
|
|
747
|
+
.utrecht-html caption {
|
|
2254
748
|
color: var(--utrecht-table-caption-color);
|
|
2255
749
|
font-family: var(--utrecht-table-caption-font-family);
|
|
2256
750
|
font-size: var(--utrecht-table-caption-font-size);
|
|
@@ -2259,34 +753,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2259
753
|
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
2260
754
|
text-align: var(--utrecht-table-caption-text-align, center);
|
|
2261
755
|
}
|
|
2262
|
-
|
|
2263
|
-
.utrecht-table__header, .utrecht-html thead {
|
|
756
|
+
.utrecht-html thead {
|
|
2264
757
|
background-color: var(--utrecht-table-header-background-color);
|
|
2265
758
|
color: var(--utrecht-table-header-color);
|
|
2266
759
|
font-weight: var(--utrecht-table-header-font-weight);
|
|
2267
760
|
text-transform: var(--utrecht-table-header-text-transform);
|
|
2268
761
|
vertical-align: bottom;
|
|
2269
762
|
}
|
|
2270
|
-
|
|
2271
|
-
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
2272
|
-
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
2273
|
-
border-block-end-style: solid;
|
|
2274
|
-
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
2275
|
-
}
|
|
2276
|
-
|
|
2277
|
-
.utrecht-table__body, .utrecht-html tbody {
|
|
763
|
+
.utrecht-html tbody {
|
|
2278
764
|
vertical-align: baseline;
|
|
2279
765
|
}
|
|
2280
|
-
|
|
2281
|
-
.utrecht-table__header-cell, .utrecht-html th {
|
|
766
|
+
.utrecht-html th {
|
|
2282
767
|
color: var(--utrecht-table-header-cell-color);
|
|
2283
768
|
font-size: var(--utrecht-table-header-cell-font-size);
|
|
2284
769
|
font-weight: var(--utrecht-table-header-cell-font-weight);
|
|
2285
770
|
text-align: start;
|
|
2286
771
|
text-transform: var(--utrecht-table-header-cell-text-transform);
|
|
2287
772
|
}
|
|
2288
|
-
|
|
2289
|
-
.utrecht-table__cell, .utrecht-html th,
|
|
773
|
+
.utrecht-html th,
|
|
2290
774
|
.utrecht-html td {
|
|
2291
775
|
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
2292
776
|
border-block-end-style: solid;
|
|
@@ -2298,57 +782,47 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2298
782
|
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
2299
783
|
text-align: start;
|
|
2300
784
|
}
|
|
2301
|
-
|
|
2302
|
-
.utrecht-table__cell--first, .utrecht-html td:first-child,
|
|
785
|
+
.utrecht-html td:first-child,
|
|
2303
786
|
.utrecht-html th:first-child {
|
|
2304
787
|
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
2305
788
|
}
|
|
2306
|
-
|
|
2307
|
-
.utrecht-table__cell--last, .utrecht-html td:last-child,
|
|
789
|
+
.utrecht-html td:last-child,
|
|
2308
790
|
.utrecht-html th:last-child {
|
|
2309
791
|
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
2310
792
|
}
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
793
|
+
.utrecht-html thead tr:last-child th {
|
|
794
|
+
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
795
|
+
border-block-end-style: solid;
|
|
796
|
+
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
797
|
+
}
|
|
2314
798
|
.utrecht-html thead > tr > th.numeric,
|
|
2315
799
|
.utrecht-html tfoot > tr > th.numeric,
|
|
2316
|
-
.utrecht-html th[scope=column].numeric
|
|
2317
|
-
.utrecht-html td.numeric {
|
|
800
|
+
.utrecht-html th[scope=column].numeric {
|
|
2318
801
|
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
2319
802
|
text-align: right;
|
|
2320
803
|
}
|
|
2321
|
-
|
|
2322
|
-
|
|
804
|
+
.utrecht-html td.numeric {
|
|
805
|
+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
806
|
+
text-align: right;
|
|
2323
807
|
font-variant-numeric: lining-nums tabular-nums;
|
|
2324
808
|
}
|
|
2325
|
-
|
|
2326
|
-
|
|
809
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
|
|
810
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
811
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
812
|
+
}
|
|
813
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
|
|
2327
814
|
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
2328
815
|
color: var(--utrecht-table-row-alternate-odd-color);
|
|
2329
816
|
}
|
|
2330
|
-
|
|
2331
|
-
.utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
|
|
817
|
+
.utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
|
|
2332
818
|
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
2333
819
|
color: var(--utrecht-table-row-alternate-even-color);
|
|
2334
820
|
}
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
*/
|
|
2341
|
-
/**
|
|
2342
|
-
* @license EUPL-1.2
|
|
2343
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2344
|
-
*/
|
|
2345
|
-
/**
|
|
2346
|
-
* @license EUPL-1.2
|
|
2347
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2348
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2349
|
-
*/
|
|
2350
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2351
|
-
.utrecht-textarea, .utrecht-html textarea {
|
|
821
|
+
.utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
|
|
822
|
+
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
823
|
+
color: var(--utrecht-table-row-alternate-odd-color);
|
|
824
|
+
}
|
|
825
|
+
.utrecht-html textarea {
|
|
2352
826
|
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
|
|
2353
827
|
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
|
|
2354
828
|
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
|
|
@@ -2368,65 +842,42 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2368
842
|
resize: vertical;
|
|
2369
843
|
width: 100%;
|
|
2370
844
|
}
|
|
2371
|
-
|
|
2372
|
-
.utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true], .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
|
|
2373
|
-
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))));
|
|
2374
|
-
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))));
|
|
2375
|
-
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))));
|
|
2376
|
-
}
|
|
2377
|
-
|
|
2378
|
-
.utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
|
|
845
|
+
.utrecht-html textarea:disabled {
|
|
2379
846
|
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))));
|
|
2380
847
|
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))));
|
|
2381
848
|
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2382
849
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
2383
850
|
}
|
|
2384
|
-
|
|
2385
|
-
.utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
851
|
+
.utrecht-html textarea:focus {
|
|
2386
852
|
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))));
|
|
2387
853
|
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))));
|
|
2388
854
|
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2389
|
-
}
|
|
2390
|
-
|
|
2391
|
-
.utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
2392
855
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2393
856
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2394
857
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2395
858
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2396
859
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2397
860
|
}
|
|
2398
|
-
|
|
2399
|
-
|
|
861
|
+
.utrecht-html textarea:focus:not(:focus-visible) {
|
|
862
|
+
/* undo focus ring */
|
|
863
|
+
box-shadow: none;
|
|
864
|
+
outline-style: none;
|
|
865
|
+
}
|
|
866
|
+
.utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
|
|
867
|
+
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))));
|
|
868
|
+
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))));
|
|
869
|
+
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))));
|
|
870
|
+
}
|
|
871
|
+
.utrecht-html textarea:read-only {
|
|
2400
872
|
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))));
|
|
2401
873
|
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2402
874
|
}
|
|
2403
|
-
|
|
2404
|
-
.utrecht-textarea__placeholder, .utrecht-textarea--html-textarea::placeholder, .utrecht-html textarea::placeholder {
|
|
875
|
+
.utrecht-html textarea::placeholder {
|
|
2405
876
|
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2406
877
|
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
2407
878
|
opacity: 100%;
|
|
2408
879
|
}
|
|
2409
|
-
|
|
2410
|
-
.utrecht-textarea--html-textarea:focus:not(:focus-visible), .utrecht-html textarea:focus:not(:focus-visible) {
|
|
2411
|
-
/* undo focus ring */
|
|
2412
|
-
box-shadow: none;
|
|
2413
|
-
outline-style: none;
|
|
2414
|
-
}
|
|
2415
|
-
/**
|
|
2416
|
-
* @license EUPL-1.2
|
|
2417
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2418
|
-
*/
|
|
2419
|
-
/**
|
|
2420
|
-
* @license EUPL-1.2
|
|
2421
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2422
|
-
*/
|
|
2423
|
-
/**
|
|
2424
|
-
* @license EUPL-1.2
|
|
2425
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2426
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2427
|
-
*/
|
|
2428
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2429
|
-
.utrecht-textbox, .utrecht-html input:not([type]),
|
|
880
|
+
.utrecht-html input:not([type]),
|
|
2430
881
|
.utrecht-html input[type=date i],
|
|
2431
882
|
.utrecht-html input[type=datetime-local i],
|
|
2432
883
|
.utrecht-html input[type=email i],
|
|
@@ -2456,38 +907,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2456
907
|
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
2457
908
|
width: 100%;
|
|
2458
909
|
}
|
|
2459
|
-
|
|
2460
|
-
.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input:invalid:not([type]),
|
|
2461
|
-
.utrecht-html input[type=date i]:invalid,
|
|
2462
|
-
.utrecht-html input[type=datetime-local i]:invalid,
|
|
2463
|
-
.utrecht-html input[type=email i]:invalid,
|
|
2464
|
-
.utrecht-html input[type=month i]:invalid,
|
|
2465
|
-
.utrecht-html input[type=number i]:invalid,
|
|
2466
|
-
.utrecht-html input[type=password i]:invalid,
|
|
2467
|
-
.utrecht-html input[type=search i]:invalid,
|
|
2468
|
-
.utrecht-html input[type=tel i]:invalid,
|
|
2469
|
-
.utrecht-html input[type=text i]:invalid,
|
|
2470
|
-
.utrecht-html input[type=time i]:invalid,
|
|
2471
|
-
.utrecht-html input[type=url i]:invalid,
|
|
2472
|
-
.utrecht-html input[type=week i]:invalid, .utrecht-html input[aria-invalid=true]:not([type]),
|
|
2473
|
-
.utrecht-html input[aria-invalid=true][type=date i],
|
|
2474
|
-
.utrecht-html input[aria-invalid=true][type=datetime-local i],
|
|
2475
|
-
.utrecht-html input[aria-invalid=true][type=email i],
|
|
2476
|
-
.utrecht-html input[aria-invalid=true][type=month i],
|
|
2477
|
-
.utrecht-html input[aria-invalid=true][type=number i],
|
|
2478
|
-
.utrecht-html input[aria-invalid=true][type=password i],
|
|
2479
|
-
.utrecht-html input[aria-invalid=true][type=search i],
|
|
2480
|
-
.utrecht-html input[aria-invalid=true][type=tel i],
|
|
2481
|
-
.utrecht-html input[aria-invalid=true][type=text i],
|
|
2482
|
-
.utrecht-html input[aria-invalid=true][type=time i],
|
|
2483
|
-
.utrecht-html input[aria-invalid=true][type=url i],
|
|
2484
|
-
.utrecht-html input[aria-invalid=true][type=week i] {
|
|
2485
|
-
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))));
|
|
2486
|
-
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))));
|
|
2487
|
-
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))));
|
|
2488
|
-
}
|
|
2489
|
-
|
|
2490
|
-
.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input:disabled:not([type]),
|
|
910
|
+
.utrecht-html input:not([type]):disabled,
|
|
2491
911
|
.utrecht-html input[type=date i]:disabled,
|
|
2492
912
|
.utrecht-html input[type=datetime-local i]:disabled,
|
|
2493
913
|
.utrecht-html input[type=email i]:disabled,
|
|
@@ -2505,8 +925,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2505
925
|
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2506
926
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
2507
927
|
}
|
|
2508
|
-
|
|
2509
|
-
.utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
928
|
+
.utrecht-html input:not([type]):focus,
|
|
2510
929
|
.utrecht-html input[type=date i]:focus,
|
|
2511
930
|
.utrecht-html input[type=datetime-local i]:focus,
|
|
2512
931
|
.utrecht-html input[type=email i]:focus,
|
|
@@ -2522,29 +941,59 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2522
941
|
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))));
|
|
2523
942
|
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))));
|
|
2524
943
|
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2525
|
-
}
|
|
2526
|
-
|
|
2527
|
-
.utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
2528
|
-
.utrecht-html input[type=date i]:focus,
|
|
2529
|
-
.utrecht-html input[type=datetime-local i]:focus,
|
|
2530
|
-
.utrecht-html input[type=email i]:focus,
|
|
2531
|
-
.utrecht-html input[type=month i]:focus,
|
|
2532
|
-
.utrecht-html input[type=number i]:focus,
|
|
2533
|
-
.utrecht-html input[type=password i]:focus,
|
|
2534
|
-
.utrecht-html input[type=search i]:focus,
|
|
2535
|
-
.utrecht-html input[type=tel i]:focus,
|
|
2536
|
-
.utrecht-html input[type=text i]:focus,
|
|
2537
|
-
.utrecht-html input[type=time i]:focus,
|
|
2538
|
-
.utrecht-html input[type=url i]:focus,
|
|
2539
|
-
.utrecht-html input[type=week i]:focus {
|
|
2540
944
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2541
945
|
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2542
946
|
outline-offset: var(--utrecht-focus-outline-offset, 0);
|
|
2543
947
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2544
948
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2545
949
|
}
|
|
2546
|
-
|
|
2547
|
-
.utrecht-
|
|
950
|
+
.utrecht-html input:not([type]):focus:not(:focus-visible),
|
|
951
|
+
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
952
|
+
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
953
|
+
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
954
|
+
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
955
|
+
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
956
|
+
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
957
|
+
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
958
|
+
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
959
|
+
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
960
|
+
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
961
|
+
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
962
|
+
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
963
|
+
/* undo focus ring */
|
|
964
|
+
box-shadow: none;
|
|
965
|
+
outline-style: none;
|
|
966
|
+
}
|
|
967
|
+
.utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
|
|
968
|
+
.utrecht-html input[type=date i]:invalid,
|
|
969
|
+
.utrecht-html input[type=date i][aria-invalid=true],
|
|
970
|
+
.utrecht-html input[type=datetime-local i]:invalid,
|
|
971
|
+
.utrecht-html input[type=datetime-local i][aria-invalid=true],
|
|
972
|
+
.utrecht-html input[type=email i]:invalid,
|
|
973
|
+
.utrecht-html input[type=email i][aria-invalid=true],
|
|
974
|
+
.utrecht-html input[type=month i]:invalid,
|
|
975
|
+
.utrecht-html input[type=month i][aria-invalid=true],
|
|
976
|
+
.utrecht-html input[type=number i]:invalid,
|
|
977
|
+
.utrecht-html input[type=number i][aria-invalid=true],
|
|
978
|
+
.utrecht-html input[type=password i]:invalid,
|
|
979
|
+
.utrecht-html input[type=password i][aria-invalid=true],
|
|
980
|
+
.utrecht-html input[type=search i]:invalid,
|
|
981
|
+
.utrecht-html input[type=search i][aria-invalid=true],
|
|
982
|
+
.utrecht-html input[type=tel i]:invalid,
|
|
983
|
+
.utrecht-html input[type=tel i][aria-invalid=true],
|
|
984
|
+
.utrecht-html input[type=text i]:invalid,
|
|
985
|
+
.utrecht-html input[type=text i][aria-invalid=true],
|
|
986
|
+
.utrecht-html input[type=time i]:invalid,
|
|
987
|
+
.utrecht-html input[type=time i][aria-invalid=true],
|
|
988
|
+
.utrecht-html input[type=url i]:invalid,
|
|
989
|
+
.utrecht-html input[type=url i][aria-invalid=true],
|
|
990
|
+
.utrecht-html input[type=week i]:invalid,
|
|
991
|
+
.utrecht-html input[type=week i][aria-invalid=true] {
|
|
992
|
+
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))));
|
|
993
|
+
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))));
|
|
994
|
+
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))));
|
|
995
|
+
}
|
|
996
|
+
.utrecht-html input:not([type]):read-only,
|
|
2548
997
|
.utrecht-html input[type=date i]:read-only,
|
|
2549
998
|
.utrecht-html input[type=datetime-local i]:read-only,
|
|
2550
999
|
.utrecht-html input[type=email i]:read-only,
|
|
@@ -2560,8 +1009,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2560
1009
|
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))));
|
|
2561
1010
|
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
2562
1011
|
}
|
|
2563
|
-
|
|
2564
|
-
.utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder, .utrecht-html input:not([type])::placeholder,
|
|
1012
|
+
.utrecht-html input:not([type])::placeholder,
|
|
2565
1013
|
.utrecht-html input[type=date i]::placeholder,
|
|
2566
1014
|
.utrecht-html input[type=datetime-local i]::placeholder,
|
|
2567
1015
|
.utrecht-html input[type=email i]::placeholder,
|
|
@@ -2578,8 +1026,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2578
1026
|
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
2579
1027
|
opacity: 100%;
|
|
2580
1028
|
}
|
|
2581
|
-
|
|
2582
|
-
.utrecht-
|
|
1029
|
+
.utrecht-html input[autocomplete~=current-password i],
|
|
1030
|
+
.utrecht-html input[autocomplete~=new-password i] {
|
|
1031
|
+
font-variant-ligatures: none;
|
|
1032
|
+
font-variant-numeric: slashed-zero;
|
|
1033
|
+
}
|
|
1034
|
+
.utrecht-html input[type=url i] {
|
|
1035
|
+
font-variant-ligatures: none;
|
|
1036
|
+
}
|
|
1037
|
+
.utrecht-html input[autocomplete~=bday i],
|
|
2583
1038
|
.utrecht-html input[autocomplete~=bday-day i],
|
|
2584
1039
|
.utrecht-html input[autocomplete~=bday-month i],
|
|
2585
1040
|
.utrecht-html input[autocomplete~=bday-year i],
|
|
@@ -2604,70 +1059,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
2604
1059
|
/* avoid spinner input in Firefox */
|
|
2605
1060
|
font-variant-numeric: lining-nums tabular-nums;
|
|
2606
1061
|
}
|
|
2607
|
-
|
|
2608
|
-
.utrecht-textbox--password, .utrecht-html input[autocomplete~=current-password i],
|
|
2609
|
-
.utrecht-html input[autocomplete~=new-password i] {
|
|
2610
|
-
font-variant-ligatures: none;
|
|
2611
|
-
font-variant-numeric: slashed-zero;
|
|
2612
|
-
}
|
|
2613
|
-
|
|
2614
|
-
.utrecht-textbox--url, .utrecht-html input[type=url i] {
|
|
2615
|
-
font-variant-ligatures: none;
|
|
2616
|
-
}
|
|
2617
|
-
|
|
2618
|
-
.utrecht-textbox--html-input:focus:not(:focus-visible), .utrecht-html input:focus:not(:focus-visible):not([type]),
|
|
2619
|
-
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
2620
|
-
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
2621
|
-
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
2622
|
-
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
2623
|
-
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
2624
|
-
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
2625
|
-
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
2626
|
-
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
2627
|
-
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
2628
|
-
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
2629
|
-
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
2630
|
-
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
2631
|
-
/* undo focus ring */
|
|
2632
|
-
box-shadow: none;
|
|
2633
|
-
outline-style: none;
|
|
2634
|
-
}
|
|
2635
|
-
/**
|
|
2636
|
-
* @license EUPL-1.2
|
|
2637
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2638
|
-
*/
|
|
2639
|
-
/**
|
|
2640
|
-
* @license EUPL-1.2
|
|
2641
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2642
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2643
|
-
*/
|
|
2644
|
-
.utrecht-unordered-list, .utrecht-html ul {
|
|
1062
|
+
.utrecht-html ul {
|
|
2645
1063
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
2646
1064
|
font-size: var(--utrecht-document-font-size, inherit);
|
|
2647
1065
|
line-height: var(--utrecht-document-line-height, inherit);
|
|
2648
1066
|
margin-block-end: 0;
|
|
2649
1067
|
margin-block-start: 0;
|
|
2650
1068
|
padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
|
|
2651
|
-
}
|
|
2652
|
-
|
|
2653
|
-
.utrecht-unordered-list--distanced, .utrecht-html ul {
|
|
2654
1069
|
margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
|
|
2655
1070
|
margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
|
|
2656
1071
|
}
|
|
2657
|
-
|
|
2658
|
-
.utrecht-unordered-list--nested {
|
|
2659
|
-
margin-block-end: 0;
|
|
2660
|
-
margin-inline-start: 2ch;
|
|
2661
|
-
}
|
|
2662
|
-
|
|
2663
|
-
.utrecht-unordered-list__item, .utrecht-html ul > li {
|
|
1072
|
+
.utrecht-html ul > li {
|
|
2664
1073
|
margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
|
|
2665
1074
|
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
2666
1075
|
padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
|
|
2667
1076
|
}
|
|
2668
|
-
|
|
2669
|
-
.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
|
|
2670
|
-
.utrecht-unordered-list__marker {
|
|
1077
|
+
.utrecht-html ul > li::marker {
|
|
2671
1078
|
color: var(--utrecht-unordered-list-marker-color);
|
|
2672
1079
|
content: "●";
|
|
2673
1080
|
}
|