@utrecht/component-library-css 1.0.0-alpha.29 → 1.0.0-alpha.290

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,1391 +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 Gemeente Utrecht
1127
- * Copyright (c) 2021 Robbert Broersma
1128
- */
1129
- .utrecht-page-footer {
1130
- font-family: var(--utrecht-document-font-family);
1131
- font-size: var(--utrecht-document-font-size);
1132
- background-color: var(--utrecht-page-footer-background-color);
1133
- background-image: var(--utrecht-page-footer-background-image);
1134
- color: var(--utrecht-page-footer-color);
1135
- padding-block-start: var(--utrecht-page-footer-padding-block-start);
1136
- padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
1137
- padding-block-end: var(--utrecht-page-footer-padding-block-end);
1138
- padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
1139
- --utrecht-document-color: currentColor;
1140
- --utrecht-heading-color: currentColor;
1141
- --utrecht-link-color: currentColor;
1142
- --utrecht-link-focus-color: currentColor;
1143
- --utrecht-link-hover-color: currentColor;
1144
- --utrecht-link-active-color: currentColor;
1145
- --utrecht-link-visited-color: currentColor;
1146
- }
1147
-
1148
- .utrecht-page-footer__address--reset-address {
1149
- /* reset <address> */
1150
- font-style: inherit;
1151
- margin-block-start: 0;
1152
- margin-block-end: 0;
1153
- }
1154
-
1155
- /**
1156
- * @license EUPL-1.2
1157
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1158
- */
1159
- .utrecht-paragraph {
1160
- color: var(--utrecht-document-color, inherit);
1161
- font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
1162
- font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
1163
- font-weight: var(--utrecht-paragraph-font-weight, inherit);
1164
- line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
1165
- }
1166
-
1167
- .utrecht-paragraph--lead {
1168
- font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1169
- font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1170
- line-height: var(--utrecht-paragraph-lead-line-height, inherit);
1171
- }
1172
-
1173
- .utrecht-paragraph--distanced {
1174
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
1175
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
1176
- }
1177
-
1178
- /**
1179
- * @license EUPL-1.2
1180
- * Copyright (c) 2021 Gemeente Utrecht
1181
- */
1182
- .utrecht-radio-button {
1183
- /* reset native margin for input[type="radio"] */
1184
- margin-block-start: 0;
1185
- margin-block-end: 0;
1186
- margin-inline-start: 0;
1187
- margin-inline-end: 0;
1188
- }
1189
-
1190
- /**
1191
- * @license EUPL-1.2
1192
- * Copyright (c) 2021 Gemeente Utrecht
1193
- * Copyright (c) 2021 Robbert Broersma
1194
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
1195
- */
1196
- .utrecht-separator {
1197
- border-style: solid;
1198
- border-color: var(--utrecht-separator-color);
1199
- border-width: 0 0 var(--utrecht-separator-width) 0;
1200
- margin-block-start: var(--utrecht-separator-margin-block-start);
1201
- margin-block-end: var(--utrecht-separator-margin-block-end);
1202
- }
1203
-
1204
- /**
1205
- * @license EUPL-1.2
1206
- * Copyright (c) 2021 Robbert Broersma
1207
- */
1208
- .utrecht-table {
1209
- border-collapse: collapse;
1210
- width: 100%;
1211
- }
1212
-
1213
- .utrecht-table--distanced {
1214
- margin-block-end: var(--utrecht-table-margin-block-end);
1215
- margin-block-start: var(--utrecht-table-margin-block-start);
1216
- }
1217
-
1218
- .utrecht-table__caption {
1219
- font-weight: var(--utrecht-table-caption-font-weight);
1220
- font-family: var(--utrecht-table-caption-font-family);
1221
- font-size: var(--utrecht-table-caption-font-size);
1222
- color: var(--utrecht-table-caption-color);
1223
- line-height: var(--utrecht-table-caption-line-height);
1224
- margin-block-end: var(--utrecht-table-caption-margin-block-end);
1225
- text-align: var(--utrecht-table-caption-text-align, center);
1226
- }
1227
-
1228
- .utrecht-table__header {
1229
- font-weight: var(--utrecht-table-header-font-weight);
1230
- color: var(--utrecht-table-header-color);
1231
- text-transform: var(--utrecht-table-header-text-transform);
1232
- vertical-align: bottom;
1233
- }
1234
-
1235
- .utrecht-table__cell--last-header-row {
1236
- border-block-end-style: solid;
1237
- border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
1238
- border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
1239
- }
1240
-
1241
- .utrecht-table__body {
1242
- vertical-align: baseline;
1243
- }
1244
-
1245
- .utrecht-table__heading {
1246
- font-weight: var(--utrecht-table-heading-font-weight);
1247
- color: var(--utrecht-table-heading-color);
1248
- text-transform: var(--utrecht-table-heading-text-transform);
1249
- }
1250
-
1251
- .utrecht-table__cell {
1252
- border-block-end-style: solid;
1253
- border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
1254
- border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
1255
- line-height: var(--utrecht-table-cell-line-height, inherit);
1256
- padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
1257
- padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
1258
- padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
1259
- padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
1260
- text-align: start;
1261
- }
1262
-
1263
- .utrecht-table__cell--first {
1264
- padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
1265
- }
1266
-
1267
- .utrecht-table__cell--last {
1268
- padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
1269
- }
1270
-
1271
- .utrecht-table__cell--numeric {
1272
- /* stylelint-disable-next-line declaration-property-value-disallowed-list */
1273
- text-align: right;
1274
- }
1275
-
1276
- .utrecht-table__row--alternate-odd {
1277
- background-color: var(--utrecht-table-row-alternate-odd-background-color);
1278
- color: var(--utrecht-table-row-alternate-odd-color);
1279
- }
1280
-
1281
- .utrecht-table__row--alternate-even {
1282
- background-color: var(--utrecht-table-row-alternate-even-background-color);
1283
- color: var(--utrecht-table-row-alternate-even-color);
1284
- }
1285
-
1286
- /**
1287
- * @license EUPL-1.2
1288
- * Copyright (c) 2021 Robbert Broersma
1289
- */
1290
- .utrecht-textarea {
1291
- border-width: var(--utrecht-textarea-border-width);
1292
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
1293
- border-color: var(--utrecht-textarea-border-color);
1294
- border-radius: var(--utrecht-textarea-border-radius, 0);
1295
- border-style: solid;
1296
- color: var(--utrecht-textarea-color);
1297
- font-family: var(--utrecht-textarea-font-family);
1298
- font-size: var(--utrecht-textarea-font-size, 1em);
1299
- max-width: var(--utrecht-textarea-max-width);
1300
- padding-block-end: var(--utrecht-textarea-padding-block-end);
1301
- padding-block-start: var(--utrecht-textarea-padding-block-start);
1302
- padding-inline-end: var(--utrecht-textarea-padding-inline-end);
1303
- padding-inline-start: var(--utrecht-textarea-padding-inline-start);
1304
- width: 100%;
1305
- }
1306
-
1307
- .utrecht-textarea--invalid {
1308
- border-color: var(--utrecht-textarea-invalid-border-color);
1309
- border-width: var(--utrecht-textarea-invalid-border-width);
1310
- }
1311
-
1312
- .utrecht-textarea--disabled {
1313
- border-color: var(--utrecht-textarea-disabled-border-color);
1314
- color: var(--utrecht-textarea-disabled-color);
1315
- }
1316
-
1317
- .utrecht-textarea--read-only {
1318
- border-color: var(--utrecht-textarea-read-only-border-color);
1319
- color: var(--utrecht-textarea-read-only-color);
1320
- }
1321
-
1322
- /**
1323
- * @license EUPL-1.2
1324
- * Copyright (c) 2021 Robbert Broersma
1325
- */
1326
- .utrecht-textbox {
1327
- border-width: var(--utrecht-textbox-border-width);
1328
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
1329
- border-color: var(--utrecht-textbox-border-color);
1330
- border-radius: var(--utrecht-textbox-border-radius, 0);
1331
- border-style: solid;
1332
- color: var(--utrecht-textbox-color);
1333
- font-family: var(--utrecht-textbox-font-family);
1334
- font-size: var(--utrecht-textbox-font-size, 1em);
1335
- max-width: var(--utrecht-textbox-max-width);
1336
- padding-block-end: var(--utrecht-textbox-padding-block-end);
1337
- padding-block-start: var(--utrecht-textbox-padding-block-start);
1338
- padding-inline-end: var(--utrecht-textbox-padding-inline-end);
1339
- padding-inline-start: var(--utrecht-textbox-padding-inline-start);
1340
- box-sizing: border-box;
1341
- width: 100%;
1342
- }
1343
-
1344
- .utrecht-textbox--invalid {
1345
- border-color: var(--utrecht-textbox-invalid-border-color);
1346
- border-width: var(--utrecht-textbox-invalid-border-width);
1347
- }
1348
-
1349
- .utrecht-textbox--disabled {
1350
- border-color: var(--utrecht-textbox-disabled-border-color);
1351
- color: var(--utrecht-textbox-disabled-color);
1352
- }
1353
-
1354
- .utrecht-textbox--read-only {
1355
- border-color: var(--utrecht-textbox-read-only-border-color);
1356
- color: var(--utrecht-textbox-read-only-color);
1357
- }
1358
-
1359
- /**
1360
- * @license EUPL-1.2
1361
- * Copyright (c) 2021 Robbert Broersma
1362
- * Copyright (c) 2021 Gemeente Utrecht
1363
- */
1364
- .utrecht-unordered-list {
1365
- font-family: var(--utrecht-document-font-family, inherit);
1366
- font-size: var(--utrecht-document-font-size, inherit);
1367
- line-height: var(--utrecht-document-line-height, inherit);
1368
- padding-inline-start: 2ch;
1369
- }
1370
-
1371
- .utrecht-unordered-list--distanced {
1372
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1373
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1374
- }
1375
-
1376
- .utrecht-unordered-list--nested {
1377
- margin-inline-start: 2ch;
1378
- margin-block-end: 0;
1379
- }
1380
-
1381
- .utrecht-unordered-list__item {
1382
- padding-inline-start: 1ch;
1383
- margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
1384
- margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
1385
- }
1386
-
1387
- .utrecht-unordered-list__item::marker,
1388
- .utrecht-unordered-list__marker {
1389
- color: var(--utrecht-unordered-list-marker-color);
1390
- content: "●";
1391
- }