@utrecht/component-library-css 6.1.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,80 +3,18 @@
3
3
  * Copyright (c) 2024-2025 Gemeente Utrecht
4
4
  * Copyright (c) 2024-2025 Frameless B.V.
5
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
- */
39
- /**
40
- * @license EUPL-1.2
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
6
  /**
46
7
  * @license EUPL-1.2
47
8
  * Copyright (c) 2023 Frameless B.V.
48
9
  */
49
- /**
50
- * @license EUPL-1.2
51
- * Copyright (c) 2021-2022 Gemeente Utrecht
52
- * Copyright (c) 2021-2022 Frameless B.V.
53
- */
54
- /**
55
- * @license EUPL-1.2
56
- * Copyright (c) 2021 Gemeente Utrecht
57
- * Copyright (c) 2021 Robbert Broersma
58
- */
59
- /**
60
- * @license EUPL-1.2
61
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
62
- * Copyright (c) 2021 Gemeente Utrecht
63
- */
64
10
  /**
65
11
  * @license EUPL-1.2
66
12
  * Copyright (c) 2022 Frameless B.V.
67
13
  */
68
14
  /**
69
15
  * @license EUPL-1.2
70
- * Copyright (c) 2021 Robbert Broersma
71
- */
72
- /**
73
- * @license EUPL-1.2
74
- * Copyright (c) 2020-2022 Gemeente Utrecht
75
- * Copyright (c) 2020-2022 Frameless B.V.
76
- */
77
- /**
78
- * @license EUPL-1.2
79
- * Copyright (c) 2021 Gemeente Utrecht
16
+ * Copyright (c) 2020-2024 Frameless B.V.
17
+ * Copyright (c) 2021-2024 Gemeente Utrecht
80
18
  */
81
19
  .utrecht-accordion {
82
20
  display: grid;
@@ -1944,7 +1882,7 @@
1944
1882
  left: 0;
1945
1883
  overflow: auto;
1946
1884
  position: absolute;
1947
- z-index: var(--utrecht-combobox-popover-z-index);
1885
+ z-index: var(--utrecht-combobox-popover-z-index, 1);
1948
1886
  }
1949
1887
 
1950
1888
  .utrecht-combobox__popover--block-end {
@@ -2826,8 +2764,10 @@
2826
2764
  pointer-events: none;
2827
2765
  width: 100%;
2828
2766
  }
2829
- .utrecht-img {
2767
+ .utrecht-img:not(img[height]) {
2830
2768
  height: auto;
2769
+ }
2770
+ .utrecht-img:not(img[width]) {
2831
2771
  width: auto;
2832
2772
  }
2833
2773
 
@@ -3162,12 +3102,13 @@
3162
3102
  }
3163
3103
  .utrecht-listbox {
3164
3104
  --utrecht-listbox-max-block-size: 300px;
3165
- background-color: var(--utrecht-listbox-background-color);
3166
- border-color: var(--utrecht-listbox-border-color);
3105
+ background-color: var(--_utrecht-listbox-disabled-background-color, var(--_utrecht-listbox-interactive-background-color, var(--utrecht-listbox-background-color)));
3106
+ border-color: var(--_utrecht-listbox-disabled-border-color, var(--_utrecht-listbox-interactive-border-color, var(--utrecht-listbox-border-color)));
3167
3107
  border-radius: var(--utrecht-listbox-border-radius);
3168
3108
  border-style: solid;
3169
3109
  border-width: var(--utrecht-listbox-border-width);
3170
3110
  box-sizing: border-box;
3111
+ color: var(--_utrecht-listbox-disabled-color, var(--_utrecht-listbox-interactive-color, var(--utrecht-listbox-color)));
3171
3112
  cursor: default;
3172
3113
  display: flex;
3173
3114
  flex-direction: column;
@@ -3186,6 +3127,7 @@
3186
3127
  }
3187
3128
 
3188
3129
  .utrecht-listbox--focus {
3130
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3189
3131
  }
3190
3132
 
3191
3133
  .utrecht-listbox--focus-visible {
@@ -3201,9 +3143,6 @@
3201
3143
  .utrecht-listbox--invalid {
3202
3144
  }
3203
3145
 
3204
- .utrecht-listbox--read-only {
3205
- }
3206
-
3207
3146
  .utrecht-listbox__list {
3208
3147
  margin-bottom: 0;
3209
3148
  margin-top: 0;
@@ -3231,11 +3170,24 @@
3231
3170
 
3232
3171
  .utrecht-listbox__option {
3233
3172
  list-style: none;
3234
- --utrecht-icon-size: var(--utrecht-listbox-option-icon-size, 16px);
3173
+ --_utrecht-listbox-option-background-color: var(
3174
+ --_utrecht-listbox-option-disabled-background-color,
3175
+ var(
3176
+ --_utrecht-listbox-option-interactive-background-color,
3177
+ var(--_utrecht-listbox-option-state-background-color, var(--utrecht-listbox-option-background-color))
3178
+ )
3179
+ );
3180
+ --_utrecht-listbox-option-color: var(
3181
+ --_utrecht-listbox-option-disabled-color,
3182
+ var(
3183
+ --_utrecht-listbox-option-interactive-color,
3184
+ var(--_utrecht-listbox-option-state-color, var(--utrecht-listbox-option-color))
3185
+ )
3186
+ );
3235
3187
  align-items: center;
3236
- background-color: var(--utrecht-listbox-option-background-color);
3188
+ background-color: var(--_utrecht-listbox-option-background-color);
3237
3189
  box-sizing: border-box;
3238
- color: var(--utrecht-listbox-option-color);
3190
+ color: var(--_utrecht-listbox-option-color);
3239
3191
  display: flex;
3240
3192
  min-height: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));
3241
3193
  padding-bottom: var(--utrecht-listbox-option-padding-block-end);
@@ -3244,19 +3196,14 @@
3244
3196
  padding-left: var(--utrecht-listbox-option-padding-inline-start);
3245
3197
  }
3246
3198
 
3247
- .utrecht-listbox__option--disabled {
3248
- background-color: var(--utrecht-listbox-option-disabled-background-color);
3249
- color: var(--utrecht-listbox-option-disabled-color);
3250
- }
3251
-
3252
3199
  .utrecht-listbox__option--hover {
3253
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3254
- color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
3200
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
3201
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
3255
3202
  }
3256
3203
 
3257
3204
  .utrecht-listbox__option--focus {
3258
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3259
- color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
3205
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
3206
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
3260
3207
  }
3261
3208
 
3262
3209
  .utrecht-listbox__option--focus-visible {
@@ -3271,33 +3218,50 @@
3271
3218
  }
3272
3219
 
3273
3220
  .utrecht-listbox__option--active {
3274
- background-color: var(--utrecht-listbox-option-is-active-background-color);
3275
- color: var(--utrecht-listbox-option-is-active-color);
3221
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-active-background-color);
3222
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-active-color);
3276
3223
  font-weight: var(--utrecht-listbox-option-is-active-font-weight);
3277
3224
  }
3278
3225
 
3279
3226
  .utrecht-listbox__option--selected {
3280
- background-color: var(--utrecht-listbox-option-selected-background-color);
3281
- color: var(--utrecht-listbox-option-selected-color);
3227
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
3228
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
3229
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-selected-hover-background-color);
3230
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-selected-hover-color);
3231
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);
3232
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);
3282
3233
  }
3283
3234
 
3284
3235
  .utrecht-listbox__option--html-li {
3285
3236
  list-style: none;
3286
3237
  }
3287
3238
  .utrecht-listbox__option--html-li:hover {
3288
- background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
3289
- color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
3239
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
3240
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
3290
3241
  }
3291
3242
  .utrecht-listbox__option--html-li:focus {
3292
- background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
3293
- color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
3243
+ --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
3244
+ --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
3245
+ }
3246
+ .utrecht-listbox__option--disabled {
3247
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-listbox-option-disabled-background-color);
3248
+ --utrecht-listbox-option-hover-color: var(--utrecht-listbox-option-disabled-color);
3249
+ --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-disabled-background-color);
3250
+ --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);
3251
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3294
3252
  }
3295
3253
 
3296
3254
  .utrecht-listbox--disabled {
3255
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);
3256
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-disabled-color);
3257
+ --_utrecht-listbox-disabled-background-color: var(--utrecht-listbox-disabled-background-color);
3258
+ --_utrecht-listbox-disabled-border-color: var(--utrecht-listbox-disabled-border-color);
3259
+ --_utrecht-listbox-disabled-color: var(--utrecht-listbox-disabled-color);
3297
3260
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3298
3261
  }
3299
3262
 
3300
3263
  .utrecht-listbox--html-div:focus {
3264
+ --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
3301
3265
  }
3302
3266
  .utrecht-listbox--html-div[prince-xml-ignore-pseudo-class-focus-visible] {
3303
3267
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
@@ -3308,6 +3272,30 @@
3308
3272
  outline-style: var(--utrecht-focus-outline-style, revert);
3309
3273
  outline-width: var(--utrecht-focus-outline-width, revert);
3310
3274
  }
3275
+
3276
+ .utrecht-listbox--forced-colors {
3277
+ --utrecht-listbox-background-color: field;
3278
+ --utrecht-listbox-border-color: fieldtext;
3279
+ --utrecht-listbox-hover-background-color: field;
3280
+ --utrecht-listbox-hover-border-color: fieldtext;
3281
+ --utrecht-listbox-hover-color: fieldtext;
3282
+ --utrecht-listbox-focus-border-color: Highlight;
3283
+ --utrecht-listbox-disabled-border-color: GrayText;
3284
+ --utrecht-listbox-option-background-color: field;
3285
+ --utrecht-listbox-option-color: fieldtext;
3286
+ --utrecht-listbox-option-hover-background-color: Highlight;
3287
+ --utrecht-listbox-option-hover-color: HighlightText;
3288
+ --utrecht-listbox-option-active-background-color: Highlight;
3289
+ --utrecht-listbox-option-active-color: HighlightText;
3290
+ --utrecht-listbox-option-disabled-background-color: field;
3291
+ --utrecht-listbox-option-disabled-color: GrayText;
3292
+ --utrecht-listbox-option-selected-background-color: Highlight;
3293
+ --utrecht-listbox-option-selected-color: HighlightText;
3294
+ --utrecht-listbox-option-selected-hover-background-color: Highlight;
3295
+ --utrecht-listbox-option-selected-hover-color: HighlightText;
3296
+ --utrecht-listbox-option-selected-disabled-background-color: GrayText;
3297
+ --utrecht-listbox-option-selected-disabled-color: field;
3298
+ }
3311
3299
  .utrecht-logo-button {
3312
3300
  --utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
3313
3301
  --utrecht-button-min-block-size: var(--utrecht-logo-button-block-size, 50px);
@@ -3365,59 +3353,6 @@
3365
3353
  width: var(--utrecht-map-marker-size);
3366
3354
  justify-content: center;
3367
3355
  }
3368
- .utrecht-mapcontrolbutton {
3369
- --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
3370
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
3371
- align-items: center;
3372
- background-color: var(--utrecht-mapcontrolbutton-background-color);
3373
- border-color: var(--utrecht-mapcontrolbutton-border-color);
3374
- border-radius: var(--utrecht-mapcontrolbutton-border-radius);
3375
- border-style: var(--utrecht-mapcontrolbutton-border-style);
3376
- border-width: var(--utrecht-mapcontrolbutton-border-width);
3377
- color: var(--utrecht-mapcontrolbutton-color);
3378
- display: flex;
3379
- flex-direction: row;
3380
- justify-content: center;
3381
- min-height: var(--utrecht-mapcontrolbutton-min-block-size);
3382
- min-width: var(--utrecht-mapcontrolbutton-min-inline-size);
3383
- padding-bottom: 0;
3384
- padding-top: 0;
3385
- padding-right: 0;
3386
- padding-left: 0;
3387
- }
3388
-
3389
- .utrecht-mapcontrolbutton:disabled,
3390
- .utrecht-mapcontrolbutton--disabled {
3391
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
3392
- background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
3393
- border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
3394
- color: var(--utrecht-mapcontrolbutton-disabled-color);
3395
- }
3396
-
3397
- .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton[prince-xml-ignore-pseudo-class-focus-visible] {
3398
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3399
- var(--utrecht-focus-inverse-outline-color, transparent);
3400
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3401
- outline-color: var(--utrecht-focus-outline-color, revert);
3402
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3403
- outline-style: var(--utrecht-focus-outline-style, revert);
3404
- outline-width: var(--utrecht-focus-outline-width, revert);
3405
- }
3406
-
3407
- .utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
3408
- --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
3409
- }
3410
- .utrecht-mapcontrolbutton--hover:not(:disabled),
3411
- .utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
3412
- background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
3413
- color: var(--utrecht-mapcontrolbutton-color);
3414
- }
3415
-
3416
- .utrecht-mapcontrolbutton__label {
3417
- display: block;
3418
- padding-right: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
3419
- padding-left: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
3420
- }
3421
3356
  .utrecht-mark {
3422
3357
  background-color: var(--utrecht-mark-background-color, revert);
3423
3358
  color: var(--utrecht-mark-color, revert);
@@ -3444,45 +3379,6 @@
3444
3379
  background-color: Highlight;
3445
3380
  color: HighlightText;
3446
3381
  }
3447
- .utrecht-menulijst {
3448
- border-bottom: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3449
- border-top: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
3450
- font-family: var(--utrecht-document-font-family);
3451
- padding-bottom: var(--utrecht-space-block-sm);
3452
- padding-top: var(--utrecht-space-block-sm);
3453
- padding-left: 0;
3454
- }
3455
-
3456
- .utrecht-menulijst__item {
3457
- list-style: none;
3458
- margin-bottom: var(--utrecht-space-block-sm);
3459
- margin-top: var(--utrecht-space-block-sm);
3460
- }
3461
-
3462
- .utrecht-menulijst__item a {
3463
- background-image: var(--utrecht-menulijst-item-background-image, none);
3464
- background-position: 0 0.25em;
3465
- background-repeat: no-repeat;
3466
- color: var(--utrecht-menulijst-item-color, var(--utrecht-link-color, blue));
3467
- display: block;
3468
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3469
- padding-left: var(--utrecht-space-block-md);
3470
- text-decoration: none;
3471
- }
3472
-
3473
- .utrecht-menulijst__item a:hover {
3474
- color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
3475
- }
3476
-
3477
- .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link[prince-xml-ignore-pseudo-class-focus-visible] {
3478
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3479
- var(--utrecht-focus-inverse-outline-color, transparent);
3480
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3481
- outline-color: var(--utrecht-focus-outline-color, revert);
3482
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3483
- outline-style: var(--utrecht-focus-outline-style, revert);
3484
- outline-width: var(--utrecht-focus-outline-width, revert);
3485
- }
3486
3382
  .utrecht-multiline-data {
3487
3383
  white-space: pre-line;
3488
3384
  }
@@ -3540,226 +3436,6 @@
3540
3436
  padding-left: var(--utrecht-nav-bar-link-padding-inline-start);
3541
3437
  text-decoration: none;
3542
3438
  }
3543
- .utrecht-sidenav {
3544
- --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
3545
- --utrecht-sidenav-connection-inline-size: 2px;
3546
- --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
3547
- --utrecht-sidenav-marker-offset: 26px;
3548
- --utrecht-sidenav-connection-block-size: 100%;
3549
- --utrecht-sidenav-marker-height: 8px;
3550
- --utrecht-sidenav-marker-outline-width: 2px;
3551
- border-bottom: 1px solid var(--utrecht-color-grey-80);
3552
- border-top: 1px solid var(--utrecht-color-grey-80);
3553
- width: 19rem;
3554
- margin-bottom: 0;
3555
- margin-top: 0;
3556
- padding-bottom: 0;
3557
- padding-top: 0;
3558
- }
3559
-
3560
- .utrecht-sidenav__list {
3561
- margin-bottom: 0;
3562
- margin-top: 0.2rem;
3563
- padding-bottom: 0;
3564
- padding-top: 0;
3565
- padding-left: 0;
3566
- }
3567
-
3568
- .utrecht-sidenav__list--child {
3569
- margin-top: 0;
3570
- padding-right: 0;
3571
- padding-left: 1.4rem;
3572
- }
3573
-
3574
- .utrecht-sidenav__item {
3575
- list-style: none;
3576
- margin-left: 0;
3577
- position: relative;
3578
- }
3579
-
3580
- .utrecht-sidenav__item--current {
3581
- color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
3582
- }
3583
-
3584
- .utrecht-sidenav__item--last {
3585
- border-bottom: none;
3586
- }
3587
- .utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
3588
- border-bottom: 1px solid var(--utrecht-color-grey-80);
3589
- display: block;
3590
- margin-left: var(--utrecht-space-inline-lg);
3591
- }
3592
-
3593
- .utrecht-sidenav__link {
3594
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3595
- display: block;
3596
- margin-left: 0;
3597
- padding-bottom: var(--utrecht-space-block-xs);
3598
- padding-top: var(--utrecht-space-block-xs);
3599
- padding-right: var(--utrecht-space-inline-3xs);
3600
- padding-left: var(--utrecht-space-inline-lg);
3601
- text-decoration: none;
3602
- }
3603
-
3604
- .utrecht-sidenav__link:hover {
3605
- color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
3606
- text-decoration: underline;
3607
- }
3608
-
3609
- .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link[prince-xml-ignore-pseudo-class-focus-visible] {
3610
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3611
- var(--utrecht-focus-inverse-outline-color, transparent);
3612
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3613
- outline-color: var(--utrecht-focus-outline-color, revert);
3614
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3615
- outline-style: var(--utrecht-focus-outline-style, revert);
3616
- outline-width: var(--utrecht-focus-outline-width, revert);
3617
- }
3618
- .utrecht-sidenav__link--parent {
3619
- padding-bottom: 0;
3620
- }
3621
- .utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,
3622
- .utrecht-sidenav__link--parent,
3623
- .utrecht-sidenav__link--child)::after {
3624
- background: var(--utrecht-sidenav-connection-color);
3625
- height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
3626
- content: "";
3627
- display: block;
3628
- width: var(--utrecht-sidenav-connection-inline-size);
3629
- bottom: 0;
3630
- top: calc(var(--utrecht-sidenav-marker-offset));
3631
- left: 3px;
3632
- overflow: hidden;
3633
- position: absolute;
3634
- z-index: 5;
3635
- }
3636
-
3637
- .utrecht-sidenav__connection--last,
3638
- .utrecht-sidenav__connection--parent,
3639
- .utrecht-sidenav__connection--sibling {
3640
- display: none;
3641
- }
3642
- .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
3643
- background-color: var(--utrecht-sidenav-item-marker-color);
3644
- height: var(--utrecht-sidenav-marker-height);
3645
- border-radius: 100%;
3646
- content: "";
3647
- width: 8px;
3648
- top: 20px;
3649
- left: var(--utrecht-sidenav-marker-offset);
3650
- overflow: hidden;
3651
- position: absolute;
3652
- transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
3653
- z-index: 10;
3654
- }
3655
- .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
3656
- background-color: transparent;
3657
- height: 4px;
3658
- border: 2px solid var(--utrecht-sidenav-link-color);
3659
- width: 4px;
3660
- top: 16px;
3661
- left: 1.2rem;
3662
- transform: translateY(-50%) translateX(-19.5px);
3663
- }
3664
- .utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
3665
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
3666
- background-color: var(--utrecht-sidenav-marker-current-color);
3667
- }
3668
-
3669
- .utrecht-sidenav__link--child,
3670
- .utrecht-sidenav__link--current-child {
3671
- color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
3672
- margin-bottom: 0;
3673
- margin-top: 0;
3674
- padding-bottom: var(--utrecht-space-block-2xs);
3675
- padding-top: var(--utrecht-space-block-2xs);
3676
- padding-right: var(--utrecht-space-inline-3xs);
3677
- padding-left: var(--utrecht-space-inline-lg);
3678
- text-decoration: none;
3679
- }
3680
-
3681
- .utrecht-sidenav__link--current,
3682
- .utrecht-sidenav__link--current-child {
3683
- font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
3684
- }
3685
- .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 {
3686
- background-color: var(--utrecht-sidenav-link-hover-color);
3687
- }
3688
- .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 {
3689
- background-color: var(--utrecht-sidenav-link-hover-color);
3690
- border: 2px solid var(--utrecht-sidenav-link-hover-color);
3691
- }
3692
-
3693
- .utrecht-sidenav--pseudo-elements {
3694
- }
3695
- .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
3696
- display: none;
3697
- }
3698
- .utrecht-navhtml {
3699
- font-family: var(--utrecht-document-font-family);
3700
- }
3701
-
3702
- .utrecht-topnav__list {
3703
- background-color: var(--utrecht-topnav-list-background-color);
3704
- display: flex;
3705
- justify-content: space-between;
3706
- list-style: none;
3707
- list-style-image: none;
3708
- margin-bottom: 0;
3709
- margin-top: 0;
3710
- overflow: visible;
3711
- padding-bottom: 0;
3712
- padding-top: 0;
3713
- padding-right: 0;
3714
- padding-left: 0;
3715
- }
3716
-
3717
- .utrecht-topnav__item {
3718
- border-right: 1px solid var(--utrecht-topnav-list-border-color);
3719
- flex: 1 0 auto;
3720
- margin-left: 0;
3721
- text-align: center;
3722
- }
3723
-
3724
- .utrecht-topnav__item li:first-child {
3725
- border-left: 1px solid var(--utrecht-topnav-list-border-color);
3726
- padding-left: 0;
3727
- }
3728
-
3729
- .utrecht-topnav__link {
3730
- color: var(--utrecht-topnav-link-color);
3731
- display: block;
3732
- padding-bottom: 1rem;
3733
- padding-top: 1rem;
3734
- text-decoration: none;
3735
- }
3736
-
3737
- .utrecht-topnav__link--hover,
3738
- .utrecht-topnav__link:hover {
3739
- background-color: var(--utrecht-topnav-link-hover-background-color);
3740
- color: var(--utrecht-topnav-link-color);
3741
- text-decoration: underline;
3742
- }
3743
-
3744
- .utrecht-topnav__link--current {
3745
- background-color: var(--utrecht-topnav-list-background-active);
3746
- text-decoration: underline;
3747
- }
3748
-
3749
- .utrecht-topnav__link--focus, .utrecht-topnav__link:focus {
3750
- background-color: var(--utrecht-topnav-link-focus-background-color, var(--utrecht-topnav-link-background-color));
3751
- color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
3752
- }
3753
-
3754
- .utrecht-topnav__link--focus-visible, .utrecht-topnav__link[prince-xml-ignore-pseudo-class-focus-visible] {
3755
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
3756
- var(--utrecht-focus-inverse-outline-color, transparent);
3757
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
3758
- outline-color: var(--utrecht-focus-outline-color, revert);
3759
- outline-offset: var(--utrecht-focus-outline-offset, revert);
3760
- outline-style: var(--utrecht-focus-outline-style, revert);
3761
- outline-width: var(--utrecht-focus-outline-width, revert);
3762
- }
3763
3439
  .utrecht-number-badge {
3764
3440
  background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
3765
3441
  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
@@ -6187,6 +5863,12 @@
6187
5863
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6188
5864
  }
6189
5865
 
5866
+ .utrecht-select--hover {
5867
+ background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
5868
+ border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
5869
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
5870
+ }
5871
+
6190
5872
  .utrecht-select--focus {
6191
5873
  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))));
6192
5874
  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))));
@@ -6222,6 +5904,11 @@
6222
5904
  }
6223
5905
  .utrecht-select--html-select {
6224
5906
  }
5907
+ .utrecht-select--html-select:hover {
5908
+ background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
5909
+ border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
5910
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
5911
+ }
6225
5912
  .utrecht-select--html-select:focus {
6226
5913
  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))));
6227
5914
  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))));
@@ -8020,6 +7707,11 @@
8020
7707
  -prince-pdf-form: enable;
8021
7708
  }
8022
7709
  }
7710
+ .utrecht-html select:hover {
7711
+ background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
7712
+ border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
7713
+ color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
7714
+ }
8023
7715
  .utrecht-html select:focus {
8024
7716
  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))));
8025
7717
  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))));