@utrecht/component-library-css 9.0.10 → 9.0.12
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 +39 -32
- package/dist/index.css +184 -45
- package/dist/prince-xml.css +220 -76
- package/package.json +106 -104
package/dist/html.css
CHANGED
|
@@ -240,12 +240,12 @@
|
|
|
240
240
|
align-items: center;
|
|
241
241
|
background-color: var(--_utrecht-button-background-color);
|
|
242
242
|
block-size: fit-content;
|
|
243
|
-
border-block-end-color: var(--_utrecht-button-border-bottom-color);
|
|
244
|
-
border-block-end-width: var(--_utrecht-button-border-block-end-width);
|
|
245
243
|
border-color: var(--_utrecht-button-border-color);
|
|
246
244
|
border-radius: var(--utrecht-button-border-radius);
|
|
247
245
|
border-style: solid;
|
|
248
246
|
border-width: var(--_utrecht-button-border-width);
|
|
247
|
+
border-block-end-color: var(--_utrecht-button-border-bottom-color);
|
|
248
|
+
border-block-end-width: var(--_utrecht-button-border-block-end-width);
|
|
249
249
|
box-sizing: border-box;
|
|
250
250
|
color: var(--_utrecht-button-color);
|
|
251
251
|
column-gap: var(--utrecht-button-column-gap);
|
|
@@ -376,7 +376,7 @@
|
|
|
376
376
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
|
|
377
377
|
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
|
|
378
378
|
all: revert;
|
|
379
|
-
border: 0;
|
|
379
|
+
border-width: 0;
|
|
380
380
|
margin-inline-end: 0;
|
|
381
381
|
margin-inline-start: 0;
|
|
382
382
|
min-inline-size: 0;
|
|
@@ -463,7 +463,6 @@
|
|
|
463
463
|
break-after: avoid;
|
|
464
464
|
break-inside: avoid-column;
|
|
465
465
|
break-inside: avoid;
|
|
466
|
-
break-after: avoid-page;
|
|
467
466
|
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
468
467
|
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
469
468
|
font-size: var(--utrecht-heading-1-font-size, revert);
|
|
@@ -477,7 +476,6 @@
|
|
|
477
476
|
break-after: avoid;
|
|
478
477
|
break-inside: avoid-column;
|
|
479
478
|
break-inside: avoid;
|
|
480
|
-
break-after: avoid-page;
|
|
481
479
|
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
482
480
|
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
483
481
|
font-size: var(--utrecht-heading-2-font-size, revert);
|
|
@@ -491,7 +489,6 @@
|
|
|
491
489
|
break-after: avoid;
|
|
492
490
|
break-inside: avoid-column;
|
|
493
491
|
break-inside: avoid;
|
|
494
|
-
break-after: avoid-page;
|
|
495
492
|
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
496
493
|
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
497
494
|
font-size: var(--utrecht-heading-3-font-size, revert);
|
|
@@ -505,7 +502,6 @@
|
|
|
505
502
|
break-after: avoid;
|
|
506
503
|
break-inside: avoid-column;
|
|
507
504
|
break-inside: avoid;
|
|
508
|
-
break-after: avoid-page;
|
|
509
505
|
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
510
506
|
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
511
507
|
font-size: var(--utrecht-heading-4-font-size, revert);
|
|
@@ -519,7 +515,6 @@
|
|
|
519
515
|
break-after: avoid;
|
|
520
516
|
break-inside: avoid-column;
|
|
521
517
|
break-inside: avoid;
|
|
522
|
-
break-after: avoid-page;
|
|
523
518
|
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
524
519
|
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
525
520
|
font-size: var(--utrecht-heading-5-font-size, revert);
|
|
@@ -533,7 +528,6 @@
|
|
|
533
528
|
break-after: avoid;
|
|
534
529
|
break-inside: avoid-column;
|
|
535
530
|
break-inside: avoid;
|
|
536
|
-
break-after: avoid-page;
|
|
537
531
|
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
538
532
|
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
539
533
|
font-size: var(--utrecht-heading-6-font-size, revert);
|
|
@@ -829,14 +823,14 @@
|
|
|
829
823
|
);
|
|
830
824
|
}
|
|
831
825
|
.utrecht-html select {
|
|
832
|
-
|
|
826
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
|
|
827
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
828
|
+
border-style: solid;
|
|
833
829
|
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
|
|
834
830
|
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
|
|
835
|
-
border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
|
|
836
831
|
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
|
|
837
832
|
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
|
|
838
|
-
|
|
839
|
-
border-style: solid;
|
|
833
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
|
|
840
834
|
color: var(--utrecht-select-color, var(--utrecht-form-control-color));
|
|
841
835
|
font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
|
|
842
836
|
font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
|
|
@@ -885,10 +879,10 @@
|
|
|
885
879
|
var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
|
|
886
880
|
)
|
|
887
881
|
);
|
|
888
|
-
|
|
882
|
+
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
889
883
|
border-width: var(--_utrecht-select-border-width);
|
|
890
884
|
border-block-end-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
|
|
891
|
-
|
|
885
|
+
background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
892
886
|
}
|
|
893
887
|
.utrecht-html hr {
|
|
894
888
|
border-color: var(--utrecht-separator-color);
|
|
@@ -1007,13 +1001,13 @@
|
|
|
1007
1001
|
color: var(--utrecht-table-row-alternate-odd-color);
|
|
1008
1002
|
}
|
|
1009
1003
|
.utrecht-html textarea {
|
|
1010
|
-
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
|
|
1011
|
-
block-size: initial;
|
|
1012
|
-
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
|
|
1013
|
-
border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
|
|
1014
1004
|
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
|
|
1015
1005
|
border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
1016
1006
|
border-style: solid;
|
|
1007
|
+
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
|
|
1008
|
+
border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
|
|
1009
|
+
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
|
|
1010
|
+
block-size: initial;
|
|
1017
1011
|
box-sizing: border-box;
|
|
1018
1012
|
color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
|
|
1019
1013
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
|
|
@@ -1054,10 +1048,10 @@
|
|
|
1054
1048
|
var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
|
|
1055
1049
|
)
|
|
1056
1050
|
);
|
|
1057
|
-
|
|
1051
|
+
border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
1058
1052
|
border-width: var(--_utrecht-textarea-border-width);
|
|
1059
1053
|
border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
|
|
1060
|
-
|
|
1054
|
+
background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
1061
1055
|
color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1062
1056
|
}
|
|
1063
1057
|
.utrecht-html textarea:read-only {
|
|
@@ -1097,27 +1091,40 @@
|
|
|
1097
1091
|
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
|
|
1098
1092
|
var(--utrecht-textbox-autocomplete-ui-size, 44px)
|
|
1099
1093
|
);
|
|
1100
|
-
|
|
1101
|
-
block-size:
|
|
1102
|
-
|
|
1103
|
-
|
|
1094
|
+
max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
|
|
1095
|
+
min-block-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
|
|
1096
|
+
min-inline-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
|
|
1097
|
+
--_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
|
|
1098
|
+
--_utrecht-textbox-border-block-end-width: var(
|
|
1099
|
+
--utrecht-textbox-border-bottom-width,
|
|
1100
|
+
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
|
|
1101
|
+
);
|
|
1104
1102
|
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
|
|
1105
1103
|
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
1106
1104
|
border-style: solid;
|
|
1105
|
+
border-width: var(--_utrecht-textbox-border-width);
|
|
1106
|
+
border-block-end-width: var(--_utrecht-textbox-border-block-end-width);
|
|
1107
1107
|
box-sizing: border-box;
|
|
1108
|
+
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
|
|
1108
1109
|
color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
|
|
1110
|
+
--_utrecht-textbox-padding-block-end: var(
|
|
1111
|
+
--utrecht-textbox-padding-block-end,
|
|
1112
|
+
var(--utrecht-form-control-padding-block-end, 0)
|
|
1113
|
+
);
|
|
1114
|
+
--_utrecht-textbox-padding-block-start: var(
|
|
1115
|
+
--utrecht-textbox-padding-block-start,
|
|
1116
|
+
var(--utrecht-form-control-padding-block-start, 0)
|
|
1117
|
+
);
|
|
1118
|
+
block-size: initial;
|
|
1109
1119
|
display: block;
|
|
1110
1120
|
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
|
|
1111
1121
|
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
1112
1122
|
font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
|
|
1113
1123
|
inline-size: 100%;
|
|
1114
1124
|
line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
|
|
1115
|
-
min-block-size: var(--utrecht-pointer-target-min-size, 44px);
|
|
1116
|
-
min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
|
|
1117
|
-
max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
|
|
1118
1125
|
overflow: hidden;
|
|
1119
|
-
padding-block-end: var(--
|
|
1120
|
-
padding-block-start: var(--
|
|
1126
|
+
padding-block-end: var(--_utrecht-textbox-padding-block-end);
|
|
1127
|
+
padding-block-start: var(--_utrecht-textbox-padding-block-start);
|
|
1121
1128
|
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
|
|
1122
1129
|
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
1123
1130
|
white-space: nowrap;
|
|
@@ -1193,10 +1200,10 @@
|
|
|
1193
1200
|
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
|
|
1194
1201
|
)
|
|
1195
1202
|
);
|
|
1196
|
-
|
|
1203
|
+
border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
1197
1204
|
border-width: var(--_utrecht-textbox-border-width);
|
|
1198
1205
|
border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
|
|
1199
|
-
|
|
1206
|
+
background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
1200
1207
|
color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
1201
1208
|
}
|
|
1202
1209
|
.utrecht-html input:not([type]):read-only,
|
package/dist/index.css
CHANGED
|
@@ -97,10 +97,10 @@
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.utrecht-accordion__panel {
|
|
100
|
-
border-block-start: none;
|
|
101
100
|
border-color: var(--utrecht-accordion-panel-border-color);
|
|
102
101
|
border-style: solid;
|
|
103
102
|
border-width: var(--utrecht-accordion-panel-border-width);
|
|
103
|
+
border-block-start: none;
|
|
104
104
|
padding-block-end: var(--utrecht-accordion-panel-padding-block-end);
|
|
105
105
|
padding-block-start: var(--utrecht-accordion-panel-padding-block-start);
|
|
106
106
|
padding-inline-end: var(--utrecht-accordion-panel-padding-inline-end);
|
|
@@ -693,10 +693,10 @@
|
|
|
693
693
|
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after,
|
|
694
694
|
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
|
|
695
695
|
block-size: 0;
|
|
696
|
-
border-block-end-width: var(--utrecht-breadcrumb-nav-min-block-size);
|
|
697
|
-
border-block-start-width: var(--utrecht-breadcrumb-nav-min-block-size);
|
|
698
696
|
border-color: transparent;
|
|
699
697
|
border-style: solid;
|
|
698
|
+
border-block-end-width: var(--utrecht-breadcrumb-nav-min-block-size);
|
|
699
|
+
border-block-start-width: var(--utrecht-breadcrumb-nav-min-block-size);
|
|
700
700
|
content: " ";
|
|
701
701
|
display: block;
|
|
702
702
|
inline-size: 0;
|
|
@@ -962,12 +962,12 @@
|
|
|
962
962
|
align-items: center;
|
|
963
963
|
background-color: var(--_utrecht-button-background-color);
|
|
964
964
|
block-size: fit-content;
|
|
965
|
-
border-block-end-color: var(--_utrecht-button-border-bottom-color);
|
|
966
|
-
border-block-end-width: var(--_utrecht-button-border-block-end-width);
|
|
967
965
|
border-color: var(--_utrecht-button-border-color);
|
|
968
966
|
border-radius: var(--utrecht-button-border-radius);
|
|
969
967
|
border-style: solid;
|
|
970
968
|
border-width: var(--_utrecht-button-border-width);
|
|
969
|
+
border-block-end-color: var(--_utrecht-button-border-bottom-color);
|
|
970
|
+
border-block-end-width: var(--_utrecht-button-border-block-end-width);
|
|
971
971
|
box-sizing: border-box;
|
|
972
972
|
color: var(--_utrecht-button-color);
|
|
973
973
|
column-gap: var(--utrecht-button-column-gap);
|
|
@@ -1342,12 +1342,12 @@
|
|
|
1342
1342
|
align-items: center;
|
|
1343
1343
|
background-color: var(--_utrecht-button-background-color);
|
|
1344
1344
|
block-size: fit-content;
|
|
1345
|
-
border-block-end-color: var(--_utrecht-button-border-bottom-color);
|
|
1346
|
-
border-block-end-width: var(--_utrecht-button-border-block-end-width);
|
|
1347
1345
|
border-color: var(--_utrecht-button-border-color);
|
|
1348
1346
|
border-radius: var(--utrecht-button-border-radius);
|
|
1349
1347
|
border-style: solid;
|
|
1350
1348
|
border-width: var(--_utrecht-button-border-width);
|
|
1349
|
+
border-block-end-color: var(--_utrecht-button-border-bottom-color);
|
|
1350
|
+
border-block-end-width: var(--_utrecht-button-border-block-end-width);
|
|
1351
1351
|
box-sizing: border-box;
|
|
1352
1352
|
color: var(--_utrecht-button-color);
|
|
1353
1353
|
column-gap: var(--utrecht-button-column-gap);
|
|
@@ -2209,6 +2209,127 @@
|
|
|
2209
2209
|
border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
|
|
2210
2210
|
color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
|
|
2211
2211
|
}
|
|
2212
|
+
.utrecht-customizable-text-input {
|
|
2213
|
+
display: inline-block;
|
|
2214
|
+
max-inline-size: min(100%, var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
|
|
2215
|
+
position: relative;
|
|
2216
|
+
}
|
|
2217
|
+
|
|
2218
|
+
.utrecht-customizable-text-input__inner {
|
|
2219
|
+
--_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
|
|
2220
|
+
--_utrecht-textbox-border-block-end-width: var(
|
|
2221
|
+
--utrecht-textbox-border-bottom-width,
|
|
2222
|
+
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
|
|
2223
|
+
);
|
|
2224
|
+
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
|
|
2225
|
+
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
2226
|
+
border-style: solid;
|
|
2227
|
+
border-width: var(--_utrecht-textbox-border-width);
|
|
2228
|
+
border-block-end-width: var(--_utrecht-textbox-border-block-end-width);
|
|
2229
|
+
box-sizing: border-box;
|
|
2230
|
+
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
|
|
2231
|
+
color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
|
|
2232
|
+
cursor: text;
|
|
2233
|
+
display: flex;
|
|
2234
|
+
min-block-size: calc(var(--utrecht-pointer-target-min-size, 44px) - var(--_utrecht-textbox-border-width) - var(--_utrecht-textbox-border-block-end-width));
|
|
2235
|
+
}
|
|
2236
|
+
.utrecht-customizable-text-input__inner:has(input:focus-visible, .utrecht-textbox--focus-visible) {
|
|
2237
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
2238
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
2239
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
2240
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
2241
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
2242
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
2243
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2244
|
+
z-index: 1;
|
|
2245
|
+
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
2246
|
+
border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
2247
|
+
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
2248
|
+
}
|
|
2249
|
+
.utrecht-customizable-text-input__inner:has(input[aria-invalid=true], .utrecht-textbox--invalid) {
|
|
2250
|
+
--_utrecht-textbox-border-width: var(
|
|
2251
|
+
--utrecht-textbox-invalid-border-width,
|
|
2252
|
+
var(
|
|
2253
|
+
--utrecht-form-control-invalid-border-width,
|
|
2254
|
+
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
|
|
2255
|
+
)
|
|
2256
|
+
);
|
|
2257
|
+
border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
2258
|
+
border-width: var(--_utrecht-textbox-border-width);
|
|
2259
|
+
border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
|
|
2260
|
+
background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
2261
|
+
color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
2262
|
+
}
|
|
2263
|
+
.utrecht-customizable-text-input__inner:has(input:read-only, .utrecht-textbox--read-only) {
|
|
2264
|
+
background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
2265
|
+
border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
2266
|
+
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
2267
|
+
}
|
|
2268
|
+
.utrecht-customizable-text-input__inner:has(input:disabled, .utrecht-textbox--disabled) {
|
|
2269
|
+
background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
2270
|
+
border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
2271
|
+
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
2272
|
+
cursor: var(--utrecht-action-disabled-cursor, not-allowed);
|
|
2273
|
+
}
|
|
2274
|
+
|
|
2275
|
+
.utrecht-customizable-text-input__wrap-input {
|
|
2276
|
+
display: flex;
|
|
2277
|
+
min-inline-size: 0;
|
|
2278
|
+
order: 2;
|
|
2279
|
+
}
|
|
2280
|
+
|
|
2281
|
+
.utrecht-customizable-text-input__wrap-input .utrecht-textbox,
|
|
2282
|
+
.utrecht-customizable-text-input__slot {
|
|
2283
|
+
margin-block-end: calc(var(--_utrecht-textbox-border-block-end-width) * -1);
|
|
2284
|
+
margin-block-start: calc(var(--_utrecht-textbox-border-width) * -1);
|
|
2285
|
+
}
|
|
2286
|
+
|
|
2287
|
+
.utrecht-customizable-text-input__wrap-input .utrecht-textbox {
|
|
2288
|
+
inline-size: clamp(var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px)), var(--_utrecht-textbox-max-inline-size, var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size))), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
|
|
2289
|
+
max-inline-size: none;
|
|
2290
|
+
min-inline-size: 0;
|
|
2291
|
+
padding-block-end: calc(var(--_utrecht-textbox-padding-block-end) + var(--_utrecht-textbox-border-block-end-width));
|
|
2292
|
+
padding-block-start: calc(var(--_utrecht-textbox-padding-block-start) + var(--_utrecht-textbox-border-width));
|
|
2293
|
+
}
|
|
2294
|
+
.utrecht-customizable-text-input__wrap-input .utrecht-textbox, .utrecht-customizable-text-input__wrap-input .utrecht-textbox:focus, .utrecht-customizable-text-input__wrap-input .utrecht-textbox:focus-visible, .utrecht-customizable-text-input__wrap-input .utrecht-textbox.utrecht-textbox--focus-visible, .utrecht-customizable-text-input__wrap-input .utrecht-textbox.utrecht-textbox--invalid, .utrecht-customizable-text-input__wrap-input .utrecht-textbox.utrecht-textbox--disabled {
|
|
2295
|
+
background-color: transparent;
|
|
2296
|
+
border-width: 0;
|
|
2297
|
+
box-shadow: none;
|
|
2298
|
+
color: currentColor;
|
|
2299
|
+
outline: none;
|
|
2300
|
+
}
|
|
2301
|
+
|
|
2302
|
+
.utrecht-customizable-text-input__wrap-input .utrecht-combobox {
|
|
2303
|
+
display: flex;
|
|
2304
|
+
position: static;
|
|
2305
|
+
}
|
|
2306
|
+
|
|
2307
|
+
.utrecht-customizable-text-input__slot {
|
|
2308
|
+
--utrecht-icon-size: var(--utrecht-textbox-icon-size, 1em);
|
|
2309
|
+
align-items: center;
|
|
2310
|
+
display: flex;
|
|
2311
|
+
justify-content: center;
|
|
2312
|
+
white-space: nowrap;
|
|
2313
|
+
}
|
|
2314
|
+
|
|
2315
|
+
.utrecht-customizable-text-input__slot:is(label),
|
|
2316
|
+
.utrecht-customizable-text-input__slot--label {
|
|
2317
|
+
cursor: inherit;
|
|
2318
|
+
}
|
|
2319
|
+
|
|
2320
|
+
.utrecht-customizable-text-input__slot--start {
|
|
2321
|
+
order: 1;
|
|
2322
|
+
}
|
|
2323
|
+
.utrecht-customizable-text-input__slot--start.utrecht-customizable-text-input__action {
|
|
2324
|
+
margin-inline-start: calc(var(--_utrecht-textbox-border-width) * -1);
|
|
2325
|
+
}
|
|
2326
|
+
|
|
2327
|
+
.utrecht-customizable-text-input__slot--end {
|
|
2328
|
+
order: 3;
|
|
2329
|
+
}
|
|
2330
|
+
.utrecht-customizable-text-input__slot--end.utrecht-customizable-text-input__action {
|
|
2331
|
+
margin-inline-end: calc(var(--_utrecht-textbox-border-width) * -1);
|
|
2332
|
+
}
|
|
2212
2333
|
.utrecht-badge-data,
|
|
2213
2334
|
.utrecht-data-badge {
|
|
2214
2335
|
background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
|
|
@@ -2628,7 +2749,7 @@
|
|
|
2628
2749
|
.utrecht-form-fieldset--html-fieldset,
|
|
2629
2750
|
.utrecht-form-fieldset__fieldset--html-fieldset {
|
|
2630
2751
|
all: revert;
|
|
2631
|
-
border: 0;
|
|
2752
|
+
border-width: 0;
|
|
2632
2753
|
margin-inline-end: 0;
|
|
2633
2754
|
margin-inline-start: 0;
|
|
2634
2755
|
min-inline-size: 0;
|
|
@@ -2819,7 +2940,7 @@
|
|
|
2819
2940
|
|
|
2820
2941
|
.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
|
|
2821
2942
|
block-size: 1px !important;
|
|
2822
|
-
border: 0 !important;
|
|
2943
|
+
border-width: 0 !important;
|
|
2823
2944
|
clip-path: inset(50%) !important;
|
|
2824
2945
|
inline-size: 1px !important;
|
|
2825
2946
|
margin: -1px !important;
|
|
@@ -3457,7 +3578,6 @@
|
|
|
3457
3578
|
break-after: avoid;
|
|
3458
3579
|
break-inside: avoid-column;
|
|
3459
3580
|
break-inside: avoid;
|
|
3460
|
-
break-after: avoid-page;
|
|
3461
3581
|
color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
3462
3582
|
font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
3463
3583
|
font-size: var(--utrecht-heading-1-font-size, revert);
|
|
@@ -3474,7 +3594,6 @@
|
|
|
3474
3594
|
break-after: avoid;
|
|
3475
3595
|
break-inside: avoid-column;
|
|
3476
3596
|
break-inside: avoid;
|
|
3477
|
-
break-after: avoid-page;
|
|
3478
3597
|
color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
3479
3598
|
font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
3480
3599
|
font-size: var(--utrecht-heading-2-font-size, revert);
|
|
@@ -3491,7 +3610,6 @@
|
|
|
3491
3610
|
break-after: avoid;
|
|
3492
3611
|
break-inside: avoid-column;
|
|
3493
3612
|
break-inside: avoid;
|
|
3494
|
-
break-after: avoid-page;
|
|
3495
3613
|
color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
3496
3614
|
font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
3497
3615
|
font-size: var(--utrecht-heading-3-font-size, revert);
|
|
@@ -3508,7 +3626,6 @@
|
|
|
3508
3626
|
break-after: avoid;
|
|
3509
3627
|
break-inside: avoid-column;
|
|
3510
3628
|
break-inside: avoid;
|
|
3511
|
-
break-after: avoid-page;
|
|
3512
3629
|
color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
3513
3630
|
font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
3514
3631
|
font-size: var(--utrecht-heading-4-font-size, revert);
|
|
@@ -3525,7 +3642,6 @@
|
|
|
3525
3642
|
break-after: avoid;
|
|
3526
3643
|
break-inside: avoid-column;
|
|
3527
3644
|
break-inside: avoid;
|
|
3528
|
-
break-after: avoid-page;
|
|
3529
3645
|
color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
3530
3646
|
font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
3531
3647
|
font-size: var(--utrecht-heading-5-font-size, revert);
|
|
@@ -3542,7 +3658,6 @@
|
|
|
3542
3658
|
break-after: avoid;
|
|
3543
3659
|
break-inside: avoid-column;
|
|
3544
3660
|
break-inside: avoid;
|
|
3545
|
-
break-after: avoid-page;
|
|
3546
3661
|
color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
|
|
3547
3662
|
font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
|
|
3548
3663
|
font-size: var(--utrecht-heading-6-font-size, revert);
|
|
@@ -4709,6 +4824,10 @@
|
|
|
4709
4824
|
display: grid;
|
|
4710
4825
|
flex-grow: 1;
|
|
4711
4826
|
inline-size: 100%;
|
|
4827
|
+
padding-block-end: var(--utrecht-page-body-padding-block-end);
|
|
4828
|
+
padding-block-start: var(--utrecht-page-body-padding-block-start);
|
|
4829
|
+
padding-inline-end: var(--utrecht-page-body-padding-inline-end);
|
|
4830
|
+
padding-inline-start: var(--utrecht-page-body-padding-inline-start);
|
|
4712
4831
|
}
|
|
4713
4832
|
|
|
4714
4833
|
.utrecht-page-body__content {
|
|
@@ -7334,7 +7453,7 @@
|
|
|
7334
7453
|
-webkit-font-smoothing: auto !important;
|
|
7335
7454
|
-moz-osx-font-smoothing: auto !important;
|
|
7336
7455
|
background-color: var(--utrecht-root-background-color, Canvas);
|
|
7337
|
-
border: 0;
|
|
7456
|
+
border-width: 0;
|
|
7338
7457
|
box-sizing: border-box;
|
|
7339
7458
|
color: var(--utrecht-root-color, CanvasText);
|
|
7340
7459
|
font-family: var(--utrecht-root-font-family);
|
|
@@ -7480,14 +7599,14 @@
|
|
|
7480
7599
|
color: var(--utrecht-search-bar-list-item-is-selected-color);
|
|
7481
7600
|
}
|
|
7482
7601
|
.utrecht-select {
|
|
7483
|
-
|
|
7602
|
+
border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
|
|
7603
|
+
border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
7604
|
+
border-style: solid;
|
|
7484
7605
|
border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
|
|
7485
7606
|
border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
|
|
7486
|
-
border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
|
|
7487
7607
|
border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
|
|
7488
7608
|
border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
|
|
7489
|
-
|
|
7490
|
-
border-style: solid;
|
|
7609
|
+
background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
|
|
7491
7610
|
color: var(--utrecht-select-color, var(--utrecht-form-control-color));
|
|
7492
7611
|
font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
|
|
7493
7612
|
font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
|
|
@@ -7545,10 +7664,10 @@
|
|
|
7545
7664
|
var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
|
|
7546
7665
|
)
|
|
7547
7666
|
);
|
|
7548
|
-
|
|
7667
|
+
border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
7549
7668
|
border-width: var(--_utrecht-select-border-width);
|
|
7550
7669
|
border-block-end-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
|
|
7551
|
-
|
|
7670
|
+
background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
7552
7671
|
}
|
|
7553
7672
|
.utrecht-select--html-select {
|
|
7554
7673
|
}
|
|
@@ -7993,7 +8112,9 @@
|
|
|
7993
8112
|
|
|
7994
8113
|
.utrecht-table__header--hidden {
|
|
7995
8114
|
block-size: 1px;
|
|
7996
|
-
border:
|
|
8115
|
+
border-color: silver;
|
|
8116
|
+
border-style: solid;
|
|
8117
|
+
border-width: 0;
|
|
7997
8118
|
clip-path: inset(50%);
|
|
7998
8119
|
inline-size: 1px;
|
|
7999
8120
|
outline: 1px solid red;
|
|
@@ -8050,13 +8171,13 @@
|
|
|
8050
8171
|
font-variant-numeric: lining-nums tabular-nums;
|
|
8051
8172
|
}
|
|
8052
8173
|
.utrecht-textarea {
|
|
8053
|
-
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
|
|
8054
|
-
block-size: initial;
|
|
8055
|
-
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
|
|
8056
|
-
border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
|
|
8057
8174
|
border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
|
|
8058
8175
|
border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
8059
8176
|
border-style: solid;
|
|
8177
|
+
border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
|
|
8178
|
+
border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
|
|
8179
|
+
background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
|
|
8180
|
+
block-size: initial;
|
|
8060
8181
|
box-sizing: border-box;
|
|
8061
8182
|
color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
|
|
8062
8183
|
font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
|
|
@@ -8083,10 +8204,10 @@
|
|
|
8083
8204
|
var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
|
|
8084
8205
|
)
|
|
8085
8206
|
);
|
|
8086
|
-
|
|
8207
|
+
border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
8087
8208
|
border-width: var(--_utrecht-textarea-border-width);
|
|
8088
8209
|
border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
|
|
8089
|
-
|
|
8210
|
+
background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
8090
8211
|
color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
8091
8212
|
}
|
|
8092
8213
|
|
|
@@ -8151,10 +8272,10 @@
|
|
|
8151
8272
|
var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
|
|
8152
8273
|
)
|
|
8153
8274
|
);
|
|
8154
|
-
|
|
8275
|
+
border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
8155
8276
|
border-width: var(--_utrecht-textarea-border-width);
|
|
8156
8277
|
border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
|
|
8157
|
-
|
|
8278
|
+
background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
8158
8279
|
color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
8159
8280
|
}
|
|
8160
8281
|
.utrecht-textarea--html-textarea:read-only {
|
|
@@ -8182,27 +8303,40 @@
|
|
|
8182
8303
|
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
|
|
8183
8304
|
var(--utrecht-textbox-autocomplete-ui-size, 44px)
|
|
8184
8305
|
);
|
|
8185
|
-
|
|
8186
|
-
block-size:
|
|
8187
|
-
|
|
8188
|
-
|
|
8306
|
+
max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
|
|
8307
|
+
min-block-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
|
|
8308
|
+
min-inline-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
|
|
8309
|
+
--_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
|
|
8310
|
+
--_utrecht-textbox-border-block-end-width: var(
|
|
8311
|
+
--utrecht-textbox-border-bottom-width,
|
|
8312
|
+
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
|
|
8313
|
+
);
|
|
8189
8314
|
border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
|
|
8190
8315
|
border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
|
|
8191
8316
|
border-style: solid;
|
|
8317
|
+
border-width: var(--_utrecht-textbox-border-width);
|
|
8318
|
+
border-block-end-width: var(--_utrecht-textbox-border-block-end-width);
|
|
8192
8319
|
box-sizing: border-box;
|
|
8320
|
+
background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
|
|
8193
8321
|
color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
|
|
8322
|
+
--_utrecht-textbox-padding-block-end: var(
|
|
8323
|
+
--utrecht-textbox-padding-block-end,
|
|
8324
|
+
var(--utrecht-form-control-padding-block-end, 0)
|
|
8325
|
+
);
|
|
8326
|
+
--_utrecht-textbox-padding-block-start: var(
|
|
8327
|
+
--utrecht-textbox-padding-block-start,
|
|
8328
|
+
var(--utrecht-form-control-padding-block-start, 0)
|
|
8329
|
+
);
|
|
8330
|
+
block-size: initial;
|
|
8194
8331
|
display: block;
|
|
8195
8332
|
font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
|
|
8196
8333
|
font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
|
|
8197
8334
|
font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
|
|
8198
8335
|
inline-size: 100%;
|
|
8199
8336
|
line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
|
|
8200
|
-
min-block-size: var(--utrecht-pointer-target-min-size, 44px);
|
|
8201
|
-
min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
|
|
8202
|
-
max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
|
|
8203
8337
|
overflow: hidden;
|
|
8204
|
-
padding-block-end: var(--
|
|
8205
|
-
padding-block-start: var(--
|
|
8338
|
+
padding-block-end: var(--_utrecht-textbox-padding-block-end);
|
|
8339
|
+
padding-block-start: var(--_utrecht-textbox-padding-block-start);
|
|
8206
8340
|
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
|
|
8207
8341
|
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
8208
8342
|
white-space: nowrap;
|
|
@@ -8216,10 +8350,10 @@
|
|
|
8216
8350
|
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
|
|
8217
8351
|
)
|
|
8218
8352
|
);
|
|
8219
|
-
|
|
8353
|
+
border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
8220
8354
|
border-width: var(--_utrecht-textbox-border-width);
|
|
8221
8355
|
border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
|
|
8222
|
-
|
|
8356
|
+
background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
8223
8357
|
color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
8224
8358
|
}
|
|
8225
8359
|
|
|
@@ -8340,10 +8474,10 @@
|
|
|
8340
8474
|
var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
|
|
8341
8475
|
)
|
|
8342
8476
|
);
|
|
8343
|
-
|
|
8477
|
+
border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
8344
8478
|
border-width: var(--_utrecht-textbox-border-width);
|
|
8345
8479
|
border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
|
|
8346
|
-
|
|
8480
|
+
background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
|
|
8347
8481
|
color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
8348
8482
|
}
|
|
8349
8483
|
.utrecht-textbox--html-input:read-only {
|
|
@@ -8414,7 +8548,9 @@
|
|
|
8414
8548
|
@media (forced-colors: active) {
|
|
8415
8549
|
.utrecht-tooltip {
|
|
8416
8550
|
background-color: Canvas;
|
|
8417
|
-
border:
|
|
8551
|
+
border-color: CanvasText;
|
|
8552
|
+
border-style: solid;
|
|
8553
|
+
border-width: 1px;
|
|
8418
8554
|
color: CanvasText;
|
|
8419
8555
|
}
|
|
8420
8556
|
}
|
|
@@ -8570,10 +8706,13 @@
|
|
|
8570
8706
|
--utrecht-icon-color: currentColor;
|
|
8571
8707
|
--utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
|
|
8572
8708
|
background-color: var(--utrecht-toptask-link-background-color);
|
|
8709
|
+
border-radius: var(--utrecht-toptask-link-border-radius);
|
|
8573
8710
|
color: var(--utrecht-toptask-link-color);
|
|
8574
8711
|
display: flex;
|
|
8575
8712
|
flex-direction: column;
|
|
8713
|
+
font-family: var(--utrecht-toptask-link-font-family);
|
|
8576
8714
|
font-size: var(--utrecht-toptask-link-font-size);
|
|
8715
|
+
font-weight: var(--utrecht-toptask-link-font-weight);
|
|
8577
8716
|
line-height: var(--utrecht-toptask-link-line-height);
|
|
8578
8717
|
max-inline-size: var(--utrecht-toptask-link-max-inline-size);
|
|
8579
8718
|
min-block-size: var(--utrecht-toptask-link-min-block-size);
|