@carbon/ibm-products 1.54.2 → 1.55.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +1312 -108
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +1200 -1
- 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 +1310 -106
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyModal.js +25 -21
- package/es/components/ActionBar/ActionBar.js +5 -5
- package/es/components/Carousel/Carousel.js +237 -0
- package/es/components/Carousel/CarouselItem.js +66 -0
- package/es/components/Carousel/index.js +9 -0
- package/es/components/Carousel/utils.js +98 -0
- package/es/components/CreateFullPage/CreateFullPage.js +4 -2
- package/es/components/CreateModal/CreateModal.js +2 -1
- package/es/components/CreateSidePanel/CreateSidePanel.js +6 -2
- package/es/components/CreateTearsheet/CreateTearsheet.js +3 -1
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +6 -2
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +13 -0
- package/es/components/Datagrid/index.js +2 -1
- package/es/components/Datagrid/useActionsColumn.js +13 -7
- package/es/components/Datagrid/useOnRowClick.js +20 -4
- package/es/components/Datagrid/useSortableColumns.js +27 -3
- package/es/components/Datagrid/utils/DatagridActions.js +6 -6
- package/es/components/Datagrid/utils/getArgTypes.js +4 -0
- package/es/components/EditSidePanel/EditSidePanel.js +7 -3
- package/es/components/FilterSummary/FilterSummary.js +7 -3
- package/es/components/Guidebanner/Guidebanner.js +229 -0
- package/es/components/Guidebanner/GuidebannerElement.js +71 -0
- package/es/components/Guidebanner/GuidebannerElementButton.js +76 -0
- package/es/components/Guidebanner/GuidebannerElementLink.js +56 -0
- package/es/components/Guidebanner/index.js +11 -0
- package/es/components/InlineTip/InlineTip.js +228 -0
- package/es/components/InlineTip/InlineTipButton.js +89 -0
- package/es/components/InlineTip/InlineTipLink.js +89 -0
- package/es/components/InlineTip/index.js +10 -0
- package/es/components/InlineTip/utils.js +36 -0
- package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +164 -0
- package/es/components/SteppedAnimatedMedia/assets/index.js +4 -0
- package/es/components/SteppedAnimatedMedia/index.js +8 -0
- package/es/components/Tearsheet/TearsheetShell.js +2 -1
- package/es/components/index.js +4 -2
- package/es/global/js/hooks/useResizeObserver.js +1 -1
- package/es/global/js/package-settings.js +2 -0
- package/lib/components/APIKeyModal/APIKeyModal.js +25 -21
- package/lib/components/ActionBar/ActionBar.js +5 -5
- package/lib/components/Carousel/Carousel.js +238 -0
- package/lib/components/Carousel/CarouselItem.js +66 -0
- package/lib/components/Carousel/index.js +19 -0
- package/lib/components/Carousel/utils.js +108 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +4 -2
- package/lib/components/CreateModal/CreateModal.js +2 -1
- package/lib/components/CreateSidePanel/CreateSidePanel.js +6 -2
- package/lib/components/CreateTearsheet/CreateTearsheet.js +3 -1
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +6 -2
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +8 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +20 -0
- package/lib/components/Datagrid/index.js +8 -1
- package/lib/components/Datagrid/useActionsColumn.js +13 -7
- package/lib/components/Datagrid/useOnRowClick.js +20 -4
- package/lib/components/Datagrid/useSortableColumns.js +27 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +6 -6
- package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
- package/lib/components/EditSidePanel/EditSidePanel.js +7 -3
- package/lib/components/FilterSummary/FilterSummary.js +7 -3
- package/lib/components/Guidebanner/Guidebanner.js +229 -0
- package/lib/components/Guidebanner/GuidebannerElement.js +67 -0
- package/lib/components/Guidebanner/GuidebannerElementButton.js +71 -0
- package/lib/components/Guidebanner/GuidebannerElementLink.js +52 -0
- package/lib/components/Guidebanner/index.js +33 -0
- package/lib/components/InlineTip/InlineTip.js +228 -0
- package/lib/components/InlineTip/InlineTipButton.js +86 -0
- package/lib/components/InlineTip/InlineTipLink.js +86 -0
- package/lib/components/InlineTip/index.js +26 -0
- package/lib/components/InlineTip/utils.js +44 -0
- package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +165 -0
- package/lib/components/SteppedAnimatedMedia/assets/index.js +12 -0
- package/lib/components/SteppedAnimatedMedia/index.js +12 -0
- package/lib/components/Tearsheet/TearsheetShell.js +2 -1
- package/lib/components/index.js +21 -1
- package/lib/global/js/hooks/useResizeObserver.js +1 -1
- package/lib/global/js/package-settings.js +2 -0
- package/package.json +6 -5
- package/scss/components/Carousel/_carousel.scss +80 -0
- package/scss/components/Carousel/_index.scss +8 -0
- package/scss/components/Carousel/_storybook-styles.scss +10 -0
- package/scss/components/Datagrid/_storybook-styles.scss +5 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +1 -1
- package/scss/components/Guidebanner/_guidebanner.scss +257 -0
- package/scss/components/Guidebanner/_index.scss +8 -0
- package/scss/components/Guidebanner/_storybook-styles.scss +20 -0
- package/scss/components/InlineTip/_index.scss +8 -0
- package/scss/components/InlineTip/_inline-tip.scss +231 -0
- package/scss/components/InlineTip/_storybook-styles.scss +21 -0
- package/scss/components/SteppedAnimatedMedia/_index.scss +8 -0
- package/scss/components/SteppedAnimatedMedia/_stepped-animated-media.scss +34 -0
- package/scss/components/SteppedAnimatedMedia/_storybook-styles.scss +12 -0
- package/scss/components/_index.scss +4 -0
@@ -2983,9 +2983,14 @@ em {
|
|
2983
2983
|
.bx--modal .bx--dropdown-list,
|
2984
2984
|
.bx--modal .bx--number input[type=number],
|
2985
2985
|
.bx--modal .bx--date-picker__input,
|
2986
|
-
.bx--modal .bx--multi-select
|
2986
|
+
.bx--modal .bx--multi-select,
|
2987
|
+
.bx--modal .bx--number__control-btn::before,
|
2988
|
+
.bx--modal .bx--number__control-btn::after {
|
2987
2989
|
background-color: var(--cds-field-02, #ffffff);
|
2988
2990
|
}
|
2991
|
+
.bx--modal .bx--number__rule-divider {
|
2992
|
+
background-color: var(--cds-decorative-01, #e0e0e0);
|
2993
|
+
}
|
2989
2994
|
|
2990
2995
|
.bx--modal.is-visible .bx--modal-container {
|
2991
2996
|
transform: translate3d(0, 0, 0);
|
@@ -21407,7 +21412,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
21407
21412
|
position: relative;
|
21408
21413
|
}
|
21409
21414
|
|
21410
|
-
.c4p--datagrid .bx--data-table--selected:not(.c4p--datagrid__active-row) ::before {
|
21415
|
+
.c4p--datagrid .bx--data-table--selected:not(.c4p--datagrid__active-row) :first-child:not(.bx--checkbox--inline)::before {
|
21411
21416
|
position: absolute;
|
21412
21417
|
top: 0;
|
21413
21418
|
left: 0;
|
@@ -23119,81 +23124,83 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
23119
23124
|
animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
|
23120
23125
|
}
|
23121
23126
|
|
23122
|
-
|
23123
|
-
|
23124
|
-
opacity: 0;
|
23125
|
-
}
|
23126
|
-
15% {
|
23127
|
-
opacity: 0;
|
23128
|
-
}
|
23129
|
-
100% {
|
23130
|
-
opacity: 1;
|
23131
|
-
}
|
23127
|
+
.c4p--carousel {
|
23128
|
+
position: relative;
|
23132
23129
|
}
|
23133
|
-
.c4p--
|
23134
|
-
|
23135
|
-
padding-top: 0;
|
23136
|
-
padding-right: 0.1875rem;
|
23137
|
-
border-width: 0.0625rem;
|
23138
|
-
border-style: solid;
|
23139
|
-
border-radius: var(--cds-spacing-04, 0.75rem);
|
23140
|
-
white-space: nowrap;
|
23141
|
-
border-color: var(--cds-interactive-03, #0f62fe);
|
23142
|
-
background-color: transparent;
|
23143
|
-
color: var(--cds-interactive-03, #0f62fe);
|
23130
|
+
.c4p--carousel:focus {
|
23131
|
+
outline: none;
|
23144
23132
|
}
|
23145
|
-
.c4p--
|
23146
|
-
|
23133
|
+
.c4p--carousel__elements-container {
|
23134
|
+
overflow-x: hidden;
|
23147
23135
|
}
|
23148
|
-
.c4p--
|
23149
|
-
|
23150
|
-
|
23136
|
+
.c4p--carousel__elements-container--scrolled, .c4p--carousel__elements-container--scroll-max {
|
23137
|
+
position: absolute;
|
23138
|
+
z-index: 1;
|
23139
|
+
top: 0;
|
23140
|
+
bottom: 0;
|
23141
|
+
width: var(--cds-spacing-07, 2rem);
|
23142
|
+
pointer-events: none;
|
23151
23143
|
}
|
23152
|
-
.c4p--
|
23153
|
-
|
23154
|
-
color: var(--cds-inverse-01, #ffffff);
|
23144
|
+
.c4p--carousel__elements-container--scrolled {
|
23145
|
+
left: 0;
|
23155
23146
|
}
|
23156
|
-
.c4p--
|
23157
|
-
|
23158
|
-
padding-top: 0;
|
23159
|
-
padding-right: 0.1875rem;
|
23160
|
-
border-width: 0.0625rem;
|
23161
|
-
border-style: solid;
|
23162
|
-
border-radius: var(--cds-spacing-04, 0.75rem);
|
23163
|
-
white-space: nowrap;
|
23164
|
-
border-color: var(--cds-interactive-03, #0f62fe);
|
23165
|
-
background-color: var(--cds-interactive-03, #0f62fe);
|
23166
|
-
color: var(--cds-inverse-01, #ffffff);
|
23147
|
+
.c4p--carousel__elements-container--scroll-max {
|
23148
|
+
right: 0;
|
23167
23149
|
}
|
23168
|
-
.c4p--
|
23169
|
-
|
23150
|
+
.c4p--carousel__elements {
|
23151
|
+
display: flex;
|
23152
|
+
-ms-overflow-style: none;
|
23153
|
+
overflow-x: scroll;
|
23154
|
+
overflow-y: hidden;
|
23155
|
+
scroll-behavior: smooth;
|
23156
|
+
scroll-snap-type: x mandatory;
|
23157
|
+
scrollbar-width: none;
|
23158
|
+
-webkit-touch-callout: none;
|
23159
|
+
-webkit-user-select: none;
|
23160
|
+
-khtml-user-select: none;
|
23161
|
+
-moz-user-select: none;
|
23162
|
+
-ms-user-select: none;
|
23163
|
+
user-select: none;
|
23170
23164
|
}
|
23171
|
-
.c4p--
|
23172
|
-
|
23173
|
-
vertical-align: text-top;
|
23165
|
+
.c4p--carousel__elements::-webkit-scrollbar {
|
23166
|
+
display: none;
|
23174
23167
|
}
|
23175
|
-
|
23176
|
-
|
23168
|
+
|
23169
|
+
/**
|
23170
|
+
* The Guidebanner specifically is theme-agnostic, and so we have to
|
23171
|
+
* use color tokens to keep the colors static instead of theme tokens
|
23172
|
+
* that will change depending on the selected theme.
|
23173
|
+
*
|
23174
|
+
* Because of this, we are triggering a *large* amount of linting errors.
|
23175
|
+
* So, we're adding 4 "disable" rules for the file instead of 50
|
23176
|
+
* individual rules.
|
23177
|
+
*/
|
23178
|
+
/* stylelint-disable carbon/layout-token-use */
|
23179
|
+
/* stylelint-disable carbon/motion-duration-use */
|
23180
|
+
/* stylelint-disable carbon/theme-token-use */
|
23181
|
+
/* stylelint-disable declaration-no-important */
|
23182
|
+
.c4p--guidebanner {
|
23183
|
+
position: relative;
|
23184
|
+
background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
|
23185
|
+
background-color: #001d6c;
|
23177
23186
|
}
|
23178
|
-
.c4p--
|
23179
|
-
|
23180
|
-
|
23187
|
+
.c4p--guidebanner__icon-idea {
|
23188
|
+
position: absolute;
|
23189
|
+
top: var(--cds-spacing-05, 1rem);
|
23190
|
+
left: var(--cds-spacing-05, 1rem);
|
23181
23191
|
}
|
23182
|
-
.c4p--
|
23183
|
-
|
23184
|
-
font-weight: var(--cds-body-long-01-font-weight, 400);
|
23185
|
-
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
23186
|
-
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
23187
|
-
display: block;
|
23188
|
-
padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
|
23189
|
-
border-left-width: 0.078125rem;
|
23190
|
-
border-left-style: solid;
|
23191
|
-
margin: var(--cds-spacing-02, 0.25rem) 0;
|
23192
|
-
animation: fade 600ms;
|
23193
|
-
border-left-color: var(--cds-text-01, #161616);
|
23192
|
+
.c4p--guidebanner__icon-idea path {
|
23193
|
+
fill: #f4f4f4;
|
23194
23194
|
}
|
23195
|
-
|
23196
|
-
|
23195
|
+
.c4p--guidebanner__title {
|
23196
|
+
font-size: var(--cds-productive-heading-02-font-size, 1rem);
|
23197
|
+
font-weight: var(--cds-productive-heading-02-font-weight, 600);
|
23198
|
+
line-height: var(--cds-productive-heading-02-line-height, 1.375);
|
23199
|
+
letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
|
23200
|
+
padding: var(--cds-spacing-05, 1rem) 10.9375rem 0 3.25rem;
|
23201
|
+
color: #f4f4f4;
|
23202
|
+
}
|
23203
|
+
.c4p--guidebanner__close-button {
|
23197
23204
|
--cds-interactive-01: #0f62fe;
|
23198
23205
|
--cds-interactive-02: #6f6f6f;
|
23199
23206
|
--cds-interactive-03: #ffffff;
|
@@ -23614,29 +23621,110 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
23614
23621
|
--cds-size-2XLarge: 5rem;
|
23615
23622
|
--cds-icon-size-01: 1rem;
|
23616
23623
|
--cds-icon-size-02: 1.25rem;
|
23617
|
-
|
23618
|
-
|
23619
|
-
|
23620
|
-
|
23621
|
-
|
23622
|
-
|
23623
|
-
white-space: nowrap;
|
23624
|
-
border-color: var(--cds-icon-03, #ffffff);
|
23625
|
-
background-color: transparent;
|
23626
|
-
color: var(--cds-text-01, #161616);
|
23624
|
+
position: absolute !important;
|
23625
|
+
top: 0;
|
23626
|
+
right: 0;
|
23627
|
+
width: var(--cds-spacing-07, 2rem);
|
23628
|
+
height: var(--cds-spacing-07, 2rem);
|
23629
|
+
min-height: var(--cds-spacing-07, 2rem) !important;
|
23627
23630
|
}
|
23628
|
-
.c4p--
|
23629
|
-
|
23631
|
+
.c4p--guidebanner__close-button:active, .c4p--guidebanner__close-button:hover {
|
23632
|
+
background-color: #7433e3 !important;
|
23630
23633
|
}
|
23631
|
-
.c4p--
|
23632
|
-
margin: 0.
|
23633
|
-
vertical-align: text-top;
|
23634
|
+
.c4p--guidebanner__close-button svg {
|
23635
|
+
margin-left: -0.25rem !important;
|
23634
23636
|
}
|
23635
|
-
.c4p--
|
23636
|
-
|
23637
|
-
color: var(--cds-inverse-01, #ffffff);
|
23637
|
+
.c4p--guidebanner__close-button svg path {
|
23638
|
+
fill: #ffffff !important;
|
23638
23639
|
}
|
23639
|
-
.c4p--
|
23640
|
+
.c4p--guidebanner__carousel {
|
23641
|
+
padding: 0 0 var(--cds-spacing-05, 1rem) 0;
|
23642
|
+
color: #f4f4f4;
|
23643
|
+
}
|
23644
|
+
.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__carousel {
|
23645
|
+
margin-bottom: 0;
|
23646
|
+
}
|
23647
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element {
|
23648
|
+
display: flex;
|
23649
|
+
width: 25rem;
|
23650
|
+
max-height: 32rem;
|
23651
|
+
flex-flow: column;
|
23652
|
+
flex-shrink: 0;
|
23653
|
+
padding-left: 3.25rem;
|
23654
|
+
margin: var(--cds-spacing-05, 1rem) 0 0 0;
|
23655
|
+
opacity: 1;
|
23656
|
+
scroll-snap-align: start;
|
23657
|
+
transition: max-height 50ms cubic-bezier(0.2, 0, 1, 0.9), margin-top 50ms cubic-bezier(0.2, 0, 1, 0.9), opacity 300ms cubic-bezier(0.2, 0, 1, 0.9);
|
23658
|
+
}
|
23659
|
+
.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element {
|
23660
|
+
max-height: var(--cds-spacing-03, 0.5rem);
|
23661
|
+
margin-top: 0;
|
23662
|
+
opacity: 0;
|
23663
|
+
}
|
23664
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-title {
|
23665
|
+
font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
|
23666
|
+
font-weight: var(--cds-productive-heading-01-font-weight, 600);
|
23667
|
+
line-height: var(--cds-productive-heading-01-line-height, 1.28572);
|
23668
|
+
letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
|
23669
|
+
margin: var(--cds-spacing-05, 1rem) 0 0 0;
|
23670
|
+
}
|
23671
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-content {
|
23672
|
+
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
23673
|
+
font-weight: var(--cds-body-long-01-font-weight, 400);
|
23674
|
+
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
23675
|
+
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
23676
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
23677
|
+
}
|
23678
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn--tertiary {
|
23679
|
+
border-color: #ffffff;
|
23680
|
+
color: #ffffff;
|
23681
|
+
}
|
23682
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn--tertiary:active, .c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn--tertiary:hover {
|
23683
|
+
border-color: #ffffff;
|
23684
|
+
background-color: #ffffff;
|
23685
|
+
color: #161616;
|
23686
|
+
}
|
23687
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn:not(.bx--btn--tertiary) {
|
23688
|
+
margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
|
23689
|
+
color: #a6c8ff;
|
23690
|
+
}
|
23691
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn:not(.bx--btn--tertiary):active, .c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .bx--btn:not(.bx--btn--tertiary):hover {
|
23692
|
+
background-color: #7f3ae7;
|
23693
|
+
color: #f4f4f4;
|
23694
|
+
}
|
23695
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .c4p--guidebanner__element-link {
|
23696
|
+
color: #a6c8ff;
|
23697
|
+
}
|
23698
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .c4p--guidebanner__element-link:visited {
|
23699
|
+
color: #a6c8ff;
|
23700
|
+
}
|
23701
|
+
.c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .c4p--guidebanner__element-link:active, .c4p--guidebanner__carousel .c4p--carousel__item .c4p--guidebanner__element-buttons .c4p--guidebanner__element-link:hover {
|
23702
|
+
color: #d0e2ff;
|
23703
|
+
}
|
23704
|
+
.c4p--guidebanner__carousel .c4p--carousel__item:last-child .c4p--guidebanner__element {
|
23705
|
+
width: 28rem;
|
23706
|
+
padding-right: 3.25rem;
|
23707
|
+
}
|
23708
|
+
.c4p--guidebanner__navigation {
|
23709
|
+
display: flex;
|
23710
|
+
border-top: 0.0625rem solid #8a3ffc;
|
23711
|
+
}
|
23712
|
+
.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__navigation {
|
23713
|
+
border-top: none;
|
23714
|
+
}
|
23715
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__toggle-button {
|
23716
|
+
margin-left: 2.125rem;
|
23717
|
+
color: #a6c8ff;
|
23718
|
+
}
|
23719
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__toggle-button:active, .c4p--guidebanner__navigation .c4p--guidebanner__toggle-button:hover {
|
23720
|
+
background-color: #7433e3;
|
23721
|
+
color: #f4f4f4;
|
23722
|
+
}
|
23723
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__back-button {
|
23724
|
+
margin-left: auto;
|
23725
|
+
}
|
23726
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__back-button,
|
23727
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__next-button {
|
23640
23728
|
--cds-interactive-01: #0f62fe;
|
23641
23729
|
--cds-interactive-02: #6f6f6f;
|
23642
23730
|
--cds-interactive-03: #ffffff;
|
@@ -24057,6 +24145,40 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
24057
24145
|
--cds-size-2XLarge: 5rem;
|
24058
24146
|
--cds-icon-size-01: 1rem;
|
24059
24147
|
--cds-icon-size-02: 1.25rem;
|
24148
|
+
}
|
24149
|
+
.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__navigation .c4p--guidebanner__back-button,
|
24150
|
+
.c4p--guidebanner__collapsible-collapsed .c4p--guidebanner__navigation .c4p--guidebanner__next-button {
|
24151
|
+
display: none !important;
|
24152
|
+
}
|
24153
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__back-button:active, .c4p--guidebanner__navigation .c4p--guidebanner__back-button:hover,
|
24154
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__next-button:active,
|
24155
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__next-button:hover {
|
24156
|
+
background-color: #7433e3;
|
24157
|
+
}
|
24158
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__back-button svg path,
|
24159
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__next-button svg path {
|
24160
|
+
fill: #ffffff !important;
|
24161
|
+
}
|
24162
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__back-button--disabled svg path,
|
24163
|
+
.c4p--guidebanner__navigation .c4p--guidebanner__next-button--disabled svg path {
|
24164
|
+
fill: #9b63ff !important;
|
24165
|
+
}
|
24166
|
+
.c4p--guidebanner__close-button::before, .c4p--guidebanner__back-button::before, .c4p--guidebanner__next-button::before {
|
24167
|
+
z-index: 6001 !important;
|
24168
|
+
}
|
24169
|
+
|
24170
|
+
@keyframes fade {
|
24171
|
+
0% {
|
24172
|
+
opacity: 0;
|
24173
|
+
}
|
24174
|
+
15% {
|
24175
|
+
opacity: 0;
|
24176
|
+
}
|
24177
|
+
100% {
|
24178
|
+
opacity: 1;
|
24179
|
+
}
|
24180
|
+
}
|
24181
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed {
|
24060
24182
|
height: 1.25rem;
|
24061
24183
|
padding-top: 0;
|
24062
24184
|
padding-right: 0.1875rem;
|
@@ -24064,25 +24186,62 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
24064
24186
|
border-style: solid;
|
24065
24187
|
border-radius: var(--cds-spacing-04, 0.75rem);
|
24066
24188
|
white-space: nowrap;
|
24067
|
-
border-color: var(--cds-
|
24068
|
-
background-color:
|
24189
|
+
border-color: var(--cds-interactive-03, #0f62fe);
|
24190
|
+
background-color: transparent;
|
24191
|
+
color: var(--cds-interactive-03, #0f62fe);
|
24192
|
+
}
|
24193
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
|
24194
|
+
cursor: pointer;
|
24195
|
+
}
|
24196
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed svg {
|
24197
|
+
margin: 0.0625rem 0 0 0;
|
24198
|
+
vertical-align: text-top;
|
24199
|
+
}
|
24200
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
|
24201
|
+
background-color: var(--cds-interactive-03, #0f62fe);
|
24069
24202
|
color: var(--cds-inverse-01, #ffffff);
|
24070
24203
|
}
|
24071
|
-
.c4p--non-linear-
|
24204
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open {
|
24205
|
+
height: 1.25rem;
|
24206
|
+
padding-top: 0;
|
24207
|
+
padding-right: 0.1875rem;
|
24208
|
+
border-width: 0.0625rem;
|
24209
|
+
border-style: solid;
|
24210
|
+
border-radius: var(--cds-spacing-04, 0.75rem);
|
24211
|
+
white-space: nowrap;
|
24212
|
+
border-color: var(--cds-interactive-03, #0f62fe);
|
24213
|
+
background-color: var(--cds-interactive-03, #0f62fe);
|
24214
|
+
color: var(--cds-inverse-01, #ffffff);
|
24215
|
+
}
|
24216
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
|
24072
24217
|
cursor: pointer;
|
24073
24218
|
}
|
24074
|
-
.c4p--non-linear-
|
24219
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
|
24075
24220
|
margin: 0.0625rem 0 0 0;
|
24076
24221
|
vertical-align: text-top;
|
24077
24222
|
}
|
24078
|
-
.c4p--non-linear-
|
24223
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
|
24079
24224
|
transform: rotate(180deg);
|
24080
24225
|
}
|
24081
|
-
.c4p--non-linear-
|
24226
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
|
24082
24227
|
background-color: transparent;
|
24083
|
-
color: var(--cds-
|
24228
|
+
color: var(--cds-interactive-03, #0f62fe);
|
24084
24229
|
}
|
24085
|
-
.c4p--non-linear-
|
24230
|
+
.c4p--non-linear-reading__light .c4p--non-linear-reading__body {
|
24231
|
+
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
24232
|
+
font-weight: var(--cds-body-long-01-font-weight, 400);
|
24233
|
+
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
24234
|
+
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
24235
|
+
display: block;
|
24236
|
+
padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
|
24237
|
+
border-left-width: 0.078125rem;
|
24238
|
+
border-left-style: solid;
|
24239
|
+
margin: var(--cds-spacing-02, 0.25rem) 0;
|
24240
|
+
animation: fade 600ms;
|
24241
|
+
border-left-color: var(--cds-text-01, #161616);
|
24242
|
+
}
|
24243
|
+
|
24244
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed {
|
24086
24245
|
--cds-interactive-01: #0f62fe;
|
24087
24246
|
--cds-interactive-02: #6f6f6f;
|
24088
24247
|
--cds-interactive-03: #ffffff;
|
@@ -24503,21 +24662,1066 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
24503
24662
|
--cds-size-2XLarge: 5rem;
|
24504
24663
|
--cds-icon-size-01: 1rem;
|
24505
24664
|
--cds-icon-size-02: 1.25rem;
|
24506
|
-
|
24507
|
-
|
24508
|
-
|
24509
|
-
|
24510
|
-
|
24511
|
-
|
24512
|
-
|
24513
|
-
border-
|
24514
|
-
|
24515
|
-
|
24516
|
-
|
24517
|
-
|
24518
|
-
|
24519
|
-
|
24520
|
-
|
24665
|
+
height: 1.25rem;
|
24666
|
+
padding-top: 0;
|
24667
|
+
padding-right: 0.1875rem;
|
24668
|
+
border-width: 0.0625rem;
|
24669
|
+
border-style: solid;
|
24670
|
+
border-radius: var(--cds-spacing-04, 0.75rem);
|
24671
|
+
white-space: nowrap;
|
24672
|
+
border-color: var(--cds-icon-03, #ffffff);
|
24673
|
+
background-color: transparent;
|
24674
|
+
color: var(--cds-text-01, #161616);
|
24675
|
+
}
|
24676
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
|
24677
|
+
cursor: pointer;
|
24678
|
+
}
|
24679
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed svg {
|
24680
|
+
margin: 0.0625rem 0 0 0;
|
24681
|
+
vertical-align: text-top;
|
24682
|
+
}
|
24683
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
|
24684
|
+
background-color: var(--cds-icon-03, #ffffff);
|
24685
|
+
color: var(--cds-inverse-01, #ffffff);
|
24686
|
+
}
|
24687
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open {
|
24688
|
+
--cds-interactive-01: #0f62fe;
|
24689
|
+
--cds-interactive-02: #6f6f6f;
|
24690
|
+
--cds-interactive-03: #ffffff;
|
24691
|
+
--cds-interactive-04: #4589ff;
|
24692
|
+
--cds-ui-background: #161616;
|
24693
|
+
--cds-ui-01: #262626;
|
24694
|
+
--cds-ui-02: #393939;
|
24695
|
+
--cds-ui-03: #393939;
|
24696
|
+
--cds-ui-04: #6f6f6f;
|
24697
|
+
--cds-ui-05: #f4f4f4;
|
24698
|
+
--cds-text-01: #f4f4f4;
|
24699
|
+
--cds-text-02: #c6c6c6;
|
24700
|
+
--cds-text-03: #6f6f6f;
|
24701
|
+
--cds-text-04: #ffffff;
|
24702
|
+
--cds-text-05: #8d8d8d;
|
24703
|
+
--cds-text-error: #ff8389;
|
24704
|
+
--cds-icon-01: #f4f4f4;
|
24705
|
+
--cds-icon-02: #c6c6c6;
|
24706
|
+
--cds-icon-03: #ffffff;
|
24707
|
+
--cds-link-01: #78a9ff;
|
24708
|
+
--cds-link-02: #a6c8ff;
|
24709
|
+
--cds-inverse-link: #0f62fe;
|
24710
|
+
--cds-field-01: #262626;
|
24711
|
+
--cds-field-02: #393939;
|
24712
|
+
--cds-inverse-01: #161616;
|
24713
|
+
--cds-inverse-02: #f4f4f4;
|
24714
|
+
--cds-support-01: #fa4d56;
|
24715
|
+
--cds-support-02: #42be65;
|
24716
|
+
--cds-support-03: #f1c21b;
|
24717
|
+
--cds-support-04: #4589ff;
|
24718
|
+
--cds-inverse-support-01: #da1e28;
|
24719
|
+
--cds-inverse-support-02: #24a148;
|
24720
|
+
--cds-inverse-support-03: #f1c21b;
|
24721
|
+
--cds-inverse-support-04: #0f62fe;
|
24722
|
+
--cds-overlay-01: rgba(0, 0, 0, 0.65);
|
24723
|
+
--cds-danger-01: #da1e28;
|
24724
|
+
--cds-danger-02: #fa4d56;
|
24725
|
+
--cds-focus: #ffffff;
|
24726
|
+
--cds-inverse-focus-ui: #0f62fe;
|
24727
|
+
--cds-hover-primary: #0353e9;
|
24728
|
+
--cds-active-primary: #002d9c;
|
24729
|
+
--cds-hover-primary-text: #a6c8ff;
|
24730
|
+
--cds-hover-secondary: #606060;
|
24731
|
+
--cds-active-secondary: #393939;
|
24732
|
+
--cds-hover-tertiary: #f4f4f4;
|
24733
|
+
--cds-active-tertiary: #c6c6c6;
|
24734
|
+
--cds-hover-ui: #353535;
|
24735
|
+
--cds-hover-light-ui: #4c4c4c;
|
24736
|
+
--cds-hover-selected-ui: #4c4c4c;
|
24737
|
+
--cds-active-ui: #525252;
|
24738
|
+
--cds-active-light-ui: #6f6f6f;
|
24739
|
+
--cds-selected-ui: #393939;
|
24740
|
+
--cds-selected-light-ui: #525252;
|
24741
|
+
--cds-inverse-hover-ui: #e5e5e5;
|
24742
|
+
--cds-hover-danger: #b81921;
|
24743
|
+
--cds-active-danger: #750e13;
|
24744
|
+
--cds-hover-row: #353535;
|
24745
|
+
--cds-visited-link: #be95ff;
|
24746
|
+
--cds-disabled-01: #262626;
|
24747
|
+
--cds-disabled-02: #525252;
|
24748
|
+
--cds-disabled-03: #8d8d8d;
|
24749
|
+
--cds-highlight: #002d9c;
|
24750
|
+
--cds-decorative-01: #525252;
|
24751
|
+
--cds-button-separator: #161616;
|
24752
|
+
--cds-skeleton-01: #353535;
|
24753
|
+
--cds-skeleton-02: #525252;
|
24754
|
+
--cds-background: #161616;
|
24755
|
+
--cds-layer: #262626;
|
24756
|
+
--cds-layer-accent: #393939;
|
24757
|
+
--cds-layer-accent-hover: #474747;
|
24758
|
+
--cds-layer-accent-active: #6f6f6f;
|
24759
|
+
--cds-field: #262626;
|
24760
|
+
--cds-background-inverse: #f4f4f4;
|
24761
|
+
--cds-background-brand: #0f62fe;
|
24762
|
+
--cds-interactive: #4589ff;
|
24763
|
+
--cds-border-subtle: #393939;
|
24764
|
+
--cds-border-strong: #6f6f6f;
|
24765
|
+
--cds-border-inverse: #f4f4f4;
|
24766
|
+
--cds-border-interactive: #4589ff;
|
24767
|
+
--cds-text-primary: #f4f4f4;
|
24768
|
+
--cds-text-secondary: #c6c6c6;
|
24769
|
+
--cds-text-placeholder: #6f6f6f;
|
24770
|
+
--cds-text-helper: #8d8d8d;
|
24771
|
+
--cds-text-on-color: #ffffff;
|
24772
|
+
--cds-text-inverse: #161616;
|
24773
|
+
--cds-link-primary: #78a9ff;
|
24774
|
+
--cds-link-secondary: #a6c8ff;
|
24775
|
+
--cds-link-visited: #be95ff;
|
24776
|
+
--cds-link-inverse: #0f62fe;
|
24777
|
+
--cds-icon-primary: #f4f4f4;
|
24778
|
+
--cds-icon-secondary: #c6c6c6;
|
24779
|
+
--cds-icon-on-color: #ffffff;
|
24780
|
+
--cds-icon-inverse: #161616;
|
24781
|
+
--cds-support-error: #fa4d56;
|
24782
|
+
--cds-support-success: #42be65;
|
24783
|
+
--cds-support-warning: #f1c21b;
|
24784
|
+
--cds-support-info: #4589ff;
|
24785
|
+
--cds-support-error-inverse: #da1e28;
|
24786
|
+
--cds-support-success-inverse: #24a148;
|
24787
|
+
--cds-support-warning-inverse: #f1c21b;
|
24788
|
+
--cds-support-info-inverse: #0f62fe;
|
24789
|
+
--cds-overlay: rgba(0, 0, 0, 0.65);
|
24790
|
+
--cds-toggle-off: #6f6f6f;
|
24791
|
+
--cds-shadow: rgba(0, 0, 0, 0.8);
|
24792
|
+
--cds-button-primary: #0f62fe;
|
24793
|
+
--cds-button-secondary: #6f6f6f;
|
24794
|
+
--cds-button-tertiary: #ffffff;
|
24795
|
+
--cds-button-danger-primary: #da1e28;
|
24796
|
+
--cds-button-danger-secondary: #fa4d56;
|
24797
|
+
--cds-background-active: #525252;
|
24798
|
+
--cds-layer-active: #525252;
|
24799
|
+
--cds-button-danger-active: #750e13;
|
24800
|
+
--cds-button-primary-active: #002d9c;
|
24801
|
+
--cds-button-secondary-active: #393939;
|
24802
|
+
--cds-button-tertiary-active: #c6c6c6;
|
24803
|
+
--cds-focus-inset: #161616;
|
24804
|
+
--cds-focus-inverse: #0f62fe;
|
24805
|
+
--cds-background-hover: #353535;
|
24806
|
+
--cds-layer-hover: #353535;
|
24807
|
+
--cds-field-hover: #353535;
|
24808
|
+
--cds-background-inverse-hover: #e5e5e5;
|
24809
|
+
--cds-link-primary-hover: #a6c8ff;
|
24810
|
+
--cds-button-danger-hover: #b81921;
|
24811
|
+
--cds-button-primary-hover: #0353e9;
|
24812
|
+
--cds-button-secondary-hover: #606060;
|
24813
|
+
--cds-button-tertiary-hover: #f4f4f4;
|
24814
|
+
--cds-background-selected: #393939;
|
24815
|
+
--cds-background-selected-hover: #4c4c4c;
|
24816
|
+
--cds-layer-selected: #393939;
|
24817
|
+
--cds-layer-selected-hover: #4c4c4c;
|
24818
|
+
--cds-layer-selected-inverse: #f4f4f4;
|
24819
|
+
--cds-border-subtle-selected: #525252;
|
24820
|
+
--cds-border-disabled: #262626;
|
24821
|
+
--cds-text-disabled: #525252;
|
24822
|
+
--cds-button-disabled: #525252;
|
24823
|
+
--cds-icon-disabled: #525252;
|
24824
|
+
--cds-text-on-color-disabled: #8d8d8d;
|
24825
|
+
--cds-icon-on-color-disabled: #8d8d8d;
|
24826
|
+
--cds-layer-selected-disabled: #8d8d8d;
|
24827
|
+
--cds-skeleton-background: #353535;
|
24828
|
+
--cds-skeleton-element: #525252;
|
24829
|
+
--cds-brand-01: #0f62fe;
|
24830
|
+
--cds-brand-02: #6f6f6f;
|
24831
|
+
--cds-brand-03: #ffffff;
|
24832
|
+
--cds-active-01: #525252;
|
24833
|
+
--cds-hover-field: #353535;
|
24834
|
+
--cds-danger: #da1e28;
|
24835
|
+
--cds-caption-01-font-size: 0.75rem;
|
24836
|
+
--cds-caption-01-font-weight: 400;
|
24837
|
+
--cds-caption-01-line-height: 1.33333;
|
24838
|
+
--cds-caption-01-letter-spacing: 0.32px;
|
24839
|
+
--cds-caption-02-font-size: 0.875rem;
|
24840
|
+
--cds-caption-02-font-weight: 400;
|
24841
|
+
--cds-caption-02-line-height: 1.28572;
|
24842
|
+
--cds-caption-02-letter-spacing: 0.32px;
|
24843
|
+
--cds-label-01-font-size: 0.75rem;
|
24844
|
+
--cds-label-01-font-weight: 400;
|
24845
|
+
--cds-label-01-line-height: 1.33333;
|
24846
|
+
--cds-label-01-letter-spacing: 0.32px;
|
24847
|
+
--cds-label-02-font-size: 0.875rem;
|
24848
|
+
--cds-label-02-font-weight: 400;
|
24849
|
+
--cds-label-02-line-height: 1.28572;
|
24850
|
+
--cds-label-02-letter-spacing: 0.16px;
|
24851
|
+
--cds-helper-text-01-font-size: 0.75rem;
|
24852
|
+
--cds-helper-text-01-line-height: 1.33333;
|
24853
|
+
--cds-helper-text-01-letter-spacing: 0.32px;
|
24854
|
+
--cds-helper-text-02-font-size: 0.875rem;
|
24855
|
+
--cds-helper-text-02-line-height: 1.28572;
|
24856
|
+
--cds-helper-text-02-letter-spacing: 0.16px;
|
24857
|
+
--cds-body-short-01-font-size: 0.875rem;
|
24858
|
+
--cds-body-short-01-font-weight: 400;
|
24859
|
+
--cds-body-short-01-line-height: 1.28572;
|
24860
|
+
--cds-body-short-01-letter-spacing: 0.16px;
|
24861
|
+
--cds-body-long-01-font-size: 0.875rem;
|
24862
|
+
--cds-body-long-01-font-weight: 400;
|
24863
|
+
--cds-body-long-01-line-height: 1.42857;
|
24864
|
+
--cds-body-long-01-letter-spacing: 0.16px;
|
24865
|
+
--cds-body-short-02-font-size: 1rem;
|
24866
|
+
--cds-body-short-02-font-weight: 400;
|
24867
|
+
--cds-body-short-02-line-height: 1.375;
|
24868
|
+
--cds-body-short-02-letter-spacing: 0;
|
24869
|
+
--cds-body-long-02-font-size: 1rem;
|
24870
|
+
--cds-body-long-02-font-weight: 400;
|
24871
|
+
--cds-body-long-02-line-height: 1.5;
|
24872
|
+
--cds-body-long-02-letter-spacing: 0;
|
24873
|
+
--cds-code-01-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
|
24874
|
+
--cds-code-01-font-size: 0.75rem;
|
24875
|
+
--cds-code-01-font-weight: 400;
|
24876
|
+
--cds-code-01-line-height: 1.33333;
|
24877
|
+
--cds-code-01-letter-spacing: 0.32px;
|
24878
|
+
--cds-code-02-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
|
24879
|
+
--cds-code-02-font-size: 0.875rem;
|
24880
|
+
--cds-code-02-font-weight: 400;
|
24881
|
+
--cds-code-02-line-height: 1.42857;
|
24882
|
+
--cds-code-02-letter-spacing: 0.32px;
|
24883
|
+
--cds-heading-01-font-size: 0.875rem;
|
24884
|
+
--cds-heading-01-font-weight: 600;
|
24885
|
+
--cds-heading-01-line-height: 1.42857;
|
24886
|
+
--cds-heading-01-letter-spacing: 0.16px;
|
24887
|
+
--cds-productive-heading-01-font-size: 0.875rem;
|
24888
|
+
--cds-productive-heading-01-font-weight: 600;
|
24889
|
+
--cds-productive-heading-01-line-height: 1.28572;
|
24890
|
+
--cds-productive-heading-01-letter-spacing: 0.16px;
|
24891
|
+
--cds-heading-02-font-size: 1rem;
|
24892
|
+
--cds-heading-02-font-weight: 600;
|
24893
|
+
--cds-heading-02-line-height: 1.5;
|
24894
|
+
--cds-heading-02-letter-spacing: 0;
|
24895
|
+
--cds-productive-heading-02-font-size: 1rem;
|
24896
|
+
--cds-productive-heading-02-font-weight: 600;
|
24897
|
+
--cds-productive-heading-02-line-height: 1.375;
|
24898
|
+
--cds-productive-heading-02-letter-spacing: 0;
|
24899
|
+
--cds-productive-heading-03-font-size: 1.25rem;
|
24900
|
+
--cds-productive-heading-03-font-weight: 400;
|
24901
|
+
--cds-productive-heading-03-line-height: 1.4;
|
24902
|
+
--cds-productive-heading-03-letter-spacing: 0;
|
24903
|
+
--cds-productive-heading-04-font-size: 1.75rem;
|
24904
|
+
--cds-productive-heading-04-font-weight: 400;
|
24905
|
+
--cds-productive-heading-04-line-height: 1.28572;
|
24906
|
+
--cds-productive-heading-04-letter-spacing: 0;
|
24907
|
+
--cds-productive-heading-05-font-size: 2rem;
|
24908
|
+
--cds-productive-heading-05-font-weight: 400;
|
24909
|
+
--cds-productive-heading-05-line-height: 1.25;
|
24910
|
+
--cds-productive-heading-05-letter-spacing: 0;
|
24911
|
+
--cds-productive-heading-06-font-size: 2.625rem;
|
24912
|
+
--cds-productive-heading-06-font-weight: 300;
|
24913
|
+
--cds-productive-heading-06-line-height: 1.199;
|
24914
|
+
--cds-productive-heading-06-letter-spacing: 0;
|
24915
|
+
--cds-productive-heading-07-font-size: 3.375rem;
|
24916
|
+
--cds-productive-heading-07-font-weight: 300;
|
24917
|
+
--cds-productive-heading-07-line-height: 1.199;
|
24918
|
+
--cds-productive-heading-07-letter-spacing: 0;
|
24919
|
+
--cds-expressive-heading-01-font-size: 0.875rem;
|
24920
|
+
--cds-expressive-heading-01-font-weight: 600;
|
24921
|
+
--cds-expressive-heading-01-line-height: 1.25;
|
24922
|
+
--cds-expressive-heading-01-letter-spacing: 0.16px;
|
24923
|
+
--cds-expressive-heading-02-font-size: 1rem;
|
24924
|
+
--cds-expressive-heading-02-font-weight: 600;
|
24925
|
+
--cds-expressive-heading-02-line-height: 1.5;
|
24926
|
+
--cds-expressive-heading-02-letter-spacing: 0;
|
24927
|
+
--cds-expressive-heading-03-font-size: 1.25rem;
|
24928
|
+
--cds-expressive-heading-03-font-weight: 400;
|
24929
|
+
--cds-expressive-heading-03-line-height: 1.4;
|
24930
|
+
--cds-expressive-heading-03-letter-spacing: 0;
|
24931
|
+
--cds-expressive-heading-04-font-size: 1.75rem;
|
24932
|
+
--cds-expressive-heading-04-font-weight: 400;
|
24933
|
+
--cds-expressive-heading-04-line-height: 1.28572;
|
24934
|
+
--cds-expressive-heading-04-letter-spacing: 0;
|
24935
|
+
--cds-expressive-heading-05-font-size: 2rem;
|
24936
|
+
--cds-expressive-heading-05-font-weight: 400;
|
24937
|
+
--cds-expressive-heading-05-line-height: 1.25;
|
24938
|
+
--cds-expressive-heading-05-letter-spacing: 0;
|
24939
|
+
--cds-expressive-heading-06-font-size: 2rem;
|
24940
|
+
--cds-expressive-heading-06-font-weight: 600;
|
24941
|
+
--cds-expressive-heading-06-line-height: 1.25;
|
24942
|
+
--cds-expressive-heading-06-letter-spacing: 0;
|
24943
|
+
--cds-expressive-paragraph-01-font-size: 1.5rem;
|
24944
|
+
--cds-expressive-paragraph-01-font-weight: 300;
|
24945
|
+
--cds-expressive-paragraph-01-line-height: 1.334;
|
24946
|
+
--cds-expressive-paragraph-01-letter-spacing: 0;
|
24947
|
+
--cds-quotation-01-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
|
24948
|
+
--cds-quotation-01-font-size: 1.25rem;
|
24949
|
+
--cds-quotation-01-font-weight: 400;
|
24950
|
+
--cds-quotation-01-line-height: 1.3;
|
24951
|
+
--cds-quotation-01-letter-spacing: 0;
|
24952
|
+
--cds-quotation-02-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
|
24953
|
+
--cds-quotation-02-font-size: 2rem;
|
24954
|
+
--cds-quotation-02-font-weight: 300;
|
24955
|
+
--cds-quotation-02-line-height: 1.25;
|
24956
|
+
--cds-quotation-02-letter-spacing: 0;
|
24957
|
+
--cds-display-01-font-size: 2.625rem;
|
24958
|
+
--cds-display-01-font-weight: 300;
|
24959
|
+
--cds-display-01-line-height: 1.19;
|
24960
|
+
--cds-display-01-letter-spacing: 0;
|
24961
|
+
--cds-display-02-font-size: 2.625rem;
|
24962
|
+
--cds-display-02-font-weight: 600;
|
24963
|
+
--cds-display-02-line-height: 1.19;
|
24964
|
+
--cds-display-02-letter-spacing: 0;
|
24965
|
+
--cds-display-03-font-size: 2.625rem;
|
24966
|
+
--cds-display-03-font-weight: 300;
|
24967
|
+
--cds-display-03-line-height: 1.19;
|
24968
|
+
--cds-display-03-letter-spacing: 0;
|
24969
|
+
--cds-display-04-font-size: 2.625rem;
|
24970
|
+
--cds-display-04-font-weight: 300;
|
24971
|
+
--cds-display-04-line-height: 1.19;
|
24972
|
+
--cds-display-04-letter-spacing: 0;
|
24973
|
+
--cds-legal-01-font-size: 0.75rem;
|
24974
|
+
--cds-legal-01-font-weight: 400;
|
24975
|
+
--cds-legal-01-line-height: 1.33333;
|
24976
|
+
--cds-legal-01-letter-spacing: 0.32px;
|
24977
|
+
--cds-legal-02-font-size: 0.875rem;
|
24978
|
+
--cds-legal-02-font-weight: 400;
|
24979
|
+
--cds-legal-02-line-height: 1.28572;
|
24980
|
+
--cds-legal-02-letter-spacing: 0.16px;
|
24981
|
+
--cds-body-compact-01-font-size: 0.875rem;
|
24982
|
+
--cds-body-compact-01-font-weight: 400;
|
24983
|
+
--cds-body-compact-01-line-height: 1.28572;
|
24984
|
+
--cds-body-compact-01-letter-spacing: 0.16px;
|
24985
|
+
--cds-body-compact-02-font-size: 1rem;
|
24986
|
+
--cds-body-compact-02-font-weight: 400;
|
24987
|
+
--cds-body-compact-02-line-height: 1.375;
|
24988
|
+
--cds-body-compact-02-letter-spacing: 0;
|
24989
|
+
--cds-body-01-font-size: 0.875rem;
|
24990
|
+
--cds-body-01-font-weight: 400;
|
24991
|
+
--cds-body-01-line-height: 1.42857;
|
24992
|
+
--cds-body-01-letter-spacing: 0.16px;
|
24993
|
+
--cds-body-02-font-size: 1rem;
|
24994
|
+
--cds-body-02-font-weight: 400;
|
24995
|
+
--cds-body-02-line-height: 1.5;
|
24996
|
+
--cds-body-02-letter-spacing: 0;
|
24997
|
+
--cds-heading-compact-01-font-size: 0.875rem;
|
24998
|
+
--cds-heading-compact-01-font-weight: 600;
|
24999
|
+
--cds-heading-compact-01-line-height: 1.28572;
|
25000
|
+
--cds-heading-compact-01-letter-spacing: 0.16px;
|
25001
|
+
--cds-heading-compact-02-font-size: 1rem;
|
25002
|
+
--cds-heading-compact-02-font-weight: 600;
|
25003
|
+
--cds-heading-compact-02-line-height: 1.375;
|
25004
|
+
--cds-heading-compact-02-letter-spacing: 0;
|
25005
|
+
--cds-heading-03-font-size: 1.25rem;
|
25006
|
+
--cds-heading-03-font-weight: 400;
|
25007
|
+
--cds-heading-03-line-height: 1.4;
|
25008
|
+
--cds-heading-03-letter-spacing: 0;
|
25009
|
+
--cds-heading-04-font-size: 1.75rem;
|
25010
|
+
--cds-heading-04-font-weight: 400;
|
25011
|
+
--cds-heading-04-line-height: 1.28572;
|
25012
|
+
--cds-heading-04-letter-spacing: 0;
|
25013
|
+
--cds-heading-05-font-size: 2rem;
|
25014
|
+
--cds-heading-05-font-weight: 400;
|
25015
|
+
--cds-heading-05-line-height: 1.25;
|
25016
|
+
--cds-heading-05-letter-spacing: 0;
|
25017
|
+
--cds-heading-06-font-size: 2.625rem;
|
25018
|
+
--cds-heading-06-font-weight: 300;
|
25019
|
+
--cds-heading-06-line-height: 1.199;
|
25020
|
+
--cds-heading-06-letter-spacing: 0;
|
25021
|
+
--cds-heading-07-font-size: 3.375rem;
|
25022
|
+
--cds-heading-07-font-weight: 300;
|
25023
|
+
--cds-heading-07-line-height: 1.199;
|
25024
|
+
--cds-heading-07-letter-spacing: 0;
|
25025
|
+
--cds-fluid-heading-03-font-size: 1.25rem;
|
25026
|
+
--cds-fluid-heading-03-font-weight: 400;
|
25027
|
+
--cds-fluid-heading-03-line-height: 1.4;
|
25028
|
+
--cds-fluid-heading-03-letter-spacing: 0;
|
25029
|
+
--cds-fluid-heading-04-font-size: 1.75rem;
|
25030
|
+
--cds-fluid-heading-04-font-weight: 400;
|
25031
|
+
--cds-fluid-heading-04-line-height: 1.28572;
|
25032
|
+
--cds-fluid-heading-04-letter-spacing: 0;
|
25033
|
+
--cds-fluid-heading-05-font-size: 2rem;
|
25034
|
+
--cds-fluid-heading-05-font-weight: 400;
|
25035
|
+
--cds-fluid-heading-05-line-height: 1.25;
|
25036
|
+
--cds-fluid-heading-05-letter-spacing: 0;
|
25037
|
+
--cds-fluid-heading-06-font-size: 2rem;
|
25038
|
+
--cds-fluid-heading-06-font-weight: 600;
|
25039
|
+
--cds-fluid-heading-06-line-height: 1.25;
|
25040
|
+
--cds-fluid-heading-06-letter-spacing: 0;
|
25041
|
+
--cds-fluid-paragraph-01-font-size: 1.5rem;
|
25042
|
+
--cds-fluid-paragraph-01-font-weight: 300;
|
25043
|
+
--cds-fluid-paragraph-01-line-height: 1.334;
|
25044
|
+
--cds-fluid-paragraph-01-letter-spacing: 0;
|
25045
|
+
--cds-fluid-quotation-01-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
|
25046
|
+
--cds-fluid-quotation-01-font-size: 1.25rem;
|
25047
|
+
--cds-fluid-quotation-01-font-weight: 400;
|
25048
|
+
--cds-fluid-quotation-01-line-height: 1.3;
|
25049
|
+
--cds-fluid-quotation-01-letter-spacing: 0;
|
25050
|
+
--cds-fluid-quotation-02-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
|
25051
|
+
--cds-fluid-quotation-02-font-size: 2rem;
|
25052
|
+
--cds-fluid-quotation-02-font-weight: 300;
|
25053
|
+
--cds-fluid-quotation-02-line-height: 1.25;
|
25054
|
+
--cds-fluid-quotation-02-letter-spacing: 0;
|
25055
|
+
--cds-fluid-display-01-font-size: 2.625rem;
|
25056
|
+
--cds-fluid-display-01-font-weight: 300;
|
25057
|
+
--cds-fluid-display-01-line-height: 1.19;
|
25058
|
+
--cds-fluid-display-01-letter-spacing: 0;
|
25059
|
+
--cds-fluid-display-02-font-size: 2.625rem;
|
25060
|
+
--cds-fluid-display-02-font-weight: 600;
|
25061
|
+
--cds-fluid-display-02-line-height: 1.19;
|
25062
|
+
--cds-fluid-display-02-letter-spacing: 0;
|
25063
|
+
--cds-fluid-display-03-font-size: 2.625rem;
|
25064
|
+
--cds-fluid-display-03-font-weight: 300;
|
25065
|
+
--cds-fluid-display-03-line-height: 1.19;
|
25066
|
+
--cds-fluid-display-03-letter-spacing: 0;
|
25067
|
+
--cds-fluid-display-04-font-size: 2.625rem;
|
25068
|
+
--cds-fluid-display-04-font-weight: 300;
|
25069
|
+
--cds-fluid-display-04-line-height: 1.19;
|
25070
|
+
--cds-fluid-display-04-letter-spacing: 0;
|
25071
|
+
--cds-spacing-01: 0.125rem;
|
25072
|
+
--cds-spacing-02: 0.25rem;
|
25073
|
+
--cds-spacing-03: 0.5rem;
|
25074
|
+
--cds-spacing-04: 0.75rem;
|
25075
|
+
--cds-spacing-05: 1rem;
|
25076
|
+
--cds-spacing-06: 1.5rem;
|
25077
|
+
--cds-spacing-07: 2rem;
|
25078
|
+
--cds-spacing-08: 2.5rem;
|
25079
|
+
--cds-spacing-09: 3rem;
|
25080
|
+
--cds-spacing-10: 4rem;
|
25081
|
+
--cds-spacing-11: 5rem;
|
25082
|
+
--cds-spacing-12: 6rem;
|
25083
|
+
--cds-spacing-13: 10rem;
|
25084
|
+
--cds-fluid-spacing-01: 0;
|
25085
|
+
--cds-fluid-spacing-02: 2vw;
|
25086
|
+
--cds-fluid-spacing-03: 5vw;
|
25087
|
+
--cds-fluid-spacing-04: 10vw;
|
25088
|
+
--cds-layout-01: 1rem;
|
25089
|
+
--cds-layout-02: 1.5rem;
|
25090
|
+
--cds-layout-03: 2rem;
|
25091
|
+
--cds-layout-04: 3rem;
|
25092
|
+
--cds-layout-05: 4rem;
|
25093
|
+
--cds-layout-06: 6rem;
|
25094
|
+
--cds-layout-07: 10rem;
|
25095
|
+
--cds-container-01: 1.5rem;
|
25096
|
+
--cds-container-02: 2rem;
|
25097
|
+
--cds-container-03: 2.5rem;
|
25098
|
+
--cds-container-04: 3rem;
|
25099
|
+
--cds-container-05: 4rem;
|
25100
|
+
--cds-size-xsmall: 1.5rem;
|
25101
|
+
--cds-size-small: 2rem;
|
25102
|
+
--cds-size-medium: 2.5rem;
|
25103
|
+
--cds-size-large: 3rem;
|
25104
|
+
--cds-size-xlarge: 4rem;
|
25105
|
+
--cds-size-2XLarge: 5rem;
|
25106
|
+
--cds-icon-size-01: 1rem;
|
25107
|
+
--cds-icon-size-02: 1.25rem;
|
25108
|
+
height: 1.25rem;
|
25109
|
+
padding-top: 0;
|
25110
|
+
padding-right: 0.1875rem;
|
25111
|
+
border-width: 0.0625rem;
|
25112
|
+
border-style: solid;
|
25113
|
+
border-radius: var(--cds-spacing-04, 0.75rem);
|
25114
|
+
white-space: nowrap;
|
25115
|
+
border-color: var(--cds-icon-03, #ffffff);
|
25116
|
+
background-color: var(--cds-icon-03, #ffffff);
|
25117
|
+
color: var(--cds-inverse-01, #ffffff);
|
25118
|
+
}
|
25119
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
|
25120
|
+
cursor: pointer;
|
25121
|
+
}
|
25122
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
|
25123
|
+
margin: 0.0625rem 0 0 0;
|
25124
|
+
vertical-align: text-top;
|
25125
|
+
}
|
25126
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
|
25127
|
+
transform: rotate(180deg);
|
25128
|
+
}
|
25129
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
|
25130
|
+
background-color: transparent;
|
25131
|
+
color: var(--cds-text-01, #161616);
|
25132
|
+
}
|
25133
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__body {
|
25134
|
+
--cds-interactive-01: #0f62fe;
|
25135
|
+
--cds-interactive-02: #6f6f6f;
|
25136
|
+
--cds-interactive-03: #ffffff;
|
25137
|
+
--cds-interactive-04: #4589ff;
|
25138
|
+
--cds-ui-background: #161616;
|
25139
|
+
--cds-ui-01: #262626;
|
25140
|
+
--cds-ui-02: #393939;
|
25141
|
+
--cds-ui-03: #393939;
|
25142
|
+
--cds-ui-04: #6f6f6f;
|
25143
|
+
--cds-ui-05: #f4f4f4;
|
25144
|
+
--cds-text-01: #f4f4f4;
|
25145
|
+
--cds-text-02: #c6c6c6;
|
25146
|
+
--cds-text-03: #6f6f6f;
|
25147
|
+
--cds-text-04: #ffffff;
|
25148
|
+
--cds-text-05: #8d8d8d;
|
25149
|
+
--cds-text-error: #ff8389;
|
25150
|
+
--cds-icon-01: #f4f4f4;
|
25151
|
+
--cds-icon-02: #c6c6c6;
|
25152
|
+
--cds-icon-03: #ffffff;
|
25153
|
+
--cds-link-01: #78a9ff;
|
25154
|
+
--cds-link-02: #a6c8ff;
|
25155
|
+
--cds-inverse-link: #0f62fe;
|
25156
|
+
--cds-field-01: #262626;
|
25157
|
+
--cds-field-02: #393939;
|
25158
|
+
--cds-inverse-01: #161616;
|
25159
|
+
--cds-inverse-02: #f4f4f4;
|
25160
|
+
--cds-support-01: #fa4d56;
|
25161
|
+
--cds-support-02: #42be65;
|
25162
|
+
--cds-support-03: #f1c21b;
|
25163
|
+
--cds-support-04: #4589ff;
|
25164
|
+
--cds-inverse-support-01: #da1e28;
|
25165
|
+
--cds-inverse-support-02: #24a148;
|
25166
|
+
--cds-inverse-support-03: #f1c21b;
|
25167
|
+
--cds-inverse-support-04: #0f62fe;
|
25168
|
+
--cds-overlay-01: rgba(0, 0, 0, 0.65);
|
25169
|
+
--cds-danger-01: #da1e28;
|
25170
|
+
--cds-danger-02: #fa4d56;
|
25171
|
+
--cds-focus: #ffffff;
|
25172
|
+
--cds-inverse-focus-ui: #0f62fe;
|
25173
|
+
--cds-hover-primary: #0353e9;
|
25174
|
+
--cds-active-primary: #002d9c;
|
25175
|
+
--cds-hover-primary-text: #a6c8ff;
|
25176
|
+
--cds-hover-secondary: #606060;
|
25177
|
+
--cds-active-secondary: #393939;
|
25178
|
+
--cds-hover-tertiary: #f4f4f4;
|
25179
|
+
--cds-active-tertiary: #c6c6c6;
|
25180
|
+
--cds-hover-ui: #353535;
|
25181
|
+
--cds-hover-light-ui: #4c4c4c;
|
25182
|
+
--cds-hover-selected-ui: #4c4c4c;
|
25183
|
+
--cds-active-ui: #525252;
|
25184
|
+
--cds-active-light-ui: #6f6f6f;
|
25185
|
+
--cds-selected-ui: #393939;
|
25186
|
+
--cds-selected-light-ui: #525252;
|
25187
|
+
--cds-inverse-hover-ui: #e5e5e5;
|
25188
|
+
--cds-hover-danger: #b81921;
|
25189
|
+
--cds-active-danger: #750e13;
|
25190
|
+
--cds-hover-row: #353535;
|
25191
|
+
--cds-visited-link: #be95ff;
|
25192
|
+
--cds-disabled-01: #262626;
|
25193
|
+
--cds-disabled-02: #525252;
|
25194
|
+
--cds-disabled-03: #8d8d8d;
|
25195
|
+
--cds-highlight: #002d9c;
|
25196
|
+
--cds-decorative-01: #525252;
|
25197
|
+
--cds-button-separator: #161616;
|
25198
|
+
--cds-skeleton-01: #353535;
|
25199
|
+
--cds-skeleton-02: #525252;
|
25200
|
+
--cds-background: #161616;
|
25201
|
+
--cds-layer: #262626;
|
25202
|
+
--cds-layer-accent: #393939;
|
25203
|
+
--cds-layer-accent-hover: #474747;
|
25204
|
+
--cds-layer-accent-active: #6f6f6f;
|
25205
|
+
--cds-field: #262626;
|
25206
|
+
--cds-background-inverse: #f4f4f4;
|
25207
|
+
--cds-background-brand: #0f62fe;
|
25208
|
+
--cds-interactive: #4589ff;
|
25209
|
+
--cds-border-subtle: #393939;
|
25210
|
+
--cds-border-strong: #6f6f6f;
|
25211
|
+
--cds-border-inverse: #f4f4f4;
|
25212
|
+
--cds-border-interactive: #4589ff;
|
25213
|
+
--cds-text-primary: #f4f4f4;
|
25214
|
+
--cds-text-secondary: #c6c6c6;
|
25215
|
+
--cds-text-placeholder: #6f6f6f;
|
25216
|
+
--cds-text-helper: #8d8d8d;
|
25217
|
+
--cds-text-on-color: #ffffff;
|
25218
|
+
--cds-text-inverse: #161616;
|
25219
|
+
--cds-link-primary: #78a9ff;
|
25220
|
+
--cds-link-secondary: #a6c8ff;
|
25221
|
+
--cds-link-visited: #be95ff;
|
25222
|
+
--cds-link-inverse: #0f62fe;
|
25223
|
+
--cds-icon-primary: #f4f4f4;
|
25224
|
+
--cds-icon-secondary: #c6c6c6;
|
25225
|
+
--cds-icon-on-color: #ffffff;
|
25226
|
+
--cds-icon-inverse: #161616;
|
25227
|
+
--cds-support-error: #fa4d56;
|
25228
|
+
--cds-support-success: #42be65;
|
25229
|
+
--cds-support-warning: #f1c21b;
|
25230
|
+
--cds-support-info: #4589ff;
|
25231
|
+
--cds-support-error-inverse: #da1e28;
|
25232
|
+
--cds-support-success-inverse: #24a148;
|
25233
|
+
--cds-support-warning-inverse: #f1c21b;
|
25234
|
+
--cds-support-info-inverse: #0f62fe;
|
25235
|
+
--cds-overlay: rgba(0, 0, 0, 0.65);
|
25236
|
+
--cds-toggle-off: #6f6f6f;
|
25237
|
+
--cds-shadow: rgba(0, 0, 0, 0.8);
|
25238
|
+
--cds-button-primary: #0f62fe;
|
25239
|
+
--cds-button-secondary: #6f6f6f;
|
25240
|
+
--cds-button-tertiary: #ffffff;
|
25241
|
+
--cds-button-danger-primary: #da1e28;
|
25242
|
+
--cds-button-danger-secondary: #fa4d56;
|
25243
|
+
--cds-background-active: #525252;
|
25244
|
+
--cds-layer-active: #525252;
|
25245
|
+
--cds-button-danger-active: #750e13;
|
25246
|
+
--cds-button-primary-active: #002d9c;
|
25247
|
+
--cds-button-secondary-active: #393939;
|
25248
|
+
--cds-button-tertiary-active: #c6c6c6;
|
25249
|
+
--cds-focus-inset: #161616;
|
25250
|
+
--cds-focus-inverse: #0f62fe;
|
25251
|
+
--cds-background-hover: #353535;
|
25252
|
+
--cds-layer-hover: #353535;
|
25253
|
+
--cds-field-hover: #353535;
|
25254
|
+
--cds-background-inverse-hover: #e5e5e5;
|
25255
|
+
--cds-link-primary-hover: #a6c8ff;
|
25256
|
+
--cds-button-danger-hover: #b81921;
|
25257
|
+
--cds-button-primary-hover: #0353e9;
|
25258
|
+
--cds-button-secondary-hover: #606060;
|
25259
|
+
--cds-button-tertiary-hover: #f4f4f4;
|
25260
|
+
--cds-background-selected: #393939;
|
25261
|
+
--cds-background-selected-hover: #4c4c4c;
|
25262
|
+
--cds-layer-selected: #393939;
|
25263
|
+
--cds-layer-selected-hover: #4c4c4c;
|
25264
|
+
--cds-layer-selected-inverse: #f4f4f4;
|
25265
|
+
--cds-border-subtle-selected: #525252;
|
25266
|
+
--cds-border-disabled: #262626;
|
25267
|
+
--cds-text-disabled: #525252;
|
25268
|
+
--cds-button-disabled: #525252;
|
25269
|
+
--cds-icon-disabled: #525252;
|
25270
|
+
--cds-text-on-color-disabled: #8d8d8d;
|
25271
|
+
--cds-icon-on-color-disabled: #8d8d8d;
|
25272
|
+
--cds-layer-selected-disabled: #8d8d8d;
|
25273
|
+
--cds-skeleton-background: #353535;
|
25274
|
+
--cds-skeleton-element: #525252;
|
25275
|
+
--cds-brand-01: #0f62fe;
|
25276
|
+
--cds-brand-02: #6f6f6f;
|
25277
|
+
--cds-brand-03: #ffffff;
|
25278
|
+
--cds-active-01: #525252;
|
25279
|
+
--cds-hover-field: #353535;
|
25280
|
+
--cds-danger: #da1e28;
|
25281
|
+
--cds-caption-01-font-size: 0.75rem;
|
25282
|
+
--cds-caption-01-font-weight: 400;
|
25283
|
+
--cds-caption-01-line-height: 1.33333;
|
25284
|
+
--cds-caption-01-letter-spacing: 0.32px;
|
25285
|
+
--cds-caption-02-font-size: 0.875rem;
|
25286
|
+
--cds-caption-02-font-weight: 400;
|
25287
|
+
--cds-caption-02-line-height: 1.28572;
|
25288
|
+
--cds-caption-02-letter-spacing: 0.32px;
|
25289
|
+
--cds-label-01-font-size: 0.75rem;
|
25290
|
+
--cds-label-01-font-weight: 400;
|
25291
|
+
--cds-label-01-line-height: 1.33333;
|
25292
|
+
--cds-label-01-letter-spacing: 0.32px;
|
25293
|
+
--cds-label-02-font-size: 0.875rem;
|
25294
|
+
--cds-label-02-font-weight: 400;
|
25295
|
+
--cds-label-02-line-height: 1.28572;
|
25296
|
+
--cds-label-02-letter-spacing: 0.16px;
|
25297
|
+
--cds-helper-text-01-font-size: 0.75rem;
|
25298
|
+
--cds-helper-text-01-line-height: 1.33333;
|
25299
|
+
--cds-helper-text-01-letter-spacing: 0.32px;
|
25300
|
+
--cds-helper-text-02-font-size: 0.875rem;
|
25301
|
+
--cds-helper-text-02-line-height: 1.28572;
|
25302
|
+
--cds-helper-text-02-letter-spacing: 0.16px;
|
25303
|
+
--cds-body-short-01-font-size: 0.875rem;
|
25304
|
+
--cds-body-short-01-font-weight: 400;
|
25305
|
+
--cds-body-short-01-line-height: 1.28572;
|
25306
|
+
--cds-body-short-01-letter-spacing: 0.16px;
|
25307
|
+
--cds-body-long-01-font-size: 0.875rem;
|
25308
|
+
--cds-body-long-01-font-weight: 400;
|
25309
|
+
--cds-body-long-01-line-height: 1.42857;
|
25310
|
+
--cds-body-long-01-letter-spacing: 0.16px;
|
25311
|
+
--cds-body-short-02-font-size: 1rem;
|
25312
|
+
--cds-body-short-02-font-weight: 400;
|
25313
|
+
--cds-body-short-02-line-height: 1.375;
|
25314
|
+
--cds-body-short-02-letter-spacing: 0;
|
25315
|
+
--cds-body-long-02-font-size: 1rem;
|
25316
|
+
--cds-body-long-02-font-weight: 400;
|
25317
|
+
--cds-body-long-02-line-height: 1.5;
|
25318
|
+
--cds-body-long-02-letter-spacing: 0;
|
25319
|
+
--cds-code-01-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
|
25320
|
+
--cds-code-01-font-size: 0.75rem;
|
25321
|
+
--cds-code-01-font-weight: 400;
|
25322
|
+
--cds-code-01-line-height: 1.33333;
|
25323
|
+
--cds-code-01-letter-spacing: 0.32px;
|
25324
|
+
--cds-code-02-font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
|
25325
|
+
--cds-code-02-font-size: 0.875rem;
|
25326
|
+
--cds-code-02-font-weight: 400;
|
25327
|
+
--cds-code-02-line-height: 1.42857;
|
25328
|
+
--cds-code-02-letter-spacing: 0.32px;
|
25329
|
+
--cds-heading-01-font-size: 0.875rem;
|
25330
|
+
--cds-heading-01-font-weight: 600;
|
25331
|
+
--cds-heading-01-line-height: 1.42857;
|
25332
|
+
--cds-heading-01-letter-spacing: 0.16px;
|
25333
|
+
--cds-productive-heading-01-font-size: 0.875rem;
|
25334
|
+
--cds-productive-heading-01-font-weight: 600;
|
25335
|
+
--cds-productive-heading-01-line-height: 1.28572;
|
25336
|
+
--cds-productive-heading-01-letter-spacing: 0.16px;
|
25337
|
+
--cds-heading-02-font-size: 1rem;
|
25338
|
+
--cds-heading-02-font-weight: 600;
|
25339
|
+
--cds-heading-02-line-height: 1.5;
|
25340
|
+
--cds-heading-02-letter-spacing: 0;
|
25341
|
+
--cds-productive-heading-02-font-size: 1rem;
|
25342
|
+
--cds-productive-heading-02-font-weight: 600;
|
25343
|
+
--cds-productive-heading-02-line-height: 1.375;
|
25344
|
+
--cds-productive-heading-02-letter-spacing: 0;
|
25345
|
+
--cds-productive-heading-03-font-size: 1.25rem;
|
25346
|
+
--cds-productive-heading-03-font-weight: 400;
|
25347
|
+
--cds-productive-heading-03-line-height: 1.4;
|
25348
|
+
--cds-productive-heading-03-letter-spacing: 0;
|
25349
|
+
--cds-productive-heading-04-font-size: 1.75rem;
|
25350
|
+
--cds-productive-heading-04-font-weight: 400;
|
25351
|
+
--cds-productive-heading-04-line-height: 1.28572;
|
25352
|
+
--cds-productive-heading-04-letter-spacing: 0;
|
25353
|
+
--cds-productive-heading-05-font-size: 2rem;
|
25354
|
+
--cds-productive-heading-05-font-weight: 400;
|
25355
|
+
--cds-productive-heading-05-line-height: 1.25;
|
25356
|
+
--cds-productive-heading-05-letter-spacing: 0;
|
25357
|
+
--cds-productive-heading-06-font-size: 2.625rem;
|
25358
|
+
--cds-productive-heading-06-font-weight: 300;
|
25359
|
+
--cds-productive-heading-06-line-height: 1.199;
|
25360
|
+
--cds-productive-heading-06-letter-spacing: 0;
|
25361
|
+
--cds-productive-heading-07-font-size: 3.375rem;
|
25362
|
+
--cds-productive-heading-07-font-weight: 300;
|
25363
|
+
--cds-productive-heading-07-line-height: 1.199;
|
25364
|
+
--cds-productive-heading-07-letter-spacing: 0;
|
25365
|
+
--cds-expressive-heading-01-font-size: 0.875rem;
|
25366
|
+
--cds-expressive-heading-01-font-weight: 600;
|
25367
|
+
--cds-expressive-heading-01-line-height: 1.25;
|
25368
|
+
--cds-expressive-heading-01-letter-spacing: 0.16px;
|
25369
|
+
--cds-expressive-heading-02-font-size: 1rem;
|
25370
|
+
--cds-expressive-heading-02-font-weight: 600;
|
25371
|
+
--cds-expressive-heading-02-line-height: 1.5;
|
25372
|
+
--cds-expressive-heading-02-letter-spacing: 0;
|
25373
|
+
--cds-expressive-heading-03-font-size: 1.25rem;
|
25374
|
+
--cds-expressive-heading-03-font-weight: 400;
|
25375
|
+
--cds-expressive-heading-03-line-height: 1.4;
|
25376
|
+
--cds-expressive-heading-03-letter-spacing: 0;
|
25377
|
+
--cds-expressive-heading-04-font-size: 1.75rem;
|
25378
|
+
--cds-expressive-heading-04-font-weight: 400;
|
25379
|
+
--cds-expressive-heading-04-line-height: 1.28572;
|
25380
|
+
--cds-expressive-heading-04-letter-spacing: 0;
|
25381
|
+
--cds-expressive-heading-05-font-size: 2rem;
|
25382
|
+
--cds-expressive-heading-05-font-weight: 400;
|
25383
|
+
--cds-expressive-heading-05-line-height: 1.25;
|
25384
|
+
--cds-expressive-heading-05-letter-spacing: 0;
|
25385
|
+
--cds-expressive-heading-06-font-size: 2rem;
|
25386
|
+
--cds-expressive-heading-06-font-weight: 600;
|
25387
|
+
--cds-expressive-heading-06-line-height: 1.25;
|
25388
|
+
--cds-expressive-heading-06-letter-spacing: 0;
|
25389
|
+
--cds-expressive-paragraph-01-font-size: 1.5rem;
|
25390
|
+
--cds-expressive-paragraph-01-font-weight: 300;
|
25391
|
+
--cds-expressive-paragraph-01-line-height: 1.334;
|
25392
|
+
--cds-expressive-paragraph-01-letter-spacing: 0;
|
25393
|
+
--cds-quotation-01-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
|
25394
|
+
--cds-quotation-01-font-size: 1.25rem;
|
25395
|
+
--cds-quotation-01-font-weight: 400;
|
25396
|
+
--cds-quotation-01-line-height: 1.3;
|
25397
|
+
--cds-quotation-01-letter-spacing: 0;
|
25398
|
+
--cds-quotation-02-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
|
25399
|
+
--cds-quotation-02-font-size: 2rem;
|
25400
|
+
--cds-quotation-02-font-weight: 300;
|
25401
|
+
--cds-quotation-02-line-height: 1.25;
|
25402
|
+
--cds-quotation-02-letter-spacing: 0;
|
25403
|
+
--cds-display-01-font-size: 2.625rem;
|
25404
|
+
--cds-display-01-font-weight: 300;
|
25405
|
+
--cds-display-01-line-height: 1.19;
|
25406
|
+
--cds-display-01-letter-spacing: 0;
|
25407
|
+
--cds-display-02-font-size: 2.625rem;
|
25408
|
+
--cds-display-02-font-weight: 600;
|
25409
|
+
--cds-display-02-line-height: 1.19;
|
25410
|
+
--cds-display-02-letter-spacing: 0;
|
25411
|
+
--cds-display-03-font-size: 2.625rem;
|
25412
|
+
--cds-display-03-font-weight: 300;
|
25413
|
+
--cds-display-03-line-height: 1.19;
|
25414
|
+
--cds-display-03-letter-spacing: 0;
|
25415
|
+
--cds-display-04-font-size: 2.625rem;
|
25416
|
+
--cds-display-04-font-weight: 300;
|
25417
|
+
--cds-display-04-line-height: 1.19;
|
25418
|
+
--cds-display-04-letter-spacing: 0;
|
25419
|
+
--cds-legal-01-font-size: 0.75rem;
|
25420
|
+
--cds-legal-01-font-weight: 400;
|
25421
|
+
--cds-legal-01-line-height: 1.33333;
|
25422
|
+
--cds-legal-01-letter-spacing: 0.32px;
|
25423
|
+
--cds-legal-02-font-size: 0.875rem;
|
25424
|
+
--cds-legal-02-font-weight: 400;
|
25425
|
+
--cds-legal-02-line-height: 1.28572;
|
25426
|
+
--cds-legal-02-letter-spacing: 0.16px;
|
25427
|
+
--cds-body-compact-01-font-size: 0.875rem;
|
25428
|
+
--cds-body-compact-01-font-weight: 400;
|
25429
|
+
--cds-body-compact-01-line-height: 1.28572;
|
25430
|
+
--cds-body-compact-01-letter-spacing: 0.16px;
|
25431
|
+
--cds-body-compact-02-font-size: 1rem;
|
25432
|
+
--cds-body-compact-02-font-weight: 400;
|
25433
|
+
--cds-body-compact-02-line-height: 1.375;
|
25434
|
+
--cds-body-compact-02-letter-spacing: 0;
|
25435
|
+
--cds-body-01-font-size: 0.875rem;
|
25436
|
+
--cds-body-01-font-weight: 400;
|
25437
|
+
--cds-body-01-line-height: 1.42857;
|
25438
|
+
--cds-body-01-letter-spacing: 0.16px;
|
25439
|
+
--cds-body-02-font-size: 1rem;
|
25440
|
+
--cds-body-02-font-weight: 400;
|
25441
|
+
--cds-body-02-line-height: 1.5;
|
25442
|
+
--cds-body-02-letter-spacing: 0;
|
25443
|
+
--cds-heading-compact-01-font-size: 0.875rem;
|
25444
|
+
--cds-heading-compact-01-font-weight: 600;
|
25445
|
+
--cds-heading-compact-01-line-height: 1.28572;
|
25446
|
+
--cds-heading-compact-01-letter-spacing: 0.16px;
|
25447
|
+
--cds-heading-compact-02-font-size: 1rem;
|
25448
|
+
--cds-heading-compact-02-font-weight: 600;
|
25449
|
+
--cds-heading-compact-02-line-height: 1.375;
|
25450
|
+
--cds-heading-compact-02-letter-spacing: 0;
|
25451
|
+
--cds-heading-03-font-size: 1.25rem;
|
25452
|
+
--cds-heading-03-font-weight: 400;
|
25453
|
+
--cds-heading-03-line-height: 1.4;
|
25454
|
+
--cds-heading-03-letter-spacing: 0;
|
25455
|
+
--cds-heading-04-font-size: 1.75rem;
|
25456
|
+
--cds-heading-04-font-weight: 400;
|
25457
|
+
--cds-heading-04-line-height: 1.28572;
|
25458
|
+
--cds-heading-04-letter-spacing: 0;
|
25459
|
+
--cds-heading-05-font-size: 2rem;
|
25460
|
+
--cds-heading-05-font-weight: 400;
|
25461
|
+
--cds-heading-05-line-height: 1.25;
|
25462
|
+
--cds-heading-05-letter-spacing: 0;
|
25463
|
+
--cds-heading-06-font-size: 2.625rem;
|
25464
|
+
--cds-heading-06-font-weight: 300;
|
25465
|
+
--cds-heading-06-line-height: 1.199;
|
25466
|
+
--cds-heading-06-letter-spacing: 0;
|
25467
|
+
--cds-heading-07-font-size: 3.375rem;
|
25468
|
+
--cds-heading-07-font-weight: 300;
|
25469
|
+
--cds-heading-07-line-height: 1.199;
|
25470
|
+
--cds-heading-07-letter-spacing: 0;
|
25471
|
+
--cds-fluid-heading-03-font-size: 1.25rem;
|
25472
|
+
--cds-fluid-heading-03-font-weight: 400;
|
25473
|
+
--cds-fluid-heading-03-line-height: 1.4;
|
25474
|
+
--cds-fluid-heading-03-letter-spacing: 0;
|
25475
|
+
--cds-fluid-heading-04-font-size: 1.75rem;
|
25476
|
+
--cds-fluid-heading-04-font-weight: 400;
|
25477
|
+
--cds-fluid-heading-04-line-height: 1.28572;
|
25478
|
+
--cds-fluid-heading-04-letter-spacing: 0;
|
25479
|
+
--cds-fluid-heading-05-font-size: 2rem;
|
25480
|
+
--cds-fluid-heading-05-font-weight: 400;
|
25481
|
+
--cds-fluid-heading-05-line-height: 1.25;
|
25482
|
+
--cds-fluid-heading-05-letter-spacing: 0;
|
25483
|
+
--cds-fluid-heading-06-font-size: 2rem;
|
25484
|
+
--cds-fluid-heading-06-font-weight: 600;
|
25485
|
+
--cds-fluid-heading-06-line-height: 1.25;
|
25486
|
+
--cds-fluid-heading-06-letter-spacing: 0;
|
25487
|
+
--cds-fluid-paragraph-01-font-size: 1.5rem;
|
25488
|
+
--cds-fluid-paragraph-01-font-weight: 300;
|
25489
|
+
--cds-fluid-paragraph-01-line-height: 1.334;
|
25490
|
+
--cds-fluid-paragraph-01-letter-spacing: 0;
|
25491
|
+
--cds-fluid-quotation-01-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
|
25492
|
+
--cds-fluid-quotation-01-font-size: 1.25rem;
|
25493
|
+
--cds-fluid-quotation-01-font-weight: 400;
|
25494
|
+
--cds-fluid-quotation-01-line-height: 1.3;
|
25495
|
+
--cds-fluid-quotation-01-letter-spacing: 0;
|
25496
|
+
--cds-fluid-quotation-02-font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
|
25497
|
+
--cds-fluid-quotation-02-font-size: 2rem;
|
25498
|
+
--cds-fluid-quotation-02-font-weight: 300;
|
25499
|
+
--cds-fluid-quotation-02-line-height: 1.25;
|
25500
|
+
--cds-fluid-quotation-02-letter-spacing: 0;
|
25501
|
+
--cds-fluid-display-01-font-size: 2.625rem;
|
25502
|
+
--cds-fluid-display-01-font-weight: 300;
|
25503
|
+
--cds-fluid-display-01-line-height: 1.19;
|
25504
|
+
--cds-fluid-display-01-letter-spacing: 0;
|
25505
|
+
--cds-fluid-display-02-font-size: 2.625rem;
|
25506
|
+
--cds-fluid-display-02-font-weight: 600;
|
25507
|
+
--cds-fluid-display-02-line-height: 1.19;
|
25508
|
+
--cds-fluid-display-02-letter-spacing: 0;
|
25509
|
+
--cds-fluid-display-03-font-size: 2.625rem;
|
25510
|
+
--cds-fluid-display-03-font-weight: 300;
|
25511
|
+
--cds-fluid-display-03-line-height: 1.19;
|
25512
|
+
--cds-fluid-display-03-letter-spacing: 0;
|
25513
|
+
--cds-fluid-display-04-font-size: 2.625rem;
|
25514
|
+
--cds-fluid-display-04-font-weight: 300;
|
25515
|
+
--cds-fluid-display-04-line-height: 1.19;
|
25516
|
+
--cds-fluid-display-04-letter-spacing: 0;
|
25517
|
+
--cds-spacing-01: 0.125rem;
|
25518
|
+
--cds-spacing-02: 0.25rem;
|
25519
|
+
--cds-spacing-03: 0.5rem;
|
25520
|
+
--cds-spacing-04: 0.75rem;
|
25521
|
+
--cds-spacing-05: 1rem;
|
25522
|
+
--cds-spacing-06: 1.5rem;
|
25523
|
+
--cds-spacing-07: 2rem;
|
25524
|
+
--cds-spacing-08: 2.5rem;
|
25525
|
+
--cds-spacing-09: 3rem;
|
25526
|
+
--cds-spacing-10: 4rem;
|
25527
|
+
--cds-spacing-11: 5rem;
|
25528
|
+
--cds-spacing-12: 6rem;
|
25529
|
+
--cds-spacing-13: 10rem;
|
25530
|
+
--cds-fluid-spacing-01: 0;
|
25531
|
+
--cds-fluid-spacing-02: 2vw;
|
25532
|
+
--cds-fluid-spacing-03: 5vw;
|
25533
|
+
--cds-fluid-spacing-04: 10vw;
|
25534
|
+
--cds-layout-01: 1rem;
|
25535
|
+
--cds-layout-02: 1.5rem;
|
25536
|
+
--cds-layout-03: 2rem;
|
25537
|
+
--cds-layout-04: 3rem;
|
25538
|
+
--cds-layout-05: 4rem;
|
25539
|
+
--cds-layout-06: 6rem;
|
25540
|
+
--cds-layout-07: 10rem;
|
25541
|
+
--cds-container-01: 1.5rem;
|
25542
|
+
--cds-container-02: 2rem;
|
25543
|
+
--cds-container-03: 2.5rem;
|
25544
|
+
--cds-container-04: 3rem;
|
25545
|
+
--cds-container-05: 4rem;
|
25546
|
+
--cds-size-xsmall: 1.5rem;
|
25547
|
+
--cds-size-small: 2rem;
|
25548
|
+
--cds-size-medium: 2.5rem;
|
25549
|
+
--cds-size-large: 3rem;
|
25550
|
+
--cds-size-xlarge: 4rem;
|
25551
|
+
--cds-size-2XLarge: 5rem;
|
25552
|
+
--cds-icon-size-01: 1rem;
|
25553
|
+
--cds-icon-size-02: 1.25rem;
|
25554
|
+
font-size: var(--cds-body-long-01-font-size, 0.875rem);
|
25555
|
+
font-weight: var(--cds-body-long-01-font-weight, 400);
|
25556
|
+
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
25557
|
+
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
25558
|
+
display: block;
|
25559
|
+
padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
|
25560
|
+
border-left-width: 0.078125rem;
|
25561
|
+
border-left-style: solid;
|
25562
|
+
margin: var(--cds-spacing-02, 0.25rem) 0;
|
25563
|
+
animation: fade 600ms;
|
25564
|
+
border-left-color: var(--cds-text-01, #161616);
|
25565
|
+
color: var(--cds-text-01, #161616);
|
25566
|
+
}
|
25567
|
+
.c4p--non-linear-reading__dark .c4p--non-linear-reading__body a {
|
25568
|
+
color: var(--cds-link-01, #0f62fe);
|
25569
|
+
}
|
25570
|
+
|
25571
|
+
/**
|
25572
|
+
* The InlineTip specifically is theme-agnostic, and so we have to
|
25573
|
+
* use color tokens to keep the colors static instead of theme tokens
|
25574
|
+
* that will change depending on the selected theme.
|
25575
|
+
*
|
25576
|
+
* We are triggering a *large* amount of linting errors.
|
25577
|
+
* So, we're adding 2 "disable" rules for the file instead of 25
|
25578
|
+
* individual rules.
|
25579
|
+
*/
|
25580
|
+
/* stylelint-disable declaration-no-important */
|
25581
|
+
/* stylelint-disable carbon/theme-token-use */
|
25582
|
+
.c4p--inline-tip {
|
25583
|
+
position: relative;
|
25584
|
+
display: flex;
|
25585
|
+
background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
|
25586
|
+
}
|
25587
|
+
.c4p--inline-tip__wide {
|
25588
|
+
padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-10, 4rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-09, 3rem);
|
25589
|
+
}
|
25590
|
+
.c4p--inline-tip__wide.c4p--inline-tip__has-media {
|
25591
|
+
padding-right: var(--cds-spacing-09, 3rem);
|
25592
|
+
}
|
25593
|
+
.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media {
|
25594
|
+
padding-left: var(--cds-spacing-10, 4rem);
|
25595
|
+
}
|
25596
|
+
.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media img {
|
25597
|
+
display: block;
|
25598
|
+
height: 7.375rem;
|
25599
|
+
}
|
25600
|
+
.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media svg {
|
25601
|
+
width: calc(7.375rem * 2) !important;
|
25602
|
+
height: 7.375rem !important;
|
25603
|
+
}
|
25604
|
+
.c4p--inline-tip__narrow {
|
25605
|
+
flex-direction: column-reverse;
|
25606
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
25607
|
+
padding: 3.25rem var(--cds-spacing-07, 2rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
|
25608
|
+
}
|
25609
|
+
.c4p--inline-tip__narrow.c4p--inline-tip__has-media {
|
25610
|
+
padding-top: var(--cds-spacing-07, 2rem);
|
25611
|
+
padding-right: var(--cds-spacing-05, 1rem);
|
25612
|
+
}
|
25613
|
+
.c4p--inline-tip__narrow .c4p--inline-tip__media {
|
25614
|
+
padding-bottom: var(--cds-spacing-05, 1rem);
|
25615
|
+
}
|
25616
|
+
.c4p--inline-tip__narrow .c4p--inline-tip__media img {
|
25617
|
+
width: 100%;
|
25618
|
+
}
|
25619
|
+
.c4p--inline-tip__narrow .c4p--inline-tip__content {
|
25620
|
+
padding-right: var(--cds-spacing-05, 1rem);
|
25621
|
+
}
|
25622
|
+
.c4p--inline-tip__narrow .c4p--inline-tip__footer {
|
25623
|
+
justify-content: space-between;
|
25624
|
+
}
|
25625
|
+
.c4p--inline-tip__narrow .c4p--inline-tip__footer .c4p--inline-tip__close-btn {
|
25626
|
+
margin-right: calc(-1 * var(--cds-spacing-05, 1rem));
|
25627
|
+
}
|
25628
|
+
.c4p--inline-tip a {
|
25629
|
+
color: #a6c8ff;
|
25630
|
+
}
|
25631
|
+
.c4p--inline-tip a:visited, .c4p--inline-tip a:hover, .c4p--inline-tip a:visited:hover {
|
25632
|
+
color: #a6c8ff;
|
25633
|
+
}
|
25634
|
+
.c4p--inline-tip__title {
|
25635
|
+
font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
|
25636
|
+
font-weight: var(--cds-productive-heading-01-font-weight, 600);
|
25637
|
+
line-height: var(--cds-productive-heading-01-line-height, 1.28572);
|
25638
|
+
letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
|
25639
|
+
color: #ffffff;
|
25640
|
+
}
|
25641
|
+
.c4p--inline-tip__body {
|
25642
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
25643
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
25644
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
25645
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
25646
|
+
color: #f4f4f4;
|
25647
|
+
}
|
25648
|
+
.c4p--inline-tip__body p {
|
25649
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
25650
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
25651
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
25652
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
25653
|
+
margin-bottom: var(--cds-spacing-03, 0.5rem);
|
25654
|
+
font-size: inherit;
|
25655
|
+
line-height: inherit;
|
25656
|
+
}
|
25657
|
+
.c4p--inline-tip__body p:last-of-type {
|
25658
|
+
margin-bottom: 0;
|
25659
|
+
}
|
25660
|
+
.c4p--inline-tip__body .c4p--inline-tip__secondary-btn {
|
25661
|
+
margin-top: var(--cds-spacing-03, 0.5rem);
|
25662
|
+
}
|
25663
|
+
.c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button {
|
25664
|
+
margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
|
25665
|
+
color: #a6c8ff;
|
25666
|
+
}
|
25667
|
+
.c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button:active, .c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button:hover {
|
25668
|
+
background-color: #7f3ae7;
|
25669
|
+
color: #f4f4f4;
|
25670
|
+
}
|
25671
|
+
.c4p--inline-tip__footer {
|
25672
|
+
display: flex;
|
25673
|
+
padding-top: var(--cds-spacing-05, 1rem);
|
25674
|
+
}
|
25675
|
+
.c4p--inline-tip__footer:empty {
|
25676
|
+
display: none;
|
25677
|
+
}
|
25678
|
+
.c4p--inline-tip__preview-text {
|
25679
|
+
display: -webkit-box;
|
25680
|
+
overflow: hidden;
|
25681
|
+
-webkit-box-orient: vertical;
|
25682
|
+
-webkit-line-clamp: 1;
|
25683
|
+
}
|
25684
|
+
.c4p--inline-tip__icon-idea {
|
25685
|
+
position: absolute;
|
25686
|
+
width: 1.25rem;
|
25687
|
+
color: #ffffff;
|
25688
|
+
inset: var(--cds-spacing-05, 1rem) 0 0 var(--cds-spacing-05, 1rem);
|
25689
|
+
}
|
25690
|
+
.c4p--inline-tip__close-icon {
|
25691
|
+
position: absolute !important;
|
25692
|
+
top: 0;
|
25693
|
+
right: 0;
|
25694
|
+
width: var(--cds-spacing-07, 2rem);
|
25695
|
+
height: var(--cds-spacing-07, 2rem);
|
25696
|
+
min-height: var(--cds-spacing-07, 2rem) !important;
|
25697
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
25698
|
+
padding: 0 0 0 0.375rem !important;
|
25699
|
+
color: #ffffff;
|
25700
|
+
}
|
25701
|
+
.c4p--inline-tip__close-icon:active, .c4p--inline-tip__close-icon:hover {
|
25702
|
+
background-color: #7f3ae7 !important;
|
25703
|
+
color: var(--cds-text-01, #161616) !important;
|
25704
|
+
}
|
25705
|
+
.c4p--inline-tip__close-icon svg > path {
|
25706
|
+
margin: 0;
|
25707
|
+
fill: #ffffff !important;
|
25708
|
+
}
|
25709
|
+
.c4p--inline-tip__toggle-btn {
|
25710
|
+
border: none;
|
25711
|
+
margin: 0 var(--cds-spacing-05, 1rem) 0 calc(-1 * var(--cds-spacing-05, 1rem)) !important;
|
25712
|
+
color: #a6c8ff !important;
|
25713
|
+
}
|
25714
|
+
.c4p--inline-tip__toggle-btn:hover {
|
25715
|
+
background-color: #7c3dd6 !important;
|
25716
|
+
color: #f4f4f4 !important;
|
25717
|
+
}
|
25718
|
+
.c4p--inline-tip__close-btn {
|
25719
|
+
border: 0.0625rem solid #ffffff !important;
|
25720
|
+
color: #ffffff !important;
|
25721
|
+
}
|
25722
|
+
.c4p--inline-tip__close-btn:active, .c4p--inline-tip__close-btn:hover {
|
25723
|
+
background-color: #f4f4f4 !important;
|
25724
|
+
color: #161616 !important;
|
24521
25725
|
}
|
24522
25726
|
|
24523
25727
|
@font-face {
|