@utrecht/component-library-css 1.0.0-alpha.99 → 1.0.0

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/dist/bem.css DELETED
@@ -1,2212 +0,0 @@
1
- @charset "UTF-8";
2
- /**
3
- * @license EUPL-1.2
4
- * Copyright (c) 2021 Gemeente Utrecht
5
- */
6
- /* Collection of all BEM class names in the component library */
7
- /*
8
- * TODO: Once every component is a separate npm package, these imports should
9
- * be updated to use a package reference instead of a relative path.
10
- *
11
- * For example:
12
- * @import "../../blockquote/index";
13
- *
14
- * Will become:
15
- * @import "@utrecht/blockquote/index";
16
- */
17
- /**
18
- * @license EUPL-1.2
19
- * Copyright (c) 2021 Robbert Broersma
20
- */
21
- /* stylelint-disable-next-line block-no-empty */
22
- /* stylelint-disable-next-line block-no-empty */
23
- /**
24
- * @license EUPL-1.2
25
- * Copyright (c) 2021 Robbert Broersma
26
- */
27
- .utrecht-article {
28
- max-inline-size: var(--utrecht-article-max-inline-size);
29
- }
30
-
31
- /**
32
- * @license EUPL-1.2
33
- * Copyright (c) 2021 Robbert Broersma
34
- */
35
- /**
36
- * @license EUPL-1.2
37
- * Copyright (c) 2021 Robbert Broersma
38
- */
39
- .utrecht-badge, .utrecht-badge-status, .utrecht-badge-data {
40
- background-color: var(--utrecht-badge-background-color, black);
41
- border-radius: var(--utrecht-badge-border-radius, 0.5ch);
42
- color: var(--utrecht-badge-color, white);
43
- display: inline-block;
44
- font-family: var(--utrecht-document-font-family, sans-serif);
45
- font-size: var(--utrecht-badge-font-size, inherit);
46
- font-style: normal;
47
- /* no inheritance */
48
- font-weight: var(--utrecht-badge-font-weight, bold);
49
- /* no inheritance */
50
- line-height: var(--utrecht-badge-line-height);
51
- padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
52
- padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
53
- padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
54
- padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
55
- text-decoration: none;
56
- /* no inheritance */
57
- }
58
-
59
- .utrecht-badge-counter {
60
- background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, black));
61
- border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
62
- color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, white));
63
- display: inline-block;
64
- font-family: var(--utrecht-document-font-family, sans-serif);
65
- font-style: normal;
66
- /* no inheritance */
67
- font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
68
- /* no inheritance */
69
- padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
70
- padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
71
- padding-inline-end: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
72
- padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
73
- text-decoration: none;
74
- /* no inheritance */
75
- }
76
-
77
- /**
78
- * @license EUPL-1.2
79
- * Copyright (c) 2021 Robbert Broersma
80
- */
81
- /**
82
- * @license EUPL-1.2
83
- * Copyright (c) 2021 Robbert Broersma
84
- */
85
- .utrecht-badge, .utrecht-badge-status, .utrecht-badge-data {
86
- background-color: var(--utrecht-badge-background-color, black);
87
- border-radius: var(--utrecht-badge-border-radius, 0.5ch);
88
- color: var(--utrecht-badge-color, white);
89
- display: inline-block;
90
- font-family: var(--utrecht-document-font-family, sans-serif);
91
- font-size: var(--utrecht-badge-font-size, inherit);
92
- font-style: normal;
93
- /* no inheritance */
94
- font-weight: var(--utrecht-badge-font-weight, bold);
95
- /* no inheritance */
96
- line-height: var(--utrecht-badge-line-height);
97
- padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
98
- padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
99
- padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
100
- padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
101
- text-decoration: none;
102
- /* no inheritance */
103
- }
104
-
105
- .utrecht-badge-data {
106
- letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
107
- text-transform: var(--utrecht-badge-data-text-transform, inherit);
108
- }
109
-
110
- /**
111
- * @license EUPL-1.2
112
- * Copyright (c) 2021 Robbert Broersma
113
- */
114
- /**
115
- * @license EUPL-1.2
116
- * Copyright (c) 2021 Robbert Broersma
117
- */
118
- .utrecht-badge, .utrecht-badge-status, .utrecht-badge-data {
119
- background-color: var(--utrecht-badge-background-color, black);
120
- border-radius: var(--utrecht-badge-border-radius, 0.5ch);
121
- color: var(--utrecht-badge-color, white);
122
- display: inline-block;
123
- font-family: var(--utrecht-document-font-family, sans-serif);
124
- font-size: var(--utrecht-badge-font-size, inherit);
125
- font-style: normal;
126
- /* no inheritance */
127
- font-weight: var(--utrecht-badge-font-weight, bold);
128
- /* no inheritance */
129
- line-height: var(--utrecht-badge-line-height);
130
- padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
131
- padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
132
- padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
133
- padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
134
- text-decoration: none;
135
- /* no inheritance */
136
- }
137
-
138
- .utrecht-badge-status {
139
- letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
140
- text-transform: var(--utrecht-badge-status-text-transform, inherit);
141
- }
142
-
143
- .utrecht-badge-status--danger {
144
- background-color: var(--utrecht-feedback-danger-fill-background-color, red);
145
- color: var(--utrecht-feedback-danger-fill-color, white);
146
- }
147
-
148
- .utrecht-badge-status--warning {
149
- background-color: var(--utrecht-feedback-warning-fill-background-color, #ffa600);
150
- color: var(--utrecht-feedback-warning-fill-color, white);
151
- }
152
-
153
- .utrecht-badge-status--safe {
154
- background-color: var(--utrecht-feedback-safe-fill-background-color, green);
155
- color: var(--utrecht-feedback-safe-fill-color, white);
156
- }
157
-
158
- .utrecht-badge-status--neutral {
159
- background-color: var(--utrecht-feedback-neutral-fill-background-color, black);
160
- color: var(--utrecht-feedback-neutral-fill-color, white);
161
- }
162
-
163
- .utrecht-badge-status--valid {
164
- background-color: var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, red));
165
- color: var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white));
166
- }
167
-
168
- .utrecht-badge-status--invalid {
169
- background-color: var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));
170
- color: var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white));
171
- }
172
-
173
- .utrecht-badge-status--error {
174
- background-color: var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));
175
- color: var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white));
176
- }
177
-
178
- .utrecht-badge-status--success {
179
- background-color: var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));
180
- color: var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white));
181
- }
182
-
183
- .utrecht-badge-status--active {
184
- background-color: var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));
185
- color: var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white));
186
- }
187
-
188
- .utrecht-badge-status--inactive {
189
- background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));
190
- color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
191
- }
192
-
193
- /**
194
- * @license EUPL-1.2
195
- * Copyright (c) 2021 Robbert Broersma
196
- */
197
- .utrecht-blockquote {
198
- font-family: var(--utrecht-document-font-family);
199
- font-size: var(--utrecht-blockquote-font-size);
200
- margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
201
- margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
202
- }
203
-
204
- .utrecht-blockquote__attribution {
205
- color: var(--utrecht-blockquote-attribution-color, inherit);
206
- font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
207
- }
208
-
209
- .utrecht-blockquote__content {
210
- --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
211
- --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
212
- color: var(--utrecht-blockquote-content-color, inherit);
213
- font-size: var(--utrecht-blockquote-content-font-size, inherit);
214
- }
215
-
216
- .utrecht-blockquote--distanced {
217
- margin-block-end: var(--utrecht-blockquote-margin-block-end);
218
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
219
- }
220
-
221
- /**
222
- * @license EUPL-1.2
223
- * Copyright (c) 2021 Robbert Broersma
224
- */
225
- .utrecht-breadcrumb {
226
- --utrecht-focus-background-color: var(--utrecht-breadcrumb-link-focus-background-color);
227
- --utrecht-link-background-color: var(--utrecht-breadcrumb-link-background-color);
228
- --utrecht-link-color: var(--utrecht-breadcrumb-link-color);
229
- --utrecht-link-focus-color: var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));
230
- --utrecht-link-focus-text-decoration: var(--utrecht-link-text-decoration);
231
- --utrecht-link-hover-color: var(--utrecht-breadcrumb-link-color);
232
- --utrecht-link-hover-text-decoration: var(--utrecht-link-text-decoration);
233
- --utrecht-link-visited-color: var(--utrecht-breadcrumb-link-color);
234
- --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
235
- font-family: var(--utrecht-document-font-family, inherit);
236
- font-size: var(--utrecht-breadcrumb-font-size);
237
- text-transform: var(--utrecht-document-text-transform, inherit);
238
- }
239
-
240
- .utrecht-breadcrumb__list {
241
- block-size: var(--utrecht-breadcrumb-block-size);
242
- display: flex;
243
- }
244
-
245
- ol.utrecht-breadcrumb__list {
246
- list-style: none;
247
- margin-block-end: 0;
248
- margin-block-start: 0;
249
- padding-inline-start: 0;
250
- }
251
-
252
- .utrecht-breadcrumb__item {
253
- block-size: 100%;
254
- }
255
-
256
- .utrecht-breadcrumb__link {
257
- background-color: var(--utrecht-breadcrumb-link-background-color);
258
- display: block;
259
- padding-block-end: var(--utrecht-breadcrumb-item-padding-block-end, 8px);
260
- padding-block-start: var(--utrecht-breadcrumb-item-padding-block-start, 8px);
261
- padding-inline-end: var(--utrecht-breadcrumb-item-padding-inline-end, 8px);
262
- padding-inline-start: var(--utrecht-breadcrumb-item-padding-inline-start, 8px);
263
- }
264
-
265
- /* stylelint-disable-next-line block-no-empty */
266
- .utrecht-breadcrumb--arrows {
267
- /* https://css-tricks.com/triangle-breadcrumbs/ */
268
- --utrecht-breadcrumb-arrow-size: 24px;
269
- overflow: hidden;
270
- }
271
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link {
272
- padding-inline-end: 0;
273
- position: relative;
274
- }
275
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
276
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
277
- border-block-end-width: var(--utrecht-breadcrumb-block-size);
278
- border-block-start-width: var(--utrecht-breadcrumb-block-size);
279
- border-color: transparent;
280
- border-style: solid;
281
- content: " ";
282
- display: block;
283
- height: 0;
284
- left: 100%;
285
- margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
286
- position: absolute;
287
- top: 50%;
288
- width: 0;
289
- }
290
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
291
- border-inline-start-color: var(--utrecht-breadcrumb-link-background-color);
292
- border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
293
- z-index: 2;
294
- }
295
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
296
- border-inline-start-color: var(--utrecht-document-background-color);
297
- border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
298
- margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
299
- margin-inline-start: 1px;
300
- z-index: 1;
301
- }
302
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,
303
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after {
304
- border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
305
- }
306
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
307
- padding-inline-start: calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size));
308
- }
309
-
310
- .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
311
- margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
312
- }
313
-
314
- /**
315
- * @license EUPL-1.2
316
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
317
- * Copyright (c) 2021 Gemeente Utrecht
318
- */
319
- .utrecht-button {
320
- background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
321
- block-size: var(--utrecht-button-block-size, auto);
322
- border-radius: var(--utrecht-button-border-radius);
323
- border-width: var(--utrecht-button-border-width);
324
- color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
325
- font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
326
- font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
327
- font-weight: var(--utrecht-button-font-weight);
328
- inline-size: var(--utrecht-button-inline-size, auto);
329
- letter-spacing: var(--utrecht-button-letter-spacing);
330
- min-inline-size: var(--utrecht-button-min-inline-size, 0);
331
- padding-block-end: var(--utrecht-button-padding-block-end);
332
- padding-block-start: var(--utrecht-button-padding-block-start);
333
- padding-inline-end: var(--utrecht-button-padding-inline-end);
334
- padding-inline-start: var(--utrecht-button-padding-inline-start);
335
- text-transform: var(--utrecht-button-text-transform);
336
- user-select: none;
337
- }
338
-
339
- .utrecht-button--distanced {
340
- margin-block-end: var(--utrecht-button-margin-block-end);
341
- margin-block-start: var(--utrecht-button-margin-block-start);
342
- margin-inline-end: var(--utrecht-button-margin-inline-end);
343
- margin-inline-start: var(--utrecht-button-margin-inline-start);
344
- }
345
-
346
- .utrecht-button--submit {
347
- /* lower priority specificty than busy and disabled cursor */
348
- cursor: var(--utrecht-action-submit-cursor);
349
- }
350
-
351
- .utrecht-button--busy {
352
- cursor: var(--utrecht-action-busy-cursor);
353
- }
354
-
355
- .utrecht-button:disabled,
356
- .utrecht-button--disabled {
357
- background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
358
- color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
359
- cursor: var(--utrecht-action-disabled-cursor);
360
- }
361
-
362
- .utrecht-button:active,
363
- .utrecht-button--active {
364
- background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
365
- color: var(--utrecht-button-active-color, var(--utrecht-button-color));
366
- }
367
-
368
- .utrecht-button--focus,
369
- .utrecht-button:not(.utrecht-button--disabled):focus {
370
- background-color: var(--utrecht-focus-background-color);
371
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
372
- color: var(--utrecht-focus-color, inherit);
373
- outline-color: var(--utrecht-focus-outline-color, transparent);
374
- outline-offset: 0;
375
- outline-style: var(--utrecht-focus-outline-style, solid);
376
- outline-width: var(--utrecht-focus-outline-width, 0);
377
- background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
378
- color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
379
- }
380
-
381
- .utrecht-button--hover:not(:disabled),
382
- .utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
383
- background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
384
- color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
385
- transform: scale(var(--utrecht-button-focus-transform-scale, 1));
386
- }
387
-
388
- /**
389
- * @license EUPL-1.2
390
- * Copyright (c) 2021 Robbert Broersma
391
- */
392
- .utrecht-checkbox {
393
- margin-block-end: 0;
394
- /* reset native margin for input[type="checkbox"] */
395
- margin-block-start: 0;
396
- margin-inline-end: 0;
397
- margin-inline-start: 0;
398
- }
399
-
400
- .utrecht-checkbox--disabled {
401
- cursor: var(--utrecht-action-disabled-cursor);
402
- }
403
-
404
- /**
405
- * @license EUPL-1.2
406
- * Copyright (c) 2021 Robbert Broersma
407
- */
408
- /**
409
- * @license EUPL-1.2
410
- * Copyright (c) 2021 Robbert Broersma
411
- */
412
- .utrecht-checkbox {
413
- margin-block-end: 0;
414
- /* reset native margin for input[type="checkbox"] */
415
- margin-block-start: 0;
416
- margin-inline-end: 0;
417
- margin-inline-start: 0;
418
- }
419
-
420
- .utrecht-checkbox--disabled {
421
- cursor: var(--utrecht-action-disabled-cursor);
422
- }
423
-
424
- .utrecht-custom-checkbox {
425
- --utrecht-icon-size: var(--utrecht-custom-checkbox-icon-size, calc(0.75 * var(--utrecht-custom-checkbox-size)));
426
- display: inline-block;
427
- height: var(--utrecht-custom-checkbox-size);
428
- position: relative;
429
- width: var(--utrecht-custom-checkbox-size);
430
- }
431
-
432
- .utrecht-custom-checkbox__input,
433
- .utrecht-custom-checkbox__box {
434
- left: 0;
435
- position: absolute;
436
- top: 0;
437
- }
438
-
439
- .utrecht-custom-checkbox__input {
440
- margin-block-end: 0;
441
- /* reset native margin for input[type="checkbox"] */
442
- margin-block-start: 0;
443
- margin-inline-end: 0;
444
- margin-inline-start: 0;
445
- height: var(--utrecht-custom-checkbox-size);
446
- opacity: 0%;
447
- width: var(--utrecht-custom-checkbox-size);
448
- z-index: 10;
449
- }
450
-
451
- .utrecht-custom-checkbox__box {
452
- align-items: center;
453
- background-color: var(--utrecht-custom-checkbox-background-color);
454
- border-color: var(--utrecht-custom-checkbox-border-color, var(--utrecht-form-input-border-color));
455
- border-radius: var(--utrecht-custom-checkbox-border-radius, var(--utrecht-form-input-border-radius));
456
- border-style: solid;
457
- border-width: var(--utrecht-custom-checkbox-border-width, var(--utrecht-form-input-border-width));
458
- box-sizing: border-box;
459
- color: var(--utrecht-custom-checkbox-color);
460
- display: flex;
461
- height: var(--utrecht-custom-checkbox-size);
462
- justify-content: center;
463
- pointer-events: none;
464
- width: var(--utrecht-custom-checkbox-size);
465
- z-index: 1000;
466
- }
467
-
468
- .utrecht-custom-checkbox__box--checked {
469
- background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
470
- border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
471
- border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
472
- color: var(--utrecht-custom-checkbox-checked-color, var(--utrecht-custom-checkbox-color));
473
- }
474
-
475
- .utrecht-custom-checkbox__box--disabled {
476
- background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
477
- border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
478
- border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
479
- color: var(--utrecht-custom-checkbox-disabled-color, var(--utrecht-custom-checkbox-color));
480
- cursor: var(--utrecht-action-disabled-cursor);
481
- }
482
-
483
- .utrecht-custom-checkbox__box--indeterminate, .utrecht-custom-checkbox__input:indeterminate ~ .utrecht-custom-checkbox__box {
484
- color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
485
- }
486
-
487
- .utrecht-custom-checkbox__box--invalid {
488
- background-color: var(--utrecht-custom-checkbox-invalid-background-color, var(--utrecht-custom-checkbox-background-color));
489
- border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
490
- border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
491
- color: var(--utrecht-custom-checkbox-invalid-color, var(--utrecht-custom-checkbox-color));
492
- }
493
-
494
- .utrecht-custom-checkbox__box--active {
495
- background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
496
- border-color: var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));
497
- border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
498
- color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
499
- }
500
-
501
- .utrecht-custom-checkbox__box--focus, .utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
502
- background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
503
- border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
504
- border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
505
- color: var(--utrecht-custom-checkbox-focus-color, var(--utrecht-custom-checkbox-color));
506
- }
507
-
508
- .utrecht-custom-checkbox__box--focus-visible, .utrecht-custom-checkbox__input:focus-visible ~ .utrecht-custom-checkbox__box {
509
- background-color: var(--utrecht-focus-background-color);
510
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
511
- color: var(--utrecht-focus-color, inherit);
512
- outline-color: var(--utrecht-focus-outline-color, transparent);
513
- outline-offset: 0;
514
- outline-style: var(--utrecht-focus-outline-style, solid);
515
- outline-width: var(--utrecht-focus-outline-width, 0);
516
- }
517
-
518
- .utrecht-custom-checkbox__icon {
519
- display: none;
520
- }
521
-
522
- .utrecht-custom-checkbox__box--checked .utrecht-custom-checkbox__icon--checked {
523
- display: block;
524
- }
525
-
526
- .utrecht-custom-checkbox__box--indeterminate .utrecht-custom-checkbox__icon--indeterminate, .utrecht-custom-checkbox__input:indeterminate ~ .utrecht-custom-checkbox__box .utrecht-custom-checkbox__icon--indeterminate {
527
- display: block;
528
- }
529
-
530
- /**
531
- * @license EUPL-1.2
532
- * Copyright (c) 2021 Robbert Broersma
533
- */
534
- .utrecht-digid-button {
535
- --utrecht-button-block-size: var(--utrecht-digid-button-block-size, 50px);
536
- --utrecht-logo-max-height: var(--utrecht-digid-button-block-size, 50px);
537
- --utrecht-logo-max-width: var(--utrecht-digid-button-block-size, 50px);
538
- display: inline-flex;
539
- gap: var(--utrecht-space-inline-sm);
540
- }
541
-
542
- .utrecht-digid-button__logo {
543
- order: 1;
544
- }
545
-
546
- .utrecht-digid-button__button {
547
- order: 2;
548
- }
549
-
550
- /**
551
- * @license EUPL-1.2
552
- * Copyright (c) 2021 Robbert Broersma
553
- */
554
- .utrecht-document {
555
- background-color: var(--utrecht-document-background-color, inherit);
556
- color: var(--utrecht-document-color, inherit);
557
- font-family: var(--utrecht-document-font-family, inherit);
558
- font-size: var(--utrecht-document-font-size, inherit);
559
- line-height: var(--utrecht-document-line-height, inherit);
560
- }
561
-
562
- /**
563
- * @license EUPL-1.2
564
- * Copyright (c) 2021 Robbert Broersma
565
- */
566
- .utrecht-emphasis--stressed {
567
- font-style: var(--utrecht-emphasis-stressed-font-style, italic);
568
- }
569
-
570
- .utrecht-emphasis--strong {
571
- font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
572
- }
573
-
574
- /**
575
- * @license EUPL-1.2
576
- * Copyright (c) 2021 Gemeente Utrecht
577
- * Copyright (c) 2021 Robbert Broersma
578
- */
579
- .utrecht-form-field-checkbox-group {
580
- font-family: var(--utrecht-document-font-family, inherit);
581
- font-size: var(--utrecht-paragraph-font-size);
582
- }
583
-
584
- .utrecht-form-field-checkbox-group--distanced {
585
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
586
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
587
- }
588
-
589
- .utrecht-form-field-checkbox-group__label {
590
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
591
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
592
- }
593
-
594
- /**
595
- * @license EUPL-1.2
596
- * Copyright (c) 2021 Robbert Broersma
597
- */
598
- /**
599
- * @license EUPL-1.2
600
- * Copyright (c) 2021 Robbert Broersma
601
- */
602
- .utrecht-form-field {
603
- font-family: var(--utrecht-document-font-family, inherit);
604
- }
605
-
606
- .utrecht-form-field--distanced {
607
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
608
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
609
- }
610
-
611
- .utrecht-form-field__label--checkbox {
612
- margin-inline-start: 1ch;
613
- }
614
-
615
- /**
616
- * @license EUPL-1.2
617
- * Copyright (c) 2021 Robbert Broersma
618
- */
619
- .utrecht-form-field-description {
620
- color: var(--utrecht-form-field-description-color);
621
- font-family: var(--utrecht-document-font-family, inherit);
622
- font-size: var(--utrecht-form-field-description-font-size, inherit);
623
- font-style: var(--utrecht-form-field-description-font-style);
624
- }
625
-
626
- .utrecht-form-field-description--distanced {
627
- margin-block-end: var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end));
628
- margin-block-start: var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start));
629
- }
630
-
631
- .utrecht-form-field-description--invalid {
632
- color: var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)));
633
- }
634
-
635
- .utrecht-form-field-description--valid {
636
- color: var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)));
637
- }
638
-
639
- /**
640
- * @license EUPL-1.2
641
- * Copyright (c) 2021 Robbert Broersma
642
- */
643
- .utrecht-form-field-radio-group {
644
- font-family: var(--utrecht-document-font-family, inherit);
645
- font-size: var(--utrecht-paragraph-font-size);
646
- }
647
-
648
- .utrecht-form-field-radio-group--distanced {
649
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
650
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
651
- }
652
-
653
- .utrecht-form-field-radio-group__label {
654
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
655
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
656
- }
657
-
658
- /**
659
- * @license EUPL-1.2
660
- * Copyright (c) 2021 Robbert Broersma
661
- */
662
- .utrecht-form-field-radio {
663
- font-family: var(--utrecht-document-font-family, inherit);
664
- font-size: var(--utrecht-paragraph-font-size);
665
- }
666
-
667
- .utrecht-form-field-radio--distanced {
668
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
669
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
670
- }
671
-
672
- .utrecht-form-field-radio__label {
673
- margin-inline-start: 1ch;
674
- }
675
-
676
- /**
677
- * @license EUPL-1.2
678
- * Copyright (c) 2021 Robbert Broersma
679
- */
680
- .utrecht-form-field-textbox {
681
- font-family: var(--utrecht-document-font-family, inherit);
682
- }
683
-
684
- /**
685
- * @license EUPL-1.2
686
- * Copyright (c) 2021 Robbert Broersma
687
- */
688
- .utrecht-form-field {
689
- font-family: var(--utrecht-document-font-family, inherit);
690
- }
691
-
692
- .utrecht-form-field--distanced {
693
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
694
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
695
- }
696
-
697
- /**
698
- * @license EUPL-1.2
699
- * Copyright (c) 2021 Robbert Broersma
700
- */
701
- /* stylelint-disable-next-line block-no-empty */
702
- .utrecht-form-fieldset--reset-fieldset {
703
- border: 0;
704
- margin-inline-end: 0;
705
- margin-inline-start: 0;
706
- min-width: 0;
707
- padding-block-end: 0;
708
- padding-block-start: 0.01em;
709
- padding-inline-end: 0;
710
- padding-inline-start: 0;
711
- }
712
-
713
- .utrecht-form-fieldset__legend--reset-legend {
714
- padding-inline-end: 0;
715
- padding-inline-start: 0;
716
- }
717
-
718
- .utrecht-form-fieldset--distanced {
719
- margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
720
- margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
721
- }
722
-
723
- .utrecht-form-fieldset__legend {
724
- color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
725
- font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
726
- font-size: var(--utrecht-form-fieldset-legend-font-size);
727
- font-weight: var(--utrecht-form-fieldset-legend-font-weight);
728
- line-height: var(--utrecht-form-fieldset-legend-line-height);
729
- text-transform: var(--utrecht-form-fieldset-legend-text-transform);
730
- }
731
-
732
- .utrecht-form-fieldset__legend--distanced {
733
- margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
734
- margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
735
- }
736
-
737
- /**
738
- * @license EUPL-1.2
739
- * Copyright (c) 2021 Robbert Broersma
740
- */
741
- .utrecht-form-label {
742
- color: var(--utrecht-form-label-color);
743
- font-size: var(--utrecht-form-label-font-size);
744
- font-weight: var(--utrecht-form-label-font-weight);
745
- }
746
-
747
- .utrecht-form-label--checkbox {
748
- color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
749
- font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
750
- }
751
-
752
- .utrecht-form-label--checked {
753
- font-weight: var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight));
754
- }
755
-
756
- .utrecht-form-label--disabled {
757
- cursor: var(--utrecht-action-disabled-cursor);
758
- font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
759
- }
760
-
761
- .utrecht-form-label--radio {
762
- color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
763
- font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
764
- }
765
-
766
- /**
767
- * @license EUPL-1.2
768
- * Copyright (c) 2021 Robbert Broersma
769
- */
770
- .utrecht-form-toggle {
771
- align-items: center;
772
- border-color: var(--utrecht-form-toggle-border-color, currentColor);
773
- border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
774
- border-style: var(--utrecht-form-toggle-border-style, solid);
775
- border-width: var(--utrecht-form-toggle-border-width, 1px);
776
- color: var(--utrecht-form-toggle-color);
777
- display: flex;
778
- height: var(--utrecht-form-toggle-height, 2em);
779
- padding-block-end: var(--utrecht-form-toggle-padding-block-end);
780
- padding-block-start: var(--utrecht-form-toggle-padding-block-start);
781
- padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
782
- padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
783
- position: relative;
784
- user-select: none;
785
- width: var(--utrecht-form-toggle-width, 6em);
786
- }
787
-
788
- .utrecht-form-toggle--focus {
789
- border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
790
- border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
791
- border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
792
- }
793
-
794
- .utrecht-form-toggle--hover {
795
- background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
796
- color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
797
- }
798
-
799
- .utrecht-form-toggle--disabled {
800
- border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
801
- border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
802
- border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
803
- cursor: var(--utrecht-action-disabled-cursor);
804
- }
805
-
806
- .utrecht-form-toggle__thumb {
807
- /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
808
- background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
809
- border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
810
- box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
811
- margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
812
- margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
813
- min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
814
- min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
815
- z-index: 20;
816
- }
817
-
818
- .utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
819
- margin-inline-start: auto;
820
- }
821
-
822
- .utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
823
- margin-inline-end: auto;
824
- }
825
-
826
- .utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
827
- background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
828
- box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
829
- }
830
-
831
- .utrecht-form-toggle__track {
832
- align-items: center;
833
- background-color: var(--utrecht-form-toggle-accent-color);
834
- border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
835
- display: flex;
836
- height: 100%;
837
- width: 100%;
838
- }
839
-
840
- .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
841
- background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
842
- }
843
-
844
- .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
845
- background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
846
- color: var(--utrecht-form-toggle-disabled-color, black);
847
- }
848
-
849
- .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
850
- /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
851
- border: 0 !important;
852
- clip: rect(1px, 1px, 1px, 1px) !important;
853
- -webkit-clip-path: inset(50%) !important;
854
- clip-path: inset(50%) !important;
855
- height: 1px !important;
856
- /* stylelint-disable-next-line property-disallowed-list */
857
- margin: -1px !important;
858
- overflow: hidden !important;
859
- /* stylelint-disable-next-line property-disallowed-list */
860
- padding: 0 !important;
861
- position: absolute !important;
862
- white-space: nowrap !important;
863
- width: 1px !important;
864
- }
865
- .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
866
- outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
867
- outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
868
- outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
869
- }
870
- /**
871
- * @license EUPL-1.2
872
- * Copyright (c) 2021 Gemeente Utrecht
873
- * Copyright (c) 2021 Robbert Broersma
874
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
875
- */
876
- .utrecht-heading-1 {
877
- color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
878
- font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
879
- font-size: var(--utrecht-heading-1-font-size);
880
- font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
881
- letter-spacing: var(--utrecht-heading-1-letter-spacing);
882
- line-height: var(--utrecht-heading-1-line-height);
883
- margin-block-end: 0;
884
- margin-block-start: 0;
885
- text-transform: var(--utrecht-heading-1-text-transform, inherit);
886
- }
887
-
888
- .utrecht-heading-1--distanced {
889
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
890
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
891
- }
892
-
893
- /**
894
- * @license EUPL-1.2
895
- * Copyright (c) 2021 Gemeente Utrecht
896
- * Copyright (c) 2021 Robbert Broersma
897
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
898
- */
899
- .utrecht-heading-2 {
900
- color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
901
- font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
902
- font-size: var(--utrecht-heading-2-font-size);
903
- font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
904
- letter-spacing: var(--utrecht-heading-2-letter-spacing);
905
- line-height: var(--utrecht-heading-2-line-height);
906
- margin-block-end: 0;
907
- margin-block-start: 0;
908
- text-transform: var(--utrecht-heading-2-text-transform, inherit);
909
- }
910
-
911
- .utrecht-heading-2--distanced {
912
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
913
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
914
- }
915
-
916
- /**
917
- * @license EUPL-1.2
918
- * Copyright (c) 2021 Gemeente Utrecht
919
- * Copyright (c) 2021 Robbert Broersma
920
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
921
- */
922
- .utrecht-heading-3 {
923
- color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
924
- font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
925
- font-size: var(--utrecht-heading-3-font-size);
926
- font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
927
- letter-spacing: var(--utrecht-heading-3-letter-spacing);
928
- line-height: var(--utrecht-heading-3-line-height);
929
- margin-block-end: 0;
930
- margin-block-start: 0;
931
- text-transform: var(--utrecht-heading-3-text-transform, inherit);
932
- }
933
-
934
- .utrecht-heading-3--distanced {
935
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
936
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
937
- }
938
-
939
- /**
940
- * @license EUPL-1.2
941
- * Copyright (c) 2021 Gemeente Utrecht
942
- * Copyright (c) 2021 Robbert Broersma
943
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
944
- */
945
- .utrecht-heading-4 {
946
- color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
947
- font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
948
- font-size: var(--utrecht-heading-4-font-size);
949
- font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
950
- letter-spacing: var(--utrecht-heading-4-letter-spacing);
951
- line-height: var(--utrecht-heading-4-line-height);
952
- margin-block-end: 0;
953
- margin-block-start: 0;
954
- text-transform: var(--utrecht-heading-4-text-transform, inherit);
955
- }
956
-
957
- .utrecht-heading-4--distanced {
958
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
959
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
960
- }
961
-
962
- /**
963
- * @license EUPL-1.2
964
- * Copyright (c) 2021 Gemeente Utrecht
965
- * Copyright (c) 2021 Robbert Broersma
966
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
967
- */
968
- .utrecht-heading-5 {
969
- color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
970
- font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
971
- font-size: var(--utrecht-heading-5-font-size);
972
- font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
973
- letter-spacing: var(--utrecht-heading-5-letter-spacing);
974
- line-height: var(--utrecht-heading-5-line-height);
975
- margin-block-end: 0;
976
- margin-block-start: 0;
977
- text-transform: var(--utrecht-heading-5-text-transform, inherit);
978
- }
979
-
980
- .utrecht-heading-5--distanced {
981
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
982
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
983
- }
984
-
985
- /**
986
- * @license EUPL-1.2
987
- * Copyright (c) 2021 Gemeente Utrecht
988
- * Copyright (c) 2021 Robbert Broersma
989
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
990
- */
991
- .utrecht-heading-6 {
992
- color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
993
- font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
994
- font-size: var(--utrecht-heading-6-font-size);
995
- font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
996
- letter-spacing: var(--utrecht-heading-6-letter-spacing);
997
- line-height: var(--utrecht-heading-6-line-height);
998
- margin-block-end: 0;
999
- margin-block-start: 0;
1000
- text-transform: var(--utrecht-heading-6-text-transform, inherit);
1001
- }
1002
-
1003
- .utrecht-heading-6--distanced {
1004
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
1005
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
1006
- }
1007
-
1008
- /**
1009
- * @license EUPL-1.2
1010
- * Copyright (c) 2021 Gemeente Utrecht
1011
- * Copyright (c) 2021 Robbert Broersma
1012
- */
1013
- /* reset before other stylesheets */
1014
- .utrecht-link-list,
1015
- .utrecht-link-list--html-ul {
1016
- margin-block-end: 0;
1017
- margin-block-start: 0;
1018
- margin-inline-end: 0;
1019
- margin-inline-start: 0;
1020
- padding-inline-start: 0;
1021
- }
1022
- .utrecht-link-list > li,
1023
- .utrecht-link-list--html-ul > li {
1024
- list-style: none;
1025
- }
1026
-
1027
- .utrecht-link-list {
1028
- --utrecht-link-text-decoration: none;
1029
- --utrecht-link-hover-text-decoration: underline;
1030
- --utrecht-link-focus-text-decoration: underline;
1031
- }
1032
-
1033
- .utrecht-link-list--distanced {
1034
- margin-block-end: var(--utrecht-link-list-margin-block-end, 0);
1035
- margin-block-start: var(--utrecht-link-list-margin-block-start, 0);
1036
- }
1037
-
1038
- .utrecht-link-list__marker, .utrecht-link-list__item > a::before {
1039
- background-image: var(--utrecht-link-list-marker-background-image);
1040
- background-position-x: left;
1041
- background-position-y: bottom;
1042
- background-repeat: no-repeat;
1043
- display: inline-block;
1044
- inline-size: var(--utrecht-link-list-marker-inline-size);
1045
- }
1046
-
1047
- .utrecht-link-list__item {
1048
- display: block;
1049
- font-weight: var(--utrecht-link-list-item-font-weight);
1050
- }
1051
-
1052
- .utrecht-link-list__item + .utrecht-link-list__item {
1053
- margin-block-start: var(--utrecht-link-list-item-margin-block-start);
1054
- }
1055
-
1056
- .utrecht-link-list__item > a {
1057
- display: block;
1058
- }
1059
-
1060
- .utrecht-link-list__item > a::before {
1061
- content: "";
1062
- display: inline-block;
1063
- height: 1em;
1064
- }
1065
-
1066
- /**
1067
- * @license EUPL-1.2
1068
- * Copyright (c) 2021 Gemeente Utrecht
1069
- */
1070
- .utrecht-link-social {
1071
- --utrecht-icon-color: var(--utrecht-color-white);
1072
- background-color: var(--utrecht-color-red-40);
1073
- border: 2px solid var(--utrecht-color-white);
1074
- border-radius: 50%;
1075
- color: var(--utrecht-color-white);
1076
- display: inline-block;
1077
- height: 2.4em;
1078
- width: 2.4em;
1079
- }
1080
-
1081
- .utrecht-link-social--distanced {
1082
- margin-inline-end: 0.6em;
1083
- }
1084
-
1085
- /**
1086
- * @license EUPL-1.2
1087
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1088
- * Copyright (c) 2021 Gemeente Utrecht
1089
- */
1090
- .utrecht-link {
1091
- color: var(--utrecht-link-color, blue);
1092
- text-decoration: var(--utrecht-link-text-decoration, underline);
1093
- }
1094
-
1095
- .utrecht-link:visited,
1096
- .utrecht-link--visited {
1097
- color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
1098
- }
1099
-
1100
- .utrecht-link:hover,
1101
- .utrecht-link--hover {
1102
- color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
1103
- text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
1104
- }
1105
-
1106
- .utrecht-link:active,
1107
- .utrecht-link--active {
1108
- color: var(--utrecht-link-active-color, var(--utrecht-link-color));
1109
- }
1110
-
1111
- .utrecht-link:focus,
1112
- .utrecht-link--focus {
1113
- background-color: var(--utrecht-focus-background-color);
1114
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1115
- color: var(--utrecht-focus-color, inherit);
1116
- outline-color: var(--utrecht-focus-outline-color, transparent);
1117
- outline-offset: 0;
1118
- outline-style: var(--utrecht-focus-outline-style, solid);
1119
- outline-width: var(--utrecht-focus-outline-width, 0);
1120
- color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
1121
- text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
1122
- }
1123
-
1124
- /* stylelint-disable-next-line block-no-empty */
1125
- .utrecht-link--telephone {
1126
- white-space: nowrap;
1127
- }
1128
-
1129
- /**
1130
- * @license EUPL-1.2
1131
- * Copyright (c) 2021 Robbert Broersma
1132
- */
1133
- .utrecht-logo-button {
1134
- --utrecht-button-block-size: var(--utrecht-logo-button-block-size, 50px);
1135
- --utrecht-logo-max-height: var(--utrecht-logo-button-block-size, 50px);
1136
- --utrecht-logo-max-width: var(--utrecht-logo-button-block-size, 50px);
1137
- display: inline-flex;
1138
- gap: var(--utrecht-space-inline-sm);
1139
- }
1140
-
1141
- .utrecht-logo-button__logo {
1142
- order: 1;
1143
- }
1144
-
1145
- .utrecht-logo-button__button {
1146
- order: 2;
1147
- }
1148
-
1149
- .utrecht-logo {
1150
- max-height: var(--utrecht-logo-max-height);
1151
- max-width: var(--utrecht-logo-max-width);
1152
- }
1153
-
1154
- .utrecht-logo__decoration-1 {
1155
- fill: var(--utrecht-logo-decoration-1-color, #fff);
1156
- }
1157
-
1158
- .utrecht-logo__decoration-2 {
1159
- fill: var(--utrecht-logo-decoration-2-color, #c00);
1160
- }
1161
-
1162
- .utrecht-logo__decoration-3 {
1163
- fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
1164
- }
1165
-
1166
- /**
1167
- * @license EUPL-1.2
1168
- * Copyright (c) 2021 Gemeente Utrecht
1169
- */
1170
- .utrecht-mapcontrolbutton {
1171
- --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
1172
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
1173
- align-items: center;
1174
- background-color: var(--utrecht-mapcontrolbutton-background-color);
1175
- border-color: var(--utrecht-mapcontrolbutton-border-color);
1176
- border-radius: var(--utrecht-mapcontrolbutton-border-radius);
1177
- border-style: var(--utrecht-mapcontrolbutton-border-style);
1178
- border-width: var(--utrecht-mapcontrolbutton-border-width);
1179
- color: var(--utrecht-mapcontrolbutton-color);
1180
- display: flex;
1181
- flex-direction: row;
1182
- justify-content: center;
1183
- min-block-size: var(--utrecht-mapcontrolbutton-min-block-size);
1184
- min-inline-size: var(--utrecht-mapcontrolbutton-min-inline-size);
1185
- padding-block-end: 0;
1186
- padding-block-start: 0;
1187
- padding-inline-end: 0;
1188
- padding-inline-start: 0;
1189
- }
1190
-
1191
- .utrecht-mapcontrolbutton:disabled,
1192
- .utrecht-mapcontrolbutton--disabled {
1193
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
1194
- background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
1195
- border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
1196
- color: var(--utrecht-mapcontrolbutton-disabled-color);
1197
- }
1198
-
1199
- .utrecht-mapcontrolbutton--focus,
1200
- .utrecht-mapcontrolbutton:not(.utrecht-mapcontrolbutton--disabled):focus {
1201
- background-color: var(--utrecht-focus-background-color);
1202
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1203
- color: var(--utrecht-focus-color, inherit);
1204
- outline-color: var(--utrecht-focus-outline-color, transparent);
1205
- outline-offset: 0;
1206
- outline-style: var(--utrecht-focus-outline-style, solid);
1207
- outline-width: var(--utrecht-focus-outline-width, 0);
1208
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
1209
- }
1210
-
1211
- .utrecht-mapcontrolbutton--hover:not(:disabled),
1212
- .utrecht-mapcontrolbutton:hover:not(:disabled):not(.utrecht-mapcontrolbutton--disabled) {
1213
- background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
1214
- color: var(--utrecht-mapcontrolbutton-color);
1215
- }
1216
-
1217
- .utrecht-mapcontrolbutton__label {
1218
- display: block;
1219
- padding-inline-end: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
1220
- padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
1221
- }
1222
-
1223
- .utrecht-menulijst {
1224
- border-bottom: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
1225
- border-top: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
1226
- font-family: var(--document-font-family);
1227
- padding-block-end: var(--utrecht-space-block-sm);
1228
- padding-block-start: var(--utrecht-space-block-sm);
1229
- padding-inline-start: 0;
1230
- }
1231
-
1232
- .utrecht-menulijst__item {
1233
- list-style: none;
1234
- margin-block-end: var(--utrecht-space-block-sm);
1235
- margin-block-start: var(--utrecht-space-block-sm);
1236
- }
1237
-
1238
- .utrecht-menulijst__item a:link {
1239
- background-image: var(--utrecht-menulijst-item-background-image, none);
1240
- background-position: 0 0.25em;
1241
- background-repeat: no-repeat;
1242
- color: var(--utrecht-menulijst-item-color, var(--utrecht-link-color, blue));
1243
- display: block;
1244
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1245
- padding-inline-start: var(--utrecht-space-block-md);
1246
- text-decoration: none;
1247
- }
1248
-
1249
- .utrecht-menulijst__item a:hover {
1250
- color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
1251
- }
1252
-
1253
- .utrecht-menulijst__link--focus {
1254
- background-color: var(--utrecht-focus-background-color);
1255
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1256
- color: var(--utrecht-focus-color, inherit);
1257
- outline-color: var(--utrecht-focus-outline-color, transparent);
1258
- outline-offset: 0;
1259
- outline-style: var(--utrecht-focus-outline-style, solid);
1260
- outline-width: var(--utrecht-focus-outline-width, 0);
1261
- }
1262
-
1263
- /**
1264
- * @license EUPL-1.2
1265
- * Copyright (c) 2021 Gemeente Utrecht
1266
- * Copyright (c) 2021 A Herring
1267
- */
1268
- .utrecht-navhtml {
1269
- font-family: var(--utrecht-font-family-sans-serif);
1270
- }
1271
-
1272
- .utrecht-topnav__list {
1273
- background-color: var(--utrecht-topnav-list-background-color);
1274
- display: flex;
1275
- justify-content: space-between;
1276
- list-style: none;
1277
- list-style-image: none;
1278
- margin-block-end: 0;
1279
- margin-block-start: 0;
1280
- overflow: visible;
1281
- padding-block-end: 0;
1282
- padding-block-start: 0;
1283
- padding-inline-end: 0;
1284
- padding-inline-start: 0;
1285
- }
1286
-
1287
- .utrecht-topnav__item {
1288
- border-inline-end: 1px solid var(--utrecht-topnav-list-border-color);
1289
- flex: 1 0 auto;
1290
- margin-inline-start: 0;
1291
- text-align: center;
1292
- }
1293
-
1294
- .utrecht-topnav__item li:first-child {
1295
- border-inline-start: 1px solid var(--utrecht-topnav-list-border-color);
1296
- padding-inline-start: 0;
1297
- }
1298
-
1299
- .utrecht-topnav__link {
1300
- color: var(--utrecht-topnav-link-color);
1301
- display: block;
1302
- padding-block-end: 1rem;
1303
- padding-block-start: 1rem;
1304
- text-decoration: none;
1305
- }
1306
-
1307
- .utrecht-topnav__link:hover {
1308
- background-color: var(--utrecht-topnav-link-hover-background-color);
1309
- color: var(--utrecht-topnav-link-color);
1310
- text-decoration: underline;
1311
- }
1312
-
1313
- .utrecht-topnav__link--current {
1314
- background-color: var(--utrecht-topnav-list-background-active);
1315
- text-decoration: underline;
1316
- }
1317
-
1318
- .utrecht-topnav__link--focus {
1319
- background-color: var(--utrecht-topnav-link-focus-background-color);
1320
- /*#ffd633*/
1321
- /*-webkit-box-shadow: 0 0 0 2px var(--utrecht-link-focus-box-shadow-color);*/
1322
- box-shadow: 0 0 0 2px var(--utrecht-topnav-link-focus-box-shadow-color);
1323
- color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
1324
- outline: 2px var(--utrecht-topnav-link-focus-border-type) var(--utrecht-topnav-link-focus-outline-color);
1325
- outline-offset: 0;
1326
- text-decoration: var(--utrecht-topnav-link-focus-text-decoration, var(--utrecht-topnav-link-text-decoration, underline));
1327
- }
1328
-
1329
- /**
1330
- * @license EUPL-1.2
1331
- * Copyright (c) 2021 Gemeente Utrecht
1332
- * Copyright (c) 2021 A Herring
1333
- */
1334
- /**
1335
- * @license EUPL-1.2
1336
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1337
- * Copyright (c) 2021 Gemeente Utrecht
1338
- */
1339
- .utrecht-navhtml {
1340
- font-family: var(--utrecht-font-family-sans-serif);
1341
- }
1342
-
1343
- .utrecht-sidenav {
1344
- border-block-end: 1px solid var(--utrecht-color-grey-80);
1345
- border-block-start: 1px solid var(--utrecht-color-grey-80);
1346
- margin-block-end: 0;
1347
- margin-block-start: 0;
1348
- padding-block-end: 0;
1349
- padding-block-start: 0;
1350
- width: 13rem;
1351
- }
1352
-
1353
- .utrecht-sidenav__list {
1354
- margin-block-end: 0;
1355
- margin-block-start: 0.2rem;
1356
- padding-block-end: 0;
1357
- padding-block-start: 0;
1358
- padding-inline-start: 0;
1359
- }
1360
-
1361
- .utrecht-sidenav__list ul {
1362
- margin-block-end: 0;
1363
- padding-block-end: 0;
1364
- padding-block-start: 0;
1365
- padding-inline-start: 1.2rem;
1366
- }
1367
-
1368
- .utrecht-sidenav__item,
1369
- .utrecht-sidenav__sibling__item {
1370
- list-style: none;
1371
- margin-inline-start: 0;
1372
- position: relative;
1373
- }
1374
-
1375
- .utrecht-sidenav__item:last-child {
1376
- border-block-end: none;
1377
- }
1378
-
1379
- /*draw the li item box bottom line*/
1380
- .utrecht-sidenav__item span:not(.utrecht-sidenav__item:last-child span, .utrecht-sidenav__item--has-children span:first-of-type) {
1381
- border-block-end: 1px solid var(--utrecht-color-grey-80);
1382
- display: block;
1383
- margin-inline-start: var(--utrecht-space-inline-sm);
1384
- }
1385
-
1386
- /*Remove bottom padding form first item in list with children*/
1387
- .utrecht-sidenav__item .utrecht-sidenav__link--has-children {
1388
- padding-block-end: 0;
1389
- }
1390
-
1391
- .utrecht-sidenav__child__item {
1392
- list-style: none;
1393
- }
1394
-
1395
- .utrecht-sidenav__link,
1396
- .utrecht-sidenav__link--sibling {
1397
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
1398
- display: block;
1399
- margin-inline-start: 0;
1400
- padding-block-end: var(--utrecht-space-block-xs);
1401
- padding-block-start: var(--utrecht-space-block-xs);
1402
- padding-inline-end: var(--utrecht-space-inline-3xs);
1403
- padding-inline-start: var(--utrecht-space-inline-lg);
1404
- text-decoration: none;
1405
- }
1406
-
1407
- .utrecht-sidenav__link--child,
1408
- .utrecht-sidenav__link--child--current {
1409
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
1410
- display: block;
1411
- margin-block-end: 0;
1412
- margin-block-start: 0;
1413
- padding-block-end: var(--utrecht-space-block-2xs);
1414
- padding-block-start: var(--utrecht-space-block-2xs);
1415
- padding-inline-end: var(--utrecht-space-inline-3xs);
1416
- padding-inline-start: var(--utrecht-space-inline-lg);
1417
- text-decoration: none;
1418
- }
1419
-
1420
- .utrecht-sidenav__link::before,
1421
- .utrecht-sidenav__link--sibling::before {
1422
- background-color: var(--utrecht-sidenav-item-marker-color);
1423
- left: 26px;
1424
- }
1425
-
1426
- /*Little fix to move the dot to the right*/
1427
- .utrecht-sidenav__link--current::before {
1428
- background-color: var(--utrecht-sidenav-link-hover-color);
1429
- left: 27px;
1430
- }
1431
-
1432
- /*Dot for link with siblings */
1433
- .utrecht-sidenav__link::before,
1434
- .utrecht-sidenav__link--sibling::before,
1435
- .utrecht-sidenav__item:last-child .utrecht-sidenav__link--current::before {
1436
- border-radius: 100%;
1437
- box-shadow: 0 0 2px 2px #fff;
1438
- /*Make var*/
1439
- content: "";
1440
- height: 8px;
1441
- overflow: hidden;
1442
- position: absolute;
1443
- top: 20px;
1444
- /*Hard value?*/
1445
- transform: translateY(-50%) translateX(-2.5ch);
1446
- width: 8px;
1447
- z-index: 10;
1448
- }
1449
-
1450
- /* Hover layout for mousover on sidenav__link */
1451
- .utrecht-sidenav__link:hover::before,
1452
- .utrecht-sidenav__link--sibling:hover::before {
1453
- background-color: var(--utrecht-sidenav-link-hover-color);
1454
- }
1455
-
1456
- .utrecht-sidenav__item a:hover {
1457
- color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
1458
- text-decoration: underline;
1459
- }
1460
-
1461
- .utrecht-sidenav__item--current {
1462
- color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
1463
- }
1464
-
1465
- /* Draw metro connection lines on sidenav link items */
1466
- .utrecht-sidenav__link::after,
1467
- .utrecht-sidenav__item:last-child .utrecht-sidenav__link::after {
1468
- background: var(--utrecht-sidenav-item-marker-color);
1469
- /* min-height: 100%;
1470
- height: calc(100% + 2px);*/
1471
- bottom: 0;
1472
- content: "";
1473
- display: block;
1474
- left: 3px;
1475
- overflow: hidden;
1476
- position: absolute;
1477
- top: -22px;
1478
- width: 3px;
1479
- z-index: 5;
1480
- }
1481
-
1482
- /* Draw short metro connection lines on sidenav child link items */
1483
- .utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,
1484
- .utrecht-sidenav__link--current::after,
1485
- .utrecht-sidenav__item--has-children a::after {
1486
- height: 40px;
1487
- min-height: 38px;
1488
- }
1489
-
1490
- /* Remove first metro line in listing*/
1491
- .utrecht-sidenav__item:first-child .utrecht-sidenav__link::after {
1492
- content: "";
1493
- display: none;
1494
- }
1495
-
1496
- /* Make current link bold */
1497
- .utrecht-sidenav__link--current,
1498
- .utrecht-sidenav__link--child--current {
1499
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
1500
- }
1501
-
1502
- .utrecht-sidenav__list--child {
1503
- margin-block-end: 0;
1504
- margin-block-start: 0;
1505
- padding-block-end: 0;
1506
- padding-block-start: 0;
1507
- padding-inline-end: 0;
1508
- padding-inline-start: 1.4rem;
1509
- }
1510
-
1511
- .utrecht-sidenav__item--child {
1512
- border: none;
1513
- list-style: none;
1514
- position: relative;
1515
- }
1516
-
1517
- /*No last border on child item*/
1518
- .utrecht-sidenav__item--child:last-child {
1519
- border: none;
1520
- }
1521
-
1522
- /* Add dot bullets on child links */
1523
- .utrecht-sidenav__link--child::before,
1524
- .utrecht-sidenav__link--child--current::before {
1525
- background-color: transparent;
1526
- border: 2px solid var(--utrecht-sidenav-link-color);
1527
- border-radius: 100%;
1528
- content: "";
1529
- height: 4px;
1530
- left: 1.2rem;
1531
- overflow: hidden;
1532
- position: absolute;
1533
- top: 16px;
1534
- transform: translateY(-50%) translateX(-19.5px);
1535
- width: 4px;
1536
- z-index: 10;
1537
- }
1538
-
1539
- /* Make current marker dots bold */
1540
- .utrecht-sidenav__link--child--current::before {
1541
- background-color: var(--utrecht-sidenav-link-hover-color);
1542
- }
1543
-
1544
- /* Hover layout for mousover on child__link */
1545
- .utrecht-sidenav__link--child:hover::before {
1546
- background-color: var(--utrecht-sidenav-link-hover-color);
1547
- border: 2px solid var(--utrecht-sidenav-link-hover-color);
1548
- }
1549
-
1550
- /* remove :after lines in child and sibling links */
1551
- .utrecht-sidenav__item--child:first-child .utrecht-sidenav__link--child--current::after,
1552
- .utrecht-sidenav__link--child::after,
1553
- .utrecht-sidenav__item .utrecht-sidenav__item--child .utrecht-sidenav__link--child::after,
1554
- .utrecht-sidenav__item .utrecht-sidenav__link--sibling::after,
1555
- .utrecht-sidenav__item--sibling:last-child .utrecht-sidenav__link--sibling::after {
1556
- display: none;
1557
- }
1558
-
1559
- .utrecht-sidenav__link:focus,
1560
- .utrecht-sidenav__link--focus {
1561
- background-color: var(--utrecht-focus-background-color);
1562
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1563
- color: var(--utrecht-focus-color, inherit);
1564
- outline-color: var(--utrecht-focus-outline-color, transparent);
1565
- outline-offset: 0;
1566
- outline-style: var(--utrecht-focus-outline-style, solid);
1567
- outline-width: var(--utrecht-focus-outline-width, 0);
1568
- }
1569
-
1570
- /**
1571
- * @license EUPL-1.2
1572
- * Copyright (c) 2021 Gemeente Utrecht
1573
- * Copyright (c) 2021 A Herring
1574
- */
1575
- .utrecht-navhtml {
1576
- font-family: var(--utrecht-font-family-sans-serif);
1577
- }
1578
-
1579
- .utrecht-topnav__list {
1580
- background-color: var(--utrecht-topnav-list-background-color);
1581
- display: flex;
1582
- justify-content: space-between;
1583
- list-style: none;
1584
- list-style-image: none;
1585
- margin-block-end: 0;
1586
- margin-block-start: 0;
1587
- overflow: visible;
1588
- padding-block-end: 0;
1589
- padding-block-start: 0;
1590
- padding-inline-end: 0;
1591
- padding-inline-start: 0;
1592
- }
1593
-
1594
- .utrecht-topnav__item {
1595
- border-inline-end: 1px solid var(--utrecht-topnav-list-border-color);
1596
- flex: 1 0 auto;
1597
- margin-inline-start: 0;
1598
- text-align: center;
1599
- }
1600
-
1601
- .utrecht-topnav__item li:first-child {
1602
- border-inline-start: 1px solid var(--utrecht-topnav-list-border-color);
1603
- padding-inline-start: 0;
1604
- }
1605
-
1606
- .utrecht-topnav__link {
1607
- color: var(--utrecht-topnav-link-color);
1608
- display: block;
1609
- padding-block-end: 1rem;
1610
- padding-block-start: 1rem;
1611
- text-decoration: none;
1612
- }
1613
-
1614
- .utrecht-topnav__link:hover {
1615
- background-color: var(--utrecht-topnav-link-hover-background-color);
1616
- color: var(--utrecht-topnav-link-color);
1617
- text-decoration: underline;
1618
- }
1619
-
1620
- .utrecht-topnav__link--current {
1621
- background-color: var(--utrecht-topnav-list-background-active);
1622
- text-decoration: underline;
1623
- }
1624
-
1625
- .utrecht-topnav__link:focus,
1626
- .utrecht-topnav__link--focus {
1627
- background-color: var(--utrecht-focus-background-color);
1628
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1629
- color: var(--utrecht-focus-color, inherit);
1630
- outline-color: var(--utrecht-focus-outline-color, transparent);
1631
- outline-offset: 0;
1632
- outline-style: var(--utrecht-focus-outline-style, solid);
1633
- outline-width: var(--utrecht-focus-outline-width, 0);
1634
- color: var(--utrecht-topnav-link-color);
1635
- }
1636
-
1637
- /**
1638
- * @license EUPL-1.2
1639
- * Copyright (c) 2021 Robbert Broersma
1640
- * Copyright (c) 2021 Gemeente Utrecht
1641
- */
1642
- .utrecht-ordered-list {
1643
- font-family: var(--utrecht-document-font-family, inherit);
1644
- margin-block-end: 0;
1645
- margin-block-start: 0;
1646
- padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
1647
- }
1648
-
1649
- .utrecht-ordered-list--distanced {
1650
- margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
1651
- margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
1652
- }
1653
-
1654
- .utrecht-ordered-list__item {
1655
- margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
1656
- margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
1657
- padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
1658
- }
1659
-
1660
- /**
1661
- * @license EUPL-1.2
1662
- * Copyright (c) 2021 Gemeente Utrecht
1663
- * Copyright (c) 2021 Robbert Broersma
1664
- */
1665
- .utrecht-page-footer {
1666
- --utrecht-document-color: currentColor;
1667
- --utrecht-heading-color: currentColor;
1668
- --utrecht-link-color: currentColor;
1669
- --utrecht-link-focus-color: currentColor;
1670
- --utrecht-link-hover-color: currentColor;
1671
- --utrecht-link-active-color: currentColor;
1672
- --utrecht-link-visited-color: currentColor;
1673
- background-color: var(--utrecht-page-footer-background-color);
1674
- background-image: var(--utrecht-page-footer-background-image);
1675
- color: var(--utrecht-page-footer-color);
1676
- font-family: var(--utrecht-document-font-family);
1677
- font-size: var(--utrecht-document-font-size);
1678
- padding-block-end: var(--utrecht-page-footer-padding-block-end);
1679
- padding-block-start: var(--utrecht-page-footer-padding-block-start);
1680
- padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
1681
- padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
1682
- }
1683
-
1684
- .utrecht-page-footer__address--reset-address {
1685
- /* reset <address> */
1686
- font-style: inherit;
1687
- margin-block-end: 0;
1688
- margin-block-start: 0;
1689
- }
1690
-
1691
- /**
1692
- * @license EUPL-1.2
1693
- * Copyright (c) 2021 Robbert Broersma
1694
- */
1695
- .utrecht-pagination {
1696
- font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
1697
- font-size: var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));
1698
- }
1699
-
1700
- .utrecht-pagination--distanced {
1701
- margin-block-end: var(--utrecht-pagination-margin-block-end);
1702
- margin-block-start: var(--utrecht-pagination-margin-block-start);
1703
- }
1704
-
1705
- .utrecht-pagination__relative-link {
1706
- background-color: var(--utrecht-pagination-relative-link-background-color);
1707
- border-color: var(--utrecht-pagination-relative-link-border-color);
1708
- border-radius: var(--utrecht-pagination-relative-link-border-radius);
1709
- border-style: solid;
1710
- border-width: var(--utrecht-pagination-relative-link-border-width, 0);
1711
- color: var(--utrecht-pagination-relative-link-color);
1712
- display: inline-block;
1713
- font-weight: var(--utrecht-pagination-relative-link-font-weight);
1714
- padding-block-end: var(--utrecht-pagination-relative-link-padding-block-end);
1715
- padding-block-start: var(--utrecht-pagination-relative-link-padding-block-start);
1716
- padding-inline-end: var(--utrecht-pagination-relative-link-padding-inline-end);
1717
- padding-inline-start: var(--utrecht-pagination-relative-link-padding-inline-start);
1718
- text-decoration: var(--utrecht-pagination-relative-link-text-decoration);
1719
- text-transform: var(--utrecht-pagination-relative-link-text-transform);
1720
- }
1721
-
1722
- .utrecht-pagination__relative-link--next {
1723
- margin-inline-start: var(--utrecht-pagination-relative-link-distanced-margin-inline-start);
1724
- }
1725
-
1726
- .utrecht-pagination__relative-link--prev {
1727
- margin-inline-end: var(--utrecht-pagination-relative-link-distanced-margin-inline-end);
1728
- }
1729
-
1730
- .utrecht-pagination__relative-link--disabled {
1731
- background-color: var(--utrecht-pagination-relative-link-disabled-background-color, var(--utrecht-pagination-relative-link-background-color));
1732
- color: var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color));
1733
- }
1734
-
1735
- .utrecht-pagination__relative-link--focus,
1736
- .utrecht-pagination__relative-link:focus {
1737
- background-color: var(--utrecht-focus-background-color);
1738
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1739
- color: var(--utrecht-focus-color, inherit);
1740
- outline-color: var(--utrecht-focus-outline-color, transparent);
1741
- outline-offset: 0;
1742
- outline-style: var(--utrecht-focus-outline-style, solid);
1743
- outline-width: var(--utrecht-focus-outline-width, 0);
1744
- }
1745
-
1746
- .utrecht-pagination__relative-link--hover,
1747
- .utrecht-pagination__relative-link:hover {
1748
- background-color: var(--utrecht-pagination-relative-link-hover-background-color, var(--utrecht-pagination-relative-link-background-color));
1749
- border-color: var(--utrecht-pagination-relative-link-hover-border-color, var(--utrecht-pagination-relative-link-border-color));
1750
- color: var(--utrecht-pagination-relative-link-hover-color, var(--utrecht-pagination-relative-link-color));
1751
- }
1752
-
1753
- .utrecht-pagination__page-link {
1754
- background-color: var(--utrecht-pagination-page-link-background-color);
1755
- border-color: var(--utrecht-pagination-page-link-border-color, 0);
1756
- border-radius: var(--utrecht-pagination-page-link-border-radius);
1757
- border-style: solid;
1758
- border-width: var(--utrecht-pagination-page-link-border-width);
1759
- color: var(--utrecht-pagination-page-link-color);
1760
- display: inline-block;
1761
- font-weight: var(--utrecht-pagination-page-link-font-weight);
1762
- padding-block-end: var(--utrecht-pagination-page-link-padding-block-end);
1763
- padding-block-start: var(--utrecht-pagination-page-link-padding-block-start);
1764
- padding-inline-end: var(--utrecht-pagination-page-link-padding-inline-end);
1765
- padding-inline-start: var(--utrecht-pagination-page-link-padding-inline-start);
1766
- text-decoration: var(--utrecht-pagination-page-link-text-decoration);
1767
- }
1768
-
1769
- .utrecht-pagination__page-link--current {
1770
- --utrecht-pagination-page-link-background-color: var(--utrecht-pagination-page-link-current-background-color);
1771
- --utrecht-pagination-page-link-border-color: var(--utrecht-pagination-page-link-current-border-color);
1772
- --utrecht-pagination-page-link-color: var(--utrecht-pagination-page-link-current-color);
1773
- }
1774
-
1775
- .utrecht-pagination__page-link--distanced,
1776
- .utrecht-pagination__page-link ~ .utrecht-pagination__page-link {
1777
- margin-inline-start: var(--utrecht-pagination-page-link-distanced-margin-inline-start);
1778
- }
1779
-
1780
- .utrecht-pagination__page-link--hover,
1781
- .utrecht-pagination__page-link:hover {
1782
- background-color: var(--utrecht-pagination-page-link-hover-background-color, var(--utrecht-pagination-page-link-background-color));
1783
- border-color: var(--utrecht-pagination-page-link-hover-border-color, var(--utrecht-pagination-page-link-border-color));
1784
- color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color));
1785
- }
1786
-
1787
- .utrecht-pagination__page-link--focus,
1788
- .utrecht-pagination__page-link:focus {
1789
- background-color: var(--utrecht-focus-background-color);
1790
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1791
- color: var(--utrecht-focus-color, inherit);
1792
- outline-color: var(--utrecht-focus-outline-color, transparent);
1793
- outline-offset: 0;
1794
- outline-style: var(--utrecht-focus-outline-style, solid);
1795
- outline-width: var(--utrecht-focus-outline-width, 0);
1796
- }
1797
-
1798
- /**
1799
- * @license EUPL-1.2
1800
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1801
- */
1802
- .utrecht-paragraph {
1803
- color: var(--utrecht-document-color, inherit);
1804
- font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
1805
- font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
1806
- font-weight: var(--utrecht-paragraph-font-weight, inherit);
1807
- line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
1808
- margin-block-end: 0;
1809
- margin-block-start: 0;
1810
- }
1811
-
1812
- .utrecht-paragraph--lead {
1813
- color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
1814
- font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1815
- font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1816
- line-height: var(--utrecht-paragraph-lead-line-height, inherit);
1817
- }
1818
-
1819
- .utrecht-paragraph--distanced {
1820
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
1821
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
1822
- }
1823
-
1824
- /**
1825
- * @license EUPL-1.2
1826
- * Copyright (c) 2021 Gemeente Utrecht
1827
- * Copyright (c) 2021 Robbert Broersma
1828
- */
1829
- .utrecht-pre-heading {
1830
- color: var(--utrecht-pre-heading-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
1831
- font-family: var(--utrecht-pre-heading-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
1832
- font-size: var(--utrecht-pre-heading-font-size);
1833
- font-weight: var(--utrecht-pre-heading-font-weight, var(--utrecht-heading-font-weight, bold));
1834
- letter-spacing: var(--utrecht-pre-heading-letter-spacing);
1835
- line-height: var(--utrecht-pre-heading-line-height);
1836
- margin-block-end: 0;
1837
- margin-block-start: 0;
1838
- text-transform: var(--utrecht-pre-heading-text-transform, inherit);
1839
- }
1840
-
1841
- .utrecht-pre-heading--distanced {
1842
- margin-block-end: var(--utrecht-pre-heading-margin-block-end);
1843
- margin-block-start: var(--utrecht-pre-heading-margin-block-start);
1844
- }
1845
-
1846
- /**
1847
- * @license EUPL-1.2
1848
- * Copyright (c) 2021 Gemeente Utrecht
1849
- */
1850
- .utrecht-radio-button {
1851
- margin-block-end: 0;
1852
- /* reset native margin for input[type="radio"] */
1853
- margin-block-start: 0;
1854
- margin-inline-end: 0;
1855
- margin-inline-start: 0;
1856
- }
1857
-
1858
- /* stylelint-disable-next-line block-no-empty */
1859
- .utrecht-radio-button--disabled {
1860
- cursor: var(--utrecht-action-disabled-cursor);
1861
- }
1862
-
1863
- /**
1864
- * @license EUPL-1.2
1865
- * Copyright (c) 2021 Gemeente Utrecht
1866
- */
1867
- .utrecht-search-bar {
1868
- --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
1869
- --utrecht-button-focus-transform-scale: var(--utrecht-search-bar-hover-transform);
1870
- --utrecht-button-font-size: var(--utrecht-search-bar-button-font-size);
1871
- --utrecht-button-font-weight: var(--utrecht-search-bar-button-font-weight);
1872
- --utrecht-button-letter-spacing: var(--utrecht-search-bar-button-letter-spacing);
1873
- --utrecht-button-primary-action-background-color: var(--utrecht-search-bar-button-background-color);
1874
- --utrecht-button-primary-action-color: var(--utrecht-search-bar-button-color);
1875
- --utrecht-button-primary-action-hover-background-color: var(--utrecht-search-bar-hover-background-color);
1876
- --utrecht-button-text-transform: var(--utrecht-search-bar-button-text-transform);
1877
- --utrecht-button-primary-action-hover-background-color: var(--utrecht-searchbar-hover-background-color);
1878
- --utrecht-button-focus-transform-scale: var(--utrecht-searchbar-hover-background-transform);
1879
- --utrecht-textbox-border-color: var(--utrecht-search-bar-textbox-border-color);
1880
- --utrecht-textbox-padding-inline-start: var(--utrecht-search-bar-textbox-padding-inline-start);
1881
- --utrecht-textbox-border-bottom-width: var(--utrecht-search-bar-textbox-border-bottom-width);
1882
- display: flex;
1883
- }
1884
-
1885
- .utrecht-search-bar__input {
1886
- background-image: var(--utrecht-search-bar-input-background-image, none);
1887
- background-position-x: var(--utrecht-search-bar-textbox-background-position-x);
1888
- background-position-y: var(--utrecht-search-bar-textbox-background-position-y);
1889
- background-repeat: no-repeat;
1890
- background-size: var(--utrecht-search-bar-textbox-background-size);
1891
- }
1892
-
1893
- /**
1894
- * @license EUPL-1.2
1895
- * Copyright (c) 2021 Robbert Broersma
1896
- */
1897
- .utrecht-select {
1898
- -moz-appearance: none;
1899
- -webkit-appearance: none;
1900
- appearance: none;
1901
- background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
1902
- background-image: var(--utrecht-select-background-image);
1903
- background-position: 100%;
1904
- background-repeat: no-repeat;
1905
- background-size: 1.4em;
1906
- border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
1907
- border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1908
- border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
1909
- border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1910
- border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1911
- border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
1912
- border-style: solid;
1913
- color: var(--utrecht-select-color, var(--utrecht-form-input-color));
1914
- font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
1915
- font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
1916
- max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
1917
- padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
1918
- padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
1919
- padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1920
- padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1921
- width: 100%;
1922
- }
1923
-
1924
- .utrecht-select--disabled, .utrecht-select--html-select:disabled {
1925
- 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))));
1926
- 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))));
1927
- color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1928
- cursor: var(--utrecht-action-disabled-cursor);
1929
- }
1930
-
1931
- .utrecht-select--focus, .utrecht-select--html-select:focus {
1932
- background-color: var(--utrecht-focus-background-color);
1933
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1934
- color: var(--utrecht-focus-color, inherit);
1935
- outline-color: var(--utrecht-focus-outline-color, transparent);
1936
- outline-offset: 0;
1937
- outline-style: var(--utrecht-focus-outline-style, solid);
1938
- outline-width: var(--utrecht-focus-outline-width, 0);
1939
- 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))));
1940
- 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))));
1941
- color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1942
- }
1943
-
1944
- .utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-select--html-select[aria-invalid=true] {
1945
- 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))));
1946
- 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))));
1947
- 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))));
1948
- }
1949
-
1950
- /* stylelint-disable-next-line block-no-empty */
1951
- .utrecht-select--html-select {
1952
- /* <select> does not support :read-only */
1953
- }
1954
- /**
1955
- * @license EUPL-1.2
1956
- * Copyright (c) 2021 Gemeente Utrecht
1957
- * Copyright (c) 2021 Robbert Broersma
1958
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1959
- */
1960
- .utrecht-separator {
1961
- border-color: var(--utrecht-separator-color);
1962
- border-style: solid;
1963
- border-width: 0 0 var(--utrecht-separator-block-size) 0;
1964
- }
1965
-
1966
- .utrecht-separator--distanced {
1967
- margin-block-end: var(--utrecht-separator-margin-block-end);
1968
- margin-block-start: var(--utrecht-separator-margin-block-start);
1969
- }
1970
-
1971
- /**
1972
- * @license EUPL-1.2
1973
- * Copyright (c) 2021 Robbert Broersma
1974
- */
1975
- .utrecht-table {
1976
- border-collapse: collapse;
1977
- border-color: var(--utrecht-table-border-color, 0);
1978
- border-style: solid;
1979
- border-width: var(--utrecht-table-border-width, 0);
1980
- font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
1981
- font-size: var(--utrecht-table-font-size, inherit);
1982
- width: 100%;
1983
- }
1984
-
1985
- .utrecht-table--distanced {
1986
- margin-block-end: var(--utrecht-table-margin-block-end);
1987
- margin-block-start: var(--utrecht-table-margin-block-start);
1988
- }
1989
-
1990
- .utrecht-table__caption {
1991
- color: var(--utrecht-table-caption-color);
1992
- font-family: var(--utrecht-table-caption-font-family);
1993
- font-size: var(--utrecht-table-caption-font-size);
1994
- font-weight: var(--utrecht-table-caption-font-weight);
1995
- line-height: var(--utrecht-table-caption-line-height);
1996
- margin-block-end: var(--utrecht-table-caption-margin-block-end);
1997
- text-align: var(--utrecht-table-caption-text-align, center);
1998
- }
1999
-
2000
- .utrecht-table__header {
2001
- color: var(--utrecht-table-header-color);
2002
- font-weight: var(--utrecht-table-header-font-weight);
2003
- text-transform: var(--utrecht-table-header-text-transform);
2004
- vertical-align: bottom;
2005
- }
2006
-
2007
- .utrecht-table__cell--last-header-row {
2008
- border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
2009
- border-block-end-style: solid;
2010
- border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
2011
- }
2012
-
2013
- .utrecht-table__body {
2014
- vertical-align: baseline;
2015
- }
2016
-
2017
- .utrecht-table__heading {
2018
- color: var(--utrecht-table-heading-color);
2019
- font-size: var(--utrecht-table-heading-font-size);
2020
- font-weight: var(--utrecht-table-heading-font-weight);
2021
- text-transform: var(--utrecht-table-heading-text-transform);
2022
- }
2023
-
2024
- .utrecht-table__cell {
2025
- border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
2026
- border-block-end-style: solid;
2027
- border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
2028
- line-height: var(--utrecht-table-cell-line-height, inherit);
2029
- padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
2030
- padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
2031
- padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
2032
- padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
2033
- text-align: start;
2034
- }
2035
-
2036
- .utrecht-table__cell--first {
2037
- padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
2038
- }
2039
-
2040
- .utrecht-table__cell--last {
2041
- padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
2042
- }
2043
-
2044
- .utrecht-table__cell--numeric {
2045
- /* stylelint-disable-next-line declaration-property-value-disallowed-list */
2046
- text-align: right;
2047
- }
2048
-
2049
- .utrecht-table__row--alternate-odd {
2050
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
2051
- color: var(--utrecht-table-row-alternate-odd-color);
2052
- }
2053
-
2054
- .utrecht-table__row--alternate-even {
2055
- background-color: var(--utrecht-table-row-alternate-even-background-color);
2056
- color: var(--utrecht-table-row-alternate-even-color);
2057
- }
2058
-
2059
- /**
2060
- * @license EUPL-1.2
2061
- * Copyright (c) 2021 Robbert Broersma
2062
- */
2063
- .utrecht-textarea {
2064
- background-color: var(--utrecht-textarea-background-color, var(--form-input-textarea-background-color));
2065
- border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
2066
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
2067
- border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
2068
- border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
2069
- border-style: solid;
2070
- color: var(--utrecht-textarea-color, var(--form-input-textarea-color));
2071
- font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
2072
- font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
2073
- max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
2074
- min-block-size: var(--utrecht-textarea-min-block-size);
2075
- padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
2076
- padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
2077
- padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
2078
- padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
2079
- resize: vertical;
2080
- width: 100%;
2081
- }
2082
-
2083
- .utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
2084
- 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))));
2085
- 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))));
2086
- 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))));
2087
- }
2088
-
2089
- .utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled {
2090
- 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))));
2091
- 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))));
2092
- color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2093
- cursor: var(--utrecht-action-disabled-cursor);
2094
- }
2095
-
2096
- .utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus {
2097
- background-color: var(--utrecht-focus-background-color);
2098
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2099
- color: var(--utrecht-focus-color, inherit);
2100
- outline-color: var(--utrecht-focus-outline-color, transparent);
2101
- outline-offset: 0;
2102
- outline-style: var(--utrecht-focus-outline-style, solid);
2103
- outline-width: var(--utrecht-focus-outline-width, 0);
2104
- 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))));
2105
- 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))));
2106
- color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2107
- }
2108
-
2109
- .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only {
2110
- 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))));
2111
- color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2112
- }
2113
-
2114
- .utrecht-textarea__placeholder, .utrecht-textarea--html-textarea::placeholder {
2115
- color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2116
- opacity: 100%;
2117
- }
2118
-
2119
- /**
2120
- * @license EUPL-1.2
2121
- * Copyright (c) 2021 Robbert Broersma
2122
- */
2123
- .utrecht-textbox {
2124
- background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
2125
- border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
2126
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
2127
- border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
2128
- border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
2129
- border-style: solid;
2130
- box-sizing: border-box;
2131
- color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
2132
- font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
2133
- font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
2134
- max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
2135
- padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
2136
- padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
2137
- padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
2138
- padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
2139
- width: 100%;
2140
- }
2141
-
2142
- .utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
2143
- 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))));
2144
- 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))));
2145
- 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))));
2146
- }
2147
-
2148
- .utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled {
2149
- 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))));
2150
- 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))));
2151
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2152
- cursor: var(--utrecht-action-disabled-cursor);
2153
- }
2154
-
2155
- .utrecht-textbox--focus, .utrecht-textbox--html-input:focus {
2156
- background-color: var(--utrecht-focus-background-color);
2157
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
2158
- color: var(--utrecht-focus-color, inherit);
2159
- outline-color: var(--utrecht-focus-outline-color, transparent);
2160
- outline-offset: 0;
2161
- outline-style: var(--utrecht-focus-outline-style, solid);
2162
- outline-width: var(--utrecht-focus-outline-width, 0);
2163
- 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))));
2164
- 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))));
2165
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2166
- }
2167
-
2168
- .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only {
2169
- 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))));
2170
- color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
2171
- }
2172
-
2173
- .utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder {
2174
- color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
2175
- opacity: 100%;
2176
- }
2177
-
2178
- /**
2179
- * @license EUPL-1.2
2180
- * Copyright (c) 2021 Robbert Broersma
2181
- * Copyright (c) 2021 Gemeente Utrecht
2182
- */
2183
- .utrecht-unordered-list {
2184
- font-family: var(--utrecht-document-font-family, inherit);
2185
- font-size: var(--utrecht-document-font-size, inherit);
2186
- line-height: var(--utrecht-document-line-height, inherit);
2187
- margin-block-end: 0;
2188
- margin-block-start: 0;
2189
- padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
2190
- }
2191
-
2192
- .utrecht-unordered-list--distanced {
2193
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
2194
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
2195
- }
2196
-
2197
- .utrecht-unordered-list--nested {
2198
- margin-block-end: 0;
2199
- margin-inline-start: 2ch;
2200
- }
2201
-
2202
- .utrecht-unordered-list__item {
2203
- margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
2204
- margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
2205
- padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
2206
- }
2207
-
2208
- .utrecht-unordered-list__item::marker,
2209
- .utrecht-unordered-list__marker {
2210
- color: var(--utrecht-unordered-list-marker-color);
2211
- content: "●";
2212
- }