@carbon/styles 1.48.0-rc.0 → 1.48.1
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/styles.css +276 -50
- package/css/styles.min.css +1 -1
- package/package.json +3 -3
- package/scss/__tests__/theme-test.js +13 -0
- package/scss/components/date-picker/_date-picker.scss +1 -1
- package/scss/components/fluid-date-picker/_fluid-date-picker.scss +9 -1
- package/scss/components/fluid-number-input/_fluid-number-input.scss +4 -1
- package/scss/components/fluid-text-area/_fluid-text-area.scss +4 -1
- package/scss/components/list-box/_list-box.scss +8 -1
- package/scss/components/modal/_modal.scss +5 -2
- package/scss/components/number-input/_number-input.scss +6 -1
- package/scss/components/popover/_popover.scss +4 -4
- package/scss/components/select/_select.scss +2 -1
- package/scss/components/slug/_slug.scss +245 -16
- package/scss/components/text-area/_text-area.scss +2 -1
- package/scss/components/text-input/_text-input.scss +2 -1
- package/scss/components/toggletip/_toggletip.scss +0 -1
- package/scss/utilities/_ai-gradient.scss +21 -24
package/css/styles.css
CHANGED
|
@@ -2759,9 +2759,16 @@ em {
|
|
|
2759
2759
|
.cds--white {
|
|
2760
2760
|
background-color: var(--cds-background);
|
|
2761
2761
|
color: var(--cds-text-primary);
|
|
2762
|
+
--cds-ai-aura-end: rgba(255, 255, 255, 0);
|
|
2763
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
|
2764
|
+
--cds-ai-border-end: #d0e2ff;
|
|
2765
|
+
--cds-ai-border-start: #78a9ff;
|
|
2766
|
+
--cds-ai-border-strong: #4589ff;
|
|
2767
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
|
2762
2768
|
--cds-ai-gradient-end: rgba(255, 255, 255, 0);
|
|
2763
2769
|
--cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
|
|
2764
2770
|
--cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
|
|
2771
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
|
2765
2772
|
--cds-background: #ffffff;
|
|
2766
2773
|
--cds-background-active: rgba(141, 141, 141, 0.5);
|
|
2767
2774
|
--cds-background-brand: #0f62fe;
|
|
@@ -2847,16 +2854,22 @@ em {
|
|
|
2847
2854
|
--cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
|
|
2848
2855
|
--cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
|
|
2849
2856
|
--cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
|
|
2850
|
-
--cds-slug-callout-aura-start: rgba(
|
|
2857
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
|
2851
2858
|
--cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
|
|
2852
2859
|
--cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
|
|
2853
2860
|
--cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
|
|
2861
|
+
--cds-slug-callout-caret-bottom: #d0e2ff;
|
|
2862
|
+
--cds-slug-callout-caret-bottom-background: #d5e5ff;
|
|
2863
|
+
--cds-slug-callout-caret-bottom-background-actions: #dae5f8;
|
|
2864
|
+
--cds-slug-callout-caret-center: #a7c7ff;
|
|
2854
2865
|
--cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
|
|
2855
2866
|
--cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
|
|
2856
2867
|
--cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
|
|
2857
2868
|
--cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
|
|
2858
2869
|
--cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
|
|
2859
2870
|
--cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
|
|
2871
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
|
|
2872
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
|
|
2860
2873
|
--cds-slug-hollow-hover: #474747;
|
|
2861
2874
|
--cds-support-caution-major: #ff832b;
|
|
2862
2875
|
--cds-support-caution-minor: #f1c21b;
|
|
@@ -2953,9 +2966,16 @@ em {
|
|
|
2953
2966
|
.cds--g10 {
|
|
2954
2967
|
background-color: var(--cds-background);
|
|
2955
2968
|
color: var(--cds-text-primary);
|
|
2969
|
+
--cds-ai-aura-end: rgba(255, 255, 255, 0);
|
|
2970
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
|
2971
|
+
--cds-ai-border-end: #d0e2ff;
|
|
2972
|
+
--cds-ai-border-start: #78a9ff;
|
|
2973
|
+
--cds-ai-border-strong: #4589ff;
|
|
2974
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
|
2956
2975
|
--cds-ai-gradient-end: rgba(255, 255, 255, 0);
|
|
2957
2976
|
--cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
|
|
2958
2977
|
--cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
|
|
2978
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
|
2959
2979
|
--cds-background: #f4f4f4;
|
|
2960
2980
|
--cds-background-active: rgba(141, 141, 141, 0.5);
|
|
2961
2981
|
--cds-background-brand: #0f62fe;
|
|
@@ -3041,16 +3061,22 @@ em {
|
|
|
3041
3061
|
--cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
|
|
3042
3062
|
--cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
|
|
3043
3063
|
--cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
|
|
3044
|
-
--cds-slug-callout-aura-start: rgba(
|
|
3064
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
|
3045
3065
|
--cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
|
|
3046
3066
|
--cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
|
|
3047
3067
|
--cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
|
|
3068
|
+
--cds-slug-callout-caret-bottom: #d0e2ff;
|
|
3069
|
+
--cds-slug-callout-caret-bottom-background: #ccdbf8;
|
|
3070
|
+
--cds-slug-callout-caret-bottom-background-actions: #d2dcee;
|
|
3071
|
+
--cds-slug-callout-caret-center: #a7c7ff;
|
|
3048
3072
|
--cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
|
|
3049
3073
|
--cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
|
|
3050
3074
|
--cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
|
|
3051
3075
|
--cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
|
|
3052
3076
|
--cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
|
|
3053
3077
|
--cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
|
|
3078
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
|
|
3079
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
|
|
3054
3080
|
--cds-slug-hollow-hover: #474747;
|
|
3055
3081
|
--cds-support-caution-major: #ff832b;
|
|
3056
3082
|
--cds-support-caution-minor: #f1c21b;
|
|
@@ -3147,8 +3173,15 @@ em {
|
|
|
3147
3173
|
.cds--g90 {
|
|
3148
3174
|
background-color: var(--cds-background);
|
|
3149
3175
|
color: var(--cds-text-primary);
|
|
3176
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
|
3177
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
|
3178
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
|
3179
|
+
--cds-ai-border-start: #4589ff;
|
|
3180
|
+
--cds-ai-border-strong: #78a9ff;
|
|
3181
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
|
3150
3182
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
|
3151
3183
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
|
3184
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
|
3152
3185
|
--cds-background: #262626;
|
|
3153
3186
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
|
3154
3187
|
--cds-background-brand: #0f62fe;
|
|
@@ -3230,18 +3263,24 @@ em {
|
|
|
3230
3263
|
--cds-skeleton-element: #525252;
|
|
3231
3264
|
--cds-slug-background: #c6c6c6;
|
|
3232
3265
|
--cds-slug-background-hover: #e0e0e0;
|
|
3233
|
-
--cds-slug-callout-aura-end: rgba(
|
|
3266
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
|
3234
3267
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
|
3235
3268
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
|
3236
|
-
--cds-slug-callout-aura-start: rgba(
|
|
3269
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
|
3237
3270
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
|
3238
3271
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
|
3272
|
+
--cds-slug-callout-caret-bottom: #465060;
|
|
3273
|
+
--cds-slug-callout-caret-bottom-background: #2d3f5c;
|
|
3274
|
+
--cds-slug-callout-caret-bottom-background-actions: #253042;
|
|
3275
|
+
--cds-slug-callout-caret-center: #456fb5;
|
|
3239
3276
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
|
3240
3277
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
|
3241
3278
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
|
3242
3279
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
|
3243
3280
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
|
3244
3281
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
|
3282
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
|
3283
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
|
3245
3284
|
--cds-slug-hollow-hover: #b5b5b5;
|
|
3246
3285
|
--cds-support-caution-major: #ff832b;
|
|
3247
3286
|
--cds-support-caution-minor: #f1c21b;
|
|
@@ -3337,8 +3376,15 @@ em {
|
|
|
3337
3376
|
.cds--g100 {
|
|
3338
3377
|
background-color: var(--cds-background);
|
|
3339
3378
|
color: var(--cds-text-primary);
|
|
3379
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
|
3380
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
|
3381
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
|
3382
|
+
--cds-ai-border-start: #4589ff;
|
|
3383
|
+
--cds-ai-border-strong: #78a9ff;
|
|
3384
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
|
3340
3385
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
|
3341
3386
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
|
3387
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
|
3342
3388
|
--cds-background: #161616;
|
|
3343
3389
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
|
3344
3390
|
--cds-background-brand: #0f62fe;
|
|
@@ -3420,18 +3466,24 @@ em {
|
|
|
3420
3466
|
--cds-skeleton-element: #393939;
|
|
3421
3467
|
--cds-slug-background: #c6c6c6;
|
|
3422
3468
|
--cds-slug-background-hover: #e0e0e0;
|
|
3423
|
-
--cds-slug-callout-aura-end: rgba(
|
|
3469
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
|
3424
3470
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
|
3425
3471
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
|
3426
|
-
--cds-slug-callout-aura-start: rgba(
|
|
3472
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
|
3427
3473
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
|
3428
3474
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
|
3475
|
+
--cds-slug-callout-caret-bottom: #3d4655;
|
|
3476
|
+
--cds-slug-callout-caret-bottom-background: #213250;
|
|
3477
|
+
--cds-slug-callout-caret-bottom-background-actions: #192436;
|
|
3478
|
+
--cds-slug-callout-caret-center: #3f68af;
|
|
3429
3479
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
|
3430
3480
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
|
3431
3481
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
|
3432
3482
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
|
3433
3483
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
|
3434
3484
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
|
3485
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
|
3486
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
|
3435
3487
|
--cds-slug-hollow-hover: #b5b5b5;
|
|
3436
3488
|
--cds-support-caution-major: #ff832b;
|
|
3437
3489
|
--cds-support-caution-minor: #f1c21b;
|
|
@@ -4169,15 +4221,15 @@ li.cds--accordion__item--disabled:last-of-type {
|
|
|
4169
4221
|
}
|
|
4170
4222
|
|
|
4171
4223
|
.cds--popover--left-top > .cds--popover > .cds--popover-content {
|
|
4172
|
-
inset-block-start:
|
|
4224
|
+
inset-block-start: 50%;
|
|
4173
4225
|
inset-inline-end: 100%;
|
|
4174
|
-
transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)
|
|
4226
|
+
transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px));
|
|
4175
4227
|
}
|
|
4176
4228
|
|
|
4177
4229
|
.cds--popover--left-bottom > .cds--popover > .cds--popover-content {
|
|
4178
|
-
inset-block-end:
|
|
4230
|
+
inset-block-end: 50%;
|
|
4179
4231
|
inset-inline-end: 100%;
|
|
4180
|
-
transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)
|
|
4232
|
+
transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
|
|
4181
4233
|
}
|
|
4182
4234
|
|
|
4183
4235
|
[dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-content,
|
|
@@ -7466,8 +7518,9 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
7466
7518
|
transform: translateY(-50%);
|
|
7467
7519
|
}
|
|
7468
7520
|
|
|
7469
|
-
.cds--text-input__field-wrapper--slug .cds--text-input {
|
|
7470
|
-
background-image: linear-gradient(
|
|
7521
|
+
.cds--text-input__field-wrapper--slug .cds--text-input:not(:has(~ .cds--slug--revert)) {
|
|
7522
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
7523
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
7471
7524
|
padding-inline-end: 2.5rem;
|
|
7472
7525
|
}
|
|
7473
7526
|
|
|
@@ -8679,8 +8732,13 @@ fieldset[disabled] .cds--form__helper-text {
|
|
|
8679
8732
|
transform: translateY(-50%);
|
|
8680
8733
|
}
|
|
8681
8734
|
|
|
8682
|
-
.cds--list-box__wrapper--slug .cds--list-box {
|
|
8683
|
-
background-image: linear-gradient(
|
|
8735
|
+
.cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
|
|
8736
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
8737
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
8738
|
+
}
|
|
8739
|
+
|
|
8740
|
+
.cds--list-box__wrapper--slug .cds--list-box input[role=combobox] {
|
|
8741
|
+
border-block-end-color: transparent;
|
|
8684
8742
|
}
|
|
8685
8743
|
|
|
8686
8744
|
.cds--list-box__wrapper--slug .cds--list-box__field,
|
|
@@ -10542,13 +10600,15 @@ tr.cds--data-table--selected:last-of-type td {
|
|
|
10542
10600
|
}
|
|
10543
10601
|
|
|
10544
10602
|
.cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
|
|
10545
|
-
background-image: linear-gradient(90deg, var(--cds-ai-
|
|
10603
|
+
background-image: linear-gradient(90deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
10604
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
10546
10605
|
background-attachment: fixed;
|
|
10547
10606
|
}
|
|
10548
10607
|
|
|
10549
10608
|
.cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
|
|
10550
10609
|
.cds--data-table thead th:has(> .cds--table-header-label--slug) {
|
|
10551
|
-
background-image: linear-gradient(180deg, var(--cds-ai-
|
|
10610
|
+
background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
|
|
10611
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
10552
10612
|
}
|
|
10553
10613
|
|
|
10554
10614
|
.cds--table-column-slug .cds--slug {
|
|
@@ -13067,8 +13127,9 @@ th .cds--table-sort__flex {
|
|
|
13067
13127
|
transform: translateY(-50%);
|
|
13068
13128
|
}
|
|
13069
13129
|
|
|
13070
|
-
.cds--date-picker-input__wrapper--slug .cds--date-picker__input {
|
|
13071
|
-
background-image: linear-gradient(
|
|
13130
|
+
.cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(:has(~ .cds--slug--revert)) {
|
|
13131
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
13132
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
13072
13133
|
padding-inline-end: 4rem;
|
|
13073
13134
|
}
|
|
13074
13135
|
|
|
@@ -14792,8 +14853,13 @@ button.cds--dropdown-text:focus {
|
|
|
14792
14853
|
inset-block-start: 2.6875rem;
|
|
14793
14854
|
}
|
|
14794
14855
|
|
|
14795
|
-
.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug {
|
|
14796
|
-
background-image: linear-gradient(
|
|
14856
|
+
.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(~ .cds--slug--revert)) {
|
|
14857
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
14858
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
14859
|
+
}
|
|
14860
|
+
|
|
14861
|
+
.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(.cds--date-picker__input--invalid) {
|
|
14862
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
14797
14863
|
}
|
|
14798
14864
|
|
|
14799
14865
|
.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
|
|
@@ -15348,12 +15414,17 @@ button.cds--dropdown-text:focus {
|
|
|
15348
15414
|
padding-inline-end: 9rem;
|
|
15349
15415
|
}
|
|
15350
15416
|
|
|
15351
|
-
.cds--number__input-wrapper--slug input[type=number],
|
|
15417
|
+
.cds--number__input-wrapper--slug input[type=number]:not(:has(~ .cds--slug--revert)),
|
|
15352
15418
|
.cds--number__input-wrapper--slug input[type=number]:disabled {
|
|
15353
|
-
background-image: linear-gradient(
|
|
15419
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
15420
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
15354
15421
|
padding-inline-end: 7rem;
|
|
15355
15422
|
}
|
|
15356
15423
|
|
|
15424
|
+
.cds--number__input-wrapper--slug .cds--number__control-btn {
|
|
15425
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
15426
|
+
}
|
|
15427
|
+
|
|
15357
15428
|
.cds--number.cds--skeleton {
|
|
15358
15429
|
position: relative;
|
|
15359
15430
|
padding: 0;
|
|
@@ -15605,8 +15676,9 @@ button.cds--dropdown-text:focus {
|
|
|
15605
15676
|
padding-inline-end: 7.5rem;
|
|
15606
15677
|
}
|
|
15607
15678
|
|
|
15608
|
-
.cds--number-input--fluid .cds--number__input-wrapper--slug {
|
|
15609
|
-
background-image: linear-gradient(
|
|
15679
|
+
.cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(~ .cds--slug--revert)) {
|
|
15680
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
15681
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
15610
15682
|
}
|
|
15611
15683
|
|
|
15612
15684
|
.cds--search--fluid {
|
|
@@ -15983,8 +16055,9 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
15983
16055
|
transform: translateY(-50%);
|
|
15984
16056
|
}
|
|
15985
16057
|
|
|
15986
|
-
.cds--select--slug .cds--select-input {
|
|
15987
|
-
background-image: linear-gradient(
|
|
16058
|
+
.cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) {
|
|
16059
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
16060
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
15988
16061
|
padding-inline-end: 4rem;
|
|
15989
16062
|
}
|
|
15990
16063
|
|
|
@@ -16294,8 +16367,9 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
16294
16367
|
transform: translate(0);
|
|
16295
16368
|
}
|
|
16296
16369
|
|
|
16297
|
-
.cds--text-area__wrapper--slug .cds--text-area {
|
|
16298
|
-
background-image: linear-gradient(
|
|
16370
|
+
.cds--text-area__wrapper--slug .cds--text-area:not(:has(~ .cds--slug--revert)) {
|
|
16371
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
16372
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
16299
16373
|
padding-inline-end: 2.5rem;
|
|
16300
16374
|
}
|
|
16301
16375
|
|
|
@@ -16519,8 +16593,9 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
16519
16593
|
inline-size: 80%;
|
|
16520
16594
|
}
|
|
16521
16595
|
|
|
16522
|
-
.cds--text-area--fluid .cds--text-area__wrapper--slug {
|
|
16523
|
-
background-image: linear-gradient(
|
|
16596
|
+
.cds--text-area--fluid .cds--text-area__wrapper--slug:not(:has(~ .cds--slug--revert)) {
|
|
16597
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
|
16598
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
|
16524
16599
|
}
|
|
16525
16600
|
|
|
16526
16601
|
.cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
|
|
@@ -17487,12 +17562,12 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
17487
17562
|
}
|
|
17488
17563
|
|
|
17489
17564
|
.cds--modal--slug .cds--modal-container {
|
|
17490
|
-
background: linear-gradient(
|
|
17565
|
+
background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
17491
17566
|
background-color: var(--cds-layer);
|
|
17492
17567
|
}
|
|
17493
17568
|
|
|
17494
17569
|
.cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
|
|
17495
|
-
background: linear-gradient(
|
|
17570
|
+
background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
17496
17571
|
background-color: var(--cds-layer);
|
|
17497
17572
|
}
|
|
17498
17573
|
|
|
@@ -17502,8 +17577,8 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
17502
17577
|
inset-inline-end: 0;
|
|
17503
17578
|
}
|
|
17504
17579
|
|
|
17505
|
-
.cds--modal-header > .cds--slug:has(+ .cds--modal-close),
|
|
17506
|
-
.cds--modal-header > .cds--modal-close ~ .cds--slug,
|
|
17580
|
+
.cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
|
|
17581
|
+
.cds--modal-header > .cds--modal-close-button ~ .cds--slug,
|
|
17507
17582
|
.cds--modal--slug .cds--modal-container-body > .cds--slug {
|
|
17508
17583
|
inset-inline-end: 3rem;
|
|
17509
17584
|
}
|
|
@@ -20692,33 +20767,184 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
20692
20767
|
}
|
|
20693
20768
|
|
|
20694
20769
|
.cds--slug.cds--slug--enabled .cds--slug-content {
|
|
20695
|
-
background: linear-gradient(
|
|
20696
|
-
border: 1px solid
|
|
20697
|
-
border-radius:
|
|
20698
|
-
-
|
|
20699
|
-
backdrop-filter: blur(25px);
|
|
20700
|
-
box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
|
|
20770
|
+
background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
20771
|
+
border: 1px solid transparent;
|
|
20772
|
+
border-radius: 0.5rem;
|
|
20773
|
+
box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
|
|
20701
20774
|
color: var(--cds-text-primary, #161616);
|
|
20702
20775
|
min-inline-size: 17.5rem;
|
|
20703
20776
|
}
|
|
20704
20777
|
|
|
20705
20778
|
.cds--slug.cds--slug--enabled > .cds--toggletip > .cds--popover > .cds--popover-caret {
|
|
20706
|
-
background:
|
|
20779
|
+
background: transparent;
|
|
20780
|
+
-webkit-clip-path: none;
|
|
20781
|
+
clip-path: none;
|
|
20782
|
+
}
|
|
20783
|
+
|
|
20784
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20785
|
+
.cds--popover--top-right,
|
|
20786
|
+
.cds--popover--top-left,
|
|
20787
|
+
.cds--popover--bottom,
|
|
20788
|
+
.cds--popover--bottom-right,
|
|
20789
|
+
.cds--popover--bottom-left,
|
|
20790
|
+
.cds--popover--left,
|
|
20791
|
+
.cds--popover--left-top,
|
|
20792
|
+
.cds--popover--left-bottom,
|
|
20793
|
+
.cds--popover--right,
|
|
20794
|
+
.cds--popover--right-top,
|
|
20795
|
+
.cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::before {
|
|
20796
|
+
position: absolute;
|
|
20797
|
+
display: block;
|
|
20798
|
+
border: 1px solid var(--cds-ai-border-start, #78a9ff);
|
|
20799
|
+
background: var(--cds-background, #ffffff);
|
|
20800
|
+
block-size: 0.75rem;
|
|
20801
|
+
-webkit-clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
|
|
20802
|
+
clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
|
|
20803
|
+
content: "";
|
|
20804
|
+
inline-size: 0.75rem;
|
|
20805
|
+
transform: rotate(45deg);
|
|
20806
|
+
}
|
|
20807
|
+
|
|
20808
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20809
|
+
.cds--popover--top-right,
|
|
20810
|
+
.cds--popover--top-left,
|
|
20811
|
+
.cds--popover--bottom,
|
|
20812
|
+
.cds--popover--bottom-right,
|
|
20813
|
+
.cds--popover--bottom-left,
|
|
20814
|
+
.cds--popover--left,
|
|
20815
|
+
.cds--popover--left-top,
|
|
20816
|
+
.cds--popover--left-bottom,
|
|
20817
|
+
.cds--popover--right,
|
|
20818
|
+
.cds--popover--right-top,
|
|
20819
|
+
.cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
|
|
20820
|
+
position: absolute;
|
|
20821
|
+
display: block;
|
|
20822
|
+
background: var(--cds-background, #ffffff);
|
|
20823
|
+
block-size: 0.875rem;
|
|
20824
|
+
content: "";
|
|
20825
|
+
inline-size: 0.125rem;
|
|
20826
|
+
}
|
|
20827
|
+
|
|
20828
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20829
|
+
.cds--popover--top-right,
|
|
20830
|
+
.cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
|
|
20831
|
+
inset-block-end: 0.0625rem;
|
|
20832
|
+
transform: rotate(-135deg);
|
|
20833
|
+
}
|
|
20834
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20835
|
+
.cds--popover--top-right,
|
|
20836
|
+
.cds--popover--top-left) > .cds--popover > .cds--popover-caret::after {
|
|
20837
|
+
background: var(--cds-slug-callout-caret-bottom-background, #d5e5ff);
|
|
20838
|
+
block-size: 0.125rem;
|
|
20839
|
+
border-end-end-radius: 50%;
|
|
20840
|
+
border-end-start-radius: 50%;
|
|
20841
|
+
inline-size: 0.875rem;
|
|
20842
|
+
inset-block-start: -0.125rem;
|
|
20843
|
+
inset-inline-start: -0.0625rem;
|
|
20844
|
+
}
|
|
20845
|
+
|
|
20846
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20847
|
+
.cds--popover--top-right,
|
|
20848
|
+
.cds--popover--top-left) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after {
|
|
20849
|
+
display: none;
|
|
20850
|
+
}
|
|
20851
|
+
|
|
20852
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
|
|
20853
|
+
.cds--popover--right-bottom,
|
|
20854
|
+
.cds--popover--right-top) > .cds--popover > .cds--popover-caret::before {
|
|
20855
|
+
inset-inline-start: 0.0625rem;
|
|
20856
|
+
transform: rotate(-45deg);
|
|
20857
|
+
}
|
|
20858
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
|
|
20859
|
+
.cds--popover--right-bottom,
|
|
20860
|
+
.cds--popover--right-top) > .cds--popover > .cds--popover-caret::after {
|
|
20861
|
+
border-end-start-radius: 50%;
|
|
20862
|
+
border-start-start-radius: 50%;
|
|
20863
|
+
inset-block-start: -0.0625rem;
|
|
20864
|
+
inset-inline-start: 0.375rem;
|
|
20865
|
+
}
|
|
20866
|
+
|
|
20867
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
|
|
20868
|
+
.cds--popover--bottom-left,
|
|
20869
|
+
.cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::before {
|
|
20870
|
+
inset-block-start: 0.0625rem;
|
|
20871
|
+
transform: rotate(45deg);
|
|
20872
|
+
}
|
|
20873
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
|
|
20874
|
+
.cds--popover--bottom-left,
|
|
20875
|
+
.cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::after {
|
|
20876
|
+
block-size: 0.125rem;
|
|
20877
|
+
border-start-end-radius: 50%;
|
|
20878
|
+
border-start-start-radius: 50%;
|
|
20879
|
+
inline-size: 0.875rem;
|
|
20880
|
+
inset-block-end: -0.15625rem;
|
|
20881
|
+
inset-inline-start: -0.0625rem;
|
|
20882
|
+
}
|
|
20883
|
+
|
|
20884
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
|
|
20885
|
+
.cds--popover--left-bottom,
|
|
20886
|
+
.cds--popover--left-top) > .cds--popover > .cds--popover-caret::before {
|
|
20887
|
+
inset-inline-end: 0.0625rem;
|
|
20888
|
+
transform: rotate(135deg);
|
|
20889
|
+
}
|
|
20890
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
|
|
20891
|
+
.cds--popover--left-bottom,
|
|
20892
|
+
.cds--popover--left-top) > .cds--popover > .cds--popover-caret::after {
|
|
20893
|
+
border-end-end-radius: 50%;
|
|
20894
|
+
border-start-end-radius: 50%;
|
|
20895
|
+
inset-block-start: -0.0625rem;
|
|
20896
|
+
inset-inline-start: -0.125rem;
|
|
20897
|
+
}
|
|
20898
|
+
|
|
20899
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
|
|
20900
|
+
.cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
|
|
20901
|
+
background: transparent;
|
|
20902
|
+
}
|
|
20903
|
+
|
|
20904
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
|
|
20905
|
+
.cds--popover--right-bottom,
|
|
20906
|
+
.cds--popover--top,
|
|
20907
|
+
.cds--popover--top-right,
|
|
20908
|
+
.cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
|
|
20909
|
+
border-color: var(--cds-slug-callout-caret-bottom, #d0e2ff);
|
|
20910
|
+
background: var(--cds-slug-callout-caret-bottom-background, #d5e5ff);
|
|
20911
|
+
}
|
|
20912
|
+
|
|
20913
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
|
|
20914
|
+
.cds--popover--right-bottom,
|
|
20915
|
+
.cds--popover--top,
|
|
20916
|
+
.cds--popover--top-right,
|
|
20917
|
+
.cds--popover--top-left) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before {
|
|
20918
|
+
background: var(--cds-slug-callout-caret-bottom-background-actions, #dae5f8);
|
|
20919
|
+
}
|
|
20920
|
+
|
|
20921
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
|
|
20922
|
+
.cds--popover--right) > .cds--popover > .cds--popover-caret::before {
|
|
20923
|
+
border-color: var(--cds-slug-callout-caret-center, #a7c7ff);
|
|
20707
20924
|
}
|
|
20708
20925
|
|
|
20709
20926
|
.cds--slug.cds--slug--enabled .cds--toggletip-content {
|
|
20710
|
-
max-inline-size: 20.875rem;
|
|
20711
20927
|
padding-block-end: 5rem;
|
|
20712
|
-
padding-block-start:
|
|
20713
|
-
padding-inline:
|
|
20928
|
+
padding-block-start: 1.5rem;
|
|
20929
|
+
padding-inline: 1.5rem;
|
|
20930
|
+
}
|
|
20931
|
+
|
|
20932
|
+
.cds--slug.cds--slug--enabled .cds--slug-content--with-actions .cds--toggletip-content {
|
|
20933
|
+
max-inline-size: 20.875rem;
|
|
20934
|
+
}
|
|
20935
|
+
|
|
20936
|
+
.cds--slug.cds--slug--enabled .cds--slug-content:not(.cds--slug-content--with-actions) .cds--toggletip-content {
|
|
20937
|
+
max-inline-size: 20rem;
|
|
20714
20938
|
}
|
|
20715
20939
|
|
|
20716
20940
|
.cds--slug.cds--slug--enabled .cds--slug-actions {
|
|
20717
20941
|
position: absolute;
|
|
20718
20942
|
justify-content: flex-end;
|
|
20719
|
-
|
|
20720
|
-
|
|
20721
|
-
|
|
20943
|
+
-webkit-backdrop-filter: blur(85px);
|
|
20944
|
+
backdrop-filter: blur(85px);
|
|
20945
|
+
background: rgba(0, 0, 0, 0.01);
|
|
20946
|
+
border-end-end-radius: 0.5rem;
|
|
20947
|
+
border-end-start-radius: 0.5rem;
|
|
20722
20948
|
-moz-column-gap: 0;
|
|
20723
20949
|
column-gap: 0;
|
|
20724
20950
|
inline-size: 100%;
|
|
@@ -20733,7 +20959,7 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
20733
20959
|
|
|
20734
20960
|
.cds--slug.cds--slug--enabled .cds--slug-actions .cds--btn--primary {
|
|
20735
20961
|
order: 1;
|
|
20736
|
-
border-end-end-radius:
|
|
20962
|
+
border-end-end-radius: 0.4375rem;
|
|
20737
20963
|
}
|
|
20738
20964
|
|
|
20739
20965
|
.cds--slug.cds--slug--revert {
|
|
@@ -21951,12 +22177,12 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
21951
22177
|
}
|
|
21952
22178
|
|
|
21953
22179
|
.cds--tile--slug.cds--tile {
|
|
21954
|
-
background: linear-gradient(
|
|
22180
|
+
background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
21955
22181
|
border: 1px solid var(--cds-border-tile);
|
|
21956
22182
|
}
|
|
21957
22183
|
|
|
21958
22184
|
.cds--tile--slug.cds--tile--expandable:hover {
|
|
21959
|
-
background: linear-gradient(
|
|
22185
|
+
background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
21960
22186
|
}
|
|
21961
22187
|
|
|
21962
22188
|
.cds--tile--slug.cds--tile--selectable::before,
|