@utrecht/component-library-css 1.0.0-alpha.90 → 1.0.0-alpha.94
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bem.css +189 -7
- package/dist/html.css +113 -14
- package/dist/index.css +310 -25
- package/dist/root-theme.css +8 -4
- package/package.json +3 -3
- package/src/bem.scss +2 -0
- package/src/html.scss +1 -0
package/dist/bem.css
CHANGED
|
@@ -337,21 +337,23 @@ ol.utrecht-breadcrumb__list {
|
|
|
337
337
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
338
338
|
*/
|
|
339
339
|
.utrecht-button {
|
|
340
|
-
background-color: var(--utrecht-button-primary-action-background-color);
|
|
340
|
+
background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
|
|
341
341
|
block-size: var(--utrecht-button-block-size, auto);
|
|
342
342
|
border-radius: var(--utrecht-button-border-radius);
|
|
343
343
|
border-width: var(--utrecht-button-border-width);
|
|
344
|
-
color: var(--utrecht-button-primary-action-color);
|
|
344
|
+
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
345
345
|
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
346
346
|
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
347
347
|
font-weight: var(--utrecht-button-font-weight);
|
|
348
348
|
inline-size: var(--utrecht-button-inline-size, auto);
|
|
349
349
|
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
350
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 0);
|
|
350
351
|
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
351
352
|
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
352
353
|
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
353
354
|
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
354
355
|
text-transform: var(--utrecht-button-text-transform);
|
|
356
|
+
user-select: none;
|
|
355
357
|
}
|
|
356
358
|
|
|
357
359
|
.utrecht-button--distanced {
|
|
@@ -372,11 +374,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
372
374
|
|
|
373
375
|
.utrecht-button:disabled,
|
|
374
376
|
.utrecht-button--disabled {
|
|
375
|
-
background-color: var(--utrecht-button-disabled-background-color);
|
|
376
|
-
color: var(--utrecht-button-disabled-color);
|
|
377
|
+
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
378
|
+
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
377
379
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
378
380
|
}
|
|
379
381
|
|
|
382
|
+
.utrecht-button:active,
|
|
383
|
+
.utrecht-button--active {
|
|
384
|
+
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
385
|
+
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
386
|
+
}
|
|
387
|
+
|
|
380
388
|
.utrecht-button--focus,
|
|
381
389
|
.utrecht-button:not(.utrecht-button--disabled):focus {
|
|
382
390
|
background-color: var(--utrecht-focus-background-color);
|
|
@@ -392,8 +400,8 @@ ol.utrecht-breadcrumb__list {
|
|
|
392
400
|
|
|
393
401
|
.utrecht-button--hover:not(:disabled),
|
|
394
402
|
.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
|
|
395
|
-
background-color: var(--utrecht-button-
|
|
396
|
-
color: var(--utrecht-button-
|
|
403
|
+
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
404
|
+
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
397
405
|
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
398
406
|
}
|
|
399
407
|
|
|
@@ -563,6 +571,110 @@ ol.utrecht-breadcrumb__list {
|
|
|
563
571
|
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
564
572
|
}
|
|
565
573
|
|
|
574
|
+
/**
|
|
575
|
+
* @license EUPL-1.2
|
|
576
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
577
|
+
*/
|
|
578
|
+
.utrecht-form-toggle {
|
|
579
|
+
align-items: center;
|
|
580
|
+
border-color: var(--utrecht-form-toggle-border-color, currentColor);
|
|
581
|
+
border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
|
|
582
|
+
border-style: var(--utrecht-form-toggle-border-style, solid);
|
|
583
|
+
border-width: var(--utrecht-form-toggle-border-width, 1px);
|
|
584
|
+
color: var(--utrecht-form-toggle-color);
|
|
585
|
+
display: flex;
|
|
586
|
+
height: var(--utrecht-form-toggle-height, 2em);
|
|
587
|
+
padding-block-end: var(--utrecht-form-toggle-padding-block-end);
|
|
588
|
+
padding-block-start: var(--utrecht-form-toggle-padding-block-start);
|
|
589
|
+
padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
|
|
590
|
+
padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
|
|
591
|
+
position: relative;
|
|
592
|
+
user-select: none;
|
|
593
|
+
width: var(--utrecht-form-toggle-width, 6em);
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.utrecht-form-toggle--focus {
|
|
597
|
+
border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
|
|
598
|
+
border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
|
|
599
|
+
border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
.utrecht-form-toggle--hover {
|
|
603
|
+
background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
|
|
604
|
+
color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.utrecht-form-toggle--disabled {
|
|
608
|
+
border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
|
|
609
|
+
border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
|
|
610
|
+
border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
|
|
611
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.utrecht-form-toggle__thumb {
|
|
615
|
+
/* 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. */
|
|
616
|
+
background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
|
|
617
|
+
border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
|
|
618
|
+
box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
|
|
619
|
+
margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
|
|
620
|
+
margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
|
|
621
|
+
min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
|
|
622
|
+
min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
|
|
623
|
+
z-index: 20;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
.utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
|
|
627
|
+
margin-inline-start: auto;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
|
|
631
|
+
margin-inline-end: auto;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
|
|
635
|
+
background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
|
|
636
|
+
box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.utrecht-form-toggle__track {
|
|
640
|
+
align-items: center;
|
|
641
|
+
background-color: var(--utrecht-form-toggle-accent-color);
|
|
642
|
+
border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
|
|
643
|
+
display: flex;
|
|
644
|
+
height: 100%;
|
|
645
|
+
width: 100%;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
|
|
649
|
+
background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
.utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
|
|
653
|
+
background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
|
|
654
|
+
color: var(--utrecht-form-toggle-disabled-color, black);
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
|
|
658
|
+
/* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
|
|
659
|
+
border: 0 !important;
|
|
660
|
+
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
661
|
+
-webkit-clip-path: inset(50%) !important;
|
|
662
|
+
clip-path: inset(50%) !important;
|
|
663
|
+
height: 1px !important;
|
|
664
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
665
|
+
margin: -1px !important;
|
|
666
|
+
overflow: hidden !important;
|
|
667
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
668
|
+
padding: 0 !important;
|
|
669
|
+
position: absolute !important;
|
|
670
|
+
white-space: nowrap !important;
|
|
671
|
+
width: 1px !important;
|
|
672
|
+
}
|
|
673
|
+
.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
|
|
674
|
+
outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
|
|
675
|
+
outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
|
|
676
|
+
outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
|
|
677
|
+
}
|
|
566
678
|
/**
|
|
567
679
|
* @license EUPL-1.2
|
|
568
680
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
@@ -1285,6 +1397,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
1285
1397
|
}
|
|
1286
1398
|
|
|
1287
1399
|
.utrecht-paragraph--lead {
|
|
1400
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
1288
1401
|
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
1289
1402
|
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
1290
1403
|
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
@@ -1342,6 +1455,67 @@ ol.utrecht-breadcrumb__list {
|
|
|
1342
1455
|
background-size: var(--utrecht-search-bar-textbox-background-size);
|
|
1343
1456
|
}
|
|
1344
1457
|
|
|
1458
|
+
/**
|
|
1459
|
+
* @license EUPL-1.2
|
|
1460
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1461
|
+
*/
|
|
1462
|
+
.utrecht-select {
|
|
1463
|
+
-moz-appearance: none;
|
|
1464
|
+
-webkit-appearance: none;
|
|
1465
|
+
appearance: none;
|
|
1466
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
|
|
1467
|
+
background-image: var(--utrecht-select-background-image);
|
|
1468
|
+
background-position: 100%;
|
|
1469
|
+
background-repeat: no-repeat;
|
|
1470
|
+
background-size: 1.4em;
|
|
1471
|
+
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
|
|
1472
|
+
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1473
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
|
|
1474
|
+
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1475
|
+
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1476
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1477
|
+
border-style: solid;
|
|
1478
|
+
color: var(--utrecht-select-color, var(--utrecht-form-input-color));
|
|
1479
|
+
font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
|
|
1480
|
+
font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
|
|
1481
|
+
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1482
|
+
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1483
|
+
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1484
|
+
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1485
|
+
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1486
|
+
width: 100%;
|
|
1487
|
+
}
|
|
1488
|
+
|
|
1489
|
+
.utrecht-select--disabled, .utrecht-select--html-select:disabled {
|
|
1490
|
+
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
1491
|
+
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
1492
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
1493
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1494
|
+
}
|
|
1495
|
+
|
|
1496
|
+
.utrecht-select--focus, .utrecht-select--html-select:focus {
|
|
1497
|
+
background-color: var(--utrecht-focus-background-color);
|
|
1498
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1499
|
+
color: var(--utrecht-focus-color, inherit);
|
|
1500
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1501
|
+
outline-offset: 0;
|
|
1502
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1503
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1504
|
+
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
1505
|
+
border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
1506
|
+
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
.utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-select--html-select[aria-invalid=true] {
|
|
1510
|
+
background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
1511
|
+
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
1512
|
+
border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1515
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1516
|
+
.utrecht-select--html-select {
|
|
1517
|
+
/* <select> does not support :read-only */
|
|
1518
|
+
}
|
|
1345
1519
|
/**
|
|
1346
1520
|
* @license EUPL-1.2
|
|
1347
1521
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
@@ -1351,7 +1525,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
1351
1525
|
.utrecht-separator {
|
|
1352
1526
|
border-color: var(--utrecht-separator-color);
|
|
1353
1527
|
border-style: solid;
|
|
1354
|
-
border-width: 0 0 var(--utrecht-separator-
|
|
1528
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
1355
1529
|
}
|
|
1356
1530
|
|
|
1357
1531
|
.utrecht-separator--distanced {
|
|
@@ -1462,10 +1636,12 @@ ol.utrecht-breadcrumb__list {
|
|
|
1462
1636
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
1463
1637
|
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1464
1638
|
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1639
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
1465
1640
|
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1466
1641
|
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1467
1642
|
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1468
1643
|
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1644
|
+
resize: vertical;
|
|
1469
1645
|
width: 100%;
|
|
1470
1646
|
}
|
|
1471
1647
|
|
|
@@ -1490,6 +1666,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
1490
1666
|
outline-offset: 0;
|
|
1491
1667
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1492
1668
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1669
|
+
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1670
|
+
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1671
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1493
1672
|
}
|
|
1494
1673
|
|
|
1495
1674
|
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only {
|
|
@@ -1546,6 +1725,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
1546
1725
|
outline-offset: 0;
|
|
1547
1726
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1548
1727
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1728
|
+
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1729
|
+
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1730
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1549
1731
|
}
|
|
1550
1732
|
|
|
1551
1733
|
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only {
|
package/dist/html.css
CHANGED
|
@@ -68,21 +68,23 @@
|
|
|
68
68
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
69
69
|
*/
|
|
70
70
|
.utrecht-button, .utrecht-html button {
|
|
71
|
-
background-color: var(--utrecht-button-primary-action-background-color);
|
|
71
|
+
background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
|
|
72
72
|
block-size: var(--utrecht-button-block-size, auto);
|
|
73
73
|
border-radius: var(--utrecht-button-border-radius);
|
|
74
74
|
border-width: var(--utrecht-button-border-width);
|
|
75
|
-
color: var(--utrecht-button-primary-action-color);
|
|
75
|
+
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
76
76
|
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
77
77
|
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
78
78
|
font-weight: var(--utrecht-button-font-weight);
|
|
79
79
|
inline-size: var(--utrecht-button-inline-size, auto);
|
|
80
80
|
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
81
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 0);
|
|
81
82
|
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
82
83
|
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
83
84
|
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
84
85
|
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
85
86
|
text-transform: var(--utrecht-button-text-transform);
|
|
87
|
+
user-select: none;
|
|
86
88
|
}
|
|
87
89
|
|
|
88
90
|
.utrecht-button--distanced, .utrecht-html button {
|
|
@@ -103,11 +105,17 @@
|
|
|
103
105
|
|
|
104
106
|
.utrecht-button:disabled, .utrecht-html button:disabled,
|
|
105
107
|
.utrecht-button--disabled {
|
|
106
|
-
background-color: var(--utrecht-button-disabled-background-color);
|
|
107
|
-
color: var(--utrecht-button-disabled-color);
|
|
108
|
+
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
109
|
+
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
108
110
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
109
111
|
}
|
|
110
112
|
|
|
113
|
+
.utrecht-button:active, .utrecht-html button:active,
|
|
114
|
+
.utrecht-button--active {
|
|
115
|
+
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
116
|
+
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
117
|
+
}
|
|
118
|
+
|
|
111
119
|
.utrecht-button--focus, .utrecht-html button:focus,
|
|
112
120
|
.utrecht-button:not(.utrecht-button--disabled):focus {
|
|
113
121
|
background-color: var(--utrecht-focus-background-color);
|
|
@@ -123,8 +131,8 @@
|
|
|
123
131
|
|
|
124
132
|
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
|
|
125
133
|
.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
|
|
126
|
-
background-color: var(--utrecht-button-
|
|
127
|
-
color: var(--utrecht-button-
|
|
134
|
+
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
135
|
+
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
128
136
|
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
129
137
|
}
|
|
130
138
|
|
|
@@ -471,21 +479,23 @@
|
|
|
471
479
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
472
480
|
*/
|
|
473
481
|
.utrecht-button, .utrecht-html button {
|
|
474
|
-
background-color: var(--utrecht-button-primary-action-background-color);
|
|
482
|
+
background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
|
|
475
483
|
block-size: var(--utrecht-button-block-size, auto);
|
|
476
484
|
border-radius: var(--utrecht-button-border-radius);
|
|
477
485
|
border-width: var(--utrecht-button-border-width);
|
|
478
|
-
color: var(--utrecht-button-primary-action-color);
|
|
486
|
+
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
479
487
|
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
480
488
|
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
481
489
|
font-weight: var(--utrecht-button-font-weight);
|
|
482
490
|
inline-size: var(--utrecht-button-inline-size, auto);
|
|
483
491
|
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
492
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 0);
|
|
484
493
|
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
485
494
|
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
486
495
|
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
487
496
|
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
488
497
|
text-transform: var(--utrecht-button-text-transform);
|
|
498
|
+
user-select: none;
|
|
489
499
|
}
|
|
490
500
|
|
|
491
501
|
.utrecht-button--distanced, .utrecht-html button {
|
|
@@ -506,11 +516,17 @@
|
|
|
506
516
|
|
|
507
517
|
.utrecht-button:disabled, .utrecht-html button:disabled,
|
|
508
518
|
.utrecht-button--disabled {
|
|
509
|
-
background-color: var(--utrecht-button-disabled-background-color);
|
|
510
|
-
color: var(--utrecht-button-disabled-color);
|
|
519
|
+
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
520
|
+
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
511
521
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
512
522
|
}
|
|
513
523
|
|
|
524
|
+
.utrecht-button:active, .utrecht-html button:active,
|
|
525
|
+
.utrecht-button--active {
|
|
526
|
+
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
527
|
+
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
528
|
+
}
|
|
529
|
+
|
|
514
530
|
.utrecht-button--focus, .utrecht-html button:focus,
|
|
515
531
|
.utrecht-button:not(.utrecht-button--disabled):focus {
|
|
516
532
|
background-color: var(--utrecht-focus-background-color);
|
|
@@ -526,8 +542,8 @@
|
|
|
526
542
|
|
|
527
543
|
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
|
|
528
544
|
.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
|
|
529
|
-
background-color: var(--utrecht-button-
|
|
530
|
-
color: var(--utrecht-button-
|
|
545
|
+
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
546
|
+
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
531
547
|
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
532
548
|
}
|
|
533
549
|
|
|
@@ -903,6 +919,7 @@
|
|
|
903
919
|
}
|
|
904
920
|
|
|
905
921
|
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
922
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
906
923
|
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
907
924
|
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
908
925
|
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
@@ -948,7 +965,7 @@
|
|
|
948
965
|
.utrecht-separator, .utrecht-html hr {
|
|
949
966
|
border-color: var(--utrecht-separator-color);
|
|
950
967
|
border-style: solid;
|
|
951
|
-
border-width: 0 0 var(--utrecht-separator-
|
|
968
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
952
969
|
}
|
|
953
970
|
|
|
954
971
|
.utrecht-separator--distanced, .utrecht-html hr {
|
|
@@ -1072,10 +1089,12 @@
|
|
|
1072
1089
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
1073
1090
|
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1074
1091
|
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1092
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
1075
1093
|
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1076
1094
|
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1077
1095
|
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1078
1096
|
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1097
|
+
resize: vertical;
|
|
1079
1098
|
width: 100%;
|
|
1080
1099
|
}
|
|
1081
1100
|
|
|
@@ -1100,6 +1119,9 @@
|
|
|
1100
1119
|
outline-offset: 0;
|
|
1101
1120
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1102
1121
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1122
|
+
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1123
|
+
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1124
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1103
1125
|
}
|
|
1104
1126
|
|
|
1105
1127
|
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
|
|
@@ -1195,6 +1217,9 @@
|
|
|
1195
1217
|
outline-offset: 0;
|
|
1196
1218
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1197
1219
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1220
|
+
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1221
|
+
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1222
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1198
1223
|
}
|
|
1199
1224
|
|
|
1200
1225
|
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
|
|
@@ -1359,6 +1384,7 @@
|
|
|
1359
1384
|
}
|
|
1360
1385
|
|
|
1361
1386
|
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
1387
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
1362
1388
|
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
1363
1389
|
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
1364
1390
|
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
@@ -1391,6 +1417,71 @@
|
|
|
1391
1417
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
1392
1418
|
}
|
|
1393
1419
|
|
|
1420
|
+
/**
|
|
1421
|
+
* @license EUPL-1.2
|
|
1422
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1423
|
+
*/
|
|
1424
|
+
/**
|
|
1425
|
+
* @license EUPL-1.2
|
|
1426
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1427
|
+
*/
|
|
1428
|
+
.utrecht-select, .utrecht-html select {
|
|
1429
|
+
-moz-appearance: none;
|
|
1430
|
+
-webkit-appearance: none;
|
|
1431
|
+
appearance: none;
|
|
1432
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
|
|
1433
|
+
background-image: var(--utrecht-select-background-image);
|
|
1434
|
+
background-position: 100%;
|
|
1435
|
+
background-repeat: no-repeat;
|
|
1436
|
+
background-size: 1.4em;
|
|
1437
|
+
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
|
|
1438
|
+
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1439
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
|
|
1440
|
+
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1441
|
+
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1442
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1443
|
+
border-style: solid;
|
|
1444
|
+
color: var(--utrecht-select-color, var(--utrecht-form-input-color));
|
|
1445
|
+
font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
|
|
1446
|
+
font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
|
|
1447
|
+
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1448
|
+
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1449
|
+
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1450
|
+
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1451
|
+
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1452
|
+
width: 100%;
|
|
1453
|
+
}
|
|
1454
|
+
|
|
1455
|
+
.utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
|
|
1456
|
+
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
1457
|
+
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
1458
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
1459
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1460
|
+
}
|
|
1461
|
+
|
|
1462
|
+
.utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
|
|
1463
|
+
background-color: var(--utrecht-focus-background-color);
|
|
1464
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1465
|
+
color: var(--utrecht-focus-color, inherit);
|
|
1466
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1467
|
+
outline-offset: 0;
|
|
1468
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1469
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1470
|
+
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
1471
|
+
border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
1472
|
+
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
1473
|
+
}
|
|
1474
|
+
|
|
1475
|
+
.utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
|
|
1476
|
+
background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
1477
|
+
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
1478
|
+
border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
|
|
1479
|
+
}
|
|
1480
|
+
|
|
1481
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1482
|
+
.utrecht-select--html-select, .utrecht-html select {
|
|
1483
|
+
/* <select> does not support :read-only */
|
|
1484
|
+
}
|
|
1394
1485
|
/**
|
|
1395
1486
|
* @license EUPL-1.2
|
|
1396
1487
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -1404,7 +1495,7 @@
|
|
|
1404
1495
|
.utrecht-separator, .utrecht-html hr {
|
|
1405
1496
|
border-color: var(--utrecht-separator-color);
|
|
1406
1497
|
border-style: solid;
|
|
1407
|
-
border-width: 0 0 var(--utrecht-separator-
|
|
1498
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
1408
1499
|
}
|
|
1409
1500
|
|
|
1410
1501
|
.utrecht-separator--distanced, .utrecht-html hr {
|
|
@@ -1528,10 +1619,12 @@
|
|
|
1528
1619
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
1529
1620
|
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1530
1621
|
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1622
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
1531
1623
|
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1532
1624
|
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1533
1625
|
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1534
1626
|
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1627
|
+
resize: vertical;
|
|
1535
1628
|
width: 100%;
|
|
1536
1629
|
}
|
|
1537
1630
|
|
|
@@ -1556,6 +1649,9 @@
|
|
|
1556
1649
|
outline-offset: 0;
|
|
1557
1650
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1558
1651
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1652
|
+
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1653
|
+
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1654
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1559
1655
|
}
|
|
1560
1656
|
|
|
1561
1657
|
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
|
|
@@ -1651,6 +1747,9 @@
|
|
|
1651
1747
|
outline-offset: 0;
|
|
1652
1748
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1653
1749
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1750
|
+
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1751
|
+
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1752
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1654
1753
|
}
|
|
1655
1754
|
|
|
1656
1755
|
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
|
package/dist/index.css
CHANGED
|
@@ -346,21 +346,23 @@ ol.utrecht-breadcrumb__list {
|
|
|
346
346
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
347
347
|
*/
|
|
348
348
|
.utrecht-button, .utrecht-html button {
|
|
349
|
-
background-color: var(--utrecht-button-primary-action-background-color);
|
|
349
|
+
background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
|
|
350
350
|
block-size: var(--utrecht-button-block-size, auto);
|
|
351
351
|
border-radius: var(--utrecht-button-border-radius);
|
|
352
352
|
border-width: var(--utrecht-button-border-width);
|
|
353
|
-
color: var(--utrecht-button-primary-action-color);
|
|
353
|
+
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
354
354
|
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
355
355
|
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
356
356
|
font-weight: var(--utrecht-button-font-weight);
|
|
357
357
|
inline-size: var(--utrecht-button-inline-size, auto);
|
|
358
358
|
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
359
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 0);
|
|
359
360
|
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
360
361
|
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
361
362
|
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
362
363
|
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
363
364
|
text-transform: var(--utrecht-button-text-transform);
|
|
365
|
+
user-select: none;
|
|
364
366
|
}
|
|
365
367
|
|
|
366
368
|
.utrecht-button--distanced, .utrecht-html button {
|
|
@@ -381,11 +383,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
381
383
|
|
|
382
384
|
.utrecht-button:disabled, .utrecht-html button:disabled,
|
|
383
385
|
.utrecht-button--disabled {
|
|
384
|
-
background-color: var(--utrecht-button-disabled-background-color);
|
|
385
|
-
color: var(--utrecht-button-disabled-color);
|
|
386
|
+
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
387
|
+
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
386
388
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
387
389
|
}
|
|
388
390
|
|
|
391
|
+
.utrecht-button:active, .utrecht-html button:active,
|
|
392
|
+
.utrecht-button--active {
|
|
393
|
+
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
394
|
+
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
395
|
+
}
|
|
396
|
+
|
|
389
397
|
.utrecht-button--focus, .utrecht-html button:focus,
|
|
390
398
|
.utrecht-button:not(.utrecht-button--disabled):focus {
|
|
391
399
|
background-color: var(--utrecht-focus-background-color);
|
|
@@ -401,8 +409,8 @@ ol.utrecht-breadcrumb__list {
|
|
|
401
409
|
|
|
402
410
|
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
|
|
403
411
|
.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
|
|
404
|
-
background-color: var(--utrecht-button-
|
|
405
|
-
color: var(--utrecht-button-
|
|
412
|
+
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
413
|
+
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
406
414
|
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
407
415
|
}
|
|
408
416
|
|
|
@@ -572,6 +580,110 @@ ol.utrecht-breadcrumb__list {
|
|
|
572
580
|
font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
|
|
573
581
|
}
|
|
574
582
|
|
|
583
|
+
/**
|
|
584
|
+
* @license EUPL-1.2
|
|
585
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
586
|
+
*/
|
|
587
|
+
.utrecht-form-toggle {
|
|
588
|
+
align-items: center;
|
|
589
|
+
border-color: var(--utrecht-form-toggle-border-color, currentColor);
|
|
590
|
+
border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
|
|
591
|
+
border-style: var(--utrecht-form-toggle-border-style, solid);
|
|
592
|
+
border-width: var(--utrecht-form-toggle-border-width, 1px);
|
|
593
|
+
color: var(--utrecht-form-toggle-color);
|
|
594
|
+
display: flex;
|
|
595
|
+
height: var(--utrecht-form-toggle-height, 2em);
|
|
596
|
+
padding-block-end: var(--utrecht-form-toggle-padding-block-end);
|
|
597
|
+
padding-block-start: var(--utrecht-form-toggle-padding-block-start);
|
|
598
|
+
padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
|
|
599
|
+
padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
|
|
600
|
+
position: relative;
|
|
601
|
+
user-select: none;
|
|
602
|
+
width: var(--utrecht-form-toggle-width, 6em);
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.utrecht-form-toggle--focus {
|
|
606
|
+
border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
|
|
607
|
+
border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
|
|
608
|
+
border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.utrecht-form-toggle--hover {
|
|
612
|
+
background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
|
|
613
|
+
color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
.utrecht-form-toggle--disabled {
|
|
617
|
+
border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
|
|
618
|
+
border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
|
|
619
|
+
border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
|
|
620
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
.utrecht-form-toggle__thumb {
|
|
624
|
+
/* 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. */
|
|
625
|
+
background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
|
|
626
|
+
border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
|
|
627
|
+
box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
|
|
628
|
+
margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
|
|
629
|
+
margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
|
|
630
|
+
min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
|
|
631
|
+
min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
|
|
632
|
+
z-index: 20;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
.utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
|
|
636
|
+
margin-inline-start: auto;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
|
|
640
|
+
margin-inline-end: auto;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
|
|
644
|
+
background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
|
|
645
|
+
box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.utrecht-form-toggle__track {
|
|
649
|
+
align-items: center;
|
|
650
|
+
background-color: var(--utrecht-form-toggle-accent-color);
|
|
651
|
+
border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
|
|
652
|
+
display: flex;
|
|
653
|
+
height: 100%;
|
|
654
|
+
width: 100%;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
|
|
658
|
+
background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
.utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
|
|
662
|
+
background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
|
|
663
|
+
color: var(--utrecht-form-toggle-disabled-color, black);
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
|
|
667
|
+
/* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
|
|
668
|
+
border: 0 !important;
|
|
669
|
+
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
670
|
+
-webkit-clip-path: inset(50%) !important;
|
|
671
|
+
clip-path: inset(50%) !important;
|
|
672
|
+
height: 1px !important;
|
|
673
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
674
|
+
margin: -1px !important;
|
|
675
|
+
overflow: hidden !important;
|
|
676
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
677
|
+
padding: 0 !important;
|
|
678
|
+
position: absolute !important;
|
|
679
|
+
white-space: nowrap !important;
|
|
680
|
+
width: 1px !important;
|
|
681
|
+
}
|
|
682
|
+
.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
|
|
683
|
+
outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
|
|
684
|
+
outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
|
|
685
|
+
outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
|
|
686
|
+
}
|
|
575
687
|
/**
|
|
576
688
|
* @license EUPL-1.2
|
|
577
689
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
@@ -1298,6 +1410,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
1298
1410
|
}
|
|
1299
1411
|
|
|
1300
1412
|
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
1413
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
1301
1414
|
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
1302
1415
|
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
1303
1416
|
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
@@ -1355,6 +1468,67 @@ ol.utrecht-breadcrumb__list {
|
|
|
1355
1468
|
background-size: var(--utrecht-search-bar-textbox-background-size);
|
|
1356
1469
|
}
|
|
1357
1470
|
|
|
1471
|
+
/**
|
|
1472
|
+
* @license EUPL-1.2
|
|
1473
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
1474
|
+
*/
|
|
1475
|
+
.utrecht-select, .utrecht-html select {
|
|
1476
|
+
-moz-appearance: none;
|
|
1477
|
+
-webkit-appearance: none;
|
|
1478
|
+
appearance: none;
|
|
1479
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
|
|
1480
|
+
background-image: var(--utrecht-select-background-image);
|
|
1481
|
+
background-position: 100%;
|
|
1482
|
+
background-repeat: no-repeat;
|
|
1483
|
+
background-size: 1.4em;
|
|
1484
|
+
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
|
|
1485
|
+
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1486
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
|
|
1487
|
+
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1488
|
+
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
1489
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
1490
|
+
border-style: solid;
|
|
1491
|
+
color: var(--utrecht-select-color, var(--utrecht-form-input-color));
|
|
1492
|
+
font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
|
|
1493
|
+
font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
|
|
1494
|
+
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1495
|
+
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1496
|
+
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1497
|
+
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1498
|
+
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1499
|
+
width: 100%;
|
|
1500
|
+
}
|
|
1501
|
+
|
|
1502
|
+
.utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
|
|
1503
|
+
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
1504
|
+
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
1505
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
1506
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
.utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
|
|
1510
|
+
background-color: var(--utrecht-focus-background-color);
|
|
1511
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
1512
|
+
color: var(--utrecht-focus-color, inherit);
|
|
1513
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
1514
|
+
outline-offset: 0;
|
|
1515
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1516
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1517
|
+
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
1518
|
+
border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
1519
|
+
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1522
|
+
.utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
|
|
1523
|
+
background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
1524
|
+
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
1525
|
+
border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
|
|
1526
|
+
}
|
|
1527
|
+
|
|
1528
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
1529
|
+
.utrecht-select--html-select, .utrecht-html select {
|
|
1530
|
+
/* <select> does not support :read-only */
|
|
1531
|
+
}
|
|
1358
1532
|
/**
|
|
1359
1533
|
* @license EUPL-1.2
|
|
1360
1534
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
@@ -1364,7 +1538,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
1364
1538
|
.utrecht-separator, .utrecht-html hr {
|
|
1365
1539
|
border-color: var(--utrecht-separator-color);
|
|
1366
1540
|
border-style: solid;
|
|
1367
|
-
border-width: 0 0 var(--utrecht-separator-
|
|
1541
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
1368
1542
|
}
|
|
1369
1543
|
|
|
1370
1544
|
.utrecht-separator--distanced, .utrecht-html hr {
|
|
@@ -1479,10 +1653,12 @@ ol.utrecht-breadcrumb__list {
|
|
|
1479
1653
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
1480
1654
|
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
1481
1655
|
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
1656
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
1482
1657
|
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
1483
1658
|
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
1484
1659
|
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
1485
1660
|
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
1661
|
+
resize: vertical;
|
|
1486
1662
|
width: 100%;
|
|
1487
1663
|
}
|
|
1488
1664
|
|
|
@@ -1507,6 +1683,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
1507
1683
|
outline-offset: 0;
|
|
1508
1684
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1509
1685
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1686
|
+
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1687
|
+
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1688
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1510
1689
|
}
|
|
1511
1690
|
|
|
1512
1691
|
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
|
|
@@ -1598,6 +1777,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
1598
1777
|
outline-offset: 0;
|
|
1599
1778
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
1600
1779
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
1780
|
+
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
1781
|
+
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
1782
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1601
1783
|
}
|
|
1602
1784
|
|
|
1603
1785
|
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
|
|
@@ -1729,21 +1911,23 @@ ol.utrecht-breadcrumb__list {
|
|
|
1729
1911
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
1730
1912
|
*/
|
|
1731
1913
|
.utrecht-button, .utrecht-html button {
|
|
1732
|
-
background-color: var(--utrecht-button-primary-action-background-color);
|
|
1914
|
+
background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
|
|
1733
1915
|
block-size: var(--utrecht-button-block-size, auto);
|
|
1734
1916
|
border-radius: var(--utrecht-button-border-radius);
|
|
1735
1917
|
border-width: var(--utrecht-button-border-width);
|
|
1736
|
-
color: var(--utrecht-button-primary-action-color);
|
|
1918
|
+
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
1737
1919
|
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
1738
1920
|
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
1739
1921
|
font-weight: var(--utrecht-button-font-weight);
|
|
1740
1922
|
inline-size: var(--utrecht-button-inline-size, auto);
|
|
1741
1923
|
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
1924
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 0);
|
|
1742
1925
|
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
1743
1926
|
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
1744
1927
|
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
1745
1928
|
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
1746
1929
|
text-transform: var(--utrecht-button-text-transform);
|
|
1930
|
+
user-select: none;
|
|
1747
1931
|
}
|
|
1748
1932
|
|
|
1749
1933
|
.utrecht-button--distanced, .utrecht-html button {
|
|
@@ -1764,11 +1948,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
1764
1948
|
|
|
1765
1949
|
.utrecht-button:disabled, .utrecht-html button:disabled,
|
|
1766
1950
|
.utrecht-button--disabled {
|
|
1767
|
-
background-color: var(--utrecht-button-disabled-background-color);
|
|
1768
|
-
color: var(--utrecht-button-disabled-color);
|
|
1951
|
+
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
1952
|
+
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
1769
1953
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
1770
1954
|
}
|
|
1771
1955
|
|
|
1956
|
+
.utrecht-button:active, .utrecht-html button:active,
|
|
1957
|
+
.utrecht-button--active {
|
|
1958
|
+
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
1959
|
+
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
1960
|
+
}
|
|
1961
|
+
|
|
1772
1962
|
.utrecht-button--focus, .utrecht-html button:focus,
|
|
1773
1963
|
.utrecht-button:not(.utrecht-button--disabled):focus {
|
|
1774
1964
|
background-color: var(--utrecht-focus-background-color);
|
|
@@ -1784,8 +1974,8 @@ ol.utrecht-breadcrumb__list {
|
|
|
1784
1974
|
|
|
1785
1975
|
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
|
|
1786
1976
|
.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
|
|
1787
|
-
background-color: var(--utrecht-button-
|
|
1788
|
-
color: var(--utrecht-button-
|
|
1977
|
+
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
1978
|
+
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
1789
1979
|
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
1790
1980
|
}
|
|
1791
1981
|
|
|
@@ -2132,21 +2322,23 @@ ol.utrecht-breadcrumb__list {
|
|
|
2132
2322
|
* Copyright (c) 2021 Gemeente Utrecht
|
|
2133
2323
|
*/
|
|
2134
2324
|
.utrecht-button, .utrecht-html button {
|
|
2135
|
-
background-color: var(--utrecht-button-primary-action-background-color);
|
|
2325
|
+
background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
|
|
2136
2326
|
block-size: var(--utrecht-button-block-size, auto);
|
|
2137
2327
|
border-radius: var(--utrecht-button-border-radius);
|
|
2138
2328
|
border-width: var(--utrecht-button-border-width);
|
|
2139
|
-
color: var(--utrecht-button-primary-action-color);
|
|
2329
|
+
color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
|
|
2140
2330
|
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
2141
2331
|
font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
|
|
2142
2332
|
font-weight: var(--utrecht-button-font-weight);
|
|
2143
2333
|
inline-size: var(--utrecht-button-inline-size, auto);
|
|
2144
2334
|
letter-spacing: var(--utrecht-button-letter-spacing);
|
|
2335
|
+
min-inline-size: var(--utrecht-button-min-inline-size, 0);
|
|
2145
2336
|
padding-block-end: var(--utrecht-button-padding-block-end);
|
|
2146
2337
|
padding-block-start: var(--utrecht-button-padding-block-start);
|
|
2147
2338
|
padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
2148
2339
|
padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
2149
2340
|
text-transform: var(--utrecht-button-text-transform);
|
|
2341
|
+
user-select: none;
|
|
2150
2342
|
}
|
|
2151
2343
|
|
|
2152
2344
|
.utrecht-button--distanced, .utrecht-html button {
|
|
@@ -2167,11 +2359,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
2167
2359
|
|
|
2168
2360
|
.utrecht-button:disabled, .utrecht-html button:disabled,
|
|
2169
2361
|
.utrecht-button--disabled {
|
|
2170
|
-
background-color: var(--utrecht-button-disabled-background-color);
|
|
2171
|
-
color: var(--utrecht-button-disabled-color);
|
|
2362
|
+
background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
|
|
2363
|
+
color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
|
|
2172
2364
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
2173
2365
|
}
|
|
2174
2366
|
|
|
2367
|
+
.utrecht-button:active, .utrecht-html button:active,
|
|
2368
|
+
.utrecht-button--active {
|
|
2369
|
+
background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
|
|
2370
|
+
color: var(--utrecht-button-active-color, var(--utrecht-button-color));
|
|
2371
|
+
}
|
|
2372
|
+
|
|
2175
2373
|
.utrecht-button--focus, .utrecht-html button:focus,
|
|
2176
2374
|
.utrecht-button:not(.utrecht-button--disabled):focus {
|
|
2177
2375
|
background-color: var(--utrecht-focus-background-color);
|
|
@@ -2187,8 +2385,8 @@ ol.utrecht-breadcrumb__list {
|
|
|
2187
2385
|
|
|
2188
2386
|
.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
|
|
2189
2387
|
.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
|
|
2190
|
-
background-color: var(--utrecht-button-
|
|
2191
|
-
color: var(--utrecht-button-
|
|
2388
|
+
background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
|
|
2389
|
+
color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
|
|
2192
2390
|
transform: scale(var(--utrecht-button-focus-transform-scale, 1));
|
|
2193
2391
|
}
|
|
2194
2392
|
|
|
@@ -2564,6 +2762,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
2564
2762
|
}
|
|
2565
2763
|
|
|
2566
2764
|
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
2765
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
2567
2766
|
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
2568
2767
|
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
2569
2768
|
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
@@ -2609,7 +2808,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
2609
2808
|
.utrecht-separator, .utrecht-html hr {
|
|
2610
2809
|
border-color: var(--utrecht-separator-color);
|
|
2611
2810
|
border-style: solid;
|
|
2612
|
-
border-width: 0 0 var(--utrecht-separator-
|
|
2811
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
2613
2812
|
}
|
|
2614
2813
|
|
|
2615
2814
|
.utrecht-separator--distanced, .utrecht-html hr {
|
|
@@ -2733,10 +2932,12 @@ ol.utrecht-breadcrumb__list {
|
|
|
2733
2932
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
2734
2933
|
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
2735
2934
|
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
2935
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
2736
2936
|
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
2737
2937
|
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
2738
2938
|
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
2739
2939
|
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
2940
|
+
resize: vertical;
|
|
2740
2941
|
width: 100%;
|
|
2741
2942
|
}
|
|
2742
2943
|
|
|
@@ -2761,6 +2962,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
2761
2962
|
outline-offset: 0;
|
|
2762
2963
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2763
2964
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
2965
|
+
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
2966
|
+
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
2967
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2764
2968
|
}
|
|
2765
2969
|
|
|
2766
2970
|
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
|
|
@@ -2856,6 +3060,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
2856
3060
|
outline-offset: 0;
|
|
2857
3061
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
2858
3062
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
3063
|
+
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
3064
|
+
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
3065
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
2859
3066
|
}
|
|
2860
3067
|
|
|
2861
3068
|
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
|
|
@@ -3020,6 +3227,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
3020
3227
|
}
|
|
3021
3228
|
|
|
3022
3229
|
.utrecht-paragraph--lead, .utrecht-html p.lead {
|
|
3230
|
+
color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
|
|
3023
3231
|
font-size: var(--utrecht-paragraph-lead-font-size, inherit);
|
|
3024
3232
|
font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
|
|
3025
3233
|
line-height: var(--utrecht-paragraph-lead-line-height, inherit);
|
|
@@ -3052,6 +3260,71 @@ ol.utrecht-breadcrumb__list {
|
|
|
3052
3260
|
cursor: var(--utrecht-action-disabled-cursor);
|
|
3053
3261
|
}
|
|
3054
3262
|
|
|
3263
|
+
/**
|
|
3264
|
+
* @license EUPL-1.2
|
|
3265
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
3266
|
+
*/
|
|
3267
|
+
/**
|
|
3268
|
+
* @license EUPL-1.2
|
|
3269
|
+
* Copyright (c) 2021 Robbert Broersma
|
|
3270
|
+
*/
|
|
3271
|
+
.utrecht-select, .utrecht-html select {
|
|
3272
|
+
-moz-appearance: none;
|
|
3273
|
+
-webkit-appearance: none;
|
|
3274
|
+
appearance: none;
|
|
3275
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
|
|
3276
|
+
background-image: var(--utrecht-select-background-image);
|
|
3277
|
+
background-position: 100%;
|
|
3278
|
+
background-repeat: no-repeat;
|
|
3279
|
+
background-size: 1.4em;
|
|
3280
|
+
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
|
|
3281
|
+
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
3282
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
|
|
3283
|
+
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
3284
|
+
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
|
|
3285
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
|
|
3286
|
+
border-style: solid;
|
|
3287
|
+
color: var(--utrecht-select-color, var(--utrecht-form-input-color));
|
|
3288
|
+
font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
|
|
3289
|
+
font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
|
|
3290
|
+
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
3291
|
+
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
3292
|
+
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
3293
|
+
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
3294
|
+
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
3295
|
+
width: 100%;
|
|
3296
|
+
}
|
|
3297
|
+
|
|
3298
|
+
.utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
|
|
3299
|
+
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
3300
|
+
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
3301
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
3302
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
3303
|
+
}
|
|
3304
|
+
|
|
3305
|
+
.utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
|
|
3306
|
+
background-color: var(--utrecht-focus-background-color);
|
|
3307
|
+
box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
|
|
3308
|
+
color: var(--utrecht-focus-color, inherit);
|
|
3309
|
+
outline-color: var(--utrecht-focus-outline-color, transparent);
|
|
3310
|
+
outline-offset: 0;
|
|
3311
|
+
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
3312
|
+
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
3313
|
+
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
3314
|
+
border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
3315
|
+
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
3316
|
+
}
|
|
3317
|
+
|
|
3318
|
+
.utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
|
|
3319
|
+
background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
|
|
3320
|
+
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
|
|
3321
|
+
border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
|
|
3322
|
+
}
|
|
3323
|
+
|
|
3324
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
3325
|
+
.utrecht-select--html-select, .utrecht-html select {
|
|
3326
|
+
/* <select> does not support :read-only */
|
|
3327
|
+
}
|
|
3055
3328
|
/**
|
|
3056
3329
|
* @license EUPL-1.2
|
|
3057
3330
|
* Copyright (c) 2021 Robbert Broersma
|
|
@@ -3065,7 +3338,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
3065
3338
|
.utrecht-separator, .utrecht-html hr {
|
|
3066
3339
|
border-color: var(--utrecht-separator-color);
|
|
3067
3340
|
border-style: solid;
|
|
3068
|
-
border-width: 0 0 var(--utrecht-separator-
|
|
3341
|
+
border-width: 0 0 var(--utrecht-separator-block-size) 0;
|
|
3069
3342
|
}
|
|
3070
3343
|
|
|
3071
3344
|
.utrecht-separator--distanced, .utrecht-html hr {
|
|
@@ -3189,10 +3462,12 @@ ol.utrecht-breadcrumb__list {
|
|
|
3189
3462
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
|
|
3190
3463
|
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
|
|
3191
3464
|
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
|
|
3465
|
+
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
3192
3466
|
padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
|
|
3193
3467
|
padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
|
|
3194
3468
|
padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
|
|
3195
3469
|
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
|
|
3470
|
+
resize: vertical;
|
|
3196
3471
|
width: 100%;
|
|
3197
3472
|
}
|
|
3198
3473
|
|
|
@@ -3217,6 +3492,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
3217
3492
|
outline-offset: 0;
|
|
3218
3493
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
3219
3494
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
3495
|
+
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
3496
|
+
border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
3497
|
+
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
3220
3498
|
}
|
|
3221
3499
|
|
|
3222
3500
|
.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
|
|
@@ -3312,6 +3590,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
3312
3590
|
outline-offset: 0;
|
|
3313
3591
|
outline-style: var(--utrecht-focus-outline-style, solid);
|
|
3314
3592
|
outline-width: var(--utrecht-focus-outline-width, 0);
|
|
3593
|
+
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
3594
|
+
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
|
|
3595
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
3315
3596
|
}
|
|
3316
3597
|
|
|
3317
3598
|
.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
|
|
@@ -3385,7 +3666,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
3385
3666
|
/* Collection of CSS variables for Utrecht theme applied to `:root` */
|
|
3386
3667
|
/**
|
|
3387
3668
|
* Do not edit directly
|
|
3388
|
-
* Generated on
|
|
3669
|
+
* Generated on Sat, 25 Sep 2021 18:19:00 GMT
|
|
3389
3670
|
*/
|
|
3390
3671
|
:root {
|
|
3391
3672
|
--utrecht-searchbar-hover-transform: 1;
|
|
@@ -3441,8 +3722,10 @@ ol.utrecht-breadcrumb__list {
|
|
|
3441
3722
|
/* basis geel #ffcc00 */
|
|
3442
3723
|
--utrecht-color-yellow-40: hsl(48 100% 40%);
|
|
3443
3724
|
/* donker geel */
|
|
3725
|
+
--utrecht-color-grey-95: hsl(0 0% 95%);
|
|
3726
|
+
/* grijs variant voor achtergrond accordion #f2f2f2 */
|
|
3444
3727
|
--utrecht-color-grey-90: hsl(0 0% 90%);
|
|
3445
|
-
/* grijs variant voor achtergrond templates #
|
|
3728
|
+
/* grijs variant voor achtergrond templates #e6e6e6 */
|
|
3446
3729
|
--utrecht-color-grey-80: hsl(0 0% 80%);
|
|
3447
3730
|
/* grijs variant voor achtergrond content #e5e5e5 */
|
|
3448
3731
|
--utrecht-color-grey-40: hsl(0 0% 40%);
|
|
@@ -3462,7 +3745,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
3462
3745
|
--utrecht-color-blue-35: hsl(211 60% 35%);
|
|
3463
3746
|
/* basis link en knoppen CTA donkerblauw */
|
|
3464
3747
|
--utrecht-color-blue-30: hsl(211 60% 30%);
|
|
3465
|
-
/*
|
|
3748
|
+
/* Deze kleur gebruiken we niet */
|
|
3466
3749
|
--utrecht-color-blue-20: hsl(211 60% 20%);
|
|
3467
3750
|
/* basis donkerblauw (OS focus) */
|
|
3468
3751
|
--utrecht-color-red-40: hsl(0 100% 40%);
|
|
@@ -3590,7 +3873,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
3590
3873
|
/* Extra Small 2 */
|
|
3591
3874
|
--utrecht-space-block-3xs: 2px;
|
|
3592
3875
|
/* Extra Small 3 */
|
|
3593
|
-
--utrecht-separator-
|
|
3876
|
+
--utrecht-separator-block-size: 8px;
|
|
3594
3877
|
--utrecht-select-border-block-end-width: 3px;
|
|
3595
3878
|
--utrecht-pre-heading-text-transform: uppercase;
|
|
3596
3879
|
--utrecht-paragraph-line-height: 1.4;
|
|
@@ -3881,6 +4164,8 @@ ol.utrecht-breadcrumb__list {
|
|
|
3881
4164
|
--utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
|
|
3882
4165
|
--utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
|
|
3883
4166
|
--utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
4167
|
+
--utrecht-button-color: var(--utrecht-color-white);
|
|
4168
|
+
--utrecht-button-background-color: var(--utrecht-color-blue-35);
|
|
3884
4169
|
--utrecht-breadcrumb-item-padding-inline-start: var(--utrecht-space-inline-md);
|
|
3885
4170
|
--utrecht-breadcrumb-item-padding-inline-end: var(--utrecht-space-inline-md);
|
|
3886
4171
|
--utrecht-breadcrumb-item-padding-block-end: var(--utrecht-space-block-xs);
|
package/dist/root-theme.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/* Collection of CSS variables for Utrecht theme applied to `:root` */
|
|
6
6
|
/**
|
|
7
7
|
* Do not edit directly
|
|
8
|
-
* Generated on
|
|
8
|
+
* Generated on Sat, 25 Sep 2021 18:19:00 GMT
|
|
9
9
|
*/
|
|
10
10
|
:root {
|
|
11
11
|
--utrecht-searchbar-hover-transform: 1;
|
|
@@ -61,8 +61,10 @@
|
|
|
61
61
|
/* basis geel #ffcc00 */
|
|
62
62
|
--utrecht-color-yellow-40: hsl(48 100% 40%);
|
|
63
63
|
/* donker geel */
|
|
64
|
+
--utrecht-color-grey-95: hsl(0 0% 95%);
|
|
65
|
+
/* grijs variant voor achtergrond accordion #f2f2f2 */
|
|
64
66
|
--utrecht-color-grey-90: hsl(0 0% 90%);
|
|
65
|
-
/* grijs variant voor achtergrond templates #
|
|
67
|
+
/* grijs variant voor achtergrond templates #e6e6e6 */
|
|
66
68
|
--utrecht-color-grey-80: hsl(0 0% 80%);
|
|
67
69
|
/* grijs variant voor achtergrond content #e5e5e5 */
|
|
68
70
|
--utrecht-color-grey-40: hsl(0 0% 40%);
|
|
@@ -82,7 +84,7 @@
|
|
|
82
84
|
--utrecht-color-blue-35: hsl(211 60% 35%);
|
|
83
85
|
/* basis link en knoppen CTA donkerblauw */
|
|
84
86
|
--utrecht-color-blue-30: hsl(211 60% 30%);
|
|
85
|
-
/*
|
|
87
|
+
/* Deze kleur gebruiken we niet */
|
|
86
88
|
--utrecht-color-blue-20: hsl(211 60% 20%);
|
|
87
89
|
/* basis donkerblauw (OS focus) */
|
|
88
90
|
--utrecht-color-red-40: hsl(0 100% 40%);
|
|
@@ -210,7 +212,7 @@
|
|
|
210
212
|
/* Extra Small 2 */
|
|
211
213
|
--utrecht-space-block-3xs: 2px;
|
|
212
214
|
/* Extra Small 3 */
|
|
213
|
-
--utrecht-separator-
|
|
215
|
+
--utrecht-separator-block-size: 8px;
|
|
214
216
|
--utrecht-select-border-block-end-width: 3px;
|
|
215
217
|
--utrecht-pre-heading-text-transform: uppercase;
|
|
216
218
|
--utrecht-paragraph-line-height: 1.4;
|
|
@@ -501,6 +503,8 @@
|
|
|
501
503
|
--utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
|
|
502
504
|
--utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
|
|
503
505
|
--utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
506
|
+
--utrecht-button-color: var(--utrecht-color-white);
|
|
507
|
+
--utrecht-button-background-color: var(--utrecht-color-blue-35);
|
|
504
508
|
--utrecht-breadcrumb-item-padding-inline-start: var(--utrecht-space-inline-md);
|
|
505
509
|
--utrecht-breadcrumb-item-padding-inline-end: var(--utrecht-space-inline-md);
|
|
506
510
|
--utrecht-breadcrumb-item-padding-block-end: var(--utrecht-space-block-xs);
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.0-alpha.
|
|
2
|
+
"version": "1.0.0-alpha.94",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
|
|
5
5
|
"license": "EUPL-1.2",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"url": "git@github.com:nl-design-system/utrecht.git"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@utrecht/design-tokens": "1.0.0-alpha.
|
|
19
|
+
"@utrecht/design-tokens": "1.0.0-alpha.87",
|
|
20
20
|
"node-sass-package-importer": "5.3.2",
|
|
21
21
|
"rimraf": "3.0.2",
|
|
22
22
|
"sass": "1.41.1"
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
|
|
27
27
|
"clean": "rimraf dist/"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "2ba57354baebe672228c0c84ce8605aee89a85f8"
|
|
30
30
|
}
|
package/src/bem.scss
CHANGED
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
@import "../../../components/form-field-radio-group/bem";
|
|
35
35
|
@import "../../../components/form-fieldset/bem";
|
|
36
36
|
@import "../../../components/form-label/bem";
|
|
37
|
+
@import "../../../components/form-toggle/bem";
|
|
37
38
|
@import "../../../components/heading-1/bem";
|
|
38
39
|
@import "../../../components/heading-2/bem";
|
|
39
40
|
@import "../../../components/heading-3/bem";
|
|
@@ -51,6 +52,7 @@
|
|
|
51
52
|
@import "../../../components/paragraph/bem";
|
|
52
53
|
@import "../../../components/radio-button/bem";
|
|
53
54
|
@import "../../../components/search-bar/bem";
|
|
55
|
+
@import "../../../components/select/bem";
|
|
54
56
|
@import "../../../components/separator/bem";
|
|
55
57
|
@import "../../../components/table/bem";
|
|
56
58
|
@import "../../../components/textarea/bem";
|
package/src/html.scss
CHANGED
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
@import "../../../components/ordered-list/html";
|
|
25
25
|
@import "../../../components/paragraph/html";
|
|
26
26
|
@import "../../../components/radio-button/html";
|
|
27
|
+
@import "../../../components/select/html";
|
|
27
28
|
@import "../../../components/separator/html";
|
|
28
29
|
@import "../../../components/table/html";
|
|
29
30
|
@import "../../../components/textarea/html";
|