@carbon/ibm-products 1.0.0-rc.2 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +11 -12
- package/css/index-full-carbon.css +23 -6
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-without-carbon-released-only.css +23 -6
- 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.css +23 -6
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index.css +23 -6
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/es/components/PageHeader/PageHeader.js +8 -8
- package/es/components/_Canary/Canary.js +1 -1
- package/es/global/js/utils/story-helper.js +22 -0
- package/lib/components/PageHeader/PageHeader.js +8 -8
- package/lib/components/_Canary/Canary.js +1 -1
- package/lib/global/js/utils/story-helper.js +29 -2
- package/package.json +2 -2
- package/scss/components/PageHeader/_page-header.scss +33 -6
package/css/index.css
CHANGED
|
@@ -18901,6 +18901,16 @@ a.bx--side-nav__link--current::before {
|
|
|
18901
18901
|
background-color: var(--to-color);
|
|
18902
18902
|
}
|
|
18903
18903
|
}
|
|
18904
|
+
@keyframes background-and-shadow-appear {
|
|
18905
|
+
from {
|
|
18906
|
+
background-color: var(--from-color);
|
|
18907
|
+
box-shadow: 0 1px 0 var(--from-color);
|
|
18908
|
+
}
|
|
18909
|
+
to {
|
|
18910
|
+
background-color: var(--to-color);
|
|
18911
|
+
box-shadow: 0 1px 0 var(--to-color-shadow);
|
|
18912
|
+
}
|
|
18913
|
+
}
|
|
18904
18914
|
.c4p--page-header.c4p--page-header {
|
|
18905
18915
|
/* Bleed class for the background */
|
|
18906
18916
|
position: sticky;
|
|
@@ -18928,16 +18938,16 @@ a.bx--side-nav__link--current::before {
|
|
|
18928
18938
|
.c4p--page-header::before {
|
|
18929
18939
|
--from-color: var(--cds-ui-background, #ffffff);
|
|
18930
18940
|
--to-color: var(--cds-ui-01, #f4f4f4);
|
|
18941
|
+
--to-color-shadow: var(--cds-ui-03, #e0e0e0);
|
|
18931
18942
|
position: absolute;
|
|
18932
18943
|
top: 0;
|
|
18933
18944
|
left: 0;
|
|
18934
18945
|
display: block;
|
|
18935
18946
|
width: 100%;
|
|
18936
18947
|
height: 100%;
|
|
18937
|
-
animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
|
|
18948
|
+
animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
|
|
18938
18949
|
content: "";
|
|
18939
18950
|
z-index: -1;
|
|
18940
|
-
box-shadow: 0 1px 0 var(--cds-ui-03, #e0e0e0);
|
|
18941
18951
|
}
|
|
18942
18952
|
.c4p--page-header .c4p--page-header--width--xl {
|
|
18943
18953
|
padding-right: var(--cds-spacing-07, 2rem);
|
|
@@ -19067,6 +19077,7 @@ a.bx--side-nav__link--current::before {
|
|
|
19067
19077
|
.c4p--page-header .c4p--page-header__action-bar-column--background::before {
|
|
19068
19078
|
--from-color: var(--cds-ui-background, #ffffff);
|
|
19069
19079
|
--to-color: var(--cds-ui-01, #f4f4f4);
|
|
19080
|
+
--to-color-shadow: var(--cds-ui-03, #e0e0e0);
|
|
19070
19081
|
position: absolute;
|
|
19071
19082
|
top: 0;
|
|
19072
19083
|
left: 0;
|
|
@@ -19237,6 +19248,7 @@ a.bx--side-nav__link--current::before {
|
|
|
19237
19248
|
.c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions::before {
|
|
19238
19249
|
--from-color: var(--cds-ui-background, #ffffff);
|
|
19239
19250
|
--to-color: var(--cds-ui-01, #f4f4f4);
|
|
19251
|
+
--to-color-shadow: var(--cds-ui-03, #e0e0e0);
|
|
19240
19252
|
position: absolute;
|
|
19241
19253
|
top: 0;
|
|
19242
19254
|
left: 0;
|
|
@@ -19246,6 +19258,11 @@ a.bx--side-nav__link--current::before {
|
|
|
19246
19258
|
animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
|
|
19247
19259
|
content: "";
|
|
19248
19260
|
}
|
|
19261
|
+
.c4p--page-header .c4p--page-header__page-actions-content {
|
|
19262
|
+
position: relative;
|
|
19263
|
+
width: 100%;
|
|
19264
|
+
height: 100%;
|
|
19265
|
+
}
|
|
19249
19266
|
.c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions--in-breadcrumb {
|
|
19250
19267
|
opacity: 0;
|
|
19251
19268
|
visibility: hidden;
|
|
@@ -19267,10 +19284,10 @@ a.bx--side-nav__link--current::before {
|
|
|
19267
19284
|
height: var(--cds-spacing-05, 1rem);
|
|
19268
19285
|
}
|
|
19269
19286
|
.c4p--page-header .c4p--page-header__subtitle {
|
|
19270
|
-
font-size: var(--cds-body-long-
|
|
19271
|
-
font-weight: var(--cds-body-long-
|
|
19272
|
-
line-height: var(--cds-body-long-
|
|
19273
|
-
letter-spacing: var(--cds-body-long-
|
|
19287
|
+
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
|
19288
|
+
font-weight: var(--cds-body-long-01-font-weight, 400);
|
|
19289
|
+
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
|
19290
|
+
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
|
19274
19291
|
}
|
|
19275
19292
|
.c4p--page-header .c4p--page-header__available-row {
|
|
19276
19293
|
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|