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