@carbon/ibm-products 2.23.0 → 2.24.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +29484 -28211
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +49 -10
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +24418 -291
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +17172 -13
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Card/Card.js +1 -2
- package/es/components/Card/CardHeader.js +2 -2
- package/es/components/Carousel/Carousel.js +5 -3
- package/es/components/Coachmark/Coachmark.js +255 -0
- package/es/components/Coachmark/CoachmarkDragbar.js +146 -0
- package/es/components/Coachmark/CoachmarkHeader.js +91 -0
- package/es/components/Coachmark/CoachmarkOverlay.js +235 -0
- package/es/components/Coachmark/CoachmarkTagline.js +97 -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 +93 -0
- package/es/components/CoachmarkBeacon/index.js +8 -0
- package/es/components/CoachmarkButton/CoachmarkButton.js +90 -0
- package/es/components/CoachmarkButton/index.js +8 -0
- package/es/components/CoachmarkFixed/CoachmarkFixed.js +226 -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 +216 -0
- package/es/components/CoachmarkOverlayElements/index.js +8 -0
- package/es/components/CoachmarkStack/CoachmarkStack.js +283 -0
- package/es/components/CoachmarkStack/CoachmarkStackHome.js +192 -0
- package/es/components/CoachmarkStack/index.js +8 -0
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -1
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/es/components/Datagrid/Datagrid.docs-page.js +2 -2
- package/es/components/Datagrid/useActionsColumn.js +16 -12
- package/es/components/Datagrid/useNestedRowExpander.js +2 -2
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +7 -2
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +7 -2
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +7 -2
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +7 -2
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +7 -2
- package/es/components/EmptyStates/assets/ErrorIllustration.js +5 -5
- package/es/components/EmptyStates/assets/NoDataIllustration.js +5 -5
- package/es/components/EmptyStates/assets/NoTagsIllustration.js +5 -5
- package/es/components/EmptyStates/assets/NotFoundIllustration.js +5 -5
- package/es/components/EmptyStates/assets/NotificationsIllustration.js +5 -5
- package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -5
- package/es/components/InterstitialScreen/InterstitialScreen.js +427 -0
- package/es/components/InterstitialScreen/index.js +8 -0
- package/es/components/InterstitialScreenView/InterstitialScreenView.js +75 -0
- package/es/components/InterstitialScreenView/index.js +8 -0
- package/es/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +83 -0
- package/es/components/InterstitialScreenViewModule/index.js +8 -0
- package/es/components/PageHeader/PageHeaderUtils.js +2 -2
- package/es/components/SearchBar/SearchBar.js +227 -0
- package/es/components/SearchBar/index.js +8 -0
- package/es/components/index.js +12 -1
- package/es/global/js/package-settings.js +14 -0
- package/lib/components/Card/Card.js +3 -4
- package/lib/components/Card/CardHeader.js +2 -2
- package/lib/components/Carousel/Carousel.js +5 -3
- package/lib/components/Coachmark/Coachmark.js +264 -0
- package/lib/components/Coachmark/CoachmarkDragbar.js +151 -0
- package/lib/components/Coachmark/CoachmarkHeader.js +95 -0
- package/lib/components/Coachmark/CoachmarkOverlay.js +243 -0
- package/lib/components/Coachmark/CoachmarkTagline.js +101 -0
- package/lib/components/Coachmark/index.js +38 -0
- package/lib/components/Coachmark/utils/constants.js +81 -0
- package/lib/components/Coachmark/utils/context.js +11 -0
- package/lib/components/Coachmark/utils/enums.js +46 -0
- package/lib/components/Coachmark/utils/helpers.js +17 -0
- package/lib/components/Coachmark/utils/hooks.js +59 -0
- package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +97 -0
- package/lib/components/CoachmarkBeacon/index.js +12 -0
- package/lib/components/CoachmarkButton/CoachmarkButton.js +93 -0
- package/lib/components/CoachmarkButton/index.js +12 -0
- package/lib/components/CoachmarkFixed/CoachmarkFixed.js +232 -0
- package/lib/components/CoachmarkFixed/index.js +12 -0
- package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +90 -0
- package/lib/components/CoachmarkOverlayElement/index.js +12 -0
- package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +222 -0
- package/lib/components/CoachmarkOverlayElements/index.js +12 -0
- package/lib/components/CoachmarkStack/CoachmarkStack.js +288 -0
- package/lib/components/CoachmarkStack/CoachmarkStackHome.js +198 -0
- package/lib/components/CoachmarkStack/index.js +12 -0
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -1
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/lib/components/Datagrid/Datagrid.docs-page.js +2 -2
- package/lib/components/Datagrid/useActionsColumn.js +15 -11
- package/lib/components/Datagrid/useNestedRowExpander.js +2 -2
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +7 -2
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +7 -2
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +7 -2
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +7 -2
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +7 -2
- package/lib/components/EmptyStates/assets/ErrorIllustration.js +5 -5
- package/lib/components/EmptyStates/assets/NoDataIllustration.js +5 -5
- package/lib/components/EmptyStates/assets/NoTagsIllustration.js +5 -5
- package/lib/components/EmptyStates/assets/NotFoundIllustration.js +5 -5
- package/lib/components/EmptyStates/assets/NotificationsIllustration.js +5 -5
- package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -5
- package/lib/components/InterstitialScreen/InterstitialScreen.js +434 -0
- package/lib/components/InterstitialScreen/index.js +12 -0
- package/lib/components/InterstitialScreenView/InterstitialScreenView.js +77 -0
- package/lib/components/InterstitialScreenView/index.js +12 -0
- package/lib/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +85 -0
- package/lib/components/InterstitialScreenViewModule/index.js +12 -0
- package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
- package/lib/components/SearchBar/SearchBar.js +233 -0
- package/lib/components/SearchBar/index.js +12 -0
- package/lib/components/index.js +78 -1
- package/lib/global/js/package-settings.js +14 -0
- package/package.json +5 -5
- package/scss/components/Card/_card.scss +6 -5
- package/scss/components/Coachmark/_carbon-imports.scss +10 -0
- package/scss/components/Coachmark/_coachmark-dragbar.scss +27 -0
- package/scss/components/Coachmark/_coachmark-header.scss +20 -0
- package/scss/components/Coachmark/_coachmark-overlay.scss +431 -0
- package/scss/components/Coachmark/_coachmark-tagline.scss +140 -0
- package/scss/components/Coachmark/_coachmark.scss +30 -0
- package/scss/components/Coachmark/_index-with-carbon.scss +9 -0
- package/scss/components/Coachmark/_index.scss +8 -0
- package/scss/components/CoachmarkBeacon/_carbon-imports.scss +9 -0
- package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss +166 -0
- package/scss/components/CoachmarkBeacon/_index-with-carbon.scss +9 -0
- package/scss/components/CoachmarkBeacon/_index.scss +8 -0
- package/scss/components/CoachmarkButton/_carbon-imports.scss +9 -0
- package/scss/components/CoachmarkButton/_coachmark-button.scss +25 -0
- package/scss/components/CoachmarkButton/_index-with-carbon.scss +9 -0
- package/scss/components/CoachmarkButton/_index.scss +8 -0
- package/scss/components/CoachmarkFixed/_carbon-imports.scss +9 -0
- package/scss/components/CoachmarkFixed/_coachmark-fixed.scss +25 -0
- package/scss/components/CoachmarkFixed/_index-with-carbon.scss +9 -0
- package/scss/components/CoachmarkFixed/_index.scss +8 -0
- package/scss/components/CoachmarkOverlayElement/_carbon-imports.scss +9 -0
- package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss +52 -0
- package/scss/components/CoachmarkOverlayElement/_index-with-carbon.scss +9 -0
- package/scss/components/CoachmarkOverlayElement/_index.scss +8 -0
- package/scss/components/CoachmarkOverlayElements/_carbon-imports.scss +9 -0
- package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss +47 -0
- package/scss/components/CoachmarkOverlayElements/_index-with-carbon.scss +9 -0
- package/scss/components/CoachmarkOverlayElements/_index.scss +8 -0
- package/scss/components/CoachmarkStack/_carbon-imports.scss +9 -0
- package/scss/components/CoachmarkStack/_coachmark-stack.scss +95 -0
- package/scss/components/CoachmarkStack/_index-with-carbon.scss +9 -0
- package/scss/components/CoachmarkStack/_index.scss +8 -0
- package/scss/components/InterstitialScreen/_carbon-imports.scss +9 -0
- package/scss/components/InterstitialScreen/_index-with-carbon.scss +9 -0
- package/scss/components/InterstitialScreen/_index.scss +8 -0
- package/scss/components/InterstitialScreen/_interstitial-screen.scss +276 -0
- package/scss/components/InterstitialScreenView/_carbon-imports.scss +9 -0
- package/scss/components/InterstitialScreenView/_index-with-carbon.scss +9 -0
- package/scss/components/InterstitialScreenView/_index.scss +8 -0
- package/scss/components/InterstitialScreenView/_interstitial-screen-view.scss +25 -0
- package/scss/components/InterstitialScreenViewModule/_carbon-imports.scss +9 -0
- package/scss/components/InterstitialScreenViewModule/_index-with-carbon.scss +9 -0
- package/scss/components/InterstitialScreenViewModule/_index.scss +8 -0
- package/scss/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss +59 -0
- package/scss/components/PageHeader/_page-header.scss +0 -1
- package/scss/components/SearchBar/_carbon-imports.scss +9 -0
- package/scss/components/SearchBar/_index-with-carbon.scss +9 -0
- package/scss/components/SearchBar/_index.scss +8 -0
- package/scss/components/SearchBar/_search-bar.scss +26 -0
- package/scss/components/SidePanel/_side-panel.scss +12 -7
- package/scss/components/_index-with-carbon.scss +11 -0
- package/scss/components/_index.scss +11 -0
@@ -0,0 +1,166 @@
|
|
1
|
+
/* stylelint-disable carbon/layout-token-use */
|
2
|
+
/* stylelint-disable carbon/motion-easing-use */
|
3
|
+
/* stylelint-disable max-nesting-depth */
|
4
|
+
//
|
5
|
+
// Copyright IBM Corp. 2023, 2024
|
6
|
+
//
|
7
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
8
|
+
// LICENSE file in the root directory of this source tree.
|
9
|
+
//
|
10
|
+
|
11
|
+
// Standard imports.
|
12
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
13
|
+
@use '../../global/styles/mixins';
|
14
|
+
@use '@carbon/styles/scss/spacing' as *;
|
15
|
+
@use '@carbon/react/scss/colors' as *;
|
16
|
+
@use '@carbon/react/scss/theme' as *;
|
17
|
+
@use '@carbon/styles/scss/type';
|
18
|
+
@use '@carbon/styles/scss/components/button/tokens' as *;
|
19
|
+
@use '@carbon/styles/scss/motion' as *;
|
20
|
+
// Other Carbon settings if needed
|
21
|
+
// TODO: @use '@carbon/styles/scss/grid';
|
22
|
+
// or
|
23
|
+
// TODO: @use '@carbon/react/scss/grid';
|
24
|
+
|
25
|
+
// CoachmarkBeacon uses the following Carbon for IBM Products components:
|
26
|
+
// TODO: @use(s) of IBM Products component styles used by CoachmarkBeacon
|
27
|
+
$beaconAnimationTime: 2s;
|
28
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
29
|
+
$block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
|
30
|
+
|
31
|
+
.#{$block-class} {
|
32
|
+
position: relative;
|
33
|
+
|
34
|
+
&-default {
|
35
|
+
.#{$block-class}__target {
|
36
|
+
&::before {
|
37
|
+
display: none;
|
38
|
+
}
|
39
|
+
// the blue dot
|
40
|
+
&::after {
|
41
|
+
position: absolute;
|
42
|
+
top: calc($spacing-01 + $spacing-03);
|
43
|
+
left: calc($spacing-01 + $spacing-03);
|
44
|
+
width: $spacing-04;
|
45
|
+
height: $spacing-04;
|
46
|
+
border-radius: 50%;
|
47
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
48
|
+
background-color: $blue-50;
|
49
|
+
content: '';
|
50
|
+
}
|
51
|
+
|
52
|
+
&:focus {
|
53
|
+
outline: transparent;
|
54
|
+
|
55
|
+
&::before {
|
56
|
+
position: absolute;
|
57
|
+
top: 7px;
|
58
|
+
left: 7px;
|
59
|
+
display: block;
|
60
|
+
width: 18px;
|
61
|
+
height: 18px;
|
62
|
+
border-radius: 100%;
|
63
|
+
content: '';
|
64
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
65
|
+
outline: $spacing-01 $focus solid;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
70
|
+
.#{$block-class}__target {
|
71
|
+
// the hit area
|
72
|
+
position: absolute;
|
73
|
+
top: calc(-1 * $spacing-05);
|
74
|
+
left: calc(-1 * $spacing-05);
|
75
|
+
width: $spacing-07;
|
76
|
+
height: $spacing-07;
|
77
|
+
padding: 0;
|
78
|
+
border: none;
|
79
|
+
border-radius: 50%;
|
80
|
+
background-color: transparent;
|
81
|
+
cursor: pointer;
|
82
|
+
|
83
|
+
&[aria-expanded='true'] {
|
84
|
+
circle {
|
85
|
+
animation: none;
|
86
|
+
}
|
87
|
+
}
|
88
|
+
}
|
89
|
+
|
90
|
+
&__center {
|
91
|
+
position: absolute;
|
92
|
+
z-index: 6900;
|
93
|
+
top: calc(($spacing-06 - $spacing-01) * -1);
|
94
|
+
left: calc(($spacing-06 - $spacing-01) * -1);
|
95
|
+
width: $spacing-11;
|
96
|
+
height: $spacing-11;
|
97
|
+
pointer-events: none;
|
98
|
+
|
99
|
+
circle {
|
100
|
+
/* stylelint-disable-next-line carbon/motion-duration-use */
|
101
|
+
animation: ripple $beaconAnimationTime infinite;
|
102
|
+
fill: $support-info;
|
103
|
+
fill-opacity: 0;
|
104
|
+
-webkit-mask-image: none;
|
105
|
+
mask-image: none;
|
106
|
+
stroke: $support-info;
|
107
|
+
stroke-opacity: 0;
|
108
|
+
stroke-width: 1px;
|
109
|
+
transition-timing-function: motion (exit, productive);
|
110
|
+
@media (prefers-reduced-motion) {
|
111
|
+
animation: none;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
}
|
115
|
+
}
|
116
|
+
@keyframes ripple {
|
117
|
+
0% {
|
118
|
+
fill-opacity: 0;
|
119
|
+
r: 1px;
|
120
|
+
stroke-opacity: 0;
|
121
|
+
transition-timing-function: motion(entrance, productive);
|
122
|
+
}
|
123
|
+
|
124
|
+
31% {
|
125
|
+
fill-opacity: 0.2;
|
126
|
+
stroke-opacity: 1;
|
127
|
+
}
|
128
|
+
|
129
|
+
62% {
|
130
|
+
fill-opacity: 0;
|
131
|
+
r: 32px;
|
132
|
+
stroke-opacity: 0;
|
133
|
+
}
|
134
|
+
|
135
|
+
100% {
|
136
|
+
fill-opacity: 0;
|
137
|
+
r: 32px;
|
138
|
+
stroke-opacity: 0;
|
139
|
+
}
|
140
|
+
}
|
141
|
+
|
142
|
+
@keyframes ring-ripple {
|
143
|
+
0% {
|
144
|
+
fill-opacity: 0;
|
145
|
+
r: 12px;
|
146
|
+
stroke-opacity: 0;
|
147
|
+
transition-timing-function: motion(entrance, productive);
|
148
|
+
}
|
149
|
+
|
150
|
+
31% {
|
151
|
+
fill-opacity: 0.2;
|
152
|
+
stroke-opacity: 1;
|
153
|
+
}
|
154
|
+
|
155
|
+
62% {
|
156
|
+
fill-opacity: 0;
|
157
|
+
r: 32px;
|
158
|
+
stroke-opacity: 0;
|
159
|
+
}
|
160
|
+
|
161
|
+
100% {
|
162
|
+
fill-opacity: 0;
|
163
|
+
r: 32px;
|
164
|
+
stroke-opacity: 0;
|
165
|
+
}
|
166
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from CoachmarkButton in this file.
|
9
|
+
// CoachmarkButton uses the following Carbon components:
|
@@ -0,0 +1,25 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Standard imports.
|
9
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
10
|
+
@use '../../global/styles/mixins';
|
11
|
+
|
12
|
+
// Other Carbon settings if needed
|
13
|
+
// TODO: @use '@carbon/styles/scss/grid';
|
14
|
+
// or
|
15
|
+
// TODO: @use '@carbon/react/scss/grid';
|
16
|
+
|
17
|
+
// CoachmarkButton uses the following Carbon for IBM Products components:
|
18
|
+
// TODO: @use(s) of IBM Products component styles used by CoachmarkButton
|
19
|
+
|
20
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
21
|
+
$block-class: #{c4p-settings.$pkg-prefix}--coachmark-button;
|
22
|
+
|
23
|
+
// .#{$block-class} {
|
24
|
+
// // TODO: Styles.
|
25
|
+
// }
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from CoachmarkFixed in this file.
|
9
|
+
// CoachmarkFixed uses the following Carbon components:
|
@@ -0,0 +1,25 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Standard imports.
|
9
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
10
|
+
@use '../../global/styles/mixins';
|
11
|
+
|
12
|
+
// Other Carbon settings if needed
|
13
|
+
// TODO: @use '@carbon/styles/scss/grid';
|
14
|
+
// or
|
15
|
+
// TODO: @use '@carbon/react/scss/grid';
|
16
|
+
|
17
|
+
// CoachmarkFixed uses the following Carbon for IBM Products components:
|
18
|
+
// TODO: @use(s) of IBM Products component styles used by CoachmarkFixed
|
19
|
+
|
20
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
21
|
+
$block-class: #{c4p-settings.$pkg-prefix}--coachmark-fixed;
|
22
|
+
|
23
|
+
// .#{$block-class} {
|
24
|
+
// // TODO: Styles.
|
25
|
+
// }
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from CoachmarkOverlayElement in this file.
|
9
|
+
// CoachmarkOverlayElement uses the following Carbon components:
|
@@ -0,0 +1,52 @@
|
|
1
|
+
/* stylelint-disable max-nesting-depth */
|
2
|
+
//
|
3
|
+
// Copyright IBM Corp. 2023, 2024
|
4
|
+
//
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
7
|
+
//
|
8
|
+
|
9
|
+
// Standard imports.
|
10
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
11
|
+
@use '../../global/styles/mixins';
|
12
|
+
@use '@carbon/styles/scss/spacing' as *;
|
13
|
+
@use '@carbon/react/scss/type' as *;
|
14
|
+
// Other Carbon settings if needed
|
15
|
+
// TODO: @use '@carbon/styles/scss/grid';
|
16
|
+
// or
|
17
|
+
// TODO: @use '@carbon/react/scss/grid';
|
18
|
+
|
19
|
+
// CoachmarkOverlayElement uses the following Carbon for IBM Products components:
|
20
|
+
// TODO: @use(s) of IBM Products component styles used by CoachmarkOverlayElement
|
21
|
+
|
22
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
23
|
+
$block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-element;
|
24
|
+
$carousel-item-class: #{c4p-settings.$pkg-prefix}--carousel__item;
|
25
|
+
.#{$block-class} {
|
26
|
+
padding: $spacing-01 $spacing-05 0;
|
27
|
+
|
28
|
+
&__content {
|
29
|
+
padding-bottom: $spacing-05;
|
30
|
+
}
|
31
|
+
|
32
|
+
&__title {
|
33
|
+
@include type-style('productive-heading-02');
|
34
|
+
|
35
|
+
margin: 0 0 $spacing-03;
|
36
|
+
}
|
37
|
+
|
38
|
+
&__body {
|
39
|
+
@include type-style('body-long-01');
|
40
|
+
}
|
41
|
+
|
42
|
+
&__button {
|
43
|
+
margin-bottom: 0;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
.#{$carousel-item-class} {
|
47
|
+
.#{$block-class} {
|
48
|
+
&__button {
|
49
|
+
margin-bottom: $spacing-05;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from CoachmarkOverlayElements in this file.
|
9
|
+
// CoachmarkOverlayElements uses the following Carbon components:
|
@@ -0,0 +1,47 @@
|
|
1
|
+
/* stylelint-disable max-nesting-depth */
|
2
|
+
//
|
3
|
+
// Copyright IBM Corp. 2023, 2024
|
4
|
+
//
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
7
|
+
//
|
8
|
+
|
9
|
+
// Standard imports.
|
10
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
11
|
+
@use '../../global/styles/mixins';
|
12
|
+
@use '@carbon/layout/scss/convert' as *;
|
13
|
+
|
14
|
+
@use '@carbon/styles/scss/theme' as *;
|
15
|
+
@use '@carbon/styles/scss/type';
|
16
|
+
@use '@carbon/styles/scss/spacing' as *;
|
17
|
+
// Other Carbon settings if needed
|
18
|
+
// TODO: @use '@carbon/styles/scss/grid';
|
19
|
+
// or
|
20
|
+
// TODO: @use '@carbon/react/scss/grid';
|
21
|
+
|
22
|
+
// CoachmarkOverlayElements uses the following Carbon for IBM Products components:
|
23
|
+
// TODO: @use(s) of IBM Products component styles used by CoachmarkOverlayElements
|
24
|
+
|
25
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
26
|
+
$block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-elements;
|
27
|
+
|
28
|
+
.#{$block-class} {
|
29
|
+
&__element-stepped-media {
|
30
|
+
/* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
|
31
|
+
height: to-rem(128px);
|
32
|
+
margin-bottom: $spacing-05;
|
33
|
+
}
|
34
|
+
|
35
|
+
&__footer {
|
36
|
+
display: flex;
|
37
|
+
align-items: center;
|
38
|
+
justify-content: flex-end;
|
39
|
+
padding: 0 $spacing-05 $spacing-05;
|
40
|
+
}
|
41
|
+
|
42
|
+
&--controls-progress {
|
43
|
+
margin-right: auto;
|
44
|
+
justify-self: flex-start;
|
45
|
+
@include type.type-style('helper-text-01');
|
46
|
+
}
|
47
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from CoachmarkStack in this file.
|
9
|
+
// CoachmarkStack uses the following Carbon components:
|
@@ -0,0 +1,95 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
/* stylelint-disable max-nesting-depth */
|
9
|
+
|
10
|
+
// Standard imports.
|
11
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
12
|
+
@use '../../global/styles/mixins';
|
13
|
+
@use '@carbon/styles/scss/spacing' as *;
|
14
|
+
@use '@carbon/react/scss/motion' as *;
|
15
|
+
@use '@carbon/react/scss/colors' as *;
|
16
|
+
@use '@carbon/react/scss/theme' as *;
|
17
|
+
@use '@carbon/styles/scss/components/button/tokens' as *;
|
18
|
+
// Other Carbon settings if needed
|
19
|
+
// TODO: @use '@carbon/styles/scss/grid';
|
20
|
+
// or
|
21
|
+
// TODO: @use '@carbon/react/scss/grid';
|
22
|
+
|
23
|
+
// CoachmarkStack uses the following Carbon for IBM Products components:
|
24
|
+
// TODO: @use(s) of IBM Products component styles used by CoachmarkStack
|
25
|
+
|
26
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
27
|
+
|
28
|
+
$elements-block-class: #{c4p-settings.$pkg-prefix}--coachmark-stack-element;
|
29
|
+
$overlay-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay;
|
30
|
+
$stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
|
31
|
+
|
32
|
+
.#{$elements-block-class} {
|
33
|
+
$block: &;
|
34
|
+
|
35
|
+
position: fixed;
|
36
|
+
z-index: 5901;
|
37
|
+
right: $spacing-05;
|
38
|
+
bottom: -100%;
|
39
|
+
//opacity: 0;
|
40
|
+
transform: translateY(100%);
|
41
|
+
visibility: hidden;
|
42
|
+
|
43
|
+
&--is-mounted {
|
44
|
+
bottom: 0;
|
45
|
+
/* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
|
46
|
+
transition: transform $duration-moderate-02 motion(exit, productive);
|
47
|
+
@media (prefers-reduced-motion) {
|
48
|
+
transition: none;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
&--is-visible {
|
53
|
+
opacity: 1;
|
54
|
+
transform: translateY(0);
|
55
|
+
visibility: visible;
|
56
|
+
}
|
57
|
+
|
58
|
+
// Stack the level-one item behind the level-two item.
|
59
|
+
&--is-stacked {
|
60
|
+
bottom: 0;
|
61
|
+
overflow: hidden;
|
62
|
+
pointer-events: none;
|
63
|
+
transform: perspective(carbon--mini-units(18))
|
64
|
+
translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
|
65
|
+
transform-origin: top center;
|
66
|
+
visibility: visible;
|
67
|
+
|
68
|
+
&__light {
|
69
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
70
|
+
background-color: $gray-90;
|
71
|
+
}
|
72
|
+
|
73
|
+
&__dark {
|
74
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
75
|
+
background-color: $button-tertiary-active;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
// ALL SUBSEQUENT ITEMS ARE THE "CHILD" STACK ITEMS
|
81
|
+
.#{$elements-block-class} ~ .#{$elements-block-class} {
|
82
|
+
z-index: 5902;
|
83
|
+
}
|
84
|
+
|
85
|
+
// SPECIFIC TO THE HOME ELEMENT
|
86
|
+
.#{$stack-home-class} {
|
87
|
+
&__nav-links {
|
88
|
+
margin-top: $spacing-04;
|
89
|
+
margin-left: calc(-1 * $spacing-05);
|
90
|
+
}
|
91
|
+
|
92
|
+
&__icon-idea {
|
93
|
+
margin-bottom: $spacing-03;
|
94
|
+
}
|
95
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from InterstitialScreen in this file.
|
9
|
+
// InterstitialScreen uses the following Carbon components:
|