@utrecht/component-library-css 1.0.0-alpha.52 → 1.0.0-alpha.521
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/html.css +1366 -1125
- package/dist/index.css +4778 -2484
- package/html-component.md +4 -3
- package/package.json +7 -4
- package/project.json +18 -0
- package/src/html.scss +1 -24
- package/src/index.scss +12 -7
- package/dist/bem.css +0 -1485
- package/dist/root-theme.css +0 -567
- package/src/bem.scss +0 -58
- package/src/root-theme.scss +0 -9
package/dist/html.css
CHANGED
|
@@ -12,20 +12,17 @@
|
|
|
12
12
|
* @license EUPL-1.2
|
|
13
13
|
* Copyright (c) 2021 Robbert Broersma
|
|
14
14
|
*/
|
|
15
|
-
/*
|
|
16
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
15
|
+
/* Collection of all semantic HTML styles in the component library */
|
|
17
16
|
/**
|
|
18
17
|
* @license EUPL-1.2
|
|
19
|
-
* Copyright (c)
|
|
18
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
19
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
20
20
|
*/
|
|
21
21
|
/**
|
|
22
22
|
* @license EUPL-1.2
|
|
23
|
-
* Copyright (c)
|
|
23
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
24
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
24
25
|
*/
|
|
25
|
-
.utrecht-article, .utrecht-html article {
|
|
26
|
-
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
26
|
/**
|
|
30
27
|
* @license EUPL-1.2
|
|
31
28
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -34,30 +31,6 @@
|
|
|
34
31
|
* @license EUPL-1.2
|
|
35
32
|
* Copyright (c) 2021 Robbert Broersma
|
|
36
33
|
*/
|
|
37
|
-
.utrecht-blockquote, .utrecht-html blockquote {
|
|
38
|
-
font-family: var(--utrecht-document-font-family);
|
|
39
|
-
font-size: var(--utrecht-blockquote-font-size);
|
|
40
|
-
margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
|
|
41
|
-
margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.utrecht-blockquote__attribution {
|
|
45
|
-
color: var(--utrecht-blockquote-attribution-color, inherit);
|
|
46
|
-
font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.utrecht-blockquote__content, .utrecht-html blockquote {
|
|
50
|
-
--utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
|
|
51
|
-
--utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
52
|
-
color: var(--utrecht-blockquote-content-color, inherit);
|
|
53
|
-
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.utrecht-blockquote--distanced, .utrecht-html blockquote {
|
|
57
|
-
margin-block-end: var(--utrecht-blockquote-margin-block-end);
|
|
58
|
-
margin-block-start: var(--utrecht-blockquote-margin-block-start);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
34
|
/**
|
|
62
35
|
* @license EUPL-1.2
|
|
63
36
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -67,273 +40,107 @@
|
|
|
67
40
|
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
68
41
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
69
42
|
*/
|
|
70
|
-
.utrecht-button, .utrecht-html button {
|
|
71
|
-
background-color: var(--utrecht-button-primary-action-background-color);
|
|
72
|
-
border-radius: var(--utrecht-button-border-radius);
|
|
73
|
-
border-width: var(--utrecht-button-border-width);
|
|
74
|
-
color: var(--utrecht-button-primary-action-color);
|
|
75
|
-
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
76
|
-
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
77
|
-
font-weight: var(--utrecht-button-font-weight);
|
|
78
|
-
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
79
|
-
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
80
|
-
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
81
|
-
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
82
|
-
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
83
|
-
text-transform: var(--utrecht-button-text-transform);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.utrecht-button--distanced, .utrecht-html button {
|
|
87
|
-
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
88
|
-
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
89
|
-
margin-inline-end: var(--utrecht-button-margin-inline-end);
|
|
90
|
-
margin-inline-start: var(--utrecht-button-margin-inline-start);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.utrecht-button:disabled, .utrecht-html button:disabled,
|
|
94
|
-
.utrecht-button--disabled {
|
|
95
|
-
background-color: var(--utrecht-button-disabled-background-color);
|
|
96
|
-
color: var(--utrecht-button-disabled-color);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.utrecht-button--focus, .utrecht-html button:focus,
|
|
100
|
-
.utrecht-button:not(.utrecht-button--disabled):focus {
|
|
101
|
-
background-color: var(--utrecht-focus-background-color);
|
|
102
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
103
|
-
color: var(--utrecht-focus-color, inherit);
|
|
104
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
105
|
-
outline-offset: 0;
|
|
106
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
107
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
|
|
111
|
-
.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
|
|
112
|
-
background-color: var(--utrecht-button-primary-action-hover-background-color);
|
|
113
|
-
color: var(--utrecht-button-primary-action-color);
|
|
114
|
-
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
115
|
-
}
|
|
116
|
-
|
|
117
43
|
/**
|
|
118
44
|
* @license EUPL-1.2
|
|
45
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
119
46
|
* Copyright (c) 2021 Robbert Broersma
|
|
120
47
|
*/
|
|
48
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
121
49
|
/**
|
|
122
50
|
* @license EUPL-1.2
|
|
123
51
|
* Copyright (c) 2021 Robbert Broersma
|
|
124
52
|
*/
|
|
125
|
-
.utrecht-checkbox, .utrecht-html input[type=checkbox] {
|
|
126
|
-
margin-block-end: 0;
|
|
127
|
-
/* reset native margin for input[type="checkbox"] */
|
|
128
|
-
margin-block-start: 0;
|
|
129
|
-
margin-inline-end: 0;
|
|
130
|
-
margin-inline-start: 0;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
53
|
/**
|
|
134
54
|
* @license EUPL-1.2
|
|
135
55
|
* Copyright (c) 2021 Robbert Broersma
|
|
136
56
|
*/
|
|
137
57
|
/**
|
|
138
58
|
* @license EUPL-1.2
|
|
59
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
139
60
|
* Copyright (c) 2021 Robbert Broersma
|
|
140
61
|
*/
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.utrecht-emphasis--strong, .utrecht-html strong {
|
|
146
|
-
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
147
|
-
}
|
|
148
|
-
|
|
62
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
63
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
149
64
|
/**
|
|
150
65
|
* @license EUPL-1.2
|
|
151
|
-
* Copyright (c)
|
|
66
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
67
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
152
68
|
*/
|
|
153
69
|
/**
|
|
154
70
|
* @license EUPL-1.2
|
|
155
|
-
* Copyright (c)
|
|
71
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
72
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
156
73
|
*/
|
|
157
|
-
.utrecht-form-fieldset--distanced, .utrecht-html fieldset {
|
|
158
|
-
margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
|
|
159
|
-
margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.utrecht-form-fieldset__legend, .utrecht-html legend {
|
|
163
|
-
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
164
|
-
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
165
|
-
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
166
|
-
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
167
|
-
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
|
|
171
|
-
margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
|
|
172
|
-
margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.utrecht-html fieldset {
|
|
176
|
-
border: 0;
|
|
177
|
-
margin-inline-end: 0;
|
|
178
|
-
margin-inline-start: 0;
|
|
179
|
-
min-width: 0;
|
|
180
|
-
padding-block-end: 0;
|
|
181
|
-
padding-block-start: 0.01em;
|
|
182
|
-
padding-inline-end: 0;
|
|
183
|
-
padding-inline-start: 0;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.utrecht-html legend {
|
|
187
|
-
padding-inline-end: 0;
|
|
188
|
-
padding-inline-start: 0;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
74
|
/**
|
|
192
75
|
* @license EUPL-1.2
|
|
193
|
-
* Copyright (c)
|
|
76
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
77
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
78
|
+
*/
|
|
79
|
+
/**
|
|
80
|
+
* @license EUPL-1.2
|
|
81
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
82
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
83
|
+
*/
|
|
84
|
+
/**
|
|
85
|
+
* @license EUPL-1.2
|
|
86
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
87
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
194
88
|
*/
|
|
195
89
|
/**
|
|
196
90
|
* @license EUPL-1.2
|
|
197
91
|
* Copyright (c) 2021 Robbert Broersma
|
|
198
92
|
*/
|
|
199
|
-
.utrecht-form-label, .utrecht-html label {
|
|
200
|
-
font-size: var(--utrecht-form-label-font-size);
|
|
201
|
-
font-weight: var(--utrecht-form-label-font-weight);
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
.utrecht-form-label--checkbox, .utrecht-html input[type=checkbox] ~ label {
|
|
205
|
-
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.utrecht-form-label--radio, .utrecht-html input[type=radio] ~ label {
|
|
209
|
-
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
210
|
-
}
|
|
211
|
-
|
|
212
93
|
/**
|
|
213
94
|
* @license EUPL-1.2
|
|
214
95
|
* Copyright (c) 2021 Robbert Broersma
|
|
215
96
|
*/
|
|
216
97
|
/**
|
|
217
98
|
* @license EUPL-1.2
|
|
218
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
219
99
|
* Copyright (c) 2021 Robbert Broersma
|
|
220
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
221
100
|
*/
|
|
222
|
-
.utrecht-heading-1, .utrecht-html h1 {
|
|
223
|
-
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
224
|
-
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
225
|
-
font-size: var(--utrecht-heading-1-font-size);
|
|
226
|
-
font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
227
|
-
letter-spacing: var(--utrecht-heading-1-letter-spacing);
|
|
228
|
-
line-height: var(--utrecht-heading-1-line-height);
|
|
229
|
-
text-transform: var(--utrecht-heading-1-text-transform, inherit);
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.utrecht-heading-1--distanced, .utrecht-html h1 {
|
|
233
|
-
margin-block-end: var(--utrecht-heading-1-margin-block-end);
|
|
234
|
-
margin-block-start: var(--utrecht-heading-1-margin-block-start);
|
|
235
|
-
}
|
|
236
|
-
|
|
237
101
|
/**
|
|
238
102
|
* @license EUPL-1.2
|
|
239
103
|
* Copyright (c) 2021 Robbert Broersma
|
|
240
104
|
*/
|
|
241
105
|
/**
|
|
242
106
|
* @license EUPL-1.2
|
|
243
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
244
107
|
* Copyright (c) 2021 Robbert Broersma
|
|
245
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
246
108
|
*/
|
|
247
|
-
.utrecht-heading-2, .utrecht-html h2 {
|
|
248
|
-
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
249
|
-
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
250
|
-
font-size: var(--utrecht-heading-2-font-size);
|
|
251
|
-
font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
252
|
-
letter-spacing: var(--utrecht-heading-2-letter-spacing);
|
|
253
|
-
line-height: var(--utrecht-heading-2-line-height);
|
|
254
|
-
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.utrecht-heading-2--distanced, .utrecht-html h2 {
|
|
258
|
-
margin-block-end: var(--utrecht-heading-2-margin-block-end);
|
|
259
|
-
margin-block-start: var(--utrecht-heading-2-margin-block-start);
|
|
260
|
-
}
|
|
261
|
-
|
|
262
109
|
/**
|
|
263
110
|
* @license EUPL-1.2
|
|
264
111
|
* Copyright (c) 2021 Robbert Broersma
|
|
265
112
|
*/
|
|
266
113
|
/**
|
|
267
114
|
* @license EUPL-1.2
|
|
268
|
-
* Copyright (c)
|
|
115
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
116
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
117
|
+
*/
|
|
118
|
+
/**
|
|
119
|
+
* @license EUPL-1.2
|
|
120
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
121
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
122
|
+
*/
|
|
123
|
+
/**
|
|
124
|
+
* @license EUPL-1.2
|
|
269
125
|
* Copyright (c) 2021 Robbert Broersma
|
|
270
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
271
126
|
*/
|
|
272
|
-
.utrecht-heading-3, .utrecht-html h3 {
|
|
273
|
-
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
274
|
-
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
275
|
-
font-size: var(--utrecht-heading-3-font-size);
|
|
276
|
-
font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
277
|
-
letter-spacing: var(--utrecht-heading-3-letter-spacing);
|
|
278
|
-
line-height: var(--utrecht-heading-3-line-height);
|
|
279
|
-
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.utrecht-heading-3--distanced, .utrecht-html h3 {
|
|
283
|
-
margin-block-end: var(--utrecht-heading-3-margin-block-end);
|
|
284
|
-
margin-block-start: var(--utrecht-heading-3-margin-block-start);
|
|
285
|
-
}
|
|
286
|
-
|
|
287
127
|
/**
|
|
288
128
|
* @license EUPL-1.2
|
|
289
129
|
* Copyright (c) 2021 Robbert Broersma
|
|
290
130
|
*/
|
|
291
131
|
/**
|
|
292
132
|
* @license EUPL-1.2
|
|
293
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
294
133
|
* Copyright (c) 2021 Robbert Broersma
|
|
295
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
296
134
|
*/
|
|
297
|
-
|
|
298
|
-
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
299
|
-
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
300
|
-
font-size: var(--utrecht-heading-4-font-size);
|
|
301
|
-
font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
302
|
-
letter-spacing: var(--utrecht-heading-4-letter-spacing);
|
|
303
|
-
line-height: var(--utrecht-heading-4-line-height);
|
|
304
|
-
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
.utrecht-heading-4--distanced, .utrecht-html h4 {
|
|
308
|
-
margin-block-end: var(--utrecht-heading-4-margin-block-end);
|
|
309
|
-
margin-block-start: var(--utrecht-heading-4-margin-block-start);
|
|
310
|
-
}
|
|
311
|
-
|
|
135
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
312
136
|
/**
|
|
313
137
|
* @license EUPL-1.2
|
|
314
138
|
* Copyright (c) 2021 Robbert Broersma
|
|
315
139
|
*/
|
|
316
140
|
/**
|
|
317
141
|
* @license EUPL-1.2
|
|
318
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
319
142
|
* Copyright (c) 2021 Robbert Broersma
|
|
320
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
321
143
|
*/
|
|
322
|
-
.utrecht-heading-5, .utrecht-html h5 {
|
|
323
|
-
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
324
|
-
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
325
|
-
font-size: var(--utrecht-heading-5-font-size);
|
|
326
|
-
font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
327
|
-
letter-spacing: var(--utrecht-heading-5-letter-spacing);
|
|
328
|
-
line-height: var(--utrecht-heading-5-line-height);
|
|
329
|
-
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
.utrecht-heading-5--distanced, .utrecht-html h5 {
|
|
333
|
-
margin-block-end: var(--utrecht-heading-5-margin-block-end);
|
|
334
|
-
margin-block-start: var(--utrecht-heading-5-margin-block-start);
|
|
335
|
-
}
|
|
336
|
-
|
|
337
144
|
/**
|
|
338
145
|
* @license EUPL-1.2
|
|
339
146
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -344,281 +151,170 @@
|
|
|
344
151
|
* Copyright (c) 2021 Robbert Broersma
|
|
345
152
|
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
346
153
|
*/
|
|
347
|
-
.utrecht-heading-6, .utrecht-html h6 {
|
|
348
|
-
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
349
|
-
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
350
|
-
font-size: var(--utrecht-heading-6-font-size);
|
|
351
|
-
font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
352
|
-
letter-spacing: var(--utrecht-heading-6-letter-spacing);
|
|
353
|
-
line-height: var(--utrecht-heading-6-line-height);
|
|
354
|
-
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
.utrecht-heading-6--distanced, .utrecht-html h6 {
|
|
358
|
-
margin-block-end: var(--utrecht-heading-6-margin-block-end);
|
|
359
|
-
margin-block-start: var(--utrecht-heading-6-margin-block-start);
|
|
360
|
-
}
|
|
361
|
-
|
|
362
154
|
/**
|
|
363
155
|
* @license EUPL-1.2
|
|
364
|
-
* Copyright (c) 2021
|
|
156
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
365
157
|
*/
|
|
366
|
-
/* Collection of all semantic HTML styles in the component library */
|
|
367
158
|
/**
|
|
368
159
|
* @license EUPL-1.2
|
|
369
160
|
* Copyright (c) 2021 Robbert Broersma
|
|
370
161
|
*/
|
|
371
162
|
/**
|
|
372
163
|
* @license EUPL-1.2
|
|
164
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
373
165
|
* Copyright (c) 2021 Robbert Broersma
|
|
166
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
374
167
|
*/
|
|
375
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
376
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
377
168
|
/**
|
|
378
169
|
* @license EUPL-1.2
|
|
379
|
-
* Copyright (c) 2021
|
|
170
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
380
171
|
*/
|
|
381
172
|
/**
|
|
382
173
|
* @license EUPL-1.2
|
|
383
174
|
* Copyright (c) 2021 Robbert Broersma
|
|
384
175
|
*/
|
|
385
|
-
.utrecht-article, .utrecht-html article {
|
|
386
|
-
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
387
|
-
}
|
|
388
|
-
|
|
389
176
|
/**
|
|
390
177
|
* @license EUPL-1.2
|
|
178
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
391
179
|
* Copyright (c) 2021 Robbert Broersma
|
|
180
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
392
181
|
*/
|
|
393
182
|
/**
|
|
394
183
|
* @license EUPL-1.2
|
|
395
|
-
* Copyright (c) 2021
|
|
184
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
396
185
|
*/
|
|
397
|
-
.utrecht-blockquote, .utrecht-html blockquote {
|
|
398
|
-
font-family: var(--utrecht-document-font-family);
|
|
399
|
-
font-size: var(--utrecht-blockquote-font-size);
|
|
400
|
-
margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
|
|
401
|
-
margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
.utrecht-blockquote__attribution {
|
|
405
|
-
color: var(--utrecht-blockquote-attribution-color, inherit);
|
|
406
|
-
font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
.utrecht-blockquote__content, .utrecht-html blockquote {
|
|
410
|
-
--utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
|
|
411
|
-
--utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
412
|
-
color: var(--utrecht-blockquote-content-color, inherit);
|
|
413
|
-
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
.utrecht-blockquote--distanced, .utrecht-html blockquote {
|
|
417
|
-
margin-block-end: var(--utrecht-blockquote-margin-block-end);
|
|
418
|
-
margin-block-start: var(--utrecht-blockquote-margin-block-start);
|
|
419
|
-
}
|
|
420
|
-
|
|
421
186
|
/**
|
|
422
187
|
* @license EUPL-1.2
|
|
423
188
|
* Copyright (c) 2021 Robbert Broersma
|
|
424
189
|
*/
|
|
425
190
|
/**
|
|
426
191
|
* @license EUPL-1.2
|
|
427
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
428
192
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
193
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
194
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
429
195
|
*/
|
|
430
|
-
.utrecht-button, .utrecht-html button {
|
|
431
|
-
background-color: var(--utrecht-button-primary-action-background-color);
|
|
432
|
-
border-radius: var(--utrecht-button-border-radius);
|
|
433
|
-
border-width: var(--utrecht-button-border-width);
|
|
434
|
-
color: var(--utrecht-button-primary-action-color);
|
|
435
|
-
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
436
|
-
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
437
|
-
font-weight: var(--utrecht-button-font-weight);
|
|
438
|
-
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
439
|
-
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
440
|
-
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
441
|
-
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
442
|
-
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
443
|
-
text-transform: var(--utrecht-button-text-transform);
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
.utrecht-button--distanced, .utrecht-html button {
|
|
447
|
-
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
448
|
-
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
449
|
-
margin-inline-end: var(--utrecht-button-margin-inline-end);
|
|
450
|
-
margin-inline-start: var(--utrecht-button-margin-inline-start);
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
.utrecht-button:disabled, .utrecht-html button:disabled,
|
|
454
|
-
.utrecht-button--disabled {
|
|
455
|
-
background-color: var(--utrecht-button-disabled-background-color);
|
|
456
|
-
color: var(--utrecht-button-disabled-color);
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
.utrecht-button--focus, .utrecht-html button:focus,
|
|
460
|
-
.utrecht-button:not(.utrecht-button--disabled):focus {
|
|
461
|
-
background-color: var(--utrecht-focus-background-color);
|
|
462
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
463
|
-
color: var(--utrecht-focus-color, inherit);
|
|
464
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
465
|
-
outline-offset: 0;
|
|
466
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
467
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
|
|
471
|
-
.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
|
|
472
|
-
background-color: var(--utrecht-button-primary-action-hover-background-color);
|
|
473
|
-
color: var(--utrecht-button-primary-action-color);
|
|
474
|
-
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
475
|
-
}
|
|
476
|
-
|
|
477
196
|
/**
|
|
478
197
|
* @license EUPL-1.2
|
|
479
|
-
* Copyright (c) 2021
|
|
198
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
480
199
|
*/
|
|
481
200
|
/**
|
|
482
201
|
* @license EUPL-1.2
|
|
483
202
|
* Copyright (c) 2021 Robbert Broersma
|
|
484
203
|
*/
|
|
485
|
-
.utrecht-checkbox, .utrecht-html input[type=checkbox] {
|
|
486
|
-
margin-block-end: 0;
|
|
487
|
-
/* reset native margin for input[type="checkbox"] */
|
|
488
|
-
margin-block-start: 0;
|
|
489
|
-
margin-inline-end: 0;
|
|
490
|
-
margin-inline-start: 0;
|
|
491
|
-
}
|
|
492
|
-
|
|
493
204
|
/**
|
|
494
205
|
* @license EUPL-1.2
|
|
206
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
495
207
|
* Copyright (c) 2021 Robbert Broersma
|
|
208
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
496
209
|
*/
|
|
497
210
|
/**
|
|
498
211
|
* @license EUPL-1.2
|
|
499
|
-
* Copyright (c) 2021
|
|
212
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
500
213
|
*/
|
|
501
|
-
.utrecht-emphasis--stressed, .utrecht-html em {
|
|
502
|
-
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
503
|
-
}
|
|
504
|
-
|
|
505
|
-
.utrecht-emphasis--strong, .utrecht-html strong {
|
|
506
|
-
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
507
|
-
}
|
|
508
|
-
|
|
509
214
|
/**
|
|
510
215
|
* @license EUPL-1.2
|
|
511
216
|
* Copyright (c) 2021 Robbert Broersma
|
|
512
217
|
*/
|
|
513
218
|
/**
|
|
514
219
|
* @license EUPL-1.2
|
|
220
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
515
221
|
* Copyright (c) 2021 Robbert Broersma
|
|
222
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
516
223
|
*/
|
|
517
|
-
.utrecht-form-fieldset--distanced, .utrecht-html fieldset {
|
|
518
|
-
margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
|
|
519
|
-
margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
|
|
520
|
-
}
|
|
521
|
-
|
|
522
|
-
.utrecht-form-fieldset__legend, .utrecht-html legend {
|
|
523
|
-
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
524
|
-
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
525
|
-
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
526
|
-
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
527
|
-
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
528
|
-
}
|
|
529
|
-
|
|
530
|
-
.utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
|
|
531
|
-
margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
|
|
532
|
-
margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
|
|
533
|
-
}
|
|
534
|
-
|
|
535
|
-
.utrecht-html fieldset {
|
|
536
|
-
border: 0;
|
|
537
|
-
margin-inline-end: 0;
|
|
538
|
-
margin-inline-start: 0;
|
|
539
|
-
min-width: 0;
|
|
540
|
-
padding-block-end: 0;
|
|
541
|
-
padding-block-start: 0.01em;
|
|
542
|
-
padding-inline-end: 0;
|
|
543
|
-
padding-inline-start: 0;
|
|
544
|
-
}
|
|
545
|
-
|
|
546
|
-
.utrecht-html legend {
|
|
547
|
-
padding-inline-end: 0;
|
|
548
|
-
padding-inline-start: 0;
|
|
549
|
-
}
|
|
550
|
-
|
|
551
224
|
/**
|
|
552
225
|
* @license EUPL-1.2
|
|
553
|
-
* Copyright (c) 2021
|
|
226
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
554
227
|
*/
|
|
555
228
|
/**
|
|
556
229
|
* @license EUPL-1.2
|
|
557
230
|
* Copyright (c) 2021 Robbert Broersma
|
|
558
231
|
*/
|
|
559
|
-
.utrecht-form-label, .utrecht-html label {
|
|
560
|
-
font-size: var(--utrecht-form-label-font-size);
|
|
561
|
-
font-weight: var(--utrecht-form-label-font-weight);
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
.utrecht-form-label--checkbox, .utrecht-html input[type=checkbox] ~ label {
|
|
565
|
-
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
566
|
-
}
|
|
567
|
-
|
|
568
|
-
.utrecht-form-label--radio, .utrecht-html input[type=radio] ~ label {
|
|
569
|
-
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
570
|
-
}
|
|
571
|
-
|
|
572
232
|
/**
|
|
573
233
|
* @license EUPL-1.2
|
|
574
|
-
* Copyright (c)
|
|
234
|
+
* Copyright (c) 2022 Gemeente Utrecht
|
|
235
|
+
* Copyright (c) 2022 Robbert Broersma
|
|
236
|
+
* Copyright (c) 2022 The Knights Who Say NIH! B.V.
|
|
575
237
|
*/
|
|
576
238
|
/**
|
|
577
239
|
* @license EUPL-1.2
|
|
578
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
579
240
|
* Copyright (c) 2021 Robbert Broersma
|
|
580
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
581
241
|
*/
|
|
582
|
-
.utrecht-heading-1, .utrecht-html h1 {
|
|
583
|
-
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
584
|
-
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
585
|
-
font-size: var(--utrecht-heading-1-font-size);
|
|
586
|
-
font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
587
|
-
letter-spacing: var(--utrecht-heading-1-letter-spacing);
|
|
588
|
-
line-height: var(--utrecht-heading-1-line-height);
|
|
589
|
-
text-transform: var(--utrecht-heading-1-text-transform, inherit);
|
|
590
|
-
}
|
|
591
|
-
|
|
592
|
-
.utrecht-heading-1--distanced, .utrecht-html h1 {
|
|
593
|
-
margin-block-end: var(--utrecht-heading-1-margin-block-end);
|
|
594
|
-
margin-block-start: var(--utrecht-heading-1-margin-block-start);
|
|
595
|
-
}
|
|
596
|
-
|
|
597
242
|
/**
|
|
598
243
|
* @license EUPL-1.2
|
|
599
|
-
* Copyright (c) 2021
|
|
244
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
245
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
600
246
|
*/
|
|
247
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
601
248
|
/**
|
|
602
249
|
* @license EUPL-1.2
|
|
603
250
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
604
251
|
* Copyright (c) 2021 Robbert Broersma
|
|
605
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
606
252
|
*/
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
610
|
-
font-size: var(--utrecht-heading-2-font-size);
|
|
611
|
-
font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
612
|
-
letter-spacing: var(--utrecht-heading-2-letter-spacing);
|
|
613
|
-
line-height: var(--utrecht-heading-2-line-height);
|
|
614
|
-
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
615
|
-
}
|
|
253
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
254
|
+
/*
|
|
616
255
|
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
256
|
+
# CSS implementation
|
|
257
|
+
|
|
258
|
+
## `text-decoration-skip`
|
|
259
|
+
|
|
260
|
+
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
261
|
+
For example by obscuring Arabic diacritics.
|
|
262
|
+
|
|
263
|
+
However, the combination of a greater thickness and skipping this thick underline
|
|
264
|
+
leads to a very unappealing rendering of the underline. To avoid this,
|
|
265
|
+
`text-decoration-skip` is disabled for interactive states.
|
|
266
|
+
|
|
267
|
+
For design token configurations that have identical thickness for normal and interactive
|
|
268
|
+
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
269
|
+
from an interrupted to an uninterrupted underline (for some texts).
|
|
270
|
+
|
|
271
|
+
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
272
|
+
|
|
273
|
+
---
|
|
274
|
+
|
|
275
|
+
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
276
|
+
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
277
|
+
not make this too inconvenient.
|
|
278
|
+
|
|
279
|
+
---
|
|
280
|
+
|
|
281
|
+
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
282
|
+
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
283
|
+
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
284
|
+
|
|
285
|
+
## `text-decoration-thickness`
|
|
286
|
+
|
|
287
|
+
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
291
|
+
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
292
|
+
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
293
|
+
the underline offset also seems to increase along with the thickness, which effectively means
|
|
294
|
+
the underline is closer to the next line than in Safari.
|
|
295
|
+
|
|
296
|
+
---
|
|
621
297
|
|
|
298
|
+
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
299
|
+
use the `max()` function to ensure the underline remains visible for every font size.
|
|
300
|
+
|
|
301
|
+
## `transition`
|
|
302
|
+
|
|
303
|
+
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
304
|
+
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
305
|
+
|
|
306
|
+
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
307
|
+
|
|
308
|
+
*/
|
|
309
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
310
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
311
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
312
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
313
|
+
/**
|
|
314
|
+
* Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
|
|
315
|
+
*
|
|
316
|
+
* Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
|
|
317
|
+
*/
|
|
622
318
|
/**
|
|
623
319
|
* @license EUPL-1.2
|
|
624
320
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -627,48 +323,28 @@
|
|
|
627
323
|
* @license EUPL-1.2
|
|
628
324
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
629
325
|
* Copyright (c) 2021 Robbert Broersma
|
|
630
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
631
326
|
*/
|
|
632
|
-
.utrecht-heading-3, .utrecht-html h3 {
|
|
633
|
-
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
634
|
-
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
635
|
-
font-size: var(--utrecht-heading-3-font-size);
|
|
636
|
-
font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
637
|
-
letter-spacing: var(--utrecht-heading-3-letter-spacing);
|
|
638
|
-
line-height: var(--utrecht-heading-3-line-height);
|
|
639
|
-
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
640
|
-
}
|
|
641
|
-
|
|
642
|
-
.utrecht-heading-3--distanced, .utrecht-html h3 {
|
|
643
|
-
margin-block-end: var(--utrecht-heading-3-margin-block-end);
|
|
644
|
-
margin-block-start: var(--utrecht-heading-3-margin-block-start);
|
|
645
|
-
}
|
|
646
|
-
|
|
647
327
|
/**
|
|
648
328
|
* @license EUPL-1.2
|
|
649
329
|
* Copyright (c) 2021 Robbert Broersma
|
|
650
330
|
*/
|
|
651
331
|
/**
|
|
652
332
|
* @license EUPL-1.2
|
|
333
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
653
334
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
335
|
+
*/
|
|
336
|
+
/**
|
|
337
|
+
* @license EUPL-1.2
|
|
654
338
|
* Copyright (c) 2021 Robbert Broersma
|
|
339
|
+
*/
|
|
340
|
+
/**
|
|
341
|
+
* @license EUPL-1.2
|
|
655
342
|
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
656
343
|
*/
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
662
|
-
letter-spacing: var(--utrecht-heading-4-letter-spacing);
|
|
663
|
-
line-height: var(--utrecht-heading-4-line-height);
|
|
664
|
-
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
665
|
-
}
|
|
666
|
-
|
|
667
|
-
.utrecht-heading-4--distanced, .utrecht-html h4 {
|
|
668
|
-
margin-block-end: var(--utrecht-heading-4-margin-block-end);
|
|
669
|
-
margin-block-start: var(--utrecht-heading-4-margin-block-start);
|
|
670
|
-
}
|
|
671
|
-
|
|
344
|
+
/**
|
|
345
|
+
* @license EUPL-1.2
|
|
346
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
347
|
+
*/
|
|
672
348
|
/**
|
|
673
349
|
* @license EUPL-1.2
|
|
674
350
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -677,23 +353,13 @@
|
|
|
677
353
|
* @license EUPL-1.2
|
|
678
354
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
679
355
|
* Copyright (c) 2021 Robbert Broersma
|
|
680
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
681
356
|
*/
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
line-height: var(--utrecht-heading-5-line-height);
|
|
689
|
-
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
690
|
-
}
|
|
691
|
-
|
|
692
|
-
.utrecht-heading-5--distanced, .utrecht-html h5 {
|
|
693
|
-
margin-block-end: var(--utrecht-heading-5-margin-block-end);
|
|
694
|
-
margin-block-start: var(--utrecht-heading-5-margin-block-start);
|
|
695
|
-
}
|
|
696
|
-
|
|
357
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
358
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
359
|
+
/**
|
|
360
|
+
* @license EUPL-1.2
|
|
361
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
362
|
+
*/
|
|
697
363
|
/**
|
|
698
364
|
* @license EUPL-1.2
|
|
699
365
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -702,75 +368,19 @@
|
|
|
702
368
|
* @license EUPL-1.2
|
|
703
369
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
704
370
|
* Copyright (c) 2021 Robbert Broersma
|
|
705
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
706
371
|
*/
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
710
|
-
font-size: var(--utrecht-heading-6-font-size);
|
|
711
|
-
font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
712
|
-
letter-spacing: var(--utrecht-heading-6-letter-spacing);
|
|
713
|
-
line-height: var(--utrecht-heading-6-line-height);
|
|
714
|
-
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
715
|
-
}
|
|
716
|
-
|
|
717
|
-
.utrecht-heading-6--distanced, .utrecht-html h6 {
|
|
718
|
-
margin-block-end: var(--utrecht-heading-6-margin-block-end);
|
|
719
|
-
margin-block-start: var(--utrecht-heading-6-margin-block-start);
|
|
720
|
-
}
|
|
721
|
-
|
|
372
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
373
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
722
374
|
/**
|
|
723
375
|
* @license EUPL-1.2
|
|
724
376
|
* Copyright (c) 2021 Robbert Broersma
|
|
725
377
|
*/
|
|
726
378
|
/**
|
|
727
379
|
* @license EUPL-1.2
|
|
728
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
729
380
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
381
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
382
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
730
383
|
*/
|
|
731
|
-
.utrecht-link, .utrecht-html a:link {
|
|
732
|
-
color: var(--utrecht-link-color, blue);
|
|
733
|
-
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
734
|
-
}
|
|
735
|
-
|
|
736
|
-
.utrecht-link:visited,
|
|
737
|
-
.utrecht-link--visited,
|
|
738
|
-
.utrecht-html a:visited {
|
|
739
|
-
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
740
|
-
}
|
|
741
|
-
|
|
742
|
-
.utrecht-link:hover,
|
|
743
|
-
.utrecht-link--hover,
|
|
744
|
-
.utrecht-html a:hover {
|
|
745
|
-
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
746
|
-
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
.utrecht-link:active,
|
|
750
|
-
.utrecht-link--active,
|
|
751
|
-
.utrecht-html a:active {
|
|
752
|
-
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
753
|
-
}
|
|
754
|
-
|
|
755
|
-
.utrecht-link:focus,
|
|
756
|
-
.utrecht-link--focus,
|
|
757
|
-
.utrecht-html a:focus {
|
|
758
|
-
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
759
|
-
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
760
|
-
background-color: var(--utrecht-focus-background-color);
|
|
761
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
762
|
-
color: var(--utrecht-focus-color, inherit);
|
|
763
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
764
|
-
outline-offset: 0;
|
|
765
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
766
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
770
|
-
.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
|
|
771
|
-
white-space: nowrap;
|
|
772
|
-
}
|
|
773
|
-
|
|
774
384
|
/**
|
|
775
385
|
* @license EUPL-1.2
|
|
776
386
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -778,66 +388,28 @@
|
|
|
778
388
|
/**
|
|
779
389
|
* @license EUPL-1.2
|
|
780
390
|
* Copyright (c) 2021 Robbert Broersma
|
|
781
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
782
391
|
*/
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
.utrecht-ordered-list--distanced, .utrecht-html ol {
|
|
788
|
-
margin-block-end: var(--utrecht-ordered-list-margin-block-end);
|
|
789
|
-
margin-block-start: var(--utrecht-ordered-list-margin-block-start);
|
|
790
|
-
}
|
|
791
|
-
|
|
792
|
-
.utrecht-ordered-list__item, .utrecht-html ol > li {
|
|
793
|
-
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
|
|
794
|
-
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
|
|
795
|
-
}
|
|
796
|
-
|
|
392
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
393
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
394
|
+
/* stylelint-disable selector-class-pattern */
|
|
797
395
|
/**
|
|
798
396
|
* @license EUPL-1.2
|
|
799
397
|
* Copyright (c) 2021 Robbert Broersma
|
|
800
398
|
*/
|
|
801
399
|
/**
|
|
802
400
|
* @license EUPL-1.2
|
|
803
|
-
* Copyright (c) 2021
|
|
401
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
804
402
|
*/
|
|
805
|
-
.utrecht-paragraph, .utrecht-html p {
|
|
806
|
-
color: var(--utrecht-document-color, inherit);
|
|
807
|
-
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
808
|
-
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
809
|
-
font-weight: var(--utrecht-paragraph-font-weight, inherit);
|
|
810
|
-
line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
|
|
811
|
-
}
|
|
812
|
-
|
|
813
|
-
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
814
|
-
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
815
|
-
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
816
|
-
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
817
|
-
}
|
|
818
|
-
|
|
819
|
-
.utrecht-paragraph--distanced, .utrecht-html * ~ p {
|
|
820
|
-
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
821
|
-
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
822
|
-
}
|
|
823
|
-
|
|
824
|
-
/* stylelint-disable selector-class-pattern */
|
|
825
403
|
/**
|
|
826
404
|
* @license EUPL-1.2
|
|
827
405
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
406
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
828
407
|
*/
|
|
408
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
829
409
|
/**
|
|
830
410
|
* @license EUPL-1.2
|
|
831
|
-
* Copyright (c) 2021
|
|
411
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
832
412
|
*/
|
|
833
|
-
.utrecht-radio-button, .utrecht-html input[type=radio] {
|
|
834
|
-
margin-block-end: 0;
|
|
835
|
-
/* reset native margin for input[type="radio"] */
|
|
836
|
-
margin-block-start: 0;
|
|
837
|
-
margin-inline-end: 0;
|
|
838
|
-
margin-inline-start: 0;
|
|
839
|
-
}
|
|
840
|
-
|
|
841
413
|
/**
|
|
842
414
|
* @license EUPL-1.2
|
|
843
415
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -846,16 +418,8 @@
|
|
|
846
418
|
* @license EUPL-1.2
|
|
847
419
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
848
420
|
* Copyright (c) 2021 Robbert Broersma
|
|
849
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
850
421
|
*/
|
|
851
|
-
|
|
852
|
-
border-color: var(--utrecht-separator-color);
|
|
853
|
-
border-style: solid;
|
|
854
|
-
border-width: 0 0 var(--utrecht-separator-width) 0;
|
|
855
|
-
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
856
|
-
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
857
|
-
}
|
|
858
|
-
|
|
422
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
859
423
|
/**
|
|
860
424
|
* @license EUPL-1.2
|
|
861
425
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -863,652 +427,1329 @@
|
|
|
863
427
|
/**
|
|
864
428
|
* @license EUPL-1.2
|
|
865
429
|
* Copyright (c) 2021 Robbert Broersma
|
|
430
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
866
431
|
*/
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
874
|
-
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
875
|
-
}
|
|
876
|
-
|
|
877
|
-
.utrecht-table__caption, .utrecht-html caption {
|
|
878
|
-
color: var(--utrecht-table-caption-color);
|
|
879
|
-
font-family: var(--utrecht-table-caption-font-family);
|
|
880
|
-
font-size: var(--utrecht-table-caption-font-size);
|
|
881
|
-
font-weight: var(--utrecht-table-caption-font-weight);
|
|
882
|
-
line-height: var(--utrecht-table-caption-line-height);
|
|
883
|
-
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
884
|
-
text-align: var(--utrecht-table-caption-text-align, center);
|
|
885
|
-
}
|
|
886
|
-
|
|
887
|
-
.utrecht-table__header, .utrecht-html thead {
|
|
888
|
-
color: var(--utrecht-table-header-color);
|
|
889
|
-
font-weight: var(--utrecht-table-header-font-weight);
|
|
890
|
-
text-transform: var(--utrecht-table-header-text-transform);
|
|
891
|
-
vertical-align: bottom;
|
|
892
|
-
}
|
|
893
|
-
|
|
894
|
-
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
895
|
-
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
896
|
-
border-block-end-style: solid;
|
|
897
|
-
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
.utrecht-table__body, .utrecht-html tbody {
|
|
901
|
-
vertical-align: baseline;
|
|
432
|
+
/* Collection of all semantic HTML styles in the component library */
|
|
433
|
+
.utrecht-html {
|
|
434
|
+
/* override the `:focus` selector above */
|
|
435
|
+
/* stylelint-disable-next-line no-descending-specificity */
|
|
436
|
+
/* stylelint-disable selector-class-pattern */
|
|
437
|
+
--utrecht-space-around: 1;
|
|
902
438
|
}
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
color: var(--utrecht-table-heading-color);
|
|
906
|
-
font-weight: var(--utrecht-table-heading-font-weight);
|
|
907
|
-
text-transform: var(--utrecht-table-heading-text-transform);
|
|
439
|
+
.utrecht-html article {
|
|
440
|
+
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
908
441
|
}
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
padding-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
442
|
+
.utrecht-html blockquote {
|
|
443
|
+
background-color: var(--utrecht-blockquote-background-color);
|
|
444
|
+
color: var(--utrecht-blockquote-color);
|
|
445
|
+
font-family: var(--utrecht-document-font-family);
|
|
446
|
+
font-size: var(--utrecht-blockquote-font-size);
|
|
447
|
+
font-style: var(--utrecht-blockquote-font-style);
|
|
448
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
|
|
449
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
|
|
450
|
+
margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
|
|
451
|
+
margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
|
|
452
|
+
padding-block-end: var(--utrecht-blockquote-padding-block-end);
|
|
453
|
+
padding-block-start: var(--utrecht-blockquote-padding-block-start);
|
|
454
|
+
padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
|
|
455
|
+
padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
|
|
456
|
+
--utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
|
|
457
|
+
--utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
458
|
+
color: var(--utrecht-blockquote-content-color, inherit);
|
|
459
|
+
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
460
|
+
--utrecht-space-around: 1;
|
|
461
|
+
}
|
|
462
|
+
.utrecht-html input[type=button i],
|
|
463
|
+
.utrecht-html input[type=reset i],
|
|
464
|
+
.utrecht-html input[type=submit i],
|
|
465
|
+
.utrecht-html button {
|
|
466
|
+
/*
|
|
467
|
+
`--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
|
|
468
|
+
The hint color takes priority over the appearance color.
|
|
469
|
+
|
|
470
|
+
`--_utrecht-button-appearance` is the internal prefix for the appearance
|
|
471
|
+
(primary-action, secondary-action or subtle), it is not an API.
|
|
472
|
+
*/
|
|
473
|
+
--_utrecht-button-background-color: var(
|
|
474
|
+
--_utrecht-button-hint-background-color,
|
|
475
|
+
var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
|
|
476
|
+
);
|
|
477
|
+
--_utrecht-button-color: var(
|
|
478
|
+
--_utrecht-button-hint-color,
|
|
479
|
+
var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
|
|
480
|
+
);
|
|
481
|
+
--_utrecht-button-border-color: var(
|
|
482
|
+
--_utrecht-button-hint-border-color,
|
|
483
|
+
var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
|
|
484
|
+
);
|
|
485
|
+
--_utrecht-button-border-bottom-color: var(
|
|
486
|
+
--_utrecht-button-hint-border-bottom-color,
|
|
487
|
+
var(
|
|
488
|
+
--_utrecht-button-hint-border-color,
|
|
489
|
+
var(
|
|
490
|
+
--_utrecht-button-appearance-border-bottom-color,
|
|
491
|
+
var(
|
|
492
|
+
--_utrecht-button-appearance-border-color,
|
|
493
|
+
var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
|
|
494
|
+
)
|
|
495
|
+
)
|
|
496
|
+
)
|
|
497
|
+
);
|
|
498
|
+
--_utrecht-button-disabled-background-color: var(
|
|
499
|
+
--_utrecht-button-hint-disabled-background-color,
|
|
500
|
+
var(
|
|
501
|
+
--_utrecht-button-appearance-disabled-background-color,
|
|
502
|
+
var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
|
|
503
|
+
)
|
|
504
|
+
);
|
|
505
|
+
--_utrecht-button-disabled-border-color: var(
|
|
506
|
+
--_utrecht-button-hint-disabled-border-color,
|
|
507
|
+
var(
|
|
508
|
+
--_utrecht-button-appearance-disabled-border-color,
|
|
509
|
+
var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
|
|
510
|
+
)
|
|
511
|
+
);
|
|
512
|
+
--_utrecht-button-disabled-color: var(
|
|
513
|
+
--_utrecht-button-hint-disabled-color,
|
|
514
|
+
var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
|
|
515
|
+
);
|
|
516
|
+
--_utrecht-button-pressed-background-color: var(
|
|
517
|
+
--_utrecht-button-hint-pressed-background-color,
|
|
518
|
+
var(
|
|
519
|
+
--_utrecht-button-hint-background-color,
|
|
520
|
+
var(
|
|
521
|
+
--_utrecht-button-appearance-pressed-background-color,
|
|
522
|
+
var(
|
|
523
|
+
--_utrecht-button-appearance-background-color,
|
|
524
|
+
var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
|
|
525
|
+
)
|
|
526
|
+
)
|
|
527
|
+
)
|
|
528
|
+
);
|
|
529
|
+
--_utrecht-button-pressed-border-color: var(
|
|
530
|
+
--_utrecht-button-hint-pressed-border-color,
|
|
531
|
+
var(
|
|
532
|
+
--_utrecht-button-hint-border-color,
|
|
533
|
+
var(
|
|
534
|
+
--_utrecht-button-appearance-pressed-border-color,
|
|
535
|
+
var(
|
|
536
|
+
--_utrecht-button-appearance-border-color,
|
|
537
|
+
var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
|
|
538
|
+
)
|
|
539
|
+
)
|
|
540
|
+
)
|
|
541
|
+
);
|
|
542
|
+
--_utrecht-button-pressed-color: var(
|
|
543
|
+
--_utrecht-button-hint-pressed-color,
|
|
544
|
+
var(
|
|
545
|
+
--_utrecht-button-hint-color,
|
|
546
|
+
var(
|
|
547
|
+
--_utrecht-button-appearance-pressed-color,
|
|
548
|
+
var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
|
|
549
|
+
)
|
|
550
|
+
)
|
|
551
|
+
);
|
|
552
|
+
--_utrecht-button-focus-background-color: var(
|
|
553
|
+
--_utrecht-button-hint-focus-background-color,
|
|
554
|
+
var(
|
|
555
|
+
--_utrecht-button-hint-background-color,
|
|
556
|
+
var(
|
|
557
|
+
--_utrecht-button-appearance-focus-background-color,
|
|
558
|
+
var(
|
|
559
|
+
--_utrecht-button-appearance-background-color,
|
|
560
|
+
var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
|
|
561
|
+
)
|
|
562
|
+
)
|
|
563
|
+
)
|
|
564
|
+
);
|
|
565
|
+
--_utrecht-button-focus-border-color: var(
|
|
566
|
+
--_utrecht-button-hint-focus-border-color,
|
|
567
|
+
var(
|
|
568
|
+
--_utrecht-button-hint-border-color,
|
|
569
|
+
var(
|
|
570
|
+
--_utrecht-button-appearance-focus-border-color,
|
|
571
|
+
var(
|
|
572
|
+
--_utrecht-button-appearance-border-color,
|
|
573
|
+
var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
|
|
574
|
+
)
|
|
575
|
+
)
|
|
576
|
+
)
|
|
577
|
+
);
|
|
578
|
+
--_utrecht-button-focus-color: var(
|
|
579
|
+
--_utrecht-button-hint-focus-color,
|
|
580
|
+
var(
|
|
581
|
+
--_utrecht-button-hint-color,
|
|
582
|
+
var(
|
|
583
|
+
--_utrecht-button-appearance-focus-color,
|
|
584
|
+
var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
|
|
585
|
+
)
|
|
586
|
+
)
|
|
587
|
+
);
|
|
588
|
+
--_utrecht-button-hover-background-color: var(
|
|
589
|
+
--_utrecht-button-hint-hover-background-color,
|
|
590
|
+
var(
|
|
591
|
+
--_utrecht-button-hint-background-color,
|
|
592
|
+
var(
|
|
593
|
+
--_utrecht-button-appearance-hover-background-color,
|
|
594
|
+
var(
|
|
595
|
+
--_utrecht-button-appearance-background-color,
|
|
596
|
+
var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
|
|
597
|
+
)
|
|
598
|
+
)
|
|
599
|
+
)
|
|
600
|
+
);
|
|
601
|
+
--_utrecht-button-hover-border-color: var(
|
|
602
|
+
--_utrecht-button-hint-hover-border-color,
|
|
603
|
+
var(
|
|
604
|
+
--_utrecht-button-hint-border-color,
|
|
605
|
+
var(
|
|
606
|
+
--_utrecht-button-appearance-hover-border-color,
|
|
607
|
+
var(
|
|
608
|
+
--_utrecht-button-appearance-border-color,
|
|
609
|
+
var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
|
|
610
|
+
)
|
|
611
|
+
)
|
|
612
|
+
)
|
|
613
|
+
);
|
|
614
|
+
--_utrecht-button-hover-color: var(
|
|
615
|
+
--_utrecht-button-hint-hover-color,
|
|
616
|
+
var(
|
|
617
|
+
--_utrecht-button-hint-color,
|
|
618
|
+
var(
|
|
619
|
+
--_utrecht-button-appearance-hover-color,
|
|
620
|
+
var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
|
|
621
|
+
)
|
|
622
|
+
)
|
|
623
|
+
);
|
|
624
|
+
--_utrecht-button-active-background-color: var(
|
|
625
|
+
--_utrecht-button-hint-active-background-color,
|
|
626
|
+
var(
|
|
627
|
+
--_utrecht-button-hint-background-color,
|
|
628
|
+
var(
|
|
629
|
+
--_utrecht-button-appearance-active-background-color,
|
|
630
|
+
var(
|
|
631
|
+
--_utrecht-button-appearance-background-color,
|
|
632
|
+
var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
|
|
633
|
+
)
|
|
634
|
+
)
|
|
635
|
+
)
|
|
636
|
+
);
|
|
637
|
+
--_utrecht-button-active-border-color: var(
|
|
638
|
+
--_utrecht-button-hint-active-border-color,
|
|
639
|
+
var(
|
|
640
|
+
--_utrecht-button-hint-border-color,
|
|
641
|
+
var(
|
|
642
|
+
--_utrecht-button-appearance-active-border-color,
|
|
643
|
+
var(
|
|
644
|
+
--_utrecht-button-appearance-border-color,
|
|
645
|
+
var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
|
|
646
|
+
)
|
|
647
|
+
)
|
|
648
|
+
)
|
|
649
|
+
);
|
|
650
|
+
--_utrecht-button-active-color: var(
|
|
651
|
+
--_utrecht-button-hint-active-color,
|
|
652
|
+
var(
|
|
653
|
+
--_utrecht-button-hint-color,
|
|
654
|
+
var(
|
|
655
|
+
--_utrecht-button-appearance-active-color,
|
|
656
|
+
var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
|
|
657
|
+
)
|
|
658
|
+
)
|
|
659
|
+
);
|
|
660
|
+
--_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
|
|
661
|
+
--_utrecht-button-border-bottom-width: var(
|
|
662
|
+
--utrecht-button-border-bottom-width,
|
|
663
|
+
var(--_utrecht-button-border-width, 0)
|
|
664
|
+
);
|
|
665
|
+
--utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
|
|
666
|
+
align-items: center;
|
|
667
|
+
background-color: var(--_utrecht-button-background-color);
|
|
668
|
+
border-color: var(--_utrecht-button-border-color);
|
|
669
|
+
border-bottom-color: var(--_utrecht-button-border-bottom-color);
|
|
670
|
+
border-radius: var(--utrecht-button-border-radius);
|
|
671
|
+
border-style: solid;
|
|
672
|
+
border-width: var(--_utrecht-button-border-width);
|
|
673
|
+
border-bottom-width: var(--_utrecht-button-border-bottom-width);
|
|
674
|
+
box-sizing: border-box;
|
|
675
|
+
color: var(--_utrecht-button-color);
|
|
676
|
+
cursor: var(--utrecht-action-activate-cursor);
|
|
677
|
+
display: inline-flex;
|
|
678
|
+
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
679
|
+
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
|
|
680
|
+
font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
|
|
681
|
+
gap: var(--utrecht-button-icon-gap);
|
|
682
|
+
inline-size: var(--utrecht-button-inline-size, auto);
|
|
683
|
+
justify-content: center;
|
|
684
|
+
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
685
|
+
line-height: var(--utrecht-button-line-height);
|
|
686
|
+
min-block-size: var(--utrecht-button-min-block-size, 44px);
|
|
687
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 44px);
|
|
688
|
+
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
689
|
+
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
690
|
+
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
691
|
+
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
692
|
+
text-transform: var(--utrecht-button-text-transform);
|
|
693
|
+
-webkit-user-select: none;
|
|
694
|
+
user-select: none;
|
|
695
|
+
margin-block-end: var(--utrecht-button-margin-block-end);
|
|
696
|
+
margin-block-start: var(--utrecht-button-margin-block-start);
|
|
697
|
+
margin-inline-end: var(--utrecht-button-margin-inline-end);
|
|
698
|
+
margin-inline-start: var(--utrecht-button-margin-inline-start);
|
|
926
699
|
}
|
|
927
|
-
|
|
928
|
-
.utrecht-
|
|
929
|
-
|
|
930
|
-
|
|
700
|
+
.utrecht-html button[type=submit i],
|
|
701
|
+
.utrecht-html input[type=submit i] {
|
|
702
|
+
cursor: var(--utrecht-action-submit-cursor);
|
|
703
|
+
}
|
|
704
|
+
.utrecht-html button:disabled,
|
|
705
|
+
.utrecht-html button[aria-disabled=true] {
|
|
706
|
+
background-color: var(--_utrecht-button-disabled-background-color);
|
|
707
|
+
border-color: var(--_utrecht-button-disabled-border-color);
|
|
708
|
+
color: var(--_utrecht-button-disabled-color);
|
|
709
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
710
|
+
}
|
|
711
|
+
.utrecht-html button[aria-busy=true],
|
|
712
|
+
.utrecht-html button[aria-disabled=true][aria-busy=true],
|
|
713
|
+
.utrecht-html button:disabled[aria-busy=true] {
|
|
714
|
+
cursor: var(--utrecht-action-busy-cursor);
|
|
715
|
+
}
|
|
716
|
+
.utrecht-html button:active:not([aria-disabled=true], :disabled) {
|
|
717
|
+
background-color: var(--_utrecht-button-active-background-color);
|
|
718
|
+
border-color: var(--_utrecht-button-active-border-color);
|
|
719
|
+
color: var(--_utrecht-button-active-color);
|
|
720
|
+
}
|
|
721
|
+
.utrecht-html button:hover:not([aria-disabled=true], :disabled) {
|
|
722
|
+
background-color: var(--_utrecht-button-hover-background-color);
|
|
723
|
+
border-color: var(--_utrecht-button-hover-border-color);
|
|
724
|
+
color: var(--_utrecht-button-hover-color);
|
|
725
|
+
scale: var(--utrecht-button-hover-scale, 1);
|
|
726
|
+
}
|
|
727
|
+
.utrecht-html button:focus:not([aria-disabled=true], :disabled) {
|
|
728
|
+
background-color: var(--_utrecht-button-focus-background-color);
|
|
729
|
+
border-color: var(--_utrecht-button-focus-border-color);
|
|
730
|
+
color: var(--_utrecht-button-focus-color);
|
|
731
|
+
scale: var(--utrecht-button-focus-scale, 1);
|
|
732
|
+
}
|
|
733
|
+
.utrecht-html button:focus-visible {
|
|
734
|
+
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
735
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
736
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
737
|
+
* can combine it with the focus ring box shadow.
|
|
738
|
+
*/
|
|
739
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
740
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
741
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
742
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
743
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
744
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
745
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
746
|
+
}
|
|
747
|
+
.utrecht-html input[type=checkbox i] {
|
|
748
|
+
margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
|
|
749
|
+
margin-block-start: 0;
|
|
750
|
+
margin-inline-end: 0;
|
|
751
|
+
margin-inline-start: 0;
|
|
752
|
+
cursor: var(--utrecht-action-activate-cursor, revert);
|
|
753
|
+
-webkit-user-select: none;
|
|
754
|
+
user-select: none;
|
|
755
|
+
}
|
|
756
|
+
.utrecht-html input[type=checkbox i]:disabled {
|
|
757
|
+
cursor: var(--utrecht-action-disabled-cursor, revert);
|
|
758
|
+
}
|
|
759
|
+
.utrecht-html input[type=checkbox i]:focus {
|
|
760
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
761
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
762
|
+
* can combine it with the focus ring box shadow.
|
|
763
|
+
*/
|
|
764
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
765
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
766
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
767
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
768
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
769
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
770
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
771
|
+
}
|
|
772
|
+
.utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
|
|
773
|
+
/* undo focus ring */
|
|
774
|
+
box-shadow: none;
|
|
775
|
+
outline-style: revert;
|
|
776
|
+
}
|
|
777
|
+
.utrecht-html body {
|
|
778
|
+
/* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
|
|
779
|
+
color: var(--utrecht-document-color, inherit);
|
|
780
|
+
font-family: var(--utrecht-document-font-family, inherit);
|
|
781
|
+
font-size: var(--utrecht-document-font-size, inherit);
|
|
782
|
+
font-weight: var(--utrecht-document-font-weight, inherit);
|
|
783
|
+
line-height: var(--utrecht-document-line-height, inherit);
|
|
784
|
+
text-rendering: optimizeLegibility;
|
|
785
|
+
-moz-text-size-adjust: none;
|
|
786
|
+
-webkit-text-size-adjust: none;
|
|
787
|
+
text-size-adjust: none;
|
|
788
|
+
background-color: var(--utrecht-document-background-color, inherit);
|
|
789
|
+
}
|
|
790
|
+
.utrecht-html body :lang(ar) {
|
|
791
|
+
/* `letter-spacing` design tokens break Arabic text rendering, avoid that */
|
|
792
|
+
letter-spacing: 0 !important;
|
|
793
|
+
}
|
|
794
|
+
.utrecht-html code {
|
|
795
|
+
/* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
|
|
796
|
+
background-color: var(--utrecht-code-background-color);
|
|
797
|
+
color: var(--utrecht-code-color);
|
|
798
|
+
font-family: var(--utrecht-code-font-family, monospace), monospace;
|
|
799
|
+
font-size: var(--utrecht-code-font-size);
|
|
800
|
+
font-variant-ligatures: none;
|
|
801
|
+
line-height: var(--utrecht-code-line-height);
|
|
802
|
+
}
|
|
803
|
+
.utrecht-html em {
|
|
804
|
+
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
931
805
|
}
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
.utrecht-html td.numeric {
|
|
935
|
-
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
936
|
-
text-align: right;
|
|
806
|
+
.utrecht-html strong {
|
|
807
|
+
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
937
808
|
}
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
809
|
+
.utrecht-html fieldset {
|
|
810
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
|
|
811
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
|
|
812
|
+
all: revert;
|
|
813
|
+
border: 0;
|
|
814
|
+
margin-inline-end: 0;
|
|
815
|
+
margin-inline-start: 0;
|
|
816
|
+
min-width: 0;
|
|
817
|
+
padding-block-end: 0;
|
|
818
|
+
padding-block-start: 0.01em;
|
|
819
|
+
padding-inline-end: 0;
|
|
820
|
+
padding-inline-start: 0;
|
|
821
|
+
--utrecht-space-around: 1;
|
|
942
822
|
}
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
color: var(--utrecht-table-row-alternate-even-color);
|
|
823
|
+
.utrecht-html figure {
|
|
824
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
|
|
825
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
|
|
947
826
|
}
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
953
|
-
*/
|
|
954
|
-
/**
|
|
955
|
-
* @license EUPL-1.2
|
|
956
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
957
|
-
*/
|
|
958
|
-
.utrecht-textarea, .utrecht-html textarea {
|
|
959
|
-
border-width: var(--utrecht-textarea-border-width);
|
|
960
|
-
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
|
|
961
|
-
border-color: var(--utrecht-textarea-border-color);
|
|
962
|
-
border-radius: var(--utrecht-textarea-border-radius, 0);
|
|
963
|
-
border-style: solid;
|
|
964
|
-
color: var(--utrecht-textarea-color);
|
|
965
|
-
font-family: var(--utrecht-textarea-font-family);
|
|
966
|
-
font-size: var(--utrecht-textarea-font-size, 1em);
|
|
967
|
-
max-width: var(--utrecht-textarea-max-width);
|
|
968
|
-
padding-block-end: var(--utrecht-textarea-padding-block-end);
|
|
969
|
-
padding-block-start: var(--utrecht-textarea-padding-block-start);
|
|
970
|
-
padding-inline-end: var(--utrecht-textarea-padding-inline-end);
|
|
971
|
-
padding-inline-start: var(--utrecht-textarea-padding-inline-start);
|
|
972
|
-
width: 100%;
|
|
827
|
+
.utrecht-html figcaption {
|
|
828
|
+
color: var(--utrecht-figure-caption-color);
|
|
829
|
+
font-size: var(--utrecht-figure-caption-font-size);
|
|
830
|
+
line-height: var(--utrecht-figure-caption-line-height);
|
|
973
831
|
}
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
border-color: var(--utrecht-textarea-invalid-border-color);
|
|
977
|
-
border-width: var(--utrecht-textarea-invalid-border-width);
|
|
832
|
+
.utrecht-html form {
|
|
833
|
+
max-inline-size: var(--utrecht-form-max-inline-size);
|
|
978
834
|
}
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
835
|
+
.utrecht-html legend {
|
|
836
|
+
color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
|
|
837
|
+
font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
|
|
838
|
+
font-size: var(--utrecht-form-fieldset-legend-font-size);
|
|
839
|
+
font-weight: var(--utrecht-form-fieldset-legend-font-weight);
|
|
840
|
+
line-height: var(--utrecht-form-fieldset-legend-line-height);
|
|
841
|
+
page-break-after: avoid;
|
|
842
|
+
page-break-inside: avoid;
|
|
843
|
+
text-transform: var(--utrecht-form-fieldset-legend-text-transform);
|
|
844
|
+
display: table;
|
|
845
|
+
inline-size: 100%;
|
|
846
|
+
padding-inline-end: 0;
|
|
847
|
+
padding-inline-start: 0;
|
|
848
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
|
|
849
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
|
|
983
850
|
}
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
background-color: var(--utrecht-focus-background-color);
|
|
987
|
-
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
988
|
-
color: var(--utrecht-focus-color, inherit);
|
|
989
|
-
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
990
|
-
outline-offset: 0;
|
|
991
|
-
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
992
|
-
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
851
|
+
.utrecht-html fieldset:disabled > legend {
|
|
852
|
+
color: var(--utrecht-form-fieldset-legend-disabled-color, var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit)));
|
|
993
853
|
}
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
854
|
+
.utrecht-html label {
|
|
855
|
+
color: var(--utrecht-form-label-color);
|
|
856
|
+
font-size: var(--utrecht-form-label-font-size);
|
|
857
|
+
font-weight: var(--utrecht-form-label-font-weight);
|
|
998
858
|
}
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
*/
|
|
1004
|
-
/**
|
|
1005
|
-
* @license EUPL-1.2
|
|
1006
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1007
|
-
*/
|
|
1008
|
-
.utrecht-textbox, .utrecht-html input[type=email],
|
|
1009
|
-
.utrecht-html input[type=password],
|
|
1010
|
-
.utrecht-html input[type=search],
|
|
1011
|
-
.utrecht-html input[type=tel],
|
|
1012
|
-
.utrecht-html input[type=text],
|
|
1013
|
-
.utrecht-html input[type=url] {
|
|
1014
|
-
border-width: var(--utrecht-textbox-border-width);
|
|
1015
|
-
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
|
|
1016
|
-
border-color: var(--utrecht-textbox-border-color);
|
|
1017
|
-
border-radius: var(--utrecht-textbox-border-radius, 0);
|
|
1018
|
-
border-style: solid;
|
|
1019
|
-
box-sizing: border-box;
|
|
1020
|
-
color: var(--utrecht-textbox-color);
|
|
1021
|
-
font-family: var(--utrecht-textbox-font-family);
|
|
1022
|
-
font-size: var(--utrecht-textbox-font-size, 1em);
|
|
1023
|
-
max-width: var(--utrecht-textbox-max-width);
|
|
1024
|
-
padding-block-end: var(--utrecht-textbox-padding-block-end);
|
|
1025
|
-
padding-block-start: var(--utrecht-textbox-padding-block-start);
|
|
1026
|
-
padding-inline-end: var(--utrecht-textbox-padding-inline-end);
|
|
1027
|
-
padding-inline-start: var(--utrecht-textbox-padding-inline-start);
|
|
1028
|
-
width: 100%;
|
|
859
|
+
.utrecht-html input[type=checkbox i] ~ label {
|
|
860
|
+
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
861
|
+
cursor: var(--utrecht-action-activate-cursor, revert);
|
|
862
|
+
font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
|
|
1029
863
|
}
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
.utrecht-html input[type=tel]:invalid,
|
|
1035
|
-
.utrecht-html input[type=text]:invalid,
|
|
1036
|
-
.utrecht-html input[type=url]:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input[aria-invalid=true][type=email],
|
|
1037
|
-
.utrecht-html input[aria-invalid=true][type=password],
|
|
1038
|
-
.utrecht-html input[aria-invalid=true][type=search],
|
|
1039
|
-
.utrecht-html input[aria-invalid=true][type=tel],
|
|
1040
|
-
.utrecht-html input[aria-invalid=true][type=text],
|
|
1041
|
-
.utrecht-html input[aria-invalid=true][type=url] {
|
|
1042
|
-
border-color: var(--utrecht-textbox-invalid-border-color);
|
|
1043
|
-
border-width: var(--utrecht-textbox-invalid-border-width);
|
|
864
|
+
.utrecht-html input[type=radio i] ~ label {
|
|
865
|
+
color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
|
|
866
|
+
cursor: var(--utrecht-action-activate-cursor, revert);
|
|
867
|
+
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
1044
868
|
}
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
.utrecht-html
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
869
|
+
.utrecht-html mark {
|
|
870
|
+
background-color: var(--utrecht-mark-background-color, revert);
|
|
871
|
+
color: var(--utrecht-mark-color, revert);
|
|
872
|
+
}
|
|
873
|
+
@media print {
|
|
874
|
+
.utrecht-html mark {
|
|
875
|
+
outline-color: currentColor;
|
|
876
|
+
outline-style: dotted;
|
|
877
|
+
outline-width: 0.1em;
|
|
878
|
+
}
|
|
879
|
+
}
|
|
880
|
+
@media screen and (-ms-high-contrast: active) {
|
|
881
|
+
.utrecht-html mark {
|
|
882
|
+
background-color: Highlight;
|
|
883
|
+
color: HighlightText;
|
|
884
|
+
}
|
|
885
|
+
}
|
|
886
|
+
.utrecht-html h1 {
|
|
887
|
+
page-break-after: avoid;
|
|
888
|
+
page-break-inside: avoid;
|
|
889
|
+
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
890
|
+
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
891
|
+
font-size: var(--utrecht-heading-1-font-size, revert);
|
|
892
|
+
font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
893
|
+
letter-spacing: var(--utrecht-heading-1-letter-spacing);
|
|
894
|
+
line-height: var(--utrecht-heading-1-line-height);
|
|
895
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
|
|
896
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
|
|
897
|
+
page-break-after: avoid;
|
|
898
|
+
text-transform: var(--utrecht-heading-1-text-transform, inherit);
|
|
899
|
+
--utrecht-space-around: 1;
|
|
1054
900
|
}
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
901
|
+
.utrecht-html h2 {
|
|
902
|
+
page-break-after: avoid;
|
|
903
|
+
page-break-inside: avoid;
|
|
904
|
+
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
905
|
+
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
906
|
+
font-size: var(--utrecht-heading-2-font-size, revert);
|
|
907
|
+
font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
908
|
+
letter-spacing: var(--utrecht-heading-2-letter-spacing);
|
|
909
|
+
line-height: var(--utrecht-heading-2-line-height);
|
|
910
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
|
|
911
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
|
|
912
|
+
page-break-after: avoid;
|
|
913
|
+
text-transform: var(--utrecht-heading-2-text-transform, inherit);
|
|
914
|
+
--utrecht-space-around: 1;
|
|
1069
915
|
}
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
916
|
+
.utrecht-html h3 {
|
|
917
|
+
page-break-after: avoid;
|
|
918
|
+
page-break-inside: avoid;
|
|
919
|
+
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
920
|
+
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
921
|
+
font-size: var(--utrecht-heading-3-font-size, revert);
|
|
922
|
+
font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
923
|
+
letter-spacing: var(--utrecht-heading-3-letter-spacing);
|
|
924
|
+
line-height: var(--utrecht-heading-3-line-height);
|
|
925
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
|
|
926
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
|
|
927
|
+
page-break-after: avoid;
|
|
928
|
+
text-transform: var(--utrecht-heading-3-text-transform, inherit);
|
|
929
|
+
--utrecht-space-around: 1;
|
|
1079
930
|
}
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
padding-inline-start: 2ch;
|
|
931
|
+
.utrecht-html h4 {
|
|
932
|
+
page-break-after: avoid;
|
|
933
|
+
page-break-inside: avoid;
|
|
934
|
+
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
935
|
+
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
936
|
+
font-size: var(--utrecht-heading-4-font-size, revert);
|
|
937
|
+
font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
938
|
+
letter-spacing: var(--utrecht-heading-4-letter-spacing);
|
|
939
|
+
line-height: var(--utrecht-heading-4-line-height);
|
|
940
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
|
|
941
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
|
|
942
|
+
page-break-after: avoid;
|
|
943
|
+
text-transform: var(--utrecht-heading-4-text-transform, inherit);
|
|
944
|
+
--utrecht-space-around: 1;
|
|
1095
945
|
}
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
946
|
+
.utrecht-html h5 {
|
|
947
|
+
page-break-after: avoid;
|
|
948
|
+
page-break-inside: avoid;
|
|
949
|
+
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
950
|
+
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
951
|
+
font-size: var(--utrecht-heading-5-font-size, revert);
|
|
952
|
+
font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
953
|
+
letter-spacing: var(--utrecht-heading-5-letter-spacing);
|
|
954
|
+
line-height: var(--utrecht-heading-5-line-height);
|
|
955
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
|
|
956
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
|
|
957
|
+
page-break-after: avoid;
|
|
958
|
+
text-transform: var(--utrecht-heading-5-text-transform, inherit);
|
|
959
|
+
--utrecht-space-around: 1;
|
|
1100
960
|
}
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
961
|
+
.utrecht-html h6 {
|
|
962
|
+
page-break-after: avoid;
|
|
963
|
+
page-break-inside: avoid;
|
|
964
|
+
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
965
|
+
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
966
|
+
font-size: var(--utrecht-heading-6-font-size, revert);
|
|
967
|
+
font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
|
|
968
|
+
letter-spacing: var(--utrecht-heading-6-letter-spacing);
|
|
969
|
+
line-height: var(--utrecht-heading-6-line-height);
|
|
970
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
|
|
971
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
|
|
972
|
+
page-break-after: avoid;
|
|
973
|
+
text-transform: var(--utrecht-heading-6-text-transform, inherit);
|
|
974
|
+
--utrecht-space-around: 1;
|
|
1105
975
|
}
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
976
|
+
.utrecht-html hgroup {
|
|
977
|
+
--utrecht-pre-heading-order: -1;
|
|
978
|
+
display: flex;
|
|
979
|
+
flex-direction: column;
|
|
980
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-end, 0));
|
|
981
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-start, 0));
|
|
982
|
+
--utrecht-space-around: 1;
|
|
1111
983
|
}
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
.utrecht-unordered-list__marker {
|
|
1115
|
-
color: var(--utrecht-unordered-list-marker-color);
|
|
1116
|
-
content: "●";
|
|
984
|
+
.utrecht-html hgroup > * {
|
|
985
|
+
--utrecht-space-around: 0;
|
|
1117
986
|
}
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
* @license EUPL-1.2
|
|
1121
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1122
|
-
*/
|
|
1123
|
-
/**
|
|
1124
|
-
* @license EUPL-1.2
|
|
1125
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1126
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1127
|
-
*/
|
|
1128
|
-
.utrecht-link, .utrecht-html a:link {
|
|
987
|
+
.utrecht-html a {
|
|
988
|
+
--utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
|
|
1129
989
|
color: var(--utrecht-link-color, blue);
|
|
1130
990
|
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
991
|
+
text-decoration-color: var(--utrecht-link-text-decoration-color, currentColor);
|
|
992
|
+
text-decoration-skip-ink: all;
|
|
993
|
+
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
994
|
+
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
1131
995
|
}
|
|
1132
|
-
|
|
1133
|
-
.utrecht-link:visited,
|
|
1134
|
-
.utrecht-link--visited,
|
|
1135
996
|
.utrecht-html a:visited {
|
|
1136
997
|
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
1137
998
|
}
|
|
1138
|
-
|
|
1139
|
-
.utrecht-link:hover,
|
|
1140
|
-
.utrecht-link--hover,
|
|
1141
999
|
.utrecht-html a:hover {
|
|
1142
1000
|
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
1143
1001
|
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1002
|
+
text-decoration-skip: none;
|
|
1003
|
+
text-decoration-skip-ink: none;
|
|
1004
|
+
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1144
1005
|
}
|
|
1145
|
-
|
|
1146
|
-
.utrecht-link:active,
|
|
1147
|
-
.utrecht-link--active,
|
|
1148
1006
|
.utrecht-html a:active {
|
|
1149
1007
|
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
1150
1008
|
}
|
|
1151
|
-
|
|
1152
|
-
.utrecht-link:focus,
|
|
1153
|
-
.utrecht-link--focus,
|
|
1154
1009
|
.utrecht-html a:focus {
|
|
1010
|
+
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
1155
1011
|
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
1156
1012
|
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1013
|
+
text-decoration-skip: none;
|
|
1014
|
+
text-decoration-skip-ink: none;
|
|
1015
|
+
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1016
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1017
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1018
|
+
* can combine it with the focus ring box shadow.
|
|
1019
|
+
*/
|
|
1020
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1021
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1022
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1023
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1024
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1025
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1026
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1027
|
+
}
|
|
1028
|
+
.utrecht-html a:focus:not(:focus-visible) {
|
|
1029
|
+
/* undo focus ring */
|
|
1030
|
+
box-shadow: none;
|
|
1031
|
+
outline-style: revert;
|
|
1032
|
+
}
|
|
1033
|
+
.utrecht-html a[href^="tel:" i] {
|
|
1168
1034
|
white-space: nowrap;
|
|
1169
1035
|
}
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
* @license EUPL-1.2
|
|
1173
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1174
|
-
*/
|
|
1175
|
-
/**
|
|
1176
|
-
* @license EUPL-1.2
|
|
1177
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1178
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1179
|
-
*/
|
|
1180
|
-
.utrecht-ordered-list, .utrecht-html ol {
|
|
1036
|
+
.utrecht-html ol {
|
|
1037
|
+
/* Configure `width` and `text-align` for `--center` */
|
|
1181
1038
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
1039
|
+
font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
|
|
1040
|
+
line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
|
|
1041
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
|
|
1042
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
|
|
1043
|
+
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
1044
|
+
text-align: start;
|
|
1045
|
+
width: max-content;
|
|
1046
|
+
--utrecht-space-around: 1;
|
|
1182
1047
|
}
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
margin-block-
|
|
1186
|
-
|
|
1048
|
+
.utrecht-html ol > li {
|
|
1049
|
+
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
|
|
1050
|
+
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
1051
|
+
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
1187
1052
|
}
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
|
|
1191
|
-
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
|
|
1053
|
+
.utrecht-html ol:lang(ar) {
|
|
1054
|
+
list-style: arabic-indic;
|
|
1192
1055
|
}
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
* @license EUPL-1.2
|
|
1196
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1197
|
-
*/
|
|
1198
|
-
/**
|
|
1199
|
-
* @license EUPL-1.2
|
|
1200
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1201
|
-
*/
|
|
1202
|
-
.utrecht-paragraph, .utrecht-html p {
|
|
1203
|
-
color: var(--utrecht-document-color, inherit);
|
|
1056
|
+
.utrecht-html p {
|
|
1057
|
+
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
1204
1058
|
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
1205
1059
|
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
1206
1060
|
font-weight: var(--utrecht-paragraph-font-weight, inherit);
|
|
1207
1061
|
line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
}
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1062
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
|
|
1063
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
|
|
1064
|
+
}
|
|
1065
|
+
.utrecht-html p.lead {
|
|
1066
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
|
|
1067
|
+
font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
|
|
1068
|
+
font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
|
|
1069
|
+
line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
|
|
1070
|
+
}
|
|
1071
|
+
.utrecht-html * ~ p {
|
|
1072
|
+
--utrecht-space-around: 1;
|
|
1073
|
+
}
|
|
1074
|
+
.utrecht-html p:has(> small:only-child) {
|
|
1075
|
+
color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
|
|
1076
|
+
font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
|
|
1077
|
+
font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
|
|
1078
|
+
line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
|
|
1079
|
+
}
|
|
1080
|
+
.utrecht-html p > small:only-child {
|
|
1081
|
+
font-size: inherit;
|
|
1082
|
+
}
|
|
1083
|
+
.utrecht-html pre:has(> code:only-child) {
|
|
1084
|
+
/* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
|
|
1085
|
+
background-color: var(--utrecht-code-background-color);
|
|
1086
|
+
color: var(--utrecht-code-color);
|
|
1087
|
+
font-family: var(--utrecht-code-font-family, monospace), monospace;
|
|
1088
|
+
font-size: var(--utrecht-code-font-size);
|
|
1089
|
+
font-variant-ligatures: none;
|
|
1090
|
+
line-height: var(--utrecht-code-line-height);
|
|
1091
|
+
--utrecht-code-color: var(--utrecht-code-block-color, inherit);
|
|
1092
|
+
--utrecht-code-background-color: var(--utrecht-code-block-background-color, inherit);
|
|
1093
|
+
--utrecht-code-font-weight: var(--utrecht-code-block-font-weight, inherit);
|
|
1094
|
+
--utrecht-code-font-size: var(--utrecht-code-block-font-size, inherit);
|
|
1095
|
+
--utrecht-code-font-family: var(--utrecht-code-block-font-family, monospace);
|
|
1096
|
+
background-color: var(--utrecht-code-block-background-color);
|
|
1097
|
+
display: block;
|
|
1098
|
+
font-size: var(--utrecht-code-block-font-size, var(--utrecht-code-font-size));
|
|
1099
|
+
line-height: var(--utrecht-code-block-line-height, var(--utrecht-code-line-height));
|
|
1100
|
+
margin-block-end: var(--utrecht-code-block-margin-block-end);
|
|
1101
|
+
margin-block-start: var(--utrecht-code-block-margin-block-start);
|
|
1102
|
+
margin-inline-end: var(--utrecht-code-block-margin-inline-end);
|
|
1103
|
+
margin-inline-start: var(--utrecht-code-block-margin-inline-start);
|
|
1104
|
+
padding-block-end: var(--utrecht-code-block-padding-block-end);
|
|
1105
|
+
padding-block-start: var(--utrecht-code-block-padding-block-start);
|
|
1106
|
+
padding-inline-end: var(--utrecht-code-block-padding-inline-end);
|
|
1107
|
+
padding-inline-start: var(--utrecht-code-block-padding-inline-start);
|
|
1108
|
+
white-space: pre;
|
|
1109
|
+
}
|
|
1110
|
+
.utrecht-html pre:has(> code:only-child) > code {
|
|
1111
|
+
display: contents;
|
|
1112
|
+
}
|
|
1113
|
+
.utrecht-html input[type=radio i] {
|
|
1114
|
+
/*
|
|
1115
|
+
* For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
|
|
1116
|
+
* With a 0% gradient, the circle will have jagged edges.
|
|
1117
|
+
*/
|
|
1118
|
+
-webkit-appearance: none;
|
|
1119
|
+
-moz-appearance: none;
|
|
1120
|
+
appearance: none;
|
|
1231
1121
|
margin-block-end: 0;
|
|
1232
|
-
/* reset native margin for input[type="radio"] */
|
|
1233
1122
|
margin-block-start: 0;
|
|
1234
1123
|
margin-inline-end: 0;
|
|
1235
1124
|
margin-inline-start: 0;
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1125
|
+
--_utrecht-radio-button-background-color: var(
|
|
1126
|
+
--_utrecht-radio-button-interactive-background-color,
|
|
1127
|
+
var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
|
|
1128
|
+
);
|
|
1129
|
+
--_utrecht-radio-button-border-color: var(
|
|
1130
|
+
--_utrecht-radio-button-interactive-border-color,
|
|
1131
|
+
var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
|
|
1132
|
+
);
|
|
1133
|
+
--_utrecht-radio-button-border-width: var(
|
|
1134
|
+
--_utrecht-radio-button-interactive-border-width,
|
|
1135
|
+
var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
|
|
1136
|
+
);
|
|
1137
|
+
--_utrecht-radio-button-color: var(
|
|
1138
|
+
--_utrecht-radio-button-interactive-color,
|
|
1139
|
+
var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
|
|
1140
|
+
);
|
|
1141
|
+
--_utrecht-radio-button-icon-size: 0;
|
|
1142
|
+
background-color: var(--_utrecht-radio-button-background-color);
|
|
1143
|
+
background-image: radial-gradient(circle, var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%));
|
|
1144
|
+
background-position: center;
|
|
1145
|
+
background-repeat: no-repeat;
|
|
1146
|
+
background-size: contain;
|
|
1147
|
+
block-size: var(--utrecht-radio-button-size, 1em);
|
|
1148
|
+
border-color: var(--_utrecht-radio-button-border-color);
|
|
1149
|
+
border-radius: 50%;
|
|
1150
|
+
border-style: solid;
|
|
1151
|
+
border-width: var(--_utrecht-radio-button-border-width);
|
|
1152
|
+
cursor: var(--utrecht-action-activate-cursor);
|
|
1153
|
+
inline-size: var(--utrecht-radio-button-size, 1em);
|
|
1154
|
+
margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
|
|
1155
|
+
-webkit-print-color-adjust: exact;
|
|
1156
|
+
print-color-adjust: exact;
|
|
1157
|
+
-webkit-user-select: none;
|
|
1158
|
+
user-select: none;
|
|
1159
|
+
vertical-align: top;
|
|
1160
|
+
/* override the `:focus` selector above */
|
|
1161
|
+
/* stylelint-disable-next-line no-descending-specificity */
|
|
1162
|
+
}
|
|
1163
|
+
.utrecht-html input[type=radio i]:checked {
|
|
1164
|
+
--_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
|
|
1165
|
+
--_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
|
|
1166
|
+
--_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
|
|
1167
|
+
--_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
|
|
1168
|
+
--_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
|
|
1169
|
+
--_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
|
|
1170
|
+
--_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
|
|
1171
|
+
--_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
|
|
1172
|
+
--_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
|
|
1173
|
+
--_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
|
|
1174
|
+
--_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
|
|
1175
|
+
--_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
|
|
1176
|
+
--_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
|
|
1177
|
+
--_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
|
|
1178
|
+
--_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
|
|
1179
|
+
--_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
|
|
1180
|
+
--_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
|
|
1181
|
+
}
|
|
1182
|
+
.utrecht-html input[type=radio i]:disabled {
|
|
1183
|
+
/*
|
|
1184
|
+
* The disabled radio button should have:
|
|
1185
|
+
* - should have no active effect
|
|
1186
|
+
* - should have no focus effect
|
|
1187
|
+
* - should have no hover effect
|
|
1188
|
+
* - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
|
|
1189
|
+
*/
|
|
1190
|
+
--_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
|
|
1191
|
+
--_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
|
|
1192
|
+
--_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
|
|
1193
|
+
--_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
|
|
1194
|
+
/* no focus effect */
|
|
1195
|
+
--_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
|
|
1196
|
+
--_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
|
|
1197
|
+
--_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
|
|
1198
|
+
--_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
|
|
1199
|
+
/* no active effect */
|
|
1200
|
+
--_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
|
|
1201
|
+
--_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
|
|
1202
|
+
--_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
|
|
1203
|
+
--_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
|
|
1204
|
+
/* no hover effect */
|
|
1205
|
+
--_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
|
|
1206
|
+
--_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
|
|
1207
|
+
--_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
|
|
1208
|
+
--_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
|
|
1209
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1210
|
+
}
|
|
1211
|
+
.utrecht-html input[type=radio i]:invalid, .utrecht-html input[type=radio i][aria-invalid=true] {
|
|
1212
|
+
border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
|
|
1213
|
+
border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
|
|
1214
|
+
color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
|
|
1215
|
+
}
|
|
1216
|
+
.utrecht-html input[type=radio i]:focus:not([aria-disabled=true], :disabled) {
|
|
1217
|
+
--_utrecht-radio-button-interactive-background-color: var(
|
|
1218
|
+
--utrecht-radio-button-focus-background-color,
|
|
1219
|
+
var(--utrecht-radio-button-focus-background-color)
|
|
1220
|
+
);
|
|
1221
|
+
--_utrecht-radio-button-interactive-border-color: var(
|
|
1222
|
+
--utrecht-radio-button-focus-border-color,
|
|
1223
|
+
var(--utrecht-radio-button-focus-border-color)
|
|
1224
|
+
);
|
|
1225
|
+
--_utrecht-radio-button-interactive-border-width: var(
|
|
1226
|
+
--utrecht-radio-button-focus-border-width,
|
|
1227
|
+
var(--utrecht-radio-button-focus-border-width)
|
|
1228
|
+
);
|
|
1229
|
+
--_utrecht-radio-button-interactive-color: var(
|
|
1230
|
+
--utrecht-radio-button-focus-color,
|
|
1231
|
+
var(--utrecht-radio-button-focus-color)
|
|
1232
|
+
);
|
|
1233
|
+
}
|
|
1234
|
+
.utrecht-html input[type=radio i]:focus-visible {
|
|
1235
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1236
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1237
|
+
* can combine it with the focus ring box shadow.
|
|
1238
|
+
*/
|
|
1239
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1240
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1241
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1242
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1243
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1244
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1245
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1246
|
+
}
|
|
1247
|
+
.utrecht-html input[type=radio i]:hover:not([aria-disabled=true], :disabled) {
|
|
1248
|
+
--_utrecht-radio-button-interactive-background-color: var(
|
|
1249
|
+
--_utrecht-radio-button-state-hover-background-color,
|
|
1250
|
+
var(--utrecht-radio-button-hover-background-color)
|
|
1251
|
+
);
|
|
1252
|
+
--_utrecht-radio-button-interactive-border-color: var(
|
|
1253
|
+
--_utrecht-radio-button-state-hover-border-color,
|
|
1254
|
+
var(--utrecht-radio-button-hover-border-color)
|
|
1255
|
+
);
|
|
1256
|
+
--_utrecht-radio-button-interactive-border-width: var(
|
|
1257
|
+
--_utrecht-radio-button-state-hover-border-width,
|
|
1258
|
+
var(--utrecht-radio-button-hover-border-width)
|
|
1259
|
+
);
|
|
1260
|
+
--_utrecht-radio-button-interactive-color: var(
|
|
1261
|
+
--_utrecht-radio-button-state-hover-color,
|
|
1262
|
+
var(--utrecht-radio-button-hover-color)
|
|
1263
|
+
);
|
|
1264
|
+
}
|
|
1265
|
+
.utrecht-html input[type=radio i]:active:not([aria-disabled=true], :disabled) {
|
|
1266
|
+
--_utrecht-radio-button-interactive-background-color: var(
|
|
1267
|
+
--_utrecht-radio-button-state-active-background-color,
|
|
1268
|
+
var(--utrecht-radio-button-active-background-color)
|
|
1269
|
+
);
|
|
1270
|
+
--_utrecht-radio-button-interactive-border-color: var(
|
|
1271
|
+
--_utrecht-radio-button-state-active-border-color,
|
|
1272
|
+
var(--utrecht-radio-button-active-border-color)
|
|
1273
|
+
);
|
|
1274
|
+
--_utrecht-radio-button-interactive-border-width: var(
|
|
1275
|
+
--_utrecht-radio-button-state-active-border-width,
|
|
1276
|
+
var(--utrecht-radio-button-active-border-width)
|
|
1277
|
+
);
|
|
1278
|
+
--_utrecht-radio-button-interactive-color: var(
|
|
1279
|
+
--_utrecht-radio-button-state-active-color,
|
|
1280
|
+
var(--utrecht-radio-button-active-color)
|
|
1281
|
+
);
|
|
1282
|
+
}
|
|
1283
|
+
.utrecht-html select {
|
|
1284
|
+
-moz-appearance: none;
|
|
1285
|
+
-webkit-appearance: none;
|
|
1286
|
+
appearance: none;
|
|
1287
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
|
|
1288
|
+
background-image: var(--utrecht-select-background-image);
|
|
1289
|
+
background-position: 100%;
|
|
1290
|
+
background-repeat: no-repeat;
|
|
1291
|
+
background-size: 1.4em;
|
|
1292
|
+
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
|
|
1293
|
+
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
|
|
1294
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
|
|
1295
|
+
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
|
|
1296
|
+
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
|
|
1297
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
1298
|
+
border-style: solid;
|
|
1299
|
+
color: var(--utrecht-select-color, var(--utrecht-form-control-color));
|
|
1300
|
+
font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
|
|
1301
|
+
font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
|
|
1302
|
+
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
1303
|
+
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
|
|
1304
|
+
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
|
|
1305
|
+
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
|
|
1306
|
+
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
|
|
1307
|
+
width: 100%;
|
|
1308
|
+
/* <select> does not support :read-only */
|
|
1309
|
+
}
|
|
1310
|
+
.utrecht-html select:disabled {
|
|
1311
|
+
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
1312
|
+
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
1313
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
|
|
1314
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1315
|
+
}
|
|
1316
|
+
.utrecht-html select:focus {
|
|
1317
|
+
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
1318
|
+
border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
1319
|
+
color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
|
|
1320
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1321
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1322
|
+
* can combine it with the focus ring box shadow.
|
|
1323
|
+
*/
|
|
1324
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1325
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1326
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1327
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1328
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1329
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1330
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1331
|
+
}
|
|
1332
|
+
.utrecht-html select:focus:not(:focus-visible) {
|
|
1333
|
+
/* undo focus ring */
|
|
1334
|
+
box-shadow: none;
|
|
1335
|
+
outline-style: revert;
|
|
1336
|
+
}
|
|
1337
|
+
.utrecht-html select[aria-invalid=true] {
|
|
1338
|
+
--_utrecht-select-border-width: var(
|
|
1339
|
+
--utrecht-select-invalid-border-width,
|
|
1340
|
+
var(
|
|
1341
|
+
--utrecht-form-control-invalid-border-width,
|
|
1342
|
+
var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
|
|
1343
|
+
)
|
|
1344
|
+
);
|
|
1345
|
+
background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
1346
|
+
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
1347
|
+
border-width: var(--_utrecht-select-border-width);
|
|
1348
|
+
border-bottom-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
|
|
1349
|
+
}
|
|
1350
|
+
.utrecht-html hr {
|
|
1249
1351
|
border-color: var(--utrecht-separator-color);
|
|
1250
1352
|
border-style: solid;
|
|
1251
|
-
border-width: 0 0 var(--utrecht-separator-
|
|
1252
|
-
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
1253
|
-
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
1353
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
1354
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
|
|
1355
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
|
|
1356
|
+
--utrecht-space-around: 1;
|
|
1254
1357
|
}
|
|
1255
|
-
|
|
1256
|
-
/**
|
|
1257
|
-
* @license EUPL-1.2
|
|
1258
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1259
|
-
*/
|
|
1260
|
-
/**
|
|
1261
|
-
* @license EUPL-1.2
|
|
1262
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1263
|
-
*/
|
|
1264
|
-
.utrecht-table, .utrecht-html table {
|
|
1358
|
+
.utrecht-html table {
|
|
1265
1359
|
border-collapse: collapse;
|
|
1360
|
+
border-color: var(--utrecht-table-border-color, 0);
|
|
1361
|
+
border-style: solid;
|
|
1362
|
+
border-width: var(--utrecht-table-border-width, 0);
|
|
1363
|
+
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
1364
|
+
font-size: var(--utrecht-table-font-size, inherit);
|
|
1365
|
+
line-height: var(--utrecht-table-line-height, inherit);
|
|
1366
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
|
|
1367
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
|
|
1266
1368
|
width: 100%;
|
|
1369
|
+
--utrecht-space-around: 1;
|
|
1267
1370
|
}
|
|
1268
|
-
|
|
1269
|
-
.utrecht-table--distanced, .utrecht-html table {
|
|
1270
|
-
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
1271
|
-
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
1272
|
-
}
|
|
1273
|
-
|
|
1274
|
-
.utrecht-table__caption, .utrecht-html caption {
|
|
1371
|
+
.utrecht-html caption {
|
|
1275
1372
|
color: var(--utrecht-table-caption-color);
|
|
1276
1373
|
font-family: var(--utrecht-table-caption-font-family);
|
|
1277
1374
|
font-size: var(--utrecht-table-caption-font-size);
|
|
1278
1375
|
font-weight: var(--utrecht-table-caption-font-weight);
|
|
1279
1376
|
line-height: var(--utrecht-table-caption-line-height);
|
|
1280
1377
|
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
1378
|
+
page-break-after: avoid;
|
|
1281
1379
|
text-align: var(--utrecht-table-caption-text-align, center);
|
|
1282
1380
|
}
|
|
1283
|
-
|
|
1284
|
-
|
|
1381
|
+
.utrecht-html thead {
|
|
1382
|
+
--_utrecht-table-header-cell-vertical-align: bottom;
|
|
1383
|
+
background-color: var(--utrecht-table-header-background-color);
|
|
1285
1384
|
color: var(--utrecht-table-header-color);
|
|
1286
1385
|
font-weight: var(--utrecht-table-header-font-weight);
|
|
1386
|
+
page-break-inside: avoid;
|
|
1287
1387
|
text-transform: var(--utrecht-table-header-text-transform);
|
|
1288
|
-
vertical-align: bottom;
|
|
1289
|
-
}
|
|
1290
|
-
|
|
1291
|
-
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
1292
|
-
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
1293
|
-
border-block-end-style: solid;
|
|
1294
|
-
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
1295
|
-
}
|
|
1296
|
-
|
|
1297
|
-
.utrecht-table__body, .utrecht-html tbody {
|
|
1298
|
-
vertical-align: baseline;
|
|
1299
1388
|
}
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1389
|
+
.utrecht-html th {
|
|
1390
|
+
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
1391
|
+
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
1392
|
+
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
1393
|
+
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
1394
|
+
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
1395
|
+
text-align: start;
|
|
1396
|
+
color: var(--utrecht-table-header-cell-color);
|
|
1397
|
+
font-size: var(--utrecht-table-header-cell-font-size);
|
|
1398
|
+
font-weight: var(--utrecht-table-header-cell-font-weight, bold);
|
|
1399
|
+
text-transform: var(--utrecht-table-header-cell-text-transform);
|
|
1400
|
+
vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
|
|
1305
1401
|
}
|
|
1306
|
-
|
|
1307
|
-
.utrecht-table__cell, .utrecht-html th,
|
|
1402
|
+
.utrecht-html th,
|
|
1308
1403
|
.utrecht-html td {
|
|
1309
|
-
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
1310
|
-
border-block-end-style: solid;
|
|
1311
|
-
border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
|
|
1312
1404
|
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
1313
1405
|
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
1314
1406
|
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
1315
1407
|
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
1316
1408
|
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
1317
1409
|
text-align: start;
|
|
1410
|
+
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
1411
|
+
border-block-end-style: solid;
|
|
1412
|
+
border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
|
|
1413
|
+
vertical-align: top;
|
|
1318
1414
|
}
|
|
1319
|
-
|
|
1320
|
-
.utrecht-table__cell--first, .utrecht-html td:first-child,
|
|
1415
|
+
.utrecht-html td:first-child,
|
|
1321
1416
|
.utrecht-html th:first-child {
|
|
1322
1417
|
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
1323
1418
|
}
|
|
1324
|
-
|
|
1325
|
-
.utrecht-table__cell--last, .utrecht-html td:last-child,
|
|
1419
|
+
.utrecht-html td:last-child,
|
|
1326
1420
|
.utrecht-html th:last-child {
|
|
1327
1421
|
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
1328
1422
|
}
|
|
1329
|
-
|
|
1330
|
-
|
|
1423
|
+
.utrecht-html thead tr:last-child th {
|
|
1424
|
+
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
1425
|
+
border-block-end-style: solid;
|
|
1426
|
+
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
1427
|
+
}
|
|
1428
|
+
.utrecht-html thead > tr > th.numeric,
|
|
1429
|
+
.utrecht-html tfoot > tr > th.numeric,
|
|
1430
|
+
.utrecht-html th[scope=column].numeric {
|
|
1431
|
+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
1432
|
+
text-align: right;
|
|
1433
|
+
}
|
|
1331
1434
|
.utrecht-html td.numeric {
|
|
1332
1435
|
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
1333
1436
|
text-align: right;
|
|
1437
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
1334
1438
|
}
|
|
1335
|
-
|
|
1336
|
-
|
|
1439
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
|
|
1440
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
1441
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
1442
|
+
}
|
|
1443
|
+
.utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
|
|
1337
1444
|
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
1338
1445
|
color: var(--utrecht-table-row-alternate-odd-color);
|
|
1339
1446
|
}
|
|
1340
|
-
|
|
1341
|
-
.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 {
|
|
1447
|
+
.utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
|
|
1342
1448
|
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
1343
1449
|
color: var(--utrecht-table-row-alternate-even-color);
|
|
1344
1450
|
}
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
*/
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
border-width: var(--utrecht-textarea-border-width);
|
|
1357
|
-
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
|
|
1358
|
-
border-color: var(--utrecht-textarea-border-color);
|
|
1359
|
-
border-radius: var(--utrecht-textarea-border-radius, 0);
|
|
1451
|
+
.utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
|
|
1452
|
+
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
1453
|
+
color: var(--utrecht-table-row-alternate-odd-color);
|
|
1454
|
+
}
|
|
1455
|
+
.utrecht-html textarea {
|
|
1456
|
+
/* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
|
|
1457
|
+
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
|
|
1458
|
+
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
|
|
1459
|
+
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
|
|
1460
|
+
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
|
|
1461
|
+
border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
1360
1462
|
border-style: solid;
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
font-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1463
|
+
box-sizing: border-box;
|
|
1464
|
+
color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
|
|
1465
|
+
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
|
|
1466
|
+
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
1467
|
+
font-weight: initial; /* harden */
|
|
1468
|
+
height: initial; /* harden */
|
|
1469
|
+
line-height: var(--utrecht-textarea-line-height, initial);
|
|
1470
|
+
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
1471
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
1472
|
+
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
|
|
1473
|
+
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
|
|
1474
|
+
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
|
|
1475
|
+
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
1476
|
+
resize: vertical;
|
|
1477
|
+
resize: block;
|
|
1369
1478
|
width: 100%;
|
|
1370
1479
|
}
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
border-color: var(--utrecht-textarea-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
.utrecht-
|
|
1378
|
-
|
|
1379
|
-
color: var(--utrecht-textarea-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
outline-
|
|
1389
|
-
outline-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
border-
|
|
1480
|
+
.utrecht-html textarea:disabled {
|
|
1481
|
+
background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
1482
|
+
border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
1483
|
+
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1484
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1485
|
+
}
|
|
1486
|
+
.utrecht-html textarea:focus {
|
|
1487
|
+
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
1488
|
+
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
1489
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1490
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1491
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1492
|
+
* can combine it with the focus ring box shadow.
|
|
1493
|
+
*/
|
|
1494
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1495
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1496
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1497
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1498
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1499
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1500
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1501
|
+
}
|
|
1502
|
+
.utrecht-html textarea:focus:not(:focus-visible) {
|
|
1503
|
+
/* undo focus ring */
|
|
1504
|
+
box-shadow: none;
|
|
1505
|
+
outline-style: revert;
|
|
1506
|
+
}
|
|
1507
|
+
.utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
|
|
1508
|
+
--_utrecht-textarea-border-width: var(
|
|
1509
|
+
--utrecht-textarea-invalid-border-width,
|
|
1510
|
+
var(
|
|
1511
|
+
--utrecht-form-control-invalid-border-width,
|
|
1512
|
+
var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
|
|
1513
|
+
)
|
|
1514
|
+
);
|
|
1515
|
+
background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
1516
|
+
border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
1517
|
+
border-width: var(--_utrecht-textarea-border-width);
|
|
1518
|
+
border-bottom-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
|
|
1519
|
+
color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1520
|
+
}
|
|
1521
|
+
.utrecht-html textarea:read-only {
|
|
1522
|
+
background-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));
|
|
1523
|
+
border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
|
|
1524
|
+
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1525
|
+
}
|
|
1526
|
+
.utrecht-html textarea::placeholder {
|
|
1527
|
+
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1528
|
+
font-style: var(--utrecht-form-control-placeholder-font-style);
|
|
1529
|
+
opacity: 100%;
|
|
1530
|
+
}
|
|
1531
|
+
.utrecht-html input:not([type]),
|
|
1532
|
+
.utrecht-html input[type=date i],
|
|
1533
|
+
.utrecht-html input[type=datetime-local i],
|
|
1534
|
+
.utrecht-html input[type=email i],
|
|
1535
|
+
.utrecht-html input[type=month i],
|
|
1536
|
+
.utrecht-html input[type=number i],
|
|
1537
|
+
.utrecht-html input[type=password i],
|
|
1538
|
+
.utrecht-html input[type=search i],
|
|
1539
|
+
.utrecht-html input[type=tel i],
|
|
1540
|
+
.utrecht-html input[type=text i],
|
|
1541
|
+
.utrecht-html input[type=time i],
|
|
1542
|
+
.utrecht-html input[type=url i],
|
|
1543
|
+
.utrecht-html input[type=week i] {
|
|
1544
|
+
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
|
|
1545
|
+
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
|
|
1546
|
+
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
|
|
1547
|
+
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
|
|
1548
|
+
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
1415
1549
|
border-style: solid;
|
|
1416
1550
|
box-sizing: border-box;
|
|
1417
|
-
color: var(--utrecht-textbox-color);
|
|
1418
|
-
font-family: var(--utrecht-textbox-font-family);
|
|
1419
|
-
font-size: var(--utrecht-textbox-font-size,
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
padding-
|
|
1551
|
+
color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
|
|
1552
|
+
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
|
|
1553
|
+
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
1554
|
+
font-weight: initial; /* harden */
|
|
1555
|
+
height: initial; /* harden */
|
|
1556
|
+
line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
|
|
1557
|
+
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
1558
|
+
padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
|
|
1559
|
+
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
|
|
1560
|
+
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
|
|
1561
|
+
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
1425
1562
|
width: 100%;
|
|
1426
1563
|
}
|
|
1427
|
-
|
|
1428
|
-
.utrecht-
|
|
1429
|
-
.utrecht-html input[type=
|
|
1430
|
-
.utrecht-html input[type=
|
|
1431
|
-
.utrecht-html input[type=
|
|
1432
|
-
.utrecht-html input[type=
|
|
1433
|
-
.utrecht-html input[type=
|
|
1434
|
-
.utrecht-html input[
|
|
1435
|
-
.utrecht-html input[
|
|
1436
|
-
.utrecht-html input[
|
|
1437
|
-
.utrecht-html input[
|
|
1438
|
-
.utrecht-html input[
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
.utrecht-html input[type
|
|
1446
|
-
.utrecht-html input[type=
|
|
1447
|
-
.utrecht-html input[type=
|
|
1448
|
-
.utrecht-html input[type=
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
.utrecht-
|
|
1454
|
-
.utrecht-html input[type=
|
|
1455
|
-
.utrecht-html input[type=
|
|
1456
|
-
.utrecht-html input[type=
|
|
1457
|
-
.utrecht-html input[type=
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
.utrecht-html input[type
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
*/
|
|
1487
|
-
|
|
1564
|
+
.utrecht-html input:not([type]):disabled,
|
|
1565
|
+
.utrecht-html input[type=date i]:disabled,
|
|
1566
|
+
.utrecht-html input[type=datetime-local i]:disabled,
|
|
1567
|
+
.utrecht-html input[type=email i]:disabled,
|
|
1568
|
+
.utrecht-html input[type=month i]:disabled,
|
|
1569
|
+
.utrecht-html input[type=number i]:disabled,
|
|
1570
|
+
.utrecht-html input[type=password i]:disabled,
|
|
1571
|
+
.utrecht-html input[type=search i]:disabled,
|
|
1572
|
+
.utrecht-html input[type=tel i]:disabled,
|
|
1573
|
+
.utrecht-html input[type=text i]:disabled,
|
|
1574
|
+
.utrecht-html input[type=time i]:disabled,
|
|
1575
|
+
.utrecht-html input[type=url i]:disabled,
|
|
1576
|
+
.utrecht-html input[type=week i]:disabled {
|
|
1577
|
+
background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
1578
|
+
border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
1579
|
+
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1580
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1581
|
+
}
|
|
1582
|
+
.utrecht-html input:not([type]):focus,
|
|
1583
|
+
.utrecht-html input[type=date i]:focus,
|
|
1584
|
+
.utrecht-html input[type=datetime-local i]:focus,
|
|
1585
|
+
.utrecht-html input[type=email i]:focus,
|
|
1586
|
+
.utrecht-html input[type=month i]:focus,
|
|
1587
|
+
.utrecht-html input[type=number i]:focus,
|
|
1588
|
+
.utrecht-html input[type=password i]:focus,
|
|
1589
|
+
.utrecht-html input[type=search i]:focus,
|
|
1590
|
+
.utrecht-html input[type=tel i]:focus,
|
|
1591
|
+
.utrecht-html input[type=text i]:focus,
|
|
1592
|
+
.utrecht-html input[type=time i]:focus,
|
|
1593
|
+
.utrecht-html input[type=url i]:focus,
|
|
1594
|
+
.utrecht-html input[type=week i]:focus {
|
|
1595
|
+
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
1596
|
+
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
1597
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1598
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1599
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1600
|
+
* can combine it with the focus ring box shadow.
|
|
1601
|
+
*/
|
|
1602
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1603
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1604
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1605
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1606
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1607
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1608
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1609
|
+
}
|
|
1610
|
+
.utrecht-html input:not([type]):focus:not(:focus-visible),
|
|
1611
|
+
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
1612
|
+
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
1613
|
+
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
1614
|
+
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
1615
|
+
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
1616
|
+
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
1617
|
+
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
1618
|
+
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
1619
|
+
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
1620
|
+
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
1621
|
+
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
1622
|
+
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
1623
|
+
/* undo focus ring */
|
|
1624
|
+
box-shadow: none;
|
|
1625
|
+
outline-style: revert;
|
|
1626
|
+
}
|
|
1627
|
+
.utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
|
|
1628
|
+
.utrecht-html input[type=date i]:invalid,
|
|
1629
|
+
.utrecht-html input[type=date i][aria-invalid=true],
|
|
1630
|
+
.utrecht-html input[type=datetime-local i]:invalid,
|
|
1631
|
+
.utrecht-html input[type=datetime-local i][aria-invalid=true],
|
|
1632
|
+
.utrecht-html input[type=email i]:invalid,
|
|
1633
|
+
.utrecht-html input[type=email i][aria-invalid=true],
|
|
1634
|
+
.utrecht-html input[type=month i]:invalid,
|
|
1635
|
+
.utrecht-html input[type=month i][aria-invalid=true],
|
|
1636
|
+
.utrecht-html input[type=number i]:invalid,
|
|
1637
|
+
.utrecht-html input[type=number i][aria-invalid=true],
|
|
1638
|
+
.utrecht-html input[type=password i]:invalid,
|
|
1639
|
+
.utrecht-html input[type=password i][aria-invalid=true],
|
|
1640
|
+
.utrecht-html input[type=search i]:invalid,
|
|
1641
|
+
.utrecht-html input[type=search i][aria-invalid=true],
|
|
1642
|
+
.utrecht-html input[type=tel i]:invalid,
|
|
1643
|
+
.utrecht-html input[type=tel i][aria-invalid=true],
|
|
1644
|
+
.utrecht-html input[type=text i]:invalid,
|
|
1645
|
+
.utrecht-html input[type=text i][aria-invalid=true],
|
|
1646
|
+
.utrecht-html input[type=time i]:invalid,
|
|
1647
|
+
.utrecht-html input[type=time i][aria-invalid=true],
|
|
1648
|
+
.utrecht-html input[type=url i]:invalid,
|
|
1649
|
+
.utrecht-html input[type=url i][aria-invalid=true],
|
|
1650
|
+
.utrecht-html input[type=week i]:invalid,
|
|
1651
|
+
.utrecht-html input[type=week i][aria-invalid=true] {
|
|
1652
|
+
--_utrecht-textbox-border-width: var(
|
|
1653
|
+
--utrecht-textbox-invalid-border-width,
|
|
1654
|
+
var(
|
|
1655
|
+
--utrecht-form-control-invalid-border-width,
|
|
1656
|
+
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
|
|
1657
|
+
)
|
|
1658
|
+
);
|
|
1659
|
+
background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
1660
|
+
border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
1661
|
+
border-width: var(--_utrecht-textbox-border-width);
|
|
1662
|
+
border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
|
|
1663
|
+
color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
1664
|
+
}
|
|
1665
|
+
.utrecht-html input:not([type]):read-only,
|
|
1666
|
+
.utrecht-html input[type=date i]:read-only,
|
|
1667
|
+
.utrecht-html input[type=datetime-local i]:read-only,
|
|
1668
|
+
.utrecht-html input[type=email i]:read-only,
|
|
1669
|
+
.utrecht-html input[type=month i]:read-only,
|
|
1670
|
+
.utrecht-html input[type=number i]:read-only,
|
|
1671
|
+
.utrecht-html input[type=password i]:read-only,
|
|
1672
|
+
.utrecht-html input[type=search i]:read-only,
|
|
1673
|
+
.utrecht-html input[type=tel i]:read-only,
|
|
1674
|
+
.utrecht-html input[type=text i]:read-only,
|
|
1675
|
+
.utrecht-html input[type=time i]:read-only,
|
|
1676
|
+
.utrecht-html input[type=url i]:read-only,
|
|
1677
|
+
.utrecht-html input[type=week i]:read-only {
|
|
1678
|
+
background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
1679
|
+
border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
1680
|
+
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
1681
|
+
}
|
|
1682
|
+
.utrecht-html input:not([type])::placeholder,
|
|
1683
|
+
.utrecht-html input[type=date i]::placeholder,
|
|
1684
|
+
.utrecht-html input[type=datetime-local i]::placeholder,
|
|
1685
|
+
.utrecht-html input[type=email i]::placeholder,
|
|
1686
|
+
.utrecht-html input[type=month i]::placeholder,
|
|
1687
|
+
.utrecht-html input[type=number i]::placeholder,
|
|
1688
|
+
.utrecht-html input[type=password i]::placeholder,
|
|
1689
|
+
.utrecht-html input[type=search i]::placeholder,
|
|
1690
|
+
.utrecht-html input[type=tel i]::placeholder,
|
|
1691
|
+
.utrecht-html input[type=text i]::placeholder,
|
|
1692
|
+
.utrecht-html input[type=time i]::placeholder,
|
|
1693
|
+
.utrecht-html input[type=url i]::placeholder,
|
|
1694
|
+
.utrecht-html input[type=week i]::placeholder {
|
|
1695
|
+
color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
1696
|
+
font-style: var(--utrecht-form-control-placeholder-font-style);
|
|
1697
|
+
opacity: 100%;
|
|
1698
|
+
}
|
|
1699
|
+
.utrecht-html input[autocomplete~=current-password i],
|
|
1700
|
+
.utrecht-html input[autocomplete~=new-password i],
|
|
1701
|
+
.utrecht-html input[type=password i] {
|
|
1702
|
+
font-variant-ligatures: none;
|
|
1703
|
+
font-variant-numeric: slashed-zero;
|
|
1704
|
+
}
|
|
1705
|
+
.utrecht-html input[autocomplete~=bday i],
|
|
1706
|
+
.utrecht-html input[autocomplete~=bday-day i],
|
|
1707
|
+
.utrecht-html input[autocomplete~=bday-month i],
|
|
1708
|
+
.utrecht-html input[autocomplete~=bday-year i],
|
|
1709
|
+
.utrecht-html input[autocomplete~=cc-csc i],
|
|
1710
|
+
.utrecht-html input[autocomplete~=cc-exp i],
|
|
1711
|
+
.utrecht-html input[autocomplete~=cc-exp-month i],
|
|
1712
|
+
.utrecht-html input[autocomplete~=cc-exp-year i],
|
|
1713
|
+
.utrecht-html input[autocomplete~=cc-number i],
|
|
1714
|
+
.utrecht-html input[autocomplete~=one-time-code i],
|
|
1715
|
+
.utrecht-html input[autocomplete~=postal-code i],
|
|
1716
|
+
.utrecht-html input[autocomplete~=tel i],
|
|
1717
|
+
.utrecht-html input[autocomplete~=tel-area-code i],
|
|
1718
|
+
.utrecht-html input[autocomplete~=tel-country-code i],
|
|
1719
|
+
.utrecht-html input[autocomplete~=tel-extension i],
|
|
1720
|
+
.utrecht-html input[autocomplete~=tel-local i],
|
|
1721
|
+
.utrecht-html input[autocomplete~=tel-national i],
|
|
1722
|
+
.utrecht-html input[autocomplete~=transaction-amount i],
|
|
1723
|
+
.utrecht-html input[inputmode=decimal i],
|
|
1724
|
+
.utrecht-html input[inputmode=numeric i],
|
|
1725
|
+
.utrecht-html input[inputmode=tel i],
|
|
1726
|
+
.utrecht-html input[type=number i],
|
|
1727
|
+
.utrecht-html input[type=tel i] {
|
|
1728
|
+
-moz-appearance: textfield; /* avoid spinner input in Firefox */
|
|
1729
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
1730
|
+
}
|
|
1731
|
+
.utrecht-html input[inputmode=email i],
|
|
1732
|
+
.utrecht-html input[inputmode=url i],
|
|
1733
|
+
.utrecht-html input[type=email i],
|
|
1734
|
+
.utrecht-html input[type=url i] {
|
|
1735
|
+
font-variant-ligatures: none;
|
|
1736
|
+
}
|
|
1737
|
+
.utrecht-html ul {
|
|
1488
1738
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
1489
|
-
font-size: var(--utrecht-document-font-size, inherit);
|
|
1490
|
-
line-height: var(--utrecht-document-line-height, inherit);
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
|
|
1497
|
-
}
|
|
1498
|
-
|
|
1499
|
-
.utrecht-unordered-list--nested {
|
|
1500
|
-
margin-block-end: 0;
|
|
1501
|
-
margin-inline-start: 2ch;
|
|
1739
|
+
font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
|
|
1740
|
+
line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
|
|
1741
|
+
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
|
|
1742
|
+
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
|
|
1743
|
+
padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
|
|
1744
|
+
text-align: start;
|
|
1745
|
+
--utrecht-space-around: 1;
|
|
1502
1746
|
}
|
|
1503
|
-
|
|
1504
|
-
.utrecht-unordered-list__item, .utrecht-html ul > li {
|
|
1747
|
+
.utrecht-html ul > li {
|
|
1505
1748
|
margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
|
|
1506
1749
|
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
1507
|
-
padding-inline-start: 1ch;
|
|
1750
|
+
padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
|
|
1508
1751
|
}
|
|
1509
|
-
|
|
1510
|
-
.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
|
|
1511
|
-
.utrecht-unordered-list__marker {
|
|
1752
|
+
.utrecht-html ul > li::marker {
|
|
1512
1753
|
color: var(--utrecht-unordered-list-marker-color);
|
|
1513
1754
|
content: "●";
|
|
1514
1755
|
}
|