@navikt/ds-css 5.12.5 → 5.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/accordion.css +11 -3
- package/button.css +58 -26
- package/chips.css +12 -4
- package/date.css +12 -4
- package/dist/component/accordion.css +11 -3
- package/dist/component/button.css +58 -26
- package/dist/component/chips.css +12 -4
- package/dist/component/date.css +12 -4
- package/dist/component/date.min.css +1 -1
- package/dist/component/expansioncard.css +6 -2
- package/dist/component/form.css +101 -42
- package/dist/component/form.min.css +1 -1
- package/dist/component/grid.min.css +1 -1
- package/dist/component/helptext.css +6 -2
- package/dist/component/helptext.min.css +1 -1
- package/dist/component/index.css +293 -113
- package/dist/component/index.min.css +3 -3
- package/dist/component/internalheader.min.css +1 -1
- package/dist/component/loader.min.css +1 -1
- package/dist/component/pagination.css +6 -2
- package/dist/component/primitives.css +11 -2
- package/dist/component/primitives.min.css +1 -1
- package/dist/component/table.css +3 -3
- package/dist/component/table.min.css +1 -1
- package/dist/component/tabs.min.css +1 -1
- package/dist/component/tag.css +18 -0
- package/dist/component/tag.min.css +1 -1
- package/dist/component/timeline.css +34 -16
- package/dist/component/timeline.min.css +1 -1
- package/dist/component/togglegroup.css +16 -6
- package/dist/component/typography.min.css +1 -1
- package/dist/components.css +294 -112
- package/dist/components.min.css +2 -2
- package/dist/global/baseline.min.css +1 -1
- package/dist/global/reset.min.css +1 -1
- package/dist/global/tokens.css +2 -1
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +293 -113
- package/dist/index.min.css +3 -3
- package/expansioncard.css +6 -2
- package/form/combobox.css +21 -7
- package/form/radio-checkbox.css +46 -19
- package/form/search.css +22 -12
- package/form/switch.css +6 -2
- package/form/text-field.css +6 -2
- package/help-text.css +6 -2
- package/package.json +2 -2
- package/pagination.css +6 -2
- package/primitives/page.css +11 -2
- package/table.css +3 -3
- package/tag.css +18 -0
- package/timeline.css +34 -16
- package/toggle-group.css +16 -6
package/dist/components.css
CHANGED
|
@@ -610,16 +610,24 @@
|
|
|
610
610
|
}
|
|
611
611
|
|
|
612
612
|
.navds-accordion__item:last-child > :where(.navds-accordion__header) {
|
|
613
|
-
box-shadow:
|
|
613
|
+
box-shadow:
|
|
614
|
+
var(--__ac-accordion-header-shadow),
|
|
615
|
+
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
614
616
|
}
|
|
615
617
|
|
|
616
618
|
.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
|
|
617
|
-
box-shadow:
|
|
619
|
+
box-shadow:
|
|
620
|
+
inset 2px 0 0 0 var(--a-transparent),
|
|
621
|
+
inset -2px 0 0 0 var(--a-transparent),
|
|
622
|
+
inset 0 2px 0 0 var(--a-transparent),
|
|
618
623
|
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
619
624
|
}
|
|
620
625
|
|
|
621
626
|
.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
|
|
622
|
-
box-shadow:
|
|
627
|
+
box-shadow:
|
|
628
|
+
inset 2px 0 0 0 var(--a-transparent),
|
|
629
|
+
inset -2px 0 0 0 var(--a-transparent),
|
|
630
|
+
inset 0 2px 0 0 var(--a-transparent),
|
|
623
631
|
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
624
632
|
}
|
|
625
633
|
|
|
@@ -952,15 +960,15 @@
|
|
|
952
960
|
}
|
|
953
961
|
|
|
954
962
|
.navds-button--primary:focus-visible {
|
|
955
|
-
box-shadow:
|
|
956
|
-
|
|
963
|
+
box-shadow:
|
|
964
|
+
inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
|
|
957
965
|
var(--a-shadow-focus);
|
|
958
966
|
}
|
|
959
967
|
|
|
960
968
|
@supports not selector(:focus-visible) {
|
|
961
969
|
.navds-button--primary:focus {
|
|
962
|
-
box-shadow:
|
|
963
|
-
|
|
970
|
+
box-shadow:
|
|
971
|
+
inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
|
|
964
972
|
var(--a-shadow-focus);
|
|
965
973
|
}
|
|
966
974
|
}
|
|
@@ -988,12 +996,16 @@
|
|
|
988
996
|
}
|
|
989
997
|
|
|
990
998
|
.navds-button--primary-neutral:focus-visible {
|
|
991
|
-
box-shadow:
|
|
999
|
+
box-shadow:
|
|
1000
|
+
inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
|
|
1001
|
+
var(--a-shadow-focus);
|
|
992
1002
|
}
|
|
993
1003
|
|
|
994
1004
|
@supports not selector(:focus-visible) {
|
|
995
1005
|
.navds-button--primary-neutral:focus {
|
|
996
|
-
box-shadow:
|
|
1006
|
+
box-shadow:
|
|
1007
|
+
inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
|
|
1008
|
+
var(--a-shadow-focus);
|
|
997
1009
|
}
|
|
998
1010
|
}
|
|
999
1011
|
|
|
@@ -1021,15 +1033,15 @@
|
|
|
1021
1033
|
}
|
|
1022
1034
|
|
|
1023
1035
|
.navds-button--secondary:focus-visible {
|
|
1024
|
-
box-shadow:
|
|
1025
|
-
|
|
1036
|
+
box-shadow:
|
|
1037
|
+
inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
|
|
1026
1038
|
var(--a-shadow-focus);
|
|
1027
1039
|
}
|
|
1028
1040
|
|
|
1029
1041
|
@supports not selector(:focus-visible) {
|
|
1030
1042
|
.navds-button--secondary:focus {
|
|
1031
|
-
box-shadow:
|
|
1032
|
-
|
|
1043
|
+
box-shadow:
|
|
1044
|
+
inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
|
|
1033
1045
|
var(--a-shadow-focus);
|
|
1034
1046
|
}
|
|
1035
1047
|
}
|
|
@@ -1041,14 +1053,16 @@
|
|
|
1041
1053
|
}
|
|
1042
1054
|
|
|
1043
1055
|
.navds-button--secondary:focus-visible:active {
|
|
1044
|
-
box-shadow:
|
|
1056
|
+
box-shadow:
|
|
1057
|
+
inset 0 0 0 1px
|
|
1045
1058
|
var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
|
|
1046
1059
|
var(--a-shadow-focus);
|
|
1047
1060
|
}
|
|
1048
1061
|
|
|
1049
1062
|
@supports not selector(:focus-visible) {
|
|
1050
1063
|
.navds-button--secondary:focus:active {
|
|
1051
|
-
box-shadow:
|
|
1064
|
+
box-shadow:
|
|
1065
|
+
inset 0 0 0 1px
|
|
1052
1066
|
var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
|
|
1053
1067
|
var(--a-shadow-focus);
|
|
1054
1068
|
}
|
|
@@ -1077,13 +1091,17 @@
|
|
|
1077
1091
|
|
|
1078
1092
|
.navds-button--secondary-neutral:focus-visible {
|
|
1079
1093
|
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
|
1080
|
-
box-shadow:
|
|
1094
|
+
box-shadow:
|
|
1095
|
+
inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
|
|
1096
|
+
var(--a-shadow-focus);
|
|
1081
1097
|
}
|
|
1082
1098
|
|
|
1083
1099
|
@supports not selector(:focus-visible) {
|
|
1084
1100
|
.navds-button--secondary-neutral:focus {
|
|
1085
1101
|
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
|
1086
|
-
box-shadow:
|
|
1102
|
+
box-shadow:
|
|
1103
|
+
inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
|
|
1104
|
+
var(--a-shadow-focus);
|
|
1087
1105
|
}
|
|
1088
1106
|
}
|
|
1089
1107
|
|
|
@@ -1094,13 +1112,15 @@
|
|
|
1094
1112
|
}
|
|
1095
1113
|
|
|
1096
1114
|
.navds-button--secondary-neutral:focus-visible:active {
|
|
1097
|
-
box-shadow:
|
|
1115
|
+
box-shadow:
|
|
1116
|
+
inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
|
1098
1117
|
var(--a-shadow-focus);
|
|
1099
1118
|
}
|
|
1100
1119
|
|
|
1101
1120
|
@supports not selector(:focus-visible) {
|
|
1102
1121
|
.navds-button--secondary-neutral:focus:active {
|
|
1103
|
-
box-shadow:
|
|
1122
|
+
box-shadow:
|
|
1123
|
+
inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
|
1104
1124
|
var(--a-shadow-focus);
|
|
1105
1125
|
}
|
|
1106
1126
|
}
|
|
@@ -1127,12 +1147,16 @@
|
|
|
1127
1147
|
}
|
|
1128
1148
|
|
|
1129
1149
|
.navds-button--tertiary:focus-visible {
|
|
1130
|
-
box-shadow:
|
|
1150
|
+
box-shadow:
|
|
1151
|
+
inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
|
|
1152
|
+
var(--a-shadow-focus);
|
|
1131
1153
|
}
|
|
1132
1154
|
|
|
1133
1155
|
@supports not selector(:focus-visible) {
|
|
1134
1156
|
.navds-button--tertiary:focus {
|
|
1135
|
-
box-shadow:
|
|
1157
|
+
box-shadow:
|
|
1158
|
+
inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
|
|
1159
|
+
var(--a-shadow-focus);
|
|
1136
1160
|
}
|
|
1137
1161
|
}
|
|
1138
1162
|
|
|
@@ -1146,12 +1170,16 @@
|
|
|
1146
1170
|
}
|
|
1147
1171
|
|
|
1148
1172
|
.navds-button--tertiary:focus-visible:active {
|
|
1149
|
-
box-shadow:
|
|
1173
|
+
box-shadow:
|
|
1174
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1175
|
+
var(--a-shadow-focus);
|
|
1150
1176
|
}
|
|
1151
1177
|
|
|
1152
1178
|
@supports not selector(:focus-visible) {
|
|
1153
1179
|
.navds-button--tertiary:focus:active {
|
|
1154
|
-
box-shadow:
|
|
1180
|
+
box-shadow:
|
|
1181
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1182
|
+
var(--a-shadow-focus);
|
|
1155
1183
|
}
|
|
1156
1184
|
}
|
|
1157
1185
|
|
|
@@ -1178,12 +1206,16 @@
|
|
|
1178
1206
|
}
|
|
1179
1207
|
|
|
1180
1208
|
.navds-button--tertiary-neutral:focus-visible {
|
|
1181
|
-
box-shadow:
|
|
1209
|
+
box-shadow:
|
|
1210
|
+
inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
|
|
1211
|
+
var(--a-shadow-focus);
|
|
1182
1212
|
}
|
|
1183
1213
|
|
|
1184
1214
|
@supports not selector(:focus-visible) {
|
|
1185
1215
|
.navds-button--tertiary-neutral:focus {
|
|
1186
|
-
box-shadow:
|
|
1216
|
+
box-shadow:
|
|
1217
|
+
inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
|
|
1218
|
+
var(--a-shadow-focus);
|
|
1187
1219
|
}
|
|
1188
1220
|
}
|
|
1189
1221
|
|
|
@@ -1197,12 +1229,16 @@
|
|
|
1197
1229
|
}
|
|
1198
1230
|
|
|
1199
1231
|
.navds-button--tertiary-neutral:focus-visible:active {
|
|
1200
|
-
box-shadow:
|
|
1232
|
+
box-shadow:
|
|
1233
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1234
|
+
var(--a-shadow-focus);
|
|
1201
1235
|
}
|
|
1202
1236
|
|
|
1203
1237
|
@supports not selector(:focus-visible) {
|
|
1204
1238
|
.navds-button--tertiary-neutral:focus:active {
|
|
1205
|
-
box-shadow:
|
|
1239
|
+
box-shadow:
|
|
1240
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1241
|
+
var(--a-shadow-focus);
|
|
1206
1242
|
}
|
|
1207
1243
|
}
|
|
1208
1244
|
|
|
@@ -1233,12 +1269,16 @@
|
|
|
1233
1269
|
}
|
|
1234
1270
|
|
|
1235
1271
|
.navds-button--danger:focus-visible {
|
|
1236
|
-
box-shadow:
|
|
1272
|
+
box-shadow:
|
|
1273
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1274
|
+
var(--a-shadow-focus);
|
|
1237
1275
|
}
|
|
1238
1276
|
|
|
1239
1277
|
@supports not selector(:focus-visible) {
|
|
1240
1278
|
.navds-button--danger:focus {
|
|
1241
|
-
box-shadow:
|
|
1279
|
+
box-shadow:
|
|
1280
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1281
|
+
var(--a-shadow-focus);
|
|
1242
1282
|
}
|
|
1243
1283
|
}
|
|
1244
1284
|
|
|
@@ -1479,7 +1519,9 @@
|
|
|
1479
1519
|
|
|
1480
1520
|
.navds-chips__toggle[aria-pressed="true"]:focus-visible,
|
|
1481
1521
|
.navds-chips__toggle:active:focus-visible {
|
|
1482
|
-
box-shadow:
|
|
1522
|
+
box-shadow:
|
|
1523
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1524
|
+
0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
|
1483
1525
|
}
|
|
1484
1526
|
|
|
1485
1527
|
@supports not selector(:focus-visible) {
|
|
@@ -1490,7 +1532,9 @@
|
|
|
1490
1532
|
|
|
1491
1533
|
.navds-chips__toggle[aria-pressed="true"]:focus,
|
|
1492
1534
|
.navds-chips__toggle:active:focus {
|
|
1493
|
-
box-shadow:
|
|
1535
|
+
box-shadow:
|
|
1536
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1537
|
+
0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
|
1494
1538
|
}
|
|
1495
1539
|
}
|
|
1496
1540
|
|
|
@@ -1541,7 +1585,9 @@
|
|
|
1541
1585
|
}
|
|
1542
1586
|
|
|
1543
1587
|
.navds-chips__removable--action:focus-visible {
|
|
1544
|
-
box-shadow:
|
|
1588
|
+
box-shadow:
|
|
1589
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1590
|
+
0 0 0 2px var(--a-border-focus);
|
|
1545
1591
|
}
|
|
1546
1592
|
|
|
1547
1593
|
.navds-chips__removable--neutral:focus-visible {
|
|
@@ -1551,7 +1597,9 @@
|
|
|
1551
1597
|
@supports not selector(:focus-visible) {
|
|
1552
1598
|
.navds-chips__removable--action:focus {
|
|
1553
1599
|
outline: none;
|
|
1554
|
-
box-shadow:
|
|
1600
|
+
box-shadow:
|
|
1601
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
1602
|
+
0 0 0 2px var(--a-border-focus);
|
|
1555
1603
|
}
|
|
1556
1604
|
|
|
1557
1605
|
.navds-chips__removable--neutral:focus {
|
|
@@ -1913,7 +1961,9 @@
|
|
|
1913
1961
|
|
|
1914
1962
|
.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
|
|
1915
1963
|
background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
|
|
1916
|
-
box-shadow:
|
|
1964
|
+
box-shadow:
|
|
1965
|
+
1px 0 0 0 var(--__ac-expansioncard-border-color),
|
|
1966
|
+
-1px 0 0 0 var(--__ac-expansioncard-border-color),
|
|
1917
1967
|
0 -1px 0 0 var(--__ac-expansioncard-border-color);
|
|
1918
1968
|
}
|
|
1919
1969
|
|
|
@@ -2045,7 +2095,9 @@
|
|
|
2045
2095
|
}
|
|
2046
2096
|
|
|
2047
2097
|
:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
|
|
2048
|
-
box-shadow:
|
|
2098
|
+
box-shadow:
|
|
2099
|
+
1px 0 0 0 var(--__ac-expansioncard-border-color),
|
|
2100
|
+
-1px 0 0 0 var(--__ac-expansioncard-border-color),
|
|
2049
2101
|
0 1px 0 0 var(--__ac-expansioncard-border-color);
|
|
2050
2102
|
}
|
|
2051
2103
|
|
|
@@ -2400,26 +2452,34 @@
|
|
|
2400
2452
|
|
|
2401
2453
|
.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
|
|
2402
2454
|
.navds-radio__input:focus-visible + .navds-radio__label::before {
|
|
2403
|
-
box-shadow:
|
|
2404
|
-
0 0 0 2px var(--ac-radio-checkbox-
|
|
2455
|
+
box-shadow:
|
|
2456
|
+
0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
|
|
2457
|
+
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
2458
|
+
0 0 0 4px var(--a-border-focus);
|
|
2405
2459
|
}
|
|
2406
2460
|
|
|
2407
2461
|
@supports not selector(:focus-visible) {
|
|
2408
2462
|
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
|
2409
2463
|
.navds-radio__input:focus + .navds-radio__label::before {
|
|
2410
|
-
box-shadow:
|
|
2464
|
+
box-shadow:
|
|
2465
|
+
0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
|
|
2466
|
+
0 0 0 4px var(--a-border-focus);
|
|
2411
2467
|
}
|
|
2412
2468
|
}
|
|
2413
2469
|
|
|
2414
2470
|
.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
|
|
2415
2471
|
.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
|
|
2416
|
-
box-shadow:
|
|
2472
|
+
box-shadow:
|
|
2473
|
+
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
2474
|
+
0 0 0 4px var(--a-border-focus);
|
|
2417
2475
|
}
|
|
2418
2476
|
|
|
2419
2477
|
@supports not selector(:focus-visible) {
|
|
2420
2478
|
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
|
2421
2479
|
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
|
2422
|
-
box-shadow:
|
|
2480
|
+
box-shadow:
|
|
2481
|
+
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
2482
|
+
0 0 0 4px var(--a-border-focus);
|
|
2423
2483
|
}
|
|
2424
2484
|
}
|
|
2425
2485
|
|
|
@@ -2478,33 +2538,42 @@
|
|
|
2478
2538
|
|
|
2479
2539
|
.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
|
|
2480
2540
|
.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
|
|
2481
|
-
box-shadow:
|
|
2482
|
-
0 0 0
|
|
2541
|
+
box-shadow:
|
|
2542
|
+
0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
2543
|
+
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
2544
|
+
0 0 0 4px var(--a-border-focus);
|
|
2483
2545
|
}
|
|
2484
2546
|
|
|
2485
2547
|
@supports not selector(:focus-visible) {
|
|
2486
2548
|
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
|
2487
2549
|
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
|
2488
|
-
box-shadow:
|
|
2489
|
-
0 0 0
|
|
2550
|
+
box-shadow:
|
|
2551
|
+
0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
2552
|
+
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
2553
|
+
0 0 0 4px var(--a-border-focus);
|
|
2490
2554
|
}
|
|
2491
2555
|
}
|
|
2492
2556
|
|
|
2493
2557
|
.navds-radio__input:checked + .navds-radio__label::before {
|
|
2494
|
-
box-shadow:
|
|
2558
|
+
box-shadow:
|
|
2559
|
+
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
2495
2560
|
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
|
|
2496
2561
|
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
|
2497
2562
|
}
|
|
2498
2563
|
|
|
2499
2564
|
.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
|
|
2500
|
-
box-shadow:
|
|
2501
|
-
|
|
2565
|
+
box-shadow:
|
|
2566
|
+
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
2567
|
+
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
2568
|
+
0 0 0 4px var(--a-border-focus);
|
|
2502
2569
|
}
|
|
2503
2570
|
|
|
2504
2571
|
@supports not selector(:focus-visible) {
|
|
2505
2572
|
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
|
2506
|
-
box-shadow:
|
|
2507
|
-
|
|
2573
|
+
box-shadow:
|
|
2574
|
+
0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
|
2575
|
+
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
|
|
2576
|
+
0 0 0 4px var(--a-border-focus);
|
|
2508
2577
|
}
|
|
2509
2578
|
}
|
|
2510
2579
|
|
|
@@ -2542,7 +2611,9 @@
|
|
|
2542
2611
|
> .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
|
2543
2612
|
+ .navds-checkbox__label::before,
|
|
2544
2613
|
.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
2545
|
-
box-shadow:
|
|
2614
|
+
box-shadow:
|
|
2615
|
+
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
2616
|
+
0 0 0 4px var(--a-border-focus);
|
|
2546
2617
|
}
|
|
2547
2618
|
|
|
2548
2619
|
@supports not selector(:focus-visible) {
|
|
@@ -2550,7 +2621,9 @@
|
|
|
2550
2621
|
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
|
2551
2622
|
+ .navds-checkbox__label::before,
|
|
2552
2623
|
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
2553
|
-
box-shadow:
|
|
2624
|
+
box-shadow:
|
|
2625
|
+
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
2626
|
+
0 0 0 4px var(--a-border-focus);
|
|
2554
2627
|
}
|
|
2555
2628
|
}
|
|
2556
2629
|
|
|
@@ -2567,7 +2640,9 @@
|
|
|
2567
2640
|
+ .navds-checkbox__label::before,
|
|
2568
2641
|
.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
2569
2642
|
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
|
2570
|
-
box-shadow:
|
|
2643
|
+
box-shadow:
|
|
2644
|
+
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
2645
|
+
0 0 0 4px var(--a-border-focus);
|
|
2571
2646
|
}
|
|
2572
2647
|
|
|
2573
2648
|
@supports not selector(:focus-visible) {
|
|
@@ -2584,7 +2659,9 @@
|
|
|
2584
2659
|
+ .navds-checkbox__label::before,
|
|
2585
2660
|
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
|
2586
2661
|
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
|
2587
|
-
box-shadow:
|
|
2662
|
+
box-shadow:
|
|
2663
|
+
0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
|
|
2664
|
+
0 0 0 4px var(--a-border-focus);
|
|
2588
2665
|
}
|
|
2589
2666
|
}
|
|
2590
2667
|
|
|
@@ -2644,7 +2721,9 @@
|
|
|
2644
2721
|
|
|
2645
2722
|
.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
|
|
2646
2723
|
background-color: var(--a-icon-subtle);
|
|
2647
|
-
box-shadow:
|
|
2724
|
+
box-shadow:
|
|
2725
|
+
0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
|
|
2726
|
+
inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
|
|
2648
2727
|
}
|
|
2649
2728
|
|
|
2650
2729
|
.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
|
|
@@ -2865,12 +2944,16 @@
|
|
|
2865
2944
|
}
|
|
2866
2945
|
|
|
2867
2946
|
.navds-switch__input:focus-visible ~ .navds-switch__track {
|
|
2868
|
-
box-shadow:
|
|
2947
|
+
box-shadow:
|
|
2948
|
+
0 0 0 1px var(--a-surface-default),
|
|
2949
|
+
var(--a-shadow-focus);
|
|
2869
2950
|
}
|
|
2870
2951
|
|
|
2871
2952
|
@supports not selector(:focus-visible) {
|
|
2872
2953
|
.navds-switch__input:focus ~ .navds-switch__track {
|
|
2873
|
-
box-shadow:
|
|
2954
|
+
box-shadow:
|
|
2955
|
+
0 0 0 1px var(--a-surface-default),
|
|
2956
|
+
var(--a-shadow-focus);
|
|
2874
2957
|
}
|
|
2875
2958
|
}
|
|
2876
2959
|
|
|
@@ -3022,12 +3105,16 @@
|
|
|
3022
3105
|
}
|
|
3023
3106
|
|
|
3024
3107
|
.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
|
|
3025
|
-
box-shadow:
|
|
3108
|
+
box-shadow:
|
|
3109
|
+
0 0 0 1px var(--a-border-danger),
|
|
3110
|
+
var(--a-shadow-focus);
|
|
3026
3111
|
}
|
|
3027
3112
|
|
|
3028
3113
|
@supports not selector(:focus-visible) {
|
|
3029
3114
|
.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
|
|
3030
|
-
box-shadow:
|
|
3115
|
+
box-shadow:
|
|
3116
|
+
0 0 0 1px var(--a-border-danger),
|
|
3117
|
+
var(--a-shadow-focus);
|
|
3031
3118
|
}
|
|
3032
3119
|
}
|
|
3033
3120
|
|
|
@@ -3294,14 +3381,15 @@
|
|
|
3294
3381
|
}
|
|
3295
3382
|
|
|
3296
3383
|
.navds-search__button-search.navds-button--secondary {
|
|
3297
|
-
box-shadow:
|
|
3384
|
+
box-shadow:
|
|
3385
|
+
-1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
|
|
3298
3386
|
0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
|
|
3299
3387
|
0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
|
|
3300
3388
|
}
|
|
3301
3389
|
|
|
3302
3390
|
.navds-search__button-search.navds-button--secondary:hover {
|
|
3303
|
-
box-shadow:
|
|
3304
|
-
|
|
3391
|
+
box-shadow:
|
|
3392
|
+
-1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
|
3305
3393
|
0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
|
3306
3394
|
0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
|
3307
3395
|
-1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
|
|
@@ -3313,33 +3401,40 @@
|
|
|
3313
3401
|
}
|
|
3314
3402
|
|
|
3315
3403
|
.navds-search__button-search.navds-button--secondary:focus-visible {
|
|
3316
|
-
box-shadow:
|
|
3404
|
+
box-shadow:
|
|
3405
|
+
0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
|
|
3317
3406
|
var(--a-shadow-focus);
|
|
3318
3407
|
}
|
|
3319
3408
|
|
|
3320
3409
|
.navds-search__button-search.navds-button--secondary:focus-visible:hover {
|
|
3321
|
-
box-shadow:
|
|
3410
|
+
box-shadow:
|
|
3411
|
+
0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
|
3322
3412
|
var(--a-shadow-focus);
|
|
3323
3413
|
}
|
|
3324
3414
|
|
|
3325
3415
|
.navds-search__button-search.navds-button--secondary:focus-visible:active {
|
|
3326
|
-
box-shadow:
|
|
3416
|
+
box-shadow:
|
|
3417
|
+
0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
|
|
3418
|
+
var(--a-shadow-focus);
|
|
3327
3419
|
}
|
|
3328
3420
|
|
|
3329
3421
|
@supports not selector(:focus-visible) {
|
|
3330
3422
|
.navds-search__button-search.navds-button--secondary:focus {
|
|
3331
|
-
box-shadow:
|
|
3423
|
+
box-shadow:
|
|
3424
|
+
0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
|
|
3332
3425
|
var(--a-shadow-focus);
|
|
3333
3426
|
}
|
|
3334
3427
|
|
|
3335
3428
|
.navds-search__button-search.navds-button--secondary:focus:hover {
|
|
3336
|
-
box-shadow:
|
|
3337
|
-
|
|
3429
|
+
box-shadow:
|
|
3430
|
+
0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
|
3338
3431
|
var(--a-shadow-focus);
|
|
3339
3432
|
}
|
|
3340
3433
|
|
|
3341
3434
|
.navds-search__button-search.navds-button--secondary:focus:active {
|
|
3342
|
-
box-shadow:
|
|
3435
|
+
box-shadow:
|
|
3436
|
+
0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
|
|
3437
|
+
var(--a-shadow-focus);
|
|
3343
3438
|
}
|
|
3344
3439
|
}
|
|
3345
3440
|
|
|
@@ -3351,7 +3446,8 @@
|
|
|
3351
3446
|
}
|
|
3352
3447
|
|
|
3353
3448
|
.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
|
|
3354
|
-
box-shadow:
|
|
3449
|
+
box-shadow:
|
|
3450
|
+
inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
|
|
3355
3451
|
var(--a-shadow-focus);
|
|
3356
3452
|
}
|
|
3357
3453
|
|
|
@@ -3365,7 +3461,8 @@
|
|
|
3365
3461
|
|
|
3366
3462
|
@supports not selector(:focus-visible) {
|
|
3367
3463
|
.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
|
|
3368
|
-
box-shadow:
|
|
3464
|
+
box-shadow:
|
|
3465
|
+
inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
|
|
3369
3466
|
var(--a-shadow-focus);
|
|
3370
3467
|
}
|
|
3371
3468
|
|
|
@@ -3416,7 +3513,9 @@
|
|
|
3416
3513
|
|
|
3417
3514
|
.navds-combobox--error
|
|
3418
3515
|
.navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
|
|
3419
|
-
box-shadow:
|
|
3516
|
+
box-shadow:
|
|
3517
|
+
0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
|
|
3518
|
+
var(--a-shadow-focus);
|
|
3420
3519
|
}
|
|
3421
3520
|
|
|
3422
3521
|
.navds-combobox__selected-options {
|
|
@@ -3466,7 +3565,9 @@
|
|
|
3466
3565
|
}
|
|
3467
3566
|
|
|
3468
3567
|
.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
|
|
3469
|
-
box-shadow:
|
|
3568
|
+
box-shadow:
|
|
3569
|
+
0 0 0 1px var(--a-surface-default) inset,
|
|
3570
|
+
var(--a-shadow-focus);
|
|
3470
3571
|
box-shadow: var(--a-shadow-focus);
|
|
3471
3572
|
}
|
|
3472
3573
|
|
|
@@ -3482,7 +3583,9 @@
|
|
|
3482
3583
|
}
|
|
3483
3584
|
|
|
3484
3585
|
.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
|
|
3485
|
-
box-shadow:
|
|
3586
|
+
box-shadow:
|
|
3587
|
+
0 0 0 1px var(--a-surface-default) inset,
|
|
3588
|
+
var(--a-shadow-focus);
|
|
3486
3589
|
box-shadow: var(--a-shadow-focus);
|
|
3487
3590
|
}
|
|
3488
3591
|
|
|
@@ -3493,7 +3596,9 @@
|
|
|
3493
3596
|
|
|
3494
3597
|
@supports not selector(:has) {
|
|
3495
3598
|
.navds-combobox--focused .navds-combobox__wrapper-inner {
|
|
3496
|
-
box-shadow:
|
|
3599
|
+
box-shadow:
|
|
3600
|
+
0 0 0 1px var(--a-surface-default) inset,
|
|
3601
|
+
var(--a-shadow-focus);
|
|
3497
3602
|
box-shadow: var(--a-shadow-focus);
|
|
3498
3603
|
}
|
|
3499
3604
|
|
|
@@ -3548,14 +3653,18 @@
|
|
|
3548
3653
|
}
|
|
3549
3654
|
|
|
3550
3655
|
.navds-combobox__button-toggle-list:focus-visible {
|
|
3551
|
-
box-shadow:
|
|
3656
|
+
box-shadow:
|
|
3657
|
+
0 0 0 1px var(--a-surface-default) inset,
|
|
3658
|
+
var(--a-shadow-focus);
|
|
3552
3659
|
box-shadow: var(--a-shadow-focus);
|
|
3553
3660
|
outline: none;
|
|
3554
3661
|
}
|
|
3555
3662
|
|
|
3556
3663
|
@supports not selector(:focus-visible) {
|
|
3557
3664
|
.navds-combobox__button-toggle-list:focus {
|
|
3558
|
-
box-shadow:
|
|
3665
|
+
box-shadow:
|
|
3666
|
+
0 0 0 1px var(--a-surface-default) inset,
|
|
3667
|
+
var(--a-shadow-focus);
|
|
3559
3668
|
box-shadow: var(--a-shadow-focus);
|
|
3560
3669
|
outline: none;
|
|
3561
3670
|
}
|
|
@@ -3674,7 +3783,9 @@
|
|
|
3674
3783
|
}
|
|
3675
3784
|
|
|
3676
3785
|
.navds-combobox__list-item__new-option--focus {
|
|
3677
|
-
box-shadow:
|
|
3786
|
+
box-shadow:
|
|
3787
|
+
var(--a-shadow-focus) inset,
|
|
3788
|
+
var(--a-border-action) 0 0 0 5px inset;
|
|
3678
3789
|
border-radius: calc(var(--a-border-radius-medium) - 1px);
|
|
3679
3790
|
}
|
|
3680
3791
|
|
|
@@ -3712,13 +3823,17 @@
|
|
|
3712
3823
|
|
|
3713
3824
|
.navds-help-text__button:focus-visible {
|
|
3714
3825
|
outline: none;
|
|
3715
|
-
box-shadow:
|
|
3826
|
+
box-shadow:
|
|
3827
|
+
0 0 0 1px var(--a-border-focus),
|
|
3828
|
+
inset 0 0 0 1px var(--a-border-focus);
|
|
3716
3829
|
}
|
|
3717
3830
|
|
|
3718
3831
|
@supports not selector(:focus-visible) {
|
|
3719
3832
|
.navds-help-text__button:focus {
|
|
3720
3833
|
outline: none;
|
|
3721
|
-
box-shadow:
|
|
3834
|
+
box-shadow:
|
|
3835
|
+
0 0 0 1px var(--a-border-focus),
|
|
3836
|
+
inset 0 0 0 1px var(--a-border-focus);
|
|
3722
3837
|
}
|
|
3723
3838
|
}
|
|
3724
3839
|
|
|
@@ -4249,12 +4364,16 @@ button.navds-internalheader__title:active,
|
|
|
4249
4364
|
}
|
|
4250
4365
|
|
|
4251
4366
|
.navds-pagination__item[aria-current="true"]:focus-visible {
|
|
4252
|
-
box-shadow:
|
|
4367
|
+
box-shadow:
|
|
4368
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
4369
|
+
var(--a-shadow-focus);
|
|
4253
4370
|
}
|
|
4254
4371
|
|
|
4255
4372
|
@supports not selector(:focus-visible) {
|
|
4256
4373
|
.navds-pagination__item[aria-current="true"]:focus {
|
|
4257
|
-
box-shadow:
|
|
4374
|
+
box-shadow:
|
|
4375
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
4376
|
+
var(--a-shadow-focus);
|
|
4258
4377
|
}
|
|
4259
4378
|
}
|
|
4260
4379
|
|
|
@@ -4431,13 +4550,17 @@ button.navds-internalheader__title:active,
|
|
|
4431
4550
|
|
|
4432
4551
|
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
|
|
4433
4552
|
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
|
|
4434
|
-
box-shadow:
|
|
4553
|
+
box-shadow:
|
|
4554
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
4555
|
+
var(--a-shadow-focus);
|
|
4435
4556
|
}
|
|
4436
4557
|
|
|
4437
4558
|
@supports not selector(:focus-visible) {
|
|
4438
4559
|
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
|
|
4439
4560
|
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
|
|
4440
|
-
box-shadow:
|
|
4561
|
+
box-shadow:
|
|
4562
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
4563
|
+
var(--a-shadow-focus);
|
|
4441
4564
|
}
|
|
4442
4565
|
}
|
|
4443
4566
|
|
|
@@ -4547,12 +4670,16 @@ button.navds-internalheader__title:active,
|
|
|
4547
4670
|
}
|
|
4548
4671
|
|
|
4549
4672
|
.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
|
|
4550
|
-
box-shadow:
|
|
4673
|
+
box-shadow:
|
|
4674
|
+
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
4675
|
+
var(--a-shadow-focus);
|
|
4551
4676
|
}
|
|
4552
4677
|
|
|
4553
4678
|
@supports not selector(:focus-visible) {
|
|
4554
4679
|
.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
|
|
4555
|
-
box-shadow:
|
|
4680
|
+
box-shadow:
|
|
4681
|
+
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
4682
|
+
var(--a-shadow-focus);
|
|
4556
4683
|
}
|
|
4557
4684
|
}
|
|
4558
4685
|
|
|
@@ -4680,6 +4807,9 @@ button.navds-internalheader__title:active,
|
|
|
4680
4807
|
}
|
|
4681
4808
|
|
|
4682
4809
|
.navds-tag {
|
|
4810
|
+
--__ac-tag-icon-size: 1.5rem;
|
|
4811
|
+
--__ac-tag-icon-margin: -2px;
|
|
4812
|
+
|
|
4683
4813
|
border: 1px solid;
|
|
4684
4814
|
border-radius: var(--a-border-radius-small);
|
|
4685
4815
|
display: inline-flex;
|
|
@@ -4693,11 +4823,26 @@ button.navds-internalheader__title:active,
|
|
|
4693
4823
|
.navds-tag--small {
|
|
4694
4824
|
min-height: 1.5rem;
|
|
4695
4825
|
padding: 0 var(--a-spacing-1-alt);
|
|
4826
|
+
|
|
4827
|
+
--__ac-tag-icon-size: 1.25rem;
|
|
4696
4828
|
}
|
|
4697
4829
|
|
|
4698
4830
|
.navds-tag--xsmall {
|
|
4699
4831
|
min-height: 1.25rem;
|
|
4700
4832
|
padding: 0 var(--a-spacing-1);
|
|
4833
|
+
|
|
4834
|
+
--__ac-tag-icon-size: 1rem;
|
|
4835
|
+
--__ac-tag-icon-margin: -1px;
|
|
4836
|
+
}
|
|
4837
|
+
|
|
4838
|
+
.navds-tag:has(.navds-tag__icon--left) {
|
|
4839
|
+
gap: var(--a-spacing-05);
|
|
4840
|
+
}
|
|
4841
|
+
|
|
4842
|
+
.navds-tag__icon--left {
|
|
4843
|
+
font-size: var(--__ac-tag-icon-size);
|
|
4844
|
+
margin-inline-start: var(--__ac-tag-icon-margin);
|
|
4845
|
+
display: flex;
|
|
4701
4846
|
}
|
|
4702
4847
|
|
|
4703
4848
|
.navds-tag--error {
|
|
@@ -5024,8 +5169,10 @@ button.navds-internalheader__title:active,
|
|
|
5024
5169
|
border: none;
|
|
5025
5170
|
cursor: pointer;
|
|
5026
5171
|
background: var(--a-surface-default);
|
|
5027
|
-
box-shadow:
|
|
5028
|
-
0 0 0
|
|
5172
|
+
box-shadow:
|
|
5173
|
+
inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
|
5174
|
+
0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
|
5175
|
+
0 0 0 5px var(--a-surface-default);
|
|
5029
5176
|
z-index: 2;
|
|
5030
5177
|
border-radius: var(--a-border-radius-full);
|
|
5031
5178
|
padding: var(--a-spacing-1);
|
|
@@ -5044,34 +5191,44 @@ button.navds-internalheader__title:active,
|
|
|
5044
5191
|
}
|
|
5045
5192
|
|
|
5046
5193
|
.navds-timeline__pin-button:focus-visible {
|
|
5047
|
-
box-shadow:
|
|
5048
|
-
0 0 0
|
|
5194
|
+
box-shadow:
|
|
5195
|
+
inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
|
5196
|
+
0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
|
5197
|
+
0 0 0 4px var(--a-surface-default),
|
|
5049
5198
|
0 0 0 6px var(--a-border-focus);
|
|
5050
5199
|
outline: none;
|
|
5051
5200
|
}
|
|
5052
5201
|
|
|
5053
5202
|
.navds-timeline__pin-button:hover {
|
|
5054
|
-
box-shadow:
|
|
5055
|
-
0 0 0
|
|
5203
|
+
box-shadow:
|
|
5204
|
+
inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
|
5205
|
+
0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
|
5206
|
+
0 0 0 5px var(--a-surface-default);
|
|
5056
5207
|
}
|
|
5057
5208
|
|
|
5058
5209
|
.navds-timeline__pin-button:hover:focus-visible {
|
|
5059
|
-
box-shadow:
|
|
5060
|
-
0 0 0
|
|
5210
|
+
box-shadow:
|
|
5211
|
+
inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
|
5212
|
+
0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
|
5213
|
+
0 0 0 4px var(--a-surface-default),
|
|
5061
5214
|
0 0 0 6px var(--a-border-focus);
|
|
5062
5215
|
}
|
|
5063
5216
|
|
|
5064
5217
|
@supports not selector(:focus-visible) {
|
|
5065
5218
|
.navds-timeline__pin-button:focus {
|
|
5066
|
-
box-shadow:
|
|
5067
|
-
0 0 0
|
|
5219
|
+
box-shadow:
|
|
5220
|
+
inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
|
5221
|
+
0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
|
5222
|
+
0 0 0 4px var(--a-surface-default),
|
|
5068
5223
|
0 0 0 6px var(--a-border-focus);
|
|
5069
5224
|
outline: none;
|
|
5070
5225
|
}
|
|
5071
5226
|
|
|
5072
5227
|
.navds-timeline__pin-button:hover:focus {
|
|
5073
|
-
box-shadow:
|
|
5074
|
-
0 0 0
|
|
5228
|
+
box-shadow:
|
|
5229
|
+
inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
|
5230
|
+
0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
|
5231
|
+
0 0 0 4px var(--a-surface-default),
|
|
5075
5232
|
0 0 0 6px var(--a-border-focus);
|
|
5076
5233
|
}
|
|
5077
5234
|
}
|
|
@@ -5130,7 +5287,8 @@ button.navds-internalheader__title:active,
|
|
|
5130
5287
|
}
|
|
5131
5288
|
|
|
5132
5289
|
.navds-timeline__period--selected:focus-visible {
|
|
5133
|
-
box-shadow:
|
|
5290
|
+
box-shadow:
|
|
5291
|
+
inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
|
|
5134
5292
|
0 0 0 2px var(--a-border-focus);
|
|
5135
5293
|
z-index: 3;
|
|
5136
5294
|
}
|
|
@@ -5140,7 +5298,9 @@ button.navds-internalheader__title:active,
|
|
|
5140
5298
|
}
|
|
5141
5299
|
|
|
5142
5300
|
.navds-timeline__zoom-button:focus-visible {
|
|
5143
|
-
box-shadow:
|
|
5301
|
+
box-shadow:
|
|
5302
|
+
0 0 0 1px var(--a-surface-default),
|
|
5303
|
+
0 0 0 3px var(--a-border-focus);
|
|
5144
5304
|
border-width: 1px;
|
|
5145
5305
|
}
|
|
5146
5306
|
|
|
@@ -5157,13 +5317,16 @@ button.navds-internalheader__title:active,
|
|
|
5157
5317
|
}
|
|
5158
5318
|
|
|
5159
5319
|
.navds-timeline__period--selected:focus {
|
|
5160
|
-
box-shadow:
|
|
5320
|
+
box-shadow:
|
|
5321
|
+
inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
|
|
5161
5322
|
0 0 0 2px var(--a-border-focus);
|
|
5162
5323
|
z-index: 3;
|
|
5163
5324
|
}
|
|
5164
5325
|
|
|
5165
5326
|
.navds-timeline__zoom-button:focus {
|
|
5166
|
-
box-shadow:
|
|
5327
|
+
box-shadow:
|
|
5328
|
+
0 0 0 1px var(--a-surface-default),
|
|
5329
|
+
0 0 0 3px var(--a-border-focus);
|
|
5167
5330
|
border-width: 1px;
|
|
5168
5331
|
}
|
|
5169
5332
|
|
|
@@ -5344,34 +5507,44 @@ button.navds-internalheader__title:active,
|
|
|
5344
5507
|
|
|
5345
5508
|
.navds-toggle-group__button:focus-visible {
|
|
5346
5509
|
outline: none;
|
|
5347
|
-
box-shadow:
|
|
5510
|
+
box-shadow:
|
|
5511
|
+
0 0 0 1px var(--a-surface-default),
|
|
5512
|
+
0 0 0 4px var(--a-border-focus);
|
|
5348
5513
|
}
|
|
5349
5514
|
|
|
5350
5515
|
@supports not selector(:focus-visible) {
|
|
5351
5516
|
.navds-toggle-group__button:focus {
|
|
5352
5517
|
outline: none;
|
|
5353
|
-
box-shadow:
|
|
5518
|
+
box-shadow:
|
|
5519
|
+
0 0 0 1px var(--a-surface-default),
|
|
5520
|
+
0 0 0 4px var(--a-border-focus);
|
|
5354
5521
|
}
|
|
5355
5522
|
}
|
|
5356
5523
|
|
|
5357
5524
|
.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
|
|
5358
|
-
box-shadow:
|
|
5525
|
+
box-shadow:
|
|
5526
|
+
0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
|
|
5527
|
+
0 0 0 4px var(--a-border-focus);
|
|
5359
5528
|
}
|
|
5360
5529
|
|
|
5361
5530
|
@supports not selector(:focus-visible) {
|
|
5362
5531
|
.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
|
5363
|
-
box-shadow:
|
|
5532
|
+
box-shadow:
|
|
5533
|
+
0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
|
|
5534
|
+
0 0 0 4px var(--a-border-focus);
|
|
5364
5535
|
}
|
|
5365
5536
|
}
|
|
5366
5537
|
|
|
5367
5538
|
.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
|
5368
|
-
box-shadow:
|
|
5539
|
+
box-shadow:
|
|
5540
|
+
0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
|
|
5369
5541
|
0 0 0 4px var(--a-border-focus);
|
|
5370
5542
|
}
|
|
5371
5543
|
|
|
5372
5544
|
@supports not selector(:focus-visible) {
|
|
5373
5545
|
.navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
|
|
5374
|
-
box-shadow:
|
|
5546
|
+
box-shadow:
|
|
5547
|
+
0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
|
|
5375
5548
|
0 0 0 4px var(--a-border-focus);
|
|
5376
5549
|
}
|
|
5377
5550
|
}
|
|
@@ -5963,15 +6136,15 @@ button.navds-stepper__step {
|
|
|
5963
6136
|
padding: var(--a-spacing-1) var(--a-spacing-2);
|
|
5964
6137
|
}
|
|
5965
6138
|
|
|
5966
|
-
.navds-table .navds-checkbox .navds-checkbox__input {
|
|
6139
|
+
.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
|
|
5967
6140
|
top: -0.75rem;
|
|
5968
6141
|
}
|
|
5969
6142
|
|
|
5970
|
-
.navds-table .navds-checkbox--small .navds-checkbox__input {
|
|
6143
|
+
.navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
|
|
5971
6144
|
top: -0.375rem;
|
|
5972
6145
|
}
|
|
5973
6146
|
|
|
5974
|
-
.navds-table .navds-checkbox .navds-checkbox__label {
|
|
6147
|
+
.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label {
|
|
5975
6148
|
padding: 0;
|
|
5976
6149
|
}
|
|
5977
6150
|
|
|
@@ -6554,6 +6727,9 @@ button.navds-stepper__step {
|
|
|
6554
6727
|
/* Page.Block */
|
|
6555
6728
|
|
|
6556
6729
|
.navds-pageblock {
|
|
6730
|
+
/* stylelint-disable-next-line length-zero-no-unit */
|
|
6731
|
+
--__ac-page-padding-inline: 0px;
|
|
6732
|
+
|
|
6557
6733
|
margin-inline: auto;
|
|
6558
6734
|
width: 100%;
|
|
6559
6735
|
}
|
|
@@ -6571,6 +6747,10 @@ button.navds-stepper__step {
|
|
|
6571
6747
|
padding-block-end: var(--a-spacing-8);
|
|
6572
6748
|
}
|
|
6573
6749
|
|
|
6750
|
+
.navds-pageblock--text {
|
|
6751
|
+
max-width: calc(var(--a-text-width-max) + var(--__ac-page-padding-inline) + var(--__ac-page-padding-inline));
|
|
6752
|
+
}
|
|
6753
|
+
|
|
6574
6754
|
.navds-pageblock--md {
|
|
6575
6755
|
max-width: 768px;
|
|
6576
6756
|
}
|
|
@@ -6588,12 +6768,14 @@ button.navds-stepper__step {
|
|
|
6588
6768
|
}
|
|
6589
6769
|
|
|
6590
6770
|
.navds-pageblock--gutters {
|
|
6591
|
-
padding-inline: var(--a-spacing-4);
|
|
6771
|
+
--__ac-page-padding-inline: var(--a-spacing-4);
|
|
6772
|
+
|
|
6773
|
+
padding-inline: var(--__ac-page-padding-inline);
|
|
6592
6774
|
}
|
|
6593
6775
|
|
|
6594
6776
|
@media (min-width: 1024px) {
|
|
6595
6777
|
.navds-pageblock--gutters {
|
|
6596
|
-
padding-inline: var(--a-spacing-12);
|
|
6778
|
+
--__ac-page-padding-inline: var(--a-spacing-12);
|
|
6597
6779
|
}
|
|
6598
6780
|
}
|
|
6599
6781
|
|