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