@carbon/ibm-products 2.21.0 → 2.23.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -4
- package/css/index-full-carbon.css +559 -357
- 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 +227 -267
- 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 +271 -295
- 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 +251 -298
- 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/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +14 -4
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/es/components/Datagrid/Datagrid/addons/Slug/ColumnHeaderSlug.js +26 -0
- package/es/components/Datagrid/useDefaultStringRenderer.js +3 -3
- package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/es/components/Datagrid/useSortableColumns.js +15 -5
- 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/FilterSummary/FilterSummary.js +100 -19
- package/es/components/SidePanel/SidePanel.js +145 -189
- package/es/components/TagSet/TagSet.js +31 -7
- package/es/components/TagSet/TagSetOverflow.js +13 -8
- 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/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +14 -4
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/lib/components/Datagrid/Datagrid/addons/Slug/ColumnHeaderSlug.js +36 -0
- package/lib/components/Datagrid/useDefaultStringRenderer.js +3 -3
- package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/lib/components/Datagrid/useSortableColumns.js +15 -5
- 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/FilterSummary/FilterSummary.js +103 -23
- package/lib/components/SidePanel/SidePanel.js +145 -189
- package/lib/components/TagSet/TagSet.js +31 -7
- package/lib/components/TagSet/TagSetOverflow.js +12 -7
- 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/CreateSidePanel/_create-side-panel.scss +1 -38
- package/scss/components/Datagrid/_datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +24 -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/EditSidePanel/_edit-side-panel.scss +0 -18
- package/scss/components/FilterSummary/_filter-summary.scss +22 -1
- package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
- package/scss/components/SidePanel/_side-panel.scss +155 -187
- 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,255 +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
|
-
|
125
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
126
|
+
top: calc(-1px * var(--#{$block-class}--scroll-animation-distance));
|
117
127
|
padding: $spacing-05;
|
128
|
+
padding-bottom: 0;
|
118
129
|
background-color: $layer-01;
|
119
130
|
|
120
|
-
&:has(
|
121
|
-
|
131
|
+
&:has(.#{$block-class}__subtitle-text),
|
132
|
+
&.#{$block-class}__header--has-subtitle {
|
133
|
+
--#{$block-class}--title-padding-bottom: #{$spacing-03};
|
122
134
|
}
|
123
135
|
|
124
|
-
&:has(.#{$block-class}__navigation-back-button)
|
136
|
+
&:has(.#{$block-class}__navigation-back-button),
|
137
|
+
&.#{$block-class}__header--has-navigation-back {
|
125
138
|
padding-top: $spacing-07;
|
126
139
|
}
|
127
140
|
|
128
141
|
&:has(
|
129
142
|
.#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
|
130
|
-
)
|
143
|
+
),
|
144
|
+
&.#{$block-class}__header--has-navigation-back.#{c4p-settings.$carbon-prefix}--btn--md {
|
131
145
|
padding-top: $spacing-08;
|
132
146
|
}
|
133
147
|
|
134
148
|
/* stylelint-disable-next-line max-nesting-depth */
|
135
149
|
&::before {
|
136
150
|
@include setDividerStyles();
|
151
|
+
|
152
|
+
z-index: 9;
|
153
|
+
}
|
154
|
+
|
155
|
+
&.#{$block-class}__header--no-title-animation {
|
156
|
+
position: relative;
|
157
|
+
top: 0;
|
137
158
|
}
|
138
|
-
|
159
|
+
|
160
|
+
&.#{$block-class}__header--no-title-animation::before {
|
161
|
+
opacity: 1;
|
162
|
+
}
|
163
|
+
|
164
|
+
&.#{$block-class}__header--reduced-motion {
|
139
165
|
z-index: 5;
|
140
166
|
border-bottom: 1px solid $border-subtle-02;
|
141
167
|
margin-bottom: $spacing-05;
|
142
168
|
}
|
143
|
-
|
169
|
+
|
170
|
+
&.#{$block-class}__header--reduced-motion.#{$block-class}__header--no-title-animation {
|
144
171
|
border-bottom: 0;
|
145
172
|
margin-bottom: 0;
|
146
173
|
}
|
147
|
-
|
148
|
-
|
174
|
+
|
175
|
+
&.#{$block-class}--on-detail-step .#{$block-class}__collapsed-title-text {
|
176
|
+
top: $spacing-05;
|
149
177
|
}
|
150
178
|
|
151
|
-
&.#{$block-class}
|
179
|
+
&.#{$block-class}--on-detail-step
|
152
180
|
.#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
|
153
181
|
~ .#{$block-class}__collapsed-title-text {
|
154
|
-
top: $spacing-
|
182
|
+
top: $spacing-06;
|
155
183
|
}
|
156
184
|
|
157
|
-
&.#{$block-class}
|
158
|
-
padding: 0;
|
159
|
-
}
|
160
|
-
&.#{$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)) {
|
161
186
|
height: calc(#{$spacing-08} + #{$spacing-02});
|
162
187
|
padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
|
163
188
|
}
|
164
|
-
|
189
|
+
|
190
|
+
&:not(:has(.#{$block-class}__title-text))::before,
|
191
|
+
&.#{$block-class}__header--has-no-title::before {
|
165
192
|
background-color: transparent;
|
166
193
|
}
|
167
194
|
}
|
195
|
+
|
196
|
+
&.#{$block-class}__container:has(.#{$block-class}__action-toolbar),
|
197
|
+
&.#{$block-class}__container--has-action-toolbar,
|
168
198
|
&.#{$block-class}__container--has-slug {
|
169
|
-
--#{$block-class}--title-padding-right: #{$spacing-
|
170
|
-
}
|
171
|
-
&.#{$block-class}__container-is-animating {
|
172
|
-
pointer-events: none;
|
199
|
+
--#{$block-class}--title-padding-right: #{$spacing-10};
|
173
200
|
}
|
174
|
-
|
175
|
-
|
176
|
-
|
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
|
+
}
|
177
207
|
}
|
178
|
-
|
179
|
-
|
180
|
-
|
208
|
+
|
209
|
+
.#{$block-class}__animated-scroll-wrapper {
|
210
|
+
display: grid;
|
211
|
+
grid-template-rows: auto 1fr;
|
181
212
|
}
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
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;
|
189
224
|
}
|
225
|
+
|
190
226
|
.#{$block-class}__title-text {
|
191
227
|
@include type.type-style('heading-03');
|
192
228
|
@include setCommonTitleStyles();
|
193
229
|
|
194
|
-
|
195
|
-
z-index: 4;
|
196
|
-
margin-bottom: calc(-1 * var(--#{$block-class}--label-text-height));
|
197
|
-
background-color: $layer-01;
|
198
|
-
opacity: var(--#{$block-class}--subtitle-opacity);
|
199
|
-
transform: translateY(var(--#{$block-class}--title-y-position));
|
230
|
+
opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
|
200
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;
|
244
|
+
}
|
245
|
+
|
201
246
|
.#{$block-class}__label-text {
|
202
247
|
@include type.type-style('label-01');
|
203
248
|
|
204
249
|
overflow: hidden;
|
205
250
|
padding-right: var(--#{$block-class}--title-padding-right);
|
206
|
-
opacity: var(--#{$block-class}--
|
251
|
+
opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
|
207
252
|
text-overflow: ellipsis;
|
208
|
-
transform: translateY(var(--#{$block-class}--title-y-position));
|
209
253
|
white-space: nowrap;
|
210
254
|
}
|
255
|
+
|
211
256
|
.#{$block-class}__collapsed-title-text {
|
212
257
|
@include type.type-style('heading-compact-02');
|
213
258
|
@include setCommonTitleStyles();
|
214
259
|
|
215
260
|
position: absolute;
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
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
|
+
);
|
220
273
|
}
|
274
|
+
|
221
275
|
.#{$block-class}__subtitle-text {
|
222
276
|
@include type.type-style('body-compact-01');
|
223
277
|
|
224
278
|
overflow: hidden;
|
225
|
-
padding:
|
279
|
+
padding-right: var(--#{$block-class}--title-padding-right);
|
280
|
+
padding-bottom: $spacing-05;
|
281
|
+
|
226
282
|
-webkit-box-orient: vertical;
|
227
283
|
-webkit-line-clamp: 3;
|
228
|
-
opacity: var(--#{$block-class}--
|
284
|
+
opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
|
229
285
|
}
|
230
|
-
|
231
|
-
|
286
|
+
|
287
|
+
.#{$block-class}__header--no-title-animation .#{$block-class}__subtitle-text {
|
232
288
|
z-index: 2;
|
233
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
234
|
-
top: calc(
|
235
|
-
var(--#{$block-class}--title-text-height) +
|
236
|
-
var(--#{$block-class}--label-text-height)
|
237
|
-
);
|
238
289
|
background-color: $layer-01;
|
239
290
|
}
|
240
291
|
|
241
|
-
.#{$block-class}
|
242
|
-
top: var(--#{$block-class}--title-text-height);
|
243
|
-
}
|
244
|
-
|
245
|
-
.#{$block-class}__subtitle-text.#{$block-class}__subtitle-without-title {
|
292
|
+
.#{$block-class}__title-text + .#{$block-class}__subtitle-text {
|
246
293
|
padding-top: $spacing-05;
|
247
|
-
padding-right: $spacing-09;
|
248
|
-
}
|
249
|
-
|
250
|
-
.#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation.#{$block-class}__title-container-is-animating {
|
251
|
-
top: 0;
|
252
294
|
}
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
height: calc(
|
257
|
-
var(--#{$block-class}--title-text-height) +
|
258
|
-
var(--#{$block-class}--label-text-height)
|
259
|
-
);
|
295
|
+
.#{$block-class}__inner-content {
|
296
|
+
padding: $spacing-05;
|
297
|
+
padding-top: 0;
|
260
298
|
}
|
261
299
|
|
262
|
-
.#{$block-class}
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
var(--#{$block-class}--title-text-height) +
|
268
|
-
var(--#{$block-class}--subtitle-container-height) +
|
269
|
-
var(--#{$block-class}--action-bar-container-height) +
|
270
|
-
var(--#{$block-class}--label-text-height)
|
271
|
-
);
|
272
|
-
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;
|
273
305
|
}
|
274
306
|
|
275
307
|
&.#{$block-class}__container--has-slug .#{$block-class}__inner-content {
|
276
308
|
@include utilities.ai-gradient('bottom');
|
277
309
|
}
|
278
310
|
|
279
|
-
.#{$block-class}__inner-content-
|
280
|
-
height: calc(
|
281
|
-
100vh - (var(--#{$block-class}--content-bottom-padding) + 2rem)
|
282
|
-
);
|
283
|
-
}
|
284
|
-
|
285
|
-
.#{$block-class}__inner-content.#{$block-class}__static-inner-content {
|
286
|
-
height: calc(
|
287
|
-
100vh -
|
288
|
-
calc(
|
289
|
-
var(--#{$block-class}--title-text-height) +
|
290
|
-
var(--#{$block-class}--subtitle-container-height) +
|
291
|
-
var(--#{$block-class}--action-bar-container-height)
|
292
|
-
) + (calc(-1 * (#{$spacing-09} + #{$spacing-10})))
|
293
|
-
);
|
311
|
+
.#{$block-class}__inner-content.#{$block-class}__inner-content--static {
|
294
312
|
padding-top: $spacing-05;
|
295
313
|
}
|
296
314
|
|
297
|
-
.#{$block-class}__inner-content.#{$block-class}__static-inner-content-no-actions {
|
298
|
-
height: calc(
|
299
|
-
100vh -
|
300
|
-
calc(
|
301
|
-
var(--#{$block-class}--title-text-height) +
|
302
|
-
var(--#{$block-class}--subtitle-container-height) +
|
303
|
-
var(--#{$block-class}--action-bar-container-height) +
|
304
|
-
var(--#{$block-class}--label-text-height)
|
305
|
-
)
|
306
|
-
);
|
307
|
-
}
|
308
|
-
|
309
|
-
.#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation {
|
310
|
-
position: fixed;
|
311
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
312
|
-
top: calc(
|
313
|
-
var(--#{$block-class}--title-text-height) +
|
314
|
-
var(--#{$block-class}--subtitle-container-height)
|
315
|
-
);
|
316
|
-
width: 100%;
|
317
|
-
border-bottom: 1px solid $layer-active-01;
|
318
|
-
}
|
319
|
-
|
320
|
-
.#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation
|
321
|
-
+ .#{$block-class}__body-content {
|
322
|
-
// stylelint-disable-next-line carbon/layout-token-use
|
323
|
-
margin-top: calc(
|
324
|
-
var(--#{$block-class}--title-text-height) +
|
325
|
-
var(--#{$block-class}--subtitle-container-height) + #{$spacing-09}
|
326
|
-
);
|
327
|
-
}
|
328
|
-
|
329
|
-
.#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation.#{$block-class}__subtitle-text-no-animation-no-action-toolbar {
|
330
|
-
border-bottom: 1px solid $layer-active-01;
|
331
|
-
margin-bottom: $spacing-05;
|
332
|
-
}
|
333
315
|
.#{$block-class}__action-toolbar {
|
334
316
|
position: sticky;
|
335
317
|
z-index: 4;
|
336
|
-
/* stylelint-disable-next-line carbon/layout-token-use */
|
337
|
-
top: var(--#{$block-class}--title-height);
|
338
318
|
display: flex;
|
339
319
|
align-items: center;
|
340
320
|
justify-content: flex-start;
|
341
|
-
padding: 0 $spacing-05;
|
342
|
-
margin-bottom: $spacing-03;
|
343
321
|
background-color: $layer-01;
|
344
|
-
transition: transform $duration-moderate-01 motion(standard);
|
345
322
|
}
|
346
323
|
|
347
324
|
.#{$block-class}__action-toolbar-leading-button {
|
@@ -377,25 +354,18 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
377
354
|
|
378
355
|
.#{$block-class}__slug-and-close {
|
379
356
|
position: fixed;
|
380
|
-
z-index:
|
357
|
+
z-index: 10; /* must be higher than title container border bottom */
|
381
358
|
top: 0;
|
382
359
|
right: 0;
|
383
360
|
display: flex;
|
384
361
|
}
|
385
362
|
|
386
|
-
.#{$block-class}__body-content {
|
387
|
-
padding: $spacing-05;
|
388
|
-
padding-top: 0;
|
389
|
-
}
|
390
|
-
&.#{$block-class}__container-is-animating
|
391
|
-
.#{$block-class}__actions-container.#{$action-set-block-class}--2xl {
|
392
|
-
@include setPanelSize(100%);
|
393
|
-
}
|
394
363
|
.#{$block-class}__actions-container {
|
395
|
-
position:
|
364
|
+
position: sticky; // stick to bottom
|
396
365
|
bottom: 0;
|
397
366
|
border-top: 1px solid $border-subtle-02;
|
398
367
|
background-color: $layer-01;
|
368
|
+
|
399
369
|
&.#{$action-set-block-class}--2xl {
|
400
370
|
.#{$action-set-block-class}__action-button {
|
401
371
|
width: 100%;
|
@@ -411,12 +381,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
|
|
411
381
|
|
412
382
|
flex-direction: column;
|
413
383
|
}
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
.#{$action-set-block-class}__action-button {
|
419
|
-
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);
|
420
388
|
}
|
421
389
|
}
|
422
390
|
&.#{$block-class}__container.#{$block-class}__container--xs
|