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