@utrecht/component-library-css 4.1.0 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/dist/html.css +17 -520
- package/dist/index.css +116 -1900
- package/dist/prince-xml.css +8535 -0
- package/package.json +7 -2
- package/CHANGELOG.md +0 -72
- package/dist/html.js +0 -1
- package/dist/index.js +0 -1
- package/html-component.md +0 -25
- package/project.json +0 -18
- package/rollup.config.mjs +0 -37
- package/src/html.scss +0 -8
- package/src/index.scss +0 -19
package/dist/index.css
CHANGED
|
@@ -1,33 +1,73 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2024-2025 Gemeente Utrecht
|
|
4
|
+
* Copyright (c) 2024-2025 Frameless B.V.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* @license EUPL-1.2
|
|
8
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
9
|
+
*/
|
|
10
|
+
/**
|
|
11
|
+
* @license EUPL-1.2
|
|
12
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
13
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
14
|
+
*/
|
|
15
|
+
/**
|
|
16
|
+
* @license EUPL-1.2
|
|
17
|
+
* Copyright (c) 2022 Gemeente Utrecht
|
|
18
|
+
* Copyright (c) 2022 Robbert Broersma
|
|
19
|
+
*/
|
|
20
|
+
/**
|
|
21
|
+
* @license EUPL-1.2
|
|
22
|
+
* Copyright (c) 2022 The Knights Who Say NIH! B.V.
|
|
23
|
+
* Copyright (c) 2022 Gemeente Utrecht
|
|
24
|
+
*/
|
|
25
|
+
/**
|
|
26
|
+
* @license EUPL-1.2
|
|
27
|
+
* Copyright (c) 2022 Robbert Broersma
|
|
28
|
+
*/
|
|
29
|
+
/**
|
|
30
|
+
* @license EUPL-1.2
|
|
31
|
+
* Copyright (c) 2022 Gemeente Utrecht
|
|
32
|
+
* Copyright (c) 2022 Robbert Broersma
|
|
33
|
+
* Copyright (c) 2022 The Knights Who Say NIH! B.V.
|
|
34
|
+
*/
|
|
35
|
+
/**
|
|
36
|
+
* @license EUPL-1.2
|
|
37
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
38
|
+
*/
|
|
2
39
|
/**
|
|
3
40
|
* @license EUPL-1.2
|
|
4
41
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
42
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
43
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* @license EUPL-1.2
|
|
47
|
+
* Copyright (c) 2023 Frameless B.V.
|
|
48
|
+
*/
|
|
49
|
+
/**
|
|
50
|
+
* @license EUPL-1.2
|
|
51
|
+
* Copyright (c) 2021-2022 Gemeente Utrecht
|
|
52
|
+
* Copyright (c) 2021-2022 Frameless B.V.
|
|
5
53
|
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* For example:
|
|
12
|
-
* @import "../../blockquote/index";
|
|
13
|
-
*
|
|
14
|
-
* Will become:
|
|
15
|
-
* @import "@utrecht/blockquote/index";
|
|
54
|
+
/**
|
|
55
|
+
* @license EUPL-1.2
|
|
56
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
57
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
16
58
|
*/
|
|
17
59
|
/**
|
|
18
60
|
* @license EUPL-1.2
|
|
61
|
+
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
19
62
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
20
63
|
*/
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
*
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
* Will become:
|
|
30
|
-
* @import "@utrecht/blockquote/index";
|
|
64
|
+
/**
|
|
65
|
+
* @license EUPL-1.2
|
|
66
|
+
* Copyright (c) 2022 Frameless B.V.
|
|
67
|
+
*/
|
|
68
|
+
/**
|
|
69
|
+
* @license EUPL-1.2
|
|
70
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
31
71
|
*/
|
|
32
72
|
/**
|
|
33
73
|
* @license EUPL-1.2
|
|
@@ -36,10 +76,9 @@
|
|
|
36
76
|
*/
|
|
37
77
|
/**
|
|
38
78
|
* @license EUPL-1.2
|
|
39
|
-
* Copyright (c)
|
|
40
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
79
|
+
* Copyright (c) 2021 Gemeente Utrecht
|
|
41
80
|
*/
|
|
42
|
-
|
|
81
|
+
@charset "UTF-8";
|
|
43
82
|
.utrecht-accordion {
|
|
44
83
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-end, 0));
|
|
45
84
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-start, 0));
|
|
@@ -122,34 +161,6 @@
|
|
|
122
161
|
.utrecht-accordion__header {
|
|
123
162
|
--utrecht-space-around: 0;
|
|
124
163
|
}
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* @license EUPL-1.2
|
|
128
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
129
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
130
|
-
*/
|
|
131
|
-
/**
|
|
132
|
-
* @license EUPL-1.2
|
|
133
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
134
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
135
|
-
*/
|
|
136
|
-
/**
|
|
137
|
-
* @license EUPL-1.2
|
|
138
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
139
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
140
|
-
*/
|
|
141
|
-
/**
|
|
142
|
-
* @license EUPL-1.2
|
|
143
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
144
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
145
|
-
*/
|
|
146
|
-
/* No good use case for `--ok` yet */
|
|
147
|
-
/*
|
|
148
|
-
Apply `.utrecht-alert-dialog` to any element with this class name, with one exception.
|
|
149
|
-
|
|
150
|
-
The HTML `<dialog>` element must have `display: none` until the `open` attribute is set,
|
|
151
|
-
so do not apply these styles to an HTML `<dialog>` element without `open` attribute.
|
|
152
|
-
*/
|
|
153
164
|
.utrecht-alert-dialog:not(dialog:not([open])) {
|
|
154
165
|
--utrecht-alert-dialog-margin-block-start: auto;
|
|
155
166
|
--utrecht-alert-dialog-margin-block-end: auto;
|
|
@@ -171,7 +182,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
171
182
|
border-color: var(--utrecht-alert-dialog-border-color);
|
|
172
183
|
border-radius: var(--utrecht-alert-dialog-border-radius, 0);
|
|
173
184
|
border-style: solid;
|
|
174
|
-
border-width: var(--utrecht-alert-dialog-border-width, 0);
|
|
185
|
+
border-width: var(--utrecht-alert-dialog-border-width, 0);
|
|
175
186
|
box-shadow: var(--utrecht-alert-dialog-box-shadow);
|
|
176
187
|
max-block-size: var(--utrecht-alert-dialog-max-block-size);
|
|
177
188
|
max-inline-size: var(--utrecht-alert-dialog-max-inline-size);
|
|
@@ -234,17 +245,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
234
245
|
--_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
|
|
235
246
|
--_utrecht-alert-color: var(--utrecht-alert-warning-color);
|
|
236
247
|
}
|
|
237
|
-
|
|
238
|
-
/**
|
|
239
|
-
* @license EUPL-1.2
|
|
240
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
241
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
242
|
-
*/
|
|
243
|
-
/**
|
|
244
|
-
* @license EUPL-1.2
|
|
245
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
246
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
247
|
-
*/
|
|
248
248
|
.utrecht-alert {
|
|
249
249
|
background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
|
|
250
250
|
border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
|
|
@@ -304,50 +304,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
304
304
|
--_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
|
|
305
305
|
--_utrecht-alert-color: var(--utrecht-alert-error-color);
|
|
306
306
|
}
|
|
307
|
-
|
|
308
|
-
/**
|
|
309
|
-
* @license EUPL-1.2
|
|
310
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
311
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
312
|
-
*/
|
|
313
|
-
/**
|
|
314
|
-
* @license EUPL-1.2
|
|
315
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
316
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
317
|
-
*/
|
|
318
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
319
307
|
.utrecht-alternate-lang-nav__heading {
|
|
320
|
-
/*
|
|
321
|
-
- Hide the heading from Headings navigation
|
|
322
|
-
- use `aria-labelledby` for a `navigation` or `region` landmark instead
|
|
323
|
-
*/
|
|
324
308
|
display: none;
|
|
325
309
|
}
|
|
326
|
-
|
|
327
|
-
/**
|
|
328
|
-
* @license EUPL-1.2
|
|
329
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
330
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
331
|
-
*/
|
|
332
|
-
/**
|
|
333
|
-
* @license EUPL-1.2
|
|
334
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
335
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
336
|
-
*/
|
|
337
310
|
.utrecht-article {
|
|
338
311
|
max-inline-size: var(--utrecht-article-max-inline-size);
|
|
339
312
|
}
|
|
340
|
-
|
|
341
|
-
/**
|
|
342
|
-
* @license EUPL-1.2
|
|
343
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
344
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
345
|
-
*/
|
|
346
|
-
/**
|
|
347
|
-
* @license EUPL-1.2
|
|
348
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
349
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
350
|
-
*/
|
|
351
313
|
.utrecht-backdrop {
|
|
352
314
|
--_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
|
|
353
315
|
--_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
|
|
@@ -389,85 +351,44 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
389
351
|
.utrecht-backdrop--viewport {
|
|
390
352
|
position: fixed;
|
|
391
353
|
}
|
|
392
|
-
|
|
393
|
-
/**
|
|
394
|
-
* @license EUPL-1.2
|
|
395
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
396
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
397
|
-
*/
|
|
398
|
-
/**
|
|
399
|
-
* @license EUPL-1.2
|
|
400
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
401
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
402
|
-
*/
|
|
403
|
-
/**
|
|
404
|
-
* @license EUPL-1.2
|
|
405
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
406
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
407
|
-
*/
|
|
408
354
|
.utrecht-badge-counter {
|
|
409
|
-
/* Limit size to `max-content`, so the badge will not be stretched out of proportion inside a flexbox */
|
|
410
355
|
background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
|
|
411
356
|
border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
|
|
412
357
|
color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
|
|
413
358
|
display: inline-block;
|
|
414
359
|
font-family: var(--utrecht-badge-counter-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
|
|
415
360
|
font-size: var(--utrecht-badge-counter-font-size, var(--utrecht-badge-font-size));
|
|
416
|
-
font-style: var(--utrecht-badge-counter-font-style, normal);
|
|
417
|
-
font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
|
|
361
|
+
font-style: var(--utrecht-badge-counter-font-style, normal);
|
|
362
|
+
font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
|
|
418
363
|
line-height: 1;
|
|
419
364
|
max-block-size: max-content;
|
|
420
365
|
max-inline-size: max-content;
|
|
421
|
-
min-block-size: var(--utrecht-badge-counter-min-size, 1em);
|
|
422
|
-
min-inline-size: var(--utrecht-badge-counter-min-size, 1em);
|
|
366
|
+
min-block-size: var(--utrecht-badge-counter-min-block-size, var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em)));
|
|
367
|
+
min-inline-size: var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em));
|
|
423
368
|
padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
|
|
424
369
|
padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
|
|
425
370
|
padding-inline-end: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
|
|
426
371
|
padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
|
|
427
372
|
text-align: center;
|
|
428
|
-
text-decoration: none;
|
|
373
|
+
text-decoration: none;
|
|
429
374
|
white-space: nowrap;
|
|
430
375
|
}
|
|
431
376
|
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
|
|
432
377
|
.utrecht-badge-counter {
|
|
433
378
|
border-color: currentColor;
|
|
434
379
|
border-style: solid;
|
|
435
|
-
/* Warning: there layout difference because of the added 1px border */
|
|
436
380
|
border-width: 1px;
|
|
437
381
|
}
|
|
438
382
|
}
|
|
439
|
-
|
|
440
|
-
/**
|
|
441
|
-
* @license EUPL-1.2
|
|
442
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
443
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
444
|
-
*/
|
|
445
|
-
/**
|
|
446
|
-
* @license EUPL-1.2
|
|
447
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
448
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
449
|
-
*/
|
|
450
|
-
/**
|
|
451
|
-
* @license EUPL-1.2
|
|
452
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
453
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
454
|
-
*/
|
|
455
383
|
.utrecht-badge-data {
|
|
456
|
-
/*
|
|
457
|
-
* `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges
|
|
458
|
-
*
|
|
459
|
-
* Configure maximum size to prevent stretching badges inside a flexbox.
|
|
460
|
-
*
|
|
461
|
-
* Configure minumum size to have space to type in when displaying badges in a WYSIWYG editor.
|
|
462
|
-
*/
|
|
463
384
|
background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
|
|
464
385
|
border-radius: var(--utrecht-badge-border-radius, 0.5ch);
|
|
465
386
|
color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
|
|
466
387
|
display: inline-block;
|
|
467
388
|
font-family: var(--utrecht-document-font-family, sans-serif);
|
|
468
389
|
font-size: var(--utrecht-badge-font-size, inherit);
|
|
469
|
-
font-style: var(--utrecht-badge-font-style, normal);
|
|
470
|
-
font-weight: var(--utrecht-badge-font-weight, bold);
|
|
390
|
+
font-style: var(--utrecht-badge-font-style, normal);
|
|
391
|
+
font-weight: var(--utrecht-badge-font-weight, bold);
|
|
471
392
|
line-height: var(--utrecht-badge-line-height, 1em);
|
|
472
393
|
max-block-size: max-content;
|
|
473
394
|
max-inline-size: max-content;
|
|
@@ -477,7 +398,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
477
398
|
padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
|
|
478
399
|
padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
|
|
479
400
|
padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
|
|
480
|
-
text-decoration: none;
|
|
401
|
+
text-decoration: none;
|
|
481
402
|
letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
|
|
482
403
|
text-transform: var(--utrecht-badge-data-text-transform, inherit);
|
|
483
404
|
}
|
|
@@ -485,58 +406,23 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
485
406
|
.utrecht-badge-data {
|
|
486
407
|
border-color: currentColor;
|
|
487
408
|
border-style: solid;
|
|
488
|
-
/* Warning: there layout difference because of the added 1px border */
|
|
489
409
|
border-width: 1px;
|
|
490
410
|
}
|
|
491
411
|
}
|
|
492
|
-
|
|
493
|
-
/**
|
|
494
|
-
* @license EUPL-1.2
|
|
495
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
496
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
497
|
-
*/
|
|
498
|
-
/**
|
|
499
|
-
* @license EUPL-1.2
|
|
500
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
501
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
502
|
-
*/
|
|
503
412
|
.utrecht-badge-list {
|
|
504
413
|
display: flex;
|
|
505
414
|
flex-wrap: wrap;
|
|
506
415
|
gap: var(--utrecht-badge-list-item-margin-block) var(--utrecht-badge-list-item-margin-inline);
|
|
507
416
|
}
|
|
508
|
-
|
|
509
|
-
/**
|
|
510
|
-
* @license EUPL-1.2
|
|
511
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
512
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
513
|
-
*/
|
|
514
|
-
/**
|
|
515
|
-
* @license EUPL-1.2
|
|
516
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
517
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
518
|
-
*/
|
|
519
|
-
/**
|
|
520
|
-
* @license EUPL-1.2
|
|
521
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
522
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
523
|
-
*/
|
|
524
417
|
.utrecht-badge-status {
|
|
525
|
-
/*
|
|
526
|
-
* `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges
|
|
527
|
-
*
|
|
528
|
-
* Configure maximum size to prevent stretching badges inside a flexbox.
|
|
529
|
-
*
|
|
530
|
-
* Configure minumum size to have space to type in when displaying badges in a WYSIWYG editor.
|
|
531
|
-
*/
|
|
532
418
|
background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
|
|
533
419
|
border-radius: var(--utrecht-badge-border-radius, 0.5ch);
|
|
534
420
|
color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
|
|
535
421
|
display: inline-block;
|
|
536
422
|
font-family: var(--utrecht-document-font-family, sans-serif);
|
|
537
423
|
font-size: var(--utrecht-badge-font-size, inherit);
|
|
538
|
-
font-style: var(--utrecht-badge-font-style, normal);
|
|
539
|
-
font-weight: var(--utrecht-badge-font-weight, bold);
|
|
424
|
+
font-style: var(--utrecht-badge-font-style, normal);
|
|
425
|
+
font-weight: var(--utrecht-badge-font-weight, bold);
|
|
540
426
|
line-height: var(--utrecht-badge-line-height, 1em);
|
|
541
427
|
max-block-size: max-content;
|
|
542
428
|
max-inline-size: max-content;
|
|
@@ -546,7 +432,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
546
432
|
padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
|
|
547
433
|
padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
|
|
548
434
|
padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
|
|
549
|
-
text-decoration: none;
|
|
435
|
+
text-decoration: none;
|
|
550
436
|
letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
|
|
551
437
|
text-transform: var(--utrecht-badge-status-text-transform, inherit);
|
|
552
438
|
}
|
|
@@ -554,7 +440,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
554
440
|
.utrecht-badge-status {
|
|
555
441
|
border-color: currentColor;
|
|
556
442
|
border-style: solid;
|
|
557
|
-
/* Warning: there layout difference because of the added 1px border */
|
|
558
443
|
border-width: 1px;
|
|
559
444
|
}
|
|
560
445
|
}
|
|
@@ -608,15 +493,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
608
493
|
background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%)));
|
|
609
494
|
color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
|
|
610
495
|
}
|
|
611
|
-
|
|
612
|
-
/**
|
|
613
|
-
* @license EUPL-1.2
|
|
614
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
615
|
-
*/
|
|
616
|
-
/**
|
|
617
|
-
* @license EUPL-1.2
|
|
618
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
619
|
-
*/
|
|
620
496
|
.utrecht-blockquote {
|
|
621
497
|
background-color: var(--utrecht-blockquote-background-color);
|
|
622
498
|
color: var(--utrecht-blockquote-color);
|
|
@@ -648,16 +524,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
648
524
|
.utrecht-blockquote--distanced {
|
|
649
525
|
--utrecht-space-around: 1;
|
|
650
526
|
}
|
|
651
|
-
|
|
652
|
-
/**
|
|
653
|
-
* @license EUPL-1.2
|
|
654
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
655
|
-
*/
|
|
656
|
-
/**
|
|
657
|
-
* @license EUPL-1.2
|
|
658
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
659
|
-
*/
|
|
660
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
661
527
|
.utrecht-breadcrumb-nav {
|
|
662
528
|
--utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
|
|
663
529
|
--utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
|
|
@@ -720,7 +586,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
720
586
|
|
|
721
587
|
.utrecht-breadcrumb-nav__link--current {
|
|
722
588
|
--utrecht-link-current-font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
|
|
723
|
-
/* configure the `current` `cursor` only when the current state is applied */
|
|
724
589
|
--_utrecht-breadcrumb-nav-link-current-cursor: var(--utrecht-action-inert-cursor, default);
|
|
725
590
|
font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
|
|
726
591
|
}
|
|
@@ -730,19 +595,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
730
595
|
--utrecht-breadcrumb-nav-link-disabled-color,
|
|
731
596
|
var(--utrecht-breadcrumb-nav-link-color)
|
|
732
597
|
);
|
|
733
|
-
/* configure the `disabled` `cursor` only when the current state is applied */
|
|
734
598
|
--_utrecht-breadcrumb-nav-link-disabled-cursor: var(--utrecht-action-disabled-cursor, not-allowed);
|
|
735
599
|
background-color: var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color));
|
|
736
|
-
/* Use the `current` cursor when available, otherwise use the `disabled` cursor */
|
|
737
600
|
cursor: var(--_utrecht-breadcrumb-nav-link-current-cursor, var(--_utrecht-breadcrumb-nav-link-disabled-cursor));
|
|
738
601
|
}
|
|
739
|
-
|
|
740
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
741
602
|
.utrecht-breadcrumb-nav__separator {
|
|
742
|
-
/*
|
|
743
|
-
* Overwrite `style` attribute using "private" CSS variable for <li> hack:
|
|
744
|
-
* <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-nav-separator-display, block)">
|
|
745
|
-
*/
|
|
746
603
|
--_utrecht-breadcrumb-nav-separator-display: inline-flex;
|
|
747
604
|
--utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
|
|
748
605
|
align-items: center;
|
|
@@ -755,10 +612,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
755
612
|
}
|
|
756
613
|
|
|
757
614
|
.utrecht-breadcrumb-nav__separator--html-li {
|
|
758
|
-
/*
|
|
759
|
-
* Overwrite `style` attribute using "private" CSS variable for <li> hack:
|
|
760
|
-
* <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-nav-separator-display, block)">
|
|
761
|
-
*/
|
|
762
615
|
--_utrecht-breadcrumb-nav-separator-display: inline-flex;
|
|
763
616
|
--utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
|
|
764
617
|
align-items: center;
|
|
@@ -771,7 +624,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
771
624
|
}
|
|
772
625
|
|
|
773
626
|
.utrecht-breadcrumb-nav--arrows {
|
|
774
|
-
/* https://css-tricks.com/triangle-breadcrumbs/ */
|
|
775
627
|
--utrecht-breadcrumb-nav-arrow-size: 24px;
|
|
776
628
|
min-block-size: var(--utrecht-breadcrumb-nav-min-block-size);
|
|
777
629
|
overflow: hidden;
|
|
@@ -825,15 +677,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
825
677
|
.utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item {
|
|
826
678
|
margin-inline-start: var(--utrecht-breadcrumb-nav-item-divider-inline-size);
|
|
827
679
|
}
|
|
828
|
-
|
|
829
|
-
/**
|
|
830
|
-
* @license EUPL-1.2
|
|
831
|
-
* Copyright (c) 2022 Frameless B.V.
|
|
832
|
-
*/
|
|
833
|
-
/**
|
|
834
|
-
* @license EUPL-1.2
|
|
835
|
-
* Copyright (c) 2022 Frameless B.V.
|
|
836
|
-
*/
|
|
837
680
|
.utrecht-button-group {
|
|
838
681
|
align-items: baseline;
|
|
839
682
|
background-color: var(--utrecht-button-group-background-color);
|
|
@@ -862,47 +705,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
862
705
|
flex-direction: column;
|
|
863
706
|
gap: var(--utrecht-button-group-block-gap, 1em);
|
|
864
707
|
}
|
|
865
|
-
|
|
866
|
-
/**
|
|
867
|
-
* @license EUPL-1.2
|
|
868
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
869
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
870
|
-
*/
|
|
871
|
-
/**
|
|
872
|
-
* @license EUPL-1.2
|
|
873
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
874
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
875
|
-
*/
|
|
876
|
-
/**
|
|
877
|
-
* @license EUPL-1.2
|
|
878
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
879
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
880
|
-
*/
|
|
881
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
882
|
-
/**
|
|
883
|
-
* @license EUPL-1.2
|
|
884
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
885
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
886
|
-
*/
|
|
887
|
-
/**
|
|
888
|
-
* @license EUPL-1.2
|
|
889
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
890
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
891
|
-
*/
|
|
892
|
-
/**
|
|
893
|
-
* @license EUPL-1.2
|
|
894
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
895
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
896
|
-
*/
|
|
897
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
898
708
|
.utrecht-button-link {
|
|
899
|
-
/*
|
|
900
|
-
`--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
|
|
901
|
-
The hint color takes priority over the appearance color.
|
|
902
|
-
|
|
903
|
-
`--_utrecht-button-appearance` is the internal prefix for the appearance
|
|
904
|
-
(primary-action, secondary-action or subtle), it is not an API.
|
|
905
|
-
*/
|
|
906
709
|
--_utrecht-button-background-color: var(
|
|
907
710
|
--_utrecht-button-hint-background-color,
|
|
908
711
|
var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
|
|
@@ -1095,6 +898,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1095
898
|
--utrecht-button-border-bottom-width,
|
|
1096
899
|
var(--_utrecht-button-border-width, 0)
|
|
1097
900
|
);
|
|
901
|
+
--_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
|
|
902
|
+
--_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
|
|
1098
903
|
--utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
|
|
1099
904
|
align-items: center;
|
|
1100
905
|
background-color: var(--_utrecht-button-background-color);
|
|
@@ -1109,13 +914,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1109
914
|
color: var(--_utrecht-button-color);
|
|
1110
915
|
cursor: var(--utrecht-action-activate-cursor, revert);
|
|
1111
916
|
display: inline-flex;
|
|
1112
|
-
font-family: var(--
|
|
1113
|
-
font-size: var(--
|
|
917
|
+
font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
918
|
+
font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
|
|
1114
919
|
font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
|
|
1115
920
|
gap: var(--utrecht-button-icon-gap);
|
|
1116
921
|
inline-size: var(--utrecht-button-inline-size, auto);
|
|
1117
922
|
justify-content: center;
|
|
1118
|
-
line-height: var(--
|
|
923
|
+
line-height: var(--_utrecht-button-line-height);
|
|
1119
924
|
max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
|
|
1120
925
|
min-block-size: var(--utrecht-button-min-block-size, 44px);
|
|
1121
926
|
min-inline-size: var(--utrecht-button-min-inline-size, 44px);
|
|
@@ -1134,16 +939,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1134
939
|
.utrecht-button-link {
|
|
1135
940
|
--_utrecht-button-disabled-border-color: GrayText;
|
|
1136
941
|
--_utrecht-button-disabled-color: GrayText;
|
|
1137
|
-
/*
|
|
1138
|
-
* `<button>` has these styles by default, but other elements styles as button do not:
|
|
1139
|
-
*
|
|
1140
|
-
* - `<div role="button">` needs this.
|
|
1141
|
-
* - `<a role="button">` needs this.
|
|
1142
|
-
*/
|
|
1143
942
|
background-color: ButtonFace;
|
|
1144
943
|
border-color: buttonborder;
|
|
1145
944
|
color: ButtonText;
|
|
1146
|
-
/* TODO: Find a way to express the `pressed` state */
|
|
1147
945
|
}
|
|
1148
946
|
}
|
|
1149
947
|
|
|
@@ -1168,11 +966,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1168
966
|
}
|
|
1169
967
|
|
|
1170
968
|
.utrecht-button-link--focus-visible {
|
|
1171
|
-
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
1172
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1173
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1174
|
-
* can combine it with the focus ring box shadow.
|
|
1175
|
-
*/
|
|
1176
969
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1177
970
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1178
971
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -1196,11 +989,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1196
989
|
scale: var(--utrecht-button-focus-scale, 1);
|
|
1197
990
|
}
|
|
1198
991
|
.utrecht-button-link--html-a:focus-visible {
|
|
1199
|
-
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
1200
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1201
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1202
|
-
* can combine it with the focus ring box shadow.
|
|
1203
|
-
*/
|
|
1204
992
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1205
993
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1206
994
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -1229,10 +1017,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1229
1017
|
--_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
|
|
1230
1018
|
--_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
|
|
1231
1019
|
--_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
|
|
1020
|
+
--_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);
|
|
1232
1021
|
--_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
|
|
1233
|
-
--_utrecht-button-appearance-
|
|
1234
|
-
|
|
1235
|
-
);
|
|
1022
|
+
--_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);
|
|
1023
|
+
--_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
|
|
1236
1024
|
--_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
|
|
1237
1025
|
--_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
|
|
1238
1026
|
--_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
|
|
@@ -1254,10 +1042,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1254
1042
|
--_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
|
|
1255
1043
|
--_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
|
|
1256
1044
|
--_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
|
|
1045
|
+
--_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);
|
|
1257
1046
|
--_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
|
|
1258
|
-
--_utrecht-button-appearance-
|
|
1259
|
-
|
|
1260
|
-
);
|
|
1047
|
+
--_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);
|
|
1048
|
+
--_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
|
|
1261
1049
|
--_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
|
|
1262
1050
|
--_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
|
|
1263
1051
|
--_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
|
|
@@ -1279,10 +1067,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1279
1067
|
--_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
|
|
1280
1068
|
--_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
|
|
1281
1069
|
--_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
|
|
1070
|
+
--_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);
|
|
1282
1071
|
--_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
|
|
1283
|
-
--_utrecht-button-appearance-
|
|
1284
|
-
|
|
1285
|
-
);
|
|
1072
|
+
--_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);
|
|
1073
|
+
--_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
|
|
1286
1074
|
--_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
|
|
1287
1075
|
--_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
|
|
1288
1076
|
--_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
|
|
@@ -1295,37 +1083,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1295
1083
|
--_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
|
|
1296
1084
|
--_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
|
|
1297
1085
|
}
|
|
1298
|
-
|
|
1299
|
-
/**
|
|
1300
|
-
* @license EUPL-1.2
|
|
1301
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1302
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1303
|
-
*/
|
|
1304
|
-
/**
|
|
1305
|
-
* @license EUPL-1.2
|
|
1306
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1307
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1308
|
-
*/
|
|
1309
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1310
|
-
/**
|
|
1311
|
-
* @license EUPL-1.2
|
|
1312
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
1313
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1314
|
-
*/
|
|
1315
|
-
/**
|
|
1316
|
-
* @license EUPL-1.2
|
|
1317
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
1318
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
1319
|
-
*/
|
|
1320
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
1321
1086
|
.utrecht-button {
|
|
1322
|
-
/*
|
|
1323
|
-
`--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
|
|
1324
|
-
The hint color takes priority over the appearance color.
|
|
1325
|
-
|
|
1326
|
-
`--_utrecht-button-appearance` is the internal prefix for the appearance
|
|
1327
|
-
(primary-action, secondary-action or subtle), it is not an API.
|
|
1328
|
-
*/
|
|
1329
1087
|
--_utrecht-button-background-color: var(
|
|
1330
1088
|
--_utrecht-button-hint-background-color,
|
|
1331
1089
|
var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
|
|
@@ -1518,6 +1276,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1518
1276
|
--utrecht-button-border-bottom-width,
|
|
1519
1277
|
var(--_utrecht-button-border-width, 0)
|
|
1520
1278
|
);
|
|
1279
|
+
--_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
|
|
1280
|
+
--_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
|
|
1521
1281
|
--utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
|
|
1522
1282
|
align-items: center;
|
|
1523
1283
|
background-color: var(--_utrecht-button-background-color);
|
|
@@ -1532,13 +1292,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1532
1292
|
color: var(--_utrecht-button-color);
|
|
1533
1293
|
cursor: var(--utrecht-action-activate-cursor, revert);
|
|
1534
1294
|
display: inline-flex;
|
|
1535
|
-
font-family: var(--
|
|
1536
|
-
font-size: var(--
|
|
1295
|
+
font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
1296
|
+
font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
|
|
1537
1297
|
font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
|
|
1538
1298
|
gap: var(--utrecht-button-icon-gap);
|
|
1539
1299
|
inline-size: var(--utrecht-button-inline-size, auto);
|
|
1540
1300
|
justify-content: center;
|
|
1541
|
-
line-height: var(--
|
|
1301
|
+
line-height: var(--_utrecht-button-line-height);
|
|
1542
1302
|
max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
|
|
1543
1303
|
min-block-size: var(--utrecht-button-min-block-size, 44px);
|
|
1544
1304
|
min-inline-size: var(--utrecht-button-min-inline-size, 44px);
|
|
@@ -1555,16 +1315,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1555
1315
|
.utrecht-button {
|
|
1556
1316
|
--_utrecht-button-disabled-border-color: GrayText;
|
|
1557
1317
|
--_utrecht-button-disabled-color: GrayText;
|
|
1558
|
-
/*
|
|
1559
|
-
* `<button>` has these styles by default, but other elements styles as button do not:
|
|
1560
|
-
*
|
|
1561
|
-
* - `<div role="button">` needs this.
|
|
1562
|
-
* - `<a role="button">` needs this.
|
|
1563
|
-
*/
|
|
1564
1318
|
background-color: ButtonFace;
|
|
1565
1319
|
border-color: buttonborder;
|
|
1566
1320
|
color: ButtonText;
|
|
1567
|
-
/* TODO: Find a way to express the `pressed` state */
|
|
1568
1321
|
}
|
|
1569
1322
|
}
|
|
1570
1323
|
|
|
@@ -1576,7 +1329,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1576
1329
|
}
|
|
1577
1330
|
|
|
1578
1331
|
.utrecht-button--submit {
|
|
1579
|
-
/* lower priority specificty than busy and disabled cursor */
|
|
1580
1332
|
cursor: var(--utrecht-action-submit-cursor, revert);
|
|
1581
1333
|
}
|
|
1582
1334
|
|
|
@@ -1599,11 +1351,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1599
1351
|
}
|
|
1600
1352
|
|
|
1601
1353
|
.utrecht-button--focus-visible {
|
|
1602
|
-
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
1603
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1604
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1605
|
-
* can combine it with the focus ring box shadow.
|
|
1606
|
-
*/
|
|
1607
1354
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1608
1355
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1609
1356
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -1621,12 +1368,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1621
1368
|
}
|
|
1622
1369
|
|
|
1623
1370
|
.utrecht-button:focus {
|
|
1624
|
-
/* Show focus ring even for disabled :focus-visible buttons. *
|
|
1625
|
-
/* For example: <button disabled tabindex="0"> */
|
|
1626
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1627
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1628
|
-
* can combine it with the focus ring box shadow.
|
|
1629
|
-
*/
|
|
1630
1371
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1631
1372
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1632
1373
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -1641,11 +1382,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1641
1382
|
border-color: var(--_utrecht-button-focus-border-color);
|
|
1642
1383
|
color: var(--_utrecht-button-focus-color);
|
|
1643
1384
|
scale: var(--utrecht-button-focus-scale, 1);
|
|
1644
|
-
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
1645
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1646
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1647
|
-
* can combine it with the focus ring box shadow.
|
|
1648
|
-
*/
|
|
1649
1385
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1650
1386
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1651
1387
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -1654,11 +1390,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1654
1390
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1655
1391
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1656
1392
|
}
|
|
1657
|
-
|
|
1658
|
-
/* override the `:focus` selector above */
|
|
1659
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
1660
1393
|
.utrecht-button:focus:not(:focus-visible) {
|
|
1661
|
-
/* undo focus ring */
|
|
1662
1394
|
box-shadow: none;
|
|
1663
1395
|
outline-style: revert;
|
|
1664
1396
|
}
|
|
@@ -1686,10 +1418,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1686
1418
|
--_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
|
|
1687
1419
|
--_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
|
|
1688
1420
|
--_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
|
|
1421
|
+
--_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);
|
|
1689
1422
|
--_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
|
|
1690
|
-
--_utrecht-button-appearance-
|
|
1691
|
-
|
|
1692
|
-
);
|
|
1423
|
+
--_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);
|
|
1424
|
+
--_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
|
|
1693
1425
|
--_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
|
|
1694
1426
|
--_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
|
|
1695
1427
|
--_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
|
|
@@ -1711,10 +1443,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1711
1443
|
--_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
|
|
1712
1444
|
--_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
|
|
1713
1445
|
--_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
|
|
1446
|
+
--_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);
|
|
1714
1447
|
--_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
|
|
1715
|
-
--_utrecht-button-appearance-
|
|
1716
|
-
|
|
1717
|
-
);
|
|
1448
|
+
--_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);
|
|
1449
|
+
--_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
|
|
1718
1450
|
--_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
|
|
1719
1451
|
--_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
|
|
1720
1452
|
--_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
|
|
@@ -1736,10 +1468,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1736
1468
|
--_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
|
|
1737
1469
|
--_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
|
|
1738
1470
|
--_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
|
|
1471
|
+
--_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);
|
|
1739
1472
|
--_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
|
|
1740
|
-
--_utrecht-button-appearance-
|
|
1741
|
-
|
|
1742
|
-
);
|
|
1473
|
+
--_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);
|
|
1474
|
+
--_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
|
|
1743
1475
|
--_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
|
|
1744
1476
|
--_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
|
|
1745
1477
|
--_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
|
|
@@ -1977,12 +1709,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
1977
1709
|
--_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color);
|
|
1978
1710
|
--_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
|
|
1979
1711
|
}
|
|
1980
|
-
|
|
1981
|
-
/**
|
|
1982
|
-
* @license EUPL-1.2
|
|
1983
|
-
* Copyright (c) 2021-2022 Gemeente Utrecht
|
|
1984
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
1985
|
-
*/
|
|
1986
1712
|
.utrecht-calendar {
|
|
1987
1713
|
background-color: var(--utrecht-calendar-background-color);
|
|
1988
1714
|
inline-size: fit-content;
|
|
@@ -2115,30 +1841,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2115
1841
|
block-size: var(--utrecht-calendar-icon-size);
|
|
2116
1842
|
inline-size: var(--utrecht-calendar-icon-size);
|
|
2117
1843
|
}
|
|
2118
|
-
|
|
2119
|
-
/**
|
|
2120
|
-
* @license EUPL-1.2
|
|
2121
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2122
|
-
*/
|
|
2123
|
-
/**
|
|
2124
|
-
* @license EUPL-1.2
|
|
2125
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2126
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2127
|
-
*/
|
|
2128
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2129
|
-
/**
|
|
2130
|
-
* @license EUPL-1.2
|
|
2131
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2132
|
-
*/
|
|
2133
|
-
/**
|
|
2134
|
-
* @license EUPL-1.2
|
|
2135
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2136
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2137
|
-
*/
|
|
2138
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2139
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2140
1844
|
.utrecht-checkbox {
|
|
2141
|
-
margin-block-end: 0;
|
|
1845
|
+
margin-block-end: 0;
|
|
2142
1846
|
margin-block-start: 0;
|
|
2143
1847
|
margin-inline-end: 0;
|
|
2144
1848
|
margin-inline-start: 0;
|
|
@@ -2146,17 +1850,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2146
1850
|
-webkit-user-select: none;
|
|
2147
1851
|
user-select: none;
|
|
2148
1852
|
}
|
|
2149
|
-
|
|
2150
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2151
1853
|
.utrecht-checkbox--disabled {
|
|
2152
1854
|
cursor: var(--utrecht-action-disabled-cursor, revert);
|
|
2153
1855
|
}
|
|
2154
1856
|
|
|
2155
1857
|
.utrecht-checkbox--focus-visible {
|
|
2156
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
2157
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
2158
|
-
* can combine it with the focus ring box shadow.
|
|
2159
|
-
*/
|
|
2160
1858
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
2161
1859
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
2162
1860
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -2170,10 +1868,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2170
1868
|
cursor: var(--utrecht-action-disabled-cursor, revert);
|
|
2171
1869
|
}
|
|
2172
1870
|
.utrecht-checkbox--html-input:focus {
|
|
2173
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
2174
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
2175
|
-
* can combine it with the focus ring box shadow.
|
|
2176
|
-
*/
|
|
2177
1871
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
2178
1872
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
2179
1873
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -2183,29 +1877,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2183
1877
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2184
1878
|
}
|
|
2185
1879
|
.utrecht-checkbox--html-input:focus:not(:focus-visible) {
|
|
2186
|
-
/* undo focus ring */
|
|
2187
1880
|
box-shadow: none;
|
|
2188
1881
|
outline-style: revert;
|
|
2189
1882
|
}
|
|
2190
|
-
|
|
2191
|
-
/**
|
|
2192
|
-
* @license EUPL-1.2
|
|
2193
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
2194
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
2195
|
-
*/
|
|
2196
|
-
/**
|
|
2197
|
-
* @license EUPL-1.2
|
|
2198
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
2199
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
2200
|
-
*/
|
|
2201
|
-
/**
|
|
2202
|
-
* @license EUPL-1.2
|
|
2203
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
2204
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
2205
|
-
*/
|
|
2206
1883
|
.utrecht-code-block {
|
|
2207
|
-
/* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
|
|
2208
|
-
/* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
|
|
2209
1884
|
background-color: var(--utrecht-code-background-color);
|
|
2210
1885
|
color: var(--utrecht-code-color);
|
|
2211
1886
|
font-family: var(--utrecht-code-font-family, monospace), monospace;
|
|
@@ -2233,24 +1908,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2233
1908
|
}
|
|
2234
1909
|
|
|
2235
1910
|
.utrecht-code-block__content {
|
|
2236
|
-
/* reset effect of <code> */
|
|
2237
1911
|
font-family: inherit;
|
|
2238
1912
|
font-size: inherit;
|
|
2239
1913
|
}
|
|
2240
|
-
|
|
2241
|
-
/**
|
|
2242
|
-
* @license EUPL-1.2
|
|
2243
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
2244
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
2245
|
-
*/
|
|
2246
|
-
/**
|
|
2247
|
-
* @license EUPL-1.2
|
|
2248
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
2249
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
2250
|
-
*/
|
|
2251
1914
|
.utrecht-code {
|
|
2252
|
-
/* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
|
|
2253
|
-
/* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
|
|
2254
1915
|
background-color: var(--utrecht-code-background-color);
|
|
2255
1916
|
color: var(--utrecht-code-color);
|
|
2256
1917
|
font-family: var(--utrecht-code-font-family, monospace), monospace;
|
|
@@ -2258,17 +1919,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2258
1919
|
font-variant-ligatures: none;
|
|
2259
1920
|
line-height: var(--utrecht-code-line-height);
|
|
2260
1921
|
}
|
|
2261
|
-
|
|
2262
|
-
/**
|
|
2263
|
-
* @license EUPL-1.2
|
|
2264
|
-
* Copyright (c) 2021-2022 Gemeente Utrecht
|
|
2265
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
2266
|
-
*/
|
|
2267
|
-
/**
|
|
2268
|
-
* @license EUPL-1.2
|
|
2269
|
-
* Copyright (c) 2021-2022 Gemeente Utrecht
|
|
2270
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
2271
|
-
*/
|
|
2272
1922
|
.utrecht-color-sample {
|
|
2273
1923
|
background-color: var(--utrecht-color-sample-background-color, currentColor);
|
|
2274
1924
|
block-size: var(--utrecht-color-sample-block-size, 2em);
|
|
@@ -2297,17 +1947,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2297
1947
|
--utrecht-color-sample-default-border-color: var(--utrecht-color-sample-light-border-color, #fff);
|
|
2298
1948
|
}
|
|
2299
1949
|
}
|
|
2300
|
-
|
|
2301
|
-
/**
|
|
2302
|
-
* @license EUPL-1.2
|
|
2303
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
2304
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
2305
|
-
*/
|
|
2306
|
-
/**
|
|
2307
|
-
* @license EUPL-1.2
|
|
2308
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
2309
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
2310
|
-
*/
|
|
2311
1950
|
.utrecht-column-layout {
|
|
2312
1951
|
column-gap: var(--utrecht-column-layout-gap, 2em);
|
|
2313
1952
|
column-width: var(--utrecht-column-layout-column-width, 40ch);
|
|
@@ -2319,18 +1958,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2319
1958
|
column-rule-style: solid;
|
|
2320
1959
|
column-rule-width: var(--utrecht-column-layout-column-rule-width, 0);
|
|
2321
1960
|
}
|
|
2322
|
-
|
|
2323
|
-
/**
|
|
2324
|
-
* @license EUPL-1.2
|
|
2325
|
-
* Copyright (c) 2023 Frameless B.V.
|
|
2326
|
-
*/
|
|
2327
|
-
/**
|
|
2328
|
-
* @license EUPL-1.2
|
|
2329
|
-
* Copyright (c) 2023 Frameless B.V.
|
|
2330
|
-
*/
|
|
2331
|
-
/**
|
|
2332
|
-
* Reset `padding` and `border` default styling from [popover] attribute.
|
|
2333
|
-
*/
|
|
2334
1961
|
.utrecht-combobox {
|
|
2335
1962
|
inline-size: 100%;
|
|
2336
1963
|
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
@@ -2360,42 +1987,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2360
1987
|
.utrecht-combobox__popover--hidden {
|
|
2361
1988
|
display: none !important;
|
|
2362
1989
|
}
|
|
2363
|
-
|
|
2364
|
-
/**
|
|
2365
|
-
* @license EUPL-1.2
|
|
2366
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2367
|
-
*/
|
|
2368
|
-
/**
|
|
2369
|
-
* @license EUPL-1.2
|
|
2370
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2371
|
-
*/
|
|
2372
1990
|
.utrecht-currency-data {
|
|
2373
|
-
/* lining-nums: avoid "oldstyle-nums" where some numbers have descenders */
|
|
2374
|
-
/* tabular-nums: vertically align amounts */
|
|
2375
1991
|
font-variant-numeric: lining-nums tabular-nums;
|
|
2376
1992
|
white-space: nowrap;
|
|
2377
1993
|
}
|
|
2378
|
-
|
|
2379
|
-
/**
|
|
2380
|
-
* @license EUPL-1.2
|
|
2381
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2382
|
-
*/
|
|
2383
|
-
/**
|
|
2384
|
-
* @license EUPL-1.2
|
|
2385
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2386
|
-
*/
|
|
2387
|
-
/**
|
|
2388
|
-
* @license EUPL-1.2
|
|
2389
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2390
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2391
|
-
*/
|
|
2392
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2393
1994
|
.utrecht-checkbox--custom,
|
|
2394
1995
|
.utrecht-custom-checkbox {
|
|
2395
|
-
/*
|
|
2396
|
-
* Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
|
|
2397
|
-
* https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
|
|
2398
|
-
*/
|
|
2399
1996
|
-webkit-appearance: none;
|
|
2400
1997
|
-moz-appearance: none;
|
|
2401
1998
|
appearance: none;
|
|
@@ -2482,10 +2079,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2482
2079
|
|
|
2483
2080
|
.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
|
|
2484
2081
|
.utrecht-custom-checkbox--focus-visible {
|
|
2485
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
2486
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
2487
|
-
* can combine it with the focus ring box shadow.
|
|
2488
|
-
*/
|
|
2489
2082
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
2490
2083
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
2491
2084
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -2525,10 +2118,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2525
2118
|
}
|
|
2526
2119
|
.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
|
|
2527
2120
|
.utrecht-custom-checkbox--html-input:focus-visible {
|
|
2528
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
2529
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
2530
|
-
* can combine it with the focus ring box shadow.
|
|
2531
|
-
*/
|
|
2532
2121
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
2533
2122
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
2534
2123
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -2567,25 +2156,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2567
2156
|
border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
|
|
2568
2157
|
color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
|
|
2569
2158
|
}
|
|
2570
|
-
|
|
2571
|
-
/**
|
|
2572
|
-
* @license EUPL-1.2
|
|
2573
|
-
* Copyright (c) 2021-2022 Gemeente Utrecht
|
|
2574
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
2575
|
-
*/
|
|
2576
|
-
/**
|
|
2577
|
-
* @license EUPL-1.2
|
|
2578
|
-
* Copyright (c) 2021-2022 Gemeente Utrecht
|
|
2579
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
2580
|
-
*/
|
|
2581
|
-
/* `@mixin utrecht-data-list--html-dl` is not necessary.
|
|
2582
|
-
* Default styles include only `display` and `margin`, and those properties are configured by default.
|
|
2583
|
-
*/
|
|
2584
|
-
/* `@mixin utrecht-data-list__item-key--html-dt` is not necessary, `<dt>` has no default styles. */
|
|
2585
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2586
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2587
2159
|
.utrecht-data-list {
|
|
2588
|
-
/* also set `margin-block` to reset browser styling of <dl> */
|
|
2589
2160
|
display: block;
|
|
2590
2161
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
|
|
2591
2162
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-start, 0));
|
|
@@ -2599,7 +2170,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2599
2170
|
}
|
|
2600
2171
|
|
|
2601
2172
|
.utrecht-data-list__item-value {
|
|
2602
|
-
/* configure `min-block-size` in case the value is empty */
|
|
2603
2173
|
color: var(--utrecht-data-list-item-value-color);
|
|
2604
2174
|
font-size: var(--utrecht-data-list-item-value-font-size);
|
|
2605
2175
|
font-weight: var(--utrecht-data-list-item-value-font-weight);
|
|
@@ -2608,12 +2178,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2608
2178
|
}
|
|
2609
2179
|
|
|
2610
2180
|
.utrecht-data-list__actions--html-dd {
|
|
2611
|
-
/* reset browser styling of <dd> */
|
|
2612
2181
|
margin-inline-start: 0;
|
|
2613
2182
|
}
|
|
2614
2183
|
|
|
2615
2184
|
.utrecht-data-list__item-value--html-dd {
|
|
2616
|
-
/* reset browser styling of <dd> */
|
|
2617
2185
|
margin-inline-start: 0;
|
|
2618
2186
|
}
|
|
2619
2187
|
|
|
@@ -2652,17 +2220,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2652
2220
|
.utrecht-data-list--rows .utrecht-data-list__item-value {
|
|
2653
2221
|
margin-block-start: var(--utrecht-data-list-rows-item-value-margin-block-start);
|
|
2654
2222
|
}
|
|
2655
|
-
|
|
2656
|
-
/**
|
|
2657
|
-
* @license EUPL-1.2
|
|
2658
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
2659
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2660
|
-
*/
|
|
2661
|
-
/**
|
|
2662
|
-
* @license EUPL-1.2
|
|
2663
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
2664
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2665
|
-
*/
|
|
2666
2223
|
.utrecht-data-placeholder {
|
|
2667
2224
|
background-color: var(--utrecht-data-placeholder-background-color, currentColor);
|
|
2668
2225
|
block-size: 1em;
|
|
@@ -2693,28 +2250,17 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2693
2250
|
.utrecht-data-placeholder--loading {
|
|
2694
2251
|
cursor: var(--utrecht-action-busy-cursor, busy);
|
|
2695
2252
|
}
|
|
2696
|
-
|
|
2697
|
-
/* class name available only for Storybook */
|
|
2698
2253
|
.utrecht-data-placeholder--print {
|
|
2699
2254
|
outline-color: currentColor;
|
|
2700
2255
|
outline-style: dashed;
|
|
2701
2256
|
outline-width: 0.1em;
|
|
2702
2257
|
}
|
|
2703
|
-
|
|
2704
|
-
/* class name available only for Storybook */
|
|
2705
2258
|
.utrecht-data-placeholder--forced-colors {
|
|
2706
2259
|
background-color: GrayText;
|
|
2707
2260
|
}
|
|
2708
|
-
|
|
2709
|
-
/* class name available only for Storybook */
|
|
2710
2261
|
.utrecht-data-placeholder--high-contrast {
|
|
2711
2262
|
cursor: var(--utrecht-action-busy-cursor, busy);
|
|
2712
2263
|
}
|
|
2713
|
-
|
|
2714
|
-
/**
|
|
2715
|
-
* @license EUPL-1.2
|
|
2716
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2717
|
-
*/
|
|
2718
2264
|
.utrecht-digid-button {
|
|
2719
2265
|
--utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 50px);
|
|
2720
2266
|
--utrecht-logo-max-block-size: var(--utrecht-digid-button-block-size, 50px);
|
|
@@ -2723,17 +2269,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2723
2269
|
display: inline-flex;
|
|
2724
2270
|
gap: var(--utrecht-space-inline-sm);
|
|
2725
2271
|
}
|
|
2726
|
-
|
|
2727
|
-
/**
|
|
2728
|
-
* @license EUPL-1.2
|
|
2729
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2730
|
-
*/
|
|
2731
|
-
/**
|
|
2732
|
-
* @license EUPL-1.2
|
|
2733
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2734
|
-
*/
|
|
2735
2272
|
.utrecht-document {
|
|
2736
|
-
|
|
2273
|
+
-webkit-font-smoothing: auto !important;
|
|
2274
|
+
-moz-osx-font-smoothing: auto !important;
|
|
2737
2275
|
color: var(--utrecht-document-color, inherit);
|
|
2738
2276
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
2739
2277
|
font-size: var(--utrecht-document-font-size, inherit);
|
|
@@ -2745,29 +2283,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2745
2283
|
text-size-adjust: none;
|
|
2746
2284
|
}
|
|
2747
2285
|
.utrecht-document :lang(ar) {
|
|
2748
|
-
/* `letter-spacing` design tokens break Arabic text rendering, avoid that */
|
|
2749
2286
|
letter-spacing: 0 !important;
|
|
2750
2287
|
}
|
|
2751
2288
|
|
|
2752
2289
|
.utrecht-document--surface {
|
|
2753
2290
|
background-color: var(--utrecht-document-background-color, inherit);
|
|
2754
2291
|
}
|
|
2755
|
-
|
|
2756
|
-
/**
|
|
2757
|
-
* @license EUPL-1.2
|
|
2758
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2759
|
-
*/
|
|
2760
|
-
/**
|
|
2761
|
-
* @license EUPL-1.2
|
|
2762
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2763
|
-
*/
|
|
2764
|
-
/**
|
|
2765
|
-
* @license EUPL-1.2
|
|
2766
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
2767
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
2768
|
-
*/
|
|
2769
2292
|
.utrecht-drawer {
|
|
2770
|
-
/* minimum size for backdrop with light-dismiss is 44px x 44px to meet WCAG SC 2.5.5 */
|
|
2771
2293
|
--_utrecht-drawer-backdrop-min-size: max(var(--utrecht-drawer-backdrop-min-size), 44px);
|
|
2772
2294
|
background-color: var(--utrecht-drawer-background-color, Canvas);
|
|
2773
2295
|
border-color: var(--utrecht-drawer-border-color, currentColor);
|
|
@@ -2871,15 +2393,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2871
2393
|
inset-block-end: 0;
|
|
2872
2394
|
inset-block-start: auto;
|
|
2873
2395
|
}
|
|
2874
|
-
|
|
2875
|
-
/**
|
|
2876
|
-
* @license EUPL-1.2
|
|
2877
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2878
|
-
*/
|
|
2879
|
-
/**
|
|
2880
|
-
* @license EUPL-1.2
|
|
2881
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2882
|
-
*/
|
|
2883
2396
|
.utrecht-emphasis--stressed {
|
|
2884
2397
|
font-style: var(--utrecht-emphasis-stressed-font-style, italic);
|
|
2885
2398
|
}
|
|
@@ -2887,15 +2400,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2887
2400
|
.utrecht-emphasis--strong {
|
|
2888
2401
|
font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
|
|
2889
2402
|
}
|
|
2890
|
-
|
|
2891
|
-
/**
|
|
2892
|
-
* @license EUPL-1.2
|
|
2893
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2894
|
-
*/
|
|
2895
|
-
/**
|
|
2896
|
-
* @license EUPL-1.2
|
|
2897
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2898
|
-
*/
|
|
2899
2403
|
.utrecht-figure {
|
|
2900
2404
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
|
|
2901
2405
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
|
|
@@ -2906,21 +2410,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2906
2410
|
font-size: var(--utrecht-figure-caption-font-size);
|
|
2907
2411
|
line-height: var(--utrecht-figure-caption-line-height);
|
|
2908
2412
|
}
|
|
2909
|
-
|
|
2910
|
-
/**
|
|
2911
|
-
* @license EUPL-1.2
|
|
2912
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2913
|
-
*/
|
|
2914
|
-
/**
|
|
2915
|
-
* @license EUPL-1.2
|
|
2916
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2917
|
-
*/
|
|
2918
2413
|
.utrecht-form-field-description {
|
|
2919
2414
|
--utrecht-document-color: currentColor;
|
|
2920
2415
|
color: var(--utrecht-form-field-description-color);
|
|
2921
2416
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
2922
2417
|
font-size: var(--utrecht-form-field-description-font-size, inherit);
|
|
2923
2418
|
font-style: var(--utrecht-form-field-description-font-style);
|
|
2419
|
+
line-height: var(--utrecht-form-field-description-line-height);
|
|
2924
2420
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
|
|
2925
2421
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
|
|
2926
2422
|
}
|
|
@@ -2943,15 +2439,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2943
2439
|
.utrecht-form-field-description--warning {
|
|
2944
2440
|
color: var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color));
|
|
2945
2441
|
}
|
|
2946
|
-
|
|
2947
|
-
/**
|
|
2948
|
-
* @license EUPL-1.2
|
|
2949
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2950
|
-
*/
|
|
2951
|
-
/**
|
|
2952
|
-
* @license EUPL-1.2
|
|
2953
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2954
|
-
*/
|
|
2955
2442
|
.utrecht-form-field-error-message {
|
|
2956
2443
|
--utrecht-document-color: currentColor;
|
|
2957
2444
|
background-color: var(--utrecht-form-field-error-message-background-color);
|
|
@@ -2960,6 +2447,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2960
2447
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
2961
2448
|
font-size: var(--utrecht-form-field-error-message-font-size, inherit);
|
|
2962
2449
|
font-style: var(--utrecht-form-field-error-message-font-style);
|
|
2450
|
+
line-height: var(--utrecht-form-field-error-message-line-height);
|
|
2963
2451
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
|
|
2964
2452
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
|
|
2965
2453
|
padding-block-end: var(--utrecht-form-field-error-message-padding-block-end);
|
|
@@ -2970,22 +2458,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
2970
2458
|
.utrecht-form-field-error-message > * {
|
|
2971
2459
|
--utrecht-space-around: 1;
|
|
2972
2460
|
}
|
|
2973
|
-
|
|
2974
|
-
/**
|
|
2975
|
-
* @license EUPL-1.2
|
|
2976
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2977
|
-
*/
|
|
2978
|
-
/**
|
|
2979
|
-
* @license EUPL-1.2
|
|
2980
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
2981
|
-
*/
|
|
2982
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
2983
2461
|
.utrecht-form-field {
|
|
2984
2462
|
break-inside: avoid;
|
|
2985
2463
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
2986
2464
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
|
|
2987
2465
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
|
|
2988
|
-
max-inline-size: var(--utrecht-form-field-max-inline-size);
|
|
2989
2466
|
page-break-inside: avoid;
|
|
2990
2467
|
}
|
|
2991
2468
|
|
|
@@ -3005,14 +2482,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3005
2482
|
gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
|
|
3006
2483
|
grid-template-areas: "input label" "input description" "input description-invalid";
|
|
3007
2484
|
grid-template-columns: var(--utrecht-checkbox-size) 100fr;
|
|
3008
|
-
/*
|
|
3009
|
-
.utrecht-form-field__label .utrecht-form-field__input {
|
|
3010
|
-
margin-inline-start: calc(
|
|
3011
|
-
-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
|
|
3012
|
-
);
|
|
3013
|
-
margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
|
|
3014
|
-
}
|
|
3015
|
-
*/
|
|
3016
2485
|
}
|
|
3017
2486
|
.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
|
|
3018
2487
|
margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
|
|
@@ -3026,14 +2495,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3026
2495
|
gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
|
|
3027
2496
|
grid-template-areas: "input label" "input description" "input description-invalid";
|
|
3028
2497
|
grid-template-columns: var(--utrecht-radio-button-size) 100fr;
|
|
3029
|
-
/*
|
|
3030
|
-
.utrecht-form-field__label .utrecht-form-field__input {
|
|
3031
|
-
margin-inline-start: calc(
|
|
3032
|
-
-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
|
|
3033
|
-
);
|
|
3034
|
-
margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
|
|
3035
|
-
}
|
|
3036
|
-
*/
|
|
3037
2498
|
}
|
|
3038
2499
|
.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
|
|
3039
2500
|
margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)));
|
|
@@ -3050,8 +2511,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3050
2511
|
}
|
|
3051
2512
|
|
|
3052
2513
|
.utrecht-form-field__label {
|
|
3053
|
-
/* Assign the margin-block-end to padding instead, so the clickable area of the label increases
|
|
3054
|
-
and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
|
|
3055
2514
|
grid-area: label;
|
|
3056
2515
|
margin-block-end: var(--utrecht-form-field-label-margin-block-end);
|
|
3057
2516
|
margin-block-start: 0;
|
|
@@ -3081,20 +2540,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3081
2540
|
grid-area: description-before;
|
|
3082
2541
|
order: 4;
|
|
3083
2542
|
}
|
|
3084
|
-
|
|
3085
|
-
/**
|
|
3086
|
-
* @license EUPL-1.2
|
|
3087
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3088
|
-
*/
|
|
3089
|
-
/**
|
|
3090
|
-
* @license EUPL-1.2
|
|
3091
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3092
|
-
*/
|
|
3093
|
-
/**
|
|
3094
|
-
* @license EUPL-1.2
|
|
3095
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3096
|
-
*/
|
|
3097
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3098
2543
|
.utrecht-form-fieldset {
|
|
3099
2544
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
|
|
3100
2545
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
|
|
@@ -3102,7 +2547,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3102
2547
|
|
|
3103
2548
|
.utrecht-form-fieldset--html-fieldset,
|
|
3104
2549
|
.utrecht-form-fieldset__fieldset--html-fieldset {
|
|
3105
|
-
/* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
|
|
3106
2550
|
all: revert;
|
|
3107
2551
|
border: 0;
|
|
3108
2552
|
margin-inline-end: 0;
|
|
@@ -3156,15 +2600,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3156
2600
|
border-inline-start-width: var(--utrecht-form-fieldset-invalid-border-inline-start-width, var(--utrecht-form-field-invalid-border-inline-start-width));
|
|
3157
2601
|
padding-inline-start: var(--utrecht-form-fieldset-invalid-padding-inline-start, var(--utrecht-form-field-invalid-padding-inline-start));
|
|
3158
2602
|
}
|
|
3159
|
-
|
|
3160
|
-
/**
|
|
3161
|
-
* @license EUPL-1.2
|
|
3162
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3163
|
-
*/
|
|
3164
|
-
/**
|
|
3165
|
-
* @license EUPL-1.2
|
|
3166
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3167
|
-
*/
|
|
3168
2603
|
.utrecht-form-label {
|
|
3169
2604
|
color: var(--utrecht-form-label-color);
|
|
3170
2605
|
font-size: var(--utrecht-form-label-font-size);
|
|
@@ -3191,21 +2626,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3191
2626
|
cursor: var(--utrecht-action-activate-cursor, revert);
|
|
3192
2627
|
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
3193
2628
|
}
|
|
3194
|
-
|
|
3195
|
-
/**
|
|
3196
|
-
* @license EUPL-1.2
|
|
3197
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3198
|
-
*/
|
|
3199
|
-
/**
|
|
3200
|
-
* @license EUPL-1.2
|
|
3201
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3202
|
-
*/
|
|
3203
|
-
/**
|
|
3204
|
-
* @license EUPL-1.2
|
|
3205
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3206
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3207
|
-
*/
|
|
3208
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3209
2629
|
.utrecht-form-toggle {
|
|
3210
2630
|
align-items: center;
|
|
3211
2631
|
block-size: var(--utrecht-form-toggle-height, 2em);
|
|
@@ -3233,18 +2653,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3233
2653
|
--utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
|
|
3234
2654
|
--utrecht-form-toggle-thumb-background-color: ButtonText;
|
|
3235
2655
|
--utrecht-form-toggle-thumb-disabled-background-color: GrayText;
|
|
3236
|
-
/* TODO: Apply `GrayText` to the border-color */
|
|
3237
2656
|
border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
|
|
3238
2657
|
border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
|
|
3239
|
-
/* TODO: Find a way to express the `pressed` state */
|
|
3240
2658
|
}
|
|
3241
2659
|
}
|
|
3242
2660
|
|
|
3243
2661
|
.utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div:focus-visible {
|
|
3244
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3245
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3246
|
-
* can combine it with the focus ring box shadow.
|
|
3247
|
-
*/
|
|
3248
2662
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3249
2663
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3250
2664
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -3267,7 +2681,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3267
2681
|
}
|
|
3268
2682
|
|
|
3269
2683
|
.utrecht-form-toggle__thumb {
|
|
3270
|
-
/* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
|
|
3271
2684
|
background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
|
|
3272
2685
|
border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
|
|
3273
2686
|
box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
|
|
@@ -3314,10 +2727,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3314
2727
|
}
|
|
3315
2728
|
|
|
3316
2729
|
.utrecht-form-toggle__track--focus-visible {
|
|
3317
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3318
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3319
|
-
* can combine it with the focus ring box shadow.
|
|
3320
|
-
*/
|
|
3321
2730
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3322
2731
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3323
2732
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -3328,26 +2737,19 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3328
2737
|
}
|
|
3329
2738
|
|
|
3330
2739
|
.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
|
|
3331
|
-
/* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
|
|
3332
2740
|
block-size: 1px !important;
|
|
3333
2741
|
border: 0 !important;
|
|
3334
2742
|
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
3335
2743
|
-webkit-clip-path: inset(50%) !important;
|
|
3336
2744
|
clip-path: inset(50%) !important;
|
|
3337
2745
|
inline-size: 1px !important;
|
|
3338
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3339
2746
|
margin: -1px !important;
|
|
3340
2747
|
overflow: hidden !important;
|
|
3341
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3342
2748
|
padding: 0 !important;
|
|
3343
2749
|
position: absolute !important;
|
|
3344
2750
|
white-space: nowrap !important;
|
|
3345
2751
|
}
|
|
3346
2752
|
.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible ~ .utrecht-form-toggle__track {
|
|
3347
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3348
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3349
|
-
* can combine it with the focus ring box shadow.
|
|
3350
|
-
*/
|
|
3351
2753
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3352
2754
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3353
2755
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -3356,37 +2758,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3356
2758
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3357
2759
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3358
2760
|
}
|
|
3359
|
-
/**
|
|
3360
|
-
* @license EUPL-1.2
|
|
3361
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
3362
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
3363
|
-
*/
|
|
3364
|
-
/**
|
|
3365
|
-
* @license EUPL-1.2
|
|
3366
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
3367
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
3368
|
-
*/
|
|
3369
2761
|
.utrecht-form {
|
|
3370
2762
|
display: block;
|
|
3371
2763
|
max-inline-size: var(--utrecht-form-max-inline-size);
|
|
3372
2764
|
}
|
|
3373
|
-
|
|
3374
|
-
/**
|
|
3375
|
-
* @license EUPL-1.2
|
|
3376
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3377
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3378
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3379
|
-
*/
|
|
3380
|
-
/**
|
|
3381
|
-
* @license EUPL-1.2
|
|
3382
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3383
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3384
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3385
|
-
*/
|
|
3386
|
-
/**
|
|
3387
|
-
* @license EUPL-1.2
|
|
3388
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
3389
|
-
*/
|
|
3390
2765
|
.utrecht-heading-1 {
|
|
3391
2766
|
break-inside: avoid-column;
|
|
3392
2767
|
page-break-inside: avoid;
|
|
@@ -3403,23 +2778,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3403
2778
|
.utrecht-heading-1--distanced {
|
|
3404
2779
|
--utrecht-space-around: 1;
|
|
3405
2780
|
}
|
|
3406
|
-
|
|
3407
|
-
/**
|
|
3408
|
-
* @license EUPL-1.2
|
|
3409
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3410
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3411
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3412
|
-
*/
|
|
3413
|
-
/**
|
|
3414
|
-
* @license EUPL-1.2
|
|
3415
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3416
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3417
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3418
|
-
*/
|
|
3419
|
-
/**
|
|
3420
|
-
* @license EUPL-1.2
|
|
3421
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
3422
|
-
*/
|
|
3423
2781
|
.utrecht-heading-2 {
|
|
3424
2782
|
break-inside: avoid-column;
|
|
3425
2783
|
page-break-inside: avoid;
|
|
@@ -3436,23 +2794,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3436
2794
|
.utrecht-heading-2--distanced {
|
|
3437
2795
|
--utrecht-space-around: 1;
|
|
3438
2796
|
}
|
|
3439
|
-
|
|
3440
|
-
/**
|
|
3441
|
-
* @license EUPL-1.2
|
|
3442
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3443
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3444
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3445
|
-
*/
|
|
3446
|
-
/**
|
|
3447
|
-
* @license EUPL-1.2
|
|
3448
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3449
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3450
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3451
|
-
*/
|
|
3452
|
-
/**
|
|
3453
|
-
* @license EUPL-1.2
|
|
3454
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
3455
|
-
*/
|
|
3456
2797
|
.utrecht-heading-3 {
|
|
3457
2798
|
break-inside: avoid-column;
|
|
3458
2799
|
page-break-inside: avoid;
|
|
@@ -3469,23 +2810,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3469
2810
|
.utrecht-heading-3--distanced {
|
|
3470
2811
|
--utrecht-space-around: 1;
|
|
3471
2812
|
}
|
|
3472
|
-
|
|
3473
|
-
/**
|
|
3474
|
-
* @license EUPL-1.2
|
|
3475
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3476
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3477
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3478
|
-
*/
|
|
3479
|
-
/**
|
|
3480
|
-
* @license EUPL-1.2
|
|
3481
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3482
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3483
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3484
|
-
*/
|
|
3485
|
-
/**
|
|
3486
|
-
* @license EUPL-1.2
|
|
3487
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
3488
|
-
*/
|
|
3489
2813
|
.utrecht-heading-4 {
|
|
3490
2814
|
break-inside: avoid-column;
|
|
3491
2815
|
page-break-inside: avoid;
|
|
@@ -3502,23 +2826,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3502
2826
|
.utrecht-heading-4--distanced {
|
|
3503
2827
|
--utrecht-space-around: 1;
|
|
3504
2828
|
}
|
|
3505
|
-
|
|
3506
|
-
/**
|
|
3507
|
-
* @license EUPL-1.2
|
|
3508
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3509
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3510
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3511
|
-
*/
|
|
3512
|
-
/**
|
|
3513
|
-
* @license EUPL-1.2
|
|
3514
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3515
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3516
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3517
|
-
*/
|
|
3518
|
-
/**
|
|
3519
|
-
* @license EUPL-1.2
|
|
3520
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
3521
|
-
*/
|
|
3522
2829
|
.utrecht-heading-5 {
|
|
3523
2830
|
break-inside: avoid-column;
|
|
3524
2831
|
page-break-inside: avoid;
|
|
@@ -3535,23 +2842,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3535
2842
|
.utrecht-heading-5--distanced {
|
|
3536
2843
|
--utrecht-space-around: 1;
|
|
3537
2844
|
}
|
|
3538
|
-
|
|
3539
|
-
/**
|
|
3540
|
-
* @license EUPL-1.2
|
|
3541
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3542
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3543
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3544
|
-
*/
|
|
3545
|
-
/**
|
|
3546
|
-
* @license EUPL-1.2
|
|
3547
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3548
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3549
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3550
|
-
*/
|
|
3551
|
-
/**
|
|
3552
|
-
* @license EUPL-1.2
|
|
3553
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
3554
|
-
*/
|
|
3555
2845
|
.utrecht-heading-6 {
|
|
3556
2846
|
break-inside: avoid-column;
|
|
3557
2847
|
page-break-inside: avoid;
|
|
@@ -3568,19 +2858,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3568
2858
|
.utrecht-heading-6--distanced {
|
|
3569
2859
|
--utrecht-space-around: 1;
|
|
3570
2860
|
}
|
|
3571
|
-
|
|
3572
|
-
/**
|
|
3573
|
-
* @license EUPL-1.2
|
|
3574
|
-
* Copyright (c) 2022 Gemeente Utrecht
|
|
3575
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
3576
|
-
* Copyright (c) 2022 The Knights Who Say NIH! B.V.
|
|
3577
|
-
*/
|
|
3578
|
-
/**
|
|
3579
|
-
* @license EUPL-1.2
|
|
3580
|
-
* Copyright (c) 2022 Gemeente Utrecht
|
|
3581
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
3582
|
-
* Copyright (c) 2022 The Knights Who Say NIH! B.V.
|
|
3583
|
-
*/
|
|
3584
2861
|
.utrecht-heading-group {
|
|
3585
2862
|
--utrecht-pre-heading-order: -1;
|
|
3586
2863
|
display: flex;
|
|
@@ -3591,33 +2868,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3591
2868
|
.utrecht-heading-group > * {
|
|
3592
2869
|
--utrecht-space-around: 0;
|
|
3593
2870
|
}
|
|
3594
|
-
|
|
3595
|
-
/**
|
|
3596
|
-
* @license EUPL-1.2
|
|
3597
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3598
|
-
*/
|
|
3599
|
-
/**
|
|
3600
|
-
* @license EUPL-1.2
|
|
3601
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3602
|
-
*/
|
|
3603
2871
|
.utrecht-iban-data {
|
|
3604
|
-
/* lining-nums: avoid "oldstyle-nums" where some numbers have descenders */
|
|
3605
|
-
/* slashed-zero: avoid confusion between LATIN LETTER O (U+004F) and DIGIT ZERO (U+0030) */
|
|
3606
|
-
/* tabular-nums: vertically align IBAN values */
|
|
3607
2872
|
font-variant-numeric: lining-nums slashed-zero tabular-nums;
|
|
3608
2873
|
white-space: nowrap;
|
|
3609
2874
|
}
|
|
3610
|
-
|
|
3611
|
-
/**
|
|
3612
|
-
* @license EUPL-1.2
|
|
3613
|
-
* Copyright (c) 2021-2022 Gemeente Utrecht
|
|
3614
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
3615
|
-
*/
|
|
3616
|
-
/**
|
|
3617
|
-
* @license EUPL-1.2
|
|
3618
|
-
* Copyright (c) 2021-2022 Gemeente Utrecht
|
|
3619
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
3620
|
-
*/
|
|
3621
2875
|
.utrecht-icon {
|
|
3622
2876
|
block-size: var(--utrecht-icon-size);
|
|
3623
2877
|
color: var(--utrecht-icon-color);
|
|
@@ -3629,63 +2883,24 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3629
2883
|
}
|
|
3630
2884
|
|
|
3631
2885
|
.utrecht-icon svg {
|
|
3632
|
-
/*
|
|
3633
|
-
* Override the width of SVGs when they are hardcoded, and avoid oversized SVG icons.
|
|
3634
|
-
* For example:
|
|
3635
|
-
*
|
|
3636
|
-
* <svg width="128px" height="128px">
|
|
3637
|
-
*/
|
|
3638
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3639
2886
|
height: 100%;
|
|
3640
|
-
/* Remove tooltip from SVG `<title>` element using `pointer-events: none` */
|
|
3641
2887
|
pointer-events: none;
|
|
3642
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3643
2888
|
width: 100%;
|
|
3644
2889
|
}
|
|
3645
|
-
|
|
3646
|
-
/**
|
|
3647
|
-
* @license EUPL-1.2
|
|
3648
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
3649
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
3650
|
-
*/
|
|
3651
|
-
/**
|
|
3652
|
-
* @license EUPL-1.2
|
|
3653
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
3654
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
3655
|
-
*/
|
|
3656
2890
|
.utrecht-img {
|
|
3657
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3658
2891
|
height: auto;
|
|
3659
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3660
2892
|
width: auto;
|
|
3661
2893
|
}
|
|
3662
2894
|
|
|
3663
2895
|
.utrecht-img--scale-down {
|
|
3664
|
-
/* use this class name with caution, text contained in image might become too small to read */
|
|
3665
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3666
2896
|
max-height: 100%;
|
|
3667
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3668
2897
|
max-width: 100%;
|
|
3669
2898
|
}
|
|
3670
2899
|
|
|
3671
2900
|
.utrecht-img--photo {
|
|
3672
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3673
2901
|
max-height: 100%;
|
|
3674
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
3675
2902
|
max-width: 100%;
|
|
3676
2903
|
}
|
|
3677
|
-
|
|
3678
|
-
/**
|
|
3679
|
-
* @license EUPL-1.2
|
|
3680
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
3681
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
3682
|
-
*/
|
|
3683
|
-
/**
|
|
3684
|
-
* @license EUPL-1.2
|
|
3685
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
3686
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
3687
|
-
*/
|
|
3688
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3689
2904
|
.utrecht-index-char-nav {
|
|
3690
2905
|
--utrecht-button-padding-inline-start: 1ch;
|
|
3691
2906
|
--utrecht-button-padding-inline-end: 1ch;
|
|
@@ -3704,106 +2919,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
3704
2919
|
.utrecht-index-char-nav__link--disabled {
|
|
3705
2920
|
pointer-events: none;
|
|
3706
2921
|
}
|
|
3707
|
-
|
|
3708
|
-
/**
|
|
3709
|
-
* @license EUPL-1.2
|
|
3710
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
3711
|
-
*/
|
|
3712
|
-
/**
|
|
3713
|
-
* @license EUPL-1.2
|
|
3714
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
3715
|
-
*/
|
|
3716
|
-
/**
|
|
3717
|
-
* @license EUPL-1.2
|
|
3718
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
3719
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3720
|
-
*/
|
|
3721
|
-
/* stylelint-disable scss/no-global-function-names */
|
|
3722
|
-
/**
|
|
3723
|
-
* @license EUPL-1.2
|
|
3724
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3725
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3726
|
-
*/
|
|
3727
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3728
|
-
/*
|
|
3729
|
-
|
|
3730
|
-
# CSS implementation
|
|
3731
|
-
|
|
3732
|
-
## `text-decoration-skip`
|
|
3733
|
-
|
|
3734
|
-
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
3735
|
-
For example by obscuring Arabic diacritics.
|
|
3736
|
-
|
|
3737
|
-
However, the combination of a greater thickness and skipping this thick underline
|
|
3738
|
-
leads to a very unappealing rendering of the underline. To avoid this,
|
|
3739
|
-
`text-decoration-skip` is disabled for interactive states.
|
|
3740
|
-
|
|
3741
|
-
For design token configurations that have identical thickness for normal and interactive
|
|
3742
|
-
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
3743
|
-
from an interrupted to an uninterrupted underline (for some texts).
|
|
3744
|
-
|
|
3745
|
-
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
3746
|
-
|
|
3747
|
-
---
|
|
3748
|
-
|
|
3749
|
-
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
3750
|
-
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
3751
|
-
not make this too inconvenient.
|
|
3752
|
-
|
|
3753
|
-
---
|
|
3754
|
-
|
|
3755
|
-
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
3756
|
-
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
3757
|
-
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
3758
|
-
|
|
3759
|
-
## `text-decoration-thickness`
|
|
3760
|
-
|
|
3761
|
-
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
3762
|
-
|
|
3763
|
-
---
|
|
3764
|
-
|
|
3765
|
-
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
3766
|
-
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
3767
|
-
the underline offset also seems to increase along with the thickness, which effectively means
|
|
3768
|
-
the underline is closer to the next line than in Safari.
|
|
3769
|
-
|
|
3770
|
-
---
|
|
3771
|
-
|
|
3772
|
-
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
3773
|
-
use the `max()` function to ensure the underline remains visible for every font size.
|
|
3774
|
-
|
|
3775
|
-
## `transition`
|
|
3776
|
-
|
|
3777
|
-
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
3778
|
-
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
3779
|
-
|
|
3780
|
-
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
3781
|
-
|
|
3782
|
-
*/
|
|
3783
|
-
/**
|
|
3784
|
-
* Simulate forced-colors mode.
|
|
3785
|
-
*/
|
|
3786
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3787
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3788
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3789
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3790
|
-
/**
|
|
3791
|
-
* Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
|
|
3792
|
-
*
|
|
3793
|
-
* Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
|
|
3794
|
-
*/
|
|
3795
|
-
/**
|
|
3796
|
-
* @license EUPL-1.2
|
|
3797
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3798
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3799
|
-
*/
|
|
3800
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3801
2922
|
.utrecht-link-button {
|
|
3802
2923
|
--utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
|
|
3803
2924
|
color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
|
|
3804
|
-
/* Only underline `<a href="...">...</a>`, which matches `a:any-link`.
|
|
3805
|
-
* Do not underline `<a name="">Anchor</a>`.
|
|
3806
|
-
*/
|
|
3807
2925
|
--_utrecht-link-forced-colors-color: linktext;
|
|
3808
2926
|
text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
|
|
3809
2927
|
text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
@@ -3859,14 +2977,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3859
2977
|
}
|
|
3860
2978
|
|
|
3861
2979
|
.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
|
|
3862
|
-
/*
|
|
3863
|
-
* WCAG SC 2.4.12: Focus Not Obscured
|
|
3864
|
-
* Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
|
|
3865
|
-
*/
|
|
3866
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3867
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3868
|
-
* can combine it with the focus ring box shadow.
|
|
3869
|
-
*/
|
|
3870
2980
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3871
2981
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3872
2982
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -3893,33 +3003,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3893
3003
|
}
|
|
3894
3004
|
|
|
3895
3005
|
.utrecht-link-button--pressed {
|
|
3896
|
-
/* Copy `active` styles for now.
|
|
3897
|
-
Later we can decide to:
|
|
3898
|
-
- merge `active` and `pressed` and name the state `pressed`, or:
|
|
3899
|
-
- merge `active` and `pressed` and name the state `active`, or:
|
|
3900
|
-
- style `pressed` like the link state `current`, or:
|
|
3901
|
-
- add `pressed` design tokens
|
|
3902
|
-
*/
|
|
3903
3006
|
--_utrecht-link-forced-colors-color: activetext;
|
|
3904
3007
|
--_utrecht-link-state-color: var(--utrecht-link-active-color);
|
|
3905
3008
|
}
|
|
3906
3009
|
|
|
3907
3010
|
.utrecht-link-button--html-button {
|
|
3908
3011
|
background-color: transparent;
|
|
3909
|
-
/* reset <button> styling */
|
|
3910
3012
|
border-width: 0;
|
|
3911
3013
|
}
|
|
3912
|
-
/**
|
|
3913
|
-
* @license EUPL-1.2
|
|
3914
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3915
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3916
|
-
*/
|
|
3917
|
-
/**
|
|
3918
|
-
* @license EUPL-1.2
|
|
3919
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3920
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3921
|
-
*/
|
|
3922
|
-
/* reset before other stylesheets */
|
|
3923
3014
|
.utrecht-link-list--html-ul {
|
|
3924
3015
|
margin-block-end: 0;
|
|
3925
3016
|
margin-block-start: 0;
|
|
@@ -3932,9 +3023,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3932
3023
|
}
|
|
3933
3024
|
|
|
3934
3025
|
.utrecht-link-list {
|
|
3935
|
-
/* TODO: I wish we could make `--utrecht-link-text-decoration` fall back to `var(--utrecht-link-text-decoration)`
|
|
3936
|
-
* when `var(--utrecht-link-list-text-decoration)` is not set.
|
|
3937
|
-
*/
|
|
3938
3026
|
--utrecht-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start);
|
|
3939
3027
|
--utrecht-icon-size: var(--utrecht-link-list-icon-size);
|
|
3940
3028
|
--utrecht-link-icon-size: var(--utrecht-link-list-icon-size);
|
|
@@ -3956,19 +3044,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3956
3044
|
display: inline-flex;
|
|
3957
3045
|
font-weight: var(--utrecht-link-list-link-font-weight);
|
|
3958
3046
|
}
|
|
3959
|
-
|
|
3960
|
-
/**
|
|
3961
|
-
* @license EUPL-1.2
|
|
3962
|
-
* Copyright (c) 2022 The Knights Who Say NIH! B.V.
|
|
3963
|
-
* Copyright (c) 2022 Gemeente Utrecht
|
|
3964
|
-
*/
|
|
3965
|
-
/* stylelint-disable scss/no-global-function-names */
|
|
3966
|
-
/**
|
|
3967
|
-
* @license EUPL-1.2
|
|
3968
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
3969
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
3970
|
-
*/
|
|
3971
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
3972
3047
|
.utrecht-link-social {
|
|
3973
3048
|
--utrecht-icon-size: var(--utrecht-link-social-icon-size);
|
|
3974
3049
|
--utrecht-icon-color: currentColor;
|
|
@@ -3994,10 +3069,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3994
3069
|
|
|
3995
3070
|
.utrecht-link-social:focus-visible,
|
|
3996
3071
|
.utrecht-link-social--focus-visible {
|
|
3997
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3998
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3999
|
-
* can combine it with the focus ring box shadow.
|
|
4000
|
-
*/
|
|
4001
3072
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4002
3073
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4003
3074
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -4010,107 +3081,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4010
3081
|
.utrecht-link-social--distanced {
|
|
4011
3082
|
margin-inline-start: var(--utrecht-link-social-margin-inline-start);
|
|
4012
3083
|
}
|
|
4013
|
-
|
|
4014
|
-
/**
|
|
4015
|
-
* @license EUPL-1.2
|
|
4016
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
4017
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4018
|
-
*/
|
|
4019
|
-
/* stylelint-disable scss/no-global-function-names */
|
|
4020
|
-
/**
|
|
4021
|
-
* @license EUPL-1.2
|
|
4022
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4023
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4024
|
-
*/
|
|
4025
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4026
|
-
/**
|
|
4027
|
-
* @license EUPL-1.2
|
|
4028
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
4029
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4030
|
-
*/
|
|
4031
|
-
/* stylelint-disable scss/no-global-function-names */
|
|
4032
|
-
/**
|
|
4033
|
-
* @license EUPL-1.2
|
|
4034
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4035
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4036
|
-
*/
|
|
4037
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4038
|
-
/*
|
|
4039
|
-
|
|
4040
|
-
# CSS implementation
|
|
4041
|
-
|
|
4042
|
-
## `text-decoration-skip`
|
|
4043
|
-
|
|
4044
|
-
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
4045
|
-
For example by obscuring Arabic diacritics.
|
|
4046
|
-
|
|
4047
|
-
However, the combination of a greater thickness and skipping this thick underline
|
|
4048
|
-
leads to a very unappealing rendering of the underline. To avoid this,
|
|
4049
|
-
`text-decoration-skip` is disabled for interactive states.
|
|
4050
|
-
|
|
4051
|
-
For design token configurations that have identical thickness for normal and interactive
|
|
4052
|
-
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
4053
|
-
from an interrupted to an uninterrupted underline (for some texts).
|
|
4054
|
-
|
|
4055
|
-
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
4056
|
-
|
|
4057
|
-
---
|
|
4058
|
-
|
|
4059
|
-
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
4060
|
-
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
4061
|
-
not make this too inconvenient.
|
|
4062
|
-
|
|
4063
|
-
---
|
|
4064
|
-
|
|
4065
|
-
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
4066
|
-
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
4067
|
-
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
4068
|
-
|
|
4069
|
-
## `text-decoration-thickness`
|
|
4070
|
-
|
|
4071
|
-
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
4072
|
-
|
|
4073
|
-
---
|
|
4074
|
-
|
|
4075
|
-
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
4076
|
-
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
4077
|
-
the underline offset also seems to increase along with the thickness, which effectively means
|
|
4078
|
-
the underline is closer to the next line than in Safari.
|
|
4079
|
-
|
|
4080
|
-
---
|
|
4081
|
-
|
|
4082
|
-
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
4083
|
-
use the `max()` function to ensure the underline remains visible for every font size.
|
|
4084
|
-
|
|
4085
|
-
## `transition`
|
|
4086
|
-
|
|
4087
|
-
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
4088
|
-
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
4089
|
-
|
|
4090
|
-
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
4091
|
-
|
|
4092
|
-
*/
|
|
4093
|
-
/**
|
|
4094
|
-
* Simulate forced-colors mode.
|
|
4095
|
-
*/
|
|
4096
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4097
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4098
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4099
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4100
|
-
/**
|
|
4101
|
-
* Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
|
|
4102
|
-
*
|
|
4103
|
-
* Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
|
|
4104
|
-
*/
|
|
4105
3084
|
.utrecht-link {
|
|
4106
3085
|
--utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
|
|
4107
3086
|
color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
|
|
4108
3087
|
}
|
|
4109
3088
|
|
|
4110
3089
|
.utrecht-link:any-link {
|
|
4111
|
-
/* Only underline `<a href="...">...</a>`, which matches `a:any-link`.
|
|
4112
|
-
* Do not underline `<a name="">Anchor</a>`.
|
|
4113
|
-
*/
|
|
4114
3090
|
--_utrecht-link-forced-colors-color: linktext;
|
|
4115
3091
|
text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
|
|
4116
3092
|
text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
@@ -4133,8 +3109,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4133
3109
|
--_utrecht-link-forced-colors-color: visitedtext;
|
|
4134
3110
|
--_utrecht-link-state-color: var(--utrecht-link-visited-color);
|
|
4135
3111
|
}
|
|
4136
|
-
|
|
4137
|
-
/* `:hover` should only apply to links with `href`, not on disabled links */
|
|
4138
3112
|
.utrecht-link--html-a:any-link:hover,
|
|
4139
3113
|
.utrecht-link--hover {
|
|
4140
3114
|
--_utrecht-link-forced-colors-color: linktext;
|
|
@@ -4155,14 +3129,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4155
3129
|
}
|
|
4156
3130
|
|
|
4157
3131
|
.utrecht-link--focus-visible {
|
|
4158
|
-
/*
|
|
4159
|
-
* WCAG SC 2.4.12: Focus Not Obscured
|
|
4160
|
-
* Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
|
|
4161
|
-
*/
|
|
4162
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4163
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4164
|
-
* can combine it with the focus ring box shadow.
|
|
4165
|
-
*/
|
|
4166
3132
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4167
3133
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4168
3134
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -4172,8 +3138,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4172
3138
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4173
3139
|
z-index: var(--utrecht-stack-focus-z-index, 1);
|
|
4174
3140
|
}
|
|
4175
|
-
|
|
4176
|
-
/* `:focus` should only apply to links with `href`, not on disabled links */
|
|
4177
3141
|
.utrecht-link--html-span:focus,
|
|
4178
3142
|
.utrecht-link--html-a:any-link:focus {
|
|
4179
3143
|
--_utrecht-link-state-color: var(--utrecht-link-focus-color);
|
|
@@ -4182,14 +3146,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4182
3146
|
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
4183
3147
|
text-decoration-skip: none;
|
|
4184
3148
|
text-decoration-skip-ink: none;
|
|
4185
|
-
/*
|
|
4186
|
-
* WCAG SC 2.4.12: Focus Not Obscured
|
|
4187
|
-
* Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
|
|
4188
|
-
*/
|
|
4189
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4190
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4191
|
-
* can combine it with the focus ring box shadow.
|
|
4192
|
-
*/
|
|
4193
3149
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4194
3150
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4195
3151
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -4202,7 +3158,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4202
3158
|
|
|
4203
3159
|
.utrecht-link--html-span:focus:not(:focus-visible),
|
|
4204
3160
|
.utrecht-link--html-a:any-link:focus:not(:focus-visible) {
|
|
4205
|
-
/* undo focus ring */
|
|
4206
3161
|
box-shadow: none;
|
|
4207
3162
|
outline-style: revert;
|
|
4208
3163
|
}
|
|
@@ -4239,15 +3194,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4239
3194
|
font-weight: var(--utrecht-link-placeholder-font-weight);
|
|
4240
3195
|
text-decoration-line: none;
|
|
4241
3196
|
}
|
|
4242
|
-
|
|
4243
|
-
/**
|
|
4244
|
-
* Simulate forced-colors mode.
|
|
4245
|
-
*/
|
|
4246
3197
|
.utrecht-link--forced-colors {
|
|
4247
|
-
/* Some others choose `transparent` to trigger `currentColor` for `inverse-outline-color`,
|
|
4248
|
-
* however this doesn't guarantee significant contrast between `outline-color` and `inverse-outline-color`.
|
|
4249
|
-
* That's why we use `Highlight` vs `HighlightText`.
|
|
4250
|
-
*/
|
|
4251
3198
|
--utrecht-focus-outline-color: Highlight;
|
|
4252
3199
|
--utrecht-focus-inverse-outline-color: HighlightText;
|
|
4253
3200
|
--utrecht-link-color: linktext;
|
|
@@ -4257,12 +3204,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4257
3204
|
--utrecht-link-visited-color: visitedtext;
|
|
4258
3205
|
--utrecht-link-placeholder-color: GrayText;
|
|
4259
3206
|
}
|
|
4260
|
-
|
|
4261
|
-
/**
|
|
4262
|
-
* @license EUPL-1.2
|
|
4263
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
4264
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4265
|
-
*/
|
|
4266
3207
|
.utrecht-list-social {
|
|
4267
3208
|
display: flex;
|
|
4268
3209
|
margin-block-end: var(--utrecht-list-social-margin-block-end);
|
|
@@ -4278,22 +3219,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4278
3219
|
.utrecht-list-social__item:last-child {
|
|
4279
3220
|
margin-inline-end: 0;
|
|
4280
3221
|
}
|
|
4281
|
-
|
|
4282
|
-
/**
|
|
4283
|
-
* @license EUPL-1.2
|
|
4284
|
-
* Copyright (c) 2023 Frameless B.V.
|
|
4285
|
-
*/
|
|
4286
|
-
/**
|
|
4287
|
-
* @license EUPL-1.2
|
|
4288
|
-
* Copyright (c) 2023 Frameless B.V.
|
|
4289
|
-
*/
|
|
4290
|
-
/**
|
|
4291
|
-
* @license EUPL-1.2
|
|
4292
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4293
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4294
|
-
*/
|
|
4295
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4296
|
-
/* order is after default option styling */
|
|
4297
3222
|
.utrecht-listbox {
|
|
4298
3223
|
--utrecht-listbox-max-block-size: 300px;
|
|
4299
3224
|
background-color: var(--utrecht-listbox-background-color);
|
|
@@ -4319,7 +3244,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4319
3244
|
}
|
|
4320
3245
|
@media (forced-colors: active) {
|
|
4321
3246
|
.utrecht-listbox {
|
|
4322
|
-
/* Use inversed disabled colors for selected options */
|
|
4323
3247
|
--utrecht-listbox-option-selected-background-color: Highlight;
|
|
4324
3248
|
--utrecht-listbox-option-selected-color: HighlightText;
|
|
4325
3249
|
--utrecht-listbox-option-disabled-background-color: field;
|
|
@@ -4330,14 +3254,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4330
3254
|
}
|
|
4331
3255
|
|
|
4332
3256
|
.utrecht-listbox--focus {
|
|
4333
|
-
/* TODO: Implement CSS of focus listbox */
|
|
4334
3257
|
}
|
|
4335
3258
|
|
|
4336
3259
|
.utrecht-listbox--focus-visible {
|
|
4337
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4338
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4339
|
-
* can combine it with the focus ring box shadow.
|
|
4340
|
-
*/
|
|
4341
3260
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4342
3261
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4343
3262
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -4348,11 +3267,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4348
3267
|
}
|
|
4349
3268
|
|
|
4350
3269
|
.utrecht-listbox--invalid {
|
|
4351
|
-
/* TODO: Implement CSS of invalid listbox */
|
|
4352
3270
|
}
|
|
4353
3271
|
|
|
4354
3272
|
.utrecht-listbox--read-only {
|
|
4355
|
-
/* TODO: Implement CSS of read-only listbox */
|
|
4356
3273
|
}
|
|
4357
3274
|
|
|
4358
3275
|
.utrecht-listbox__list {
|
|
@@ -4402,7 +3319,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4402
3319
|
}
|
|
4403
3320
|
@media (forced-colors: active) {
|
|
4404
3321
|
.utrecht-listbox__option {
|
|
4405
|
-
/* Fix rendering glitch in Google Chrome, where the text became black on a black background */
|
|
4406
3322
|
forced-color-adjust: none;
|
|
4407
3323
|
}
|
|
4408
3324
|
}
|
|
@@ -4423,10 +3339,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4423
3339
|
}
|
|
4424
3340
|
|
|
4425
3341
|
.utrecht-listbox__option--focus-visible {
|
|
4426
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4427
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4428
|
-
* can combine it with the focus ring box shadow.
|
|
4429
|
-
*/
|
|
4430
3342
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4431
3343
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4432
3344
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -4434,7 +3346,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4434
3346
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4435
3347
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4436
3348
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4437
|
-
/* ensure the focus outline is rendered inside the `overflow` container */
|
|
4438
3349
|
--utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
|
|
4439
3350
|
}
|
|
4440
3351
|
|
|
@@ -4462,12 +3373,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4462
3373
|
}
|
|
4463
3374
|
|
|
4464
3375
|
.utrecht-listbox--disabled {
|
|
4465
|
-
/* TODO: Implement CSS of disabled listbox */
|
|
4466
3376
|
cursor: var(--utrecht-action-disabled-cursor, not-allowed);
|
|
4467
3377
|
}
|
|
4468
3378
|
@media (forced-colors: active) {
|
|
4469
3379
|
.utrecht-listbox--disabled {
|
|
4470
|
-
/* Use inversed disabled colors for selected options */
|
|
4471
3380
|
--utrecht-listbox-option-selected-background-color: GrayText;
|
|
4472
3381
|
--utrecht-listbox-option-selected-color: field;
|
|
4473
3382
|
--utrecht-listbox-option-background-color: field;
|
|
@@ -4478,13 +3387,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4478
3387
|
}
|
|
4479
3388
|
|
|
4480
3389
|
.utrecht-listbox--html-div:focus {
|
|
4481
|
-
/* TODO: Implement CSS of focus listbox */
|
|
4482
3390
|
}
|
|
4483
3391
|
.utrecht-listbox--html-div:focus-visible {
|
|
4484
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4485
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4486
|
-
* can combine it with the focus ring box shadow.
|
|
4487
|
-
*/
|
|
4488
3392
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4489
3393
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4490
3394
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -4493,11 +3397,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4493
3397
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4494
3398
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4495
3399
|
}
|
|
4496
|
-
|
|
4497
|
-
/**
|
|
4498
|
-
* @license EUPL-1.2
|
|
4499
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4500
|
-
*/
|
|
4501
3400
|
.utrecht-logo-button {
|
|
4502
3401
|
--utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
|
|
4503
3402
|
--utrecht-button-min-block-size: var(--utrecht-logo-button-block-size, 50px);
|
|
@@ -4507,13 +3406,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4507
3406
|
display: inline-flex;
|
|
4508
3407
|
gap: var(--utrecht-space-inline-sm);
|
|
4509
3408
|
}
|
|
4510
|
-
|
|
4511
|
-
/**
|
|
4512
|
-
* @license EUPL-1.2
|
|
4513
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4514
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4515
|
-
*/
|
|
4516
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4517
3409
|
.utrecht-logo-image__decoration-1 {
|
|
4518
3410
|
fill: var(--utrecht-logo-decoration-1-color, #fff);
|
|
4519
3411
|
}
|
|
@@ -4525,17 +3417,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4525
3417
|
.utrecht-logo-image__decoration-3 {
|
|
4526
3418
|
fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
|
|
4527
3419
|
}
|
|
4528
|
-
|
|
4529
|
-
/**
|
|
4530
|
-
* @license EUPL-1.2
|
|
4531
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4532
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4533
|
-
*/
|
|
4534
|
-
/**
|
|
4535
|
-
* @license EUPL-1.2
|
|
4536
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4537
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4538
|
-
*/
|
|
4539
3420
|
.utrecht-logo {
|
|
4540
3421
|
display: block;
|
|
4541
3422
|
max-block-size: var(--utrecht-logo-max-block-size, 192px);
|
|
@@ -4543,24 +3424,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4543
3424
|
min-block-size: var(--utrecht-logo-min-block-size);
|
|
4544
3425
|
min-inline-size: var(--utrecht-logo-min-inline-size);
|
|
4545
3426
|
}
|
|
4546
|
-
|
|
4547
|
-
/* The element in side `<div class="utrecht-logo">` can be an `<img>`, `<svg>` or even a custom element. */
|
|
4548
3427
|
.utrecht-logo > * {
|
|
4549
3428
|
block-size: 100%;
|
|
4550
3429
|
display: inline-block;
|
|
4551
3430
|
inline-size: auto;
|
|
4552
3431
|
}
|
|
4553
|
-
|
|
4554
|
-
/**
|
|
4555
|
-
* @license EUPL-1.2
|
|
4556
|
-
* Copyright (c) 2022 Gemeente Utrecht
|
|
4557
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
4558
|
-
*/
|
|
4559
|
-
/**
|
|
4560
|
-
* @license EUPL-1.2
|
|
4561
|
-
* Copyright (c) 2022 Gemeente Utrecht
|
|
4562
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
4563
|
-
*/
|
|
4564
3432
|
.utrecht-map-marker {
|
|
4565
3433
|
--utrecht-icon-size: var(--utrecht-map-marker-icon-size);
|
|
4566
3434
|
align-items: center;
|
|
@@ -4576,17 +3444,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4576
3444
|
inline-size: var(--utrecht-map-marker-size);
|
|
4577
3445
|
justify-content: center;
|
|
4578
3446
|
}
|
|
4579
|
-
|
|
4580
|
-
/**
|
|
4581
|
-
* @license EUPL-1.2
|
|
4582
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4583
|
-
*/
|
|
4584
|
-
/**
|
|
4585
|
-
* @license EUPL-1.2
|
|
4586
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4587
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4588
|
-
*/
|
|
4589
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4590
3447
|
.utrecht-mapcontrolbutton {
|
|
4591
3448
|
--utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
|
|
4592
3449
|
--utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
|
|
@@ -4617,10 +3474,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4617
3474
|
}
|
|
4618
3475
|
|
|
4619
3476
|
.utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
|
|
4620
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4621
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4622
|
-
* can combine it with the focus ring box shadow.
|
|
4623
|
-
*/
|
|
4624
3477
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4625
3478
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4626
3479
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -4633,11 +3486,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4633
3486
|
.utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
|
|
4634
3487
|
--utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
|
|
4635
3488
|
}
|
|
4636
|
-
|
|
4637
|
-
/* override the `:focus` selector above */
|
|
4638
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
4639
3489
|
.utrecht-mapcontrolbutton:focus:not(:focus-visible) {
|
|
4640
|
-
/* undo focus ring */
|
|
4641
3490
|
box-shadow: none;
|
|
4642
3491
|
outline-style: revert;
|
|
4643
3492
|
}
|
|
@@ -4653,17 +3502,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4653
3502
|
padding-inline-end: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
|
|
4654
3503
|
padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
|
|
4655
3504
|
}
|
|
4656
|
-
|
|
4657
|
-
/**
|
|
4658
|
-
* @license EUPL-1.2
|
|
4659
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
4660
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4661
|
-
*/
|
|
4662
|
-
/**
|
|
4663
|
-
* @license EUPL-1.2
|
|
4664
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4665
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4666
|
-
*/
|
|
4667
3505
|
.utrecht-mark {
|
|
4668
3506
|
background-color: var(--utrecht-mark-background-color, revert);
|
|
4669
3507
|
color: var(--utrecht-mark-color, revert);
|
|
@@ -4681,30 +3519,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4681
3519
|
color: HighlightText;
|
|
4682
3520
|
}
|
|
4683
3521
|
}
|
|
4684
|
-
|
|
4685
|
-
/* class name available only for Storybook */
|
|
4686
3522
|
.utrecht-mark--print {
|
|
4687
3523
|
outline-color: currentColor;
|
|
4688
3524
|
outline-style: dotted;
|
|
4689
3525
|
outline-width: 0.1em;
|
|
4690
3526
|
}
|
|
4691
|
-
|
|
4692
|
-
/* class name available only for Storybook */
|
|
4693
3527
|
.utrecht-mark--windows-high-contrast {
|
|
4694
3528
|
background-color: Highlight;
|
|
4695
3529
|
color: HighlightText;
|
|
4696
3530
|
}
|
|
4697
|
-
|
|
4698
|
-
/**
|
|
4699
|
-
* @license EUPL-1.2
|
|
4700
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4701
|
-
*/
|
|
4702
|
-
/**
|
|
4703
|
-
* @license EUPL-1.2
|
|
4704
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4705
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4706
|
-
*/
|
|
4707
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4708
3531
|
.utrecht-menulijst {
|
|
4709
3532
|
border-block-end: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
|
|
4710
3533
|
border-block-start: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
|
|
@@ -4736,10 +3559,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4736
3559
|
}
|
|
4737
3560
|
|
|
4738
3561
|
.utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus {
|
|
4739
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4740
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4741
|
-
* can combine it with the focus ring box shadow.
|
|
4742
|
-
*/
|
|
4743
3562
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4744
3563
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4745
3564
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -4750,24 +3569,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4750
3569
|
}
|
|
4751
3570
|
|
|
4752
3571
|
.utrecht-menulijst__link:focus:not(:focus-visible) {
|
|
4753
|
-
/* undo focus ring */
|
|
4754
3572
|
box-shadow: none;
|
|
4755
3573
|
outline-style: revert;
|
|
4756
3574
|
}
|
|
4757
|
-
|
|
4758
|
-
/**
|
|
4759
|
-
* @license EUPL-1.2
|
|
4760
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
4761
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4762
|
-
*/
|
|
4763
|
-
/**
|
|
4764
|
-
* @license EUPL-1.2
|
|
4765
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4766
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4767
|
-
*/
|
|
4768
3575
|
.utrecht-multiline-data {
|
|
4769
3576
|
white-space: pre-line;
|
|
4770
|
-
/* stylelint-disable-next-line property-no-unknown */
|
|
4771
3577
|
white-space-collapse: preserve-breaks;
|
|
4772
3578
|
}
|
|
4773
3579
|
|
|
@@ -4776,12 +3582,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4776
3582
|
margin-block-end: 0;
|
|
4777
3583
|
margin-block-start: 0;
|
|
4778
3584
|
}
|
|
4779
|
-
|
|
4780
|
-
/**
|
|
4781
|
-
* @license EUPL-1.2
|
|
4782
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4783
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4784
|
-
*/
|
|
4785
3585
|
.utrecht-nav-bar {
|
|
4786
3586
|
background-color: var(--utrecht-nav-bar-background-color);
|
|
4787
3587
|
color: var(--utrecht-nav-bar-color);
|
|
@@ -4793,7 +3593,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4793
3593
|
border-block-end-color: currentColor;
|
|
4794
3594
|
border-block-end-style: solid;
|
|
4795
3595
|
border-block-end-width: 1px;
|
|
4796
|
-
/* add `padding` in `forced-colors` mode to make room for contrasting focus ring */
|
|
4797
3596
|
border-block-start-color: currentColor;
|
|
4798
3597
|
border-block-start-style: solid;
|
|
4799
3598
|
border-block-start-width: 1px;
|
|
@@ -4809,19 +3608,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4809
3608
|
flex-wrap: wrap;
|
|
4810
3609
|
inline-size: 100%;
|
|
4811
3610
|
justify-content: space-between;
|
|
4812
|
-
/* Wrap content to accomodate:
|
|
4813
|
-
* - 400% zoom
|
|
4814
|
-
* - longer text due to automatic translation
|
|
4815
|
-
* - longer text due to editorial content requirements
|
|
4816
|
-
*/
|
|
4817
3611
|
max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
|
|
4818
3612
|
}
|
|
4819
|
-
|
|
4820
|
-
/**
|
|
4821
|
-
* @license EUPL-1.2
|
|
4822
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4823
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4824
|
-
*/
|
|
4825
3613
|
.utrecht-nav-list {
|
|
4826
3614
|
margin-block-end: 0;
|
|
4827
3615
|
margin-block-start: 0;
|
|
@@ -4845,8 +3633,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4845
3633
|
list-style: none;
|
|
4846
3634
|
display: inline-flex;
|
|
4847
3635
|
}
|
|
4848
|
-
|
|
4849
|
-
/* Style for the navigation links */
|
|
4850
3636
|
.utrecht-nav-list__link {
|
|
4851
3637
|
font-weight: var(--utrecht-nav-list-link-font-weight);
|
|
4852
3638
|
max-inline-size: var(--utrecht-nav-bar-link-max-inline-size, 30ch);
|
|
@@ -4856,18 +3642,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4856
3642
|
padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
|
|
4857
3643
|
text-decoration: none;
|
|
4858
3644
|
}
|
|
4859
|
-
|
|
4860
|
-
/**
|
|
4861
|
-
* @license EUPL-1.2
|
|
4862
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
4863
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4864
|
-
*/
|
|
4865
|
-
/**
|
|
4866
|
-
* @license EUPL-1.2
|
|
4867
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
4868
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
4869
|
-
*/
|
|
4870
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
4871
3645
|
.utrecht-sidenav {
|
|
4872
3646
|
--utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
|
|
4873
3647
|
--utrecht-sidenav-connection-inline-size: 2px;
|
|
@@ -4912,10 +3686,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4912
3686
|
.utrecht-sidenav__item--last {
|
|
4913
3687
|
border-block-end: none;
|
|
4914
3688
|
}
|
|
4915
|
-
|
|
4916
|
-
/* draw the li item box bottom line */
|
|
4917
3689
|
.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
|
|
4918
|
-
/* .utrecht-sidenav__item--parent span */
|
|
4919
3690
|
border-block-end: 1px solid var(--utrecht-color-grey-80);
|
|
4920
3691
|
display: block;
|
|
4921
3692
|
margin-inline-start: var(--utrecht-space-inline-lg);
|
|
@@ -4938,10 +3709,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4938
3709
|
}
|
|
4939
3710
|
|
|
4940
3711
|
.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
|
|
4941
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4942
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4943
|
-
* can combine it with the focus ring box shadow.
|
|
4944
|
-
*/
|
|
4945
3712
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4946
3713
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4947
3714
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -4950,13 +3717,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4950
3717
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4951
3718
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4952
3719
|
}
|
|
4953
|
-
|
|
4954
|
-
/* Remove bottom padding form first item in list with children */
|
|
4955
3720
|
.utrecht-sidenav__link--parent {
|
|
4956
3721
|
padding-block-end: 0;
|
|
4957
3722
|
}
|
|
4958
|
-
|
|
4959
|
-
/* Draw metro connection lines on sidenav link items */
|
|
4960
3723
|
.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,
|
|
4961
3724
|
.utrecht-sidenav__link--parent,
|
|
4962
3725
|
.utrecht-sidenav__link--child)::after {
|
|
@@ -4978,24 +3741,19 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4978
3741
|
.utrecht-sidenav__connection--sibling {
|
|
4979
3742
|
display: none;
|
|
4980
3743
|
}
|
|
4981
|
-
|
|
4982
|
-
/* Dot for link with siblings */
|
|
4983
|
-
/* Little fix to move the dot to the right */
|
|
4984
3744
|
.utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
|
|
4985
3745
|
background-color: var(--utrecht-sidenav-item-marker-color);
|
|
4986
3746
|
block-size: var(--utrecht-sidenav-marker-height);
|
|
4987
3747
|
border-radius: 100%;
|
|
4988
3748
|
content: "";
|
|
4989
3749
|
inline-size: 8px;
|
|
4990
|
-
inset-block-start: 20px;
|
|
3750
|
+
inset-block-start: 20px;
|
|
4991
3751
|
inset-inline-start: var(--utrecht-sidenav-marker-offset);
|
|
4992
3752
|
overflow: hidden;
|
|
4993
3753
|
position: absolute;
|
|
4994
3754
|
transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
|
|
4995
3755
|
z-index: 10;
|
|
4996
3756
|
}
|
|
4997
|
-
|
|
4998
|
-
/* Add dot bullets on child links */
|
|
4999
3757
|
.utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
|
|
5000
3758
|
background-color: transparent;
|
|
5001
3759
|
block-size: 4px;
|
|
@@ -5005,8 +3763,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5005
3763
|
inset-inline-start: 1.2rem;
|
|
5006
3764
|
transform: translateY(-50%) translateX(-19.5px);
|
|
5007
3765
|
}
|
|
5008
|
-
|
|
5009
|
-
/* selector must override .utrecht-sidenav__marker--child */
|
|
5010
3766
|
.utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
|
|
5011
3767
|
.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
|
|
5012
3768
|
background-color: var(--utrecht-sidenav-marker-current-color);
|
|
@@ -5028,43 +3784,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5028
3784
|
.utrecht-sidenav__link--current-child {
|
|
5029
3785
|
font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
5030
3786
|
}
|
|
5031
|
-
|
|
5032
|
-
/* Hover layout for mousover on sidenav__link */
|
|
5033
3787
|
.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before {
|
|
5034
3788
|
background-color: var(--utrecht-sidenav-link-hover-color);
|
|
5035
3789
|
}
|
|
5036
|
-
|
|
5037
|
-
/* Hover layout for mousover on child__link */
|
|
5038
3790
|
.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before {
|
|
5039
3791
|
background-color: var(--utrecht-sidenav-link-hover-color);
|
|
5040
3792
|
border: 2px solid var(--utrecht-sidenav-link-hover-color);
|
|
5041
3793
|
}
|
|
5042
3794
|
|
|
5043
3795
|
.utrecht-sidenav--pseudo-elements {
|
|
5044
|
-
/* stylelint-disable selector-pseudo-class-parentheses-space-inside */
|
|
5045
|
-
/* stylelint-enable selector-pseudo-class-parentheses-space-inside */
|
|
5046
3796
|
}
|
|
5047
3797
|
.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
|
|
5048
3798
|
display: none;
|
|
5049
3799
|
}
|
|
5050
3800
|
|
|
5051
3801
|
.utrecht-sidenav__link:focus:not(:focus-visible) {
|
|
5052
|
-
/* undo focus ring */
|
|
5053
3802
|
box-shadow: none;
|
|
5054
3803
|
outline-style: revert;
|
|
5055
3804
|
}
|
|
5056
|
-
|
|
5057
|
-
/**
|
|
5058
|
-
* @license EUPL-1.2
|
|
5059
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
5060
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5061
|
-
*/
|
|
5062
|
-
/**
|
|
5063
|
-
* @license EUPL-1.2
|
|
5064
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5065
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5066
|
-
*/
|
|
5067
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
5068
3805
|
.utrecht-navhtml {
|
|
5069
3806
|
font-family: var(--utrecht-document-font-family);
|
|
5070
3807
|
}
|
|
@@ -5122,10 +3859,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5122
3859
|
}
|
|
5123
3860
|
|
|
5124
3861
|
.utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
|
|
5125
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
5126
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
5127
|
-
* can combine it with the focus ring box shadow.
|
|
5128
|
-
*/
|
|
5129
3862
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
5130
3863
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
5131
3864
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -5136,21 +3869,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5136
3869
|
}
|
|
5137
3870
|
|
|
5138
3871
|
.utrecht-topnav__link:focus:not(:focus-visible) {
|
|
5139
|
-
/* undo focus ring */
|
|
5140
3872
|
box-shadow: none;
|
|
5141
3873
|
outline-style: revert;
|
|
5142
3874
|
}
|
|
5143
|
-
|
|
5144
|
-
/**
|
|
5145
|
-
* @license EUPL-1.2
|
|
5146
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
5147
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5148
|
-
*/
|
|
5149
|
-
/**
|
|
5150
|
-
* @license EUPL-1.2
|
|
5151
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
5152
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5153
|
-
*/
|
|
5154
3875
|
.utrecht-number-data {
|
|
5155
3876
|
font-variant-numeric: lining-nums tabular-nums;
|
|
5156
3877
|
}
|
|
@@ -5162,20 +3883,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5162
3883
|
.utrecht-number-data--negative {
|
|
5163
3884
|
color: var(--utrecht-number-data-negative-color);
|
|
5164
3885
|
}
|
|
5165
|
-
|
|
5166
|
-
/**
|
|
5167
|
-
* @license EUPL-1.2
|
|
5168
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5169
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5170
|
-
*/
|
|
5171
|
-
/**
|
|
5172
|
-
* @license EUPL-1.2
|
|
5173
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5174
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5175
|
-
*/
|
|
5176
3886
|
.utrecht-ordered-list,
|
|
5177
3887
|
.utrecht-ordered-list--html-content ol {
|
|
5178
|
-
/* Configure `box-sizing` and `text-align` for `--center` */
|
|
5179
3888
|
box-sizing: border-box;
|
|
5180
3889
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
5181
3890
|
font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
|
|
@@ -5208,17 +3917,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5208
3917
|
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
5209
3918
|
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
5210
3919
|
}
|
|
5211
|
-
|
|
5212
|
-
/**
|
|
5213
|
-
* @license EUPL-1.2
|
|
5214
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5215
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5216
|
-
*/
|
|
5217
|
-
/**
|
|
5218
|
-
* @license EUPL-1.2
|
|
5219
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5220
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5221
|
-
*/
|
|
5222
3920
|
.utrecht-page-content {
|
|
5223
3921
|
padding-block-end: var(--utrecht-page-content-padding-block-end);
|
|
5224
3922
|
padding-block-start: var(--utrecht-page-content-padding-block-start);
|
|
@@ -5233,17 +3931,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5233
3931
|
.utrecht-page-content__aside {
|
|
5234
3932
|
grid-area: aside;
|
|
5235
3933
|
}
|
|
5236
|
-
|
|
5237
|
-
/**
|
|
5238
|
-
* @license EUPL-1.2
|
|
5239
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5240
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5241
|
-
*/
|
|
5242
|
-
/**
|
|
5243
|
-
* @license EUPL-1.2
|
|
5244
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5245
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5246
|
-
*/
|
|
5247
3934
|
.utrecht-page-footer {
|
|
5248
3935
|
--utrecht-document-color: currentColor;
|
|
5249
3936
|
--utrecht-heading-color: currentColor;
|
|
@@ -5264,22 +3951,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5264
3951
|
}
|
|
5265
3952
|
|
|
5266
3953
|
.utrecht-page-footer__address--reset-address {
|
|
5267
|
-
/* reset <address> */
|
|
5268
3954
|
font-style: inherit;
|
|
5269
3955
|
margin-block-end: 0;
|
|
5270
3956
|
margin-block-start: 0;
|
|
5271
|
-
}
|
|
5272
|
-
|
|
5273
|
-
/**
|
|
5274
|
-
* @license EUPL-1.2
|
|
5275
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5276
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5277
|
-
*/
|
|
5278
|
-
/**
|
|
5279
|
-
* @license EUPL-1.2
|
|
5280
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5281
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5282
|
-
*/
|
|
3957
|
+
}
|
|
5283
3958
|
.utrecht-page-header {
|
|
5284
3959
|
background-color: var(--utrecht-page-header-background-color);
|
|
5285
3960
|
color: var(--utrecht-page-header-color);
|
|
@@ -5293,17 +3968,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5293
3968
|
.utrecht-page-header__content {
|
|
5294
3969
|
max-inline-size: var(--utrecht-page-max-inline-size);
|
|
5295
3970
|
}
|
|
5296
|
-
|
|
5297
|
-
/**
|
|
5298
|
-
* @license EUPL-1.2
|
|
5299
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5300
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5301
|
-
*/
|
|
5302
|
-
/**
|
|
5303
|
-
* @license EUPL-1.2
|
|
5304
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5305
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5306
|
-
*/
|
|
5307
3971
|
.utrecht-page {
|
|
5308
3972
|
margin-inline-end: auto;
|
|
5309
3973
|
margin-inline-start: auto;
|
|
@@ -5318,21 +3982,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5318
3982
|
max-inline-size: var(--utrecht-page-max-inline-size);
|
|
5319
3983
|
}
|
|
5320
3984
|
|
|
5321
|
-
/**
|
|
5322
|
-
* @license EUPL-1.2
|
|
5323
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5324
|
-
*/
|
|
5325
|
-
/**
|
|
5326
|
-
* @license EUPL-1.2
|
|
5327
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5328
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5329
|
-
*/
|
|
5330
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
5331
|
-
/**
|
|
5332
|
-
* @license EUPL-1.2
|
|
5333
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5334
|
-
*/
|
|
5335
|
-
|
|
5336
3985
|
.utrecht-pagination {
|
|
5337
3986
|
font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
|
|
5338
3987
|
font-size: var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));
|
|
@@ -5416,10 +4065,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5416
4065
|
|
|
5417
4066
|
.utrecht-pagination__page-link:focus,
|
|
5418
4067
|
.utrecht-pagination__relative-link:focus {
|
|
5419
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
5420
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
5421
|
-
* can combine it with the focus ring box shadow.
|
|
5422
|
-
*/
|
|
5423
4068
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
5424
4069
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
5425
4070
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -5431,19 +4076,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5431
4076
|
|
|
5432
4077
|
.utrecht-pagination__page-link:focus:not(:focus-visible),
|
|
5433
4078
|
.utrecht-pagination__relative-link:focus:not(:focus-visible) {
|
|
5434
|
-
/* undo focus ring */
|
|
5435
4079
|
box-shadow: none;
|
|
5436
4080
|
outline-style: revert;
|
|
5437
4081
|
}
|
|
5438
|
-
|
|
5439
|
-
/**
|
|
5440
|
-
* @license EUPL-1.2
|
|
5441
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
5442
|
-
*/
|
|
5443
|
-
/**
|
|
5444
|
-
* @license EUPL-1.2
|
|
5445
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
5446
|
-
*/
|
|
5447
4082
|
.utrecht-paragraph {
|
|
5448
4083
|
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
5449
4084
|
font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
|
|
@@ -5479,17 +4114,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5479
4114
|
.utrecht-paragraph--distanced {
|
|
5480
4115
|
--utrecht-space-around: 1;
|
|
5481
4116
|
}
|
|
5482
|
-
|
|
5483
|
-
/**
|
|
5484
|
-
* @license EUPL-1.2
|
|
5485
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5486
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5487
|
-
*/
|
|
5488
|
-
/**
|
|
5489
|
-
* @license EUPL-1.2
|
|
5490
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5491
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5492
|
-
*/
|
|
5493
4117
|
.utrecht-pre-heading {
|
|
5494
4118
|
color: var(--utrecht-pre-heading-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
5495
4119
|
font-family: var(--utrecht-pre-heading-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
@@ -5504,47 +4128,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5504
4128
|
.utrecht-pre-heading--distanced {
|
|
5505
4129
|
--utrecht-space-around: 1;
|
|
5506
4130
|
}
|
|
5507
|
-
|
|
5508
|
-
/**
|
|
5509
|
-
* @license EUPL-1.2
|
|
5510
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
5511
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5512
|
-
*/
|
|
5513
|
-
/**
|
|
5514
|
-
* @license EUPL-1.2
|
|
5515
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
5516
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
5517
|
-
*/
|
|
5518
4131
|
.utrecht-preserve-data {
|
|
5519
4132
|
unicode-bidi: isolate;
|
|
5520
|
-
/* stylelint-disable-next-line property-no-unknown */
|
|
5521
4133
|
white-space-collapse: preserve-spaces;
|
|
5522
4134
|
}
|
|
5523
|
-
|
|
5524
|
-
/**
|
|
5525
|
-
* @license EUPL-1.2
|
|
5526
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5527
|
-
*/
|
|
5528
|
-
/**
|
|
5529
|
-
* @license EUPL-1.2
|
|
5530
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5531
|
-
*/
|
|
5532
|
-
/**
|
|
5533
|
-
* @license EUPL-1.2
|
|
5534
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
5535
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
5536
|
-
*/
|
|
5537
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
5538
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
5539
4135
|
.utrecht-radio-button {
|
|
5540
|
-
/*
|
|
5541
|
-
* Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
|
|
5542
|
-
* https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
|
|
5543
|
-
*/
|
|
5544
|
-
/*
|
|
5545
|
-
* For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
|
|
5546
|
-
* With a 0% gradient, the circle will have jagged edges.
|
|
5547
|
-
*/
|
|
5548
4136
|
-webkit-appearance: none;
|
|
5549
4137
|
-moz-appearance: none;
|
|
5550
4138
|
appearance: none;
|
|
@@ -5650,10 +4238,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5650
4238
|
}
|
|
5651
4239
|
|
|
5652
4240
|
.utrecht-radio-button--focus-visible {
|
|
5653
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
5654
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
5655
|
-
* can combine it with the focus ring box shadow.
|
|
5656
|
-
*/
|
|
5657
4241
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
5658
4242
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
5659
4243
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -5683,28 +4267,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5683
4267
|
}
|
|
5684
4268
|
|
|
5685
4269
|
.utrecht-radio-button--disabled {
|
|
5686
|
-
/*
|
|
5687
|
-
* The disabled radio button should have:
|
|
5688
|
-
* - should have no active effect
|
|
5689
|
-
* - should have no focus effect
|
|
5690
|
-
* - should have no hover effect
|
|
5691
|
-
* - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
|
|
5692
|
-
*/
|
|
5693
4270
|
--_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
|
|
5694
4271
|
--_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
|
|
5695
4272
|
--_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
|
|
5696
4273
|
--_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
|
|
5697
|
-
/* no focus effect */
|
|
5698
4274
|
--_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
|
|
5699
4275
|
--_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
|
|
5700
4276
|
--_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
|
|
5701
4277
|
--_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
|
|
5702
|
-
/* no active effect */
|
|
5703
4278
|
--_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
|
|
5704
4279
|
--_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
|
|
5705
4280
|
--_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
|
|
5706
4281
|
--_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
|
|
5707
|
-
/* no hover effect */
|
|
5708
4282
|
--_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
|
|
5709
4283
|
--_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
|
|
5710
4284
|
--_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
|
|
@@ -5719,8 +4293,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5719
4293
|
}
|
|
5720
4294
|
|
|
5721
4295
|
.utrecht-radio-button--html-input {
|
|
5722
|
-
/* override the `:focus` selector above */
|
|
5723
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
5724
4296
|
}
|
|
5725
4297
|
.utrecht-radio-button--html-input:checked {
|
|
5726
4298
|
--_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
|
|
@@ -5742,28 +4314,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5742
4314
|
--_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
|
|
5743
4315
|
}
|
|
5744
4316
|
.utrecht-radio-button--html-input:disabled {
|
|
5745
|
-
/*
|
|
5746
|
-
* The disabled radio button should have:
|
|
5747
|
-
* - should have no active effect
|
|
5748
|
-
* - should have no focus effect
|
|
5749
|
-
* - should have no hover effect
|
|
5750
|
-
* - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
|
|
5751
|
-
*/
|
|
5752
4317
|
--_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
|
|
5753
4318
|
--_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
|
|
5754
4319
|
--_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
|
|
5755
4320
|
--_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
|
|
5756
|
-
/* no focus effect */
|
|
5757
4321
|
--_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
|
|
5758
4322
|
--_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
|
|
5759
4323
|
--_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
|
|
5760
4324
|
--_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
|
|
5761
|
-
/* no active effect */
|
|
5762
4325
|
--_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
|
|
5763
4326
|
--_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
|
|
5764
4327
|
--_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
|
|
5765
4328
|
--_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
|
|
5766
|
-
/* no hover effect */
|
|
5767
4329
|
--_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
|
|
5768
4330
|
--_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
|
|
5769
4331
|
--_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
|
|
@@ -5794,10 +4356,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5794
4356
|
);
|
|
5795
4357
|
}
|
|
5796
4358
|
.utrecht-radio-button--html-input:focus-visible {
|
|
5797
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
5798
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
5799
|
-
* can combine it with the focus ring box shadow.
|
|
5800
|
-
*/
|
|
5801
4359
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
5802
4360
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
5803
4361
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -5842,12 +4400,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5842
4400
|
var(--utrecht-radio-button-active-color)
|
|
5843
4401
|
);
|
|
5844
4402
|
}
|
|
5845
|
-
|
|
5846
|
-
/**
|
|
5847
|
-
* @license EUPL-1.2
|
|
5848
|
-
* Copyright (c) 2024-2025 Gemeente Utrecht
|
|
5849
|
-
* Copyright (c) 2024-2025 Frameless B.V.
|
|
5850
|
-
*/
|
|
5851
4403
|
.utrecht-rich-text {
|
|
5852
4404
|
--utrecht-space-around: 1;
|
|
5853
4405
|
}
|
|
@@ -7606,21 +6158,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7606
6158
|
.utrecht-rich-text .utrecht-unordered-list:has(+ .utrecht-unordered-list) {
|
|
7607
6159
|
--utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
|
|
7608
6160
|
}
|
|
7609
|
-
|
|
7610
|
-
/**
|
|
7611
|
-
* @license EUPL-1.2
|
|
7612
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
7613
|
-
*/
|
|
7614
|
-
/**
|
|
7615
|
-
* @license EUPL-1.2
|
|
7616
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
7617
|
-
*/
|
|
7618
|
-
/**
|
|
7619
|
-
* @license EUPL-1.2
|
|
7620
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
7621
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7622
|
-
*/
|
|
7623
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
7624
6161
|
.utrecht-search-bar {
|
|
7625
6162
|
--utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
|
|
7626
6163
|
--utrecht-button-hover-scale: var(--utrecht-search-bar-hover-transform);
|
|
@@ -7684,31 +6221,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7684
6221
|
background-color: var(--utrecht-search-bar-list-item-is-selected-background-color);
|
|
7685
6222
|
color: var(--utrecht-search-bar-list-item-is-selected-color);
|
|
7686
6223
|
}
|
|
7687
|
-
|
|
7688
|
-
/**
|
|
7689
|
-
* @license EUPL-1.2
|
|
7690
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7691
|
-
*/
|
|
7692
|
-
/**
|
|
7693
|
-
* @license EUPL-1.2
|
|
7694
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
7695
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7696
|
-
*/
|
|
7697
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
7698
|
-
/**
|
|
7699
|
-
* @license EUPL-1.2
|
|
7700
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7701
|
-
*/
|
|
7702
|
-
/**
|
|
7703
|
-
* @license EUPL-1.2
|
|
7704
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
7705
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7706
|
-
*/
|
|
7707
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
7708
|
-
/* TODO: Enable ordering properties when the plugin supports logical CSS properties
|
|
7709
|
-
* https://github.com/hudochenkov/stylelint-order/pull/162 */
|
|
7710
|
-
/* stylelint-disable order/properties-alphabetical-order */
|
|
7711
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
7712
6224
|
.utrecht-select {
|
|
7713
6225
|
background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
|
|
7714
6226
|
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
|
|
@@ -7745,10 +6257,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7745
6257
|
}
|
|
7746
6258
|
|
|
7747
6259
|
.utrecht-select--focus-visible {
|
|
7748
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
7749
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
7750
|
-
* can combine it with the focus ring box shadow.
|
|
7751
|
-
*/
|
|
7752
6260
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
7753
6261
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
7754
6262
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -7775,19 +6283,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7775
6283
|
border-block-end-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
|
|
7776
6284
|
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
7777
6285
|
}
|
|
7778
|
-
|
|
7779
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
7780
6286
|
.utrecht-select--html-select {
|
|
7781
|
-
/* <select> does not have a `readonly` attribute */
|
|
7782
6287
|
}
|
|
7783
6288
|
.utrecht-select--html-select:focus {
|
|
7784
6289
|
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
7785
6290
|
border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
7786
6291
|
color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
|
|
7787
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
7788
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
7789
|
-
* can combine it with the focus ring box shadow.
|
|
7790
|
-
*/
|
|
7791
6292
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
7792
6293
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
7793
6294
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -7797,7 +6298,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7797
6298
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
7798
6299
|
}
|
|
7799
6300
|
.utrecht-select--html-select:focus:not(:focus-visible) {
|
|
7800
|
-
/* undo focus ring */
|
|
7801
6301
|
box-shadow: none;
|
|
7802
6302
|
outline-style: revert;
|
|
7803
6303
|
}
|
|
@@ -7817,19 +6317,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7817
6317
|
background-repeat: no-repeat;
|
|
7818
6318
|
background-size: 1.4em;
|
|
7819
6319
|
}
|
|
7820
|
-
|
|
7821
|
-
/**
|
|
7822
|
-
* @license EUPL-1.2
|
|
7823
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
7824
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7825
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
7826
|
-
*/
|
|
7827
|
-
/**
|
|
7828
|
-
* @license EUPL-1.2
|
|
7829
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
7830
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7831
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
7832
|
-
*/
|
|
7833
6320
|
.utrecht-separator {
|
|
7834
6321
|
border-color: var(--utrecht-separator-color);
|
|
7835
6322
|
border-style: solid;
|
|
@@ -7841,31 +6328,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7841
6328
|
.utrecht-separator--distanced {
|
|
7842
6329
|
--utrecht-space-around: 1;
|
|
7843
6330
|
}
|
|
7844
|
-
|
|
7845
|
-
/**
|
|
7846
|
-
* @license EUPL-1.2
|
|
7847
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
7848
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
7849
|
-
*/
|
|
7850
|
-
/**
|
|
7851
|
-
* @license EUPL-1.2
|
|
7852
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
7853
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
7854
|
-
*/
|
|
7855
|
-
/**
|
|
7856
|
-
* @license EUPL-1.2
|
|
7857
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
7858
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7859
|
-
*/
|
|
7860
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
7861
6331
|
.utrecht-skip-link {
|
|
7862
|
-
/* Use `ButtonFace` as default `background-color`
|
|
7863
|
-
* to ensure the skip link is not transparent and unreadable
|
|
7864
|
-
* when CSS variables are not defined.
|
|
7865
|
-
*
|
|
7866
|
-
* My only concern with this is that it makes it look like a button,
|
|
7867
|
-
* and it implies the `Space` button should work, but it won't work.
|
|
7868
|
-
*/
|
|
7869
6332
|
align-items: center;
|
|
7870
6333
|
background-color: var(--utrecht-skip-link-background-color, ButtonFace);
|
|
7871
6334
|
box-sizing: border-box;
|
|
@@ -7892,10 +6355,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7892
6355
|
}
|
|
7893
6356
|
|
|
7894
6357
|
.utrecht-skip-link--visible-on-focus:focus {
|
|
7895
|
-
/**
|
|
7896
|
-
* WCAG 2.2 / 2.4.12: "No part of the focus indicator is hidden by author-created content".
|
|
7897
|
-
* To go the extra mile, ensure the focus indicator is inside the viewport.
|
|
7898
|
-
* */
|
|
7899
6358
|
--_utrecht-skip-link-inset: calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));
|
|
7900
6359
|
inset-block-start: var(--_utrecht-skip-link-inset, 0);
|
|
7901
6360
|
inset-inline-start: var(--_utrecht-skip-link-inset, 0);
|
|
@@ -7904,10 +6363,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7904
6363
|
}
|
|
7905
6364
|
|
|
7906
6365
|
.utrecht-skip-link--visible {
|
|
7907
|
-
/**
|
|
7908
|
-
* WCAG 2.2 / 2.4.12: "No part of the focus indicator is hidden by author-created content".
|
|
7909
|
-
* To go the extra mile, ensure the focus indicator is inside the viewport.
|
|
7910
|
-
* */
|
|
7911
6366
|
--_utrecht-skip-link-inset: calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));
|
|
7912
6367
|
inset-block-start: var(--_utrecht-skip-link-inset, 0);
|
|
7913
6368
|
inset-inline-start: var(--_utrecht-skip-link-inset, 0);
|
|
@@ -7918,10 +6373,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7918
6373
|
.utrecht-skip-link--focus,
|
|
7919
6374
|
.utrecht-skip-link:focus,
|
|
7920
6375
|
.utrecht-skip-link:focus-visible {
|
|
7921
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
7922
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
7923
|
-
* can combine it with the focus ring box shadow.
|
|
7924
|
-
*/
|
|
7925
6376
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
7926
6377
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
7927
6378
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -7931,17 +6382,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7931
6382
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
7932
6383
|
text-decoration: var(--utrecht-skip-link-focus-text-decoration);
|
|
7933
6384
|
}
|
|
7934
|
-
|
|
7935
|
-
/**
|
|
7936
|
-
* @license EUPL-1.2
|
|
7937
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
7938
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
7939
|
-
*/
|
|
7940
|
-
/**
|
|
7941
|
-
* @license EUPL-1.2
|
|
7942
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
7943
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
7944
|
-
*/
|
|
7945
6385
|
.utrecht-spotlight-section {
|
|
7946
6386
|
background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
|
|
7947
6387
|
border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
|
|
@@ -7971,15 +6411,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7971
6411
|
--_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-warning-border-width);
|
|
7972
6412
|
--_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-warning-color);
|
|
7973
6413
|
}
|
|
7974
|
-
|
|
7975
|
-
/**
|
|
7976
|
-
* @license EUPL-1.2
|
|
7977
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7978
|
-
*/
|
|
7979
|
-
/**
|
|
7980
|
-
* @license EUPL-1.2
|
|
7981
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7982
|
-
*/
|
|
7983
6414
|
.utrecht-surface {
|
|
7984
6415
|
background-color: var(--utrecht-surface-background-color, inherit);
|
|
7985
6416
|
color: var(--utrecht-surface-color, inherit);
|
|
@@ -7991,17 +6422,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
7991
6422
|
margin-inline-end: 0;
|
|
7992
6423
|
margin-inline-start: 0;
|
|
7993
6424
|
}
|
|
7994
|
-
|
|
7995
|
-
/**
|
|
7996
|
-
* @license EUPL-1.2
|
|
7997
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
7998
|
-
*/
|
|
7999
|
-
/**
|
|
8000
|
-
* @license EUPL-1.2
|
|
8001
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8002
|
-
*/
|
|
8003
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
8004
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
8005
6425
|
.utrecht-table-container--overflow-inline {
|
|
8006
6426
|
background-attachment: local, local, scroll, scroll;
|
|
8007
6427
|
background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
|
|
@@ -8012,9 +6432,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8012
6432
|
}
|
|
8013
6433
|
|
|
8014
6434
|
.utrecht-table {
|
|
8015
|
-
/* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
|
|
8016
|
-
* Therefore we need to use `border-collapse: separate` instead.
|
|
8017
|
-
*/
|
|
8018
6435
|
border-collapse: separate;
|
|
8019
6436
|
border-color: var(--utrecht-table-border-color, 0);
|
|
8020
6437
|
border-spacing: 0;
|
|
@@ -8117,10 +6534,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8117
6534
|
text-overflow: ellipsis;
|
|
8118
6535
|
white-space: nowrap;
|
|
8119
6536
|
}
|
|
8120
|
-
|
|
8121
|
-
/* `.utrecht-table--html-table` should not affect nested tables.
|
|
8122
|
-
* We will use the `>` direct descendant selector so the styling doesn't affect nested tables. */
|
|
8123
|
-
/* stylelint-disable no-descending-specificity */
|
|
8124
6537
|
.utrecht-table--html-table > tr,
|
|
8125
6538
|
.utrecht-table--html-table > thead > tr,
|
|
8126
6539
|
.utrecht-table--html-table > tbody > tr,
|
|
@@ -8141,7 +6554,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8141
6554
|
.utrecht-table--html-table > tfoot > tr > th,
|
|
8142
6555
|
.utrecht-table__header-cell {
|
|
8143
6556
|
--utrecht-icon-size: var(--utrecht-table-cell-icon-size);
|
|
8144
|
-
/* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
|
|
8145
6557
|
block-size: var(--utrecht-table-cell-line-height, 1em);
|
|
8146
6558
|
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
8147
6559
|
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
@@ -8184,7 +6596,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8184
6596
|
.utrecht-table--html-table > tfoot > tr > td,
|
|
8185
6597
|
.utrecht-table__cell {
|
|
8186
6598
|
--utrecht-icon-size: var(--utrecht-table-cell-icon-size);
|
|
8187
|
-
/* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
|
|
8188
6599
|
block-size: var(--utrecht-table-cell-line-height, 1em);
|
|
8189
6600
|
line-height: var(--utrecht-table-cell-line-height, inherit);
|
|
8190
6601
|
padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
|
|
@@ -8218,12 +6629,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8218
6629
|
background-color: var(--utrecht-table-cell-selected-background-color, highlight);
|
|
8219
6630
|
color: var(--utrecht-table-cell-selected-color, highlightText);
|
|
8220
6631
|
}
|
|
8221
|
-
|
|
8222
|
-
/* stylelint-enable no-descending-specificity */
|
|
8223
6632
|
.utrecht-table__header-cell--numeric-column,
|
|
8224
6633
|
.utrecht-table__cell--numeric-column {
|
|
8225
6634
|
--_utrecht-table-cell-text-align: right;
|
|
8226
|
-
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
8227
6635
|
text-align: var(--_utrecht-table-cell-text-align);
|
|
8228
6636
|
}
|
|
8229
6637
|
|
|
@@ -8266,8 +6674,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8266
6674
|
.utrecht-table__header-cell-button {
|
|
8267
6675
|
justify-content: var(--_utrecht-table-cell-text-align, start);
|
|
8268
6676
|
}
|
|
8269
|
-
|
|
8270
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
8271
6677
|
.utrecht-table__data--truncate {
|
|
8272
6678
|
display: block;
|
|
8273
6679
|
max-inline-size: 100%;
|
|
@@ -8289,7 +6695,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8289
6695
|
inline-size: 1px;
|
|
8290
6696
|
outline: 1px solid red;
|
|
8291
6697
|
overflow: hidden;
|
|
8292
|
-
/* stylelint-disable-next-line property-disallowed-list */
|
|
8293
6698
|
padding: 0;
|
|
8294
6699
|
position: absolute;
|
|
8295
6700
|
white-space: nowrap;
|
|
@@ -8319,34 +6724,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8319
6724
|
background-color: papayawhip;
|
|
8320
6725
|
color: maroon;
|
|
8321
6726
|
}
|
|
8322
|
-
|
|
8323
|
-
/**
|
|
8324
|
-
* @license EUPL-1.2
|
|
8325
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8326
|
-
*/
|
|
8327
|
-
/**
|
|
8328
|
-
* @license EUPL-1.2
|
|
8329
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8330
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8331
|
-
*/
|
|
8332
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
8333
|
-
/**
|
|
8334
|
-
* @license EUPL-1.2
|
|
8335
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8336
|
-
*/
|
|
8337
|
-
/**
|
|
8338
|
-
* @license EUPL-1.2
|
|
8339
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8340
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8341
|
-
*/
|
|
8342
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
8343
|
-
/* TODO: Enable ordering properties when the plugin supports logical CSS properties
|
|
8344
|
-
* https://github.com/hudochenkov/stylelint-order/pull/162 */
|
|
8345
|
-
/* stylelint-disable order/properties-alphabetical-order */
|
|
8346
6727
|
.utrecht-textarea {
|
|
8347
|
-
/* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
|
|
8348
6728
|
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
|
|
8349
|
-
block-size: initial;
|
|
6729
|
+
block-size: initial;
|
|
8350
6730
|
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
|
|
8351
6731
|
border-block-end-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
|
|
8352
6732
|
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
|
|
@@ -8356,7 +6736,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8356
6736
|
color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
|
|
8357
6737
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
|
|
8358
6738
|
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
8359
|
-
font-weight: initial;
|
|
6739
|
+
font-weight: initial;
|
|
8360
6740
|
inline-size: 100%;
|
|
8361
6741
|
line-height: var(--utrecht-textarea-line-height, initial);
|
|
8362
6742
|
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
@@ -8399,10 +6779,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8399
6779
|
}
|
|
8400
6780
|
|
|
8401
6781
|
.utrecht-textarea--focus-visible {
|
|
8402
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
8403
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
8404
|
-
* can combine it with the focus ring box shadow.
|
|
8405
|
-
*/
|
|
8406
6782
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
8407
6783
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
8408
6784
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -8425,21 +6801,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8425
6801
|
}
|
|
8426
6802
|
|
|
8427
6803
|
.utrecht-textarea--html-textarea {
|
|
8428
|
-
/* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
|
|
8429
|
-
/*
|
|
8430
|
-
* The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
|
|
8431
|
-
*
|
|
8432
|
-
* We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
|
|
8433
|
-
*/
|
|
8434
6804
|
}
|
|
8435
6805
|
.utrecht-textarea--html-textarea:focus {
|
|
8436
6806
|
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
8437
6807
|
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
8438
6808
|
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
8439
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
8440
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
8441
|
-
* can combine it with the focus ring box shadow.
|
|
8442
|
-
*/
|
|
8443
6809
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
8444
6810
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
8445
6811
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -8449,7 +6815,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8449
6815
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
8450
6816
|
}
|
|
8451
6817
|
.utrecht-textarea--html-textarea:focus:not(:focus-visible) {
|
|
8452
|
-
/* undo focus ring */
|
|
8453
6818
|
box-shadow: none;
|
|
8454
6819
|
outline-style: revert;
|
|
8455
6820
|
}
|
|
@@ -8483,46 +6848,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8483
6848
|
font-style: var(--utrecht-form-control-placeholder-font-style);
|
|
8484
6849
|
opacity: 100%;
|
|
8485
6850
|
}
|
|
8486
|
-
|
|
8487
|
-
/**
|
|
8488
|
-
* @license EUPL-1.2
|
|
8489
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8490
|
-
*/
|
|
8491
|
-
/**
|
|
8492
|
-
* @license EUPL-1.2
|
|
8493
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8494
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8495
|
-
*/
|
|
8496
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
8497
|
-
/**
|
|
8498
|
-
* @license EUPL-1.2
|
|
8499
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8500
|
-
*/
|
|
8501
|
-
/**
|
|
8502
|
-
* @license EUPL-1.2
|
|
8503
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8504
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8505
|
-
*/
|
|
8506
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
8507
|
-
/* TODO: Enable ordering properties when the plugin supports logical CSS properties
|
|
8508
|
-
* https://github.com/hudochenkov/stylelint-order/pull/162 */
|
|
8509
|
-
/* stylelint-disable order/properties-alphabetical-order */
|
|
8510
6851
|
.utrecht-textbox {
|
|
8511
|
-
/* The average character inline-size is an approximation, with a default that works for Dutch text.
|
|
8512
|
-
* The average might need to be configured specifically, for other scripts (CJK characters)
|
|
8513
|
-
* and very wide or very narrow fonts.
|
|
8514
|
-
* For monospace fonts it can be set to `1ch`.
|
|
8515
|
-
*/
|
|
8516
6852
|
--_utrecht-textbox-value-char: 0.667em + 0.334ch;
|
|
8517
|
-
/* Because this element uses `border-box` box-sizing, we need to manually add up the
|
|
8518
|
-
* border width, padding width and the content width.
|
|
8519
|
-
*
|
|
8520
|
-
* Browsers and browser addons can add buttons inside the content box, for example
|
|
8521
|
-
* for autocomplete. To avoid overlap between the UI and the text, we reserve
|
|
8522
|
-
* some additional pixels to make space. We use 44px in accordance with the WCAG target size.
|
|
8523
|
-
*
|
|
8524
|
-
* When you are certain an element has no such UI, you can set the `autocomplete-ui-size` to `0px` (not to `0`).
|
|
8525
|
-
*/
|
|
8526
6853
|
--_utrecht-textbox-max-inline-size: calc(
|
|
8527
6854
|
calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +
|
|
8528
6855
|
var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
|
|
@@ -8531,7 +6858,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8531
6858
|
var(--utrecht-textbox-autocomplete-ui-size, 44px)
|
|
8532
6859
|
);
|
|
8533
6860
|
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
|
|
8534
|
-
block-size: initial;
|
|
6861
|
+
block-size: initial;
|
|
8535
6862
|
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
|
|
8536
6863
|
border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
|
|
8537
6864
|
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
|
|
@@ -8541,7 +6868,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8541
6868
|
color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
|
|
8542
6869
|
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
|
|
8543
6870
|
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
8544
|
-
font-weight: initial;
|
|
6871
|
+
font-weight: initial;
|
|
8545
6872
|
inline-size: 100%;
|
|
8546
6873
|
line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
|
|
8547
6874
|
min-block-size: var(--utrecht-pointer-target-min-size, 44px);
|
|
@@ -8582,10 +6909,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8582
6909
|
}
|
|
8583
6910
|
|
|
8584
6911
|
.utrecht-textbox--focus-visible {
|
|
8585
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
8586
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
8587
|
-
* can combine it with the focus ring box shadow.
|
|
8588
|
-
*/
|
|
8589
6912
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
8590
6913
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
8591
6914
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -8608,7 +6931,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8608
6931
|
}
|
|
8609
6932
|
|
|
8610
6933
|
.utrecht-textbox--numeric {
|
|
8611
|
-
-moz-appearance: textfield;
|
|
6934
|
+
-moz-appearance: textfield;
|
|
8612
6935
|
font-variant-numeric: lining-nums tabular-nums;
|
|
8613
6936
|
}
|
|
8614
6937
|
|
|
@@ -8618,67 +6941,44 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8618
6941
|
}
|
|
8619
6942
|
|
|
8620
6943
|
.utrecht-textbox--postal-code-nl-size {
|
|
8621
|
-
/* Dutch postal code: 4 numbers, 1 space and 2 letters */
|
|
8622
6944
|
--utrecht-textbox-value-max-length: 7;
|
|
8623
6945
|
}
|
|
8624
6946
|
|
|
8625
6947
|
.utrecht-textbox--house-number-size {
|
|
8626
|
-
/* Dutch house number is 99999 at most: 5 numbers */
|
|
8627
6948
|
--utrecht-textbox-value-max-length: 5;
|
|
8628
6949
|
}
|
|
8629
6950
|
|
|
8630
6951
|
.utrecht-textbox--house-letter-size {
|
|
8631
|
-
/* Dutch house letter is 1 letter */
|
|
8632
6952
|
--utrecht-textbox-value-max-length: 1;
|
|
8633
6953
|
}
|
|
8634
6954
|
|
|
8635
6955
|
.utrecht-textbox--house-addition-size {
|
|
8636
|
-
/* Dutch house addition is optional, between 1 and 4 alphanumeric characters */
|
|
8637
6956
|
--utrecht-textbox-value-max-length: 4;
|
|
8638
6957
|
}
|
|
8639
6958
|
|
|
8640
6959
|
.utrecht-textbox--voorvoegsel-size {
|
|
8641
|
-
/* "Tabel 36 Voorvoegselstabel" by "Rijksdienst voor Identiteitsgegevens" has a list
|
|
8642
|
-
* of all allowed values. The longest value is 10 characters.
|
|
8643
|
-
* The class name is in Dutch because it is a Dutch concept. */
|
|
8644
6960
|
--utrecht-textbox-value-max-length: 10;
|
|
8645
6961
|
}
|
|
8646
6962
|
|
|
8647
6963
|
.utrecht-textbox--tel-size {
|
|
8648
|
-
/* International telephone number standard E.164 allows 15 numbers, with optional space for 4 spaces */
|
|
8649
6964
|
--utrecht-textbox-value-max-length: 19;
|
|
8650
6965
|
}
|
|
8651
6966
|
|
|
8652
6967
|
.utrecht-textbox--tel-nl-size {
|
|
8653
|
-
/* Dutch telephone number: 10 number, typically with at most 3 spaces */
|
|
8654
6968
|
--utrecht-textbox-value-max-length: 13;
|
|
8655
6969
|
}
|
|
8656
6970
|
|
|
8657
6971
|
.utrecht-textbox--iban-size {
|
|
8658
|
-
/* Maximum IBAN: 33 characters, plus 8 spaces (one space after every 4 characters) */
|
|
8659
6972
|
--utrecht-textbox-value-max-length: 41;
|
|
8660
6973
|
}
|
|
8661
6974
|
|
|
8662
6975
|
.utrecht-textbox--iban-nl-size {
|
|
8663
|
-
/* Dutch IBAN: 18 characters, plus 4 spaces (one space after every 4 characters) */
|
|
8664
6976
|
--utrecht-textbox-value-max-length: 22;
|
|
8665
6977
|
}
|
|
8666
|
-
|
|
8667
|
-
/**
|
|
8668
|
-
* This class name is experimental.
|
|
8669
|
-
*/
|
|
8670
6978
|
.utrecht-textbox--placeholder-ltr::placeholder, .utrecht-textbox--placeholder-ltr:placeholder-shown {
|
|
8671
|
-
/* For <input dir="rtr" placeholder="+31 555 1234">,
|
|
8672
|
-
* behave as `dir="auto"` when the placeholder is shown. */
|
|
8673
6979
|
direction: ltr;
|
|
8674
6980
|
}
|
|
8675
|
-
|
|
8676
|
-
/**
|
|
8677
|
-
* This class name is experimental.
|
|
8678
|
-
*/
|
|
8679
6981
|
.utrecht-textbox--placeholder-rtl::placeholder, .utrecht-textbox--placeholder-rtl:placeholder-shown {
|
|
8680
|
-
/* For <input dir="rtr" placeholder="+31 555 1234">,
|
|
8681
|
-
* behave as `dir="auto"` when the placeholder is shown. */
|
|
8682
6982
|
direction: rtl;
|
|
8683
6983
|
}
|
|
8684
6984
|
|
|
@@ -8687,21 +6987,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8687
6987
|
}
|
|
8688
6988
|
|
|
8689
6989
|
.utrecht-textbox--html-input {
|
|
8690
|
-
/* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
|
|
8691
|
-
/*
|
|
8692
|
-
* The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
|
|
8693
|
-
*
|
|
8694
|
-
* We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
|
|
8695
|
-
*/
|
|
8696
6990
|
}
|
|
8697
6991
|
.utrecht-textbox--html-input:focus {
|
|
8698
6992
|
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
8699
6993
|
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
8700
6994
|
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
8701
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
8702
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
8703
|
-
* can combine it with the focus ring box shadow.
|
|
8704
|
-
*/
|
|
8705
6995
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
8706
6996
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
8707
6997
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -8711,7 +7001,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8711
7001
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
8712
7002
|
}
|
|
8713
7003
|
.utrecht-textbox--html-input:focus:not(:focus-visible) {
|
|
8714
|
-
/* undo focus ring */
|
|
8715
7004
|
box-shadow: none;
|
|
8716
7005
|
outline-style: revert;
|
|
8717
7006
|
}
|
|
@@ -8753,21 +7042,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8753
7042
|
font-variant-ligatures: none;
|
|
8754
7043
|
}
|
|
8755
7044
|
.utrecht-textbox--html-input[pattern="\\d*"], .utrecht-textbox--html-input[pattern="[0-9]*"], .utrecht-textbox--html-input[type=number i], .utrecht-textbox--html-input[type=tel i], .utrecht-textbox--html-input[inputMode=numeric i], .utrecht-textbox--html-input[inputMode=decimal i], .utrecht-textbox--html-input[inputMode=tel i] {
|
|
8756
|
-
-moz-appearance: textfield;
|
|
7045
|
+
-moz-appearance: textfield;
|
|
8757
7046
|
font-variant-numeric: lining-nums tabular-nums;
|
|
8758
7047
|
}
|
|
8759
|
-
|
|
8760
|
-
/**
|
|
8761
|
-
* @license EUPL-1.2
|
|
8762
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8763
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8764
|
-
*/
|
|
8765
|
-
/**
|
|
8766
|
-
* @license EUPL-1.2
|
|
8767
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8768
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8769
|
-
*/
|
|
8770
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
8771
7048
|
.utrecht-toptask-link {
|
|
8772
7049
|
--utrecht-icon-color: currentColor;
|
|
8773
7050
|
--utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
|
|
@@ -8795,11 +7072,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8795
7072
|
}
|
|
8796
7073
|
|
|
8797
7074
|
.utrecht-toptask-link--focus-visible, .utrecht-toptask-link:focus {
|
|
8798
|
-
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
8799
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
8800
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
8801
|
-
* can combine it with the focus ring box shadow.
|
|
8802
|
-
*/
|
|
8803
7075
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
8804
7076
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
8805
7077
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -8813,11 +7085,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8813
7085
|
background-color: var(--utrecht-toptask-link-focus-background-color, var(--utrecht-toptask-link-background-color));
|
|
8814
7086
|
color: var(--utrecht-toptask-link-focus-color, var(--utrecht-toptask-link-color));
|
|
8815
7087
|
}
|
|
8816
|
-
|
|
8817
|
-
/* override the `:focus` selector above */
|
|
8818
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
8819
7088
|
.utrecht-toptask-link:focus:not(:focus-visible) {
|
|
8820
|
-
/* undo focus ring */
|
|
8821
7089
|
box-shadow: none;
|
|
8822
7090
|
outline-style: revert;
|
|
8823
7091
|
}
|
|
@@ -8831,12 +7099,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8831
7099
|
padding-block-end: var(--utrecht-space-block-xs);
|
|
8832
7100
|
padding-inline-end: var(--utrecht-space-inline-md);
|
|
8833
7101
|
}
|
|
8834
|
-
|
|
8835
|
-
/**
|
|
8836
|
-
* @license EUPL-1.2
|
|
8837
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8838
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8839
|
-
*/
|
|
8840
7102
|
.utrecht-toptask-nav {
|
|
8841
7103
|
display: flex;
|
|
8842
7104
|
flex-direction: column;
|
|
@@ -8848,20 +7110,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8848
7110
|
--utrecht-toptask-link-max-inline-size: var(--utrecht-toptask-nav-link-grid-max-inline-size);
|
|
8849
7111
|
flex-direction: row;
|
|
8850
7112
|
}
|
|
8851
|
-
|
|
8852
|
-
/**
|
|
8853
|
-
* @license EUPL-1.2
|
|
8854
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8855
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8856
|
-
*/
|
|
8857
|
-
/**
|
|
8858
|
-
* @license EUPL-1.2
|
|
8859
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8860
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8861
|
-
*/
|
|
8862
7113
|
.utrecht-unordered-list,
|
|
8863
7114
|
.utrecht-unordered-list--html-content ul {
|
|
8864
|
-
/* Configure `box-sizing` and `text-align` for `--center` */
|
|
8865
7115
|
box-sizing: border-box;
|
|
8866
7116
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
8867
7117
|
font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
|
|
@@ -8904,41 +7154,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
8904
7154
|
color: var(--utrecht-unordered-list-marker-color);
|
|
8905
7155
|
content: "●";
|
|
8906
7156
|
}
|
|
8907
|
-
|
|
8908
|
-
/**
|
|
8909
|
-
* @license EUPL-1.2
|
|
8910
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8911
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8912
|
-
*/
|
|
8913
|
-
/**
|
|
8914
|
-
* @license EUPL-1.2
|
|
8915
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
8916
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
8917
|
-
*/
|
|
8918
7157
|
.utrecht-url-data {
|
|
8919
|
-
/**
|
|
8920
|
-
* `break-inside`: avoid spreading the URL over two columns.
|
|
8921
|
-
* The user might not realise an URL is incomplete, and continues in the next column.
|
|
8922
|
-
* Better to have the entire URL in one column.
|
|
8923
|
-
*
|
|
8924
|
-
* `hyphens`: since hyphens are often part of a URL, the user cannot know if the hypen
|
|
8925
|
-
* is part of the URL and it should be used to visit the page, or if it should be ignored.
|
|
8926
|
-
* Better to avoid inserting any hyphens automatically.
|
|
8927
|
-
*
|
|
8928
|
-
* `overflow-wrap`: "To prevent overflow, an otherwise unbreakable string of
|
|
8929
|
-
* characters — like a long word or URL — may be broken at any point if there
|
|
8930
|
-
* are no otherwise-acceptable break points in the line."
|
|
8931
|
-
*
|
|
8932
|
-
* Source: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#anywhere
|
|
8933
|
-
*
|
|
8934
|
-
* Without `overflow-wrap`, some long URLs will not fit on a printed page.
|
|
8935
|
-
*
|
|
8936
|
-
* `page-break-inside`: The user might not realise an URL is incomplete,
|
|
8937
|
-
* and continues on the next printed page.
|
|
8938
|
-
*
|
|
8939
|
-
* TODO: Perhaps `hyphens: none` can be removed, because `overflow-wrap: anywhere`
|
|
8940
|
-
* has that effect already.
|
|
8941
|
-
*/
|
|
8942
7158
|
break-inside: avoid;
|
|
8943
7159
|
font-variant-ligatures: none;
|
|
8944
7160
|
hyphens: none;
|