@utrecht/component-library-css 1.0.0-alpha.385 → 1.0.0-alpha.387
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 +83 -41
- package/dist/index.css +343 -163
- package/package.json +2 -2
package/dist/html.css
CHANGED
|
@@ -668,11 +668,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
668
668
|
}
|
|
669
669
|
.utrecht-html button:focus-visible {
|
|
670
670
|
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
671
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
672
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
673
|
+
* can combine it with the focus ring box shadow.
|
|
674
|
+
*/
|
|
675
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
676
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
677
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
678
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
679
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
680
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
681
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
676
682
|
}
|
|
677
683
|
.utrecht-html input[type=checkbox i] {
|
|
678
684
|
margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
|
|
@@ -685,16 +691,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
685
691
|
cursor: var(--utrecht-action-disabled-cursor, revert);
|
|
686
692
|
}
|
|
687
693
|
.utrecht-html input[type=checkbox i]:focus {
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
694
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
695
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
696
|
+
* can combine it with the focus ring box shadow.
|
|
697
|
+
*/
|
|
698
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
699
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
700
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
701
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
702
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
703
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
704
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
693
705
|
}
|
|
694
706
|
.utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
|
|
695
707
|
/* undo focus ring */
|
|
696
708
|
box-shadow: none;
|
|
697
|
-
outline-style:
|
|
709
|
+
outline-style: revert;
|
|
698
710
|
}
|
|
699
711
|
.utrecht-html body {
|
|
700
712
|
/* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
|
|
@@ -922,16 +934,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
922
934
|
text-decoration-skip: none;
|
|
923
935
|
text-decoration-skip-ink: none;
|
|
924
936
|
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
937
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
938
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
939
|
+
* can combine it with the focus ring box shadow.
|
|
940
|
+
*/
|
|
941
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
942
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
943
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
944
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
945
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
946
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
947
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
930
948
|
}
|
|
931
949
|
.utrecht-html a:focus:not(:focus-visible) {
|
|
932
950
|
/* undo focus ring */
|
|
933
951
|
box-shadow: none;
|
|
934
|
-
outline-style:
|
|
952
|
+
outline-style: revert;
|
|
935
953
|
}
|
|
936
954
|
.utrecht-html a[href^="tel:" i] {
|
|
937
955
|
white-space: nowrap;
|
|
@@ -992,16 +1010,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
992
1010
|
cursor: var(--utrecht-action-disabled-cursor, revert);
|
|
993
1011
|
}
|
|
994
1012
|
.utrecht-html input[type=radio i]:focus {
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1013
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1014
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1015
|
+
* can combine it with the focus ring box shadow.
|
|
1016
|
+
*/
|
|
1017
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1018
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1019
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1020
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1021
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1022
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1023
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1000
1024
|
}
|
|
1001
1025
|
.utrecht-html input[type=radio i]:focus:not(:focus-visible) {
|
|
1002
1026
|
/* undo focus ring */
|
|
1003
1027
|
box-shadow: none;
|
|
1004
|
-
outline-style:
|
|
1028
|
+
outline-style: revert;
|
|
1005
1029
|
}
|
|
1006
1030
|
.utrecht-html select {
|
|
1007
1031
|
-moz-appearance: none;
|
|
@@ -1040,16 +1064,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1040
1064
|
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))));
|
|
1041
1065
|
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))));
|
|
1042
1066
|
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1067
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1068
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1069
|
+
* can combine it with the focus ring box shadow.
|
|
1070
|
+
*/
|
|
1071
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1072
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1073
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1074
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1075
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1076
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1077
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1048
1078
|
}
|
|
1049
1079
|
.utrecht-html select:focus:not(:focus-visible) {
|
|
1050
1080
|
/* undo focus ring */
|
|
1051
1081
|
box-shadow: none;
|
|
1052
|
-
outline-style:
|
|
1082
|
+
outline-style: revert;
|
|
1053
1083
|
}
|
|
1054
1084
|
.utrecht-html select[aria-invalid=true] {
|
|
1055
1085
|
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))));
|
|
@@ -1190,16 +1220,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1190
1220
|
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))));
|
|
1191
1221
|
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))));
|
|
1192
1222
|
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1223
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1224
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1225
|
+
* can combine it with the focus ring box shadow.
|
|
1226
|
+
*/
|
|
1227
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1228
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1229
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1230
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1231
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1232
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1233
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1198
1234
|
}
|
|
1199
1235
|
.utrecht-html textarea:focus:not(:focus-visible) {
|
|
1200
1236
|
/* undo focus ring */
|
|
1201
1237
|
box-shadow: none;
|
|
1202
|
-
outline-style:
|
|
1238
|
+
outline-style: revert;
|
|
1203
1239
|
}
|
|
1204
1240
|
.utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
|
|
1205
1241
|
background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
@@ -1282,11 +1318,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1282
1318
|
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))));
|
|
1283
1319
|
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))));
|
|
1284
1320
|
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1321
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1322
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1323
|
+
* can combine it with the focus ring box shadow.
|
|
1324
|
+
*/
|
|
1325
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1326
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1327
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1328
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1329
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1330
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1331
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1290
1332
|
}
|
|
1291
1333
|
.utrecht-html input:not([type]):focus:not(:focus-visible),
|
|
1292
1334
|
.utrecht-html input[type=date i]:focus:not(:focus-visible),
|
|
@@ -1303,7 +1345,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1303
1345
|
.utrecht-html input[type=week i]:focus:not(:focus-visible) {
|
|
1304
1346
|
/* undo focus ring */
|
|
1305
1347
|
box-shadow: none;
|
|
1306
|
-
outline-style:
|
|
1348
|
+
outline-style: revert;
|
|
1307
1349
|
}
|
|
1308
1350
|
.utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
|
|
1309
1351
|
.utrecht-html input[type=date i]:invalid,
|
package/dist/index.css
CHANGED
|
@@ -893,11 +893,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
893
893
|
|
|
894
894
|
.utrecht-button--focus-visible {
|
|
895
895
|
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
896
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
897
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
898
|
+
* can combine it with the focus ring box shadow.
|
|
899
|
+
*/
|
|
900
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
901
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
902
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
903
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
904
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
905
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
906
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
901
907
|
}
|
|
902
908
|
|
|
903
909
|
.utrecht-button--focus:not(.utrecht-button--disabled) {
|
|
@@ -909,11 +915,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
909
915
|
.utrecht-button:focus {
|
|
910
916
|
/* Show focus ring even for disabled :focus-visible buttons. *
|
|
911
917
|
/* For example: <button disabled tabindex="0"> */
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
918
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
919
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
920
|
+
* can combine it with the focus ring box shadow.
|
|
921
|
+
*/
|
|
922
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
923
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
924
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
925
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
926
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
927
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
928
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
917
929
|
}
|
|
918
930
|
|
|
919
931
|
.utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
|
|
@@ -921,11 +933,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
921
933
|
border-color: var(--_utrecht-button-focus-border-color);
|
|
922
934
|
color: var(--_utrecht-button-focus-color);
|
|
923
935
|
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
936
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
937
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
938
|
+
* can combine it with the focus ring box shadow.
|
|
939
|
+
*/
|
|
940
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
941
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
942
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
943
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
944
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
945
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
946
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
929
947
|
}
|
|
930
948
|
|
|
931
949
|
/* override the `:focus` selector above */
|
|
@@ -933,7 +951,7 @@ ol.utrecht-breadcrumb__list {
|
|
|
933
951
|
.utrecht-button:focus:not(:focus-visible) {
|
|
934
952
|
/* undo focus ring */
|
|
935
953
|
box-shadow: none;
|
|
936
|
-
outline-style:
|
|
954
|
+
outline-style: revert;
|
|
937
955
|
}
|
|
938
956
|
|
|
939
957
|
.utrecht-button--hover:not(:disabled):not(.utrecht-button--disabled),
|
|
@@ -1617,11 +1635,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
1617
1635
|
|
|
1618
1636
|
.utrecht-button-link--focus-visible {
|
|
1619
1637
|
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1638
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1639
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1640
|
+
* can combine it with the focus ring box shadow.
|
|
1641
|
+
*/
|
|
1642
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1643
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1644
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1645
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1646
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1647
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1648
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1625
1649
|
}
|
|
1626
1650
|
|
|
1627
1651
|
.utrecht-button-link--placeholder {
|
|
@@ -1643,11 +1667,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
1643
1667
|
}
|
|
1644
1668
|
.utrecht-button-link--html-a:focus-visible {
|
|
1645
1669
|
/* the pseudo-class for `:focus-visible` is implemented via the mixin */
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1670
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1671
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1672
|
+
* can combine it with the focus ring box shadow.
|
|
1673
|
+
*/
|
|
1674
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1675
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1676
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1677
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1678
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1679
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1680
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1651
1681
|
}
|
|
1652
1682
|
.utrecht-button-link--html-a:link:hover {
|
|
1653
1683
|
background-color: var(--_utrecht-button-hover-background-color);
|
|
@@ -1757,27 +1787,39 @@ ol.utrecht-breadcrumb__list {
|
|
|
1757
1787
|
}
|
|
1758
1788
|
|
|
1759
1789
|
.utrecht-checkbox--focus-visible {
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1790
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1791
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1792
|
+
* can combine it with the focus ring box shadow.
|
|
1793
|
+
*/
|
|
1794
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1795
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1796
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1797
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1798
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1799
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1800
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1765
1801
|
}
|
|
1766
1802
|
|
|
1767
1803
|
.utrecht-checkbox--html-input:disabled {
|
|
1768
1804
|
cursor: var(--utrecht-action-disabled-cursor, revert);
|
|
1769
1805
|
}
|
|
1770
1806
|
.utrecht-checkbox--html-input:focus {
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1807
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1808
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1809
|
+
* can combine it with the focus ring box shadow.
|
|
1810
|
+
*/
|
|
1811
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1812
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1813
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1814
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1815
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1816
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1817
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1776
1818
|
}
|
|
1777
1819
|
.utrecht-checkbox--html-input:focus:not(:focus-visible) {
|
|
1778
1820
|
/* undo focus ring */
|
|
1779
1821
|
box-shadow: none;
|
|
1780
|
-
outline-style:
|
|
1822
|
+
outline-style: revert;
|
|
1781
1823
|
}
|
|
1782
1824
|
|
|
1783
1825
|
/**
|
|
@@ -1879,11 +1921,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
1879
1921
|
|
|
1880
1922
|
.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
|
|
1881
1923
|
.utrecht-custom-checkbox--focus-visible {
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1924
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1925
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1926
|
+
* can combine it with the focus ring box shadow.
|
|
1927
|
+
*/
|
|
1928
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1929
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1930
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1931
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1932
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1933
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1934
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1887
1935
|
}
|
|
1888
1936
|
|
|
1889
1937
|
.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
|
|
@@ -1916,11 +1964,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
1916
1964
|
}
|
|
1917
1965
|
.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
|
|
1918
1966
|
.utrecht-custom-checkbox--html-input:focus-visible {
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1967
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
1968
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
1969
|
+
* can combine it with the focus ring box shadow.
|
|
1970
|
+
*/
|
|
1971
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
1972
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
1973
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
1974
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
1975
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1976
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1977
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1924
1978
|
}
|
|
1925
1979
|
.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
|
|
1926
1980
|
.utrecht-custom-checkbox--html-input:invalid,
|
|
@@ -2018,11 +2072,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
2018
2072
|
|
|
2019
2073
|
.utrecht-radio-button--custom.utrecht-radio-button--focus-visible,
|
|
2020
2074
|
.utrecht-custom-radio-button--focus-visible {
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2075
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
2076
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
2077
|
+
* can combine it with the focus ring box shadow.
|
|
2078
|
+
*/
|
|
2079
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
2080
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
2081
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
2082
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
2083
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
2084
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
2085
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2026
2086
|
}
|
|
2027
2087
|
|
|
2028
2088
|
.utrecht-radio-button--custom.utrecht-radio-button--disabled,
|
|
@@ -2082,11 +2142,17 @@ ol.utrecht-breadcrumb__list {
|
|
|
2082
2142
|
}
|
|
2083
2143
|
.utrecht-radio-button--custom.utrecht-radio-button--html-input:focus-visible,
|
|
2084
2144
|
.utrecht-custom-radio-button--html-input:focus-visible {
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2145
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
2146
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
2147
|
+
* can combine it with the focus ring box shadow.
|
|
2148
|
+
*/
|
|
2149
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
2150
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
2151
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
2152
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
2153
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
2154
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
2155
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2090
2156
|
}
|
|
2091
2157
|
.utrecht-radio-button--custom.utrecht-radio-button--html-input:invalid, .utrecht-radio-button--custom.utrecht-radio-button--html-input[aria-invalid=true],
|
|
2092
2158
|
.utrecht-custom-radio-button--html-input:invalid,
|
|
@@ -3096,11 +3162,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3096
3162
|
}
|
|
3097
3163
|
|
|
3098
3164
|
.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
|
|
3165
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3166
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3167
|
+
* can combine it with the focus ring box shadow.
|
|
3168
|
+
*/
|
|
3169
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3170
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3171
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3172
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3173
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3174
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3175
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3104
3176
|
}
|
|
3105
3177
|
|
|
3106
3178
|
.utrecht-link-button--inline {
|
|
@@ -3166,11 +3238,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3166
3238
|
|
|
3167
3239
|
.utrecht-link-social:focus-visible,
|
|
3168
3240
|
.utrecht-link-social--focus-visible {
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3241
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3242
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3243
|
+
* can combine it with the focus ring box shadow.
|
|
3244
|
+
*/
|
|
3245
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3246
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3247
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3248
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3249
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3250
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3251
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3174
3252
|
}
|
|
3175
3253
|
|
|
3176
3254
|
.utrecht-link-social--distanced {
|
|
@@ -3334,11 +3412,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3334
3412
|
}
|
|
3335
3413
|
|
|
3336
3414
|
.utrecht-link--focus-visible {
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3415
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3416
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3417
|
+
* can combine it with the focus ring box shadow.
|
|
3418
|
+
*/
|
|
3419
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3420
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3421
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3422
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3423
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3424
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3425
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3342
3426
|
}
|
|
3343
3427
|
|
|
3344
3428
|
.utrecht-link:focus {
|
|
@@ -3348,17 +3432,23 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3348
3432
|
text-decoration-skip: none;
|
|
3349
3433
|
text-decoration-skip-ink: none;
|
|
3350
3434
|
text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
|
|
3351
|
-
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3435
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3436
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3437
|
+
* can combine it with the focus ring box shadow.
|
|
3438
|
+
*/
|
|
3439
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3440
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3441
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3442
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3443
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3444
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3445
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3356
3446
|
}
|
|
3357
3447
|
|
|
3358
3448
|
.utrecht-link:focus:not(:focus-visible) {
|
|
3359
3449
|
/* undo focus ring */
|
|
3360
3450
|
box-shadow: none;
|
|
3361
|
-
outline-style:
|
|
3451
|
+
outline-style: revert;
|
|
3362
3452
|
}
|
|
3363
3453
|
|
|
3364
3454
|
.utrecht-link--telephone {
|
|
@@ -3469,11 +3559,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3469
3559
|
}
|
|
3470
3560
|
|
|
3471
3561
|
.utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-mapcontrolbutton--disabled) {
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3562
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3563
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3564
|
+
* can combine it with the focus ring box shadow.
|
|
3565
|
+
*/
|
|
3566
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3567
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3568
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3569
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3570
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3571
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3572
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3477
3573
|
}
|
|
3478
3574
|
|
|
3479
3575
|
.utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-mapcontrolbutton--disabled) {
|
|
@@ -3485,7 +3581,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3485
3581
|
.utrecht-mapcontrolbutton:focus:not(:focus-visible) {
|
|
3486
3582
|
/* undo focus ring */
|
|
3487
3583
|
box-shadow: none;
|
|
3488
|
-
outline-style:
|
|
3584
|
+
outline-style: revert;
|
|
3489
3585
|
}
|
|
3490
3586
|
|
|
3491
3587
|
.utrecht-mapcontrolbutton--hover:not(:disabled),
|
|
@@ -3567,17 +3663,23 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3567
3663
|
}
|
|
3568
3664
|
|
|
3569
3665
|
.utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus {
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3666
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3667
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3668
|
+
* can combine it with the focus ring box shadow.
|
|
3669
|
+
*/
|
|
3670
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3671
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3672
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3673
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3674
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3675
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3676
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3575
3677
|
}
|
|
3576
3678
|
|
|
3577
3679
|
.utrecht-menulijst__link:focus:not(:focus-visible) {
|
|
3578
3680
|
/* undo focus ring */
|
|
3579
3681
|
box-shadow: none;
|
|
3580
|
-
outline-style:
|
|
3682
|
+
outline-style: revert;
|
|
3581
3683
|
}
|
|
3582
3684
|
|
|
3583
3685
|
/**
|
|
@@ -3661,11 +3763,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3661
3763
|
}
|
|
3662
3764
|
|
|
3663
3765
|
.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
|
|
3667
|
-
|
|
3668
|
-
|
|
3766
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3767
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3768
|
+
* can combine it with the focus ring box shadow.
|
|
3769
|
+
*/
|
|
3770
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3771
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3772
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3773
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3774
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3775
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3776
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3669
3777
|
}
|
|
3670
3778
|
|
|
3671
3779
|
/* Remove bottom padding form first item in list with children */
|
|
@@ -3762,7 +3870,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3762
3870
|
.utrecht-sidenav__link:focus:not(:focus-visible) {
|
|
3763
3871
|
/* undo focus ring */
|
|
3764
3872
|
box-shadow: none;
|
|
3765
|
-
outline-style:
|
|
3873
|
+
outline-style: revert;
|
|
3766
3874
|
}
|
|
3767
3875
|
|
|
3768
3876
|
/**
|
|
@@ -3832,17 +3940,23 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
3832
3940
|
}
|
|
3833
3941
|
|
|
3834
3942
|
.utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3943
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
3944
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
3945
|
+
* can combine it with the focus ring box shadow.
|
|
3946
|
+
*/
|
|
3947
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3948
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3949
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3950
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3951
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3952
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3953
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3840
3954
|
}
|
|
3841
3955
|
|
|
3842
3956
|
.utrecht-topnav__link:focus:not(:focus-visible) {
|
|
3843
3957
|
/* undo focus ring */
|
|
3844
3958
|
box-shadow: none;
|
|
3845
|
-
outline-style:
|
|
3959
|
+
outline-style: revert;
|
|
3846
3960
|
}
|
|
3847
3961
|
|
|
3848
3962
|
/**
|
|
@@ -4014,18 +4128,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4014
4128
|
*/
|
|
4015
4129
|
.utrecht-pagination__page-link:focus,
|
|
4016
4130
|
.utrecht-pagination__relative-link:focus {
|
|
4017
|
-
|
|
4018
|
-
|
|
4019
|
-
|
|
4020
|
-
|
|
4021
|
-
|
|
4131
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4132
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4133
|
+
* can combine it with the focus ring box shadow.
|
|
4134
|
+
*/
|
|
4135
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4136
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4137
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
4138
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
4139
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4140
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4141
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4022
4142
|
}
|
|
4023
4143
|
|
|
4024
4144
|
.utrecht-pagination__page-link:focus:not(:focus-visible),
|
|
4025
4145
|
.utrecht-pagination__relative-link:focus:not(:focus-visible) {
|
|
4026
4146
|
/* undo focus ring */
|
|
4027
4147
|
box-shadow: none;
|
|
4028
|
-
outline-style:
|
|
4148
|
+
outline-style: revert;
|
|
4029
4149
|
}
|
|
4030
4150
|
|
|
4031
4151
|
.utrecht-pagination {
|
|
@@ -4111,18 +4231,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4111
4231
|
|
|
4112
4232
|
.utrecht-pagination__page-link:focus,
|
|
4113
4233
|
.utrecht-pagination__relative-link:focus {
|
|
4114
|
-
|
|
4115
|
-
|
|
4116
|
-
|
|
4117
|
-
|
|
4118
|
-
|
|
4234
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4235
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4236
|
+
* can combine it with the focus ring box shadow.
|
|
4237
|
+
*/
|
|
4238
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4239
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4240
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
4241
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
4242
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4243
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4244
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4119
4245
|
}
|
|
4120
4246
|
|
|
4121
4247
|
.utrecht-pagination__page-link:focus:not(:focus-visible),
|
|
4122
4248
|
.utrecht-pagination__relative-link:focus:not(:focus-visible) {
|
|
4123
4249
|
/* undo focus ring */
|
|
4124
4250
|
box-shadow: none;
|
|
4125
|
-
outline-style:
|
|
4251
|
+
outline-style: revert;
|
|
4126
4252
|
}
|
|
4127
4253
|
|
|
4128
4254
|
/**
|
|
@@ -4217,27 +4343,39 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4217
4343
|
}
|
|
4218
4344
|
|
|
4219
4345
|
.utrecht-radio-button--focus-visible {
|
|
4220
|
-
|
|
4221
|
-
|
|
4222
|
-
|
|
4223
|
-
|
|
4224
|
-
|
|
4346
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4347
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4348
|
+
* can combine it with the focus ring box shadow.
|
|
4349
|
+
*/
|
|
4350
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4351
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4352
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
4353
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
4354
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4355
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4356
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4225
4357
|
}
|
|
4226
4358
|
|
|
4227
4359
|
.utrecht-radio-button--html-input:disabled {
|
|
4228
4360
|
cursor: var(--utrecht-action-disabled-cursor, revert);
|
|
4229
4361
|
}
|
|
4230
4362
|
.utrecht-radio-button--html-input:focus {
|
|
4231
|
-
|
|
4232
|
-
|
|
4233
|
-
|
|
4234
|
-
|
|
4235
|
-
|
|
4363
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4364
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4365
|
+
* can combine it with the focus ring box shadow.
|
|
4366
|
+
*/
|
|
4367
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4368
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4369
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
4370
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
4371
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4372
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4373
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4236
4374
|
}
|
|
4237
4375
|
.utrecht-radio-button--html-input:focus:not(:focus-visible) {
|
|
4238
4376
|
/* undo focus ring */
|
|
4239
4377
|
box-shadow: none;
|
|
4240
|
-
outline-style:
|
|
4378
|
+
outline-style: revert;
|
|
4241
4379
|
}
|
|
4242
4380
|
|
|
4243
4381
|
/**
|
|
@@ -4340,11 +4478,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4340
4478
|
}
|
|
4341
4479
|
|
|
4342
4480
|
.utrecht-select--focus-visible {
|
|
4343
|
-
|
|
4344
|
-
|
|
4345
|
-
|
|
4346
|
-
|
|
4347
|
-
|
|
4481
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4482
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4483
|
+
* can combine it with the focus ring box shadow.
|
|
4484
|
+
*/
|
|
4485
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4486
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4487
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
4488
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
4489
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4490
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4491
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4348
4492
|
}
|
|
4349
4493
|
|
|
4350
4494
|
.utrecht-select--invalid {
|
|
@@ -4367,16 +4511,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4367
4511
|
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))));
|
|
4368
4512
|
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))));
|
|
4369
4513
|
color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
|
|
4370
|
-
|
|
4371
|
-
|
|
4372
|
-
|
|
4373
|
-
|
|
4374
|
-
|
|
4514
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4515
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4516
|
+
* can combine it with the focus ring box shadow.
|
|
4517
|
+
*/
|
|
4518
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4519
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4520
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
4521
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
4522
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4523
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4524
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4375
4525
|
}
|
|
4376
4526
|
.utrecht-select--html-select:focus:not(:focus-visible) {
|
|
4377
4527
|
/* undo focus ring */
|
|
4378
4528
|
box-shadow: none;
|
|
4379
|
-
outline-style:
|
|
4529
|
+
outline-style: revert;
|
|
4380
4530
|
}
|
|
4381
4531
|
|
|
4382
4532
|
/**
|
|
@@ -4472,11 +4622,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4472
4622
|
.utrecht-skip-link--focus,
|
|
4473
4623
|
.utrecht-skip-link:focus,
|
|
4474
4624
|
.utrecht-skip-link:focus-visible {
|
|
4475
|
-
|
|
4476
|
-
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
|
|
4625
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4626
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4627
|
+
* can combine it with the focus ring box shadow.
|
|
4628
|
+
*/
|
|
4629
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4630
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4631
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
4632
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
4633
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4634
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4635
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4480
4636
|
text-decoration: var(--utrecht-skip-link-focus-text-decoration);
|
|
4481
4637
|
}
|
|
4482
4638
|
|
|
@@ -4708,11 +4864,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4708
4864
|
}
|
|
4709
4865
|
|
|
4710
4866
|
.utrecht-textarea--focus-visible {
|
|
4711
|
-
|
|
4712
|
-
|
|
4713
|
-
|
|
4714
|
-
|
|
4715
|
-
|
|
4867
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4868
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4869
|
+
* can combine it with the focus ring box shadow.
|
|
4870
|
+
*/
|
|
4871
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4872
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4873
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
4874
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
4875
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4876
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4877
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4716
4878
|
}
|
|
4717
4879
|
|
|
4718
4880
|
.utrecht-textarea--read-only {
|
|
@@ -4736,16 +4898,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4736
4898
|
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))));
|
|
4737
4899
|
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))));
|
|
4738
4900
|
color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
|
|
4742
|
-
|
|
4743
|
-
|
|
4901
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4902
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4903
|
+
* can combine it with the focus ring box shadow.
|
|
4904
|
+
*/
|
|
4905
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
4906
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
4907
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
4908
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
4909
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4910
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4911
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4744
4912
|
}
|
|
4745
4913
|
.utrecht-textarea--html-textarea:focus:not(:focus-visible) {
|
|
4746
4914
|
/* undo focus ring */
|
|
4747
4915
|
box-shadow: none;
|
|
4748
|
-
outline-style:
|
|
4916
|
+
outline-style: revert;
|
|
4749
4917
|
}
|
|
4750
4918
|
.utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
|
|
4751
4919
|
background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
|
|
@@ -4824,11 +4992,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4824
4992
|
}
|
|
4825
4993
|
|
|
4826
4994
|
.utrecht-textbox--focus-visible {
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4995
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
4996
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
4997
|
+
* can combine it with the focus ring box shadow.
|
|
4998
|
+
*/
|
|
4999
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
5000
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
5001
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
5002
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
5003
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
5004
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
5005
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4832
5006
|
}
|
|
4833
5007
|
|
|
4834
5008
|
.utrecht-textbox--read-only {
|
|
@@ -4866,16 +5040,22 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
4866
5040
|
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))));
|
|
4867
5041
|
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))));
|
|
4868
5042
|
color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
|
|
5043
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
5044
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
5045
|
+
* can combine it with the focus ring box shadow.
|
|
5046
|
+
*/
|
|
5047
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
5048
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
5049
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
5050
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
5051
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
5052
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
5053
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4874
5054
|
}
|
|
4875
5055
|
.utrecht-textbox--html-input:focus:not(:focus-visible) {
|
|
4876
5056
|
/* undo focus ring */
|
|
4877
5057
|
box-shadow: none;
|
|
4878
|
-
outline-style:
|
|
5058
|
+
outline-style: revert;
|
|
4879
5059
|
}
|
|
4880
5060
|
.utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
|
|
4881
5061
|
background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.0-alpha.
|
|
2
|
+
"version": "1.0.0-alpha.387",
|
|
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": "52b6da2809f48a456fccb69ce4a3b167ce3bfbb8"
|
|
30
30
|
}
|