@utrecht/component-library-css 1.0.0-alpha.522 → 1.0.0-alpha.524
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/html.css +10 -8
- package/dist/index.css +42 -33
- package/package.json +2 -2
package/dist/html.css
CHANGED
|
@@ -1034,7 +1034,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1034
1034
|
white-space: nowrap;
|
|
1035
1035
|
}
|
|
1036
1036
|
.utrecht-html ol {
|
|
1037
|
-
/* Configure `
|
|
1037
|
+
/* Configure `box-sizing` and `text-align` for `--center` */
|
|
1038
|
+
box-sizing: border-box;
|
|
1038
1039
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
1039
1040
|
font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
|
|
1040
1041
|
line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
|
|
@@ -1042,7 +1043,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1042
1043
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
|
|
1043
1044
|
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
1044
1045
|
text-align: start;
|
|
1045
|
-
width: max-content;
|
|
1046
1046
|
--utrecht-space-around: 1;
|
|
1047
1047
|
}
|
|
1048
1048
|
.utrecht-html ol > li {
|
|
@@ -1299,12 +1299,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1299
1299
|
color: var(--utrecht-select-color, var(--utrecht-form-control-color));
|
|
1300
1300
|
font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
|
|
1301
1301
|
font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
|
|
1302
|
+
inline-size: 100%;
|
|
1302
1303
|
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
1303
1304
|
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
|
|
1304
1305
|
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
|
|
1305
1306
|
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
|
|
1306
1307
|
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
|
|
1307
|
-
width: 100%;
|
|
1308
1308
|
/* <select> does not support :read-only */
|
|
1309
1309
|
}
|
|
1310
1310
|
.utrecht-html select:disabled {
|
|
@@ -1362,10 +1362,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1362
1362
|
border-width: var(--utrecht-table-border-width, 0);
|
|
1363
1363
|
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
1364
1364
|
font-size: var(--utrecht-table-font-size, inherit);
|
|
1365
|
+
inline-size: 100%;
|
|
1365
1366
|
line-height: var(--utrecht-table-line-height, inherit);
|
|
1366
1367
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
|
|
1367
1368
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
|
|
1368
|
-
width: 100%;
|
|
1369
1369
|
--utrecht-space-around: 1;
|
|
1370
1370
|
}
|
|
1371
1371
|
.utrecht-html caption {
|
|
@@ -1455,6 +1455,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1455
1455
|
.utrecht-html textarea {
|
|
1456
1456
|
/* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
|
|
1457
1457
|
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
|
|
1458
|
+
block-size: initial; /* harden */
|
|
1458
1459
|
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
|
|
1459
1460
|
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
|
|
1460
1461
|
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
|
|
@@ -1465,7 +1466,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1465
1466
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
|
|
1466
1467
|
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
1467
1468
|
font-weight: initial; /* harden */
|
|
1468
|
-
|
|
1469
|
+
inline-size: 100%;
|
|
1469
1470
|
line-height: var(--utrecht-textarea-line-height, initial);
|
|
1470
1471
|
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
1471
1472
|
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
@@ -1475,7 +1476,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1475
1476
|
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
1476
1477
|
resize: vertical;
|
|
1477
1478
|
resize: block;
|
|
1478
|
-
width: 100%;
|
|
1479
1479
|
}
|
|
1480
1480
|
.utrecht-html textarea:disabled {
|
|
1481
1481
|
background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
@@ -1542,6 +1542,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1542
1542
|
.utrecht-html input[type=url i],
|
|
1543
1543
|
.utrecht-html input[type=week i] {
|
|
1544
1544
|
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
|
|
1545
|
+
block-size: initial; /* harden */
|
|
1545
1546
|
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
|
|
1546
1547
|
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
|
|
1547
1548
|
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
|
|
@@ -1552,14 +1553,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1552
1553
|
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
|
|
1553
1554
|
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
1554
1555
|
font-weight: initial; /* harden */
|
|
1555
|
-
|
|
1556
|
+
inline-size: 100%;
|
|
1556
1557
|
line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
|
|
1557
1558
|
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
1558
1559
|
padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
|
|
1559
1560
|
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
|
|
1560
1561
|
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
|
|
1561
1562
|
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
1562
|
-
width: 100%;
|
|
1563
1563
|
}
|
|
1564
1564
|
.utrecht-html input:not([type]):disabled,
|
|
1565
1565
|
.utrecht-html input[type=date i]:disabled,
|
|
@@ -1735,6 +1735,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1735
1735
|
font-variant-ligatures: none;
|
|
1736
1736
|
}
|
|
1737
1737
|
.utrecht-html ul {
|
|
1738
|
+
/* Configure `box-sizing` and `text-align` for `--center` */
|
|
1739
|
+
box-sizing: border-box;
|
|
1738
1740
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
1739
1741
|
font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
|
|
1740
1742
|
line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
|
package/dist/index.css
CHANGED
|
@@ -58,12 +58,12 @@
|
|
|
58
58
|
background-color: var(--utrecht-accordion-button-icon-background-color);
|
|
59
59
|
background-position: center;
|
|
60
60
|
background-repeat: no-repeat;
|
|
61
|
+
block-size: var(--utrecht-accordion-button-icon-size);
|
|
61
62
|
content: "";
|
|
62
|
-
|
|
63
|
+
inline-size: var(--utrecht-accordion-button-icon-size);
|
|
63
64
|
inset-block-start: 0;
|
|
64
65
|
inset-inline-end: 0;
|
|
65
66
|
position: absolute;
|
|
66
|
-
width: var(--utrecht-accordion-button-icon-size);
|
|
67
67
|
}
|
|
68
68
|
.utrecht-accordion__button[aria-expanded=false]::after {
|
|
69
69
|
background-image: var(--utrecht-accordion-icon-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E"));
|
|
@@ -719,18 +719,18 @@ ol.utrecht-breadcrumb__list {
|
|
|
719
719
|
}
|
|
720
720
|
.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
|
|
721
721
|
.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
|
|
722
|
+
block-size: 0;
|
|
722
723
|
border-block-end-width: var(--utrecht-breadcrumb-block-size);
|
|
723
724
|
border-block-start-width: var(--utrecht-breadcrumb-block-size);
|
|
724
725
|
border-color: transparent;
|
|
725
726
|
border-style: solid;
|
|
726
727
|
content: " ";
|
|
727
728
|
display: block;
|
|
728
|
-
|
|
729
|
+
inline-size: 0;
|
|
729
730
|
left: 100%;
|
|
730
731
|
margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
|
|
731
732
|
position: absolute;
|
|
732
733
|
top: 50%;
|
|
733
|
-
width: 0;
|
|
734
734
|
}
|
|
735
735
|
.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
|
|
736
736
|
border-inline-start-color: var(--utrecht-breadcrumb-link-background-color);
|
|
@@ -1491,7 +1491,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
1491
1491
|
*/
|
|
1492
1492
|
.utrecht-calendar {
|
|
1493
1493
|
background-color: var(--utrecht-calendar-background-color);
|
|
1494
|
-
|
|
1494
|
+
inline-size: fit-content;
|
|
1495
1495
|
}
|
|
1496
1496
|
|
|
1497
1497
|
.utrecht-calendar__table {
|
|
@@ -1501,18 +1501,18 @@ ol.utrecht-breadcrumb__list {
|
|
|
1501
1501
|
}
|
|
1502
1502
|
|
|
1503
1503
|
.utrecht-calendar__table-weeks-item {
|
|
1504
|
+
inline-size: var(--utrecht-calendar-table-weeks-item-width);
|
|
1504
1505
|
line-height: var(--utrecht-calendar-table-weeks-item-line-height, inherit);
|
|
1505
1506
|
padding-block-end: var(--utrecht-calendar-table-weeks-item-padding-block-end);
|
|
1506
1507
|
padding-block-start: var(--utrecht-calendar-table-weeks-item-padding-block-start);
|
|
1507
|
-
width: var(--utrecht-calendar-table-weeks-item-width);
|
|
1508
1508
|
}
|
|
1509
1509
|
|
|
1510
1510
|
.utrecht-calendar__table-days-item-day {
|
|
1511
1511
|
--utrecht-calendar-button-border-color: var(--utrecht-calendar-table-days-item-day-border-color);
|
|
1512
1512
|
--utrecht-calendar-button-border-width: var(--utrecht-calendar-table-days-item-day-border-width);
|
|
1513
1513
|
--utrecht-calendar-button-color: var(--utrecht-calendar-table-days-item-day-color);
|
|
1514
|
-
|
|
1515
|
-
|
|
1514
|
+
block-size: var(--utrecht-calendar-table-days-item-day-size);
|
|
1515
|
+
inline-size: var(--utrecht-calendar-table-days-item-day-size);
|
|
1516
1516
|
}
|
|
1517
1517
|
|
|
1518
1518
|
.utrecht-calendar__table-days-item-day:hover {
|
|
@@ -1618,8 +1618,8 @@ ol.utrecht-breadcrumb__list {
|
|
|
1618
1618
|
}
|
|
1619
1619
|
|
|
1620
1620
|
.utrecht-calendar__icon {
|
|
1621
|
-
|
|
1622
|
-
|
|
1621
|
+
block-size: var(--utrecht-calendar-icon-size);
|
|
1622
|
+
inline-size: var(--utrecht-calendar-icon-size);
|
|
1623
1623
|
}
|
|
1624
1624
|
|
|
1625
1625
|
/**
|
|
@@ -3192,12 +3192,12 @@ ol.utrecht-breadcrumb__list {
|
|
|
3192
3192
|
* Copyright (c) 2021-2022 Frameless B.V.
|
|
3193
3193
|
*/
|
|
3194
3194
|
.utrecht-icon {
|
|
3195
|
+
block-size: var(--utrecht-icon-size);
|
|
3195
3196
|
color: var(--utrecht-icon-color);
|
|
3196
3197
|
display: inline-block;
|
|
3197
|
-
|
|
3198
|
+
inline-size: var(--utrecht-icon-size);
|
|
3198
3199
|
inset-block-start: var(--utrecht-icon-inset-block-start, 0);
|
|
3199
3200
|
position: relative;
|
|
3200
|
-
width: var(--utrecht-icon-size);
|
|
3201
3201
|
}
|
|
3202
3202
|
|
|
3203
3203
|
.utrecht-icon svg {
|
|
@@ -3207,7 +3207,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
3207
3207
|
*
|
|
3208
3208
|
* <svg width="128px" height="128px">
|
|
3209
3209
|
*/
|
|
3210
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
3210
3211
|
height: 100%;
|
|
3212
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
3211
3213
|
width: 100%;
|
|
3212
3214
|
}
|
|
3213
3215
|
|
|
@@ -3222,7 +3224,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
3222
3224
|
* Copyright (c) 2020-2022 Frameless B.V.
|
|
3223
3225
|
*/
|
|
3224
3226
|
.utrecht-img {
|
|
3227
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
3225
3228
|
height: auto;
|
|
3229
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
3226
3230
|
width: auto;
|
|
3227
3231
|
}
|
|
3228
3232
|
|
|
@@ -3291,9 +3295,9 @@ ol.utrecht-breadcrumb__list {
|
|
|
3291
3295
|
}
|
|
3292
3296
|
|
|
3293
3297
|
.utrecht-link-list__item > a::before {
|
|
3298
|
+
block-size: 1em;
|
|
3294
3299
|
content: "";
|
|
3295
3300
|
display: inline-block;
|
|
3296
|
-
height: 1em;
|
|
3297
3301
|
}
|
|
3298
3302
|
|
|
3299
3303
|
/**
|
|
@@ -3501,15 +3505,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3501
3505
|
--utrecht-icon-color: currentColor;
|
|
3502
3506
|
align-items: center;
|
|
3503
3507
|
background-color: var(--utrecht-link-social-background-color);
|
|
3508
|
+
block-size: var(--utrecht-link-social-size);
|
|
3504
3509
|
border-color: var(--utrecht-link-social-border-color);
|
|
3505
3510
|
border-radius: 50%;
|
|
3506
3511
|
border-style: solid;
|
|
3507
3512
|
border-width: var(--utrecht-link-social-border-width);
|
|
3508
3513
|
color: var(--utrecht-link-social-color);
|
|
3509
3514
|
display: inline-flex;
|
|
3510
|
-
|
|
3515
|
+
inline-size: var(--utrecht-link-social-size);
|
|
3511
3516
|
justify-content: center;
|
|
3512
|
-
width: var(--utrecht-link-social-size);
|
|
3513
3517
|
}
|
|
3514
3518
|
|
|
3515
3519
|
.utrecht-link-social:hover,
|
|
@@ -3888,6 +3892,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3888
3892
|
--utrecht-icon-size: var(--utrecht-map-marker-icon-size);
|
|
3889
3893
|
align-items: center;
|
|
3890
3894
|
background-color: var(--utrecht-map-marker-background-color);
|
|
3895
|
+
block-size: var(--utrecht-map-marker-size);
|
|
3891
3896
|
border-color: var(--utrecht-map-marker-border-color);
|
|
3892
3897
|
border-radius: 50%;
|
|
3893
3898
|
border-style: solid;
|
|
@@ -3895,9 +3900,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3895
3900
|
box-shadow: 13px 3px 3px -2px var(--utrecht-map-marker-box-shadow-color);
|
|
3896
3901
|
color: var(--utrecht-map-marker-color);
|
|
3897
3902
|
display: flex;
|
|
3898
|
-
|
|
3903
|
+
inline-size: var(--utrecht-map-marker-size);
|
|
3899
3904
|
justify-content: center;
|
|
3900
|
-
width: var(--utrecht-map-marker-size);
|
|
3901
3905
|
}
|
|
3902
3906
|
|
|
3903
3907
|
/**
|
|
@@ -3981,11 +3985,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3981
3985
|
--utrecht-sidenav-marker-outline-width: 2px;
|
|
3982
3986
|
border-block-end: 1px solid var(--utrecht-color-grey-80);
|
|
3983
3987
|
border-block-start: 1px solid var(--utrecht-color-grey-80);
|
|
3988
|
+
inline-size: 19rem;
|
|
3984
3989
|
margin-block-end: 0;
|
|
3985
3990
|
margin-block-start: 0;
|
|
3986
3991
|
padding-block-end: 0;
|
|
3987
3992
|
padding-block-start: 0;
|
|
3988
|
-
width: 19rem;
|
|
3989
3993
|
}
|
|
3990
3994
|
|
|
3991
3995
|
.utrecht-sidenav__list {
|
|
@@ -4064,15 +4068,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4064
4068
|
.utrecht-sidenav__link--parent,
|
|
4065
4069
|
.utrecht-sidenav__link--child)::after {
|
|
4066
4070
|
background: var(--utrecht-sidenav-connection-color);
|
|
4071
|
+
block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
|
|
4067
4072
|
bottom: 0;
|
|
4068
4073
|
content: "";
|
|
4069
4074
|
display: block;
|
|
4070
|
-
|
|
4075
|
+
inline-size: var(--utrecht-sidenav-connection-inline-size);
|
|
4071
4076
|
left: 3px;
|
|
4072
4077
|
overflow: hidden;
|
|
4073
4078
|
position: absolute;
|
|
4074
4079
|
top: calc(var(--utrecht-sidenav-marker-offset));
|
|
4075
|
-
width: var(--utrecht-sidenav-connection-inline-size);
|
|
4076
4080
|
z-index: 5;
|
|
4077
4081
|
}
|
|
4078
4082
|
|
|
@@ -4086,27 +4090,27 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4086
4090
|
/* Little fix to move the dot to the right */
|
|
4087
4091
|
.utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
|
|
4088
4092
|
background-color: var(--utrecht-sidenav-item-marker-color);
|
|
4093
|
+
block-size: var(--utrecht-sidenav-marker-height);
|
|
4089
4094
|
border-radius: 100%;
|
|
4090
4095
|
content: "";
|
|
4091
|
-
|
|
4096
|
+
inline-size: 8px;
|
|
4092
4097
|
left: var(--utrecht-sidenav-marker-offset);
|
|
4093
4098
|
overflow: hidden;
|
|
4094
4099
|
position: absolute;
|
|
4095
4100
|
top: 20px; /* Hard value? */
|
|
4096
4101
|
transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
|
|
4097
|
-
width: 8px;
|
|
4098
4102
|
z-index: 10;
|
|
4099
4103
|
}
|
|
4100
4104
|
|
|
4101
4105
|
/* Add dot bullets on child links */
|
|
4102
4106
|
.utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
|
|
4103
4107
|
background-color: transparent;
|
|
4108
|
+
block-size: 4px;
|
|
4104
4109
|
border: 2px solid var(--utrecht-sidenav-link-color);
|
|
4105
|
-
|
|
4110
|
+
inline-size: 4px;
|
|
4106
4111
|
left: 1.2rem;
|
|
4107
4112
|
top: 16px;
|
|
4108
4113
|
transform: translateY(-50%) translateX(-19.5px);
|
|
4109
|
-
width: 4px;
|
|
4110
4114
|
}
|
|
4111
4115
|
|
|
4112
4116
|
/* selector must override .utrecht-sidenav__marker--child */
|
|
@@ -4255,7 +4259,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4255
4259
|
*/
|
|
4256
4260
|
.utrecht-ordered-list,
|
|
4257
4261
|
.utrecht-ordered-list--html-content ol {
|
|
4258
|
-
/* Configure `
|
|
4262
|
+
/* Configure `box-sizing` and `text-align` for `--center` */
|
|
4263
|
+
box-sizing: border-box;
|
|
4259
4264
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
4260
4265
|
font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
|
|
4261
4266
|
line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
|
|
@@ -4263,12 +4268,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4263
4268
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
|
|
4264
4269
|
padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
|
|
4265
4270
|
text-align: start;
|
|
4266
|
-
width: max-content;
|
|
4267
4271
|
}
|
|
4268
4272
|
|
|
4269
4273
|
.utrecht-ordered-list--center {
|
|
4274
|
+
inline-size: max-content;
|
|
4270
4275
|
margin-inline-end: auto;
|
|
4271
4276
|
margin-inline-start: auto;
|
|
4277
|
+
max-inline-size: 100%;
|
|
4272
4278
|
}
|
|
4273
4279
|
|
|
4274
4280
|
.utrecht-ordered-list--distanced {
|
|
@@ -5008,12 +5014,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5008
5014
|
color: var(--utrecht-select-color, var(--utrecht-form-control-color));
|
|
5009
5015
|
font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
|
|
5010
5016
|
font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
|
|
5017
|
+
inline-size: 100%;
|
|
5011
5018
|
max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
5012
5019
|
padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
|
|
5013
5020
|
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
|
|
5014
5021
|
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
|
|
5015
5022
|
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
|
|
5016
|
-
width: 100%;
|
|
5017
5023
|
}
|
|
5018
5024
|
|
|
5019
5025
|
.utrecht-select--disabled {
|
|
@@ -5273,10 +5279,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5273
5279
|
border-width: var(--utrecht-table-border-width, 0);
|
|
5274
5280
|
font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
|
|
5275
5281
|
font-size: var(--utrecht-table-font-size, inherit);
|
|
5282
|
+
inline-size: 100%;
|
|
5276
5283
|
line-height: var(--utrecht-table-line-height, inherit);
|
|
5277
5284
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
|
|
5278
5285
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
|
|
5279
|
-
width: 100%;
|
|
5280
5286
|
}
|
|
5281
5287
|
|
|
5282
5288
|
.utrecht-table--distanced {
|
|
@@ -5433,6 +5439,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5433
5439
|
.utrecht-textarea {
|
|
5434
5440
|
/* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
|
|
5435
5441
|
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
|
|
5442
|
+
block-size: initial; /* harden */
|
|
5436
5443
|
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
|
|
5437
5444
|
border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
|
|
5438
5445
|
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
|
|
@@ -5443,7 +5450,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5443
5450
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
|
|
5444
5451
|
font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
5445
5452
|
font-weight: initial; /* harden */
|
|
5446
|
-
|
|
5453
|
+
inline-size: 100%;
|
|
5447
5454
|
line-height: var(--utrecht-textarea-line-height, initial);
|
|
5448
5455
|
max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
5449
5456
|
min-block-size: var(--utrecht-textarea-min-block-size);
|
|
@@ -5453,7 +5460,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5453
5460
|
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
5454
5461
|
resize: vertical;
|
|
5455
5462
|
resize: block;
|
|
5456
|
-
width: 100%;
|
|
5457
5463
|
}
|
|
5458
5464
|
|
|
5459
5465
|
.utrecht-textarea--invalid {
|
|
@@ -5584,6 +5590,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5584
5590
|
/* stylelint-disable-next-line block-no-empty */
|
|
5585
5591
|
.utrecht-textbox {
|
|
5586
5592
|
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
|
|
5593
|
+
block-size: initial; /* harden */
|
|
5587
5594
|
border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
|
|
5588
5595
|
border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
|
|
5589
5596
|
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
|
|
@@ -5594,14 +5601,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5594
5601
|
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
|
|
5595
5602
|
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
5596
5603
|
font-weight: initial; /* harden */
|
|
5597
|
-
|
|
5604
|
+
inline-size: 100%;
|
|
5598
5605
|
line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
|
|
5599
5606
|
max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
5600
5607
|
padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
|
|
5601
5608
|
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
|
|
5602
5609
|
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
|
|
5603
5610
|
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
5604
|
-
width: 100%;
|
|
5605
5611
|
}
|
|
5606
5612
|
|
|
5607
5613
|
.utrecht-textbox--invalid {
|
|
@@ -5857,6 +5863,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5857
5863
|
*/
|
|
5858
5864
|
.utrecht-unordered-list,
|
|
5859
5865
|
.utrecht-unordered-list--html-content ul {
|
|
5866
|
+
/* Configure `box-sizing` and `text-align` for `--center` */
|
|
5867
|
+
box-sizing: border-box;
|
|
5860
5868
|
font-family: var(--utrecht-document-font-family, inherit);
|
|
5861
5869
|
font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
|
|
5862
5870
|
line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
|
|
@@ -5867,9 +5875,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5867
5875
|
}
|
|
5868
5876
|
|
|
5869
5877
|
.utrecht-unordered-list--center {
|
|
5878
|
+
inline-size: max-content;
|
|
5870
5879
|
margin-inline-end: auto;
|
|
5871
5880
|
margin-inline-start: auto;
|
|
5872
|
-
|
|
5881
|
+
max-inline-size: 100%;
|
|
5873
5882
|
}
|
|
5874
5883
|
|
|
5875
5884
|
.utrecht-unordered-list--distanced {
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.0-alpha.
|
|
2
|
+
"version": "1.0.0-alpha.524",
|
|
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",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"clean": "rimraf dist/"
|
|
27
27
|
},
|
|
28
28
|
"main": "dist/index.css",
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "ad21494090b5e634262e846e807898efece1e228"
|
|
30
30
|
}
|