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