@utrecht/component-library-css 1.0.0-alpha.18 → 1.0.0-alpha.182
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 +2274 -204
- package/dist/html.css +2193 -194
- package/dist/index.css +5162 -736
- package/dist/root-theme.css +450 -233
- 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,1495 @@
|
|
|
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-icon-left {
|
|
1080
|
+
background-image: var(--utrecht-link-icon-left-background-image, none);
|
|
1081
|
+
background-position: 0 0.25em;
|
|
1082
|
+
background-repeat: no-repeat;
|
|
1083
|
+
color: var(--utrecht-link-color, blue);
|
|
1084
|
+
font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
1085
|
+
padding-inline-start: var(--utrecht-space-block-md);
|
|
1086
|
+
text-decoration: none;
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
.utrecht-link:visited,
|
|
1090
|
+
.utrecht-link--visited,
|
|
1091
|
+
.utrecht-html a:visited {
|
|
1092
|
+
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
.utrecht-link:hover,
|
|
1096
|
+
.utrecht-link--hover,
|
|
1097
|
+
.utrecht-html a:hover {
|
|
1098
|
+
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
1099
|
+
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1100
|
+
text-decoration-skip: none;
|
|
1101
|
+
text-decoration-skip-ink: none;
|
|
1102
|
+
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
.utrecht-link:active,
|
|
1106
|
+
.utrecht-link--active,
|
|
1107
|
+
.utrecht-html a:active {
|
|
1108
|
+
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus {
|
|
1112
|
+
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
1113
|
+
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1114
|
+
text-decoration-skip: none;
|
|
1115
|
+
text-decoration-skip-ink: none;
|
|
1116
|
+
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
|
|
1120
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1121
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1122
|
+
outline-offset: 0;
|
|
1123
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1124
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
|
|
1128
|
+
/* undo focus ring */
|
|
1129
|
+
box-shadow: none;
|
|
1130
|
+
outline-style: none;
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1134
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1135
|
+
.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
|
|
1136
|
+
white-space: nowrap;
|
|
1137
|
+
}
|
|
1138
|
+
|
|
1139
|
+
.utrecht-html a:focus:not(:focus-visible) {
|
|
1140
|
+
/* undo focus ring */
|
|
1141
|
+
box-shadow: none;
|
|
1142
|
+
outline-style: none;
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
/**
|
|
1146
|
+
* @license EUPL-1.2
|
|
1147
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1148
|
+
*/
|
|
1149
|
+
/**
|
|
1150
|
+
* @license EUPL-1.2
|
|
1151
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1152
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1153
|
+
*/
|
|
1154
|
+
.utrecht-ordered-list, .utrecht-html ol {
|
|
1155
|
+
font-family: var(--utrecht-document-font-family, inherit);
|
|
1156
|
+
margin-block-end: 0;
|
|
1157
|
+
margin-block-start: 0;
|
|
1158
|
+
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
1159
|
+
}
|
|
1160
|
+
|
|
1161
|
+
.utrecht-ordered-list--distanced, .utrecht-html ol {
|
|
1162
|
+
margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
|
|
1163
|
+
margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
.utrecht-ordered-list--arabic, .utrecht-html ol:lang(ar) {
|
|
1167
|
+
list-style: arabic-indic;
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
.utrecht-ordered-list__item, .utrecht-html ol > li {
|
|
1171
|
+
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
|
|
1172
|
+
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
1173
|
+
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
/**
|
|
1177
|
+
* @license EUPL-1.2
|
|
1178
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1179
|
+
*/
|
|
1180
|
+
/**
|
|
1181
|
+
* @license EUPL-1.2
|
|
1182
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1183
|
+
*/
|
|
1184
|
+
.utrecht-paragraph, .utrecht-html p {
|
|
1185
|
+
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
1186
|
+
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
1187
|
+
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
1188
|
+
font-weight: var(--utrecht-paragraph-font-weight, inherit);
|
|
1189
|
+
line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
|
|
1190
|
+
margin-block-end: 0;
|
|
1191
|
+
margin-block-start: 0;
|
|
1192
|
+
}
|
|
1193
|
+
|
|
1194
|
+
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
1195
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
1196
|
+
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
1197
|
+
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
1198
|
+
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
1199
|
+
}
|
|
1200
|
+
|
|
1201
|
+
.utrecht-paragraph--distanced, .utrecht-html * ~ p {
|
|
1202
|
+
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
1203
|
+
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
1204
|
+
}
|
|
1205
|
+
|
|
1206
|
+
/* stylelint-disable selector-class-pattern */
|
|
1207
|
+
/**
|
|
1208
|
+
* @license EUPL-1.2
|
|
1209
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1210
|
+
*/
|
|
1211
|
+
/**
|
|
1212
|
+
* @license EUPL-1.2
|
|
1213
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1214
|
+
*/
|
|
1215
|
+
/**
|
|
1216
|
+
* @license EUPL-1.2
|
|
1217
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1218
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1219
|
+
*/
|
|
1220
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1221
|
+
.utrecht-radio-button, .utrecht-html input[type=radio i] {
|
|
1222
|
+
margin-block-end: 0;
|
|
1223
|
+
/* reset native margin for input[type="radio" i] */
|
|
1224
|
+
margin-block-start: 0;
|
|
1225
|
+
margin-inline-end: 0;
|
|
1226
|
+
margin-inline-start: 0;
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1229
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1230
|
+
.utrecht-radio-button--disabled, .utrecht-radio-button--html-input:disabled, .utrecht-html input[type=radio i]:disabled {
|
|
1231
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1232
|
+
}
|
|
1233
|
+
|
|
1234
|
+
.utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
|
|
1235
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1236
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1237
|
+
outline-offset: 0;
|
|
1238
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1239
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1240
|
+
}
|
|
1241
|
+
|
|
1242
|
+
.utrecht-radio-button--html-input:focus:not(:focus-visible), .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
1243
|
+
/* undo focus ring */
|
|
1244
|
+
box-shadow: none;
|
|
1245
|
+
outline-style: none;
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
/**
|
|
1249
|
+
* @license EUPL-1.2
|
|
1250
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1251
|
+
*/
|
|
1252
|
+
/**
|
|
1253
|
+
* @license EUPL-1.2
|
|
1254
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1255
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1256
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1257
|
+
*/
|
|
1258
|
+
.utrecht-separator, .utrecht-html hr {
|
|
1259
|
+
border-color: var(--utrecht-separator-color);
|
|
1260
|
+
border-style: solid;
|
|
1261
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
1262
|
+
}
|
|
1263
|
+
|
|
1264
|
+
.utrecht-separator--distanced, .utrecht-html hr {
|
|
1265
|
+
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
1266
|
+
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
1267
|
+
}
|
|
1268
|
+
|
|
1269
|
+
/**
|
|
1270
|
+
* @license EUPL-1.2
|
|
1271
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1272
|
+
*/
|
|
1273
|
+
/**
|
|
1274
|
+
* @license EUPL-1.2
|
|
1275
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1276
|
+
*/
|
|
1277
|
+
.utrecht-table, .utrecht-html table {
|
|
1278
|
+
border-collapse: collapse;
|
|
1279
|
+
border-color: var(--utrecht-table-border-color, 0);
|
|
1280
|
+
border-style: solid;
|
|
1281
|
+
border-width: var(--utrecht-table-border-width, 0);
|
|
1282
|
+
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
1283
|
+
font-size: var(--utrecht-table-font-size, inherit);
|
|
1284
|
+
width: 100%;
|
|
1285
|
+
}
|
|
1286
|
+
|
|
1287
|
+
.utrecht-table--distanced, .utrecht-html table {
|
|
1288
|
+
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
1289
|
+
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
.utrecht-table__caption, .utrecht-html caption {
|
|
1293
|
+
color: var(--utrecht-table-caption-color);
|
|
1294
|
+
font-family: var(--utrecht-table-caption-font-family);
|
|
1295
|
+
font-size: var(--utrecht-table-caption-font-size);
|
|
1296
|
+
font-weight: var(--utrecht-table-caption-font-weight);
|
|
1297
|
+
line-height: var(--utrecht-table-caption-line-height);
|
|
1298
|
+
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
1299
|
+
text-align: var(--utrecht-table-caption-text-align, center);
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
.utrecht-table__header, .utrecht-html thead {
|
|
1303
|
+
background-color: var(--utrecht-table-header-background-color);
|
|
1304
|
+
color: var(--utrecht-table-header-color);
|
|
1305
|
+
font-weight: var(--utrecht-table-header-font-weight);
|
|
1306
|
+
text-transform: var(--utrecht-table-header-text-transform);
|
|
1307
|
+
vertical-align: bottom;
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
1311
|
+
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
1312
|
+
border-block-end-style: solid;
|
|
1313
|
+
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
1314
|
+
}
|
|
1315
|
+
|
|
1316
|
+
.utrecht-table__body, .utrecht-html tbody {
|
|
1317
|
+
vertical-align: baseline;
|
|
1318
|
+
}
|
|
1319
|
+
|
|
1320
|
+
.utrecht-table__heading, .utrecht-html th {
|
|
1321
|
+
color: var(--utrecht-table-heading-color);
|
|
1322
|
+
font-size: var(--utrecht-table-heading-font-size);
|
|
1323
|
+
font-weight: var(--utrecht-table-heading-font-weight);
|
|
1324
|
+
text-transform: var(--utrecht-table-heading-text-transform);
|
|
1325
|
+
}
|
|
1326
|
+
|
|
1327
|
+
.utrecht-table__cell, .utrecht-html th,
|
|
1328
|
+
.utrecht-html td {
|
|
1329
|
+
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
1330
|
+
border-block-end-style: solid;
|
|
1331
|
+
border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
|
|
1332
|
+
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
1333
|
+
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
1334
|
+
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
1335
|
+
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
1336
|
+
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
1337
|
+
text-align: start;
|
|
1338
|
+
}
|
|
1339
|
+
|
|
1340
|
+
.utrecht-table__cell--first, .utrecht-html td:first-child,
|
|
1341
|
+
.utrecht-html th:first-child {
|
|
1342
|
+
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
.utrecht-table__cell--last, .utrecht-html td:last-child,
|
|
1346
|
+
.utrecht-html th:last-child {
|
|
1347
|
+
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
.utrecht-table__cell--numeric-column, .utrecht-html td.numeric, .utrecht-html thead > tr > th.numeric,
|
|
1351
|
+
.utrecht-html tfoot > tr > th.numeric,
|
|
1352
|
+
.utrecht-html th[scope=column].numeric {
|
|
1353
|
+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
1354
|
+
text-align: right;
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
.utrecht-table__cell--numeric-data, .utrecht-html td.numeric {
|
|
1358
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
.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 {
|
|
1362
|
+
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
1363
|
+
color: var(--utrecht-table-row-alternate-odd-color);
|
|
1364
|
+
}
|
|
1365
|
+
|
|
1366
|
+
.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 {
|
|
1367
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
1368
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
/* stylelint-disable selector-class-pattern */
|
|
1372
|
+
/**
|
|
1373
|
+
* @license EUPL-1.2
|
|
1374
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1375
|
+
*/
|
|
1376
|
+
/**
|
|
1377
|
+
* @license EUPL-1.2
|
|
1378
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1379
|
+
*/
|
|
1380
|
+
/**
|
|
1381
|
+
* @license EUPL-1.2
|
|
1382
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1383
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1384
|
+
*/
|
|
1385
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1386
|
+
.utrecht-textarea, .utrecht-html textarea {
|
|
1387
|
+
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
|
|
1388
|
+
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
|
|
1389
|
+
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
|
|
1390
|
+
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
|
|
1391
|
+
border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1392
|
+
border-style: solid;
|
|
1393
|
+
box-sizing: border-box;
|
|
1394
|
+
color: var(--utrecht-textarea-color, var(--utrecht-form-input-color));
|
|
1395
|
+
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
1396
|
+
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1397
|
+
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1398
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
1399
|
+
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1400
|
+
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1401
|
+
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1402
|
+
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1403
|
+
resize: vertical;
|
|
1404
|
+
width: 100%;
|
|
1405
|
+
}
|
|
1406
|
+
|
|
1407
|
+
.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] {
|
|
1408
|
+
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))));
|
|
1409
|
+
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))));
|
|
1410
|
+
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))));
|
|
1411
|
+
}
|
|
1412
|
+
|
|
1413
|
+
.utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
|
|
1414
|
+
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))));
|
|
1415
|
+
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))));
|
|
1416
|
+
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1417
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1420
|
+
.utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
1421
|
+
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))));
|
|
1422
|
+
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))));
|
|
1423
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1424
|
+
}
|
|
1425
|
+
|
|
1426
|
+
.utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
1427
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1428
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1429
|
+
outline-offset: 0;
|
|
1430
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1431
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1432
|
+
}
|
|
1433
|
+
|
|
1434
|
+
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
|
|
1435
|
+
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))));
|
|
1436
|
+
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1437
|
+
}
|
|
1438
|
+
|
|
1439
|
+
.utrecht-textarea__placeholder, .utrecht-textarea--html-textarea::placeholder, .utrecht-html textarea::placeholder {
|
|
1440
|
+
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1441
|
+
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
1442
|
+
opacity: 100%;
|
|
1443
|
+
}
|
|
1444
|
+
|
|
1445
|
+
.utrecht-textarea--html-textarea:focus:not(:focus-visible), .utrecht-html textarea:focus:not(:focus-visible) {
|
|
1446
|
+
/* undo focus ring */
|
|
1447
|
+
box-shadow: none;
|
|
1448
|
+
outline-style: none;
|
|
1449
|
+
}
|
|
1450
|
+
/**
|
|
1451
|
+
* @license EUPL-1.2
|
|
1452
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1453
|
+
*/
|
|
1454
|
+
/**
|
|
1455
|
+
* @license EUPL-1.2
|
|
1456
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1457
|
+
*/
|
|
1458
|
+
/**
|
|
1459
|
+
* @license EUPL-1.2
|
|
1460
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1461
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1462
|
+
*/
|
|
1463
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1464
|
+
.utrecht-textbox, .utrecht-html input:not([type]),
|
|
1465
|
+
.utrecht-html input[type=date i],
|
|
1466
|
+
.utrecht-html input[type=datetime-local i],
|
|
1467
|
+
.utrecht-html input[type=email i],
|
|
1468
|
+
.utrecht-html input[type=month i],
|
|
1469
|
+
.utrecht-html input[type=number i],
|
|
1470
|
+
.utrecht-html input[type=password i],
|
|
1471
|
+
.utrecht-html input[type=search i],
|
|
1472
|
+
.utrecht-html input[type=tel i],
|
|
1473
|
+
.utrecht-html input[type=text i],
|
|
1474
|
+
.utrecht-html input[type=time i],
|
|
1475
|
+
.utrecht-html input[type=url i],
|
|
1476
|
+
.utrecht-html input[type=week i] {
|
|
1477
|
+
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
|
|
1478
|
+
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
|
|
1479
|
+
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
|
|
1480
|
+
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
|
|
1481
|
+
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1482
|
+
border-style: solid;
|
|
1483
|
+
box-sizing: border-box;
|
|
1484
|
+
color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
|
|
1485
|
+
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
|
|
1486
|
+
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1487
|
+
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1488
|
+
padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1489
|
+
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1490
|
+
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1491
|
+
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1492
|
+
width: 100%;
|
|
1493
|
+
}
|
|
1494
|
+
|
|
1495
|
+
.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-html input:invalid:not([type]),
|
|
1496
|
+
.utrecht-html input[type=date i]:invalid,
|
|
1497
|
+
.utrecht-html input[type=datetime-local i]:invalid,
|
|
1498
|
+
.utrecht-html input[type=email i]:invalid,
|
|
1499
|
+
.utrecht-html input[type=month i]:invalid,
|
|
1500
|
+
.utrecht-html input[type=number i]:invalid,
|
|
1501
|
+
.utrecht-html input[type=password i]:invalid,
|
|
1502
|
+
.utrecht-html input[type=search i]:invalid,
|
|
1503
|
+
.utrecht-html input[type=tel i]:invalid,
|
|
1504
|
+
.utrecht-html input[type=text i]:invalid,
|
|
1505
|
+
.utrecht-html input[type=time i]:invalid,
|
|
1506
|
+
.utrecht-html input[type=url i]:invalid,
|
|
1507
|
+
.utrecht-html input[type=week i]:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input[aria-invalid=true]:not([type]),
|
|
1508
|
+
.utrecht-html input[aria-invalid=true][type=date i],
|
|
1509
|
+
.utrecht-html input[aria-invalid=true][type=datetime-local i],
|
|
1510
|
+
.utrecht-html input[aria-invalid=true][type=email i],
|
|
1511
|
+
.utrecht-html input[aria-invalid=true][type=month i],
|
|
1512
|
+
.utrecht-html input[aria-invalid=true][type=number i],
|
|
1513
|
+
.utrecht-html input[aria-invalid=true][type=password i],
|
|
1514
|
+
.utrecht-html input[aria-invalid=true][type=search i],
|
|
1515
|
+
.utrecht-html input[aria-invalid=true][type=tel i],
|
|
1516
|
+
.utrecht-html input[aria-invalid=true][type=text i],
|
|
1517
|
+
.utrecht-html input[aria-invalid=true][type=time i],
|
|
1518
|
+
.utrecht-html input[aria-invalid=true][type=url i],
|
|
1519
|
+
.utrecht-html input[aria-invalid=true][type=week i] {
|
|
1520
|
+
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))));
|
|
1521
|
+
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))));
|
|
1522
|
+
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))));
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input:disabled:not([type]),
|
|
1526
|
+
.utrecht-html input[type=date i]:disabled,
|
|
1527
|
+
.utrecht-html input[type=datetime-local i]:disabled,
|
|
1528
|
+
.utrecht-html input[type=email i]:disabled,
|
|
1529
|
+
.utrecht-html input[type=month i]:disabled,
|
|
1530
|
+
.utrecht-html input[type=number i]:disabled,
|
|
1531
|
+
.utrecht-html input[type=password i]:disabled,
|
|
1532
|
+
.utrecht-html input[type=search i]:disabled,
|
|
1533
|
+
.utrecht-html input[type=tel i]:disabled,
|
|
1534
|
+
.utrecht-html input[type=text i]:disabled,
|
|
1535
|
+
.utrecht-html input[type=time i]:disabled,
|
|
1536
|
+
.utrecht-html input[type=url i]:disabled,
|
|
1537
|
+
.utrecht-html input[type=week i]:disabled {
|
|
1538
|
+
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))));
|
|
1539
|
+
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))));
|
|
1540
|
+
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1541
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1542
|
+
}
|
|
1543
|
+
|
|
1544
|
+
.utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
1545
|
+
.utrecht-html input[type=date i]:focus,
|
|
1546
|
+
.utrecht-html input[type=datetime-local i]:focus,
|
|
1547
|
+
.utrecht-html input[type=email i]:focus,
|
|
1548
|
+
.utrecht-html input[type=month i]:focus,
|
|
1549
|
+
.utrecht-html input[type=number i]:focus,
|
|
1550
|
+
.utrecht-html input[type=password i]:focus,
|
|
1551
|
+
.utrecht-html input[type=search i]:focus,
|
|
1552
|
+
.utrecht-html input[type=tel i]:focus,
|
|
1553
|
+
.utrecht-html input[type=text i]:focus,
|
|
1554
|
+
.utrecht-html input[type=time i]:focus,
|
|
1555
|
+
.utrecht-html input[type=url i]:focus,
|
|
1556
|
+
.utrecht-html input[type=week i]:focus {
|
|
1557
|
+
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))));
|
|
1558
|
+
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))));
|
|
1559
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1560
|
+
}
|
|
1561
|
+
|
|
1562
|
+
.utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
1563
|
+
.utrecht-html input[type=date i]:focus,
|
|
1564
|
+
.utrecht-html input[type=datetime-local i]:focus,
|
|
1565
|
+
.utrecht-html input[type=email i]:focus,
|
|
1566
|
+
.utrecht-html input[type=month i]:focus,
|
|
1567
|
+
.utrecht-html input[type=number i]:focus,
|
|
1568
|
+
.utrecht-html input[type=password i]:focus,
|
|
1569
|
+
.utrecht-html input[type=search i]:focus,
|
|
1570
|
+
.utrecht-html input[type=tel i]:focus,
|
|
1571
|
+
.utrecht-html input[type=text i]:focus,
|
|
1572
|
+
.utrecht-html input[type=time i]:focus,
|
|
1573
|
+
.utrecht-html input[type=url i]:focus,
|
|
1574
|
+
.utrecht-html input[type=week i]:focus {
|
|
1575
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1576
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1577
|
+
outline-offset: 0;
|
|
1578
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1579
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
|
|
1583
|
+
.utrecht-html input[type=date i]:read-only,
|
|
1584
|
+
.utrecht-html input[type=datetime-local i]:read-only,
|
|
1585
|
+
.utrecht-html input[type=email i]:read-only,
|
|
1586
|
+
.utrecht-html input[type=month i]:read-only,
|
|
1587
|
+
.utrecht-html input[type=number i]:read-only,
|
|
1588
|
+
.utrecht-html input[type=password i]:read-only,
|
|
1589
|
+
.utrecht-html input[type=search i]:read-only,
|
|
1590
|
+
.utrecht-html input[type=tel i]:read-only,
|
|
1591
|
+
.utrecht-html input[type=text i]:read-only,
|
|
1592
|
+
.utrecht-html input[type=time i]:read-only,
|
|
1593
|
+
.utrecht-html input[type=url i]:read-only,
|
|
1594
|
+
.utrecht-html input[type=week i]:read-only {
|
|
1595
|
+
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))));
|
|
1596
|
+
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
.utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder, .utrecht-html input:not([type])::placeholder,
|
|
1600
|
+
.utrecht-html input[type=date i]::placeholder,
|
|
1601
|
+
.utrecht-html input[type=datetime-local i]::placeholder,
|
|
1602
|
+
.utrecht-html input[type=email i]::placeholder,
|
|
1603
|
+
.utrecht-html input[type=month i]::placeholder,
|
|
1604
|
+
.utrecht-html input[type=number i]::placeholder,
|
|
1605
|
+
.utrecht-html input[type=password i]::placeholder,
|
|
1606
|
+
.utrecht-html input[type=search i]::placeholder,
|
|
1607
|
+
.utrecht-html input[type=tel i]::placeholder,
|
|
1608
|
+
.utrecht-html input[type=text i]::placeholder,
|
|
1609
|
+
.utrecht-html input[type=time i]::placeholder,
|
|
1610
|
+
.utrecht-html input[type=url i]::placeholder,
|
|
1611
|
+
.utrecht-html input[type=week i]::placeholder {
|
|
1612
|
+
color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
1613
|
+
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
1614
|
+
opacity: 100%;
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
.utrecht-textbox--numeric, .utrecht-html input[autocomplete~=bday i],
|
|
1618
|
+
.utrecht-html input[autocomplete~=bday-day i],
|
|
1619
|
+
.utrecht-html input[autocomplete~=bday-month i],
|
|
1620
|
+
.utrecht-html input[autocomplete~=bday-year i],
|
|
1621
|
+
.utrecht-html input[autocomplete~=cc-csc i],
|
|
1622
|
+
.utrecht-html input[autocomplete~=cc-exp i],
|
|
1623
|
+
.utrecht-html input[autocomplete~=cc-exp-month i],
|
|
1624
|
+
.utrecht-html input[autocomplete~=cc-exp-year i],
|
|
1625
|
+
.utrecht-html input[autocomplete~=cc-number i],
|
|
1626
|
+
.utrecht-html input[autocomplete~=one-time-code i],
|
|
1627
|
+
.utrecht-html input[autocomplete~=postal-code i],
|
|
1628
|
+
.utrecht-html input[autocomplete~=tel i],
|
|
1629
|
+
.utrecht-html input[autocomplete~=tel-area-code i],
|
|
1630
|
+
.utrecht-html input[autocomplete~=tel-country-code i],
|
|
1631
|
+
.utrecht-html input[autocomplete~=tel-extension i],
|
|
1632
|
+
.utrecht-html input[autocomplete~=tel-local i],
|
|
1633
|
+
.utrecht-html input[autocomplete~=tel-national i],
|
|
1634
|
+
.utrecht-html input[autocomplete~=transaction-amount i],
|
|
1635
|
+
.utrecht-html input[inputmode=decimal i],
|
|
1636
|
+
.utrecht-html input[inputmode=numeric i],
|
|
1637
|
+
.utrecht-html input[type=number i] {
|
|
1638
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
1639
|
+
}
|
|
1640
|
+
|
|
1641
|
+
.utrecht-textbox--password, .utrecht-html input[autocomplete~=current-password i],
|
|
1642
|
+
.utrecht-html input[autocomplete~=new-password i] {
|
|
1643
|
+
font-variant-ligatures: none;
|
|
1644
|
+
font-variant-numeric: slashed-zero;
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1647
|
+
.utrecht-textbox--url, .utrecht-html input[type=url i] {
|
|
1648
|
+
font-variant-ligatures: none;
|
|
1649
|
+
}
|
|
1650
|
+
|
|
1651
|
+
.utrecht-textbox--html-input:focus:not(:focus-visible), .utrecht-html input:focus:not(:focus-visible):not([type]),
|
|
1652
|
+
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
1653
|
+
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
1654
|
+
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
1655
|
+
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
1656
|
+
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
1657
|
+
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
1658
|
+
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
1659
|
+
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
1660
|
+
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
1661
|
+
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
1662
|
+
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
1663
|
+
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
1664
|
+
/* undo focus ring */
|
|
1665
|
+
box-shadow: none;
|
|
1666
|
+
outline-style: none;
|
|
1667
|
+
}
|
|
1668
|
+
/**
|
|
1669
|
+
* @license EUPL-1.2
|
|
1670
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1671
|
+
*/
|
|
1672
|
+
/**
|
|
1673
|
+
* @license EUPL-1.2
|
|
1674
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1675
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1676
|
+
*/
|
|
1677
|
+
.utrecht-unordered-list, .utrecht-html ul {
|
|
1678
|
+
font-family: var(--utrecht-document-font-family, inherit);
|
|
1679
|
+
font-size: var(--utrecht-document-font-size, inherit);
|
|
1680
|
+
line-height: var(--utrecht-document-line-height, inherit);
|
|
1681
|
+
margin-block-end: 0;
|
|
1682
|
+
margin-block-start: 0;
|
|
1683
|
+
padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
|
|
1684
|
+
}
|
|
1685
|
+
|
|
1686
|
+
.utrecht-unordered-list--distanced, .utrecht-html ul {
|
|
1687
|
+
margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
|
|
1688
|
+
margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
|
|
1689
|
+
}
|
|
1690
|
+
|
|
1691
|
+
.utrecht-unordered-list--nested {
|
|
1692
|
+
margin-block-end: 0;
|
|
1693
|
+
margin-inline-start: 2ch;
|
|
1694
|
+
}
|
|
1695
|
+
|
|
1696
|
+
.utrecht-unordered-list__item, .utrecht-html ul > li {
|
|
1697
|
+
margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
|
|
1698
|
+
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
1699
|
+
padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
|
|
1700
|
+
}
|
|
1701
|
+
|
|
1702
|
+
.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
|
|
1703
|
+
.utrecht-unordered-list__marker {
|
|
1704
|
+
color: var(--utrecht-unordered-list-marker-color);
|
|
1705
|
+
content: "●";
|
|
1706
|
+
}
|
|
1707
|
+
|
|
1708
|
+
/**
|
|
1709
|
+
* @license EUPL-1.2
|
|
1710
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1711
|
+
*/
|
|
1712
|
+
/**
|
|
1713
|
+
* @license EUPL-1.2
|
|
1714
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1715
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1716
|
+
*/
|
|
1717
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
1718
|
+
/**
|
|
1719
|
+
* @license EUPL-1.2
|
|
1720
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1721
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1722
|
+
*/
|
|
1723
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1724
|
+
/*
|
|
1725
|
+
|
|
1726
|
+
# CSS implementation
|
|
1727
|
+
|
|
1728
|
+
## `text-decoration-skip`
|
|
1729
|
+
|
|
1730
|
+
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
1731
|
+
For example by obscuring Arabic diacritics.
|
|
1732
|
+
|
|
1733
|
+
However, the combination of a greater thickness and skipping this thick underline
|
|
1734
|
+
leads to a very unappealing rendering of the underline. To avoid this,
|
|
1735
|
+
`text-decoration-skip` is disabled for interactive states.
|
|
1736
|
+
|
|
1737
|
+
For design token configurations that have identical thickness for normal and interactive
|
|
1738
|
+
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
1739
|
+
from an interrupted to an uninterrupted underline (for some texts).
|
|
1740
|
+
|
|
1741
|
+
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
1742
|
+
|
|
1743
|
+
---
|
|
1744
|
+
|
|
1745
|
+
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
1746
|
+
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
1747
|
+
not make this too inconvenient.
|
|
1748
|
+
|
|
1749
|
+
---
|
|
1750
|
+
|
|
1751
|
+
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
1752
|
+
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
1753
|
+
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
1754
|
+
|
|
1755
|
+
## `text-decoration-thickness`
|
|
1756
|
+
|
|
1757
|
+
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
1758
|
+
|
|
1759
|
+
---
|
|
1760
|
+
|
|
1761
|
+
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
1762
|
+
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
1763
|
+
the underline offset also seems to increase along with the thickness, which effectively means
|
|
1764
|
+
the underline is closer to the next line than in Safari.
|
|
1765
|
+
|
|
1766
|
+
---
|
|
1767
|
+
|
|
1768
|
+
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
1769
|
+
use the `max()` function to ensure the underline remains visible for every font size.
|
|
1770
|
+
|
|
1771
|
+
## `transition`
|
|
1772
|
+
|
|
1773
|
+
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
1774
|
+
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
1775
|
+
|
|
1776
|
+
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
1777
|
+
|
|
1778
|
+
*/
|
|
1779
|
+
.utrecht-link, .utrecht-html a:link {
|
|
1780
|
+
color: var(--utrecht-link-color, blue);
|
|
1781
|
+
text-decoration: var(--utrecht-link-text-decoration, underline);
|
|
1782
|
+
text-decoration-skip-ink: all;
|
|
1783
|
+
text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
|
|
1784
|
+
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
1785
|
+
}
|
|
1786
|
+
|
|
1787
|
+
.utrecht-link-icon-left {
|
|
1788
|
+
background-image: var(--utrecht-link-icon-left-background-image, none);
|
|
1789
|
+
background-position: 0 0.25em;
|
|
1790
|
+
background-repeat: no-repeat;
|
|
1791
|
+
color: var(--utrecht-link-color, blue);
|
|
1792
|
+
font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
1793
|
+
padding-inline-start: var(--utrecht-space-block-md);
|
|
1794
|
+
text-decoration: none;
|
|
1795
|
+
}
|
|
1796
|
+
|
|
1797
|
+
.utrecht-link:visited,
|
|
1798
|
+
.utrecht-link--visited,
|
|
1799
|
+
.utrecht-html a:visited {
|
|
1800
|
+
color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
|
|
1801
|
+
}
|
|
1802
|
+
|
|
1803
|
+
.utrecht-link:hover,
|
|
1804
|
+
.utrecht-link--hover,
|
|
1805
|
+
.utrecht-html a:hover {
|
|
1806
|
+
color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
|
|
1807
|
+
text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1808
|
+
text-decoration-skip: none;
|
|
1809
|
+
text-decoration-skip-ink: none;
|
|
1810
|
+
text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1811
|
+
}
|
|
1812
|
+
|
|
1813
|
+
.utrecht-link:active,
|
|
1814
|
+
.utrecht-link--active,
|
|
1815
|
+
.utrecht-html a:active {
|
|
1816
|
+
color: var(--utrecht-link-active-color, var(--utrecht-link-color));
|
|
1817
|
+
}
|
|
1818
|
+
|
|
1819
|
+
.utrecht-link--focus, .utrecht-link:focus, .utrecht-html a:focus {
|
|
1820
|
+
color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
|
|
1821
|
+
text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
1822
|
+
text-decoration-skip: none;
|
|
1823
|
+
text-decoration-skip-ink: none;
|
|
1824
|
+
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
1825
|
+
}
|
|
1826
|
+
|
|
1827
|
+
.utrecht-link--focus-visible, .utrecht-link:focus, .utrecht-html a:focus {
|
|
1828
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1829
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1830
|
+
outline-offset: 0;
|
|
1831
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1832
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1833
|
+
}
|
|
1834
|
+
|
|
1835
|
+
.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
|
|
1836
|
+
/* undo focus ring */
|
|
1837
|
+
box-shadow: none;
|
|
1838
|
+
outline-style: none;
|
|
1839
|
+
}
|
|
1840
|
+
|
|
1841
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1842
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1843
|
+
.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
|
|
1844
|
+
white-space: nowrap;
|
|
1845
|
+
}
|
|
1846
|
+
|
|
1847
|
+
.utrecht-html a:focus:not(:focus-visible) {
|
|
1848
|
+
/* undo focus ring */
|
|
1849
|
+
box-shadow: none;
|
|
1850
|
+
outline-style: none;
|
|
1851
|
+
}
|
|
308
1852
|
|
|
309
1853
|
/**
|
|
310
1854
|
* @license EUPL-1.2
|
|
@@ -313,58 +1857,28 @@
|
|
|
313
1857
|
/**
|
|
314
1858
|
* @license EUPL-1.2
|
|
315
1859
|
* Copyright (c) 2021 Robbert Broersma
|
|
1860
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
316
1861
|
*/
|
|
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%;
|
|
1862
|
+
.utrecht-ordered-list, .utrecht-html ol {
|
|
1863
|
+
font-family: var(--utrecht-document-font-family, inherit);
|
|
1864
|
+
margin-block-end: 0;
|
|
1865
|
+
margin-block-start: 0;
|
|
1866
|
+
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
337
1867
|
}
|
|
338
1868
|
|
|
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);
|
|
1869
|
+
.utrecht-ordered-list--distanced, .utrecht-html ol {
|
|
1870
|
+
margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
|
|
1871
|
+
margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
|
|
350
1872
|
}
|
|
351
1873
|
|
|
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);
|
|
1874
|
+
.utrecht-ordered-list--arabic, .utrecht-html ol:lang(ar) {
|
|
1875
|
+
list-style: arabic-indic;
|
|
359
1876
|
}
|
|
360
1877
|
|
|
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);
|
|
1878
|
+
.utrecht-ordered-list__item, .utrecht-html ol > li {
|
|
1879
|
+
margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
|
|
1880
|
+
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
1881
|
+
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
368
1882
|
}
|
|
369
1883
|
|
|
370
1884
|
/**
|
|
@@ -373,14 +1887,70 @@
|
|
|
373
1887
|
*/
|
|
374
1888
|
/**
|
|
375
1889
|
* @license EUPL-1.2
|
|
376
|
-
* Copyright (c) 2021
|
|
1890
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
377
1891
|
*/
|
|
378
|
-
.utrecht-
|
|
379
|
-
|
|
1892
|
+
.utrecht-paragraph, .utrecht-html p {
|
|
1893
|
+
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
1894
|
+
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
1895
|
+
font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
|
|
1896
|
+
font-weight: var(--utrecht-paragraph-font-weight, inherit);
|
|
1897
|
+
line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
|
|
1898
|
+
margin-block-end: 0;
|
|
380
1899
|
margin-block-start: 0;
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
1903
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
1904
|
+
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
1905
|
+
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
1906
|
+
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
1907
|
+
}
|
|
1908
|
+
|
|
1909
|
+
.utrecht-paragraph--distanced, .utrecht-html * ~ p {
|
|
1910
|
+
margin-block-end: var(--utrecht-paragraph-margin-block-end);
|
|
1911
|
+
margin-block-start: var(--utrecht-paragraph-margin-block-start);
|
|
1912
|
+
}
|
|
1913
|
+
|
|
1914
|
+
/* stylelint-disable selector-class-pattern */
|
|
1915
|
+
/**
|
|
1916
|
+
* @license EUPL-1.2
|
|
1917
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1918
|
+
*/
|
|
1919
|
+
/**
|
|
1920
|
+
* @license EUPL-1.2
|
|
1921
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1922
|
+
*/
|
|
1923
|
+
/**
|
|
1924
|
+
* @license EUPL-1.2
|
|
1925
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
1926
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1927
|
+
*/
|
|
1928
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1929
|
+
.utrecht-radio-button, .utrecht-html input[type=radio i] {
|
|
381
1930
|
margin-block-end: 0;
|
|
382
|
-
margin
|
|
1931
|
+
/* reset native margin for input[type="radio" i] */
|
|
1932
|
+
margin-block-start: 0;
|
|
383
1933
|
margin-inline-end: 0;
|
|
1934
|
+
margin-inline-start: 0;
|
|
1935
|
+
}
|
|
1936
|
+
|
|
1937
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1938
|
+
.utrecht-radio-button--disabled, .utrecht-radio-button--html-input:disabled, .utrecht-html input[type=radio i]:disabled {
|
|
1939
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1940
|
+
}
|
|
1941
|
+
|
|
1942
|
+
.utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus, .utrecht-html input[type=radio i]:focus {
|
|
1943
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1944
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1945
|
+
outline-offset: 0;
|
|
1946
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1947
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1948
|
+
}
|
|
1949
|
+
|
|
1950
|
+
.utrecht-radio-button--html-input:focus:not(:focus-visible), .utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
1951
|
+
/* undo focus ring */
|
|
1952
|
+
box-shadow: none;
|
|
1953
|
+
outline-style: none;
|
|
384
1954
|
}
|
|
385
1955
|
|
|
386
1956
|
/**
|
|
@@ -389,52 +1959,77 @@
|
|
|
389
1959
|
*/
|
|
390
1960
|
/**
|
|
391
1961
|
* @license EUPL-1.2
|
|
392
|
-
* Copyright (c) 2021
|
|
1962
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1963
|
+
*/
|
|
1964
|
+
/**
|
|
1965
|
+
* @license EUPL-1.2
|
|
393
1966
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
1967
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
394
1968
|
*/
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
1969
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1970
|
+
.utrecht-select, .utrecht-html select {
|
|
1971
|
+
-moz-appearance: none;
|
|
1972
|
+
-webkit-appearance: none;
|
|
1973
|
+
appearance: none;
|
|
1974
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
|
|
1975
|
+
background-image: var(--utrecht-select-background-image);
|
|
1976
|
+
background-position: 100%;
|
|
1977
|
+
background-repeat: no-repeat;
|
|
1978
|
+
background-size: 1.4em;
|
|
1979
|
+
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
|
|
1980
|
+
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1981
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
|
|
1982
|
+
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1983
|
+
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1984
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1985
|
+
border-style: solid;
|
|
1986
|
+
color: var(--utrecht-select-color, var(--utrecht-form-input-color));
|
|
1987
|
+
font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
|
|
1988
|
+
font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
|
|
1989
|
+
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1990
|
+
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1991
|
+
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1992
|
+
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1993
|
+
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1994
|
+
width: 100%;
|
|
404
1995
|
}
|
|
405
1996
|
|
|
406
|
-
.utrecht-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
color: var(--utrecht-
|
|
410
|
-
|
|
1997
|
+
.utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
|
|
1998
|
+
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))));
|
|
1999
|
+
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))));
|
|
2000
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
2001
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
411
2002
|
}
|
|
412
2003
|
|
|
413
|
-
.utrecht-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
color: var(--utrecht-
|
|
2004
|
+
.utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
|
|
2005
|
+
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))));
|
|
2006
|
+
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))));
|
|
2007
|
+
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
417
2008
|
}
|
|
418
2009
|
|
|
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);
|
|
2010
|
+
.utrecht-select--focus-visible, .utrecht-select--html-select:focus, .utrecht-html select:focus {
|
|
428
2011
|
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2012
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
429
2013
|
outline-offset: 0;
|
|
430
|
-
|
|
2014
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2015
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
431
2016
|
}
|
|
432
2017
|
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
2018
|
+
.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] {
|
|
2019
|
+
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))));
|
|
2020
|
+
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))));
|
|
2021
|
+
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
2022
|
}
|
|
437
2023
|
|
|
2024
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
2025
|
+
.utrecht-select--html-select, .utrecht-html select {
|
|
2026
|
+
/* <select> does not support :read-only */
|
|
2027
|
+
}
|
|
2028
|
+
.utrecht-select--html-select:focus:not(:focus-visible), .utrecht-html select:focus:not(:focus-visible) {
|
|
2029
|
+
/* undo focus ring */
|
|
2030
|
+
box-shadow: none;
|
|
2031
|
+
outline-style: none;
|
|
2032
|
+
}
|
|
438
2033
|
/**
|
|
439
2034
|
* @license EUPL-1.2
|
|
440
2035
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -446,13 +2041,415 @@
|
|
|
446
2041
|
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
447
2042
|
*/
|
|
448
2043
|
.utrecht-separator, .utrecht-html hr {
|
|
449
|
-
border-style: solid;
|
|
450
2044
|
border-color: var(--utrecht-separator-color);
|
|
451
|
-
border-
|
|
452
|
-
|
|
2045
|
+
border-style: solid;
|
|
2046
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
2047
|
+
}
|
|
2048
|
+
|
|
2049
|
+
.utrecht-separator--distanced, .utrecht-html hr {
|
|
453
2050
|
margin-block-end: var(--utrecht-separator-margin-block-end);
|
|
2051
|
+
margin-block-start: var(--utrecht-separator-margin-block-start);
|
|
2052
|
+
}
|
|
2053
|
+
|
|
2054
|
+
/**
|
|
2055
|
+
* @license EUPL-1.2
|
|
2056
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
2057
|
+
*/
|
|
2058
|
+
/**
|
|
2059
|
+
* @license EUPL-1.2
|
|
2060
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
2061
|
+
*/
|
|
2062
|
+
.utrecht-table, .utrecht-html table {
|
|
2063
|
+
border-collapse: collapse;
|
|
2064
|
+
border-color: var(--utrecht-table-border-color, 0);
|
|
2065
|
+
border-style: solid;
|
|
2066
|
+
border-width: var(--utrecht-table-border-width, 0);
|
|
2067
|
+
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
2068
|
+
font-size: var(--utrecht-table-font-size, inherit);
|
|
2069
|
+
width: 100%;
|
|
2070
|
+
}
|
|
2071
|
+
|
|
2072
|
+
.utrecht-table--distanced, .utrecht-html table {
|
|
2073
|
+
margin-block-end: var(--utrecht-table-margin-block-end);
|
|
2074
|
+
margin-block-start: var(--utrecht-table-margin-block-start);
|
|
2075
|
+
}
|
|
2076
|
+
|
|
2077
|
+
.utrecht-table__caption, .utrecht-html caption {
|
|
2078
|
+
color: var(--utrecht-table-caption-color);
|
|
2079
|
+
font-family: var(--utrecht-table-caption-font-family);
|
|
2080
|
+
font-size: var(--utrecht-table-caption-font-size);
|
|
2081
|
+
font-weight: var(--utrecht-table-caption-font-weight);
|
|
2082
|
+
line-height: var(--utrecht-table-caption-line-height);
|
|
2083
|
+
margin-block-end: var(--utrecht-table-caption-margin-block-end);
|
|
2084
|
+
text-align: var(--utrecht-table-caption-text-align, center);
|
|
2085
|
+
}
|
|
2086
|
+
|
|
2087
|
+
.utrecht-table__header, .utrecht-html thead {
|
|
2088
|
+
background-color: var(--utrecht-table-header-background-color);
|
|
2089
|
+
color: var(--utrecht-table-header-color);
|
|
2090
|
+
font-weight: var(--utrecht-table-header-font-weight);
|
|
2091
|
+
text-transform: var(--utrecht-table-header-text-transform);
|
|
2092
|
+
vertical-align: bottom;
|
|
2093
|
+
}
|
|
2094
|
+
|
|
2095
|
+
.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
|
|
2096
|
+
border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
|
|
2097
|
+
border-block-end-style: solid;
|
|
2098
|
+
border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
|
|
2099
|
+
}
|
|
2100
|
+
|
|
2101
|
+
.utrecht-table__body, .utrecht-html tbody {
|
|
2102
|
+
vertical-align: baseline;
|
|
2103
|
+
}
|
|
2104
|
+
|
|
2105
|
+
.utrecht-table__heading, .utrecht-html th {
|
|
2106
|
+
color: var(--utrecht-table-heading-color);
|
|
2107
|
+
font-size: var(--utrecht-table-heading-font-size);
|
|
2108
|
+
font-weight: var(--utrecht-table-heading-font-weight);
|
|
2109
|
+
text-transform: var(--utrecht-table-heading-text-transform);
|
|
2110
|
+
}
|
|
2111
|
+
|
|
2112
|
+
.utrecht-table__cell, .utrecht-html th,
|
|
2113
|
+
.utrecht-html td {
|
|
2114
|
+
border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
|
|
2115
|
+
border-block-end-style: solid;
|
|
2116
|
+
border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
|
|
2117
|
+
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
2118
|
+
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
2119
|
+
padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
|
|
2120
|
+
padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
|
|
2121
|
+
padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
|
|
2122
|
+
text-align: start;
|
|
2123
|
+
}
|
|
2124
|
+
|
|
2125
|
+
.utrecht-table__cell--first, .utrecht-html td:first-child,
|
|
2126
|
+
.utrecht-html th:first-child {
|
|
2127
|
+
padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
|
|
2128
|
+
}
|
|
2129
|
+
|
|
2130
|
+
.utrecht-table__cell--last, .utrecht-html td:last-child,
|
|
2131
|
+
.utrecht-html th:last-child {
|
|
2132
|
+
padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
|
|
2133
|
+
}
|
|
2134
|
+
|
|
2135
|
+
.utrecht-table__cell--numeric-column, .utrecht-html thead > tr > th.numeric,
|
|
2136
|
+
.utrecht-html tfoot > tr > th.numeric,
|
|
2137
|
+
.utrecht-html th[scope=column].numeric, .utrecht-html td.numeric {
|
|
2138
|
+
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
2139
|
+
text-align: right;
|
|
2140
|
+
}
|
|
2141
|
+
|
|
2142
|
+
.utrecht-table__cell--numeric-data, .utrecht-html td.numeric {
|
|
2143
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
2144
|
+
}
|
|
2145
|
+
|
|
2146
|
+
.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 {
|
|
2147
|
+
background-color: var(--utrecht-table-row-alternate-odd-background-color);
|
|
2148
|
+
color: var(--utrecht-table-row-alternate-odd-color);
|
|
2149
|
+
}
|
|
2150
|
+
|
|
2151
|
+
.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 {
|
|
2152
|
+
background-color: var(--utrecht-table-row-alternate-even-background-color);
|
|
2153
|
+
color: var(--utrecht-table-row-alternate-even-color);
|
|
2154
|
+
}
|
|
2155
|
+
|
|
2156
|
+
/* stylelint-disable selector-class-pattern */
|
|
2157
|
+
/**
|
|
2158
|
+
* @license EUPL-1.2
|
|
2159
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
2160
|
+
*/
|
|
2161
|
+
/**
|
|
2162
|
+
* @license EUPL-1.2
|
|
2163
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
2164
|
+
*/
|
|
2165
|
+
/**
|
|
2166
|
+
* @license EUPL-1.2
|
|
2167
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
2168
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
2169
|
+
*/
|
|
2170
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
2171
|
+
.utrecht-textarea, .utrecht-html textarea {
|
|
2172
|
+
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
|
|
2173
|
+
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
|
|
2174
|
+
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
|
|
2175
|
+
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
|
|
2176
|
+
border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
2177
|
+
border-style: solid;
|
|
2178
|
+
box-sizing: border-box;
|
|
2179
|
+
color: var(--utrecht-textarea-color, var(--utrecht-form-input-color));
|
|
2180
|
+
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
2181
|
+
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
2182
|
+
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
2183
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
2184
|
+
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
2185
|
+
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
2186
|
+
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
2187
|
+
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
2188
|
+
resize: vertical;
|
|
2189
|
+
width: 100%;
|
|
2190
|
+
}
|
|
2191
|
+
|
|
2192
|
+
.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] {
|
|
2193
|
+
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))));
|
|
2194
|
+
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))));
|
|
2195
|
+
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))));
|
|
2196
|
+
}
|
|
2197
|
+
|
|
2198
|
+
.utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
|
|
2199
|
+
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))));
|
|
2200
|
+
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))));
|
|
2201
|
+
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2202
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
2203
|
+
}
|
|
2204
|
+
|
|
2205
|
+
.utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
2206
|
+
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))));
|
|
2207
|
+
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))));
|
|
2208
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2209
|
+
}
|
|
2210
|
+
|
|
2211
|
+
.utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
|
|
2212
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2213
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2214
|
+
outline-offset: 0;
|
|
2215
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2216
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2217
|
+
}
|
|
2218
|
+
|
|
2219
|
+
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
|
|
2220
|
+
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))));
|
|
2221
|
+
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2222
|
+
}
|
|
2223
|
+
|
|
2224
|
+
.utrecht-textarea__placeholder, .utrecht-textarea--html-textarea::placeholder, .utrecht-html textarea::placeholder {
|
|
2225
|
+
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2226
|
+
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
2227
|
+
opacity: 100%;
|
|
2228
|
+
}
|
|
2229
|
+
|
|
2230
|
+
.utrecht-textarea--html-textarea:focus:not(:focus-visible), .utrecht-html textarea:focus:not(:focus-visible) {
|
|
2231
|
+
/* undo focus ring */
|
|
2232
|
+
box-shadow: none;
|
|
2233
|
+
outline-style: none;
|
|
2234
|
+
}
|
|
2235
|
+
/**
|
|
2236
|
+
* @license EUPL-1.2
|
|
2237
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
2238
|
+
*/
|
|
2239
|
+
/**
|
|
2240
|
+
* @license EUPL-1.2
|
|
2241
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
2242
|
+
*/
|
|
2243
|
+
/**
|
|
2244
|
+
* @license EUPL-1.2
|
|
2245
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
2246
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
2247
|
+
*/
|
|
2248
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
2249
|
+
.utrecht-textbox, .utrecht-html input:not([type]),
|
|
2250
|
+
.utrecht-html input[type=date i],
|
|
2251
|
+
.utrecht-html input[type=datetime-local i],
|
|
2252
|
+
.utrecht-html input[type=email i],
|
|
2253
|
+
.utrecht-html input[type=month i],
|
|
2254
|
+
.utrecht-html input[type=number i],
|
|
2255
|
+
.utrecht-html input[type=password i],
|
|
2256
|
+
.utrecht-html input[type=search i],
|
|
2257
|
+
.utrecht-html input[type=tel i],
|
|
2258
|
+
.utrecht-html input[type=text i],
|
|
2259
|
+
.utrecht-html input[type=time i],
|
|
2260
|
+
.utrecht-html input[type=url i],
|
|
2261
|
+
.utrecht-html input[type=week i] {
|
|
2262
|
+
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
|
|
2263
|
+
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
|
|
2264
|
+
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
|
|
2265
|
+
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
|
|
2266
|
+
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
2267
|
+
border-style: solid;
|
|
2268
|
+
box-sizing: border-box;
|
|
2269
|
+
color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
|
|
2270
|
+
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
|
|
2271
|
+
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
2272
|
+
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
2273
|
+
padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
2274
|
+
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
2275
|
+
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
2276
|
+
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
2277
|
+
width: 100%;
|
|
454
2278
|
}
|
|
455
2279
|
|
|
2280
|
+
.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input:invalid:not([type]),
|
|
2281
|
+
.utrecht-html input[type=date i]:invalid,
|
|
2282
|
+
.utrecht-html input[type=datetime-local i]:invalid,
|
|
2283
|
+
.utrecht-html input[type=email i]:invalid,
|
|
2284
|
+
.utrecht-html input[type=month i]:invalid,
|
|
2285
|
+
.utrecht-html input[type=number i]:invalid,
|
|
2286
|
+
.utrecht-html input[type=password i]:invalid,
|
|
2287
|
+
.utrecht-html input[type=search i]:invalid,
|
|
2288
|
+
.utrecht-html input[type=tel i]:invalid,
|
|
2289
|
+
.utrecht-html input[type=text i]:invalid,
|
|
2290
|
+
.utrecht-html input[type=time i]:invalid,
|
|
2291
|
+
.utrecht-html input[type=url i]:invalid,
|
|
2292
|
+
.utrecht-html input[type=week i]:invalid, .utrecht-html input[aria-invalid=true]:not([type]),
|
|
2293
|
+
.utrecht-html input[aria-invalid=true][type=date i],
|
|
2294
|
+
.utrecht-html input[aria-invalid=true][type=datetime-local i],
|
|
2295
|
+
.utrecht-html input[aria-invalid=true][type=email i],
|
|
2296
|
+
.utrecht-html input[aria-invalid=true][type=month i],
|
|
2297
|
+
.utrecht-html input[aria-invalid=true][type=number i],
|
|
2298
|
+
.utrecht-html input[aria-invalid=true][type=password i],
|
|
2299
|
+
.utrecht-html input[aria-invalid=true][type=search i],
|
|
2300
|
+
.utrecht-html input[aria-invalid=true][type=tel i],
|
|
2301
|
+
.utrecht-html input[aria-invalid=true][type=text i],
|
|
2302
|
+
.utrecht-html input[aria-invalid=true][type=time i],
|
|
2303
|
+
.utrecht-html input[aria-invalid=true][type=url i],
|
|
2304
|
+
.utrecht-html input[aria-invalid=true][type=week i] {
|
|
2305
|
+
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))));
|
|
2306
|
+
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))));
|
|
2307
|
+
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))));
|
|
2308
|
+
}
|
|
2309
|
+
|
|
2310
|
+
.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input:disabled:not([type]),
|
|
2311
|
+
.utrecht-html input[type=date i]:disabled,
|
|
2312
|
+
.utrecht-html input[type=datetime-local i]:disabled,
|
|
2313
|
+
.utrecht-html input[type=email i]:disabled,
|
|
2314
|
+
.utrecht-html input[type=month i]:disabled,
|
|
2315
|
+
.utrecht-html input[type=number i]:disabled,
|
|
2316
|
+
.utrecht-html input[type=password i]:disabled,
|
|
2317
|
+
.utrecht-html input[type=search i]:disabled,
|
|
2318
|
+
.utrecht-html input[type=tel i]:disabled,
|
|
2319
|
+
.utrecht-html input[type=text i]:disabled,
|
|
2320
|
+
.utrecht-html input[type=time i]:disabled,
|
|
2321
|
+
.utrecht-html input[type=url i]:disabled,
|
|
2322
|
+
.utrecht-html input[type=week i]:disabled {
|
|
2323
|
+
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))));
|
|
2324
|
+
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))));
|
|
2325
|
+
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2326
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
2327
|
+
}
|
|
2328
|
+
|
|
2329
|
+
.utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
2330
|
+
.utrecht-html input[type=date i]:focus,
|
|
2331
|
+
.utrecht-html input[type=datetime-local i]:focus,
|
|
2332
|
+
.utrecht-html input[type=email i]:focus,
|
|
2333
|
+
.utrecht-html input[type=month i]:focus,
|
|
2334
|
+
.utrecht-html input[type=number i]:focus,
|
|
2335
|
+
.utrecht-html input[type=password i]:focus,
|
|
2336
|
+
.utrecht-html input[type=search i]:focus,
|
|
2337
|
+
.utrecht-html input[type=tel i]:focus,
|
|
2338
|
+
.utrecht-html input[type=text i]:focus,
|
|
2339
|
+
.utrecht-html input[type=time i]:focus,
|
|
2340
|
+
.utrecht-html input[type=url i]:focus,
|
|
2341
|
+
.utrecht-html input[type=week i]:focus {
|
|
2342
|
+
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))));
|
|
2343
|
+
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))));
|
|
2344
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2345
|
+
}
|
|
2346
|
+
|
|
2347
|
+
.utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
|
|
2348
|
+
.utrecht-html input[type=date i]:focus,
|
|
2349
|
+
.utrecht-html input[type=datetime-local i]:focus,
|
|
2350
|
+
.utrecht-html input[type=email i]:focus,
|
|
2351
|
+
.utrecht-html input[type=month i]:focus,
|
|
2352
|
+
.utrecht-html input[type=number i]:focus,
|
|
2353
|
+
.utrecht-html input[type=password i]:focus,
|
|
2354
|
+
.utrecht-html input[type=search i]:focus,
|
|
2355
|
+
.utrecht-html input[type=tel i]:focus,
|
|
2356
|
+
.utrecht-html input[type=text i]:focus,
|
|
2357
|
+
.utrecht-html input[type=time i]:focus,
|
|
2358
|
+
.utrecht-html input[type=url i]:focus,
|
|
2359
|
+
.utrecht-html input[type=week i]:focus {
|
|
2360
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
2361
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
2362
|
+
outline-offset: 0;
|
|
2363
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2364
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2365
|
+
}
|
|
2366
|
+
|
|
2367
|
+
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
|
|
2368
|
+
.utrecht-html input[type=date i]:read-only,
|
|
2369
|
+
.utrecht-html input[type=datetime-local i]:read-only,
|
|
2370
|
+
.utrecht-html input[type=email i]:read-only,
|
|
2371
|
+
.utrecht-html input[type=month i]:read-only,
|
|
2372
|
+
.utrecht-html input[type=number i]:read-only,
|
|
2373
|
+
.utrecht-html input[type=password i]:read-only,
|
|
2374
|
+
.utrecht-html input[type=search i]:read-only,
|
|
2375
|
+
.utrecht-html input[type=tel i]:read-only,
|
|
2376
|
+
.utrecht-html input[type=text i]:read-only,
|
|
2377
|
+
.utrecht-html input[type=time i]:read-only,
|
|
2378
|
+
.utrecht-html input[type=url i]:read-only,
|
|
2379
|
+
.utrecht-html input[type=week i]:read-only {
|
|
2380
|
+
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))));
|
|
2381
|
+
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
2382
|
+
}
|
|
2383
|
+
|
|
2384
|
+
.utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder, .utrecht-html input:not([type])::placeholder,
|
|
2385
|
+
.utrecht-html input[type=date i]::placeholder,
|
|
2386
|
+
.utrecht-html input[type=datetime-local i]::placeholder,
|
|
2387
|
+
.utrecht-html input[type=email i]::placeholder,
|
|
2388
|
+
.utrecht-html input[type=month i]::placeholder,
|
|
2389
|
+
.utrecht-html input[type=number i]::placeholder,
|
|
2390
|
+
.utrecht-html input[type=password i]::placeholder,
|
|
2391
|
+
.utrecht-html input[type=search i]::placeholder,
|
|
2392
|
+
.utrecht-html input[type=tel i]::placeholder,
|
|
2393
|
+
.utrecht-html input[type=text i]::placeholder,
|
|
2394
|
+
.utrecht-html input[type=time i]::placeholder,
|
|
2395
|
+
.utrecht-html input[type=url i]::placeholder,
|
|
2396
|
+
.utrecht-html input[type=week i]::placeholder {
|
|
2397
|
+
color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
|
|
2398
|
+
font-style: var(--utrecht-form-input-placeholder-font-style);
|
|
2399
|
+
opacity: 100%;
|
|
2400
|
+
}
|
|
2401
|
+
|
|
2402
|
+
.utrecht-textbox--numeric, .utrecht-html input[autocomplete~=bday i],
|
|
2403
|
+
.utrecht-html input[autocomplete~=bday-day i],
|
|
2404
|
+
.utrecht-html input[autocomplete~=bday-month i],
|
|
2405
|
+
.utrecht-html input[autocomplete~=bday-year i],
|
|
2406
|
+
.utrecht-html input[autocomplete~=cc-csc i],
|
|
2407
|
+
.utrecht-html input[autocomplete~=cc-exp i],
|
|
2408
|
+
.utrecht-html input[autocomplete~=cc-exp-month i],
|
|
2409
|
+
.utrecht-html input[autocomplete~=cc-exp-year i],
|
|
2410
|
+
.utrecht-html input[autocomplete~=cc-number i],
|
|
2411
|
+
.utrecht-html input[autocomplete~=one-time-code i],
|
|
2412
|
+
.utrecht-html input[autocomplete~=postal-code i],
|
|
2413
|
+
.utrecht-html input[autocomplete~=tel i],
|
|
2414
|
+
.utrecht-html input[autocomplete~=tel-area-code i],
|
|
2415
|
+
.utrecht-html input[autocomplete~=tel-country-code i],
|
|
2416
|
+
.utrecht-html input[autocomplete~=tel-extension i],
|
|
2417
|
+
.utrecht-html input[autocomplete~=tel-local i],
|
|
2418
|
+
.utrecht-html input[autocomplete~=tel-national i],
|
|
2419
|
+
.utrecht-html input[autocomplete~=transaction-amount i],
|
|
2420
|
+
.utrecht-html input[inputmode=decimal i],
|
|
2421
|
+
.utrecht-html input[inputmode=numeric i],
|
|
2422
|
+
.utrecht-html input[type=number i] {
|
|
2423
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
2424
|
+
}
|
|
2425
|
+
|
|
2426
|
+
.utrecht-textbox--password, .utrecht-html input[autocomplete~=current-password i],
|
|
2427
|
+
.utrecht-html input[autocomplete~=new-password i] {
|
|
2428
|
+
font-variant-ligatures: none;
|
|
2429
|
+
font-variant-numeric: slashed-zero;
|
|
2430
|
+
}
|
|
2431
|
+
|
|
2432
|
+
.utrecht-textbox--url, .utrecht-html input[type=url i] {
|
|
2433
|
+
font-variant-ligatures: none;
|
|
2434
|
+
}
|
|
2435
|
+
|
|
2436
|
+
.utrecht-textbox--html-input:focus:not(:focus-visible), .utrecht-html input:focus:not(:focus-visible):not([type]),
|
|
2437
|
+
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
2438
|
+
.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
|
|
2439
|
+
.utrecht-html input[type=email i]:focus:not(:focus-visible),
|
|
2440
|
+
.utrecht-html input[type=month i]:focus:not(:focus-visible),
|
|
2441
|
+
.utrecht-html input[type=number i]:focus:not(:focus-visible),
|
|
2442
|
+
.utrecht-html input[type=password i]:focus:not(:focus-visible),
|
|
2443
|
+
.utrecht-html input[type=search i]:focus:not(:focus-visible),
|
|
2444
|
+
.utrecht-html input[type=tel i]:focus:not(:focus-visible),
|
|
2445
|
+
.utrecht-html input[type=text i]:focus:not(:focus-visible),
|
|
2446
|
+
.utrecht-html input[type=time i]:focus:not(:focus-visible),
|
|
2447
|
+
.utrecht-html input[type=url i]:focus:not(:focus-visible),
|
|
2448
|
+
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
2449
|
+
/* undo focus ring */
|
|
2450
|
+
box-shadow: none;
|
|
2451
|
+
outline-style: none;
|
|
2452
|
+
}
|
|
456
2453
|
/**
|
|
457
2454
|
* @license EUPL-1.2
|
|
458
2455
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -466,23 +2463,25 @@
|
|
|
466
2463
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
467
2464
|
font-size: var(--utrecht-document-font-size, inherit);
|
|
468
2465
|
line-height: var(--utrecht-document-line-height, inherit);
|
|
469
|
-
|
|
2466
|
+
margin-block-end: 0;
|
|
2467
|
+
margin-block-start: 0;
|
|
2468
|
+
padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
|
|
470
2469
|
}
|
|
471
2470
|
|
|
472
2471
|
.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
2472
|
margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
|
|
2473
|
+
margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
|
|
475
2474
|
}
|
|
476
2475
|
|
|
477
2476
|
.utrecht-unordered-list--nested {
|
|
478
|
-
margin-inline-start: 2ch;
|
|
479
2477
|
margin-block-end: 0;
|
|
2478
|
+
margin-inline-start: 2ch;
|
|
480
2479
|
}
|
|
481
2480
|
|
|
482
2481
|
.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
2482
|
margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
|
|
2483
|
+
margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
|
|
2484
|
+
padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
|
|
486
2485
|
}
|
|
487
2486
|
|
|
488
2487
|
.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
|