@carbon/ibm-products 1.55.1 → 1.56.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +639 -16
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +582 -9
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +620 -12
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/Carousel/Carousel.js +15 -5
- package/es/components/Coachmark/Coachmark.js +243 -0
- package/es/components/Coachmark/CoachmarkDragbar.js +137 -0
- package/es/components/Coachmark/CoachmarkHeader.js +88 -0
- package/es/components/Coachmark/CoachmarkOverlay.js +139 -0
- package/es/components/Coachmark/CoachmarkTagline.js +93 -0
- package/es/components/Coachmark/index.js +10 -0
- package/es/components/Coachmark/utils/constants.js +76 -0
- package/es/components/Coachmark/utils/context.js +5 -0
- package/es/components/Coachmark/utils/enums.js +40 -0
- package/es/components/Coachmark/utils/helpers.js +11 -0
- package/es/components/Coachmark/utils/hooks.js +54 -0
- package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +90 -0
- package/es/components/CoachmarkBeacon/index.js +8 -0
- package/es/components/CoachmarkButton/CoachmarkButton.js +72 -0
- package/es/components/CoachmarkButton/index.js +8 -0
- package/es/components/CoachmarkFixed/CoachmarkFixed.js +201 -0
- package/es/components/CoachmarkFixed/index.js +8 -0
- package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +86 -0
- package/es/components/CoachmarkOverlayElement/index.js +8 -0
- package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +175 -0
- package/es/components/CoachmarkOverlayElements/index.js +8 -0
- package/es/components/CoachmarkStack/CoachmarkStack.js +260 -0
- package/es/components/CoachmarkStack/CoachmarkStackHome.js +157 -0
- package/es/components/CoachmarkStack/index.js +8 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -4
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +2 -5
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +33 -17
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +0 -1
- package/es/components/Datagrid/useDefaultStringRenderer.js +2 -1
- package/es/components/Datagrid/useSortableColumns.js +8 -4
- package/es/components/NotificationsPanel/NotificationsPanel.js +3 -2
- package/es/components/index.js +7 -0
- package/es/global/js/package-settings.js +8 -1
- package/es/global/js/utils/test-helper.js +3 -3
- package/lib/components/Carousel/Carousel.js +15 -5
- package/lib/components/Coachmark/Coachmark.js +247 -0
- package/lib/components/Coachmark/CoachmarkDragbar.js +137 -0
- package/lib/components/Coachmark/CoachmarkHeader.js +85 -0
- package/lib/components/Coachmark/CoachmarkOverlay.js +139 -0
- package/lib/components/Coachmark/CoachmarkTagline.js +90 -0
- package/lib/components/Coachmark/index.js +38 -0
- package/lib/components/Coachmark/utils/constants.js +82 -0
- package/lib/components/Coachmark/utils/context.js +13 -0
- package/lib/components/Coachmark/utils/enums.js +49 -0
- package/lib/components/Coachmark/utils/helpers.js +17 -0
- package/lib/components/Coachmark/utils/hooks.js +60 -0
- package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +87 -0
- package/lib/components/CoachmarkBeacon/index.js +12 -0
- package/lib/components/CoachmarkButton/CoachmarkButton.js +69 -0
- package/lib/components/CoachmarkButton/index.js +12 -0
- package/lib/components/CoachmarkFixed/CoachmarkFixed.js +201 -0
- package/lib/components/CoachmarkFixed/index.js +12 -0
- package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +83 -0
- package/lib/components/CoachmarkOverlayElement/index.js +12 -0
- package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +176 -0
- package/lib/components/CoachmarkOverlayElements/index.js +12 -0
- package/lib/components/CoachmarkStack/CoachmarkStack.js +264 -0
- package/lib/components/CoachmarkStack/CoachmarkStackHome.js +160 -0
- package/lib/components/CoachmarkStack/index.js +12 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -4
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +2 -5
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +33 -17
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +0 -1
- package/lib/components/Datagrid/useDefaultStringRenderer.js +2 -1
- package/lib/components/Datagrid/useSortableColumns.js +8 -4
- package/lib/components/NotificationsPanel/NotificationsPanel.js +3 -2
- package/lib/components/index.js +49 -0
- package/lib/global/js/package-settings.js +8 -1
- package/lib/global/js/utils/test-helper.js +3 -3
- package/package.json +8 -8
- package/scss/components/Carousel/_carousel.scss +3 -0
- package/scss/components/Coachmark/_index.scss +11 -0
- package/scss/components/Coachmark/_storybook-styles.scss +20 -0
- package/scss/components/Coachmark/styles/_coachmark-dragbar.scss +74 -0
- package/scss/components/Coachmark/styles/_coachmark-header.scss +58 -0
- package/scss/components/Coachmark/styles/_coachmark-overlay.scss +327 -0
- package/scss/components/Coachmark/styles/_coachmark-tagline.scss +118 -0
- package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss +166 -0
- package/scss/components/CoachmarkBeacon/_index.scss +8 -0
- package/scss/components/CoachmarkBeacon/_storybook-styles.scss +19 -0
- package/scss/components/CoachmarkButton/_coachmark-button.scss +34 -0
- package/scss/components/CoachmarkButton/_index.scss +8 -0
- package/scss/components/CoachmarkButton/_storybook-styles.scss +19 -0
- package/scss/components/CoachmarkFixed/_coachmark-fixed.scss +34 -0
- package/scss/components/CoachmarkFixed/_index.scss +8 -0
- package/scss/components/CoachmarkFixed/_storybook-styles.scss +10 -0
- package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss +50 -0
- package/scss/components/CoachmarkOverlayElement/_index.scss +8 -0
- package/scss/components/CoachmarkOverlayElement/_storybook-styles.scss +19 -0
- package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss +40 -0
- package/scss/components/CoachmarkOverlayElements/_index.scss +8 -0
- package/scss/components/CoachmarkOverlayElements/_storybook-styles.scss +19 -0
- package/scss/components/CoachmarkStack/_coachmark-stack.scss +85 -0
- package/scss/components/CoachmarkStack/_index.scss +8 -0
- package/scss/components/CoachmarkStack/_storybook-styles.scss +10 -0
- package/scss/components/Datagrid/styles/_useColumnCenterAlign.scss +9 -9
- package/scss/components/_index.scss +7 -1
package/css/index.css
CHANGED
@@ -616,6 +616,16 @@ em {
|
|
616
616
|
overflow-y: auto;
|
617
617
|
transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
618
618
|
}
|
619
|
+
.bx--snippet--multi .bx--snippet-container:focus {
|
620
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
621
|
+
outline-offset: -2px;
|
622
|
+
outline-offset: 0;
|
623
|
+
}
|
624
|
+
@media screen and (prefers-contrast) {
|
625
|
+
.bx--snippet--multi .bx--snippet-container:focus {
|
626
|
+
outline-style: dotted;
|
627
|
+
}
|
628
|
+
}
|
619
629
|
|
620
630
|
.bx--snippet--multi.bx--snippet--expand .bx--snippet-container {
|
621
631
|
padding-bottom: var(--cds-spacing-05, 1rem);
|
@@ -3388,7 +3398,7 @@ input[data-invalid]:not(:focus),
|
|
3388
3398
|
.bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid:not(:focus),
|
3389
3399
|
.bx--text-area__wrapper[data-invalid] > .bx--text-area--invalid:not(:focus),
|
3390
3400
|
.bx--select-input__wrapper[data-invalid] .bx--select-input:not(:focus),
|
3391
|
-
.bx--list-box[data-invalid]:not(
|
3401
|
+
.bx--list-box[data-invalid]:not(.bx--multi-select--invalid--focused),
|
3392
3402
|
.bx--combo-box[data-invalid] .bx--text-input:not(:focus) {
|
3393
3403
|
outline: 2px solid var(--cds-support-01, #da1e28);
|
3394
3404
|
outline-offset: -2px;
|
@@ -3399,7 +3409,7 @@ input[data-invalid]:not(:focus),
|
|
3399
3409
|
.bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid:not(:focus),
|
3400
3410
|
.bx--text-area__wrapper[data-invalid] > .bx--text-area--invalid:not(:focus),
|
3401
3411
|
.bx--select-input__wrapper[data-invalid] .bx--select-input:not(:focus),
|
3402
|
-
.bx--list-box[data-invalid]:not(
|
3412
|
+
.bx--list-box[data-invalid]:not(.bx--multi-select--invalid--focused),
|
3403
3413
|
.bx--combo-box[data-invalid] .bx--text-input:not(:focus) {
|
3404
3414
|
outline-style: dotted;
|
3405
3415
|
}
|
@@ -13595,7 +13605,6 @@ a.bx--side-nav__link--current::before {
|
|
13595
13605
|
}
|
13596
13606
|
|
13597
13607
|
.bx--file__state-container .bx--file-complete {
|
13598
|
-
cursor: pointer;
|
13599
13608
|
fill: var(--cds-interactive-04, #0f62fe);
|
13600
13609
|
}
|
13601
13610
|
.bx--file__state-container .bx--file-complete:focus {
|
@@ -13648,6 +13657,24 @@ a.bx--side-nav__link--current::before {
|
|
13648
13657
|
}
|
13649
13658
|
|
13650
13659
|
.bx--file__drop-container {
|
13660
|
+
box-sizing: border-box;
|
13661
|
+
padding: 0;
|
13662
|
+
border: 0;
|
13663
|
+
margin: 0;
|
13664
|
+
font-family: inherit;
|
13665
|
+
font-size: 100%;
|
13666
|
+
vertical-align: baseline;
|
13667
|
+
display: inline-block;
|
13668
|
+
padding: 0;
|
13669
|
+
border: 0;
|
13670
|
+
appearance: none;
|
13671
|
+
background: none;
|
13672
|
+
cursor: pointer;
|
13673
|
+
width: 100%;
|
13674
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
13675
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
13676
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
13677
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
13651
13678
|
display: flex;
|
13652
13679
|
overflow: hidden;
|
13653
13680
|
height: 6rem;
|
@@ -13656,6 +13683,14 @@ a.bx--side-nav__link--current::before {
|
|
13656
13683
|
padding: 1rem;
|
13657
13684
|
border: 1px dashed var(--cds-ui-04, #8d8d8d);
|
13658
13685
|
}
|
13686
|
+
.bx--file__drop-container *,
|
13687
|
+
.bx--file__drop-container *::before,
|
13688
|
+
.bx--file__drop-container *::after {
|
13689
|
+
box-sizing: inherit;
|
13690
|
+
}
|
13691
|
+
.bx--file__drop-container::-moz-focus-inner {
|
13692
|
+
border: 0;
|
13693
|
+
}
|
13659
13694
|
|
13660
13695
|
.bx--file__drop-container--drag-over {
|
13661
13696
|
background: none;
|
@@ -21679,19 +21714,13 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
21679
21714
|
padding-right: 0;
|
21680
21715
|
}
|
21681
21716
|
|
21682
|
-
|
21683
|
-
|
21684
|
-
* 5724-Q36
|
21685
|
-
* (c) Copyright IBM Corp. 2020
|
21686
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
21687
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
21688
|
-
*/
|
21689
|
-
.c4p--datagrid__center-align-header {
|
21717
|
+
.c4p--datagrid__center-align-header,
|
21718
|
+
.c4p--datagrid__center-align-header .c4p--datagrid--table-sort {
|
21690
21719
|
width: 100%;
|
21691
21720
|
text-align: center;
|
21692
21721
|
}
|
21693
21722
|
|
21694
|
-
.c4p--datagrid__center-align-cell-renderer
|
21723
|
+
.c4p--datagrid__center-align-cell-renderer {
|
21695
21724
|
margin-right: auto;
|
21696
21725
|
margin-left: auto;
|
21697
21726
|
}
|
@@ -23164,6 +23193,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
23164
23193
|
.c4p--carousel__elements::-webkit-scrollbar {
|
23165
23194
|
display: none;
|
23166
23195
|
}
|
23196
|
+
@media (prefers-reduced-motion) {
|
23197
|
+
.c4p--carousel__elements {
|
23198
|
+
scroll-behavior: auto;
|
23199
|
+
}
|
23200
|
+
}
|
23167
23201
|
|
23168
23202
|
/**
|
23169
23203
|
* The Guidebanner specifically is theme-agnostic, and so we have to
|
@@ -25567,6 +25601,580 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
25567
25601
|
color: var(--cds-link-01, #0f62fe);
|
25568
25602
|
}
|
25569
25603
|
|
25604
|
+
/* stylelint-disable declaration-no-important */
|
25605
|
+
.c4p--coachmark-dragbar {
|
25606
|
+
display: flex;
|
25607
|
+
}
|
25608
|
+
.c4p--coachmark-dragbar__handle {
|
25609
|
+
flex-grow: 1;
|
25610
|
+
padding: var(--cds-spacing-03, 0.5rem) 0 0 var(--cds-spacing-03, 0.5rem);
|
25611
|
+
border: 0;
|
25612
|
+
background-color: transparent;
|
25613
|
+
text-align: left;
|
25614
|
+
}
|
25615
|
+
.c4p--coachmark-dragbar__handle:hover {
|
25616
|
+
cursor: move;
|
25617
|
+
}
|
25618
|
+
.c4p--coachmark-dragbar--close-btn {
|
25619
|
+
width: var(--cds-spacing-07, 2rem);
|
25620
|
+
height: var(--cds-spacing-07, 2rem);
|
25621
|
+
margin-left: auto !important;
|
25622
|
+
}
|
25623
|
+
.c4p--coachmark-dragbar--close-btn svg > path {
|
25624
|
+
margin: 0;
|
25625
|
+
fill: var(--cds-inverse-01, #ffffff) !important;
|
25626
|
+
}
|
25627
|
+
.c4p--coachmark-dragbar--close-btn:hover {
|
25628
|
+
background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
|
25629
|
+
}
|
25630
|
+
.c4p--coachmark-dragbar__light c4p--coachmark-dragbar--close-btn:active {
|
25631
|
+
background-color: var(--cds-active-secondary, #6f6f6f);
|
25632
|
+
}
|
25633
|
+
.c4p--coachmark-dragbar__dark c4p--coachmark-dragbar--close-btn:active {
|
25634
|
+
background-color: var(--cds-button-tertiary-active, #002d9c);
|
25635
|
+
}
|
25636
|
+
.c4p--coachmark-dragbar svg {
|
25637
|
+
color: var(--cds-inverse-01, #ffffff);
|
25638
|
+
}
|
25639
|
+
|
25640
|
+
/* stylelint-disable declaration-no-important */
|
25641
|
+
.c4p--coachmark-header {
|
25642
|
+
display: flex;
|
25643
|
+
}
|
25644
|
+
.c4p--coachmark-header--close-btn {
|
25645
|
+
width: var(--cds-spacing-07, 2rem);
|
25646
|
+
height: var(--cds-spacing-07, 2rem);
|
25647
|
+
margin-left: auto !important;
|
25648
|
+
}
|
25649
|
+
.c4p--coachmark-header--close-btn svg > path {
|
25650
|
+
margin: 0;
|
25651
|
+
fill: var(--cds-inverse-01, #ffffff) !important;
|
25652
|
+
}
|
25653
|
+
.c4p--coachmark-header--close-btn:hover {
|
25654
|
+
background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
|
25655
|
+
}
|
25656
|
+
.c4p--coachmark-header__light c4p--coachmark-header--close-btn:active {
|
25657
|
+
background-color: var(--cds-active-secondary, #6f6f6f);
|
25658
|
+
}
|
25659
|
+
.c4p--coachmark-header__dark c4p--coachmark-header--close-btn:active {
|
25660
|
+
background-color: var(--cds-button-tertiary-active, #002d9c);
|
25661
|
+
}
|
25662
|
+
|
25663
|
+
/* stylelint-disable carbon/layout-token-use */
|
25664
|
+
/* stylelint-disable carbon/theme-token-use */
|
25665
|
+
/* stylelint-disable declaration-no-important */
|
25666
|
+
.c4p--coachmark-overlay {
|
25667
|
+
position: absolute;
|
25668
|
+
z-index: 5901;
|
25669
|
+
width: 18rem;
|
25670
|
+
border-radius: var(--cds-spacing-01, 0.125rem);
|
25671
|
+
background-color: var(--cds-inverse-02, #393939);
|
25672
|
+
color: var(--cds-inverse-01, #ffffff);
|
25673
|
+
/* ------------------ */
|
25674
|
+
}
|
25675
|
+
.c4p--coachmark-overlay--fixed {
|
25676
|
+
position: fixed;
|
25677
|
+
right: var(--cds-spacing-05, 1rem);
|
25678
|
+
bottom: 0;
|
25679
|
+
transform: translateY(100%);
|
25680
|
+
/* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
|
25681
|
+
transition: 240ms cubic-bezier(0.2, 0, 1, 0.9);
|
25682
|
+
}
|
25683
|
+
@media (prefers-reduced-motion) {
|
25684
|
+
.c4p--coachmark-overlay--fixed {
|
25685
|
+
transition: none;
|
25686
|
+
}
|
25687
|
+
}
|
25688
|
+
.c4p--coachmark-overlay--is-visible {
|
25689
|
+
transform: translateY(0);
|
25690
|
+
}
|
25691
|
+
.c4p--coachmark-overlay__caret {
|
25692
|
+
position: absolute;
|
25693
|
+
z-index: 5902;
|
25694
|
+
width: 0;
|
25695
|
+
height: 0;
|
25696
|
+
border-right: calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) solid transparent;
|
25697
|
+
border-bottom: solid calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) var(--cds-inverse-02, #393939);
|
25698
|
+
border-left: calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) solid transparent;
|
25699
|
+
}
|
25700
|
+
.c4p--coachmark-overlay--top {
|
25701
|
+
transform: translate(-50%, calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))));
|
25702
|
+
}
|
25703
|
+
.c4p--coachmark-overlay--top .c4p--coachmark-overlay__caret {
|
25704
|
+
left: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25705
|
+
transform: rotate(180deg);
|
25706
|
+
}
|
25707
|
+
.c4p--coachmark-overlay--top-left {
|
25708
|
+
transform: translate(calc(-1 * var(--cds-spacing-06, 1.5rem)), calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))));
|
25709
|
+
}
|
25710
|
+
.c4p--coachmark-overlay--top-left .c4p--coachmark-overlay__caret {
|
25711
|
+
left: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25712
|
+
transform: rotate(180deg);
|
25713
|
+
}
|
25714
|
+
.c4p--coachmark-overlay--top-right {
|
25715
|
+
transform: translate(calc(-1 * (100% - var(--cds-spacing-06, 1.5rem))), calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))));
|
25716
|
+
}
|
25717
|
+
.c4p--coachmark-overlay--top-right .c4p--coachmark-overlay__caret {
|
25718
|
+
right: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25719
|
+
transform: rotate(180deg);
|
25720
|
+
}
|
25721
|
+
.c4p--coachmark-overlay--bottom {
|
25722
|
+
transform: translate(-50%, calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25723
|
+
}
|
25724
|
+
.c4p--coachmark-overlay--bottom .c4p--coachmark-overlay__caret {
|
25725
|
+
top: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25726
|
+
left: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25727
|
+
}
|
25728
|
+
.c4p--coachmark-overlay--bottom-left {
|
25729
|
+
transform: translate(calc(-1 * var(--cds-spacing-06, 1.5rem)), calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25730
|
+
}
|
25731
|
+
.c4p--coachmark-overlay--bottom-left .c4p--coachmark-overlay__caret {
|
25732
|
+
top: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25733
|
+
left: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25734
|
+
}
|
25735
|
+
.c4p--coachmark-overlay--bottom-right {
|
25736
|
+
transform: translate(calc(-1 * (100% - var(--cds-spacing-06, 1.5rem))), calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25737
|
+
}
|
25738
|
+
.c4p--coachmark-overlay--bottom-right .c4p--coachmark-overlay__caret {
|
25739
|
+
top: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25740
|
+
right: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
25741
|
+
}
|
25742
|
+
.c4p--coachmark-overlay--left {
|
25743
|
+
transform: translate(calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))), -50%);
|
25744
|
+
}
|
25745
|
+
.c4p--coachmark-overlay--left .c4p--coachmark-overlay__caret {
|
25746
|
+
top: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
25747
|
+
right: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
25748
|
+
transform: rotate(90deg);
|
25749
|
+
}
|
25750
|
+
.c4p--coachmark-overlay--left-top {
|
25751
|
+
transform: translate(calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))), calc(-1 * var(--cds-spacing-06, 1.5rem)));
|
25752
|
+
}
|
25753
|
+
.c4p--coachmark-overlay--left-top .c4p--coachmark-overlay__caret {
|
25754
|
+
top: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
25755
|
+
right: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
25756
|
+
transform: rotate(90deg);
|
25757
|
+
}
|
25758
|
+
.c4p--coachmark-overlay--left-bottom {
|
25759
|
+
transform: translate(calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))), calc(-1 * (100% - var(--cds-spacing-06, 1.5rem))));
|
25760
|
+
}
|
25761
|
+
.c4p--coachmark-overlay--left-bottom .c4p--coachmark-overlay__caret {
|
25762
|
+
right: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
25763
|
+
bottom: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
25764
|
+
transform: rotate(90deg);
|
25765
|
+
}
|
25766
|
+
.c4p--coachmark-overlay--right {
|
25767
|
+
transform: translate(calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)), -50%);
|
25768
|
+
}
|
25769
|
+
.c4p--coachmark-overlay--right .c4p--coachmark-overlay__caret {
|
25770
|
+
top: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
25771
|
+
left: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
25772
|
+
transform: rotate(-90deg);
|
25773
|
+
}
|
25774
|
+
.c4p--coachmark-overlay--right-top {
|
25775
|
+
transform: translate(calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)), calc(-1 * var(--cds-spacing-06, 1.5rem)));
|
25776
|
+
}
|
25777
|
+
.c4p--coachmark-overlay--right-top .c4p--coachmark-overlay__caret {
|
25778
|
+
top: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
25779
|
+
left: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
25780
|
+
transform: rotate(-90deg);
|
25781
|
+
}
|
25782
|
+
.c4p--coachmark-overlay--right-bottom {
|
25783
|
+
transform: translate(calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)), calc(-1 * (100% - var(--cds-spacing-06, 1.5rem))));
|
25784
|
+
}
|
25785
|
+
.c4p--coachmark-overlay--right-bottom .c4p--coachmark-overlay__caret {
|
25786
|
+
bottom: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
25787
|
+
left: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
25788
|
+
transform: rotate(-90deg);
|
25789
|
+
}
|
25790
|
+
.c4p--coachmark-overlay__element-stepped-media {
|
25791
|
+
height: calc(var(--cds-spacing-07, 2rem) + var(--cds-spacing-12, 6rem));
|
25792
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
25793
|
+
}
|
25794
|
+
.c4p--coachmark-overlay__body {
|
25795
|
+
padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
|
25796
|
+
}
|
25797
|
+
.c4p--coachmark-overlay__body .bx--btn--ghost {
|
25798
|
+
color: var(--cds-inverse-link, #78a9ff);
|
25799
|
+
}
|
25800
|
+
.c4p--coachmark-overlay__body .bx--btn--ghost:hover {
|
25801
|
+
color: var(--cds-inverse-link, #78a9ff);
|
25802
|
+
}
|
25803
|
+
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element {
|
25804
|
+
display: block;
|
25805
|
+
max-width: 100%;
|
25806
|
+
flex: 0 0 100%;
|
25807
|
+
}
|
25808
|
+
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__content {
|
25809
|
+
padding-bottom: var(--cds-spacing-05, 1rem);
|
25810
|
+
}
|
25811
|
+
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__title > div {
|
25812
|
+
margin: 0 0 var(--cds-spacing-03, 0.5rem);
|
25813
|
+
}
|
25814
|
+
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__title > div > h2 {
|
25815
|
+
font-size: var(--cds-productive-heading-02-font-size, 1rem);
|
25816
|
+
font-weight: var(--cds-productive-heading-02-font-weight, 600);
|
25817
|
+
line-height: var(--cds-productive-heading-02-line-height, 1.375);
|
25818
|
+
letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
|
25819
|
+
order: 1;
|
25820
|
+
}
|
25821
|
+
.c4p--coachmark-overlay__footer {
|
25822
|
+
display: flex;
|
25823
|
+
align-items: center;
|
25824
|
+
justify-content: flex-end;
|
25825
|
+
}
|
25826
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link {
|
25827
|
+
color: var(--cds-inverse-link, #78a9ff);
|
25828
|
+
}
|
25829
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:hover {
|
25830
|
+
color: #a6c8ff;
|
25831
|
+
}
|
25832
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:active {
|
25833
|
+
color: var(--cds-text-04, #ffffff);
|
25834
|
+
}
|
25835
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:focus {
|
25836
|
+
outline-color: var(--cds-text-04, #ffffff);
|
25837
|
+
}
|
25838
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
|
25839
|
+
background-color: var(--cds-inverse-hover-ui, #4c4c4c);
|
25840
|
+
}
|
25841
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:active {
|
25842
|
+
background-color: var(--cds-active-secondary, #6f6f6f);
|
25843
|
+
}
|
25844
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link {
|
25845
|
+
color: #0062fe;
|
25846
|
+
}
|
25847
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link:hover {
|
25848
|
+
color: #0043ce;
|
25849
|
+
}
|
25850
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link:active {
|
25851
|
+
color: var(--cds-link-02, #0043ce);
|
25852
|
+
}
|
25853
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link:focus {
|
25854
|
+
color: var(--cds-inverse-01, #ffffff);
|
25855
|
+
outline-color: var(--cds-inverse-01, #ffffff);
|
25856
|
+
}
|
25857
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--primary:focus {
|
25858
|
+
background-color: var(--cds-button-primary-active, #002d9c);
|
25859
|
+
box-shadow: inset 0 0 0 var(--cds-spacing-01, 0.125rem) var(--cds-interactive-01, #0f62fe), inset 0 0 0 0.1875rem var(--cds-interactive-03, #0f62fe);
|
25860
|
+
}
|
25861
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
|
25862
|
+
background-color: var(--cds-inverse-hover-ui, #4c4c4c);
|
25863
|
+
}
|
25864
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:active {
|
25865
|
+
background-color: var(--cds-button-tertiary-active, #002d9c);
|
25866
|
+
}
|
25867
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
|
25868
|
+
box-shadow: inset 0 0 0 var(--cds-spacing-01, 0.125rem) var(--cds-interactive-01, #0f62fe), inset 0 0 0 0.1875rem var(--cds-interactive-03, #0f62fe);
|
25869
|
+
}
|
25870
|
+
.c4p--coachmark-overlay .c4p--carousel__item {
|
25871
|
+
flex: 0 0 100% !important;
|
25872
|
+
}
|
25873
|
+
|
25874
|
+
/* stylelint-disable carbon/theme-token-use */
|
25875
|
+
/* stylelint-disable declaration-no-important */
|
25876
|
+
.c4p--coachmark-tagline {
|
25877
|
+
position: fixed;
|
25878
|
+
z-index: 1000;
|
25879
|
+
right: var(--cds-spacing-05, 1rem);
|
25880
|
+
bottom: 0;
|
25881
|
+
display: grid;
|
25882
|
+
overflow: hidden;
|
25883
|
+
width: 18rem;
|
25884
|
+
border-radius: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-01, 0.125rem) 0 0;
|
25885
|
+
background: #6929c4;
|
25886
|
+
background-image: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
|
25887
|
+
color: #ffffff !important;
|
25888
|
+
grid-template-columns: [ctacol] auto [closebtncol] var(--cds-spacing-08, 2.5rem);
|
25889
|
+
opacity: 1;
|
25890
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9) 300ms;
|
25891
|
+
transition-delay: 240ms;
|
25892
|
+
}
|
25893
|
+
@media (prefers-reduced-motion) {
|
25894
|
+
.c4p--coachmark-tagline {
|
25895
|
+
transition: none;
|
25896
|
+
}
|
25897
|
+
}
|
25898
|
+
.c4p--coachmark-tagline::before {
|
25899
|
+
position: absolute;
|
25900
|
+
z-index: -1;
|
25901
|
+
top: 0;
|
25902
|
+
right: 0;
|
25903
|
+
bottom: 0;
|
25904
|
+
left: 0;
|
25905
|
+
background: linear-gradient(90deg, #0043ce 0%, #6929c4 100%);
|
25906
|
+
content: "";
|
25907
|
+
opacity: 0;
|
25908
|
+
/* stylelint-disable-next-line carbon/motion-duration-use */
|
25909
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9);
|
25910
|
+
}
|
25911
|
+
@media (prefers-reduced-motion) {
|
25912
|
+
.c4p--coachmark-tagline::before {
|
25913
|
+
transition: none;
|
25914
|
+
}
|
25915
|
+
}
|
25916
|
+
.c4p--coachmark-tagline:hover::before {
|
25917
|
+
opacity: 1;
|
25918
|
+
}
|
25919
|
+
.c4p--coachmark-tagline--is-open {
|
25920
|
+
background: #ffffff;
|
25921
|
+
opacity: 0;
|
25922
|
+
}
|
25923
|
+
.c4p--coachmark-tagline--is-open c4p--coachmark-tagline__cta {
|
25924
|
+
opacity: 0;
|
25925
|
+
}
|
25926
|
+
.c4p--coachmark-tagline--is-open c4p--coachmark-tagline--close-btn {
|
25927
|
+
display: none;
|
25928
|
+
}
|
25929
|
+
.c4p--coachmark-tagline--is-open::before {
|
25930
|
+
background: #ffffff;
|
25931
|
+
}
|
25932
|
+
.c4p--coachmark-tagline__cta {
|
25933
|
+
display: grid;
|
25934
|
+
padding: var(--cds-spacing-03, 0.5rem) 0;
|
25935
|
+
border: none;
|
25936
|
+
background: transparent;
|
25937
|
+
color: #ffffff !important;
|
25938
|
+
grid-template-columns: [iconcol] var(--cds-spacing-07, 2rem) [bodycol] auto;
|
25939
|
+
text-align: left;
|
25940
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
25941
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
25942
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
25943
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
25944
|
+
}
|
25945
|
+
.c4p--coachmark-tagline__cta:hover {
|
25946
|
+
cursor: pointer !important;
|
25947
|
+
}
|
25948
|
+
.c4p--coachmark-tagline__cta .c4p--coachmark-tagline__idea {
|
25949
|
+
justify-self: center;
|
25950
|
+
}
|
25951
|
+
.c4p--coachmark-tagline--close-btn {
|
25952
|
+
width: var(--cds-spacing-07, 2rem);
|
25953
|
+
height: var(--cds-spacing-07, 2rem);
|
25954
|
+
margin-left: auto !important;
|
25955
|
+
color: #ffffff;
|
25956
|
+
}
|
25957
|
+
.c4p--coachmark-tagline--close-btn svg > path {
|
25958
|
+
margin: 0;
|
25959
|
+
fill: #ffffff !important;
|
25960
|
+
}
|
25961
|
+
.c4p--coachmark-tagline--close-btn:hover {
|
25962
|
+
background-color: #7c3dd6 !important;
|
25963
|
+
}
|
25964
|
+
|
25965
|
+
/**
|
25966
|
+
* The CoachmarkBeacon specifically is theme-agnostic, and so we have to
|
25967
|
+
* use color tokens to keep the colors static instead of theme tokens
|
25968
|
+
* that will change depending on the selected theme.
|
25969
|
+
*
|
25970
|
+
* Because of this, we are triggering a *large* amount of linting errors.
|
25971
|
+
* So, we're adding 4 "disable" rules for the file instead of 50
|
25972
|
+
* individual rules.
|
25973
|
+
*/
|
25974
|
+
/* stylelint-disable carbon/layout-token-use */
|
25975
|
+
/* stylelint-disable carbon/motion-duration-use */
|
25976
|
+
/* stylelint-disable carbon/theme-token-use */
|
25977
|
+
.c4p--coachmark-beacon {
|
25978
|
+
position: relative;
|
25979
|
+
}
|
25980
|
+
.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::after {
|
25981
|
+
position: absolute;
|
25982
|
+
top: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
|
25983
|
+
left: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
|
25984
|
+
width: var(--cds-spacing-04, 0.75rem);
|
25985
|
+
height: var(--cds-spacing-04, 0.75rem);
|
25986
|
+
border-radius: 50%;
|
25987
|
+
background-color: #4589ff;
|
25988
|
+
content: "";
|
25989
|
+
}
|
25990
|
+
.c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center {
|
25991
|
+
-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
|
25992
|
+
mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
|
25993
|
+
}
|
25994
|
+
.c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
|
25995
|
+
/* stylelint-disable-next-line carbon/motion-easing-use */
|
25996
|
+
animation: ring-ripple 2s infinite;
|
25997
|
+
}
|
25998
|
+
@media (prefers-reduced-motion) {
|
25999
|
+
.c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
|
26000
|
+
animation: none;
|
26001
|
+
}
|
26002
|
+
}
|
26003
|
+
.c4p--coachmark-beacon .c4p--coachmark-beacon__target {
|
26004
|
+
position: absolute;
|
26005
|
+
top: calc(-1 * var(--cds-spacing-05, 1rem));
|
26006
|
+
left: calc(-1 * var(--cds-spacing-05, 1rem));
|
26007
|
+
width: var(--cds-spacing-07, 2rem);
|
26008
|
+
height: var(--cds-spacing-07, 2rem);
|
26009
|
+
padding: 0;
|
26010
|
+
border: none;
|
26011
|
+
border-radius: 50%;
|
26012
|
+
background-color: transparent;
|
26013
|
+
cursor: pointer;
|
26014
|
+
}
|
26015
|
+
.c4p--coachmark-beacon .c4p--coachmark-beacon__target[aria-expanded=true] circle {
|
26016
|
+
animation: none;
|
26017
|
+
}
|
26018
|
+
.c4p--coachmark-beacon__center {
|
26019
|
+
position: absolute;
|
26020
|
+
z-index: 6900;
|
26021
|
+
top: calc((var(--cds-spacing-06, 1.5rem) - var(--cds-spacing-01, 0.125rem)) * -1);
|
26022
|
+
left: calc((var(--cds-spacing-06, 1.5rem) - var(--cds-spacing-01, 0.125rem)) * -1);
|
26023
|
+
width: var(--cds-spacing-11, 5rem);
|
26024
|
+
height: var(--cds-spacing-11, 5rem);
|
26025
|
+
pointer-events: none;
|
26026
|
+
}
|
26027
|
+
.c4p--coachmark-beacon__center circle {
|
26028
|
+
/* stylelint-disable-next-line carbon/motion-easing-use */
|
26029
|
+
animation: ripple 2s infinite;
|
26030
|
+
fill: var(--cds-support-04, #0043ce);
|
26031
|
+
fill-opacity: 0;
|
26032
|
+
-webkit-mask-image: none;
|
26033
|
+
mask-image: none;
|
26034
|
+
stroke: var(--cds-support-04, #0043ce);
|
26035
|
+
stroke-opacity: 0;
|
26036
|
+
stroke-width: 1px;
|
26037
|
+
transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
|
26038
|
+
}
|
26039
|
+
@media (prefers-reduced-motion) {
|
26040
|
+
.c4p--coachmark-beacon__center circle {
|
26041
|
+
animation: none;
|
26042
|
+
}
|
26043
|
+
}
|
26044
|
+
|
26045
|
+
@keyframes ripple {
|
26046
|
+
0% {
|
26047
|
+
fill-opacity: 0;
|
26048
|
+
r: 1px;
|
26049
|
+
stroke-opacity: 0;
|
26050
|
+
transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
|
26051
|
+
}
|
26052
|
+
31% {
|
26053
|
+
fill-opacity: 0.2;
|
26054
|
+
stroke-opacity: 1;
|
26055
|
+
}
|
26056
|
+
62% {
|
26057
|
+
fill-opacity: 0;
|
26058
|
+
r: 32px;
|
26059
|
+
stroke-opacity: 0;
|
26060
|
+
}
|
26061
|
+
100% {
|
26062
|
+
fill-opacity: 0;
|
26063
|
+
r: 32px;
|
26064
|
+
stroke-opacity: 0;
|
26065
|
+
}
|
26066
|
+
}
|
26067
|
+
@keyframes ring-ripple {
|
26068
|
+
0% {
|
26069
|
+
fill-opacity: 0;
|
26070
|
+
r: 12px;
|
26071
|
+
stroke-opacity: 0;
|
26072
|
+
transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
|
26073
|
+
}
|
26074
|
+
31% {
|
26075
|
+
fill-opacity: 0.2;
|
26076
|
+
stroke-opacity: 1;
|
26077
|
+
}
|
26078
|
+
62% {
|
26079
|
+
fill-opacity: 0;
|
26080
|
+
r: 32px;
|
26081
|
+
stroke-opacity: 0;
|
26082
|
+
}
|
26083
|
+
100% {
|
26084
|
+
fill-opacity: 0;
|
26085
|
+
r: 32px;
|
26086
|
+
stroke-opacity: 0;
|
26087
|
+
}
|
26088
|
+
}
|
26089
|
+
.c4p--coachmark-overlay-elements__element-stepped-media {
|
26090
|
+
height: 8rem;
|
26091
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
26092
|
+
}
|
26093
|
+
.c4p--coachmark-overlay-elements__footer {
|
26094
|
+
display: flex;
|
26095
|
+
align-items: center;
|
26096
|
+
justify-content: flex-end;
|
26097
|
+
}
|
26098
|
+
.c4p--coachmark-overlay-elements--controls-progress {
|
26099
|
+
margin-right: auto;
|
26100
|
+
justify-self: flex-start;
|
26101
|
+
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
|
26102
|
+
line-height: var(--cds-helper-text-01-line-height, 1.33333);
|
26103
|
+
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
|
26104
|
+
}
|
26105
|
+
|
26106
|
+
.c4p--coachmark-overlay-element__content {
|
26107
|
+
padding-bottom: var(--cds-spacing-05, 1rem);
|
26108
|
+
}
|
26109
|
+
.c4p--coachmark-overlay-element__title {
|
26110
|
+
font-size: var(--cds-productive-heading-02-font-size, 1rem);
|
26111
|
+
font-weight: var(--cds-productive-heading-02-font-weight, 600);
|
26112
|
+
line-height: var(--cds-productive-heading-02-line-height, 1.375);
|
26113
|
+
letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
|
26114
|
+
margin: 0 0 var(--cds-spacing-03, 0.5rem);
|
26115
|
+
}
|
26116
|
+
.c4p--coachmark-overlay-element__body {
|
26117
|
+
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
26118
|
+
font-weight: var(--cds-body-long-01-font-weight, 400);
|
26119
|
+
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
26120
|
+
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
26121
|
+
}
|
26122
|
+
.c4p--coachmark-overlay-element__button {
|
26123
|
+
margin-bottom: 0;
|
26124
|
+
}
|
26125
|
+
|
26126
|
+
.c4p--carousel__item .c4p--coachmark-overlay-element__button {
|
26127
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
26128
|
+
}
|
26129
|
+
|
26130
|
+
/* stylelint-disable carbon/theme-token-use */
|
26131
|
+
.c4p--coachmark-stack-element {
|
26132
|
+
position: fixed;
|
26133
|
+
z-index: 5901;
|
26134
|
+
right: var(--cds-spacing-05, 1rem);
|
26135
|
+
bottom: -100%;
|
26136
|
+
transform: translateY(100%);
|
26137
|
+
}
|
26138
|
+
.c4p--coachmark-stack-element--is-mounted {
|
26139
|
+
bottom: 0;
|
26140
|
+
/* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
|
26141
|
+
transition: 240ms cubic-bezier(0.2, 0, 1, 0.9);
|
26142
|
+
}
|
26143
|
+
@media (prefers-reduced-motion) {
|
26144
|
+
.c4p--coachmark-stack-element--is-mounted {
|
26145
|
+
transition: none;
|
26146
|
+
}
|
26147
|
+
}
|
26148
|
+
.c4p--coachmark-stack-element--is-visible {
|
26149
|
+
opacity: 1;
|
26150
|
+
transform: translateY(0);
|
26151
|
+
}
|
26152
|
+
.c4p--coachmark-stack-element--is-stacked {
|
26153
|
+
bottom: 0;
|
26154
|
+
overflow: hidden;
|
26155
|
+
pointer-events: none;
|
26156
|
+
transform: perspective(9rem) translate3d(0, calc(var(--cds-spacing-09, 3rem) * -1), calc(var(--cds-spacing-05, 1rem) * -1));
|
26157
|
+
transform-origin: top center;
|
26158
|
+
}
|
26159
|
+
.c4p--coachmark-stack-element--is-stacked__light {
|
26160
|
+
background-color: #262626;
|
26161
|
+
}
|
26162
|
+
.c4p--coachmark-stack-element--is-stacked__dark {
|
26163
|
+
background-color: var(--cds-active-tertiary, #002d9c);
|
26164
|
+
}
|
26165
|
+
|
26166
|
+
.c4p--coachmark-stack-element ~ .c4p--coachmark-stack-element {
|
26167
|
+
z-index: 5902;
|
26168
|
+
}
|
26169
|
+
|
26170
|
+
.c4p--coachmark-stacked-home__nav-links {
|
26171
|
+
margin-top: var(--cds-spacing-04, 0.75rem);
|
26172
|
+
margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
|
26173
|
+
}
|
26174
|
+
.c4p--coachmark-stacked-home__icon-idea {
|
26175
|
+
margin-bottom: var(--cds-spacing-03, 0.5rem);
|
26176
|
+
}
|
26177
|
+
|
25570
26178
|
/**
|
25571
26179
|
* The InlineTip specifically is theme-agnostic, and so we have to
|
25572
26180
|
* use color tokens to keep the colors static instead of theme tokens
|