@utrecht/component-library-css 1.0.0-alpha.31 → 1.0.0-alpha.310

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,1410 +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-style: normal;
42
- /* no inheritance */
43
- font-weight: var(--utrecht-badge-font-weight, bold);
44
- /* no inheritance */
45
- padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
46
- padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
47
- padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
48
- padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
49
- text-decoration: none;
50
- /* no inheritance */
51
- }
52
-
53
- /**
54
- * @license EUPL-1.2
55
- * Copyright (c) 2021 Robbert Broersma
56
- */
57
- /**
58
- * @license EUPL-1.2
59
- * Copyright (c) 2021 Robbert Broersma
60
- */
61
- .utrecht-badge, .utrecht-badge-status, .utrecht-badge-data {
62
- background-color: var(--utrecht-badge-background-color, black);
63
- border-radius: var(--utrecht-badge-border-radius, 0.5ch);
64
- color: var(--utrecht-badge-color, white);
65
- display: inline-block;
66
- font-family: var(--utrecht-document-font-family, sans-serif);
67
- font-style: normal;
68
- /* no inheritance */
69
- font-weight: var(--utrecht-badge-font-weight, bold);
70
- /* no inheritance */
71
- padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
72
- padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
73
- padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
74
- padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
75
- text-decoration: none;
76
- /* no inheritance */
77
- }
78
-
79
- .utrecht-badge-counter {
80
- background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, black));
81
- border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
82
- color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, white));
83
- display: inline-block;
84
- font-family: var(--utrecht-document-font-family, sans-serif);
85
- font-style: normal;
86
- /* no inheritance */
87
- font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
88
- /* no inheritance */
89
- padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
90
- padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
91
- padding-inline-end: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
92
- padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
93
- text-decoration: none;
94
- /* no inheritance */
95
- }
96
-
97
- /**
98
- * @license EUPL-1.2
99
- * Copyright (c) 2021 Robbert Broersma
100
- */
101
- /**
102
- * @license EUPL-1.2
103
- * Copyright (c) 2021 Robbert Broersma
104
- */
105
- .utrecht-badge, .utrecht-badge-status, .utrecht-badge-data {
106
- background-color: var(--utrecht-badge-background-color, black);
107
- border-radius: var(--utrecht-badge-border-radius, 0.5ch);
108
- color: var(--utrecht-badge-color, white);
109
- display: inline-block;
110
- font-family: var(--utrecht-document-font-family, sans-serif);
111
- font-style: normal;
112
- /* no inheritance */
113
- font-weight: var(--utrecht-badge-font-weight, bold);
114
- /* no inheritance */
115
- padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
116
- padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
117
- padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
118
- padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
119
- text-decoration: none;
120
- /* no inheritance */
121
- }
122
-
123
- .utrecht-badge-data {
124
- letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
125
- text-transform: var(--utrecht-badge-data-text-transform, inherit);
126
- }
127
-
128
- /**
129
- * @license EUPL-1.2
130
- * Copyright (c) 2021 Robbert Broersma
131
- */
132
- /**
133
- * @license EUPL-1.2
134
- * Copyright (c) 2021 Robbert Broersma
135
- */
136
- .utrecht-badge, .utrecht-badge-status, .utrecht-badge-data {
137
- background-color: var(--utrecht-badge-background-color, black);
138
- border-radius: var(--utrecht-badge-border-radius, 0.5ch);
139
- color: var(--utrecht-badge-color, white);
140
- display: inline-block;
141
- font-family: var(--utrecht-document-font-family, sans-serif);
142
- font-style: normal;
143
- /* no inheritance */
144
- font-weight: var(--utrecht-badge-font-weight, bold);
145
- /* no inheritance */
146
- padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
147
- padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
148
- padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
149
- padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
150
- text-decoration: none;
151
- /* no inheritance */
152
- }
153
-
154
- .utrecht-badge-status {
155
- letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
156
- text-transform: var(--utrecht-badge-status-text-transform, inherit);
157
- }
158
-
159
- .utrecht-badge-status--danger {
160
- background-color: var(--utrecht-feedback-danger-fill-background-color, red);
161
- color: var(--utrecht-feedback-danger-fill-color, white);
162
- }
163
-
164
- .utrecht-badge-status--warning {
165
- background-color: var(--utrecht-feedback-warning-fill-background-color, #ffa600);
166
- color: var(--utrecht-feedback-warning-fill-color, white);
167
- }
168
-
169
- .utrecht-badge-status--safe {
170
- background-color: var(--utrecht-feedback-safe-fill-background-color, green);
171
- color: var(--utrecht-feedback-safe-fill-color, white);
172
- }
173
-
174
- .utrecht-badge-status--valid {
175
- background-color: var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, red));
176
- color: var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white));
177
- }
178
-
179
- .utrecht-badge-status--invalid {
180
- background-color: var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));
181
- color: var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white));
182
- }
183
-
184
- .utrecht-badge-status--error {
185
- background-color: var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));
186
- color: var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white));
187
- }
188
-
189
- .utrecht-badge-status--success {
190
- background-color: var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));
191
- color: var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white));
192
- }
193
-
194
- .utrecht-badge-status--active {
195
- background-color: var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));
196
- color: var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white));
197
- }
198
-
199
- .utrecht-badge-status--inactive {
200
- background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));
201
- color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
202
- }
203
-
204
- /**
205
- * @license EUPL-1.2
206
- * Copyright (c) 2021 Robbert Broersma
207
- */
208
- .utrecht-blockquote {
209
- font-family: var(--utrecht-document-font-family);
210
- font-size: var(--utrecht-blockquote-font-size);
211
- }
212
-
213
- .utrecht-blockquote__attribution {
214
- color: var(--utrecht-blockquote-attribution-color, inherit);
215
- font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
216
- }
217
-
218
- .utrecht-blockquote__content {
219
- --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
220
- --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
221
- color: var(--utrecht-blockquote-content-color, inherit);
222
- font-size: var(--utrecht-blockquote-content-font-size, inherit);
223
- }
224
-
225
- .utrecht-blockquote--distanced {
226
- margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
227
- margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
228
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
229
- margin-block-end: var(--utrecht-blockquote-margin-block-end);
230
- }
231
-
232
- /**
233
- * @license EUPL-1.2
234
- * Copyright (c) 2021 Robbert Broersma
235
- */
236
- .utrecht-breadcrumb {
237
- --utrecht-focus-background-color: var(--utrecht-breadcrumb-link-focus-background-color);
238
- --utrecht-link-background-color: var(--utrecht-breadcrumb-link-background-color);
239
- --utrecht-link-color: var(--utrecht-breadcrumb-link-color);
240
- --utrecht-link-focus-color: var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));
241
- --utrecht-link-focus-text-decoration: var(--utrecht-link-text-decoration);
242
- --utrecht-link-hover-color: var(--utrecht-breadcrumb-link-color);
243
- --utrecht-link-hover-text-decoration: var(--utrecht-link-text-decoration);
244
- --utrecht-link-visited-color: var(--utrecht-breadcrumb-link-color);
245
- --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
246
- font-size: var(--utrecht-breadcrumb-font-size);
247
- font-family: var(--utrecht-document-font-family, inherit);
248
- text-transform: var(--utrecht-document-text-transform, inherit);
249
- }
250
-
251
- .utrecht-breadcrumb__list {
252
- display: flex;
253
- block-size: var(--utrecht-breadcrumb-block-size);
254
- }
255
-
256
- ol.utrecht-breadcrumb__list {
257
- list-style: none;
258
- margin-block-start: 0;
259
- margin-block-end: 0;
260
- padding-inline-start: 0;
261
- }
262
-
263
- .utrecht-breadcrumb__item {
264
- block-size: 100%;
265
- }
266
-
267
- .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
268
- margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
269
- }
270
-
271
- .utrecht-breadcrumb__link {
272
- background-color: var(--utrecht-breadcrumb-link-background-color);
273
- padding-block-start: var(--utrecht-breadcrumb-item-padding-block-start, 8px);
274
- padding-block-end: var(--utrecht-breadcrumb-item-padding-block-end, 8px);
275
- padding-inline-start: var(--utrecht-breadcrumb-item-padding-inline-start, 8px);
276
- padding-inline-end: var(--utrecht-breadcrumb-item-padding-inline-end, 8px);
277
- display: block;
278
- }
279
-
280
- /* stylelint-disable-next-line block-no-empty */
281
- .utrecht-breadcrumb--arrows {
282
- /* https://css-tricks.com/triangle-breadcrumbs/ */
283
- --utrecht-breadcrumb-arrow-size: 24px;
284
- overflow: hidden;
285
- }
286
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
287
- padding-inline-start: calc( var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size) );
288
- }
289
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link {
290
- position: relative;
291
- padding-inline-end: 0;
292
- }
293
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
294
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
295
- border-block-end-width: var(--utrecht-breadcrumb-block-size);
296
- border-block-start-width: var(--utrecht-breadcrumb-block-size);
297
- border-color: transparent;
298
- border-style: solid;
299
- content: " ";
300
- display: block;
301
- height: 0;
302
- left: 100%;
303
- margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
304
- position: absolute;
305
- top: 50%;
306
- width: 0;
307
- }
308
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
309
- border-inline-start-color: var(--utrecht-breadcrumb-link-background-color);
310
- border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
311
- z-index: 2;
312
- }
313
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
314
- border-inline-start-color: var(--utrecht-document-background-color);
315
- border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
316
- margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
317
- margin-inline-start: 1px;
318
- z-index: 1;
319
- }
320
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,
321
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after {
322
- border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
323
- }
324
-
325
- /**
326
- * @license EUPL-1.2
327
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
328
- * Copyright (c) 2021 Gemeente Utrecht
329
- */
330
- .utrecht-button {
331
- color: var(--utrecht-button-primary-action-color);
332
- font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
333
- font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
334
- background-color: var(--utrecht-button-primary-action-background-color);
335
- border-radius: var(--utrecht-button-border-radius);
336
- border-width: var(--utrecht-button-border-width);
337
- padding-inline-start: var(--utrecht-button-padding-inline-start);
338
- padding-inline-end: var(--utrecht-button-padding-inline-end);
339
- padding-block-start: var(--utrecht-button-padding-block-start);
340
- padding-block-end: var(--utrecht-button-padding-block-end);
341
- }
342
-
343
- .utrecht-button--distanced {
344
- margin-inline-start: var(--utrecht-button-margin-inline-start);
345
- margin-inline-end: var(--utrecht-button-margin-inline-end);
346
- margin-block-start: var(--utrecht-button-margin-block-start);
347
- margin-block-end: var(--utrecht-button-margin-block-end);
348
- }
349
-
350
- .utrecht-button:disabled,
351
- .utrecht-button--disabled {
352
- color: var(--utrecht-button-disabled-color);
353
- background-color: var(--utrecht-button-disabled-background-color);
354
- }
355
-
356
- .utrecht-button--focus,
357
- .utrecht-button:not(.utrecht-button--disabled):focus {
358
- outline-width: var(--utrecht-focus-outline-width, 0);
359
- outline-style: var(--utrecht-focus-outline-style, solid);
360
- outline-color: var(--utrecht-focus-outline-color, transparent);
361
- color: var(--utrecht-focus-color, inherit);
362
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
363
- outline-offset: 0;
364
- background-color: var(--utrecht-focus-background-color);
365
- }
366
-
367
- .utrecht-button--hover:not(:disabled),
368
- .utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
369
- color: var(--utrecht-button-primary-action-color);
370
- background-color: var(--utrecht-button-primary-action-hover-background-color);
371
- transform: scale(var(--utrecht-button-focus-transform-scale, 1));
372
- }
373
-
374
- /**
375
- * @license EUPL-1.2
376
- * Copyright (c) 2021 Robbert Broersma
377
- */
378
- .utrecht-checkbox {
379
- /* reset native margin for input[type="checkbox"] */
380
- margin-block-start: 0;
381
- margin-block-end: 0;
382
- margin-inline-start: 0;
383
- margin-inline-end: 0;
384
- }
385
-
386
- /**
387
- * @license EUPL-1.2
388
- * Copyright (c) 2021 Robbert Broersma
389
- */
390
- .utrecht-document {
391
- background-color: var(--utrecht-document-background-color, inherit);
392
- color: var(--utrecht-document-color, inherit);
393
- font-family: var(--utrecht-document-font-family, inherit);
394
- font-size: var(--utrecht-document-font-size, inherit);
395
- line-height: var(--utrecht-document-line-height, inherit);
396
- }
397
-
398
- /**
399
- * @license EUPL-1.2
400
- * Copyright (c) 2021 Robbert Broersma
401
- */
402
- .utrecht-emphasis--stressed {
403
- font-style: var(--utrecht-emphasis-stressed-font-style, italic);
404
- }
405
-
406
- .utrecht-emphasis--strong {
407
- font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
408
- }
409
-
410
- /**
411
- * @license EUPL-1.2
412
- * Copyright (c) 2021 Robbert Broersma
413
- */
414
- .utrecht-form-field-checkbox {
415
- font-family: var(--utrecht-document-font-family, inherit);
416
- }
417
-
418
- .utrecht-form-field-checkbox--distanced {
419
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
420
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
421
- }
422
-
423
- .utrecht-form-field-checkbox__label {
424
- margin-inline-start: 1ch;
425
- }
426
-
427
- /**
428
- * @license EUPL-1.2
429
- * Copyright (c) 2021 Robbert Broersma
430
- */
431
- .utrecht-form-field-radio {
432
- font-size: var(--utrecht-paragraph-font-size);
433
- font-family: var(--utrecht-document-font-family, inherit);
434
- }
435
-
436
- .utrecht-form-field-radio--distanced {
437
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
438
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
439
- }
440
-
441
- .utrecht-form-field-radio__label {
442
- margin-inline-start: 1ch;
443
- }
444
-
445
- /**
446
- * @license EUPL-1.2
447
- * Copyright (c) 2021 Robbert Broersma
448
- */
449
- .utrecht-form-field-radio-group {
450
- font-size: var(--utrecht-paragraph-font-size);
451
- font-family: var(--utrecht-document-font-family, inherit);
452
- }
453
-
454
- .utrecht-form-field-radio-group--distanced {
455
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
456
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
457
- }
458
-
459
- .utrecht-form-field-radio-group__label {
460
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
461
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
462
- }
463
-
464
- /**
465
- * @license EUPL-1.2
466
- * Copyright (c) 2021 Robbert Broersma
467
- */
468
- .utrecht-form-fieldset--distanced {
469
- margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
470
- margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
471
- }
472
-
473
- .utrecht-form-fieldset__legend {
474
- font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
475
- font-size: var(--utrecht-form-fieldset-legend-font-size);
476
- font-weight: var(--utrecht-form-fieldset-legend-font-weight);
477
- line-height: var(--utrecht-form-fieldset-legend-line-height);
478
- color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
479
- }
480
-
481
- .utrecht-form-fieldset__legend--distanced {
482
- margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
483
- margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
484
- }
485
-
486
- /**
487
- * @license EUPL-1.2
488
- * Copyright (c) 2021 Robbert Broersma
489
- */
490
- .utrecht-form-label {
491
- font-weight: var(--utrecht-form-label-font-weight);
492
- font-size: var(--utrecht-form-label-font-size);
493
- }
494
-
495
- .utrecht-form-label--checkbox {
496
- font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
497
- }
498
-
499
- .utrecht-form-label--radio {
500
- font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
501
- }
502
-
503
- /**
504
- * @license EUPL-1.2
505
- * Copyright (c) 2021 Gemeente Utrecht
506
- * Copyright (c) 2021 Robbert Broersma
507
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
508
- */
509
- .utrecht-heading-1 {
510
- font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
511
- font-size: var(--utrecht-heading-1-font-size);
512
- font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
513
- letter-spacing: var(--utrecht-heading-1-letter-spacing);
514
- line-height: var(--utrecht-heading-1-line-height);
515
- text-transform: var(--utrecht-heading-1-text-transform, inherit);
516
- color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
517
- }
518
-
519
- .utrecht-heading-1--distanced {
520
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
521
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
522
- }
523
-
524
- .utrecht-heading-2 {
525
- font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
526
- font-size: var(--utrecht-heading-2-font-size);
527
- font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
528
- letter-spacing: var(--utrecht-heading-2-letter-spacing);
529
- line-height: var(--utrecht-heading-2-line-height);
530
- text-transform: var(--utrecht-heading-2-text-transform, inherit);
531
- color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
532
- }
533
-
534
- .utrecht-heading-2--distanced {
535
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
536
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
537
- }
538
-
539
- .utrecht-heading-3 {
540
- font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
541
- font-size: var(--utrecht-heading-3-font-size);
542
- font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
543
- letter-spacing: var(--utrecht-heading-3-letter-spacing);
544
- line-height: var(--utrecht-heading-3-line-height);
545
- text-transform: var(--utrecht-heading-3-text-transform, inherit);
546
- color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
547
- }
548
-
549
- .utrecht-heading-3--distanced {
550
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
551
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
552
- }
553
-
554
- .utrecht-heading-4 {
555
- font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
556
- font-size: var(--utrecht-heading-4-font-size);
557
- font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
558
- letter-spacing: var(--utrecht-heading-4-letter-spacing);
559
- line-height: var(--utrecht-heading-4-line-height);
560
- text-transform: var(--utrecht-heading-4-text-transform, inherit);
561
- color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
562
- }
563
-
564
- .utrecht-heading-4--distanced {
565
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
566
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
567
- }
568
-
569
- .utrecht-heading-5 {
570
- font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
571
- font-size: var(--utrecht-heading-5-font-size);
572
- font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
573
- letter-spacing: var(--utrecht-heading-5-letter-spacing);
574
- line-height: var(--utrecht-heading-5-line-height);
575
- text-transform: var(--utrecht-heading-5-text-transform, inherit);
576
- color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
577
- }
578
-
579
- .utrecht-heading-5--distanced {
580
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
581
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
582
- }
583
-
584
- .utrecht-heading-6 {
585
- font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
586
- font-size: var(--utrecht-heading-6-font-size);
587
- font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
588
- letter-spacing: var(--utrecht-heading-6-letter-spacing);
589
- line-height: var(--utrecht-heading-6-line-height);
590
- text-transform: var(--utrecht-heading-6-text-transform, inherit);
591
- color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
592
- }
593
-
594
- .utrecht-heading-6--distanced {
595
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
596
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
597
- }
598
-
599
- /**
600
- * @license EUPL-1.2
601
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
602
- * Copyright (c) 2021 Gemeente Utrecht
603
- */
604
- .utrecht-link {
605
- text-decoration: var(--utrecht-link-text-decoration, underline);
606
- color: var(--utrecht-link-color, blue);
607
- }
608
-
609
- .utrecht-link:visited,
610
- .utrecht-link--visited {
611
- color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
612
- }
613
-
614
- .utrecht-link:hover,
615
- .utrecht-link--hover {
616
- color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
617
- text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
618
- }
619
-
620
- .utrecht-link:active,
621
- .utrecht-link--active {
622
- color: var(--utrecht-link-active-color, var(--utrecht-link-color));
623
- }
624
-
625
- .utrecht-link:focus,
626
- .utrecht-link--focus {
627
- color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
628
- text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
629
- outline-width: var(--utrecht-focus-outline-width, 0);
630
- outline-style: var(--utrecht-focus-outline-style, solid);
631
- outline-color: var(--utrecht-focus-outline-color, transparent);
632
- color: var(--utrecht-focus-color, inherit);
633
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
634
- outline-offset: 0;
635
- background-color: var(--utrecht-focus-background-color);
636
- }
637
-
638
- /* stylelint-disable-next-line block-no-empty */
639
- .utrecht-link--telephone {
640
- white-space: nowrap;
641
- }
642
-
643
- /**
644
- * @license EUPL-1.2
645
- * Copyright (c) 2021 Gemeente Utrecht
646
- */
647
- .utrecht-mapcontrolbutton {
648
- color: var(--utrecht-mapcontrolbutton-color);
649
- border-color: var(--utrecht-mapcontrolbutton-border-color);
650
- background-color: var(--utrecht-mapcontrolbutton-background-color);
651
- border-radius: var(--utrecht-mapcontrolbutton-border-radius);
652
- border-width: var(--utrecht-mapcontrolbutton-border-width);
653
- border-style: var(--utrecht-mapcontrolbutton-border-style);
654
- width: var(--utrecht-mapcontrolbutton-width);
655
- height: var(--utrecht-mapcontrolbutton-height);
656
- display: flex;
657
- flex-direction: column;
658
- align-items: center;
659
- justify-content: center;
660
- }
661
-
662
- .utrecht-mapcontrolbutton .utrecht-mapcontrolbutton-polygon {
663
- fill: var(--utrecht-mapcontrolbutton-color);
664
- }
665
-
666
- .utrecht-mapcontrolbutton:disabled,
667
- .utrecht-mapcontrolbutton--disabled {
668
- color: var(--utrecht-mapcontrolbutton-disabled-color);
669
- background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
670
- border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
671
- }
672
-
673
- .utrecht-mapcontrolbutton--disabled .utrecht-mapcontrolbutton-polygon {
674
- fill: var(--utrecht-mapcontrolbutton-disabled-color);
675
- }
676
-
677
- .utrecht-mapcontrolbutton--focus,
678
- .utrecht-mapcontrolbutton:not(.utrecht-mapcontrolbutton--disabled):focus {
679
- outline-width: var(--utrecht-focus-outline-width, 0);
680
- outline-style: var(--utrecht-focus-outline-style, solid);
681
- outline-color: var(--utrecht-focus-outline-color, transparent);
682
- color: var(--utrecht-focus-color, inherit);
683
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
684
- outline-offset: 0;
685
- background-color: var(--utrecht-focus-background-color);
686
- }
687
-
688
- .utrecht-mapcontrolbutton--focus .utrecht-mapcontrolbutton-polygon {
689
- fill: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
690
- }
691
-
692
- .utrecht-mapcontrolbutton--hover:not(:disabled),
693
- .utrecht-mapcontrolbutton:hover:not(:disabled):not(.utrecht-mapcontrolbutton--disabled) {
694
- color: var(--utrecht-mapcontrolbutton-color);
695
- background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
696
- }
697
-
698
- .utrecht-mapcontrolbutton--hover .utrecht-mapcontrolbutton-polygon {
699
- fill: var(--utrecht-mapcontrolbutton-color);
700
- }
701
-
702
- .utrecht-menulijst {
703
- border-top: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
704
- border-bottom: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
705
- font-family: var(--document-font-family);
706
- padding-block-start: var(--utrecht-space-block-sm);
707
- padding-block-end: var(--utrecht-space-block-sm);
708
- padding-inline-start: 0;
709
- }
710
-
711
- .utrecht-menulijst__item {
712
- margin-block-start: var(--utrecht-space-block-sm);
713
- margin-block-end: var(--utrecht-space-block-sm);
714
- list-style: none;
715
- }
716
-
717
- .utrecht-menulijst__item a:link {
718
- display: block;
719
- color: var(--utrecht-menulijst-item-color, var(--utrecht-link-color, blue));
720
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
721
- background-image: url("./pijltje.svg");
722
- background-repeat: no-repeat;
723
- background-position: 0 0.25em;
724
- padding-inline-start: var(--utrecht-space-block-md);
725
- text-decoration: none;
726
- }
727
-
728
- .utrecht-menulijst__item a:hover {
729
- color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
730
- }
731
-
732
- .utrecht-menulijst__link--focus {
733
- outline-width: var(--utrecht-focus-outline-width, 0);
734
- outline-style: var(--utrecht-focus-outline-style, solid);
735
- outline-color: var(--utrecht-focus-outline-color, transparent);
736
- color: var(--utrecht-focus-color, inherit);
737
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
738
- outline-offset: 0;
739
- background-color: var(--utrecht-focus-background-color);
740
- }
741
-
742
- /**
743
- * @license EUPL-1.2
744
- * Copyright (c) 2021 Gemeente Utrecht
745
- * Copyright (c) 2021 A Herring
746
- */
747
- /**
748
- * @license EUPL-1.2
749
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
750
- * Copyright (c) 2021 Gemeente Utrecht
751
- */
752
- .utrecht-navhtml {
753
- font-family: var(--utrecht-font-family-sans-serif);
754
- }
755
-
756
- .utrecht-sidenav {
757
- padding-block-start: 0;
758
- padding-block-end: 0;
759
- margin-block-start: 0;
760
- margin-block-end: 0;
761
- width: 13rem;
762
- border-block-start: 1px solid var(--utrecht-color-grey-80);
763
- border-block-end: 1px solid var(--utrecht-color-grey-80);
764
- }
765
-
766
- .utrecht-sidenav__list {
767
- padding-block-start: 0;
768
- padding-block-end: 0;
769
- margin-block-start: 0.2rem;
770
- margin-block-end: 0;
771
- padding-inline-start: 0;
772
- }
773
-
774
- .utrecht-sidenav__list ul {
775
- padding-block-start: 0;
776
- padding-block-end: 0;
777
- margin-block-end: 0;
778
- padding-inline-start: 1.2rem;
779
- }
780
-
781
- .utrecht-sidenav__item,
782
- .utrecht-sidenav__sibling__item {
783
- list-style: none;
784
- position: relative;
785
- margin-inline-start: 0;
786
- }
787
-
788
- .utrecht-sidenav__item:last-child {
789
- border-block-end: none;
790
- }
791
-
792
- /*draw the li item box bottom line*/
793
- .utrecht-sidenav__item span:not(.utrecht-sidenav__item:last-child span, .utrecht-sidenav__item--has-children span:first-of-type) {
794
- display: block;
795
- border-block-end: 1px solid var(--utrecht-color-grey-80);
796
- margin-inline-start: var(--utrecht-space-inline-sm);
797
- }
798
-
799
- /*Remove bottom padding form first item in list with children*/
800
- .utrecht-sidenav__item .utrecht-sidenav__link--has-children {
801
- padding-block-end: 0;
802
- }
803
-
804
- .utrecht-sidenav__child__item {
805
- list-style: none;
806
- }
807
-
808
- .utrecht-sidenav__link,
809
- .utrecht-sidenav__link--sibling {
810
- display: block;
811
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
812
- padding-block-start: var(--utrecht-space-block-xs);
813
- padding-block-end: var(--utrecht-space-block-xs);
814
- padding-inline-start: var(--utrecht-space-inline-lg);
815
- padding-inline-end: var(--utrecht-space-inline-3xs);
816
- margin-inline-start: 0;
817
- text-decoration: none;
818
- }
819
-
820
- /*How to select the parent of the nestsed UL to remove the bottom padding of te link item*/
821
- .utrecht-sidenav__link--child,
822
- .utrecht-sidenav__link--child--current {
823
- display: block;
824
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
825
- text-decoration: none;
826
- padding-block-start: var(--utrecht-space-block-2xs);
827
- padding-block-end: var(--utrecht-space-block-2xs);
828
- padding-inline-start: var(--utrecht-space-inline-lg);
829
- padding-inline-end: var(--utrecht-space-inline-3xs);
830
- margin-block-start: 0;
831
- margin-block-end: 0;
832
- }
833
-
834
- /*Dot for link with siblings */
835
- .utrecht-sidenav__link::before,
836
- .utrecht-sidenav__link--sibling::before,
837
- .utrecht-sidenav__item:last-child .utrecht-sidenav__link--current::before {
838
- overflow: hidden;
839
- position: absolute;
840
- top: 20px;
841
- /*Hard value?*/
842
- transform: translateY(-50%) translateX(-2.5ch);
843
- content: "";
844
- width: 8px;
845
- height: 8px;
846
- border-radius: 100%;
847
- z-index: 10;
848
- box-shadow: 0 0 2px 2px #fff;
849
- /*Make var*/
850
- }
851
-
852
- .utrecht-sidenav__link::before,
853
- .utrecht-sidenav__link--sibling::before {
854
- background-color: var(--utrecht-sidenav-item-marker-color);
855
- }
856
-
857
- .utrecht-sidenav__link::before,
858
- .utrecht-sidenav__link--sibling::before {
859
- left: 26px;
860
- }
861
-
862
- /*Little fix to move the dot to the right*/
863
- .utrecht-sidenav__link--current::before {
864
- left: 27px;
865
- }
866
-
867
- /* Hover layout for mousover on sidenav__link */
868
- .utrecht-sidenav__link:hover::before,
869
- .utrecht-sidenav__link--sibling:hover::before {
870
- background-color: var(--utrecht-sidenav-link-hover-color);
871
- }
872
-
873
- .utrecht-sidenav__item a:hover {
874
- color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
875
- text-decoration: underline;
876
- }
877
-
878
- .utrecht-sidenav__item--current {
879
- color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
880
- }
881
-
882
- /* Draw metro connection lines on sidenav link items */
883
- .utrecht-sidenav__link::after,
884
- .utrecht-sidenav__item:last-child .utrecht-sidenav__link::after {
885
- display: block;
886
- content: "";
887
- overflow: hidden;
888
- width: 3px;
889
- background: var(--utrecht-sidenav-item-marker-color);
890
- position: absolute;
891
- left: 3px;
892
- top: -22px;
893
- /* min-height: 100%;
894
- height: calc(100% + 2px);*/
895
- bottom: 0;
896
- z-index: 5;
897
- }
898
-
899
- /* Draw short metro connection lines on sidenav child link items */
900
- .utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,
901
- .utrecht-sidenav__link--current::after,
902
- .utrecht-sidenav__item--has-children a::after {
903
- min-height: 38px;
904
- height: calc(38px + 2px);
905
- }
906
-
907
- /* Remove first metro line in listing*/
908
- .utrecht-sidenav__item:first-child .utrecht-sidenav__link::after {
909
- content: "";
910
- display: none;
911
- }
912
-
913
- /* Make current link bold */
914
- .utrecht-sidenav__link--current,
915
- .utrecht-sidenav__link--child--current {
916
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
917
- }
918
-
919
- .utrecht-sidenav__list--child {
920
- margin-block-start: 0;
921
- margin-block-end: 0;
922
- padding-block-start: 0;
923
- padding-block-end: 0;
924
- padding-inline-start: 1.4rem;
925
- padding-inline-end: 0;
926
- }
927
-
928
- .utrecht-sidenav__item--child {
929
- list-style: none;
930
- position: relative;
931
- border: none;
932
- }
933
-
934
- /*No last border on child item*/
935
- .utrecht-sidenav__item--child:last-child {
936
- border: none;
937
- }
938
-
939
- /* Add dot bullets on child links */
940
- .utrecht-sidenav__link--child::before,
941
- .utrecht-sidenav__link--child--current::before {
942
- overflow: hidden;
943
- position: absolute;
944
- top: 16px;
945
- left: 1.2rem;
946
- transform: translateY(-50%) translateX(-19.5px);
947
- content: "";
948
- width: 4px;
949
- height: 4px;
950
- border-radius: 100%;
951
- border: 2px solid var(--utrecht-sidenav-link-color);
952
- z-index: 10;
953
- }
954
-
955
- .utrecht-sidenav__link--child::before {
956
- background-color: transparent;
957
- }
958
-
959
- /* Make current marker dots bold */
960
- .utrecht-sidenav__link--current::before,
961
- .utrecht-sidenav__link--child--current::before {
962
- background-color: var(--utrecht-sidenav-link-hover-color);
963
- }
964
-
965
- /* Hover layout for mousover on child__link */
966
- .utrecht-sidenav__link--child:hover::before {
967
- background-color: var(--utrecht-sidenav-link-hover-color);
968
- border: 2px solid var(--utrecht-sidenav-link-hover-color);
969
- }
970
-
971
- /* remove :after lines in child and sibling links */
972
- .utrecht-sidenav__item--child:first-child .utrecht-sidenav__link--child--current::after,
973
- .utrecht-sidenav__link--child::after,
974
- .utrecht-sidenav__item .utrecht-sidenav__item--child .utrecht-sidenav__link--child::after,
975
- .utrecht-sidenav__item .utrecht-sidenav__link--sibling::after,
976
- .utrecht-sidenav__item--sibling:last-child .utrecht-sidenav__link--sibling::after {
977
- display: none;
978
- }
979
-
980
- .utrecht-sidenav__link:focus,
981
- .utrecht-sidenav__link--focus {
982
- outline-width: var(--utrecht-focus-outline-width, 0);
983
- outline-style: var(--utrecht-focus-outline-style, solid);
984
- outline-color: var(--utrecht-focus-outline-color, transparent);
985
- color: var(--utrecht-focus-color, inherit);
986
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
987
- outline-offset: 0;
988
- background-color: var(--utrecht-focus-background-color);
989
- }
990
-
991
- /**
992
- * @license EUPL-1.2
993
- * Copyright (c) 2021 Gemeente Utrecht
994
- * Copyright (c) 2021 A Herring
995
- */
996
- .utrecht-navhtml {
997
- font-family: var(--utrecht-font-family-sans-serif);
998
- }
999
-
1000
- .utrecht-topnav__list {
1001
- list-style: none;
1002
- list-style-image: none;
1003
- overflow: visible;
1004
- display: flex;
1005
- justify-content: space-between;
1006
- background-color: var(--utrecht-topnav-list-background-color);
1007
- padding-inline-start: 0;
1008
- padding-inline-end: 0;
1009
- padding-block-start: 0;
1010
- padding-block-end: 0;
1011
- margin-block-start: 0;
1012
- margin-block-end: 0;
1013
- }
1014
-
1015
- .utrecht-topnav__item {
1016
- flex: 1 0 auto;
1017
- border-inline-end: 1px solid var(--utrecht-topnav-list-border-color);
1018
- text-align: center;
1019
- margin-inline-start: 0;
1020
- }
1021
-
1022
- .utrecht-topnav__item li:first-child {
1023
- border-inline-start: 1px solid var(--utrecht-topnav-list-border-color);
1024
- padding-inline-start: 0;
1025
- }
1026
-
1027
- .utrecht-topnav__link {
1028
- color: var(--utrecht-topnav-link-color);
1029
- text-decoration: none;
1030
- display: block;
1031
- padding-block-start: 1rem;
1032
- padding-block-end: 1rem;
1033
- }
1034
-
1035
- .utrecht-topnav__link:hover {
1036
- text-decoration: underline;
1037
- background-color: var(--utrecht-topnav-link-hover-background-color);
1038
- color: var(--utrecht-topnav-link-color);
1039
- }
1040
-
1041
- .utrecht-topnav__link--current {
1042
- text-decoration: underline;
1043
- background-color: var(--utrecht-topnav-list-background-active);
1044
- }
1045
-
1046
- .utrecht-topnav__link:focus,
1047
- .utrecht-topnav__link--focus {
1048
- outline-width: var(--utrecht-focus-outline-width, 0);
1049
- outline-style: var(--utrecht-focus-outline-style, solid);
1050
- outline-color: var(--utrecht-focus-outline-color, transparent);
1051
- color: var(--utrecht-focus-color, inherit);
1052
- box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1053
- outline-offset: 0;
1054
- background-color: var(--utrecht-focus-background-color);
1055
- color: var(--utrecht-topnav-link-color);
1056
- }
1057
-
1058
- /**
1059
- * @license EUPL-1.2
1060
- * Copyright (c) 2021 Gemeente Utrecht
1061
- * Copyright (c) 2021 A Herring
1062
- */
1063
- .utrecht-navhtml {
1064
- font-family: var(--utrecht-font-family-sans-serif);
1065
- }
1066
-
1067
- .utrecht-topnav__list {
1068
- list-style: none;
1069
- list-style-image: none;
1070
- overflow: visible;
1071
- display: flex;
1072
- justify-content: space-between;
1073
- background-color: var(--utrecht-topnav-list-background-color);
1074
- padding-inline-start: 0;
1075
- padding-inline-end: 0;
1076
- padding-block-start: 0;
1077
- padding-block-end: 0;
1078
- margin-block-start: 0;
1079
- margin-block-end: 0;
1080
- }
1081
-
1082
- .utrecht-topnav__item {
1083
- flex: 1 0 auto;
1084
- border-inline-end: 1px solid var(--utrecht-topnav-list-border-color);
1085
- text-align: center;
1086
- margin-inline-start: 0;
1087
- }
1088
-
1089
- .utrecht-topnav__item li:first-child {
1090
- border-inline-start: 1px solid var(--utrecht-topnav-list-border-color);
1091
- padding-inline-start: 0;
1092
- }
1093
-
1094
- .utrecht-topnav__link {
1095
- color: var(--utrecht-topnav-link-color);
1096
- text-decoration: none;
1097
- display: block;
1098
- padding-block-start: 1rem;
1099
- padding-block-end: 1rem;
1100
- }
1101
-
1102
- .utrecht-topnav__link:hover {
1103
- text-decoration: underline;
1104
- background-color: var(--utrecht-topnav-link-hover-background-color);
1105
- color: var(--utrecht-topnav-link-color);
1106
- }
1107
-
1108
- .utrecht-topnav__link--current {
1109
- text-decoration: underline;
1110
- background-color: var(--utrecht-topnav-list-background-active);
1111
- }
1112
-
1113
- .utrecht-topnav__link--focus {
1114
- outline: 2px var(--utrecht-topnav-link-focus-border-type) var(--utrecht-topnav-link-focus-outline-color);
1115
- color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
1116
- /*-webkit-box-shadow: 0 0 0 2px var(--utrecht-link-focus-box-shadow-color);*/
1117
- box-shadow: 0 0 0 2px var(--utrecht-topnav-link-focus-box-shadow-color);
1118
- outline-offset: 0;
1119
- text-decoration: var(--utrecht-topnav-link-focus-text-decoration, var(--utrecht-topnav-link-text-decoration, underline));
1120
- background-color: var(--utrecht-topnav-link-focus-background-color);
1121
- /*#ffd633*/
1122
- }
1123
-
1124
- /**
1125
- * @license EUPL-1.2
1126
- * Copyright (c) 2021 Robbert Broersma
1127
- * Copyright (c) 2021 Gemeente Utrecht
1128
- */
1129
- .utrecht-ordered-list {
1130
- font-family: var(--utrecht-document-font-family, inherit);
1131
- }
1132
-
1133
- .utrecht-ordered-list--distanced {
1134
- margin-block-end: var(--utrecht-ordered-list-margin-block-end);
1135
- margin-block-start: var(--utrecht-ordered-list-margin-block-start);
1136
- }
1137
-
1138
- .utrecht-ordered-list__item {
1139
- margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
1140
- margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
1141
- }
1142
-
1143
- /**
1144
- * @license EUPL-1.2
1145
- * Copyright (c) 2021 Gemeente Utrecht
1146
- * Copyright (c) 2021 Robbert Broersma
1147
- */
1148
- .utrecht-page-footer {
1149
- font-family: var(--utrecht-document-font-family);
1150
- font-size: var(--utrecht-document-font-size);
1151
- background-color: var(--utrecht-page-footer-background-color);
1152
- background-image: var(--utrecht-page-footer-background-image);
1153
- color: var(--utrecht-page-footer-color);
1154
- padding-block-start: var(--utrecht-page-footer-padding-block-start);
1155
- padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
1156
- padding-block-end: var(--utrecht-page-footer-padding-block-end);
1157
- padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
1158
- --utrecht-document-color: currentColor;
1159
- --utrecht-heading-color: currentColor;
1160
- --utrecht-link-color: currentColor;
1161
- --utrecht-link-focus-color: currentColor;
1162
- --utrecht-link-hover-color: currentColor;
1163
- --utrecht-link-active-color: currentColor;
1164
- --utrecht-link-visited-color: currentColor;
1165
- }
1166
-
1167
- .utrecht-page-footer__address--reset-address {
1168
- /* reset <address> */
1169
- font-style: inherit;
1170
- margin-block-start: 0;
1171
- margin-block-end: 0;
1172
- }
1173
-
1174
- /**
1175
- * @license EUPL-1.2
1176
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1177
- */
1178
- .utrecht-paragraph {
1179
- color: var(--utrecht-document-color, inherit);
1180
- font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
1181
- font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
1182
- font-weight: var(--utrecht-paragraph-font-weight, inherit);
1183
- line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
1184
- }
1185
-
1186
- .utrecht-paragraph--lead {
1187
- font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1188
- font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1189
- line-height: var(--utrecht-paragraph-lead-line-height, inherit);
1190
- }
1191
-
1192
- .utrecht-paragraph--distanced {
1193
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
1194
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
1195
- }
1196
-
1197
- /**
1198
- * @license EUPL-1.2
1199
- * Copyright (c) 2021 Gemeente Utrecht
1200
- */
1201
- .utrecht-radio-button {
1202
- /* reset native margin for input[type="radio"] */
1203
- margin-block-start: 0;
1204
- margin-block-end: 0;
1205
- margin-inline-start: 0;
1206
- margin-inline-end: 0;
1207
- }
1208
-
1209
- /**
1210
- * @license EUPL-1.2
1211
- * Copyright (c) 2021 Gemeente Utrecht
1212
- * Copyright (c) 2021 Robbert Broersma
1213
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1214
- */
1215
- .utrecht-separator {
1216
- border-style: solid;
1217
- border-color: var(--utrecht-separator-color);
1218
- border-width: 0 0 var(--utrecht-separator-width) 0;
1219
- margin-block-start: var(--utrecht-separator-margin-block-start);
1220
- margin-block-end: var(--utrecht-separator-margin-block-end);
1221
- }
1222
-
1223
- /**
1224
- * @license EUPL-1.2
1225
- * Copyright (c) 2021 Robbert Broersma
1226
- */
1227
- .utrecht-table {
1228
- border-collapse: collapse;
1229
- width: 100%;
1230
- }
1231
-
1232
- .utrecht-table--distanced {
1233
- margin-block-end: var(--utrecht-table-margin-block-end);
1234
- margin-block-start: var(--utrecht-table-margin-block-start);
1235
- }
1236
-
1237
- .utrecht-table__caption {
1238
- font-weight: var(--utrecht-table-caption-font-weight);
1239
- font-family: var(--utrecht-table-caption-font-family);
1240
- font-size: var(--utrecht-table-caption-font-size);
1241
- color: var(--utrecht-table-caption-color);
1242
- line-height: var(--utrecht-table-caption-line-height);
1243
- margin-block-end: var(--utrecht-table-caption-margin-block-end);
1244
- text-align: var(--utrecht-table-caption-text-align, center);
1245
- }
1246
-
1247
- .utrecht-table__header {
1248
- font-weight: var(--utrecht-table-header-font-weight);
1249
- color: var(--utrecht-table-header-color);
1250
- text-transform: var(--utrecht-table-header-text-transform);
1251
- vertical-align: bottom;
1252
- }
1253
-
1254
- .utrecht-table__cell--last-header-row {
1255
- border-block-end-style: solid;
1256
- border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
1257
- border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
1258
- }
1259
-
1260
- .utrecht-table__body {
1261
- vertical-align: baseline;
1262
- }
1263
-
1264
- .utrecht-table__heading {
1265
- font-weight: var(--utrecht-table-heading-font-weight);
1266
- color: var(--utrecht-table-heading-color);
1267
- text-transform: var(--utrecht-table-heading-text-transform);
1268
- }
1269
-
1270
- .utrecht-table__cell {
1271
- border-block-end-style: solid;
1272
- border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
1273
- border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
1274
- line-height: var(--utrecht-table-cell-line-height, inherit);
1275
- padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
1276
- padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
1277
- padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
1278
- padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
1279
- text-align: start;
1280
- }
1281
-
1282
- .utrecht-table__cell--first {
1283
- padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
1284
- }
1285
-
1286
- .utrecht-table__cell--last {
1287
- padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
1288
- }
1289
-
1290
- .utrecht-table__cell--numeric {
1291
- /* stylelint-disable-next-line declaration-property-value-disallowed-list */
1292
- text-align: right;
1293
- }
1294
-
1295
- .utrecht-table__row--alternate-odd {
1296
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
1297
- color: var(--utrecht-table-row-alternate-odd-color);
1298
- }
1299
-
1300
- .utrecht-table__row--alternate-even {
1301
- background-color: var(--utrecht-table-row-alternate-even-background-color);
1302
- color: var(--utrecht-table-row-alternate-even-color);
1303
- }
1304
-
1305
- /**
1306
- * @license EUPL-1.2
1307
- * Copyright (c) 2021 Robbert Broersma
1308
- */
1309
- .utrecht-textarea {
1310
- border-width: var(--utrecht-textarea-border-width);
1311
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
1312
- border-color: var(--utrecht-textarea-border-color);
1313
- border-radius: var(--utrecht-textarea-border-radius, 0);
1314
- border-style: solid;
1315
- color: var(--utrecht-textarea-color);
1316
- font-family: var(--utrecht-textarea-font-family);
1317
- font-size: var(--utrecht-textarea-font-size, 1em);
1318
- max-width: var(--utrecht-textarea-max-width);
1319
- padding-block-end: var(--utrecht-textarea-padding-block-end);
1320
- padding-block-start: var(--utrecht-textarea-padding-block-start);
1321
- padding-inline-end: var(--utrecht-textarea-padding-inline-end);
1322
- padding-inline-start: var(--utrecht-textarea-padding-inline-start);
1323
- width: 100%;
1324
- }
1325
-
1326
- .utrecht-textarea--invalid {
1327
- border-color: var(--utrecht-textarea-invalid-border-color);
1328
- border-width: var(--utrecht-textarea-invalid-border-width);
1329
- }
1330
-
1331
- .utrecht-textarea--disabled {
1332
- border-color: var(--utrecht-textarea-disabled-border-color);
1333
- color: var(--utrecht-textarea-disabled-color);
1334
- }
1335
-
1336
- .utrecht-textarea--read-only {
1337
- border-color: var(--utrecht-textarea-read-only-border-color);
1338
- color: var(--utrecht-textarea-read-only-color);
1339
- }
1340
-
1341
- /**
1342
- * @license EUPL-1.2
1343
- * Copyright (c) 2021 Robbert Broersma
1344
- */
1345
- .utrecht-textbox {
1346
- border-width: var(--utrecht-textbox-border-width);
1347
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
1348
- border-color: var(--utrecht-textbox-border-color);
1349
- border-radius: var(--utrecht-textbox-border-radius, 0);
1350
- border-style: solid;
1351
- color: var(--utrecht-textbox-color);
1352
- font-family: var(--utrecht-textbox-font-family);
1353
- font-size: var(--utrecht-textbox-font-size, 1em);
1354
- max-width: var(--utrecht-textbox-max-width);
1355
- padding-block-end: var(--utrecht-textbox-padding-block-end);
1356
- padding-block-start: var(--utrecht-textbox-padding-block-start);
1357
- padding-inline-end: var(--utrecht-textbox-padding-inline-end);
1358
- padding-inline-start: var(--utrecht-textbox-padding-inline-start);
1359
- box-sizing: border-box;
1360
- width: 100%;
1361
- }
1362
-
1363
- .utrecht-textbox--invalid {
1364
- border-color: var(--utrecht-textbox-invalid-border-color);
1365
- border-width: var(--utrecht-textbox-invalid-border-width);
1366
- }
1367
-
1368
- .utrecht-textbox--disabled {
1369
- border-color: var(--utrecht-textbox-disabled-border-color);
1370
- color: var(--utrecht-textbox-disabled-color);
1371
- }
1372
-
1373
- .utrecht-textbox--read-only {
1374
- border-color: var(--utrecht-textbox-read-only-border-color);
1375
- color: var(--utrecht-textbox-read-only-color);
1376
- }
1377
-
1378
- /**
1379
- * @license EUPL-1.2
1380
- * Copyright (c) 2021 Robbert Broersma
1381
- * Copyright (c) 2021 Gemeente Utrecht
1382
- */
1383
- .utrecht-unordered-list {
1384
- font-family: var(--utrecht-document-font-family, inherit);
1385
- font-size: var(--utrecht-document-font-size, inherit);
1386
- line-height: var(--utrecht-document-line-height, inherit);
1387
- padding-inline-start: 2ch;
1388
- }
1389
-
1390
- .utrecht-unordered-list--distanced {
1391
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1392
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1393
- }
1394
-
1395
- .utrecht-unordered-list--nested {
1396
- margin-inline-start: 2ch;
1397
- margin-block-end: 0;
1398
- }
1399
-
1400
- .utrecht-unordered-list__item {
1401
- padding-inline-start: 1ch;
1402
- margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
1403
- margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
1404
- }
1405
-
1406
- .utrecht-unordered-list__item::marker,
1407
- .utrecht-unordered-list__marker {
1408
- color: var(--utrecht-unordered-list-marker-color);
1409
- content: "●";
1410
- }