@carbon/styles 1.111.0 → 1.112.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/README.md +89 -0
- package/css/styles.css +323 -213
- package/css/styles.min.css +1 -1
- package/package.json +9 -9
- package/scss/__tests__/__snapshots__/motion-test.js.snap +96 -1
- package/scss/components/__tests__/ai-label-test.js +58 -0
- package/scss/components/__tests__/code-snippet-test.js +46 -1
- package/scss/components/__tests__/content-switcher-test.js +46 -1
- package/scss/components/__tests__/notification-test.js +41 -1
- package/scss/components/code-snippet/_code-snippet.scss +42 -23
- package/scss/components/content-switcher/_content-switcher.scss +265 -189
- package/scss/components/copy-button/_copy-button.scss +5 -3
- package/scss/components/notification/_actionable-notification.scss +37 -18
- package/scss/components/notification/_inline-notification.scss +16 -6
- package/scss/components/progress-indicator/_progress-indicator.scss +28 -17
- package/scss/components/slug/_slug.scss +57 -47
package/css/styles.css
CHANGED
|
@@ -6298,26 +6298,25 @@ li.cds--accordion__item--disabled:last-of-type {
|
|
|
6298
6298
|
box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
|
|
6299
6299
|
}
|
|
6300
6300
|
|
|
6301
|
-
|
|
6302
|
-
.cds--
|
|
6303
|
-
|
|
6304
|
-
|
|
6305
|
-
|
|
6306
|
-
|
|
6307
|
-
.cds--ai-label .cds--ai-label__button:hover:active,
|
|
6308
|
-
.cds--slug .cds--slug__button:hover:active {
|
|
6309
|
-
|
|
6310
|
-
|
|
6311
|
-
|
|
6312
|
-
}
|
|
6313
|
-
|
|
6314
|
-
.cds--ai-label .cds--ai-label__button.cds--ai-label__button--
|
|
6315
|
-
.cds--
|
|
6316
|
-
.cds--slug .cds--slug__button.cds--slug__button--
|
|
6317
|
-
|
|
6318
|
-
|
|
6301
|
+
@media (any-hover: hover) {
|
|
6302
|
+
.cds--ai-label .cds--ai-label__button:hover,
|
|
6303
|
+
.cds--slug .cds--slug__button:hover {
|
|
6304
|
+
background: var(--cds-border-inverse, #161616);
|
|
6305
|
+
color: var(--cds-text-inverse, #ffffff);
|
|
6306
|
+
}
|
|
6307
|
+
.cds--ai-label .cds--ai-label__button:hover:active,
|
|
6308
|
+
.cds--slug .cds--slug__button:hover:active {
|
|
6309
|
+
background: var(--cds-border-inverse, #161616);
|
|
6310
|
+
box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus-inset, #ffffff);
|
|
6311
|
+
color: var(--cds-text-inverse, #ffffff);
|
|
6312
|
+
}
|
|
6313
|
+
.cds--ai-label .cds--ai-label__button.cds--ai-label__button--mini:hover:active,
|
|
6314
|
+
.cds--ai-label .cds--ai-label__button.cds--ai-label__button--2xs:hover:active,
|
|
6315
|
+
.cds--slug .cds--slug__button.cds--slug__button--mini:hover:active,
|
|
6316
|
+
.cds--slug .cds--slug__button.cds--slug__button--2xs:hover:active {
|
|
6317
|
+
box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
|
|
6318
|
+
}
|
|
6319
6319
|
}
|
|
6320
|
-
|
|
6321
6320
|
.cds--ai-label__text,
|
|
6322
6321
|
.cds--slug__text {
|
|
6323
6322
|
position: relative;
|
|
@@ -6347,26 +6346,25 @@ li.cds--accordion__item--disabled:last-of-type {
|
|
|
6347
6346
|
box-shadow: none;
|
|
6348
6347
|
}
|
|
6349
6348
|
|
|
6350
|
-
|
|
6351
|
-
.cds--ai-label .cds--ai-label__button--inline:hover
|
|
6352
|
-
.cds--
|
|
6353
|
-
.cds--slug .cds--slug__button--inline:hover
|
|
6354
|
-
|
|
6355
|
-
|
|
6356
|
-
|
|
6357
|
-
|
|
6358
|
-
|
|
6359
|
-
|
|
6360
|
-
.cds--ai-label .cds--ai-label__button--inline:focus:hover,
|
|
6361
|
-
.cds--slug .cds--slug__button--inline:focus:hover {
|
|
6362
|
-
|
|
6363
|
-
}
|
|
6364
|
-
|
|
6365
|
-
.cds--
|
|
6366
|
-
|
|
6367
|
-
|
|
6349
|
+
@media (any-hover: hover) {
|
|
6350
|
+
.cds--ai-label .cds--ai-label__button--inline:hover,
|
|
6351
|
+
.cds--ai-label .cds--ai-label__button--inline:hover:active,
|
|
6352
|
+
.cds--slug .cds--slug__button--inline:hover,
|
|
6353
|
+
.cds--slug .cds--slug__button--inline:hover:active {
|
|
6354
|
+
border-color: var(--cds-icon-secondary, #525252);
|
|
6355
|
+
background: transparent;
|
|
6356
|
+
box-shadow: none;
|
|
6357
|
+
color: var(--cds-text-secondary, #525252);
|
|
6358
|
+
}
|
|
6359
|
+
.cds--ai-label .cds--ai-label__button--inline:focus:hover,
|
|
6360
|
+
.cds--slug .cds--slug__button--inline:focus:hover {
|
|
6361
|
+
border-color: var(--cds-focus, #0f62fe);
|
|
6362
|
+
}
|
|
6363
|
+
.cds--ai-label .cds--ai-label__button--inline:hover .cds--ai-label__text::before,
|
|
6364
|
+
.cds--slug .cds--slug__button--inline:hover .cds--slug__text::before {
|
|
6365
|
+
background: var(--cds-icon-secondary, #525252);
|
|
6366
|
+
}
|
|
6368
6367
|
}
|
|
6369
|
-
|
|
6370
6368
|
.cds--ai-label__button--inline .cds--ai-label__text,
|
|
6371
6369
|
.cds--slug__button--inline .cds--slug__text {
|
|
6372
6370
|
padding-inline-start: 0.5rem;
|
|
@@ -6450,12 +6448,16 @@ li.cds--accordion__item--disabled:last-of-type {
|
|
|
6450
6448
|
}
|
|
6451
6449
|
|
|
6452
6450
|
.cds--ai-label .cds--ai-label__button--inline-with-content:focus,
|
|
6453
|
-
.cds--
|
|
6454
|
-
.cds--slug .cds--slug__button--inline-with-content:focus,
|
|
6455
|
-
.cds--slug .cds--slug__button--inline-with-content:hover:focus {
|
|
6451
|
+
.cds--slug .cds--slug__button--inline-with-content:focus {
|
|
6456
6452
|
box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
|
|
6457
6453
|
}
|
|
6458
6454
|
|
|
6455
|
+
@media (any-hover: hover) {
|
|
6456
|
+
.cds--ai-label .cds--ai-label__button--inline-with-content:hover:focus,
|
|
6457
|
+
.cds--slug .cds--slug__button--inline-with-content:hover:focus {
|
|
6458
|
+
box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
|
|
6459
|
+
}
|
|
6460
|
+
}
|
|
6459
6461
|
.cds--ai-label .cds--ai-label-content,
|
|
6460
6462
|
.cds--slug .cds--slug-content {
|
|
6461
6463
|
background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
|
|
@@ -8691,8 +8693,10 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
8691
8693
|
background-color: var(--cds-layer);
|
|
8692
8694
|
cursor: pointer;
|
|
8693
8695
|
}
|
|
8694
|
-
|
|
8695
|
-
|
|
8696
|
+
@media (any-hover: hover) {
|
|
8697
|
+
.cds--copy-btn:hover {
|
|
8698
|
+
background-color: var(--cds-layer-hover);
|
|
8699
|
+
}
|
|
8696
8700
|
}
|
|
8697
8701
|
.cds--copy-btn:active {
|
|
8698
8702
|
background-color: var(--cds-layer-active);
|
|
@@ -8809,14 +8813,20 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
8809
8813
|
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
|
8810
8814
|
}
|
|
8811
8815
|
|
|
8812
|
-
.cds--snippet--disabled .cds--
|
|
8813
|
-
.cds--snippet--disabled .cds--copy-btn,
|
|
8814
|
-
.cds--snippet--disabled .cds--copy-btn:hover {
|
|
8816
|
+
.cds--snippet--disabled .cds--copy-btn {
|
|
8815
8817
|
background-color: var(--cds-layer);
|
|
8816
8818
|
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
|
8817
8819
|
cursor: not-allowed;
|
|
8818
8820
|
}
|
|
8819
8821
|
|
|
8822
|
+
@media (any-hover: hover) {
|
|
8823
|
+
.cds--snippet--disabled .cds--snippet-btn--expand:hover,
|
|
8824
|
+
.cds--snippet--disabled .cds--copy-btn:hover {
|
|
8825
|
+
background-color: var(--cds-layer);
|
|
8826
|
+
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
|
8827
|
+
cursor: not-allowed;
|
|
8828
|
+
}
|
|
8829
|
+
}
|
|
8820
8830
|
.cds--snippet--disabled .cds--snippet__icon,
|
|
8821
8831
|
.cds--snippet--disabled .cds--snippet-btn--expand .cds--icon-chevron--down {
|
|
8822
8832
|
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
|
@@ -8856,8 +8866,10 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
8856
8866
|
color: var(--cds-text-primary, #161616);
|
|
8857
8867
|
cursor: pointer;
|
|
8858
8868
|
}
|
|
8859
|
-
|
|
8860
|
-
|
|
8869
|
+
@media (any-hover: hover) {
|
|
8870
|
+
.cds--snippet--inline:hover {
|
|
8871
|
+
background-color: var(--cds-layer-hover);
|
|
8872
|
+
}
|
|
8861
8873
|
}
|
|
8862
8874
|
.cds--snippet--inline:active {
|
|
8863
8875
|
background-color: var(--cds-layer-active);
|
|
@@ -8946,16 +8958,19 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
8946
8958
|
.cds--snippet--inline.cds--snippet--no-copy {
|
|
8947
8959
|
display: inline-block;
|
|
8948
8960
|
}
|
|
8949
|
-
|
|
8950
|
-
|
|
8951
|
-
|
|
8961
|
+
@media (any-hover: hover) {
|
|
8962
|
+
.cds--snippet--inline.cds--snippet--no-copy:hover {
|
|
8963
|
+
background-color: var(--cds-layer);
|
|
8964
|
+
cursor: auto;
|
|
8965
|
+
}
|
|
8952
8966
|
}
|
|
8953
8967
|
|
|
8954
|
-
|
|
8955
|
-
|
|
8956
|
-
|
|
8968
|
+
@media (any-hover: hover) {
|
|
8969
|
+
.cds--snippet--light.cds--snippet--inline.cds--snippet--no-copy:hover {
|
|
8970
|
+
background-color: var(--cds-layer-hover);
|
|
8971
|
+
cursor: auto;
|
|
8972
|
+
}
|
|
8957
8973
|
}
|
|
8958
|
-
|
|
8959
8974
|
.cds--snippet--single {
|
|
8960
8975
|
font-family: var(--cds-code-01-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
|
|
8961
8976
|
font-size: var(--cds-code-01-font-size, 0.75rem);
|
|
@@ -9143,10 +9158,11 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
9143
9158
|
padding-inline: 0;
|
|
9144
9159
|
}
|
|
9145
9160
|
|
|
9146
|
-
|
|
9147
|
-
|
|
9161
|
+
@media (any-hover: hover) {
|
|
9162
|
+
.cds--snippet--inline.cds--btn.cds--btn--primary:hover {
|
|
9163
|
+
color: var(--cds-text-primary, #161616);
|
|
9164
|
+
}
|
|
9148
9165
|
}
|
|
9149
|
-
|
|
9150
9166
|
.cds--snippet.cds--snippet--multi .cds--popover-container {
|
|
9151
9167
|
inset-block-start: 0.5rem;
|
|
9152
9168
|
inset-inline-end: 0.5rem;
|
|
@@ -9191,11 +9207,12 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
9191
9207
|
transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
|
9192
9208
|
}
|
|
9193
9209
|
|
|
9194
|
-
|
|
9195
|
-
|
|
9196
|
-
|
|
9210
|
+
@media (any-hover: hover) {
|
|
9211
|
+
.cds--snippet-btn--expand:hover {
|
|
9212
|
+
background: var(--cds-layer-hover);
|
|
9213
|
+
color: var(--cds-text-primary, #161616);
|
|
9214
|
+
}
|
|
9197
9215
|
}
|
|
9198
|
-
|
|
9199
9216
|
.cds--snippet-btn--expand:active {
|
|
9200
9217
|
background-color: var(--cds-layer-active);
|
|
9201
9218
|
}
|
|
@@ -9225,13 +9242,14 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
9225
9242
|
background-color: var(--cds-layer);
|
|
9226
9243
|
}
|
|
9227
9244
|
|
|
9228
|
-
|
|
9229
|
-
.cds--snippet--light
|
|
9230
|
-
.cds--snippet--light .cds--
|
|
9231
|
-
.cds--snippet--light .cds--
|
|
9232
|
-
|
|
9245
|
+
@media (any-hover: hover) {
|
|
9246
|
+
.cds--snippet--light.cds--snippet--inline:hover,
|
|
9247
|
+
.cds--snippet--light .cds--snippet-button:hover,
|
|
9248
|
+
.cds--snippet--light .cds--btn.cds--snippet-btn--expand:hover,
|
|
9249
|
+
.cds--snippet--light .cds--copy-btn:hover {
|
|
9250
|
+
background-color: var(--cds-layer-hover);
|
|
9251
|
+
}
|
|
9233
9252
|
}
|
|
9234
|
-
|
|
9235
9253
|
.cds--snippet--light.cds--snippet--inline:active,
|
|
9236
9254
|
.cds--snippet--light .cds--snippet-button:active,
|
|
9237
9255
|
.cds--snippet--light .cds--btn.cds--snippet-btn--expand:active,
|
|
@@ -12304,22 +12322,28 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12304
12322
|
border-radius: 0.25rem;
|
|
12305
12323
|
box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
|
|
12306
12324
|
}
|
|
12307
|
-
.cds--content-switcher-btn:
|
|
12308
|
-
color: var(--cds-text-primary, #161616);
|
|
12309
|
-
cursor: pointer;
|
|
12310
|
-
}
|
|
12311
|
-
.cds--content-switcher-btn:hover, .cds--content-switcher-btn:active {
|
|
12325
|
+
.cds--content-switcher-btn:active {
|
|
12312
12326
|
z-index: 3;
|
|
12313
12327
|
background-color: var(--cds-layer-hover);
|
|
12314
12328
|
color: var(--cds-text-primary, #161616);
|
|
12315
12329
|
}
|
|
12330
|
+
@media (any-hover: hover) {
|
|
12331
|
+
.cds--content-switcher-btn:hover {
|
|
12332
|
+
z-index: 3;
|
|
12333
|
+
background-color: var(--cds-layer-hover);
|
|
12334
|
+
color: var(--cds-text-primary, #161616);
|
|
12335
|
+
cursor: pointer;
|
|
12336
|
+
}
|
|
12337
|
+
}
|
|
12316
12338
|
.cds--content-switcher-btn:disabled {
|
|
12317
12339
|
border-color: var(--cds-border-disabled, #c6c6c6);
|
|
12318
12340
|
background-color: transparent;
|
|
12319
12341
|
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
|
12320
12342
|
}
|
|
12321
|
-
|
|
12322
|
-
|
|
12343
|
+
@media (any-hover: hover) {
|
|
12344
|
+
.cds--content-switcher-btn:disabled:hover {
|
|
12345
|
+
cursor: not-allowed;
|
|
12346
|
+
}
|
|
12323
12347
|
}
|
|
12324
12348
|
|
|
12325
12349
|
.cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
|
|
@@ -12334,12 +12358,14 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12334
12358
|
background-color: var(--cds-focus-inset, #ffffff);
|
|
12335
12359
|
transform: scaleY(1);
|
|
12336
12360
|
}
|
|
12337
|
-
|
|
12338
|
-
|
|
12339
|
-
|
|
12340
|
-
|
|
12341
|
-
|
|
12342
|
-
|
|
12361
|
+
@media (any-hover: hover) {
|
|
12362
|
+
.cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
|
|
12363
|
+
border-radius: 0;
|
|
12364
|
+
background-color: var(--cds-layer-hover);
|
|
12365
|
+
border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
|
12366
|
+
border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
|
12367
|
+
box-shadow: none;
|
|
12368
|
+
}
|
|
12343
12369
|
}
|
|
12344
12370
|
|
|
12345
12371
|
.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn {
|
|
@@ -12394,23 +12420,35 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12394
12420
|
|
|
12395
12421
|
.cds--content-switcher-btn:focus::before,
|
|
12396
12422
|
.cds--content-switcher-btn:focus + .cds--content-switcher-btn::before,
|
|
12397
|
-
.cds--content-switcher-btn:hover::before,
|
|
12398
|
-
.cds--content-switcher-btn:hover + .cds--content-switcher-btn::before,
|
|
12399
12423
|
.cds--content-switcher--selected::before,
|
|
12400
12424
|
.cds--content-switcher--selected + .cds--content-switcher-btn::before {
|
|
12401
12425
|
background-color: transparent;
|
|
12402
12426
|
}
|
|
12403
12427
|
|
|
12404
|
-
|
|
12405
|
-
.cds--content-switcher-btn:
|
|
12428
|
+
@media (any-hover: hover) {
|
|
12429
|
+
.cds--content-switcher-btn:hover::before,
|
|
12430
|
+
.cds--content-switcher-btn:hover + .cds--content-switcher-btn::before {
|
|
12431
|
+
background-color: transparent;
|
|
12432
|
+
}
|
|
12433
|
+
}
|
|
12434
|
+
.cds--content-switcher-btn:disabled::before {
|
|
12406
12435
|
background-color: var(--cds-border-disabled, #c6c6c6);
|
|
12407
12436
|
}
|
|
12408
12437
|
|
|
12409
|
-
|
|
12410
|
-
.cds--content-switcher-btn
|
|
12438
|
+
@media (any-hover: hover) {
|
|
12439
|
+
.cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn:disabled::before {
|
|
12440
|
+
background-color: var(--cds-border-disabled, #c6c6c6);
|
|
12441
|
+
}
|
|
12442
|
+
}
|
|
12443
|
+
.cds--content-switcher-btn.cds--content-switcher--selected:disabled + .cds--content-switcher-btn::before {
|
|
12411
12444
|
background-color: transparent;
|
|
12412
12445
|
}
|
|
12413
12446
|
|
|
12447
|
+
@media (any-hover: hover) {
|
|
12448
|
+
.cds--content-switcher-btn.cds--content-switcher--selected:disabled:hover + .cds--content-switcher-btn::before {
|
|
12449
|
+
background-color: transparent;
|
|
12450
|
+
}
|
|
12451
|
+
}
|
|
12414
12452
|
.cds--content-switcher__icon {
|
|
12415
12453
|
fill: var(--cds-icon-secondary, #525252);
|
|
12416
12454
|
}
|
|
@@ -12427,38 +12465,45 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12427
12465
|
white-space: nowrap;
|
|
12428
12466
|
}
|
|
12429
12467
|
|
|
12430
|
-
.cds--content-switcher-btn:hover .cds--content-switcher__icon,
|
|
12431
12468
|
.cds--content-switcher-btn:focus .cds--content-switcher__icon {
|
|
12432
12469
|
fill: var(--cds-icon-primary, #161616);
|
|
12433
12470
|
}
|
|
12434
12471
|
|
|
12435
|
-
|
|
12436
|
-
.cds--content-switcher-btn:
|
|
12437
|
-
|
|
12438
|
-
|
|
12439
|
-
z-index: 0;
|
|
12440
|
-
border-radius: 0;
|
|
12441
|
-
block-size: 100%;
|
|
12442
|
-
border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
|
12443
|
-
border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
|
12444
|
-
box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
|
|
12445
|
-
content: "";
|
|
12446
|
-
inline-size: 100%;
|
|
12472
|
+
@media (any-hover: hover) {
|
|
12473
|
+
.cds--content-switcher-btn:hover .cds--content-switcher__icon {
|
|
12474
|
+
fill: var(--cds-icon-primary, #161616);
|
|
12475
|
+
}
|
|
12447
12476
|
}
|
|
12448
|
-
|
|
12449
|
-
.cds--content-switcher-btn:
|
|
12450
|
-
.cds--content-switcher-btn:
|
|
12451
|
-
.cds--content-switcher-btn
|
|
12452
|
-
|
|
12453
|
-
|
|
12477
|
+
@media (any-hover: hover) {
|
|
12478
|
+
.cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
|
|
12479
|
+
.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
|
|
12480
|
+
.cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
|
|
12481
|
+
.cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
|
|
12482
|
+
z-index: 0;
|
|
12483
|
+
border-radius: 0;
|
|
12484
|
+
block-size: 100%;
|
|
12485
|
+
border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
|
12486
|
+
border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
|
12487
|
+
box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
|
|
12488
|
+
content: "";
|
|
12489
|
+
inline-size: 100%;
|
|
12490
|
+
}
|
|
12491
|
+
.cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover):not(.cds--content-switcher--selected)::after,
|
|
12492
|
+
.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
|
|
12493
|
+
.cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
|
|
12494
|
+
.cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover):not(.cds--content-switcher--selected)::after {
|
|
12495
|
+
background-color: var(--cds-focus-inset, #ffffff);
|
|
12496
|
+
transform: scaleY(1);
|
|
12497
|
+
}
|
|
12454
12498
|
}
|
|
12455
|
-
|
|
12456
12499
|
.cds--content-switcher-btn.cds--content-switcher--selected {
|
|
12457
12500
|
z-index: 3;
|
|
12458
12501
|
color: var(--cds-text-inverse, #ffffff);
|
|
12459
12502
|
}
|
|
12460
|
-
|
|
12461
|
-
|
|
12503
|
+
@media (any-hover: hover) {
|
|
12504
|
+
.cds--content-switcher-btn.cds--content-switcher--selected:hover {
|
|
12505
|
+
background-color: transparent;
|
|
12506
|
+
}
|
|
12462
12507
|
}
|
|
12463
12508
|
.cds--content-switcher-btn.cds--content-switcher--selected:disabled {
|
|
12464
12509
|
border-radius: 0.25rem;
|
|
@@ -12541,46 +12586,49 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12541
12586
|
|
|
12542
12587
|
.cds--content-switcher-btn:focus::before,
|
|
12543
12588
|
.cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
|
|
12544
|
-
.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):not(:focus)::before,
|
|
12545
12589
|
.cds--content-switcher--selected::before,
|
|
12546
12590
|
.cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
|
|
12547
12591
|
background-color: transparent;
|
|
12548
12592
|
}
|
|
12549
12593
|
|
|
12594
|
+
@media (any-hover: hover) {
|
|
12595
|
+
.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):not(:focus)::before {
|
|
12596
|
+
background-color: transparent;
|
|
12597
|
+
}
|
|
12598
|
+
}
|
|
12550
12599
|
.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
|
|
12551
12600
|
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
|
12552
12601
|
}
|
|
12553
12602
|
|
|
12554
|
-
|
|
12555
|
-
.cds--content-switcher--icon-only .cds--content-switcher-
|
|
12556
|
-
|
|
12557
|
-
|
|
12558
|
-
|
|
12559
|
-
.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:hover::before {
|
|
12560
|
-
|
|
12561
|
-
}
|
|
12562
|
-
|
|
12563
|
-
.cds--content-switcher-popover__wrapper:
|
|
12564
|
-
.cds--content-switcher-popover__wrapper:
|
|
12565
|
-
.cds--content-switcher-
|
|
12566
|
-
|
|
12567
|
-
|
|
12568
|
-
|
|
12569
|
-
|
|
12570
|
-
|
|
12571
|
-
|
|
12572
|
-
|
|
12573
|
-
|
|
12574
|
-
|
|
12575
|
-
|
|
12576
|
-
.cds--content-switcher-popover__wrapper:
|
|
12577
|
-
.cds--content-switcher-popover__wrapper:
|
|
12578
|
-
.cds--content-switcher-
|
|
12579
|
-
|
|
12580
|
-
|
|
12581
|
-
|
|
12603
|
+
@media (any-hover: hover) {
|
|
12604
|
+
.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:not(.cds--content-switcher--selected):hover,
|
|
12605
|
+
.cds--content-switcher--icon-only .cds--content-switcher-popover--selected + .cds--content-switcher-popover--disabled .cds--content-switcher-btn[disabled]:hover::before {
|
|
12606
|
+
background-color: transparent;
|
|
12607
|
+
}
|
|
12608
|
+
.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:hover::before {
|
|
12609
|
+
background-color: var(--cds-border-subtle);
|
|
12610
|
+
}
|
|
12611
|
+
.cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus::before,
|
|
12612
|
+
.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus::before,
|
|
12613
|
+
.cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
|
|
12614
|
+
.cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn::before {
|
|
12615
|
+
z-index: 0;
|
|
12616
|
+
border-radius: 0;
|
|
12617
|
+
block-size: 100%;
|
|
12618
|
+
border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
|
12619
|
+
border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
|
12620
|
+
box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
|
|
12621
|
+
content: "";
|
|
12622
|
+
inline-size: 100%;
|
|
12623
|
+
}
|
|
12624
|
+
.cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
|
|
12625
|
+
.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
|
|
12626
|
+
.cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
|
|
12627
|
+
.cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn:not(.cds--content-switcher--selected)::after {
|
|
12628
|
+
background-color: var(--cds-focus-inset, #ffffff);
|
|
12629
|
+
transform: scaleY(1);
|
|
12630
|
+
}
|
|
12582
12631
|
}
|
|
12583
|
-
|
|
12584
12632
|
.cds--content-switcher--low-contrast {
|
|
12585
12633
|
background-color: var(--cds-content-switcher-background, #e0e0e0);
|
|
12586
12634
|
outline-color: var(--cds-border-strong);
|
|
@@ -12589,9 +12637,14 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12589
12637
|
.cds--content-switcher--low-contrast .cds--content-switcher-btn {
|
|
12590
12638
|
border-color: var(--cds-border-strong);
|
|
12591
12639
|
}
|
|
12592
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn:
|
|
12640
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:active {
|
|
12593
12641
|
background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
|
|
12594
12642
|
}
|
|
12643
|
+
@media (any-hover: hover) {
|
|
12644
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover {
|
|
12645
|
+
background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
|
|
12646
|
+
}
|
|
12647
|
+
}
|
|
12595
12648
|
.cds--content-switcher--low-contrast .cds--content-switcher-btn::before {
|
|
12596
12649
|
background-color: var(--cds-border-strong);
|
|
12597
12650
|
}
|
|
@@ -12603,8 +12656,10 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12603
12656
|
background-color: transparent;
|
|
12604
12657
|
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
|
12605
12658
|
}
|
|
12606
|
-
|
|
12607
|
-
|
|
12659
|
+
@media (any-hover: hover) {
|
|
12660
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover {
|
|
12661
|
+
cursor: not-allowed;
|
|
12662
|
+
}
|
|
12608
12663
|
}
|
|
12609
12664
|
|
|
12610
12665
|
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
|
|
@@ -12614,10 +12669,12 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12614
12669
|
background-color: var(--cds-content-switcher-background, #e0e0e0);
|
|
12615
12670
|
box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
|
|
12616
12671
|
}
|
|
12617
|
-
|
|
12618
|
-
|
|
12619
|
-
|
|
12620
|
-
|
|
12672
|
+
@media (any-hover: hover) {
|
|
12673
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
|
|
12674
|
+
border-color: var(--cds-border-strong);
|
|
12675
|
+
background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
|
|
12676
|
+
box-shadow: none;
|
|
12677
|
+
}
|
|
12621
12678
|
}
|
|
12622
12679
|
|
|
12623
12680
|
.cds--content-switcher--low-contrast:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
|
|
@@ -12628,18 +12685,20 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12628
12685
|
box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-strong);
|
|
12629
12686
|
}
|
|
12630
12687
|
|
|
12631
|
-
|
|
12632
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn:
|
|
12633
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn
|
|
12634
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher
|
|
12635
|
-
|
|
12636
|
-
|
|
12637
|
-
|
|
12638
|
-
|
|
12639
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn:
|
|
12640
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn
|
|
12641
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher
|
|
12642
|
-
|
|
12688
|
+
@media (any-hover: hover) {
|
|
12689
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
|
|
12690
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
|
|
12691
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
|
|
12692
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
|
|
12693
|
+
border-color: var(--cds-border-strong);
|
|
12694
|
+
box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
|
|
12695
|
+
}
|
|
12696
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover):not(.cds--content-switcher--selected)::after,
|
|
12697
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
|
|
12698
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
|
|
12699
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover):not(.cds--content-switcher--selected)::after {
|
|
12700
|
+
background-color: var(--cds-content-switcher-background, #e0e0e0);
|
|
12701
|
+
}
|
|
12643
12702
|
}
|
|
12644
12703
|
|
|
12645
12704
|
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected {
|
|
@@ -12649,8 +12708,10 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12649
12708
|
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
|
12650
12709
|
color: var(--cds-text-primary, #161616);
|
|
12651
12710
|
}
|
|
12652
|
-
|
|
12653
|
-
|
|
12711
|
+
@media (any-hover: hover) {
|
|
12712
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:hover {
|
|
12713
|
+
background-color: transparent;
|
|
12714
|
+
}
|
|
12654
12715
|
}
|
|
12655
12716
|
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected::after {
|
|
12656
12717
|
border-radius: 0.25rem;
|
|
@@ -12672,24 +12733,36 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12672
12733
|
|
|
12673
12734
|
.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus::before,
|
|
12674
12735
|
.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus + .cds--content-switcher-btn::before,
|
|
12675
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover::before,
|
|
12676
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn::before,
|
|
12677
12736
|
.cds--content-switcher--low-contrast .cds--content-switcher--selected::before,
|
|
12678
12737
|
.cds--content-switcher--low-contrast .cds--content-switcher--selected + .cds--content-switcher-btn::before {
|
|
12679
12738
|
background-color: transparent;
|
|
12680
12739
|
}
|
|
12681
12740
|
|
|
12682
|
-
|
|
12683
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn:
|
|
12741
|
+
@media (any-hover: hover) {
|
|
12742
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover::before,
|
|
12743
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn::before {
|
|
12744
|
+
background-color: transparent;
|
|
12745
|
+
}
|
|
12746
|
+
}
|
|
12747
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled::before {
|
|
12684
12748
|
background-color: var(--cds-border-disabled, #c6c6c6);
|
|
12685
12749
|
}
|
|
12686
12750
|
|
|
12687
|
-
|
|
12688
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-btn
|
|
12689
|
-
|
|
12751
|
+
@media (any-hover: hover) {
|
|
12752
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn:disabled::before {
|
|
12753
|
+
background-color: var(--cds-border-disabled, #c6c6c6);
|
|
12754
|
+
}
|
|
12755
|
+
}
|
|
12756
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled + .cds--content-switcher-btn::before {
|
|
12690
12757
|
background-color: transparent;
|
|
12691
12758
|
}
|
|
12692
12759
|
|
|
12760
|
+
@media (any-hover: hover) {
|
|
12761
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled:hover + .cds--content-switcher-btn::before,
|
|
12762
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before {
|
|
12763
|
+
background-color: transparent;
|
|
12764
|
+
}
|
|
12765
|
+
}
|
|
12693
12766
|
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn:not([disabled]) {
|
|
12694
12767
|
box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-strong);
|
|
12695
12768
|
}
|
|
@@ -12702,10 +12775,11 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12702
12775
|
fill: var(--cds-icon-secondary, #525252);
|
|
12703
12776
|
}
|
|
12704
12777
|
|
|
12705
|
-
|
|
12706
|
-
|
|
12778
|
+
@media (any-hover: hover) {
|
|
12779
|
+
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn:hover svg {
|
|
12780
|
+
fill: var(--cds-icon-primary, #161616);
|
|
12781
|
+
}
|
|
12707
12782
|
}
|
|
12708
|
-
|
|
12709
12783
|
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
|
|
12710
12784
|
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
|
12711
12785
|
}
|
|
@@ -12724,24 +12798,30 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
12724
12798
|
|
|
12725
12799
|
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered):focus::before,
|
|
12726
12800
|
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
|
|
12727
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered)::before,
|
|
12728
12801
|
.cds--content-switcher--low-contrast .cds--content-switcher--selected:not(.cds--content-switcher__selected-hovered)::before,
|
|
12729
12802
|
.cds--content-switcher--low-contrast .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
|
|
12730
12803
|
background-color: transparent;
|
|
12731
12804
|
}
|
|
12732
12805
|
|
|
12733
|
-
|
|
12734
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--
|
|
12735
|
-
|
|
12736
|
-
|
|
12737
|
-
border-color: var(--cds-border-strong);
|
|
12738
|
-
box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
|
|
12806
|
+
@media (any-hover: hover) {
|
|
12807
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered)::before {
|
|
12808
|
+
background-color: transparent;
|
|
12809
|
+
}
|
|
12739
12810
|
}
|
|
12740
|
-
|
|
12741
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:
|
|
12742
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher
|
|
12743
|
-
.cds--content-switcher--low-contrast .cds--content-switcher-
|
|
12744
|
-
|
|
12811
|
+
@media (any-hover: hover) {
|
|
12812
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus::before,
|
|
12813
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus::before,
|
|
12814
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
|
|
12815
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn::before {
|
|
12816
|
+
border-color: var(--cds-border-strong);
|
|
12817
|
+
box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
|
|
12818
|
+
}
|
|
12819
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
|
|
12820
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
|
|
12821
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
|
|
12822
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn:not(.cds--content-switcher--selected)::after {
|
|
12823
|
+
background-color: var(--cds-content-switcher-background, #e0e0e0);
|
|
12824
|
+
}
|
|
12745
12825
|
}
|
|
12746
12826
|
|
|
12747
12827
|
.cds--radio-button-group {
|
|
@@ -22141,16 +22221,24 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22141
22221
|
color: var(--cds-link-inverse, #78a9ff);
|
|
22142
22222
|
}
|
|
22143
22223
|
|
|
22144
|
-
.cds--inline-notification__action-button.cds--btn--ghost:active
|
|
22145
|
-
.cds--inline-notification__action-button.cds--btn--ghost:hover {
|
|
22224
|
+
.cds--inline-notification__action-button.cds--btn--ghost:active {
|
|
22146
22225
|
background-color: var(--cds-background-inverse-hover, #474747);
|
|
22147
22226
|
}
|
|
22148
22227
|
|
|
22149
|
-
|
|
22150
|
-
.cds--inline-
|
|
22228
|
+
@media (any-hover: hover) {
|
|
22229
|
+
.cds--inline-notification__action-button.cds--btn--ghost:hover {
|
|
22230
|
+
background-color: var(--cds-background-inverse-hover, #474747);
|
|
22231
|
+
}
|
|
22232
|
+
}
|
|
22233
|
+
.cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:active {
|
|
22151
22234
|
background-color: var(--cds-notification-action-hover, #ffffff);
|
|
22152
22235
|
}
|
|
22153
22236
|
|
|
22237
|
+
@media (any-hover: hover) {
|
|
22238
|
+
.cds--inline-notification--low-contrast .cds--inline-notification__action-button.cds--btn--ghost:hover {
|
|
22239
|
+
background-color: var(--cds-notification-action-hover, #ffffff);
|
|
22240
|
+
}
|
|
22241
|
+
}
|
|
22154
22242
|
.cds--inline-notification__action-button.cds--btn--ghost:focus {
|
|
22155
22243
|
border-color: transparent;
|
|
22156
22244
|
box-shadow: none;
|
|
@@ -22797,16 +22885,24 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22797
22885
|
color: var(--cds-link-inverse, #78a9ff);
|
|
22798
22886
|
}
|
|
22799
22887
|
|
|
22800
|
-
.cds--actionable-notification__action-button.cds--btn--ghost:active
|
|
22801
|
-
.cds--actionable-notification__action-button.cds--btn--ghost:hover {
|
|
22888
|
+
.cds--actionable-notification__action-button.cds--btn--ghost:active {
|
|
22802
22889
|
background-color: var(--cds-background-inverse-hover, #474747);
|
|
22803
22890
|
}
|
|
22804
22891
|
|
|
22805
|
-
|
|
22806
|
-
.cds--actionable-
|
|
22892
|
+
@media (any-hover: hover) {
|
|
22893
|
+
.cds--actionable-notification__action-button.cds--btn--ghost:hover {
|
|
22894
|
+
background-color: var(--cds-background-inverse-hover, #474747);
|
|
22895
|
+
}
|
|
22896
|
+
}
|
|
22897
|
+
.cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:active {
|
|
22807
22898
|
background-color: var(--cds-notification-action-hover, #ffffff);
|
|
22808
22899
|
}
|
|
22809
22900
|
|
|
22901
|
+
@media (any-hover: hover) {
|
|
22902
|
+
.cds--actionable-notification--low-contrast .cds--actionable-notification__action-button.cds--btn--ghost:hover {
|
|
22903
|
+
background-color: var(--cds-notification-action-hover, #ffffff);
|
|
22904
|
+
}
|
|
22905
|
+
}
|
|
22810
22906
|
.cds--actionable-notification__action-button.cds--btn--ghost:focus {
|
|
22811
22907
|
border-color: transparent;
|
|
22812
22908
|
box-shadow: none;
|
|
@@ -22853,10 +22949,11 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22853
22949
|
fill: currentColor;
|
|
22854
22950
|
}
|
|
22855
22951
|
|
|
22856
|
-
|
|
22857
|
-
|
|
22952
|
+
@media (any-hover: hover) {
|
|
22953
|
+
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:hover {
|
|
22954
|
+
color: var(--cds-notification-action-tertiary-inverse-text, #161616);
|
|
22955
|
+
}
|
|
22858
22956
|
}
|
|
22859
|
-
|
|
22860
22957
|
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:focus {
|
|
22861
22958
|
border-color: var(--cds-focus-inverse, #ffffff);
|
|
22862
22959
|
background-color: var(--cds-notification-action-tertiary-inverse, #ffffff);
|
|
@@ -22871,16 +22968,22 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
22871
22968
|
}
|
|
22872
22969
|
|
|
22873
22970
|
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:disabled,
|
|
22874
|
-
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:hover:disabled,
|
|
22875
22971
|
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:focus:disabled,
|
|
22876
22972
|
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled,
|
|
22877
|
-
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled:hover,
|
|
22878
22973
|
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled:focus {
|
|
22879
22974
|
background: transparent;
|
|
22880
22975
|
color: var(--cds-notification-action-tertiary-inverse-text-on-color-disabled, rgba(255, 255, 255, 0.25));
|
|
22881
22976
|
outline: none;
|
|
22882
22977
|
}
|
|
22883
22978
|
|
|
22979
|
+
@media (any-hover: hover) {
|
|
22980
|
+
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary:hover:disabled,
|
|
22981
|
+
.cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary.cds--btn--disabled:hover {
|
|
22982
|
+
background: transparent;
|
|
22983
|
+
color: var(--cds-notification-action-tertiary-inverse-text-on-color-disabled, rgba(255, 255, 255, 0.25));
|
|
22984
|
+
outline: none;
|
|
22985
|
+
}
|
|
22986
|
+
}
|
|
22884
22987
|
.cds--actionable-notification--hide-close-button .cds--actionable-notification__action-button.cds--btn--tertiary {
|
|
22885
22988
|
margin-inline-end: 0.5rem;
|
|
22886
22989
|
}
|
|
@@ -24076,12 +24179,13 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
24076
24179
|
content: "";
|
|
24077
24180
|
}
|
|
24078
24181
|
|
|
24079
|
-
|
|
24080
|
-
|
|
24081
|
-
|
|
24082
|
-
|
|
24182
|
+
@media (any-hover: hover) {
|
|
24183
|
+
.cds--progress-label:hover {
|
|
24184
|
+
box-shadow: 0 0.0625rem var(--cds-link-primary-hover, #0043ce);
|
|
24185
|
+
color: var(--cds-link-primary-hover, #0043ce);
|
|
24186
|
+
cursor: pointer;
|
|
24187
|
+
}
|
|
24083
24188
|
}
|
|
24084
|
-
|
|
24085
24189
|
.cds--progress--space-equal .cds--progress-label {
|
|
24086
24190
|
margin-inline-end: 0.75rem;
|
|
24087
24191
|
max-inline-size: 100%;
|
|
@@ -24207,18 +24311,18 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
24207
24311
|
outline: none;
|
|
24208
24312
|
}
|
|
24209
24313
|
|
|
24210
|
-
|
|
24211
|
-
|
|
24212
|
-
|
|
24213
|
-
|
|
24214
|
-
|
|
24215
|
-
|
|
24216
|
-
.cds--progress-step-button--unclickable .cds--tooltip__label:hover {
|
|
24217
|
-
|
|
24218
|
-
|
|
24219
|
-
|
|
24314
|
+
@media (any-hover: hover) {
|
|
24315
|
+
.cds--progress-step-button--unclickable .cds--progress-label:hover {
|
|
24316
|
+
box-shadow: none;
|
|
24317
|
+
color: var(--cds-text-primary, #161616);
|
|
24318
|
+
cursor: default;
|
|
24319
|
+
}
|
|
24320
|
+
.cds--progress-step-button--unclickable .cds--tooltip__label:hover {
|
|
24321
|
+
box-shadow: 0 0.0625rem var(--cds-link-primary, #0f62fe);
|
|
24322
|
+
color: var(--cds-link-primary, #0f62fe);
|
|
24323
|
+
cursor: pointer;
|
|
24324
|
+
}
|
|
24220
24325
|
}
|
|
24221
|
-
|
|
24222
24326
|
.cds--progress-step--disabled {
|
|
24223
24327
|
cursor: not-allowed;
|
|
24224
24328
|
pointer-events: none;
|
|
@@ -24227,12 +24331,18 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
24227
24331
|
cursor: not-allowed;
|
|
24228
24332
|
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
|
24229
24333
|
}
|
|
24230
|
-
.cds--progress-step--disabled .cds--progress-label
|
|
24231
|
-
.cds--progress-step--disabled .cds--progress-label:hover {
|
|
24334
|
+
.cds--progress-step--disabled .cds--progress-label {
|
|
24232
24335
|
box-shadow: none;
|
|
24233
24336
|
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
|
24234
24337
|
cursor: not-allowed;
|
|
24235
24338
|
}
|
|
24339
|
+
@media (any-hover: hover) {
|
|
24340
|
+
.cds--progress-step--disabled .cds--progress-label:hover {
|
|
24341
|
+
box-shadow: none;
|
|
24342
|
+
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
|
24343
|
+
cursor: not-allowed;
|
|
24344
|
+
}
|
|
24345
|
+
}
|
|
24236
24346
|
.cds--progress-step--disabled .cds--progress-line {
|
|
24237
24347
|
cursor: not-allowed;
|
|
24238
24348
|
}
|