@carbon/ibm-products 2.68.0 → 2.69.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/css/carbon.css +382 -74
- package/css/carbon.css.map +1 -1
- package/css/index-full-carbon.css +524 -116
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +126 -42
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +142 -42
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +185 -50
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/_virtual/_commonjsHelpers.js +3 -1
- package/es/_virtual/index2.js +6 -2
- package/es/_virtual/index3.js +10 -0
- package/es/components/AddSelect/AddSelectColumn.js +41 -18
- package/es/components/AddSelect/AddSelectSort.js +15 -16
- package/es/components/AddSelect/types/index.d.ts +1 -1
- package/es/components/Card/Card.d.ts +2 -2
- package/es/components/Card/Card.js +7 -4
- package/es/components/Coachmark/Coachmark.d.ts +43 -0
- package/es/components/Coachmark/Coachmark.js +49 -33
- package/es/components/Coachmark/CoachmarkOverlay.js +6 -0
- package/es/components/Coachmark/index.d.ts +1 -0
- package/es/components/CoachmarkBeacon/CoachmarkBeacon.d.ts +11 -0
- package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +19 -11
- package/es/components/CoachmarkButton/CoachmarkButton.js +7 -0
- package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +6 -0
- package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +7 -0
- package/es/components/Datagrid/Datagrid/DatagridContent.js +7 -5
- package/es/components/Datagrid/Datagrid/DatagridRow.d.ts +1 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +4 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.d.ts +1 -1
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -7
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +4 -3
- package/es/components/Datagrid/useNestedRowExpander.js +4 -2
- package/es/components/Datagrid/useOnRowClick.d.ts +1 -1
- package/es/components/Datagrid/useOnRowClick.js +6 -4
- package/es/components/Datagrid/useRowExpander.js +4 -2
- package/es/components/Datagrid/useSelectRows.d.ts +1 -1
- package/es/components/Datagrid/useSelectRows.js +4 -3
- package/es/components/Datagrid/useSortableColumns.d.ts +1 -1
- package/es/components/Datagrid/useSortableColumns.js +6 -5
- package/es/components/EditInPlace/EditInPlace.d.ts +1 -1
- package/es/components/EditInPlace/EditInPlace.js +4 -3
- package/es/components/EmptyStates/EmptyStateContent.d.ts +30 -1
- package/es/components/EmptyStates/EmptyStateContent.js +2 -2
- package/es/components/ExportModal/ExportModal.js +7 -5
- package/es/components/FeatureFlags/index.d.ts +31 -12
- package/es/components/FeatureFlags/index.js +46 -15
- package/es/components/InterstitialScreen/InterstitialScreenBody.js +3 -2
- package/es/components/InterstitialScreen/InterstitialScreenFooter.js +5 -2
- package/es/components/InterstitialScreen/InterstitialScreenHeader.js +3 -1
- package/es/components/ProductiveCard/ProductiveCard.d.ts +1 -1
- package/es/components/ScrollGradient/ScrollGradient.js +9 -7
- package/es/components/SidePanel/SidePanel.js +74 -0
- package/es/components/SidePanel/constants.d.ts +14 -8
- package/es/components/SidePanel/constants.js +1 -1
- package/es/components/SidePanel/resizer/Resizer.d.ts +21 -0
- package/es/components/SidePanel/resizer/Resizer.js +271 -0
- package/es/components/TruncatedList/TruncatedList.d.ts +1 -1
- package/es/components/TruncatedList/TruncatedList.js +4 -3
- package/es/feature-flags.js +5 -1
- package/es/index.js +1 -0
- package/es/node_modules/@carbon/{icons-react/node_modules/@carbon/icon-helpers → icon-helpers}/es/index.js +3 -3
- package/es/node_modules/@carbon/icons-react/es/Icon.js +1 -1
- package/es/node_modules/@carbon/icons-react/es/generated/bucket-10.js +816 -808
- package/es/node_modules/@carbon/icons-react/es/generated/bucket-3.js +615 -637
- package/es/node_modules/lodash.debounce/index.js +367 -0
- package/es/node_modules/prop-types/index.js +1 -1
- package/es/settings.js +1 -4
- package/lib/_virtual/_commonjsHelpers.js +3 -0
- package/lib/_virtual/index2.js +8 -2
- package/lib/_virtual/index3.js +12 -0
- package/lib/components/AddSelect/AddSelectColumn.js +40 -17
- package/lib/components/AddSelect/AddSelectSort.js +13 -14
- package/lib/components/AddSelect/types/index.d.ts +1 -1
- package/lib/components/Card/Card.d.ts +2 -2
- package/lib/components/Card/Card.js +7 -4
- package/lib/components/Coachmark/Coachmark.d.ts +43 -0
- package/lib/components/Coachmark/Coachmark.js +50 -32
- package/lib/components/Coachmark/CoachmarkOverlay.js +6 -0
- package/lib/components/Coachmark/index.d.ts +1 -0
- package/lib/components/CoachmarkBeacon/CoachmarkBeacon.d.ts +11 -0
- package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +19 -11
- package/lib/components/CoachmarkButton/CoachmarkButton.js +7 -0
- package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +6 -0
- package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +7 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +5 -3
- package/lib/components/Datagrid/Datagrid/DatagridRow.d.ts +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.d.ts +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +3 -2
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +2 -1
- package/lib/components/Datagrid/useNestedRowExpander.js +3 -1
- package/lib/components/Datagrid/useOnRowClick.d.ts +1 -1
- package/lib/components/Datagrid/useOnRowClick.js +5 -3
- package/lib/components/Datagrid/useRowExpander.js +3 -1
- package/lib/components/Datagrid/useSelectRows.d.ts +1 -1
- package/lib/components/Datagrid/useSelectRows.js +2 -1
- package/lib/components/Datagrid/useSortableColumns.d.ts +1 -1
- package/lib/components/Datagrid/useSortableColumns.js +4 -3
- package/lib/components/EditInPlace/EditInPlace.d.ts +1 -1
- package/lib/components/EditInPlace/EditInPlace.js +2 -1
- package/lib/components/EmptyStates/EmptyStateContent.d.ts +30 -1
- package/lib/components/EmptyStates/EmptyStateContent.js +2 -2
- package/lib/components/ExportModal/ExportModal.js +5 -3
- package/lib/components/FeatureFlags/index.d.ts +31 -12
- package/lib/components/FeatureFlags/index.js +46 -15
- package/lib/components/InterstitialScreen/InterstitialScreenBody.js +3 -2
- package/lib/components/InterstitialScreen/InterstitialScreenFooter.js +5 -2
- package/lib/components/InterstitialScreen/InterstitialScreenHeader.js +3 -1
- package/lib/components/ProductiveCard/ProductiveCard.d.ts +1 -1
- package/lib/components/ScrollGradient/ScrollGradient.js +8 -6
- package/lib/components/SidePanel/SidePanel.js +74 -0
- package/lib/components/SidePanel/constants.d.ts +14 -8
- package/lib/components/SidePanel/constants.js +1 -1
- package/lib/components/SidePanel/resizer/Resizer.d.ts +21 -0
- package/lib/components/SidePanel/resizer/Resizer.js +277 -0
- package/lib/components/TruncatedList/TruncatedList.d.ts +1 -1
- package/lib/components/TruncatedList/TruncatedList.js +2 -1
- package/lib/feature-flags.js +5 -1
- package/lib/index.js +1 -0
- package/lib/node_modules/@carbon/{icons-react/node_modules/@carbon/icon-helpers → icon-helpers}/es/index.js +3 -3
- package/lib/node_modules/@carbon/icons-react/es/Icon.js +1 -1
- package/lib/node_modules/@carbon/icons-react/es/generated/bucket-10.js +839 -831
- package/lib/node_modules/@carbon/icons-react/es/generated/bucket-3.js +621 -643
- package/lib/node_modules/lodash.debounce/index.js +369 -0
- package/lib/node_modules/prop-types/index.js +1 -1
- package/lib/settings.js +0 -4
- package/package.json +15 -15
- package/scss/components/AddSelect/_add-select.scss +12 -13
- package/scss/components/SidePanel/_side-panel-variables.scss +1 -5
- package/scss/components/SidePanel/_side-panel.scss +129 -12
- package/scss/global/decorators/_side-panel-decorator.scss +36 -8
- package/telemetry.yml +17 -0
package/css/carbon.css
CHANGED
@@ -2443,6 +2443,7 @@ em {
|
|
2443
2443
|
:root {
|
2444
2444
|
--cds-layer: var(--cds-layer-01, #f4f4f4);
|
2445
2445
|
--cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
2446
|
+
--cds-layer-background: var(--cds-layer-background-01, #ffffff);
|
2446
2447
|
--cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
2447
2448
|
--cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
2448
2449
|
--cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
@@ -2460,6 +2461,7 @@ em {
|
|
2460
2461
|
.cds--layer-one {
|
2461
2462
|
--cds-layer: var(--cds-layer-01, #f4f4f4);
|
2462
2463
|
--cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
2464
|
+
--cds-layer-background: var(--cds-layer-background-01, #ffffff);
|
2463
2465
|
--cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
2464
2466
|
--cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
2465
2467
|
--cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
@@ -2477,6 +2479,7 @@ em {
|
|
2477
2479
|
.cds--layer-two {
|
2478
2480
|
--cds-layer: var(--cds-layer-02, #ffffff);
|
2479
2481
|
--cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
|
2482
|
+
--cds-layer-background: var(--cds-layer-background-02, #f4f4f4);
|
2480
2483
|
--cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
|
2481
2484
|
--cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
|
2482
2485
|
--cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
|
@@ -2494,6 +2497,7 @@ em {
|
|
2494
2497
|
.cds--layer-three {
|
2495
2498
|
--cds-layer: var(--cds-layer-03, #f4f4f4);
|
2496
2499
|
--cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
|
2500
|
+
--cds-layer-background: var(--cds-layer-background-03, #ffffff);
|
2497
2501
|
--cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
|
2498
2502
|
--cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
|
2499
2503
|
--cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
|
@@ -2508,6 +2512,18 @@ em {
|
|
2508
2512
|
--cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
|
2509
2513
|
}
|
2510
2514
|
|
2515
|
+
.cds--layer-one.cds--layer__with-background {
|
2516
|
+
background-color: var(--cds-layer-background);
|
2517
|
+
}
|
2518
|
+
|
2519
|
+
.cds--layer-two.cds--layer__with-background {
|
2520
|
+
background-color: var(--cds-layer-background);
|
2521
|
+
}
|
2522
|
+
|
2523
|
+
.cds--layer-three.cds--layer__with-background {
|
2524
|
+
background-color: var(--cds-layer-background);
|
2525
|
+
}
|
2526
|
+
|
2511
2527
|
.cds--layout--size-xs {
|
2512
2528
|
--cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
|
2513
2529
|
--cds-layout-size-height: var(--cds-layout-size-height-context);
|
@@ -2757,6 +2773,9 @@ em {
|
|
2757
2773
|
--cds-layer-active-01: #c6c6c6;
|
2758
2774
|
--cds-layer-active-02: #c6c6c6;
|
2759
2775
|
--cds-layer-active-03: #c6c6c6;
|
2776
|
+
--cds-layer-background-01: #ffffff;
|
2777
|
+
--cds-layer-background-02: #f4f4f4;
|
2778
|
+
--cds-layer-background-03: #ffffff;
|
2760
2779
|
--cds-layer-hover-01: #e8e8e8;
|
2761
2780
|
--cds-layer-hover-02: #e8e8e8;
|
2762
2781
|
--cds-layer-hover-03: #e8e8e8;
|
@@ -2803,6 +2822,7 @@ em {
|
|
2803
2822
|
--cds-toggle-off: #8d8d8d;
|
2804
2823
|
--cds-layer: var(--cds-layer-01, #f4f4f4);
|
2805
2824
|
--cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
2825
|
+
--cds-layer-background: var(--cds-layer-background-01, #ffffff);
|
2806
2826
|
--cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
2807
2827
|
--cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
2808
2828
|
--cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
@@ -2889,6 +2909,9 @@ em {
|
|
2889
2909
|
--cds-status-blue: #0043ce;
|
2890
2910
|
--cds-status-purple: #8a3ffc;
|
2891
2911
|
--cds-status-gray: #6f6f6f;
|
2912
|
+
--cds-content-switcher-background: #e0e0e0;
|
2913
|
+
--cds-content-switcher-background-hover: #d1d1d1;
|
2914
|
+
--cds-content-switcher-selected: #ffffff;
|
2892
2915
|
}
|
2893
2916
|
|
2894
2917
|
.cds--g10 {
|
@@ -2989,6 +3012,9 @@ em {
|
|
2989
3012
|
--cds-layer-active-01: #c6c6c6;
|
2990
3013
|
--cds-layer-active-02: #c6c6c6;
|
2991
3014
|
--cds-layer-active-03: #c6c6c6;
|
3015
|
+
--cds-layer-background-01: #f4f4f4;
|
3016
|
+
--cds-layer-background-02: #ffffff;
|
3017
|
+
--cds-layer-background-03: #f4f4f4;
|
2992
3018
|
--cds-layer-hover-01: #e8e8e8;
|
2993
3019
|
--cds-layer-hover-02: #e8e8e8;
|
2994
3020
|
--cds-layer-hover-03: #e8e8e8;
|
@@ -3035,6 +3061,7 @@ em {
|
|
3035
3061
|
--cds-toggle-off: #8d8d8d;
|
3036
3062
|
--cds-layer: var(--cds-layer-01, #f4f4f4);
|
3037
3063
|
--cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
3064
|
+
--cds-layer-background: var(--cds-layer-background-01, #ffffff);
|
3038
3065
|
--cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
3039
3066
|
--cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
3040
3067
|
--cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
@@ -3121,6 +3148,9 @@ em {
|
|
3121
3148
|
--cds-status-blue: #0043ce;
|
3122
3149
|
--cds-status-purple: #8a3ffc;
|
3123
3150
|
--cds-status-gray: #6f6f6f;
|
3151
|
+
--cds-content-switcher-background: #e0e0e0;
|
3152
|
+
--cds-content-switcher-background-hover: #d1d1d1;
|
3153
|
+
--cds-content-switcher-selected: #ffffff;
|
3124
3154
|
}
|
3125
3155
|
|
3126
3156
|
.cds--g90 {
|
@@ -3221,6 +3251,9 @@ em {
|
|
3221
3251
|
--cds-layer-active-01: #6f6f6f;
|
3222
3252
|
--cds-layer-active-02: #8d8d8d;
|
3223
3253
|
--cds-layer-active-03: #393939;
|
3254
|
+
--cds-layer-background-01: #262626;
|
3255
|
+
--cds-layer-background-02: #393939;
|
3256
|
+
--cds-layer-background-03: #525252;
|
3224
3257
|
--cds-layer-hover-01: #474747;
|
3225
3258
|
--cds-layer-hover-02: #636363;
|
3226
3259
|
--cds-layer-hover-03: #5e5e5e;
|
@@ -3267,6 +3300,7 @@ em {
|
|
3267
3300
|
--cds-toggle-off: #8d8d8d;
|
3268
3301
|
--cds-layer: var(--cds-layer-01, #f4f4f4);
|
3269
3302
|
--cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
3303
|
+
--cds-layer-background: var(--cds-layer-background-01, #ffffff);
|
3270
3304
|
--cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
3271
3305
|
--cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
3272
3306
|
--cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
@@ -3352,6 +3386,9 @@ em {
|
|
3352
3386
|
--cds-status-blue: #4589ff;
|
3353
3387
|
--cds-status-purple: #a56eff;
|
3354
3388
|
--cds-status-gray: #8d8d8d;
|
3389
|
+
--cds-content-switcher-background: rgba(0, 0, 0, 0);
|
3390
|
+
--cds-content-switcher-background-hover: rgba(141, 141, 141, 0.12);
|
3391
|
+
--cds-content-switcher-selected: rgba(141, 141, 141, 0.24);
|
3355
3392
|
}
|
3356
3393
|
|
3357
3394
|
.cds--g100 {
|
@@ -3452,6 +3489,9 @@ em {
|
|
3452
3489
|
--cds-layer-active-01: #525252;
|
3453
3490
|
--cds-layer-active-02: #6f6f6f;
|
3454
3491
|
--cds-layer-active-03: #8d8d8d;
|
3492
|
+
--cds-layer-background-01: #161616;
|
3493
|
+
--cds-layer-background-02: #262626;
|
3494
|
+
--cds-layer-background-03: #393939;
|
3455
3495
|
--cds-layer-hover-01: #333333;
|
3456
3496
|
--cds-layer-hover-02: #474747;
|
3457
3497
|
--cds-layer-hover-03: #636363;
|
@@ -3498,6 +3538,7 @@ em {
|
|
3498
3538
|
--cds-toggle-off: #6f6f6f;
|
3499
3539
|
--cds-layer: var(--cds-layer-01, #f4f4f4);
|
3500
3540
|
--cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
|
3541
|
+
--cds-layer-background: var(--cds-layer-background-01, #ffffff);
|
3501
3542
|
--cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
|
3502
3543
|
--cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
|
3503
3544
|
--cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
|
@@ -3583,6 +3624,9 @@ em {
|
|
3583
3624
|
--cds-status-blue: #4589ff;
|
3584
3625
|
--cds-status-purple: #a56eff;
|
3585
3626
|
--cds-status-gray: #8d8d8d;
|
3627
|
+
--cds-content-switcher-background: rgba(0, 0, 0, 0);
|
3628
|
+
--cds-content-switcher-background-hover: rgba(141, 141, 141, 0.12);
|
3629
|
+
--cds-content-switcher-selected: rgba(141, 141, 141, 0.24);
|
3586
3630
|
}
|
3587
3631
|
|
3588
3632
|
.cds--accordion {
|
@@ -4490,6 +4534,7 @@ li.cds--accordion__item--disabled:last-of-type {
|
|
4490
4534
|
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
4491
4535
|
padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
|
4492
4536
|
max-inline-size: 18rem;
|
4537
|
+
overflow-wrap: break-word;
|
4493
4538
|
}
|
4494
4539
|
|
4495
4540
|
.cds--icon-tooltip {
|
@@ -6475,6 +6520,11 @@ a.cds--overflow-menu-options__btn::before {
|
|
6475
6520
|
margin-inline-end: 0.25rem;
|
6476
6521
|
}
|
6477
6522
|
|
6523
|
+
.cds--breadcrumb--sm .cds--breadcrumb-item .cds--link {
|
6524
|
+
justify-content: center;
|
6525
|
+
min-inline-size: 0.75rem;
|
6526
|
+
}
|
6527
|
+
|
6478
6528
|
.cds--breadcrumb-item .cds--link:visited {
|
6479
6529
|
color: var(--cds-link-primary, #0f62fe);
|
6480
6530
|
}
|
@@ -8560,6 +8610,12 @@ fieldset[disabled] .cds--form__helper-text {
|
|
8560
8610
|
.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
|
8561
8611
|
fill: var(--cds-icon-primary, #161616);
|
8562
8612
|
}
|
8613
|
+
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
8614
|
+
.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg,
|
8615
|
+
.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
|
8616
|
+
fill: ButtonText;
|
8617
|
+
}
|
8618
|
+
}
|
8563
8619
|
|
8564
8620
|
.cds--text-input--invalid,
|
8565
8621
|
.cds--text-input--warning {
|
@@ -11043,8 +11099,15 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11043
11099
|
--cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
11044
11100
|
display: flex;
|
11045
11101
|
justify-content: space-evenly;
|
11102
|
+
border-radius: 0.25rem;
|
11046
11103
|
block-size: var(--cds-layout-size-height-local);
|
11047
11104
|
inline-size: 100%;
|
11105
|
+
outline: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11106
|
+
outline-offset: -0.0625rem;
|
11107
|
+
}
|
11108
|
+
|
11109
|
+
.cds--content-switcher:has(.cds--content-switcher-btn:disabled) {
|
11110
|
+
outline-color: var(--cds-border-disabled, #c6c6c6);
|
11048
11111
|
}
|
11049
11112
|
|
11050
11113
|
.cds--content-switcher-btn {
|
@@ -11066,7 +11129,6 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11066
11129
|
color: var(--cds-text-secondary, #525252);
|
11067
11130
|
text-align: start;
|
11068
11131
|
text-decoration: none;
|
11069
|
-
transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
11070
11132
|
white-space: nowrap;
|
11071
11133
|
}
|
11072
11134
|
.cds--content-switcher-btn html {
|
@@ -11088,6 +11150,7 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11088
11150
|
.cds--content-switcher-btn::after {
|
11089
11151
|
position: absolute;
|
11090
11152
|
display: block;
|
11153
|
+
border-radius: 0.25rem;
|
11091
11154
|
background-color: var(--cds-layer-selected-inverse, #161616);
|
11092
11155
|
block-size: 100%;
|
11093
11156
|
content: "";
|
@@ -11096,23 +11159,16 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11096
11159
|
inset-inline-start: 0;
|
11097
11160
|
transform: scaleY(0);
|
11098
11161
|
transform-origin: bottom;
|
11099
|
-
transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
11100
|
-
}
|
11101
|
-
@media (prefers-reduced-motion: reduce) {
|
11102
|
-
.cds--content-switcher-btn::after {
|
11103
|
-
transition: none;
|
11104
|
-
}
|
11105
11162
|
}
|
11106
11163
|
.cds--content-switcher-btn:disabled::after {
|
11107
11164
|
display: none;
|
11108
11165
|
}
|
11109
11166
|
.cds--content-switcher-btn:focus {
|
11110
|
-
|
11111
|
-
border-color: var(--cds-focus, #0f62fe);
|
11112
|
-
box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
|
11167
|
+
border: 0;
|
11113
11168
|
}
|
11114
11169
|
.cds--content-switcher-btn:focus::after {
|
11115
|
-
|
11170
|
+
border-radius: 0.25rem;
|
11171
|
+
box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
|
11116
11172
|
}
|
11117
11173
|
.cds--content-switcher-btn:hover {
|
11118
11174
|
color: var(--cds-text-primary, #161616);
|
@@ -11131,8 +11187,25 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11131
11187
|
.cds--content-switcher-btn:disabled:hover {
|
11132
11188
|
cursor: not-allowed;
|
11133
11189
|
}
|
11134
|
-
|
11135
|
-
|
11190
|
+
|
11191
|
+
.cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
|
11192
|
+
display: block;
|
11193
|
+
border-radius: 0.25rem;
|
11194
|
+
block-size: 100%;
|
11195
|
+
box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
|
11196
|
+
content: "";
|
11197
|
+
inline-size: 100%;
|
11198
|
+
}
|
11199
|
+
.cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::after {
|
11200
|
+
background-color: var(--cds-focus-inset, #ffffff);
|
11201
|
+
transform: scaleY(1);
|
11202
|
+
}
|
11203
|
+
.cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
|
11204
|
+
border-radius: 0;
|
11205
|
+
background-color: var(--cds-layer-hover);
|
11206
|
+
border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11207
|
+
border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11208
|
+
box-shadow: none;
|
11136
11209
|
}
|
11137
11210
|
|
11138
11211
|
.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn {
|
@@ -11143,22 +11216,20 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11143
11216
|
|
11144
11217
|
.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
|
11145
11218
|
border-end-start-radius: 0.25rem;
|
11146
|
-
border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11147
11219
|
border-start-start-radius: 0.25rem;
|
11220
|
+
box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
|
11148
11221
|
}
|
11149
11222
|
.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child:disabled {
|
11150
|
-
|
11151
|
-
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
11223
|
+
box-shadow: none;
|
11152
11224
|
}
|
11153
11225
|
|
11154
11226
|
.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
|
11155
11227
|
border-end-end-radius: 0.25rem;
|
11156
|
-
border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11157
11228
|
border-start-end-radius: 0.25rem;
|
11229
|
+
box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
|
11158
11230
|
}
|
11159
11231
|
.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child:disabled {
|
11160
|
-
|
11161
|
-
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
11232
|
+
box-shadow: none;
|
11162
11233
|
}
|
11163
11234
|
|
11164
11235
|
.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected,
|
@@ -11166,6 +11237,11 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11166
11237
|
.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child {
|
11167
11238
|
border: 0;
|
11168
11239
|
}
|
11240
|
+
.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:disabled::before,
|
11241
|
+
.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:first-child:disabled::before,
|
11242
|
+
.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child:disabled::before {
|
11243
|
+
display: none;
|
11244
|
+
}
|
11169
11245
|
|
11170
11246
|
.cds--content-switcher-btn::before {
|
11171
11247
|
position: absolute;
|
@@ -11179,7 +11255,7 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11179
11255
|
}
|
11180
11256
|
|
11181
11257
|
.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-of-type::before {
|
11182
|
-
|
11258
|
+
background-color: transparent;
|
11183
11259
|
}
|
11184
11260
|
|
11185
11261
|
.cds--content-switcher-btn:focus::before,
|
@@ -11203,7 +11279,6 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11203
11279
|
|
11204
11280
|
.cds--content-switcher__icon {
|
11205
11281
|
fill: var(--cds-icon-secondary, #525252);
|
11206
|
-
transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
11207
11282
|
}
|
11208
11283
|
|
11209
11284
|
.cds--content-switcher__icon + span {
|
@@ -11223,13 +11298,36 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11223
11298
|
fill: var(--cds-icon-primary, #161616);
|
11224
11299
|
}
|
11225
11300
|
|
11301
|
+
.cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
|
11302
|
+
.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
|
11303
|
+
.cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
|
11304
|
+
.cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
|
11305
|
+
z-index: 0;
|
11306
|
+
border-radius: 0;
|
11307
|
+
block-size: 100%;
|
11308
|
+
border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11309
|
+
border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11310
|
+
box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
|
11311
|
+
content: "";
|
11312
|
+
inline-size: 100%;
|
11313
|
+
}
|
11314
|
+
.cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover):not(.cds--content-switcher--selected)::after,
|
11315
|
+
.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
|
11316
|
+
.cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
|
11317
|
+
.cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover):not(.cds--content-switcher--selected)::after {
|
11318
|
+
background-color: var(--cds-focus-inset, #ffffff);
|
11319
|
+
transform: scaleY(1);
|
11320
|
+
}
|
11321
|
+
|
11226
11322
|
.cds--content-switcher-btn.cds--content-switcher--selected {
|
11227
11323
|
z-index: 3;
|
11228
|
-
background-color: var(--cds-layer-selected-inverse, #161616);
|
11229
11324
|
color: var(--cds-text-inverse, #ffffff);
|
11230
11325
|
}
|
11326
|
+
.cds--content-switcher-btn.cds--content-switcher--selected:hover {
|
11327
|
+
background-color: transparent;
|
11328
|
+
}
|
11231
11329
|
.cds--content-switcher-btn.cds--content-switcher--selected:disabled {
|
11232
|
-
background-color: var(--cds-
|
11330
|
+
background-color: var(--cds-button-disabled, #c6c6c6);
|
11233
11331
|
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
11234
11332
|
}
|
11235
11333
|
.cds--content-switcher-btn.cds--content-switcher--selected::after {
|
@@ -11249,28 +11347,37 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11249
11347
|
|
11250
11348
|
.cds--content-switcher--icon-only {
|
11251
11349
|
justify-content: flex-start;
|
11350
|
+
inline-size: fit-content;
|
11351
|
+
}
|
11352
|
+
|
11353
|
+
.cds--content-switcher--icon-only .cds--content-switcher-btn {
|
11354
|
+
align-items: center;
|
11355
|
+
padding: 0;
|
11356
|
+
transition: none;
|
11357
|
+
}
|
11358
|
+
.cds--content-switcher--icon-only .cds--content-switcher-btn:focus {
|
11359
|
+
box-shadow: none;
|
11360
|
+
}
|
11361
|
+
|
11362
|
+
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn:first-of-type::before {
|
11363
|
+
background-color: transparent;
|
11252
11364
|
}
|
11253
11365
|
|
11254
11366
|
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
|
11255
11367
|
border-end-start-radius: 0.25rem;
|
11256
|
-
border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11257
11368
|
border-start-start-radius: 0.25rem;
|
11258
|
-
|
11259
|
-
|
11260
|
-
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher--selected[disabled],
|
11261
|
-
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher--selected[disabled] {
|
11262
|
-
border-color: var(--cds-layer-selected-disabled, #8d8d8d);
|
11369
|
+
box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
|
11263
11370
|
}
|
11264
11371
|
|
11265
11372
|
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
|
11266
11373
|
border-end-end-radius: 0.25rem;
|
11267
|
-
border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11268
11374
|
border-start-end-radius: 0.25rem;
|
11375
|
+
box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
|
11269
11376
|
}
|
11270
11377
|
|
11271
|
-
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:
|
11272
|
-
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:
|
11273
|
-
|
11378
|
+
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn[disabled],
|
11379
|
+
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn[disabled] {
|
11380
|
+
box-shadow: none;
|
11274
11381
|
}
|
11275
11382
|
|
11276
11383
|
.cds--content-switcher--lg .cds--content-switcher-btn {
|
@@ -11283,6 +11390,7 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11283
11390
|
}
|
11284
11391
|
|
11285
11392
|
.cds--content-switcher--icon-only .cds--content-switcher-btn svg {
|
11393
|
+
z-index: 1;
|
11286
11394
|
fill: var(--cds-icon-primary, #161616);
|
11287
11395
|
}
|
11288
11396
|
|
@@ -11295,23 +11403,14 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11295
11403
|
block-size: 2rem;
|
11296
11404
|
}
|
11297
11405
|
|
11298
|
-
.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-of-type .cds--content-switcher-btn::before {
|
11299
|
-
display: none;
|
11300
|
-
}
|
11301
|
-
|
11302
11406
|
.cds--content-switcher-btn:focus::before,
|
11303
11407
|
.cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
|
11304
|
-
.cds--content-switcher-btn:
|
11305
|
-
.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
|
11408
|
+
.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,
|
11306
11409
|
.cds--content-switcher--selected::before,
|
11307
11410
|
.cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
|
11308
11411
|
background-color: transparent;
|
11309
11412
|
}
|
11310
11413
|
|
11311
|
-
.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] {
|
11312
|
-
border-color: var(--cds-border-inverse, #161616);
|
11313
|
-
}
|
11314
|
-
|
11315
11414
|
.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
|
11316
11415
|
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
11317
11416
|
}
|
@@ -11325,6 +11424,190 @@ fieldset[disabled] .cds--form__helper-text {
|
|
11325
11424
|
background-color: var(--cds-border-subtle);
|
11326
11425
|
}
|
11327
11426
|
|
11427
|
+
.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,
|
11428
|
+
.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus::before,
|
11429
|
+
.cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
|
11430
|
+
.cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn::before {
|
11431
|
+
z-index: 0;
|
11432
|
+
border-radius: 0;
|
11433
|
+
block-size: 100%;
|
11434
|
+
border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11435
|
+
border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
|
11436
|
+
box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
|
11437
|
+
content: "";
|
11438
|
+
inline-size: 100%;
|
11439
|
+
}
|
11440
|
+
.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,
|
11441
|
+
.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,
|
11442
|
+
.cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
|
11443
|
+
.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 {
|
11444
|
+
background-color: var(--cds-focus-inset, #ffffff);
|
11445
|
+
transform: scaleY(1);
|
11446
|
+
}
|
11447
|
+
|
11448
|
+
.cds--content-switcher--low-contrast {
|
11449
|
+
background-color: var(--cds-content-switcher-background, #e0e0e0);
|
11450
|
+
outline-color: var(--cds-border-strong);
|
11451
|
+
}
|
11452
|
+
|
11453
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn {
|
11454
|
+
border-color: var(--cds-border-strong);
|
11455
|
+
}
|
11456
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover, .cds--content-switcher--low-contrast .cds--content-switcher-btn:active {
|
11457
|
+
background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
|
11458
|
+
}
|
11459
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn::before {
|
11460
|
+
background-color: var(--cds-border-strong);
|
11461
|
+
}
|
11462
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn::after {
|
11463
|
+
background-color: var(--cds-content-switcher-selected, #ffffff);
|
11464
|
+
}
|
11465
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled {
|
11466
|
+
border-color: var(--cds-border-disabled, #c6c6c6);
|
11467
|
+
background-color: transparent;
|
11468
|
+
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
11469
|
+
}
|
11470
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover {
|
11471
|
+
cursor: not-allowed;
|
11472
|
+
}
|
11473
|
+
|
11474
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
|
11475
|
+
background: transparent;
|
11476
|
+
}
|
11477
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::after {
|
11478
|
+
background-color: var(--cds-content-switcher-background, #e0e0e0);
|
11479
|
+
box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
|
11480
|
+
}
|
11481
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
|
11482
|
+
border-color: var(--cds-border-strong);
|
11483
|
+
background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
|
11484
|
+
box-shadow: none;
|
11485
|
+
}
|
11486
|
+
|
11487
|
+
.cds--content-switcher--low-contrast:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
|
11488
|
+
box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-strong);
|
11489
|
+
}
|
11490
|
+
|
11491
|
+
.cds--content-switcher--low-contrast:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
|
11492
|
+
box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-strong);
|
11493
|
+
}
|
11494
|
+
|
11495
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
|
11496
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
|
11497
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
|
11498
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
|
11499
|
+
border-color: var(--cds-border-strong);
|
11500
|
+
box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
|
11501
|
+
}
|
11502
|
+
.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,
|
11503
|
+
.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,
|
11504
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
|
11505
|
+
.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 {
|
11506
|
+
background-color: var(--cds-content-switcher-background, #e0e0e0);
|
11507
|
+
}
|
11508
|
+
|
11509
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected {
|
11510
|
+
font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
|
11511
|
+
font-weight: var(--cds-heading-compact-01-font-weight, 600);
|
11512
|
+
line-height: var(--cds-heading-compact-01-line-height, 1.28572);
|
11513
|
+
letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
|
11514
|
+
color: var(--cds-text-primary, #161616);
|
11515
|
+
}
|
11516
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:hover {
|
11517
|
+
background-color: transparent;
|
11518
|
+
}
|
11519
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected::after {
|
11520
|
+
border-radius: 0.25rem;
|
11521
|
+
background-color: var(--cds-content-switcher-selected, #ffffff);
|
11522
|
+
box-shadow: inset 0 0 0 0.0625rem var(--cds-border-inverse, #161616);
|
11523
|
+
}
|
11524
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:focus::after {
|
11525
|
+
box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
|
11526
|
+
}
|
11527
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
|
11528
|
+
border: 0.0625rem solid var(--cds-border-disabled, #c6c6c6);
|
11529
|
+
border-radius: 0.25rem;
|
11530
|
+
background-color: var(--cds-content-switcher-selected, #ffffff);
|
11531
|
+
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
11532
|
+
}
|
11533
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled::before {
|
11534
|
+
background-color: transparent;
|
11535
|
+
}
|
11536
|
+
|
11537
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus::before,
|
11538
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:focus + .cds--content-switcher-btn::before,
|
11539
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover::before,
|
11540
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn::before,
|
11541
|
+
.cds--content-switcher--low-contrast .cds--content-switcher--selected::before,
|
11542
|
+
.cds--content-switcher--low-contrast .cds--content-switcher--selected + .cds--content-switcher-btn::before {
|
11543
|
+
background-color: transparent;
|
11544
|
+
}
|
11545
|
+
|
11546
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled::before,
|
11547
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn:disabled::before {
|
11548
|
+
background-color: var(--cds-border-disabled, #c6c6c6);
|
11549
|
+
}
|
11550
|
+
|
11551
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled + .cds--content-switcher-btn::before,
|
11552
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled:hover + .cds--content-switcher-btn::before,
|
11553
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before {
|
11554
|
+
background-color: transparent;
|
11555
|
+
}
|
11556
|
+
|
11557
|
+
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn:not([disabled]) {
|
11558
|
+
box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-strong);
|
11559
|
+
}
|
11560
|
+
|
11561
|
+
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn:not([disabled]) {
|
11562
|
+
box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-strong);
|
11563
|
+
}
|
11564
|
+
|
11565
|
+
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn svg {
|
11566
|
+
fill: var(--cds-icon-secondary, #525252);
|
11567
|
+
}
|
11568
|
+
|
11569
|
+
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn:hover svg {
|
11570
|
+
fill: var(--cds-icon-primary, #161616);
|
11571
|
+
}
|
11572
|
+
|
11573
|
+
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
|
11574
|
+
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
11575
|
+
}
|
11576
|
+
|
11577
|
+
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected svg {
|
11578
|
+
fill: var(--cds-icon-primary, #161616);
|
11579
|
+
}
|
11580
|
+
|
11581
|
+
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected[disabled] svg {
|
11582
|
+
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
11583
|
+
}
|
11584
|
+
|
11585
|
+
.cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
|
11586
|
+
border-color: var(--cds-border-disabled, #c6c6c6);
|
11587
|
+
}
|
11588
|
+
|
11589
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered):focus::before,
|
11590
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
|
11591
|
+
.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,
|
11592
|
+
.cds--content-switcher--low-contrast .cds--content-switcher--selected:not(.cds--content-switcher__selected-hovered)::before,
|
11593
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
|
11594
|
+
background-color: transparent;
|
11595
|
+
}
|
11596
|
+
|
11597
|
+
.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,
|
11598
|
+
.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,
|
11599
|
+
.cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
|
11600
|
+
.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 {
|
11601
|
+
border-color: var(--cds-border-strong);
|
11602
|
+
box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
|
11603
|
+
}
|
11604
|
+
.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,
|
11605
|
+
.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,
|
11606
|
+
.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,
|
11607
|
+
.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 {
|
11608
|
+
background-color: var(--cds-content-switcher-background, #e0e0e0);
|
11609
|
+
}
|
11610
|
+
|
11328
11611
|
.cds--radio-button-group {
|
11329
11612
|
box-sizing: border-box;
|
11330
11613
|
padding: 0;
|
@@ -13664,25 +13947,6 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
|
|
13664
13947
|
inline-size: 2rem;
|
13665
13948
|
}
|
13666
13949
|
|
13667
|
-
tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
|
13668
|
-
position: absolute;
|
13669
|
-
background-color: var(--cds-layer-accent);
|
13670
|
-
block-size: 0.0625rem;
|
13671
|
-
content: "";
|
13672
|
-
inline-size: 0.5rem;
|
13673
|
-
inset-block-end: -0.0625rem;
|
13674
|
-
inset-inline-start: 0;
|
13675
|
-
}
|
13676
|
-
|
13677
|
-
tr.cds--parent-row.cds--expandable-row:hover td.cds--table-expand + td::after,
|
13678
|
-
tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td.cds--table-expand + td::after {
|
13679
|
-
background-color: var(--cds-layer-hover);
|
13680
|
-
}
|
13681
|
-
|
13682
|
-
tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
|
13683
|
-
display: none;
|
13684
|
-
}
|
13685
|
-
|
13686
13950
|
.cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n+3) td,
|
13687
13951
|
.cds--data-table--zebra tbody tr[data-child-row]:nth-child(4n+4) td {
|
13688
13952
|
border-block-end: 1px solid var(--cds-layer);
|
@@ -14136,6 +14400,12 @@ th .cds--table-sort__flex {
|
|
14136
14400
|
margin-block-start: 0.8125rem;
|
14137
14401
|
}
|
14138
14402
|
|
14403
|
+
.cds--table-sort__header .cds--ai-label,
|
14404
|
+
.cds--table-sort__header .cds--slug,
|
14405
|
+
.cds--table-sort__header .cds--table-header-label--decorator-inner {
|
14406
|
+
display: none;
|
14407
|
+
}
|
14408
|
+
|
14139
14409
|
.cds--table-sort__header--slug .cds--table-sort__icon,
|
14140
14410
|
.cds--table-sort__header--slug .cds--table-sort__icon-unsorted,
|
14141
14411
|
.cds--table-sort__header--ai-label .cds--table-sort__icon,
|
@@ -14149,6 +14419,7 @@ th .cds--table-sort__flex {
|
|
14149
14419
|
.cds--table-sort__header--ai-label .cds--slug,
|
14150
14420
|
.cds--table-sort__header--decorator .cds--table-header-label--decorator-inner,
|
14151
14421
|
.cds--table-sort__header--ai-label .cds--table-header-label--decorator-inner {
|
14422
|
+
display: block;
|
14152
14423
|
margin-inline-end: 0.5rem;
|
14153
14424
|
}
|
14154
14425
|
|
@@ -14990,6 +15261,7 @@ th .cds--table-sort__flex {
|
|
14990
15261
|
padding: 0;
|
14991
15262
|
border: none;
|
14992
15263
|
background-color: var(--cds-layer);
|
15264
|
+
block-size: fit-content;
|
14993
15265
|
color: var(--cds-text-primary, #161616);
|
14994
15266
|
inline-size: 48rem;
|
14995
15267
|
max-block-size: 50%;
|
@@ -15949,16 +16221,22 @@ button.cds--dropdown-text:focus {
|
|
15949
16221
|
.cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
|
15950
16222
|
inline-size: -webkit-fill-available;
|
15951
16223
|
padding-inline-start: 1rem;
|
16224
|
+
/* This is for targeting styles specific to firefox */
|
16225
|
+
/* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
|
16226
|
+
/* stylelint-disable-next-line at-rule-no-vendor-prefix */
|
15952
16227
|
}
|
15953
|
-
|
16228
|
+
@-moz-document url-prefix() {
|
15954
16229
|
.cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
|
15955
16230
|
inline-size: -moz-available;
|
15956
16231
|
}
|
15957
16232
|
}
|
15958
16233
|
.cds--file__selected-file .cds--file-filename-tooltip {
|
15959
16234
|
inline-size: -webkit-fill-available;
|
16235
|
+
/* This is for targeting styles specific to firefox */
|
16236
|
+
/* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
|
16237
|
+
/* stylelint-disable-next-line at-rule-no-vendor-prefix */
|
15960
16238
|
}
|
15961
|
-
|
16239
|
+
@-moz-document url-prefix() {
|
15962
16240
|
.cds--file__selected-file .cds--file-filename-tooltip {
|
15963
16241
|
inline-size: -moz-available;
|
15964
16242
|
}
|
@@ -15979,8 +16257,11 @@ button.cds--dropdown-text:focus {
|
|
15979
16257
|
outline: inherit;
|
15980
16258
|
text-overflow: ellipsis;
|
15981
16259
|
white-space: nowrap;
|
16260
|
+
/* This is for targeting styles specific to firefox */
|
16261
|
+
/* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
|
16262
|
+
/* stylelint-disable-next-line at-rule-no-vendor-prefix */
|
15982
16263
|
}
|
15983
|
-
|
16264
|
+
@-moz-document url-prefix() {
|
15984
16265
|
.cds--file__selected-file .cds--file-filename-button {
|
15985
16266
|
inline-size: -moz-available;
|
15986
16267
|
}
|
@@ -19654,6 +19935,8 @@ optgroup.cds--select-optgroup:disabled,
|
|
19654
19935
|
grid-column: 1/-1;
|
19655
19936
|
grid-row: 1/1;
|
19656
19937
|
margin-block-end: 0.5rem;
|
19938
|
+
max-block-size: 50vh;
|
19939
|
+
overflow-y: auto;
|
19657
19940
|
padding-block-start: 1rem;
|
19658
19941
|
padding-inline: 1rem 3rem;
|
19659
19942
|
}
|
@@ -21033,13 +21316,17 @@ optgroup.cds--select-optgroup:disabled,
|
|
21033
21316
|
}
|
21034
21317
|
|
21035
21318
|
.cds--page-header__content__title-wrapper {
|
21036
|
-
display:
|
21037
|
-
justify-content: space-between;
|
21319
|
+
display: grid;
|
21038
21320
|
gap: 1rem;
|
21321
|
+
grid-template-columns: auto minmax(var(--pageheader-title-grid-width, 0), 1fr);
|
21322
|
+
margin-block-end: 1rem;
|
21323
|
+
min-block-size: 2.5rem;
|
21039
21324
|
}
|
21040
21325
|
@media (max-width: 41.98rem) {
|
21041
21326
|
.cds--page-header__content__title-wrapper {
|
21327
|
+
display: flex;
|
21042
21328
|
flex-direction: column;
|
21329
|
+
grid-gap: 1rem;
|
21043
21330
|
}
|
21044
21331
|
}
|
21045
21332
|
|
@@ -21053,6 +21340,10 @@ optgroup.cds--select-optgroup:disabled,
|
|
21053
21340
|
display: flex;
|
21054
21341
|
}
|
21055
21342
|
|
21343
|
+
.cds--page-header__content__title-container .cds--definition-term {
|
21344
|
+
border-block-end: none;
|
21345
|
+
}
|
21346
|
+
|
21056
21347
|
.cds--page-header__content__contextual-actions {
|
21057
21348
|
display: flex;
|
21058
21349
|
}
|
@@ -21081,7 +21372,17 @@ optgroup.cds--select-optgroup:disabled,
|
|
21081
21372
|
|
21082
21373
|
.cds--page-header__content__page-actions {
|
21083
21374
|
display: flex;
|
21084
|
-
|
21375
|
+
justify-content: right;
|
21376
|
+
}
|
21377
|
+
@media (max-width: 41.98rem) {
|
21378
|
+
.cds--page-header__content__page-actions {
|
21379
|
+
justify-content: left;
|
21380
|
+
margin-block-start: 0;
|
21381
|
+
}
|
21382
|
+
}
|
21383
|
+
|
21384
|
+
.cds--page-header__content__page-actions .cds--menu-button__trigger:not(.cds--btn--ghost) {
|
21385
|
+
min-inline-size: 0;
|
21085
21386
|
}
|
21086
21387
|
|
21087
21388
|
.cds--page-header__content__subtitle {
|
@@ -21089,7 +21390,7 @@ optgroup.cds--select-optgroup:disabled,
|
|
21089
21390
|
font-weight: var(--cds-productive-heading-03-font-weight, 400);
|
21090
21391
|
line-height: var(--cds-productive-heading-03-line-height, 1.4);
|
21091
21392
|
letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
|
21092
|
-
margin-block-
|
21393
|
+
margin-block-end: 0.5rem;
|
21093
21394
|
}
|
21094
21395
|
|
21095
21396
|
.cds--page-header__content__body {
|
@@ -21105,14 +21406,21 @@ optgroup.cds--select-optgroup:disabled,
|
|
21105
21406
|
margin-block-start: 1rem;
|
21106
21407
|
}
|
21107
21408
|
|
21409
|
+
[data-hidden]:not([data-fixed]) {
|
21410
|
+
display: none;
|
21411
|
+
}
|
21412
|
+
|
21108
21413
|
.cds--page-header__hero-image {
|
21109
21414
|
display: flex;
|
21110
21415
|
overflow: hidden;
|
21111
21416
|
align-items: center;
|
21417
|
+
justify-content: end;
|
21112
21418
|
block-size: 100%;
|
21113
21419
|
}
|
21114
21420
|
|
21115
21421
|
.cds--page-header__tab-bar {
|
21422
|
+
display: grid;
|
21423
|
+
padding: 0 1rem;
|
21116
21424
|
border: 1px solid green; /* stylelint-disable-line */
|
21117
21425
|
}
|
21118
21426
|
|
@@ -22019,6 +22327,8 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
22019
22327
|
|
22020
22328
|
.cds--progress--space-equal .cds--progress-text {
|
22021
22329
|
overflow: hidden;
|
22330
|
+
padding: 0.125rem;
|
22331
|
+
margin: -0.125rem;
|
22022
22332
|
}
|
22023
22333
|
|
22024
22334
|
.cds--progress-label {
|
@@ -24707,13 +25017,11 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
24707
25017
|
.cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch::after,
|
24708
25018
|
.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch::after {
|
24709
25019
|
display: block;
|
24710
|
-
border: 2px solid var(--cds-focus, #0f62fe);
|
24711
25020
|
border-radius: 1rem;
|
24712
|
-
block-size:
|
25021
|
+
block-size: 100%;
|
24713
25022
|
content: "";
|
24714
|
-
|
24715
|
-
|
24716
|
-
margin-inline-start: -0.1875rem;
|
25023
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
25024
|
+
outline-offset: 1px;
|
24717
25025
|
}
|
24718
25026
|
|
24719
25027
|
.cds--toggle__switch--checked {
|