@carbon/ibm-products 2.20.0 → 2.22.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -5
- package/css/index-full-carbon.css +548 -253
- 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 +208 -177
- 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 +252 -189
- 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 +233 -193
- 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/ActionSet/ActionSet.js +3 -4
- package/es/components/AddSelect/AddSelectBody.js +2 -2
- package/es/components/AddSelect/AddSelectRow.js +2 -2
- package/es/components/Card/Card.js +1 -2
- package/es/components/Card/CardHeader.js +1 -2
- package/es/components/CreateFullPage/CreateFullPageStep.js +1 -2
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +1 -2
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +1 -2
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +1 -2
- package/es/components/Datagrid/Datagrid/DatagridContent.js +10 -10
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -11
- package/es/components/Datagrid/Datagrid/DatagridRow.js +15 -11
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +21 -11
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +22 -12
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +31 -74
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +1 -5
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +2 -3
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +2 -2
- package/es/components/Datagrid/useActionsColumn.js +1 -2
- package/es/components/Datagrid/useDefaultStringRenderer.js +1 -2
- package/es/components/Datagrid/useFiltering.js +1 -0
- package/es/components/Datagrid/useNestedRowExpander.js +1 -2
- package/es/components/Datagrid/useNestedRows.js +49 -33
- package/es/components/Datagrid/useOnRowClick.js +1 -1
- package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/es/components/Datagrid/useSelectRows.js +1 -2
- package/es/components/Datagrid/useSortableColumns.js +1 -2
- package/es/components/Datagrid/useStickyColumn.js +3 -4
- package/es/components/Datagrid/utils/filterPropsForTesting.js +149 -0
- package/es/components/DelimitedList/DelimitedList.docs-page.js +15 -0
- package/es/components/DelimitedList/DelimitedList.js +73 -0
- package/es/components/DelimitedList/index.js +8 -0
- package/es/components/EditInPlace/EditInPlace.js +1 -2
- package/es/components/EditTearsheet/EditTearsheetForm.js +1 -2
- package/es/components/FilterSummary/FilterSummary.js +15 -12
- package/es/components/NotificationsPanel/NotificationsPanel.js +2 -3
- package/es/components/PageHeader/PageHeader.js +9 -11
- package/es/components/Saving/Saving.js +6 -6
- package/es/components/SidePanel/SidePanel.js +147 -191
- package/es/components/TagSet/TagSet.js +21 -5
- package/es/components/TagSet/TagSetOverflow.js +14 -10
- package/es/components/Tearsheet/Tearsheet.js +5 -0
- package/es/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/es/components/Tearsheet/TearsheetShell.js +9 -9
- package/es/components/WebTerminal/WebTerminal.js +1 -2
- package/es/components/index.js +2 -1
- package/es/global/js/hooks/useResizeObserver.js +5 -2
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/ActionSet/ActionSet.js +3 -4
- package/lib/components/AddSelect/AddSelectBody.js +2 -2
- package/lib/components/AddSelect/AddSelectRow.js +2 -2
- package/lib/components/Card/Card.js +1 -2
- package/lib/components/Card/CardHeader.js +1 -2
- package/lib/components/CreateFullPage/CreateFullPageStep.js +1 -2
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +1 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +1 -2
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +1 -2
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +10 -10
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -11
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +15 -11
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +21 -11
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +22 -12
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +31 -74
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +1 -5
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +2 -3
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +2 -2
- package/lib/components/Datagrid/useActionsColumn.js +1 -2
- package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -2
- package/lib/components/Datagrid/useFiltering.js +1 -0
- package/lib/components/Datagrid/useNestedRowExpander.js +1 -2
- package/lib/components/Datagrid/useNestedRows.js +49 -33
- package/lib/components/Datagrid/useOnRowClick.js +1 -1
- package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/lib/components/Datagrid/useSelectRows.js +1 -2
- package/lib/components/Datagrid/useSortableColumns.js +1 -2
- package/lib/components/Datagrid/useStickyColumn.js +3 -4
- package/lib/components/Datagrid/utils/filterPropsForTesting.js +156 -0
- package/lib/components/DelimitedList/DelimitedList.docs-page.js +25 -0
- package/lib/components/DelimitedList/DelimitedList.js +78 -0
- package/lib/components/DelimitedList/index.js +12 -0
- package/lib/components/EditInPlace/EditInPlace.js +1 -2
- package/lib/components/EditTearsheet/EditTearsheetForm.js +1 -2
- package/lib/components/FilterSummary/FilterSummary.js +15 -12
- package/lib/components/NotificationsPanel/NotificationsPanel.js +2 -3
- package/lib/components/PageHeader/PageHeader.js +9 -11
- package/lib/components/Saving/Saving.js +6 -6
- package/lib/components/SidePanel/SidePanel.js +147 -191
- package/lib/components/TagSet/TagSet.js +21 -5
- package/lib/components/TagSet/TagSetOverflow.js +13 -9
- package/lib/components/Tearsheet/Tearsheet.js +5 -0
- package/lib/components/Tearsheet/TearsheetNarrow.js +5 -0
- package/lib/components/Tearsheet/TearsheetShell.js +9 -9
- package/lib/components/WebTerminal/WebTerminal.js +1 -2
- package/lib/components/index.js +8 -1
- package/lib/global/js/hooks/useResizeObserver.js +5 -2
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +9 -8
- package/scss/components/Datagrid/_datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +9 -1
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -0
- package/scss/components/DelimitedList/_carbon-imports.scss +9 -0
- package/scss/components/DelimitedList/_delimited-list.scss +27 -0
- package/scss/components/DelimitedList/_index-with-carbon.scss +9 -0
- package/scss/components/DelimitedList/_index.scss +8 -0
- package/scss/components/Saving/_saving.scss +6 -0
- package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
- package/scss/components/SidePanel/_side-panel.scss +158 -186
- package/scss/components/TagSet/_tag-set.scss +4 -1
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
- package/telemetry.yml +790 -0
@@ -22,12 +22,18 @@
|
|
22
22
|
// SidePanel uses the following IBM Products components:
|
23
23
|
// ActionSet
|
24
24
|
@use '../ActionSet/action-set';
|
25
|
+
@use 'sass:list';
|
25
26
|
|
26
27
|
$block-class: #{c4p-settings.$pkg-prefix}--side-panel;
|
27
28
|
$action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
28
29
|
|
29
30
|
@mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
|
30
|
-
|
31
|
+
/* any value is single value list */
|
32
|
+
width: list.nth($size, 1);
|
33
|
+
@if list.length($size) > 1 {
|
34
|
+
min-width: list.nth($size, 2);
|
35
|
+
}
|
36
|
+
|
31
37
|
max-width: 100%;
|
32
38
|
}
|
33
39
|
|
@@ -39,7 +45,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
39
45
|
height: 1px;
|
40
46
|
background-color: $border-subtle-02;
|
41
47
|
content: '';
|
42
|
-
opacity: var(--#{$block-class}--
|
48
|
+
opacity: var(--#{$block-class}--scroll-animation-progress);
|
43
49
|
}
|
44
50
|
|
45
51
|
@mixin setCommonTitleStyles() {
|
@@ -51,37 +57,48 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
51
57
|
-webkit-line-clamp: 2;
|
52
58
|
}
|
53
59
|
|
60
|
+
.#{$block-class}--scrolls {
|
61
|
+
overflow: auto;
|
62
|
+
overflow-x: hidden;
|
63
|
+
}
|
64
|
+
|
54
65
|
.#{$block-class}__container {
|
55
|
-
--#{$block-class}--
|
56
|
-
--#{$block-class}--
|
57
|
-
--#{$block-class}--title-
|
58
|
-
--#{$block-class}--
|
59
|
-
--#{$block-class}--action-bar-container-height: 0;
|
60
|
-
--#{$block-class}--divider-opacity: 0;
|
61
|
-
--#{$block-class}--title-y-position: 0;
|
62
|
-
--#{$block-class}--content-bottom-padding: #{$spacing-10};
|
63
|
-
--#{$block-class}--collapsed-title-y-position: 1rem;
|
64
|
-
--#{$block-class}--label-text-height: 0;
|
65
|
-
--#{$block-class}--title-padding-right: #{$spacing-09};
|
66
|
+
--#{$block-class}--title-stop: #{$spacing-05};
|
67
|
+
--#{$block-class}--scroll-animation-progress: 0;
|
68
|
+
--#{$block-class}--title-padding-right: #{$spacing-07};
|
69
|
+
--#{$block-class}--actions-height: #{$spacing-10};
|
66
70
|
|
67
71
|
position: fixed;
|
68
|
-
// Need to disable stylelint until dart sass namespace support is added
|
69
72
|
z-index: utilities.z('modal');
|
70
73
|
top: $spacing-09;
|
74
|
+
display: grid;
|
71
75
|
height: calc(100% - 3rem);
|
72
76
|
box-sizing: border-box;
|
73
77
|
background-color: $layer-01;
|
74
78
|
color: $text-primary;
|
79
|
+
grid-template-rows: 1fr auto; /* titles and content */
|
80
|
+
|
75
81
|
@each $size, $size_value in $side-panel-sizes {
|
76
82
|
&.#{$block-class}__container--#{$size} {
|
77
83
|
@include setPanelSize($size_value);
|
78
|
-
.#{$block-class}
|
79
|
-
.#{$block-class}
|
80
|
-
|
84
|
+
.#{$block-class}__header.#{$block-class}__header--no-title-animation,
|
85
|
+
.#{$block-class}__header--no-title-animation
|
86
|
+
.#{$block-class}__subtitle-text {
|
81
87
|
@include setPanelSize($size_value);
|
82
88
|
}
|
83
89
|
}
|
84
90
|
}
|
91
|
+
|
92
|
+
&:not(:has(.#{$block-class}__animated-scroll-wrapper)),
|
93
|
+
&.#{$block-class}__container--has-no-animated-scroll-wrapper {
|
94
|
+
/* if the title does not scroll then we have a child scrolling section. */
|
95
|
+
grid-template-rows: auto 1fr auto; /* titles content actions */
|
96
|
+
}
|
97
|
+
|
98
|
+
&.#{$block-class}__container--condensed-actions {
|
99
|
+
--#{$block-class}--actions-height: #{$spacing-09};
|
100
|
+
}
|
101
|
+
|
85
102
|
.#{$block-class}__actions-container {
|
86
103
|
width: 100%;
|
87
104
|
}
|
@@ -93,251 +110,215 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
93
110
|
left: 0;
|
94
111
|
border-right: 1px solid $border-subtle-02;
|
95
112
|
}
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
content: none;
|
101
|
-
}
|
102
|
-
}
|
103
|
-
.#{$block-class}__action-toolbar {
|
104
|
-
/* stylelint-disable-next-line max-nesting-depth */
|
105
|
-
&::before {
|
106
|
-
@include setDividerStyles();
|
107
|
-
}
|
108
|
-
}
|
109
|
-
}
|
110
|
-
&.#{$block-class}__container-without-overlay {
|
113
|
+
|
114
|
+
&.#{$block-class}__container--slide-in,
|
115
|
+
&.#{$block-class}__container:not(:has(+ .#{$block-class}__overlay)),
|
116
|
+
&.#{$block-class}__container--has-no-overlay {
|
111
117
|
box-shadow: 0 $spacing-01 $spacing-02 $overlay;
|
112
118
|
}
|
113
|
-
|
119
|
+
|
120
|
+
.#{$block-class}__header {
|
121
|
+
--#{$block-class}--title-padding-bottom: #{$spacing-05};
|
122
|
+
|
114
123
|
position: sticky;
|
115
124
|
z-index: 4;
|
116
|
-
|
117
|
-
|
125
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
126
|
+
top: calc(-1px * var(--#{$block-class}--scroll-animation-distance));
|
127
|
+
padding: $spacing-05;
|
128
|
+
padding-bottom: 0;
|
118
129
|
background-color: $layer-01;
|
119
130
|
|
120
|
-
&:has(.#{$block-class}
|
131
|
+
&:has(.#{$block-class}__subtitle-text),
|
132
|
+
&.#{$block-class}__header--has-subtitle {
|
133
|
+
--#{$block-class}--title-padding-bottom: #{$spacing-03};
|
134
|
+
}
|
135
|
+
|
136
|
+
&:has(.#{$block-class}__navigation-back-button),
|
137
|
+
&.#{$block-class}__header--has-navigation-back {
|
121
138
|
padding-top: $spacing-07;
|
122
139
|
}
|
123
140
|
|
124
141
|
&:has(
|
125
142
|
.#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
|
126
|
-
)
|
143
|
+
),
|
144
|
+
&.#{$block-class}__header--has-navigation-back.#{c4p-settings.$carbon-prefix}--btn--md {
|
127
145
|
padding-top: $spacing-08;
|
128
146
|
}
|
129
147
|
|
130
148
|
/* stylelint-disable-next-line max-nesting-depth */
|
131
149
|
&::before {
|
132
150
|
@include setDividerStyles();
|
151
|
+
|
152
|
+
z-index: 9;
|
133
153
|
}
|
134
|
-
|
154
|
+
|
155
|
+
&.#{$block-class}__header--no-title-animation {
|
156
|
+
position: relative;
|
157
|
+
top: 0;
|
158
|
+
}
|
159
|
+
|
160
|
+
&.#{$block-class}__header--no-title-animation::before {
|
161
|
+
opacity: 1;
|
162
|
+
}
|
163
|
+
|
164
|
+
&.#{$block-class}__header--reduced-motion {
|
135
165
|
z-index: 5;
|
136
166
|
border-bottom: 1px solid $border-subtle-02;
|
137
167
|
margin-bottom: $spacing-05;
|
138
168
|
}
|
139
|
-
|
169
|
+
|
170
|
+
&.#{$block-class}__header--reduced-motion.#{$block-class}__header--no-title-animation {
|
140
171
|
border-bottom: 0;
|
141
172
|
margin-bottom: 0;
|
142
173
|
}
|
143
|
-
|
144
|
-
|
174
|
+
|
175
|
+
&.#{$block-class}--on-detail-step .#{$block-class}__collapsed-title-text {
|
176
|
+
top: $spacing-05;
|
145
177
|
}
|
146
178
|
|
147
|
-
&.#{$block-class}
|
179
|
+
&.#{$block-class}--on-detail-step
|
148
180
|
.#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
|
149
181
|
~ .#{$block-class}__collapsed-title-text {
|
150
|
-
top: $spacing-
|
182
|
+
top: $spacing-06;
|
151
183
|
}
|
152
184
|
|
153
|
-
&.#{$block-class}
|
154
|
-
padding: 0;
|
155
|
-
}
|
156
|
-
&.#{$block-class}__title-container-without-title.#{$block-class}__on-detail-step-without-title {
|
185
|
+
&.#{$block-class}--on-detail-step:not(:has(.#{$block-class}__title-text)) {
|
157
186
|
height: calc(#{$spacing-08} + #{$spacing-02});
|
158
187
|
padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
|
159
188
|
}
|
160
|
-
|
189
|
+
|
190
|
+
&:not(:has(.#{$block-class}__title-text))::before,
|
191
|
+
&.#{$block-class}__header--has-no-title::before {
|
161
192
|
background-color: transparent;
|
162
193
|
}
|
163
194
|
}
|
195
|
+
|
196
|
+
&.#{$block-class}__container:has(.#{$block-class}__action-toolbar),
|
197
|
+
&.#{$block-class}__container--has-action-toolbar,
|
164
198
|
&.#{$block-class}__container--has-slug {
|
165
|
-
--#{$block-class}--title-padding-right: #{$spacing-
|
199
|
+
--#{$block-class}--title-padding-right: #{$spacing-10};
|
166
200
|
}
|
167
|
-
|
168
|
-
|
169
|
-
}
|
170
|
-
|
171
|
-
|
172
|
-
|
201
|
+
|
202
|
+
&.#{$block-class}__container:has(.#{$block-class}__action-toolbar),
|
203
|
+
&.#{$block-class}__container--has-action-toolbar {
|
204
|
+
&.#{$block-class}__container--has-slug {
|
205
|
+
--#{$block-class}--title-padding-right: #{$spacing-11};
|
206
|
+
}
|
173
207
|
}
|
174
|
-
|
175
|
-
|
176
|
-
|
208
|
+
|
209
|
+
.#{$block-class}__animated-scroll-wrapper {
|
210
|
+
display: grid;
|
211
|
+
grid-template-rows: auto 1fr;
|
177
212
|
}
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
213
|
+
|
214
|
+
.#{$block-class}__title {
|
215
|
+
position: sticky;
|
216
|
+
z-index: 4;
|
217
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
218
|
+
top: var(--#{$block-class}--title-stop);
|
219
|
+
|
220
|
+
/* border-bottom used instead of padding which wrapped text shows through */
|
221
|
+
border-bottom: var(--#{$block-class}--title-padding-bottom) solid
|
222
|
+
transparent;
|
223
|
+
background-color: $layer-01;
|
185
224
|
}
|
225
|
+
|
186
226
|
.#{$block-class}__title-text {
|
187
227
|
@include type.type-style('heading-03');
|
188
228
|
@include setCommonTitleStyles();
|
189
229
|
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
transform: translateY(
|
230
|
+
opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
|
231
|
+
}
|
232
|
+
|
233
|
+
.#{$block-class}__title--no-label .#{$block-class}__title-text {
|
234
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
235
|
+
transform: translateY(
|
236
|
+
calc(
|
237
|
+
-1 * #{$spacing-05} * var(--#{$block-class}--scroll-animation-progress)
|
238
|
+
)
|
239
|
+
);
|
240
|
+
}
|
241
|
+
|
242
|
+
.#{$block-class}__header--no-title-animation .#{$block-class}__title-text {
|
243
|
+
position: static;
|
196
244
|
}
|
245
|
+
|
197
246
|
.#{$block-class}__label-text {
|
198
247
|
@include type.type-style('label-01');
|
199
248
|
|
200
249
|
overflow: hidden;
|
201
250
|
padding-right: var(--#{$block-class}--title-padding-right);
|
202
|
-
opacity: var(--#{$block-class}--
|
251
|
+
opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
|
203
252
|
text-overflow: ellipsis;
|
204
|
-
transform: translateY(var(--#{$block-class}--title-y-position));
|
205
253
|
white-space: nowrap;
|
206
254
|
}
|
255
|
+
|
207
256
|
.#{$block-class}__collapsed-title-text {
|
208
257
|
@include type.type-style('heading-compact-02');
|
209
258
|
@include setCommonTitleStyles();
|
210
259
|
|
211
260
|
position: absolute;
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
261
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
262
|
+
top: 0;
|
263
|
+
opacity: var(--#{$block-class}--scroll-animation-progress);
|
264
|
+
}
|
265
|
+
|
266
|
+
.#{$block-class}__title--no-label .#{$block-class}__collapsed-title-text {
|
267
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
268
|
+
transform: translateY(
|
269
|
+
calc(
|
270
|
+
#{$spacing-05} * (1 - var(--#{$block-class}--scroll-animation-progress))
|
271
|
+
)
|
272
|
+
);
|
216
273
|
}
|
274
|
+
|
217
275
|
.#{$block-class}__subtitle-text {
|
218
276
|
@include type.type-style('body-compact-01');
|
219
277
|
|
220
278
|
overflow: hidden;
|
221
|
-
padding:
|
279
|
+
padding-right: var(--#{$block-class}--title-padding-right);
|
280
|
+
padding-bottom: $spacing-05;
|
281
|
+
|
222
282
|
-webkit-box-orient: vertical;
|
223
283
|
-webkit-line-clamp: 3;
|
224
|
-
opacity: var(--#{$block-class}--
|
284
|
+
opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
|
225
285
|
}
|
226
|
-
|
227
|
-
|
286
|
+
|
287
|
+
.#{$block-class}__header--no-title-animation .#{$block-class}__subtitle-text {
|
228
288
|
z-index: 2;
|
229
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
230
|
-
top: calc(
|
231
|
-
var(--#{$block-class}--title-text-height) +
|
232
|
-
var(--#{$block-class}--label-text-height)
|
233
|
-
);
|
234
289
|
background-color: $layer-01;
|
235
290
|
}
|
236
291
|
|
237
|
-
.#{$block-class}
|
238
|
-
top: var(--#{$block-class}--title-text-height);
|
239
|
-
}
|
240
|
-
|
241
|
-
.#{$block-class}__subtitle-text.#{$block-class}__subtitle-without-title {
|
292
|
+
.#{$block-class}__title-text + .#{$block-class}__subtitle-text {
|
242
293
|
padding-top: $spacing-05;
|
243
|
-
padding-right: $spacing-09;
|
244
294
|
}
|
245
|
-
|
246
|
-
|
247
|
-
top: 0;
|
248
|
-
}
|
249
|
-
|
250
|
-
.#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation {
|
251
|
-
position: fixed;
|
252
|
-
height: calc(
|
253
|
-
var(--#{$block-class}--title-text-height) +
|
254
|
-
var(--#{$block-class}--label-text-height)
|
255
|
-
);
|
295
|
+
.#{$block-class}__inner-content {
|
296
|
+
padding: $spacing-05;
|
297
|
+
padding-top: 0;
|
256
298
|
}
|
257
299
|
|
258
|
-
.#{$block-class}
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
var(--#{$block-class}--title-text-height) +
|
264
|
-
var(--#{$block-class}--subtitle-container-height) +
|
265
|
-
var(--#{$block-class}--action-bar-container-height) +
|
266
|
-
var(--#{$block-class}--label-text-height)
|
267
|
-
);
|
268
|
-
overflow-x: hidden;
|
300
|
+
.#{$block-class}__header:has(.#{$block-class}__action-toolbar)
|
301
|
+
+ .#{$block-class}__inner-content,
|
302
|
+
.#{$block-class}__header--has-action-toolbar
|
303
|
+
+ .#{$block-class}__inner-content {
|
304
|
+
padding-top: $spacing-03;
|
269
305
|
}
|
270
306
|
|
271
307
|
&.#{$block-class}__container--has-slug .#{$block-class}__inner-content {
|
272
308
|
@include utilities.ai-gradient('bottom');
|
273
309
|
}
|
274
310
|
|
275
|
-
.#{$block-class}__inner-content-
|
276
|
-
height: calc(
|
277
|
-
100vh - (var(--#{$block-class}--content-bottom-padding) + 2rem)
|
278
|
-
);
|
279
|
-
}
|
280
|
-
|
281
|
-
.#{$block-class}__inner-content.#{$block-class}__static-inner-content {
|
282
|
-
height: calc(
|
283
|
-
100vh -
|
284
|
-
calc(
|
285
|
-
var(--#{$block-class}--title-text-height) +
|
286
|
-
var(--#{$block-class}--subtitle-container-height) +
|
287
|
-
var(--#{$block-class}--action-bar-container-height)
|
288
|
-
) + (calc(-1 * (#{$spacing-09} + #{$spacing-10})))
|
289
|
-
);
|
311
|
+
.#{$block-class}__inner-content.#{$block-class}__inner-content--static {
|
290
312
|
padding-top: $spacing-05;
|
291
313
|
}
|
292
314
|
|
293
|
-
.#{$block-class}__inner-content.#{$block-class}__static-inner-content-no-actions {
|
294
|
-
height: calc(
|
295
|
-
100vh -
|
296
|
-
calc(
|
297
|
-
var(--#{$block-class}--title-text-height) +
|
298
|
-
var(--#{$block-class}--subtitle-container-height) +
|
299
|
-
var(--#{$block-class}--action-bar-container-height) +
|
300
|
-
var(--#{$block-class}--label-text-height)
|
301
|
-
)
|
302
|
-
);
|
303
|
-
}
|
304
|
-
|
305
|
-
.#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation {
|
306
|
-
position: fixed;
|
307
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
308
|
-
top: calc(
|
309
|
-
var(--#{$block-class}--title-text-height) +
|
310
|
-
var(--#{$block-class}--subtitle-container-height)
|
311
|
-
);
|
312
|
-
width: 100%;
|
313
|
-
border-bottom: 1px solid $layer-active-01;
|
314
|
-
}
|
315
|
-
|
316
|
-
.#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation
|
317
|
-
+ .#{$block-class}__body-content {
|
318
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
319
|
-
margin-top: calc(
|
320
|
-
var(--#{$block-class}--title-text-height) +
|
321
|
-
var(--#{$block-class}--subtitle-container-height) + #{$spacing-09}
|
322
|
-
);
|
323
|
-
}
|
324
|
-
|
325
|
-
.#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation.#{$block-class}__subtitle-text-no-animation-no-action-toolbar {
|
326
|
-
border-bottom: 1px solid $layer-active-01;
|
327
|
-
margin-bottom: $spacing-05;
|
328
|
-
}
|
329
315
|
.#{$block-class}__action-toolbar {
|
330
316
|
position: sticky;
|
331
317
|
z-index: 4;
|
332
|
-
/* stylelint-disable-next-line carbon/layout-token-use */
|
333
|
-
top: var(--#{$block-class}--title-height);
|
334
318
|
display: flex;
|
335
319
|
align-items: center;
|
336
320
|
justify-content: flex-start;
|
337
|
-
padding: 0 $spacing-05;
|
338
|
-
margin-bottom: $spacing-03;
|
339
321
|
background-color: $layer-01;
|
340
|
-
transition: transform $duration-moderate-01 motion(standard);
|
341
322
|
}
|
342
323
|
|
343
324
|
.#{$block-class}__action-toolbar-leading-button {
|
@@ -373,25 +354,18 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
373
354
|
|
374
355
|
.#{$block-class}__slug-and-close {
|
375
356
|
position: fixed;
|
376
|
-
z-index:
|
357
|
+
z-index: 10; /* must be higher than title container border bottom */
|
377
358
|
top: 0;
|
378
359
|
right: 0;
|
379
360
|
display: flex;
|
380
361
|
}
|
381
362
|
|
382
|
-
.#{$block-class}__body-content {
|
383
|
-
padding: $spacing-05;
|
384
|
-
padding-top: 0;
|
385
|
-
}
|
386
|
-
&.#{$block-class}__container-is-animating
|
387
|
-
.#{$block-class}__actions-container.#{$action-set-block-class}--2xl {
|
388
|
-
@include setPanelSize(100%);
|
389
|
-
}
|
390
363
|
.#{$block-class}__actions-container {
|
391
|
-
position:
|
364
|
+
position: sticky; // stick to bottom
|
392
365
|
bottom: 0;
|
393
366
|
border-top: 1px solid $border-subtle-02;
|
394
367
|
background-color: $layer-01;
|
368
|
+
|
395
369
|
&.#{$action-set-block-class}--2xl {
|
396
370
|
.#{$action-set-block-class}__action-button {
|
397
371
|
width: 100%;
|
@@ -407,12 +381,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
407
381
|
|
408
382
|
flex-direction: column;
|
409
383
|
}
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
.#{$action-set-block-class}__action-button {
|
415
|
-
height: $spacing-09;
|
384
|
+
|
385
|
+
.#{$action-set-block-class}__action-button.#{$action-set-block-class}__action-button {
|
386
|
+
// extra class needed to override default size
|
387
|
+
height: var(--#{$block-class}--actions-height);
|
416
388
|
}
|
417
389
|
}
|
418
390
|
&.#{$block-class}__container.#{$block-class}__container--xs
|
@@ -142,7 +142,10 @@ $block-class-modal: #{$_block-class}-modal;
|
|
142
142
|
.#{$block-class-overflow}__tag-list {
|
143
143
|
display: flex;
|
144
144
|
flex-direction: column;
|
145
|
-
|
145
|
+
}
|
146
|
+
|
147
|
+
.#{$block-class-overflow}__show-all-tags-link {
|
148
|
+
margin-top: $spacing-03;
|
146
149
|
}
|
147
150
|
|
148
151
|
.#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
|