@utrecht/component-library-css 1.0.0-alpha.52 → 1.0.0-alpha.521

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