@carbon/styles 1.48.0-rc.0 → 1.48.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/styles.css +217 -30
- package/css/styles.min.css +1 -1
- package/package.json +3 -3
- package/scss/__tests__/theme-test.js +9 -0
- package/scss/components/modal/_modal.scss +5 -2
- package/scss/components/popover/_popover.scss +4 -4
- package/scss/components/slug/_slug.scss +245 -16
- package/scss/components/toggletip/_toggletip.scss +0 -1
- package/scss/utilities/_ai-gradient.scss +13 -9
package/css/styles.css
CHANGED
|
@@ -2847,16 +2847,25 @@ em {
|
|
|
2847
2847
|
--cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
|
|
2848
2848
|
--cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
|
|
2849
2849
|
--cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
|
|
2850
|
-
--cds-slug-callout-aura-start: rgba(
|
|
2850
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
|
2851
2851
|
--cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
|
|
2852
2852
|
--cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
|
|
2853
2853
|
--cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
|
|
2854
|
+
--cds-slug-callout-border-01: #78a9ff;
|
|
2855
|
+
--cds-slug-callout-border-02: #d0e2ff;
|
|
2856
|
+
--cds-slug-callout-caret-bottom: #d0e2ff;
|
|
2857
|
+
--cds-slug-callout-caret-bottom-background: #d5e5ff;
|
|
2858
|
+
--cds-slug-callout-caret-bottom-background-actions: #dae5f8;
|
|
2859
|
+
--cds-slug-callout-caret-center: #a7c7ff;
|
|
2854
2860
|
--cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
|
|
2855
2861
|
--cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
|
|
2856
2862
|
--cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
|
|
2857
2863
|
--cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
|
|
2858
2864
|
--cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
|
|
2859
2865
|
--cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
|
|
2866
|
+
--cds-slug-callout-shadow-inner: rgba(69, 137, 255, 0.2);
|
|
2867
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
|
|
2868
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
|
|
2860
2869
|
--cds-slug-hollow-hover: #474747;
|
|
2861
2870
|
--cds-support-caution-major: #ff832b;
|
|
2862
2871
|
--cds-support-caution-minor: #f1c21b;
|
|
@@ -3041,16 +3050,25 @@ em {
|
|
|
3041
3050
|
--cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
|
|
3042
3051
|
--cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
|
|
3043
3052
|
--cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
|
|
3044
|
-
--cds-slug-callout-aura-start: rgba(
|
|
3053
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
|
3045
3054
|
--cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
|
|
3046
3055
|
--cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
|
|
3047
3056
|
--cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
|
|
3057
|
+
--cds-slug-callout-border-01: #78a9ff;
|
|
3058
|
+
--cds-slug-callout-border-02: #d0e2ff;
|
|
3059
|
+
--cds-slug-callout-caret-bottom: #d0e2ff;
|
|
3060
|
+
--cds-slug-callout-caret-bottom-background: #ccdbf8;
|
|
3061
|
+
--cds-slug-callout-caret-bottom-background-actions: #d2dcee;
|
|
3062
|
+
--cds-slug-callout-caret-center: #a7c7ff;
|
|
3048
3063
|
--cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
|
|
3049
3064
|
--cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
|
|
3050
3065
|
--cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
|
|
3051
3066
|
--cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
|
|
3052
3067
|
--cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
|
|
3053
3068
|
--cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
|
|
3069
|
+
--cds-slug-callout-shadow-inner: rgba(69, 137, 255, 0.2);
|
|
3070
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
|
|
3071
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
|
|
3054
3072
|
--cds-slug-hollow-hover: #474747;
|
|
3055
3073
|
--cds-support-caution-major: #ff832b;
|
|
3056
3074
|
--cds-support-caution-minor: #f1c21b;
|
|
@@ -3230,18 +3248,27 @@ em {
|
|
|
3230
3248
|
--cds-skeleton-element: #525252;
|
|
3231
3249
|
--cds-slug-background: #c6c6c6;
|
|
3232
3250
|
--cds-slug-background-hover: #e0e0e0;
|
|
3233
|
-
--cds-slug-callout-aura-end: rgba(
|
|
3251
|
+
--cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
|
|
3234
3252
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
|
3235
3253
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
|
3236
|
-
--cds-slug-callout-aura-start: rgba(
|
|
3254
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
|
3237
3255
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
|
3238
3256
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
|
3257
|
+
--cds-slug-callout-border-01: #4589ff;
|
|
3258
|
+
--cds-slug-callout-border-02: rgba(166, 200, 255, 0.25);
|
|
3259
|
+
--cds-slug-callout-caret-bottom: #465060;
|
|
3260
|
+
--cds-slug-callout-caret-bottom-background: #2d3f5c;
|
|
3261
|
+
--cds-slug-callout-caret-bottom-background-actions: #253042;
|
|
3262
|
+
--cds-slug-callout-caret-center: #456fb5;
|
|
3239
3263
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
|
3240
3264
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
|
3241
3265
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
|
3242
3266
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
|
3243
3267
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
|
3244
3268
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
|
3269
|
+
--cds-slug-callout-shadow-inner: rgba(69, 137, 255, 0.2);
|
|
3270
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
|
3271
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
|
3245
3272
|
--cds-slug-hollow-hover: #b5b5b5;
|
|
3246
3273
|
--cds-support-caution-major: #ff832b;
|
|
3247
3274
|
--cds-support-caution-minor: #f1c21b;
|
|
@@ -3420,18 +3447,27 @@ em {
|
|
|
3420
3447
|
--cds-skeleton-element: #393939;
|
|
3421
3448
|
--cds-slug-background: #c6c6c6;
|
|
3422
3449
|
--cds-slug-background-hover: #e0e0e0;
|
|
3423
|
-
--cds-slug-callout-aura-end: rgba(
|
|
3450
|
+
--cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
|
|
3424
3451
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
|
3425
3452
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
|
3426
|
-
--cds-slug-callout-aura-start: rgba(
|
|
3453
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
|
3427
3454
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
|
3428
3455
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
|
3456
|
+
--cds-slug-callout-border-01: #4589ff;
|
|
3457
|
+
--cds-slug-callout-border-02: rgba(166, 200, 255, 0.25);
|
|
3458
|
+
--cds-slug-callout-caret-bottom: #3d4655;
|
|
3459
|
+
--cds-slug-callout-caret-bottom-background: #213250;
|
|
3460
|
+
--cds-slug-callout-caret-bottom-background-actions: #192436;
|
|
3461
|
+
--cds-slug-callout-caret-center: #3f68af;
|
|
3429
3462
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
|
3430
3463
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
|
3431
3464
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
|
3432
3465
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
|
3433
3466
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
|
3434
3467
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
|
3468
|
+
--cds-slug-callout-shadow-inner: rgba(69, 137, 255, 0.2);
|
|
3469
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
|
3470
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
|
3435
3471
|
--cds-slug-hollow-hover: #b5b5b5;
|
|
3436
3472
|
--cds-support-caution-major: #ff832b;
|
|
3437
3473
|
--cds-support-caution-minor: #f1c21b;
|
|
@@ -4169,15 +4205,15 @@ li.cds--accordion__item--disabled:last-of-type {
|
|
|
4169
4205
|
}
|
|
4170
4206
|
|
|
4171
4207
|
.cds--popover--left-top > .cds--popover > .cds--popover-content {
|
|
4172
|
-
inset-block-start:
|
|
4208
|
+
inset-block-start: 50%;
|
|
4173
4209
|
inset-inline-end: 100%;
|
|
4174
|
-
transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)
|
|
4210
|
+
transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px));
|
|
4175
4211
|
}
|
|
4176
4212
|
|
|
4177
4213
|
.cds--popover--left-bottom > .cds--popover > .cds--popover-content {
|
|
4178
|
-
inset-block-end:
|
|
4214
|
+
inset-block-end: 50%;
|
|
4179
4215
|
inset-inline-end: 100%;
|
|
4180
|
-
transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)
|
|
4216
|
+
transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
|
|
4181
4217
|
}
|
|
4182
4218
|
|
|
4183
4219
|
[dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-content,
|
|
@@ -17487,12 +17523,12 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
17487
17523
|
}
|
|
17488
17524
|
|
|
17489
17525
|
.cds--modal--slug .cds--modal-container {
|
|
17490
|
-
background: linear-gradient(
|
|
17526
|
+
background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
17491
17527
|
background-color: var(--cds-layer);
|
|
17492
17528
|
}
|
|
17493
17529
|
|
|
17494
17530
|
.cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
|
|
17495
|
-
background: linear-gradient(
|
|
17531
|
+
background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
17496
17532
|
background-color: var(--cds-layer);
|
|
17497
17533
|
}
|
|
17498
17534
|
|
|
@@ -17502,8 +17538,8 @@ optgroup.cds--select-optgroup:disabled,
|
|
|
17502
17538
|
inset-inline-end: 0;
|
|
17503
17539
|
}
|
|
17504
17540
|
|
|
17505
|
-
.cds--modal-header > .cds--slug:has(+ .cds--modal-close),
|
|
17506
|
-
.cds--modal-header > .cds--modal-close ~ .cds--slug,
|
|
17541
|
+
.cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
|
|
17542
|
+
.cds--modal-header > .cds--modal-close-button ~ .cds--slug,
|
|
17507
17543
|
.cds--modal--slug .cds--modal-container-body > .cds--slug {
|
|
17508
17544
|
inset-inline-end: 3rem;
|
|
17509
17545
|
}
|
|
@@ -20692,33 +20728,184 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
20692
20728
|
}
|
|
20693
20729
|
|
|
20694
20730
|
.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);
|
|
20731
|
+
background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
20732
|
+
border: 1px solid transparent;
|
|
20733
|
+
border-radius: 0.5rem;
|
|
20734
|
+
box-shadow: inset 0 -80px 70px -65px var(--cds-slug-callout-shadow-inner, 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
20735
|
color: var(--cds-text-primary, #161616);
|
|
20702
20736
|
min-inline-size: 17.5rem;
|
|
20703
20737
|
}
|
|
20704
20738
|
|
|
20705
20739
|
.cds--slug.cds--slug--enabled > .cds--toggletip > .cds--popover > .cds--popover-caret {
|
|
20706
|
-
background:
|
|
20740
|
+
background: transparent;
|
|
20741
|
+
-webkit-clip-path: none;
|
|
20742
|
+
clip-path: none;
|
|
20743
|
+
}
|
|
20744
|
+
|
|
20745
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20746
|
+
.cds--popover--top-right,
|
|
20747
|
+
.cds--popover--top-left,
|
|
20748
|
+
.cds--popover--bottom,
|
|
20749
|
+
.cds--popover--bottom-right,
|
|
20750
|
+
.cds--popover--bottom-left,
|
|
20751
|
+
.cds--popover--left,
|
|
20752
|
+
.cds--popover--left-top,
|
|
20753
|
+
.cds--popover--left-bottom,
|
|
20754
|
+
.cds--popover--right,
|
|
20755
|
+
.cds--popover--right-top,
|
|
20756
|
+
.cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::before {
|
|
20757
|
+
position: absolute;
|
|
20758
|
+
display: block;
|
|
20759
|
+
border: 1px solid var(--cds-slug-callout-border-01, #78a9ff);
|
|
20760
|
+
background: var(--cds-background, #ffffff);
|
|
20761
|
+
block-size: 0.75rem;
|
|
20762
|
+
-webkit-clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
|
|
20763
|
+
clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
|
|
20764
|
+
content: "";
|
|
20765
|
+
inline-size: 0.75rem;
|
|
20766
|
+
transform: rotate(45deg);
|
|
20767
|
+
}
|
|
20768
|
+
|
|
20769
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20770
|
+
.cds--popover--top-right,
|
|
20771
|
+
.cds--popover--top-left,
|
|
20772
|
+
.cds--popover--bottom,
|
|
20773
|
+
.cds--popover--bottom-right,
|
|
20774
|
+
.cds--popover--bottom-left,
|
|
20775
|
+
.cds--popover--left,
|
|
20776
|
+
.cds--popover--left-top,
|
|
20777
|
+
.cds--popover--left-bottom,
|
|
20778
|
+
.cds--popover--right,
|
|
20779
|
+
.cds--popover--right-top,
|
|
20780
|
+
.cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
|
|
20781
|
+
position: absolute;
|
|
20782
|
+
display: block;
|
|
20783
|
+
background: var(--cds-background, #ffffff);
|
|
20784
|
+
block-size: 0.875rem;
|
|
20785
|
+
content: "";
|
|
20786
|
+
inline-size: 0.125rem;
|
|
20787
|
+
}
|
|
20788
|
+
|
|
20789
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20790
|
+
.cds--popover--top-right,
|
|
20791
|
+
.cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
|
|
20792
|
+
inset-block-end: 0.0625rem;
|
|
20793
|
+
transform: rotate(-135deg);
|
|
20794
|
+
}
|
|
20795
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20796
|
+
.cds--popover--top-right,
|
|
20797
|
+
.cds--popover--top-left) > .cds--popover > .cds--popover-caret::after {
|
|
20798
|
+
background: var(--cds-slug-callout-caret-bottom-background, #d5e5ff);
|
|
20799
|
+
block-size: 0.125rem;
|
|
20800
|
+
border-end-end-radius: 50%;
|
|
20801
|
+
border-end-start-radius: 50%;
|
|
20802
|
+
inline-size: 0.875rem;
|
|
20803
|
+
inset-block-start: -0.125rem;
|
|
20804
|
+
inset-inline-start: -0.0625rem;
|
|
20805
|
+
}
|
|
20806
|
+
|
|
20807
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
|
|
20808
|
+
.cds--popover--top-right,
|
|
20809
|
+
.cds--popover--top-left) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after {
|
|
20810
|
+
display: none;
|
|
20811
|
+
}
|
|
20812
|
+
|
|
20813
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
|
|
20814
|
+
.cds--popover--right-bottom,
|
|
20815
|
+
.cds--popover--right-top) > .cds--popover > .cds--popover-caret::before {
|
|
20816
|
+
inset-inline-start: 0.0625rem;
|
|
20817
|
+
transform: rotate(-45deg);
|
|
20818
|
+
}
|
|
20819
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
|
|
20820
|
+
.cds--popover--right-bottom,
|
|
20821
|
+
.cds--popover--right-top) > .cds--popover > .cds--popover-caret::after {
|
|
20822
|
+
border-end-start-radius: 50%;
|
|
20823
|
+
border-start-start-radius: 50%;
|
|
20824
|
+
inset-block-start: -0.0625rem;
|
|
20825
|
+
inset-inline-start: 0.375rem;
|
|
20826
|
+
}
|
|
20827
|
+
|
|
20828
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
|
|
20829
|
+
.cds--popover--bottom-left,
|
|
20830
|
+
.cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::before {
|
|
20831
|
+
inset-block-start: 0.0625rem;
|
|
20832
|
+
transform: rotate(45deg);
|
|
20833
|
+
}
|
|
20834
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
|
|
20835
|
+
.cds--popover--bottom-left,
|
|
20836
|
+
.cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::after {
|
|
20837
|
+
block-size: 0.125rem;
|
|
20838
|
+
border-start-end-radius: 50%;
|
|
20839
|
+
border-start-start-radius: 50%;
|
|
20840
|
+
inline-size: 0.875rem;
|
|
20841
|
+
inset-block-end: -0.15625rem;
|
|
20842
|
+
inset-inline-start: -0.0625rem;
|
|
20843
|
+
}
|
|
20844
|
+
|
|
20845
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
|
|
20846
|
+
.cds--popover--left-bottom,
|
|
20847
|
+
.cds--popover--left-top) > .cds--popover > .cds--popover-caret::before {
|
|
20848
|
+
inset-inline-end: 0.0625rem;
|
|
20849
|
+
transform: rotate(135deg);
|
|
20850
|
+
}
|
|
20851
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
|
|
20852
|
+
.cds--popover--left-bottom,
|
|
20853
|
+
.cds--popover--left-top) > .cds--popover > .cds--popover-caret::after {
|
|
20854
|
+
border-end-end-radius: 50%;
|
|
20855
|
+
border-start-end-radius: 50%;
|
|
20856
|
+
inset-block-start: -0.0625rem;
|
|
20857
|
+
inset-inline-start: -0.125rem;
|
|
20858
|
+
}
|
|
20859
|
+
|
|
20860
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
|
|
20861
|
+
.cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
|
|
20862
|
+
background: transparent;
|
|
20863
|
+
}
|
|
20864
|
+
|
|
20865
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
|
|
20866
|
+
.cds--popover--right-bottom,
|
|
20867
|
+
.cds--popover--top,
|
|
20868
|
+
.cds--popover--top-right,
|
|
20869
|
+
.cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
|
|
20870
|
+
border-color: var(--cds-slug-callout-caret-bottom, #d0e2ff);
|
|
20871
|
+
background: var(--cds-slug-callout-caret-bottom-background, #d5e5ff);
|
|
20872
|
+
}
|
|
20873
|
+
|
|
20874
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
|
|
20875
|
+
.cds--popover--right-bottom,
|
|
20876
|
+
.cds--popover--top,
|
|
20877
|
+
.cds--popover--top-right,
|
|
20878
|
+
.cds--popover--top-left) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before {
|
|
20879
|
+
background: var(--cds-slug-callout-caret-bottom-background-actions, #dae5f8);
|
|
20880
|
+
}
|
|
20881
|
+
|
|
20882
|
+
.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
|
|
20883
|
+
.cds--popover--right) > .cds--popover > .cds--popover-caret::before {
|
|
20884
|
+
border-color: var(--cds-slug-callout-caret-center, #a7c7ff);
|
|
20707
20885
|
}
|
|
20708
20886
|
|
|
20709
20887
|
.cds--slug.cds--slug--enabled .cds--toggletip-content {
|
|
20710
|
-
max-inline-size: 20.875rem;
|
|
20711
20888
|
padding-block-end: 5rem;
|
|
20712
|
-
padding-block-start:
|
|
20713
|
-
padding-inline:
|
|
20889
|
+
padding-block-start: 1.5rem;
|
|
20890
|
+
padding-inline: 1.5rem;
|
|
20891
|
+
}
|
|
20892
|
+
|
|
20893
|
+
.cds--slug.cds--slug--enabled .cds--slug-content--with-actions .cds--toggletip-content {
|
|
20894
|
+
max-inline-size: 20.875rem;
|
|
20895
|
+
}
|
|
20896
|
+
|
|
20897
|
+
.cds--slug.cds--slug--enabled .cds--slug-content:not(.cds--slug-content--with-actions) .cds--toggletip-content {
|
|
20898
|
+
max-inline-size: 20rem;
|
|
20714
20899
|
}
|
|
20715
20900
|
|
|
20716
20901
|
.cds--slug.cds--slug--enabled .cds--slug-actions {
|
|
20717
20902
|
position: absolute;
|
|
20718
20903
|
justify-content: flex-end;
|
|
20719
|
-
|
|
20720
|
-
|
|
20721
|
-
|
|
20904
|
+
-webkit-backdrop-filter: blur(85px);
|
|
20905
|
+
backdrop-filter: blur(85px);
|
|
20906
|
+
background: rgba(0, 0, 0, 0.01);
|
|
20907
|
+
border-end-end-radius: 0.5rem;
|
|
20908
|
+
border-end-start-radius: 0.5rem;
|
|
20722
20909
|
-moz-column-gap: 0;
|
|
20723
20910
|
column-gap: 0;
|
|
20724
20911
|
inline-size: 100%;
|
|
@@ -20733,7 +20920,7 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
20733
20920
|
|
|
20734
20921
|
.cds--slug.cds--slug--enabled .cds--slug-actions .cds--btn--primary {
|
|
20735
20922
|
order: 1;
|
|
20736
|
-
border-end-end-radius:
|
|
20923
|
+
border-end-end-radius: 0.4375rem;
|
|
20737
20924
|
}
|
|
20738
20925
|
|
|
20739
20926
|
.cds--slug.cds--slug--revert {
|
|
@@ -21951,12 +22138,12 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
21951
22138
|
}
|
|
21952
22139
|
|
|
21953
22140
|
.cds--tile--slug.cds--tile {
|
|
21954
|
-
background: linear-gradient(
|
|
22141
|
+
background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
21955
22142
|
border: 1px solid var(--cds-border-tile);
|
|
21956
22143
|
}
|
|
21957
22144
|
|
|
21958
22145
|
.cds--tile--slug.cds--tile--expandable:hover {
|
|
21959
|
-
background: linear-gradient(
|
|
22146
|
+
background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
|
21960
22147
|
}
|
|
21961
22148
|
|
|
21962
22149
|
.cds--tile--slug.cds--tile--selectable::before,
|