@carbon/ibm-products-styles 2.60.0 → 2.61.0-rc.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/index-full-carbon.css +59 -143
- 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 +8 -0
- 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 +59 -143
- 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 +59 -143
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/package.json +3 -3
- package/scss/components/Coachmark/_coachmark-overlay.scss +2 -0
- package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss +1 -0
- package/scss/components/CoachmarkStack/_coachmark-stack.scss +25 -0
- package/scss/components/InterstitialScreen/_interstitial-screen.scss +29 -137
- package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -0
- package/scss/components/PageHeader/_page-header.scss +5 -0
- package/scss/components/_index-with-carbon.scss +0 -2
- package/scss/components/_index.scss +0 -2
- package/scss/components/InterstitialScreenView/_carbon-imports.scss +0 -9
- package/scss/components/InterstitialScreenView/_index-with-carbon.scss +0 -9
- package/scss/components/InterstitialScreenView/_index.scss +0 -8
- package/scss/components/InterstitialScreenView/_interstitial-screen-view.scss +0 -25
- package/scss/components/InterstitialScreenViewModule/_carbon-imports.scss +0 -9
- package/scss/components/InterstitialScreenViewModule/_index-with-carbon.scss +0 -9
- package/scss/components/InterstitialScreenViewModule/_index.scss +0 -8
- package/scss/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss +0 -59
package/css/index.css
CHANGED
|
@@ -10745,6 +10745,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
|
10745
10745
|
transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
|
10746
10746
|
}
|
|
10747
10747
|
.c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
|
|
10748
|
+
font-size: var(--cds-heading-01-font-size, 0.875rem);
|
|
10749
|
+
font-weight: var(--cds-heading-01-font-weight, 600);
|
|
10750
|
+
line-height: var(--cds-heading-01-line-height, 1.42857);
|
|
10751
|
+
letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
|
|
10748
10752
|
color: var(--cds-text-secondary, #525252);
|
|
10749
10753
|
margin-block-end: 0.25rem;
|
|
10750
10754
|
font-weight: 400;
|
|
@@ -13555,6 +13559,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
|
13555
13559
|
z-index: 7999;
|
|
13556
13560
|
display: inline-block; /* cause top/bottom margin to reserve space */
|
|
13557
13561
|
background-color: var(--cds-background, #ffffff);
|
|
13562
|
+
border-block-end: 1px solid var(--cds-border-subtle-00, #e0e0e0);
|
|
13558
13563
|
color: var(--cds-text-primary, #161616);
|
|
13559
13564
|
inline-size: 100%;
|
|
13560
13565
|
/* stylelint-disable-next-line carbon/layout-use */
|
|
@@ -13568,6 +13573,9 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
|
13568
13573
|
--c4p--page-header--button-set-in-breadcrumb-width-px: initial;
|
|
13569
13574
|
--c4p--page-header--navigation-buffer-top: $spacing-06;
|
|
13570
13575
|
}
|
|
13576
|
+
.c4p--page-header.c4p--page-header--without-background {
|
|
13577
|
+
border-block-end: none;
|
|
13578
|
+
}
|
|
13571
13579
|
.c4p--page-header.c4p--page-header--has-navigation-tags-only {
|
|
13572
13580
|
--c4p--page-header--navigation-buffer-top: $spacing-04;
|
|
13573
13581
|
}
|
|
@@ -20194,28 +20202,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20194
20202
|
display: none;
|
|
20195
20203
|
}
|
|
20196
20204
|
|
|
20197
|
-
.c4p--interstitial-screen {
|
|
20198
|
-
position: fixed;
|
|
20199
|
-
z-index: 6001;
|
|
20200
|
-
inset-block-start: 0;
|
|
20201
|
-
inset-inline: 0;
|
|
20202
|
-
}
|
|
20203
|
-
.c4p--interstitial-screen .c4p--carousel {
|
|
20204
|
-
display: flex;
|
|
20205
|
-
flex-direction: column;
|
|
20206
|
-
min-block-size: 100%;
|
|
20207
|
-
}
|
|
20208
|
-
.c4p--interstitial-screen .c4p--carousel__elements-container {
|
|
20209
|
-
display: flex;
|
|
20210
|
-
flex: 1;
|
|
20211
|
-
flex-direction: column;
|
|
20212
|
-
}
|
|
20213
|
-
.c4p--interstitial-screen .c4p--carousel__elements {
|
|
20214
|
-
flex: 1;
|
|
20215
|
-
}
|
|
20216
|
-
.c4p--interstitial-screen .c4p--interstitial-screen--auto-height-container {
|
|
20217
|
-
flex: 1;
|
|
20218
|
-
}
|
|
20219
20205
|
.c4p--interstitial-screen--body {
|
|
20220
20206
|
overflow: hidden auto;
|
|
20221
20207
|
flex-grow: 1;
|
|
@@ -20223,15 +20209,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20223
20209
|
margin: 0;
|
|
20224
20210
|
background-color: var(--cds-background, #ffffff);
|
|
20225
20211
|
}
|
|
20226
|
-
.c4p--interstitial-screen--body-grid {
|
|
20227
|
-
padding: 0 !important;
|
|
20228
|
-
block-size: 100%;
|
|
20229
|
-
}
|
|
20230
|
-
.c4p--interstitial-screen--body-row {
|
|
20231
|
-
block-size: 100%;
|
|
20232
|
-
}
|
|
20233
20212
|
.c4p--interstitial-screen--progress {
|
|
20234
|
-
margin:
|
|
20213
|
+
margin-block-end: 0.75rem;
|
|
20235
20214
|
}
|
|
20236
20215
|
.c4p--interstitial-screen__carousel {
|
|
20237
20216
|
block-size: 100%;
|
|
@@ -20240,29 +20219,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20240
20219
|
flex: 0 0 100% !important;
|
|
20241
20220
|
scroll-snap-align: start;
|
|
20242
20221
|
}
|
|
20243
|
-
.c4p--interstitial-screen--container {
|
|
20244
|
-
margin: 8rem auto;
|
|
20245
|
-
background-color: var(--cds-background, #ffffff);
|
|
20246
|
-
max-inline-size: 82rem;
|
|
20247
|
-
min-inline-size: 47rem;
|
|
20248
|
-
}
|
|
20249
|
-
.c4p--interstitial-screen--media-container {
|
|
20250
|
-
overflow: hidden;
|
|
20251
|
-
}
|
|
20252
|
-
.c4p--interstitial-screen--media {
|
|
20253
|
-
block-size: 100%;
|
|
20254
|
-
inline-size: 100%;
|
|
20255
|
-
margin-inline-end: -2.5rem;
|
|
20256
|
-
}
|
|
20257
|
-
@media (max-width: 81.98rem) {
|
|
20258
|
-
.c4p--interstitial-screen--media {
|
|
20259
|
-
margin-inline-end: -2rem;
|
|
20260
|
-
}
|
|
20261
|
-
}
|
|
20262
|
-
.c4p--interstitial-screen--stepped-animated-media {
|
|
20263
|
-
overflow: hidden;
|
|
20264
|
-
block-size: 100%;
|
|
20265
|
-
}
|
|
20266
20222
|
.c4p--interstitial-screen--internal-body {
|
|
20267
20223
|
padding: 0 !important;
|
|
20268
20224
|
margin: 0 !important;
|
|
@@ -20272,18 +20228,32 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20272
20228
|
background-color: var(--cds-background, #ffffff);
|
|
20273
20229
|
margin-block-end: 0 !important;
|
|
20274
20230
|
min-block-size: 3rem;
|
|
20231
|
+
padding-block-start: 1.5rem;
|
|
20232
|
+
padding-inline-start: 2rem !important;
|
|
20275
20233
|
}
|
|
20276
20234
|
.c4p--interstitial-screen--internal-header:empty {
|
|
20277
20235
|
min-block-size: 0;
|
|
20278
20236
|
}
|
|
20279
|
-
.c4p--interstitial-screen--internal-header
|
|
20237
|
+
.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer {
|
|
20238
|
+
margin-block-end: 1rem;
|
|
20239
|
+
}
|
|
20240
|
+
.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2 {
|
|
20280
20241
|
font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
|
|
20281
20242
|
font-weight: var(--cds-productive-heading-04-font-weight, 400);
|
|
20282
20243
|
line-height: var(--cds-productive-heading-04-line-height, 1.28572);
|
|
20283
20244
|
letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
|
|
20284
|
-
|
|
20245
|
+
margin-block-end: 0.5rem;
|
|
20246
|
+
}
|
|
20247
|
+
.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2:empty {
|
|
20248
|
+
padding: 0;
|
|
20249
|
+
}
|
|
20250
|
+
.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h3 {
|
|
20251
|
+
font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
|
|
20252
|
+
font-weight: var(--cds-productive-heading-03-font-weight, 400);
|
|
20253
|
+
line-height: var(--cds-productive-heading-03-line-height, 1.4);
|
|
20254
|
+
letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
|
|
20285
20255
|
}
|
|
20286
|
-
.c4p--interstitial-screen--internal-header
|
|
20256
|
+
.c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h3:empty {
|
|
20287
20257
|
padding: 0;
|
|
20288
20258
|
}
|
|
20289
20259
|
.c4p--interstitial-screen--internal-header--has-title {
|
|
@@ -20293,13 +20263,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20293
20263
|
.c4p--interstitial-screen--internal-header--has-title .c4p--interstitial-screen--progress {
|
|
20294
20264
|
margin-block-start: 0;
|
|
20295
20265
|
}
|
|
20296
|
-
.c4p--interstitial-screen--internal-header > .c4p--interstitial-screen--close-icon {
|
|
20297
|
-
position: absolute !important;
|
|
20298
|
-
z-index: 1;
|
|
20299
|
-
inline-size: 3rem;
|
|
20300
|
-
inset-block-start: 0;
|
|
20301
|
-
inset-inline-end: 0;
|
|
20302
|
-
}
|
|
20303
20266
|
.c4p--interstitial-screen--footer {
|
|
20304
20267
|
display: flex;
|
|
20305
20268
|
flex-direction: row;
|
|
@@ -20320,19 +20283,21 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20320
20283
|
max-inline-size: none;
|
|
20321
20284
|
padding-inline-start: 2rem !important;
|
|
20322
20285
|
}
|
|
20286
|
+
.c4p--interstitial-screen--footer .cds--inline-loading {
|
|
20287
|
+
position: absolute;
|
|
20288
|
+
inline-size: 2rem;
|
|
20289
|
+
inset-block-start: 0;
|
|
20290
|
+
inset-inline-end: 0;
|
|
20291
|
+
}
|
|
20323
20292
|
.c4p--interstitial-screen--footer-controls {
|
|
20324
20293
|
display: flex;
|
|
20325
20294
|
flex-direction: row;
|
|
20326
20295
|
margin-inline-start: auto;
|
|
20327
20296
|
}
|
|
20328
|
-
.c4p--interstitial-screen--
|
|
20329
|
-
|
|
20330
|
-
|
|
20331
|
-
|
|
20332
|
-
min-block-size: initial;
|
|
20333
|
-
}
|
|
20334
|
-
.c4p--interstitial-screen--modal:has(> :nth-child(1)) {
|
|
20335
|
-
min-block-size: initial;
|
|
20297
|
+
.c4p--interstitial-screen--full-screen {
|
|
20298
|
+
position: fixed;
|
|
20299
|
+
inset-block-start: 0;
|
|
20300
|
+
inset-inline: 0;
|
|
20336
20301
|
}
|
|
20337
20302
|
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--container {
|
|
20338
20303
|
display: flex;
|
|
@@ -20342,44 +20307,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20342
20307
|
block-size: 100vh;
|
|
20343
20308
|
max-inline-size: 100vw;
|
|
20344
20309
|
}
|
|
20345
|
-
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--header {
|
|
20346
|
-
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
|
20347
|
-
font-weight: var(--cds-body-long-01-font-weight, 400);
|
|
20348
|
-
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
|
20349
|
-
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
|
20350
|
-
/* stylelint-disable-next-line carbon/theme-use */
|
|
20351
|
-
background-color: #161616;
|
|
20352
|
-
block-size: 3rem;
|
|
20353
|
-
border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
|
|
20354
|
-
/* stylelint-disable-next-line carbon/theme-use */
|
|
20355
|
-
color: #f4f4f4;
|
|
20356
|
-
/* stylelint-disable-next-line carbon/type-use */
|
|
20357
|
-
font-weight: normal !important;
|
|
20358
|
-
/* stylelint-disable-next-line carbon/type-use */
|
|
20359
|
-
line-height: 3rem !important;
|
|
20360
|
-
padding-inline-start: 1rem;
|
|
20361
|
-
}
|
|
20362
|
-
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--header b {
|
|
20363
|
-
/* stylelint-disable-next-line carbon/type-use */
|
|
20364
|
-
font-weight: 600;
|
|
20365
|
-
}
|
|
20366
|
-
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header > h2 {
|
|
20367
|
-
padding: 1rem 2.5rem 0;
|
|
20368
|
-
}
|
|
20369
|
-
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--progress {
|
|
20370
|
-
margin: 4rem 2.5rem 0.75rem;
|
|
20371
|
-
}
|
|
20372
|
-
@media (max-width: 81.98rem) {
|
|
20373
|
-
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--progress {
|
|
20374
|
-
margin-inline-start: 2rem;
|
|
20375
|
-
}
|
|
20376
|
-
}
|
|
20377
|
-
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header--has-title .c4p--interstitial-screen--progress {
|
|
20378
|
-
margin-block-start: 1.5rem;
|
|
20379
|
-
}
|
|
20380
|
-
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header:has(> :nth-child(1)) {
|
|
20381
|
-
min-block-size: initial;
|
|
20382
|
-
}
|
|
20383
20310
|
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
|
|
20384
20311
|
padding-inline-start: 2.5rem !important;
|
|
20385
20312
|
}
|
|
@@ -20389,40 +20316,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20389
20316
|
}
|
|
20390
20317
|
}
|
|
20391
20318
|
|
|
20392
|
-
.c4p--interstitial-screen-view {
|
|
20393
|
-
block-size: 100%;
|
|
20394
|
-
}
|
|
20395
|
-
|
|
20396
|
-
/* stylelint-disable max-nesting-depth */
|
|
20397
|
-
.c4p--interstitial-screen-view-module {
|
|
20398
|
-
margin: 2rem;
|
|
20399
|
-
}
|
|
20400
|
-
.c4p--interstitial-screen-view-module--heading {
|
|
20401
|
-
font-size: var(--cds-heading-05-font-size, 2rem);
|
|
20402
|
-
font-weight: var(--cds-heading-05-font-weight, 400);
|
|
20403
|
-
line-height: var(--cds-heading-05-line-height, 1.25);
|
|
20404
|
-
letter-spacing: var(--cds-heading-05-letter-spacing, 0);
|
|
20405
|
-
margin-block-end: 2rem;
|
|
20406
|
-
}
|
|
20407
|
-
.c4p--interstitial-screen-view-module--body {
|
|
20408
|
-
font-size: var(--cds-body-01-font-size, 0.875rem);
|
|
20409
|
-
font-weight: var(--cds-body-01-font-weight, 400);
|
|
20410
|
-
line-height: var(--cds-body-01-line-height, 1.42857);
|
|
20411
|
-
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
|
20412
|
-
}
|
|
20413
|
-
|
|
20414
|
-
.c4p--interstitial-screen--modal .c4p--interstitial-screen-view-module {
|
|
20415
|
-
margin: 5rem 2rem;
|
|
20416
|
-
}
|
|
20417
|
-
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen-view-module {
|
|
20418
|
-
margin: 6rem 2.5rem;
|
|
20419
|
-
}
|
|
20420
|
-
@media (max-width: 81.98rem) {
|
|
20421
|
-
.c4p--interstitial-screen--full-screen .c4p--interstitial-screen-view-module {
|
|
20422
|
-
margin: 6rem 2rem;
|
|
20423
|
-
}
|
|
20424
|
-
}
|
|
20425
|
-
|
|
20426
20319
|
.c4p--coachmark-dragbar {
|
|
20427
20320
|
display: flex;
|
|
20428
20321
|
/* stylelint-disable-next-line max-nesting-depth */
|
|
@@ -20586,6 +20479,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20586
20479
|
display: flex;
|
|
20587
20480
|
align-items: center;
|
|
20588
20481
|
justify-content: flex-end;
|
|
20482
|
+
margin-block-start: 1rem;
|
|
20483
|
+
padding-block-end: 1rem;
|
|
20589
20484
|
}
|
|
20590
20485
|
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--link {
|
|
20591
20486
|
color: var(--cds-link-inverse, #78a9ff);
|
|
@@ -20934,6 +20829,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
20934
20829
|
|
|
20935
20830
|
/* stylelint-disable max-nesting-depth */
|
|
20936
20831
|
.c4p--coachmark-overlay-elements__element-stepped-media {
|
|
20832
|
+
padding: 0 1rem;
|
|
20937
20833
|
/* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
|
|
20938
20834
|
block-size: 8rem;
|
|
20939
20835
|
margin-block-end: 1rem;
|
|
@@ -21005,6 +20901,26 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
|
21005
20901
|
.c4p--coachmark-stacked-home__icon-idea {
|
|
21006
20902
|
margin-block-end: 0.5rem;
|
|
21007
20903
|
}
|
|
20904
|
+
.c4p--coachmark-stacked-home li {
|
|
20905
|
+
display: block;
|
|
20906
|
+
max-inline-size: 100%;
|
|
20907
|
+
white-space: nowrap;
|
|
20908
|
+
}
|
|
20909
|
+
.c4p--coachmark-stacked-home button, .c4p--coachmark-stacked-home__navLinkLabels-tooltip {
|
|
20910
|
+
max-inline-size: 100%;
|
|
20911
|
+
}
|
|
20912
|
+
.c4p--coachmark-stacked-home button .cds--tooltip-content, .c4p--coachmark-stacked-home__navLinkLabels-tooltip .cds--tooltip-content {
|
|
20913
|
+
color: var(--cds-text-primary, #161616);
|
|
20914
|
+
margin-inline-start: 0.375rem;
|
|
20915
|
+
max-inline-size: 100%;
|
|
20916
|
+
}
|
|
20917
|
+
.c4p--coachmark-stacked-home__navLinkLabels-text {
|
|
20918
|
+
display: inline-block;
|
|
20919
|
+
overflow: hidden;
|
|
20920
|
+
max-inline-size: 100%;
|
|
20921
|
+
text-overflow: ellipsis;
|
|
20922
|
+
white-space: nowrap;
|
|
20923
|
+
}
|
|
21008
20924
|
|
|
21009
20925
|
.c4p--delimited-list-truncate {
|
|
21010
20926
|
overflow: hidden;
|