@carbon/styles 1.51.0-rc.0 → 1.51.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 +51 -0
- package/css/styles.min.css +1 -1
- package/package.json +3 -3
- package/scss/__tests__/theme-test.js +2 -0
- package/scss/components/chat-button/_chat-button.scss +4 -0
- package/scss/components/skeleton-styles/_ai-skeleton-styles.scss +66 -0
- package/scss/components/skeleton-styles/_index.scss +3 -0
package/css/styles.css
CHANGED
|
@@ -2774,6 +2774,8 @@ em {
|
|
|
2774
2774
|
--cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
|
|
2775
2775
|
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
|
2776
2776
|
--cds-ai-overlay: rgba(0, 17, 65, 0.5);
|
|
2777
|
+
--cds-ai-skeleton-background: #b8d3ff;
|
|
2778
|
+
--cds-ai-skeleton-element-background: #001141;
|
|
2777
2779
|
--cds-background: #ffffff;
|
|
2778
2780
|
--cds-background-active: rgba(141, 141, 141, 0.5);
|
|
2779
2781
|
--cds-background-brand: #0f62fe;
|
|
@@ -2995,6 +2997,8 @@ em {
|
|
|
2995
2997
|
--cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
|
|
2996
2998
|
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
|
2997
2999
|
--cds-ai-overlay: rgba(0, 17, 65, 0.5);
|
|
3000
|
+
--cds-ai-skeleton-background: #b8d3ff;
|
|
3001
|
+
--cds-ai-skeleton-element-background: #001141;
|
|
2998
3002
|
--cds-background: #f4f4f4;
|
|
2999
3003
|
--cds-background-active: rgba(141, 141, 141, 0.5);
|
|
3000
3004
|
--cds-background-brand: #0f62fe;
|
|
@@ -3215,6 +3219,8 @@ em {
|
|
|
3215
3219
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
|
3216
3220
|
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
|
3217
3221
|
--cds-ai-overlay: rgba(0, 17, 65, 0.5);
|
|
3222
|
+
--cds-ai-skeleton-background: #0053ff;
|
|
3223
|
+
--cds-ai-skeleton-element-background: #001141;
|
|
3218
3224
|
--cds-background: #262626;
|
|
3219
3225
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
|
3220
3226
|
--cds-background-brand: #0f62fe;
|
|
@@ -3432,6 +3438,8 @@ em {
|
|
|
3432
3438
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
|
3433
3439
|
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
|
3434
3440
|
--cds-ai-overlay: rgba(0, 17, 65, 0.5);
|
|
3441
|
+
--cds-ai-skeleton-background: #0053ff;
|
|
3442
|
+
--cds-ai-skeleton-element-background: #001141;
|
|
3435
3443
|
--cds-background: #161616;
|
|
3436
3444
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
|
3437
3445
|
--cds-background-brand: #0f62fe;
|
|
@@ -5644,6 +5652,10 @@ a.cds--overflow-menu-options__btn::before {
|
|
|
5644
5652
|
border-radius: 1.5rem;
|
|
5645
5653
|
}
|
|
5646
5654
|
|
|
5655
|
+
.cds--chat-btn:not(.cds--chat-btn--with-icon) {
|
|
5656
|
+
padding-inline-end: 0.9375rem;
|
|
5657
|
+
}
|
|
5658
|
+
|
|
5647
5659
|
.cds--chat-btn.cds--btn--md {
|
|
5648
5660
|
border-radius: 1.25rem;
|
|
5649
5661
|
}
|
|
@@ -20083,6 +20095,14 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
20083
20095
|
inset-inline-start: 0;
|
|
20084
20096
|
}
|
|
20085
20097
|
|
|
20098
|
+
@keyframes ai-skeleton-animation {
|
|
20099
|
+
0% {
|
|
20100
|
+
transform: translateX(-100%);
|
|
20101
|
+
}
|
|
20102
|
+
100% {
|
|
20103
|
+
transform: translateX(100%);
|
|
20104
|
+
}
|
|
20105
|
+
}
|
|
20086
20106
|
.cds--icon--skeleton {
|
|
20087
20107
|
position: relative;
|
|
20088
20108
|
padding: 0;
|
|
@@ -20179,6 +20199,37 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
|
20179
20199
|
block-size: 1.5rem;
|
|
20180
20200
|
}
|
|
20181
20201
|
|
|
20202
|
+
.cds--skeleton__text--ai,
|
|
20203
|
+
.cds--skeleton__placeholder--ai,
|
|
20204
|
+
.cds--skeleton__icon--ai {
|
|
20205
|
+
overflow: hidden;
|
|
20206
|
+
background: var(--cds-ai-skeleton-background, #b8d3ff);
|
|
20207
|
+
}
|
|
20208
|
+
|
|
20209
|
+
.cds--skeleton__text--ai::before,
|
|
20210
|
+
.cds--skeleton__placeholder--ai::before,
|
|
20211
|
+
.cds--skeleton__icon--ai::before {
|
|
20212
|
+
animation: 1250ms ease-in-out ai-skeleton-animation infinite;
|
|
20213
|
+
background: linear-gradient(to right, rgba(0, 17, 65, 0) 0%, rgba(0, 17, 65, 0.5) 50%, rgba(0, 17, 65, 0) 100%);
|
|
20214
|
+
}
|
|
20215
|
+
|
|
20216
|
+
.cds--skeleton__placeholder--ai::before,
|
|
20217
|
+
.cds--skeleton__icon--ai::before {
|
|
20218
|
+
inline-size: 200%;
|
|
20219
|
+
}
|
|
20220
|
+
|
|
20221
|
+
.cds--skeleton__placeholder--ai {
|
|
20222
|
+
border-radius: 0.5rem;
|
|
20223
|
+
}
|
|
20224
|
+
|
|
20225
|
+
.cds--skeleton__text--ai {
|
|
20226
|
+
border-radius: 1rem;
|
|
20227
|
+
}
|
|
20228
|
+
|
|
20229
|
+
.cds--skeleton__icon--ai {
|
|
20230
|
+
border-radius: 0.125rem;
|
|
20231
|
+
}
|
|
20232
|
+
|
|
20182
20233
|
.cds--slider-container {
|
|
20183
20234
|
position: relative;
|
|
20184
20235
|
display: flex;
|