@carbon/ibm-products 1.55.2 → 1.57.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +640 -0
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +640 -0
- 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 +640 -0
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- 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/Datagrid.js +12 -7
- package/es/components/Datagrid/Datagrid/DatagridContent.js +6 -3
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +127 -7
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +1 -23
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +111 -0
- package/es/components/Datagrid/useDatagrid.js +5 -2
- package/es/components/Datagrid/utils/getColTitle.js +25 -0
- package/es/components/NotificationsPanel/NotificationsPanel.js +3 -2
- package/es/components/index.js +7 -0
- package/es/global/js/hooks/useResizeObserver.js +19 -3
- package/es/global/js/package-settings.js +8 -1
- 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/Datagrid.js +12 -7
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +6 -3
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +130 -7
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +4 -26
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +122 -0
- package/lib/components/Datagrid/useDatagrid.js +5 -2
- package/lib/components/Datagrid/utils/getColTitle.js +32 -0
- package/lib/components/NotificationsPanel/NotificationsPanel.js +3 -2
- package/lib/components/index.js +49 -0
- package/lib/global/js/hooks/useResizeObserver.js +19 -3
- package/lib/global/js/package-settings.js +8 -1
- package/package.json +2 -2
- 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/_datagrid.scss +65 -0
- package/scss/components/_index.scss +7 -1
@@ -7103,6 +7103,67 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7103
7103
|
background-color: var(--cds-ui-03, #e0e0e0);
|
7104
7104
|
}
|
7105
7105
|
|
7106
|
+
.c4p--datagrid .c4p--datagrid__col-resizer-range {
|
7107
|
+
position: absolute;
|
7108
|
+
z-index: 2;
|
7109
|
+
top: 0;
|
7110
|
+
right: calc(var(--cds-spacing-03, 0.5rem) * -1);
|
7111
|
+
width: 1rem;
|
7112
|
+
height: 100%;
|
7113
|
+
margin: 0;
|
7114
|
+
-webkit-appearance: none;
|
7115
|
+
appearance: none;
|
7116
|
+
background: transparent;
|
7117
|
+
}
|
7118
|
+
|
7119
|
+
.c4p--datagrid .c4p--datagrid__col-resizer-range:focus {
|
7120
|
+
outline: 0;
|
7121
|
+
}
|
7122
|
+
|
7123
|
+
.c4p--datagrid .c4p--datagrid__col-resizer-range:focus::before {
|
7124
|
+
position: absolute;
|
7125
|
+
top: 50%;
|
7126
|
+
left: 50%;
|
7127
|
+
width: 2px;
|
7128
|
+
height: 100%;
|
7129
|
+
background-color: var(--cds-focus, #0f62fe);
|
7130
|
+
content: "";
|
7131
|
+
transform: translate(-50%, -50%);
|
7132
|
+
}
|
7133
|
+
|
7134
|
+
.c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator {
|
7135
|
+
position: absolute;
|
7136
|
+
z-index: 2;
|
7137
|
+
right: calc(var(--cds-spacing-03, 0.5rem) * -1);
|
7138
|
+
width: 0.5rem;
|
7139
|
+
height: 0.5rem;
|
7140
|
+
border-radius: 100%;
|
7141
|
+
margin: 0;
|
7142
|
+
background-color: var(--cds-focus, #0f62fe);
|
7143
|
+
transform: translate(-50%, 0);
|
7144
|
+
}
|
7145
|
+
|
7146
|
+
.c4p--datagrid .c4p--datagrid__col-resizer-range:focus::after {
|
7147
|
+
position: absolute;
|
7148
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
7149
|
+
top: var(--c4p--datagrid--row-height);
|
7150
|
+
right: var(--cds-spacing-03, 0.5rem);
|
7151
|
+
width: 1px;
|
7152
|
+
height: calc(var(--c4p--datagrid--grid-height) - var(--c4p--datagrid--row-height));
|
7153
|
+
background-color: var(--cds-active-ui, #c6c6c6);
|
7154
|
+
content: "";
|
7155
|
+
}
|
7156
|
+
|
7157
|
+
.c4p--datagrid .c4p--datagrid__col-resizer-range::-webkit-slider-thumb {
|
7158
|
+
width: 16px;
|
7159
|
+
height: 16px;
|
7160
|
+
border: none;
|
7161
|
+
border-radius: 50%;
|
7162
|
+
-webkit-appearance: none;
|
7163
|
+
appearance: none;
|
7164
|
+
background: transparent;
|
7165
|
+
}
|
7166
|
+
|
7106
7167
|
/*
|
7107
7168
|
* Licensed Materials - Property of IBM
|
7108
7169
|
* 5724-Q36
|
@@ -8747,6 +8808,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
8747
8808
|
.c4p--carousel__elements::-webkit-scrollbar {
|
8748
8809
|
display: none;
|
8749
8810
|
}
|
8811
|
+
@media (prefers-reduced-motion) {
|
8812
|
+
.c4p--carousel__elements {
|
8813
|
+
scroll-behavior: auto;
|
8814
|
+
}
|
8815
|
+
}
|
8750
8816
|
|
8751
8817
|
/**
|
8752
8818
|
* The Guidebanner specifically is theme-agnostic, and so we have to
|
@@ -11150,6 +11216,580 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
11150
11216
|
color: var(--cds-link-01, #0f62fe);
|
11151
11217
|
}
|
11152
11218
|
|
11219
|
+
/* stylelint-disable declaration-no-important */
|
11220
|
+
.c4p--coachmark-dragbar {
|
11221
|
+
display: flex;
|
11222
|
+
}
|
11223
|
+
.c4p--coachmark-dragbar__handle {
|
11224
|
+
flex-grow: 1;
|
11225
|
+
padding: var(--cds-spacing-03, 0.5rem) 0 0 var(--cds-spacing-03, 0.5rem);
|
11226
|
+
border: 0;
|
11227
|
+
background-color: transparent;
|
11228
|
+
text-align: left;
|
11229
|
+
}
|
11230
|
+
.c4p--coachmark-dragbar__handle:hover {
|
11231
|
+
cursor: move;
|
11232
|
+
}
|
11233
|
+
.c4p--coachmark-dragbar--close-btn {
|
11234
|
+
width: var(--cds-spacing-07, 2rem);
|
11235
|
+
height: var(--cds-spacing-07, 2rem);
|
11236
|
+
margin-left: auto !important;
|
11237
|
+
}
|
11238
|
+
.c4p--coachmark-dragbar--close-btn svg > path {
|
11239
|
+
margin: 0;
|
11240
|
+
fill: var(--cds-inverse-01, #ffffff) !important;
|
11241
|
+
}
|
11242
|
+
.c4p--coachmark-dragbar--close-btn:hover {
|
11243
|
+
background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
|
11244
|
+
}
|
11245
|
+
.c4p--coachmark-dragbar__light c4p--coachmark-dragbar--close-btn:active {
|
11246
|
+
background-color: var(--cds-active-secondary, #6f6f6f);
|
11247
|
+
}
|
11248
|
+
.c4p--coachmark-dragbar__dark c4p--coachmark-dragbar--close-btn:active {
|
11249
|
+
background-color: var(--cds-button-tertiary-active, #002d9c);
|
11250
|
+
}
|
11251
|
+
.c4p--coachmark-dragbar svg {
|
11252
|
+
color: var(--cds-inverse-01, #ffffff);
|
11253
|
+
}
|
11254
|
+
|
11255
|
+
/* stylelint-disable declaration-no-important */
|
11256
|
+
.c4p--coachmark-header {
|
11257
|
+
display: flex;
|
11258
|
+
}
|
11259
|
+
.c4p--coachmark-header--close-btn {
|
11260
|
+
width: var(--cds-spacing-07, 2rem);
|
11261
|
+
height: var(--cds-spacing-07, 2rem);
|
11262
|
+
margin-left: auto !important;
|
11263
|
+
}
|
11264
|
+
.c4p--coachmark-header--close-btn svg > path {
|
11265
|
+
margin: 0;
|
11266
|
+
fill: var(--cds-inverse-01, #ffffff) !important;
|
11267
|
+
}
|
11268
|
+
.c4p--coachmark-header--close-btn:hover {
|
11269
|
+
background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
|
11270
|
+
}
|
11271
|
+
.c4p--coachmark-header__light c4p--coachmark-header--close-btn:active {
|
11272
|
+
background-color: var(--cds-active-secondary, #6f6f6f);
|
11273
|
+
}
|
11274
|
+
.c4p--coachmark-header__dark c4p--coachmark-header--close-btn:active {
|
11275
|
+
background-color: var(--cds-button-tertiary-active, #002d9c);
|
11276
|
+
}
|
11277
|
+
|
11278
|
+
/* stylelint-disable carbon/layout-token-use */
|
11279
|
+
/* stylelint-disable carbon/theme-token-use */
|
11280
|
+
/* stylelint-disable declaration-no-important */
|
11281
|
+
.c4p--coachmark-overlay {
|
11282
|
+
position: absolute;
|
11283
|
+
z-index: 5901;
|
11284
|
+
width: 18rem;
|
11285
|
+
border-radius: var(--cds-spacing-01, 0.125rem);
|
11286
|
+
background-color: var(--cds-inverse-02, #393939);
|
11287
|
+
color: var(--cds-inverse-01, #ffffff);
|
11288
|
+
/* ------------------ */
|
11289
|
+
}
|
11290
|
+
.c4p--coachmark-overlay--fixed {
|
11291
|
+
position: fixed;
|
11292
|
+
right: var(--cds-spacing-05, 1rem);
|
11293
|
+
bottom: 0;
|
11294
|
+
transform: translateY(100%);
|
11295
|
+
/* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
|
11296
|
+
transition: 240ms cubic-bezier(0.2, 0, 1, 0.9);
|
11297
|
+
}
|
11298
|
+
@media (prefers-reduced-motion) {
|
11299
|
+
.c4p--coachmark-overlay--fixed {
|
11300
|
+
transition: none;
|
11301
|
+
}
|
11302
|
+
}
|
11303
|
+
.c4p--coachmark-overlay--is-visible {
|
11304
|
+
transform: translateY(0);
|
11305
|
+
}
|
11306
|
+
.c4p--coachmark-overlay__caret {
|
11307
|
+
position: absolute;
|
11308
|
+
z-index: 5902;
|
11309
|
+
width: 0;
|
11310
|
+
height: 0;
|
11311
|
+
border-right: calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) solid transparent;
|
11312
|
+
border-bottom: solid calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) var(--cds-inverse-02, #393939);
|
11313
|
+
border-left: calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) solid transparent;
|
11314
|
+
}
|
11315
|
+
.c4p--coachmark-overlay--top {
|
11316
|
+
transform: translate(-50%, calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))));
|
11317
|
+
}
|
11318
|
+
.c4p--coachmark-overlay--top .c4p--coachmark-overlay__caret {
|
11319
|
+
left: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11320
|
+
transform: rotate(180deg);
|
11321
|
+
}
|
11322
|
+
.c4p--coachmark-overlay--top-left {
|
11323
|
+
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))));
|
11324
|
+
}
|
11325
|
+
.c4p--coachmark-overlay--top-left .c4p--coachmark-overlay__caret {
|
11326
|
+
left: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11327
|
+
transform: rotate(180deg);
|
11328
|
+
}
|
11329
|
+
.c4p--coachmark-overlay--top-right {
|
11330
|
+
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))));
|
11331
|
+
}
|
11332
|
+
.c4p--coachmark-overlay--top-right .c4p--coachmark-overlay__caret {
|
11333
|
+
right: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11334
|
+
transform: rotate(180deg);
|
11335
|
+
}
|
11336
|
+
.c4p--coachmark-overlay--bottom {
|
11337
|
+
transform: translate(-50%, calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11338
|
+
}
|
11339
|
+
.c4p--coachmark-overlay--bottom .c4p--coachmark-overlay__caret {
|
11340
|
+
top: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11341
|
+
left: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11342
|
+
}
|
11343
|
+
.c4p--coachmark-overlay--bottom-left {
|
11344
|
+
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)));
|
11345
|
+
}
|
11346
|
+
.c4p--coachmark-overlay--bottom-left .c4p--coachmark-overlay__caret {
|
11347
|
+
top: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11348
|
+
left: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11349
|
+
}
|
11350
|
+
.c4p--coachmark-overlay--bottom-right {
|
11351
|
+
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)));
|
11352
|
+
}
|
11353
|
+
.c4p--coachmark-overlay--bottom-right .c4p--coachmark-overlay__caret {
|
11354
|
+
top: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11355
|
+
right: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)));
|
11356
|
+
}
|
11357
|
+
.c4p--coachmark-overlay--left {
|
11358
|
+
transform: translate(calc(-1 * (100% + var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem))), -50%);
|
11359
|
+
}
|
11360
|
+
.c4p--coachmark-overlay--left .c4p--coachmark-overlay__caret {
|
11361
|
+
top: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
11362
|
+
right: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
11363
|
+
transform: rotate(90deg);
|
11364
|
+
}
|
11365
|
+
.c4p--coachmark-overlay--left-top {
|
11366
|
+
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)));
|
11367
|
+
}
|
11368
|
+
.c4p--coachmark-overlay--left-top .c4p--coachmark-overlay__caret {
|
11369
|
+
top: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
11370
|
+
right: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
11371
|
+
transform: rotate(90deg);
|
11372
|
+
}
|
11373
|
+
.c4p--coachmark-overlay--left-bottom {
|
11374
|
+
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))));
|
11375
|
+
}
|
11376
|
+
.c4p--coachmark-overlay--left-bottom .c4p--coachmark-overlay__caret {
|
11377
|
+
right: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
11378
|
+
bottom: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
11379
|
+
transform: rotate(90deg);
|
11380
|
+
}
|
11381
|
+
.c4p--coachmark-overlay--right {
|
11382
|
+
transform: translate(calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)), -50%);
|
11383
|
+
}
|
11384
|
+
.c4p--coachmark-overlay--right .c4p--coachmark-overlay__caret {
|
11385
|
+
top: calc(50% - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
11386
|
+
left: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
11387
|
+
transform: rotate(-90deg);
|
11388
|
+
}
|
11389
|
+
.c4p--coachmark-overlay--right-top {
|
11390
|
+
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)));
|
11391
|
+
}
|
11392
|
+
.c4p--coachmark-overlay--right-top .c4p--coachmark-overlay__caret {
|
11393
|
+
top: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
11394
|
+
left: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
11395
|
+
transform: rotate(-90deg);
|
11396
|
+
}
|
11397
|
+
.c4p--coachmark-overlay--right-bottom {
|
11398
|
+
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))));
|
11399
|
+
}
|
11400
|
+
.c4p--coachmark-overlay--right-bottom .c4p--coachmark-overlay__caret {
|
11401
|
+
bottom: calc(var(--cds-spacing-06, 1.5rem) - (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 0.5);
|
11402
|
+
left: calc(-1 * (var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem)) * 1.5);
|
11403
|
+
transform: rotate(-90deg);
|
11404
|
+
}
|
11405
|
+
.c4p--coachmark-overlay__element-stepped-media {
|
11406
|
+
height: calc(var(--cds-spacing-07, 2rem) + var(--cds-spacing-12, 6rem));
|
11407
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
11408
|
+
}
|
11409
|
+
.c4p--coachmark-overlay__body {
|
11410
|
+
padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
|
11411
|
+
}
|
11412
|
+
.c4p--coachmark-overlay__body .bx--btn--ghost {
|
11413
|
+
color: var(--cds-inverse-link, #78a9ff);
|
11414
|
+
}
|
11415
|
+
.c4p--coachmark-overlay__body .bx--btn--ghost:hover {
|
11416
|
+
color: var(--cds-inverse-link, #78a9ff);
|
11417
|
+
}
|
11418
|
+
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element {
|
11419
|
+
display: block;
|
11420
|
+
max-width: 100%;
|
11421
|
+
flex: 0 0 100%;
|
11422
|
+
}
|
11423
|
+
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__content {
|
11424
|
+
padding-bottom: var(--cds-spacing-05, 1rem);
|
11425
|
+
}
|
11426
|
+
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__title > div {
|
11427
|
+
margin: 0 0 var(--cds-spacing-03, 0.5rem);
|
11428
|
+
}
|
11429
|
+
.c4p--coachmark-overlay__body c4p--coachmark-overlay-element c4p--coachmark-overlay-element__title > div > h2 {
|
11430
|
+
font-size: var(--cds-productive-heading-02-font-size, 1rem);
|
11431
|
+
font-weight: var(--cds-productive-heading-02-font-weight, 600);
|
11432
|
+
line-height: var(--cds-productive-heading-02-line-height, 1.375);
|
11433
|
+
letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
|
11434
|
+
order: 1;
|
11435
|
+
}
|
11436
|
+
.c4p--coachmark-overlay__footer {
|
11437
|
+
display: flex;
|
11438
|
+
align-items: center;
|
11439
|
+
justify-content: flex-end;
|
11440
|
+
}
|
11441
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link {
|
11442
|
+
color: var(--cds-inverse-link, #78a9ff);
|
11443
|
+
}
|
11444
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:hover {
|
11445
|
+
color: #a6c8ff;
|
11446
|
+
}
|
11447
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:active {
|
11448
|
+
color: var(--cds-text-04, #ffffff);
|
11449
|
+
}
|
11450
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:focus {
|
11451
|
+
outline-color: var(--cds-text-04, #ffffff);
|
11452
|
+
}
|
11453
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
|
11454
|
+
background-color: var(--cds-inverse-hover-ui, #4c4c4c);
|
11455
|
+
}
|
11456
|
+
.c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:active {
|
11457
|
+
background-color: var(--cds-active-secondary, #6f6f6f);
|
11458
|
+
}
|
11459
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link {
|
11460
|
+
color: #0062fe;
|
11461
|
+
}
|
11462
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link:hover {
|
11463
|
+
color: #0043ce;
|
11464
|
+
}
|
11465
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link:active {
|
11466
|
+
color: var(--cds-link-02, #0043ce);
|
11467
|
+
}
|
11468
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link:focus {
|
11469
|
+
color: var(--cds-inverse-01, #ffffff);
|
11470
|
+
outline-color: var(--cds-inverse-01, #ffffff);
|
11471
|
+
}
|
11472
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--primary:focus {
|
11473
|
+
background-color: var(--cds-button-primary-active, #002d9c);
|
11474
|
+
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);
|
11475
|
+
}
|
11476
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
|
11477
|
+
background-color: var(--cds-inverse-hover-ui, #4c4c4c);
|
11478
|
+
}
|
11479
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:active {
|
11480
|
+
background-color: var(--cds-button-tertiary-active, #002d9c);
|
11481
|
+
}
|
11482
|
+
.c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
|
11483
|
+
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);
|
11484
|
+
}
|
11485
|
+
.c4p--coachmark-overlay .c4p--carousel__item {
|
11486
|
+
flex: 0 0 100% !important;
|
11487
|
+
}
|
11488
|
+
|
11489
|
+
/* stylelint-disable carbon/theme-token-use */
|
11490
|
+
/* stylelint-disable declaration-no-important */
|
11491
|
+
.c4p--coachmark-tagline {
|
11492
|
+
position: fixed;
|
11493
|
+
z-index: 1000;
|
11494
|
+
right: var(--cds-spacing-05, 1rem);
|
11495
|
+
bottom: 0;
|
11496
|
+
display: grid;
|
11497
|
+
overflow: hidden;
|
11498
|
+
width: 18rem;
|
11499
|
+
border-radius: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-01, 0.125rem) 0 0;
|
11500
|
+
background: #6929c4;
|
11501
|
+
background-image: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
|
11502
|
+
color: #ffffff !important;
|
11503
|
+
grid-template-columns: [ctacol] auto [closebtncol] var(--cds-spacing-08, 2.5rem);
|
11504
|
+
opacity: 1;
|
11505
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9) 300ms;
|
11506
|
+
transition-delay: 240ms;
|
11507
|
+
}
|
11508
|
+
@media (prefers-reduced-motion) {
|
11509
|
+
.c4p--coachmark-tagline {
|
11510
|
+
transition: none;
|
11511
|
+
}
|
11512
|
+
}
|
11513
|
+
.c4p--coachmark-tagline::before {
|
11514
|
+
position: absolute;
|
11515
|
+
z-index: -1;
|
11516
|
+
top: 0;
|
11517
|
+
right: 0;
|
11518
|
+
bottom: 0;
|
11519
|
+
left: 0;
|
11520
|
+
background: linear-gradient(90deg, #0043ce 0%, #6929c4 100%);
|
11521
|
+
content: "";
|
11522
|
+
opacity: 0;
|
11523
|
+
/* stylelint-disable-next-line carbon/motion-duration-use */
|
11524
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9);
|
11525
|
+
}
|
11526
|
+
@media (prefers-reduced-motion) {
|
11527
|
+
.c4p--coachmark-tagline::before {
|
11528
|
+
transition: none;
|
11529
|
+
}
|
11530
|
+
}
|
11531
|
+
.c4p--coachmark-tagline:hover::before {
|
11532
|
+
opacity: 1;
|
11533
|
+
}
|
11534
|
+
.c4p--coachmark-tagline--is-open {
|
11535
|
+
background: #ffffff;
|
11536
|
+
opacity: 0;
|
11537
|
+
}
|
11538
|
+
.c4p--coachmark-tagline--is-open c4p--coachmark-tagline__cta {
|
11539
|
+
opacity: 0;
|
11540
|
+
}
|
11541
|
+
.c4p--coachmark-tagline--is-open c4p--coachmark-tagline--close-btn {
|
11542
|
+
display: none;
|
11543
|
+
}
|
11544
|
+
.c4p--coachmark-tagline--is-open::before {
|
11545
|
+
background: #ffffff;
|
11546
|
+
}
|
11547
|
+
.c4p--coachmark-tagline__cta {
|
11548
|
+
display: grid;
|
11549
|
+
padding: var(--cds-spacing-03, 0.5rem) 0;
|
11550
|
+
border: none;
|
11551
|
+
background: transparent;
|
11552
|
+
color: #ffffff !important;
|
11553
|
+
grid-template-columns: [iconcol] var(--cds-spacing-07, 2rem) [bodycol] auto;
|
11554
|
+
text-align: left;
|
11555
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
11556
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
11557
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
11558
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
11559
|
+
}
|
11560
|
+
.c4p--coachmark-tagline__cta:hover {
|
11561
|
+
cursor: pointer !important;
|
11562
|
+
}
|
11563
|
+
.c4p--coachmark-tagline__cta .c4p--coachmark-tagline__idea {
|
11564
|
+
justify-self: center;
|
11565
|
+
}
|
11566
|
+
.c4p--coachmark-tagline--close-btn {
|
11567
|
+
width: var(--cds-spacing-07, 2rem);
|
11568
|
+
height: var(--cds-spacing-07, 2rem);
|
11569
|
+
margin-left: auto !important;
|
11570
|
+
color: #ffffff;
|
11571
|
+
}
|
11572
|
+
.c4p--coachmark-tagline--close-btn svg > path {
|
11573
|
+
margin: 0;
|
11574
|
+
fill: #ffffff !important;
|
11575
|
+
}
|
11576
|
+
.c4p--coachmark-tagline--close-btn:hover {
|
11577
|
+
background-color: #7c3dd6 !important;
|
11578
|
+
}
|
11579
|
+
|
11580
|
+
/**
|
11581
|
+
* The CoachmarkBeacon specifically is theme-agnostic, and so we have to
|
11582
|
+
* use color tokens to keep the colors static instead of theme tokens
|
11583
|
+
* that will change depending on the selected theme.
|
11584
|
+
*
|
11585
|
+
* Because of this, we are triggering a *large* amount of linting errors.
|
11586
|
+
* So, we're adding 4 "disable" rules for the file instead of 50
|
11587
|
+
* individual rules.
|
11588
|
+
*/
|
11589
|
+
/* stylelint-disable carbon/layout-token-use */
|
11590
|
+
/* stylelint-disable carbon/motion-duration-use */
|
11591
|
+
/* stylelint-disable carbon/theme-token-use */
|
11592
|
+
.c4p--coachmark-beacon {
|
11593
|
+
position: relative;
|
11594
|
+
}
|
11595
|
+
.c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::after {
|
11596
|
+
position: absolute;
|
11597
|
+
top: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
|
11598
|
+
left: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
|
11599
|
+
width: var(--cds-spacing-04, 0.75rem);
|
11600
|
+
height: var(--cds-spacing-04, 0.75rem);
|
11601
|
+
border-radius: 50%;
|
11602
|
+
background-color: #4589ff;
|
11603
|
+
content: "";
|
11604
|
+
}
|
11605
|
+
.c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center {
|
11606
|
+
-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>");
|
11607
|
+
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>");
|
11608
|
+
}
|
11609
|
+
.c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
|
11610
|
+
/* stylelint-disable-next-line carbon/motion-easing-use */
|
11611
|
+
animation: ring-ripple 2s infinite;
|
11612
|
+
}
|
11613
|
+
@media (prefers-reduced-motion) {
|
11614
|
+
.c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
|
11615
|
+
animation: none;
|
11616
|
+
}
|
11617
|
+
}
|
11618
|
+
.c4p--coachmark-beacon .c4p--coachmark-beacon__target {
|
11619
|
+
position: absolute;
|
11620
|
+
top: calc(-1 * var(--cds-spacing-05, 1rem));
|
11621
|
+
left: calc(-1 * var(--cds-spacing-05, 1rem));
|
11622
|
+
width: var(--cds-spacing-07, 2rem);
|
11623
|
+
height: var(--cds-spacing-07, 2rem);
|
11624
|
+
padding: 0;
|
11625
|
+
border: none;
|
11626
|
+
border-radius: 50%;
|
11627
|
+
background-color: transparent;
|
11628
|
+
cursor: pointer;
|
11629
|
+
}
|
11630
|
+
.c4p--coachmark-beacon .c4p--coachmark-beacon__target[aria-expanded=true] circle {
|
11631
|
+
animation: none;
|
11632
|
+
}
|
11633
|
+
.c4p--coachmark-beacon__center {
|
11634
|
+
position: absolute;
|
11635
|
+
z-index: 6900;
|
11636
|
+
top: calc((var(--cds-spacing-06, 1.5rem) - var(--cds-spacing-01, 0.125rem)) * -1);
|
11637
|
+
left: calc((var(--cds-spacing-06, 1.5rem) - var(--cds-spacing-01, 0.125rem)) * -1);
|
11638
|
+
width: var(--cds-spacing-11, 5rem);
|
11639
|
+
height: var(--cds-spacing-11, 5rem);
|
11640
|
+
pointer-events: none;
|
11641
|
+
}
|
11642
|
+
.c4p--coachmark-beacon__center circle {
|
11643
|
+
/* stylelint-disable-next-line carbon/motion-easing-use */
|
11644
|
+
animation: ripple 2s infinite;
|
11645
|
+
fill: var(--cds-support-04, #0043ce);
|
11646
|
+
fill-opacity: 0;
|
11647
|
+
-webkit-mask-image: none;
|
11648
|
+
mask-image: none;
|
11649
|
+
stroke: var(--cds-support-04, #0043ce);
|
11650
|
+
stroke-opacity: 0;
|
11651
|
+
stroke-width: 1px;
|
11652
|
+
transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
|
11653
|
+
}
|
11654
|
+
@media (prefers-reduced-motion) {
|
11655
|
+
.c4p--coachmark-beacon__center circle {
|
11656
|
+
animation: none;
|
11657
|
+
}
|
11658
|
+
}
|
11659
|
+
|
11660
|
+
@keyframes ripple {
|
11661
|
+
0% {
|
11662
|
+
fill-opacity: 0;
|
11663
|
+
r: 1px;
|
11664
|
+
stroke-opacity: 0;
|
11665
|
+
transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
|
11666
|
+
}
|
11667
|
+
31% {
|
11668
|
+
fill-opacity: 0.2;
|
11669
|
+
stroke-opacity: 1;
|
11670
|
+
}
|
11671
|
+
62% {
|
11672
|
+
fill-opacity: 0;
|
11673
|
+
r: 32px;
|
11674
|
+
stroke-opacity: 0;
|
11675
|
+
}
|
11676
|
+
100% {
|
11677
|
+
fill-opacity: 0;
|
11678
|
+
r: 32px;
|
11679
|
+
stroke-opacity: 0;
|
11680
|
+
}
|
11681
|
+
}
|
11682
|
+
@keyframes ring-ripple {
|
11683
|
+
0% {
|
11684
|
+
fill-opacity: 0;
|
11685
|
+
r: 12px;
|
11686
|
+
stroke-opacity: 0;
|
11687
|
+
transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
|
11688
|
+
}
|
11689
|
+
31% {
|
11690
|
+
fill-opacity: 0.2;
|
11691
|
+
stroke-opacity: 1;
|
11692
|
+
}
|
11693
|
+
62% {
|
11694
|
+
fill-opacity: 0;
|
11695
|
+
r: 32px;
|
11696
|
+
stroke-opacity: 0;
|
11697
|
+
}
|
11698
|
+
100% {
|
11699
|
+
fill-opacity: 0;
|
11700
|
+
r: 32px;
|
11701
|
+
stroke-opacity: 0;
|
11702
|
+
}
|
11703
|
+
}
|
11704
|
+
.c4p--coachmark-overlay-elements__element-stepped-media {
|
11705
|
+
height: 8rem;
|
11706
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
11707
|
+
}
|
11708
|
+
.c4p--coachmark-overlay-elements__footer {
|
11709
|
+
display: flex;
|
11710
|
+
align-items: center;
|
11711
|
+
justify-content: flex-end;
|
11712
|
+
}
|
11713
|
+
.c4p--coachmark-overlay-elements--controls-progress {
|
11714
|
+
margin-right: auto;
|
11715
|
+
justify-self: flex-start;
|
11716
|
+
font-size: var(--cds-helper-text-01-font-size, 0.75rem);
|
11717
|
+
line-height: var(--cds-helper-text-01-line-height, 1.33333);
|
11718
|
+
letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
|
11719
|
+
}
|
11720
|
+
|
11721
|
+
.c4p--coachmark-overlay-element__content {
|
11722
|
+
padding-bottom: var(--cds-spacing-05, 1rem);
|
11723
|
+
}
|
11724
|
+
.c4p--coachmark-overlay-element__title {
|
11725
|
+
font-size: var(--cds-productive-heading-02-font-size, 1rem);
|
11726
|
+
font-weight: var(--cds-productive-heading-02-font-weight, 600);
|
11727
|
+
line-height: var(--cds-productive-heading-02-line-height, 1.375);
|
11728
|
+
letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
|
11729
|
+
margin: 0 0 var(--cds-spacing-03, 0.5rem);
|
11730
|
+
}
|
11731
|
+
.c4p--coachmark-overlay-element__body {
|
11732
|
+
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
11733
|
+
font-weight: var(--cds-body-long-01-font-weight, 400);
|
11734
|
+
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
11735
|
+
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
11736
|
+
}
|
11737
|
+
.c4p--coachmark-overlay-element__button {
|
11738
|
+
margin-bottom: 0;
|
11739
|
+
}
|
11740
|
+
|
11741
|
+
.c4p--carousel__item .c4p--coachmark-overlay-element__button {
|
11742
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
11743
|
+
}
|
11744
|
+
|
11745
|
+
/* stylelint-disable carbon/theme-token-use */
|
11746
|
+
.c4p--coachmark-stack-element {
|
11747
|
+
position: fixed;
|
11748
|
+
z-index: 5901;
|
11749
|
+
right: var(--cds-spacing-05, 1rem);
|
11750
|
+
bottom: -100%;
|
11751
|
+
transform: translateY(100%);
|
11752
|
+
}
|
11753
|
+
.c4p--coachmark-stack-element--is-mounted {
|
11754
|
+
bottom: 0;
|
11755
|
+
/* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
|
11756
|
+
transition: 240ms cubic-bezier(0.2, 0, 1, 0.9);
|
11757
|
+
}
|
11758
|
+
@media (prefers-reduced-motion) {
|
11759
|
+
.c4p--coachmark-stack-element--is-mounted {
|
11760
|
+
transition: none;
|
11761
|
+
}
|
11762
|
+
}
|
11763
|
+
.c4p--coachmark-stack-element--is-visible {
|
11764
|
+
opacity: 1;
|
11765
|
+
transform: translateY(0);
|
11766
|
+
}
|
11767
|
+
.c4p--coachmark-stack-element--is-stacked {
|
11768
|
+
bottom: 0;
|
11769
|
+
overflow: hidden;
|
11770
|
+
pointer-events: none;
|
11771
|
+
transform: perspective(9rem) translate3d(0, calc(var(--cds-spacing-09, 3rem) * -1), calc(var(--cds-spacing-05, 1rem) * -1));
|
11772
|
+
transform-origin: top center;
|
11773
|
+
}
|
11774
|
+
.c4p--coachmark-stack-element--is-stacked__light {
|
11775
|
+
background-color: #262626;
|
11776
|
+
}
|
11777
|
+
.c4p--coachmark-stack-element--is-stacked__dark {
|
11778
|
+
background-color: var(--cds-active-tertiary, #002d9c);
|
11779
|
+
}
|
11780
|
+
|
11781
|
+
.c4p--coachmark-stack-element ~ .c4p--coachmark-stack-element {
|
11782
|
+
z-index: 5902;
|
11783
|
+
}
|
11784
|
+
|
11785
|
+
.c4p--coachmark-stacked-home__nav-links {
|
11786
|
+
margin-top: var(--cds-spacing-04, 0.75rem);
|
11787
|
+
margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
|
11788
|
+
}
|
11789
|
+
.c4p--coachmark-stacked-home__icon-idea {
|
11790
|
+
margin-bottom: var(--cds-spacing-03, 0.5rem);
|
11791
|
+
}
|
11792
|
+
|
11153
11793
|
/**
|
11154
11794
|
* The InlineTip specifically is theme-agnostic, and so we have to
|
11155
11795
|
* use color tokens to keep the colors static instead of theme tokens
|