@patternfly/react-styles 5.0.0 → 5.1.1-prerelease.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +10 -0
- package/css/components/AboutModalBox/about-modal-box.css +20 -13
- package/css/components/Accordion/accordion.css +30 -20
- package/css/components/ActionList/action-list.css +2 -2
- package/css/components/Alert/alert-group.css +7 -4
- package/css/components/Alert/alert.css +16 -13
- package/css/components/AppLauncher/app-launcher.css +32 -23
- package/css/components/BackToTop/back-to-top.css +2 -2
- package/css/components/Backdrop/backdrop.css +2 -2
- package/css/components/BackgroundImage/background-image.css +2 -2
- package/css/components/Badge/badge.css +2 -2
- package/css/components/Banner/banner.css +5 -2
- package/css/components/Breadcrumb/breadcrumb.css +6 -3
- package/css/components/Button/button.css +23 -17
- package/css/components/CalendarMonth/calendar-month.css +21 -15
- package/css/components/Card/card.css +21 -16
- package/css/components/Check/check.css +2 -2
- package/css/components/Chip/chip-group.css +6 -6
- package/css/components/Chip/chip.css +16 -9
- package/css/components/Chip/chip.d.ts +1 -0
- package/css/components/Chip/chip.js +1 -0
- package/css/components/Chip/chip.mjs +1 -0
- package/css/components/ClipboardCopy/clipboard-copy.css +16 -10
- package/css/components/CodeBlock/code-block.css +6 -3
- package/css/components/CodeEditor/code-editor.css +31 -22
- package/css/components/Content/content.css +33 -30
- package/css/components/ContextSelector/context-selector.css +41 -26
- package/css/components/DataList/data-list-grid.css +21 -49
- package/css/components/DataList/data-list.css +66 -84
- package/css/components/DatePicker/date-picker.css +8 -8
- package/css/components/DescriptionList/description-list.css +8 -5
- package/css/components/DragDrop/drag-drop.css +8 -8
- package/css/components/Drawer/drawer.css +75 -60
- package/css/components/Dropdown/dropdown.css +75 -66
- package/css/components/DualListSelector/dual-list-selector.css +20 -14
- package/css/components/EmptyState/empty-state.css +7 -4
- package/css/components/ExpandableSection/expandable-section.css +13 -10
- package/css/components/FileUpload/file-upload.css +9 -15
- package/css/components/Form/form.css +50 -50
- package/css/components/FormControl/form-control.css +21 -11
- package/css/components/HelperText/helper-text.css +1 -1
- package/css/components/Hint/hint.css +9 -6
- package/css/components/Icon/icon.css +1 -1
- package/css/components/InlineEdit/inline-edit.css +4 -4
- package/css/components/InputGroup/input-group.css +12 -6
- package/css/components/JumpLinks/jump-links.css +24 -24
- package/css/components/Label/label-group.css +13 -10
- package/css/components/Label/label.css +9 -9
- package/css/components/List/list.css +9 -9
- package/css/components/LogViewer/log-viewer.css +14 -14
- package/css/components/Login/login.css +36 -27
- package/css/components/Masthead/masthead.css +19 -22
- package/css/components/Menu/menu.css +69 -66
- package/css/components/MenuToggle/menu-toggle.css +41 -29
- package/css/components/ModalBox/modal-box.css +19 -19
- package/css/components/MultipleFileUpload/multiple-file-upload.css +11 -8
- package/css/components/Nav/nav.css +100 -93
- package/css/components/NotificationBadge/notification-badge.css +13 -7
- package/css/components/NotificationDrawer/notification-drawer.css +28 -19
- package/css/components/NumberInput/number-input.css +3 -3
- package/css/components/OptionsMenu/options-menu.css +43 -31
- package/css/components/OverflowMenu/overflow-menu.css +2 -2
- package/css/components/Page/page.css +119 -65
- package/css/components/Pagination/pagination.css +24 -18
- package/css/components/Panel/panel.css +13 -7
- package/css/components/Popover/popover.css +24 -21
- package/css/components/Progress/progress.css +7 -7
- package/css/components/ProgressStepper/progress-stepper.css +26 -20
- package/css/components/Radio/radio.css +4 -5
- package/css/components/Select/select.css +56 -47
- package/css/components/Sidebar/sidebar.css +11 -5
- package/css/components/SimpleList/simple-list.css +10 -4
- package/css/components/Skeleton/skeleton.css +2 -5
- package/css/components/SkipToContent/skip-to-content.css +3 -3
- package/css/components/Slider/slider.css +17 -20
- package/css/components/Switch/switch.css +5 -5
- package/css/components/TabContent/tab-content.css +4 -1
- package/css/components/Table/table-grid.css +256 -219
- package/css/components/Table/table-scrollable.css +2 -2
- package/css/components/Table/table-tree-view.css +107 -104
- package/css/components/Table/table.css +87 -69
- package/css/components/Tabs/tabs.css +66 -48
- package/css/components/TextInputGroup/text-input-group.css +15 -15
- package/css/components/Tile/tile.css +10 -10
- package/css/components/ToggleGroup/toggle-group.css +14 -11
- package/css/components/Toolbar/toolbar.css +44 -41
- package/css/components/Tooltip/tooltip.css +19 -16
- package/css/components/TreeView/tree-view.css +42 -27
- package/css/components/Wizard/wizard.css +47 -35
- package/css/docs/components/Button/examples/Button.css +2 -2
- package/css/docs/components/DragDrop/examples/DragDrop.css +2 -2
- package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
- package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
- package/css/docs/components/ModalBox/examples/ModalBox.css +2 -2
- package/css/docs/components/Nav/examples/Navigation.css +2 -2
- package/css/docs/components/Popover/examples/Popover.css +2 -2
- package/css/docs/components/Select/deprecated/Select.css +3 -3
- package/css/docs/components/Table/examples/Table.css +2 -2
- package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
- package/css/docs/components/Tile/examples/Tile.css +1 -1
- package/css/docs/demos/Card/examples/Card.css +3 -3
- package/css/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
- package/css/layouts/Flex/flex.css +115 -43
- package/css/utilities/Accessibility/accessibility.css +12 -12
- package/css/utilities/Spacing/spacing.css +720 -960
- package/package.json +3 -3
@@ -109,8 +109,8 @@
|
|
109
109
|
--pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0;
|
110
110
|
--pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0;
|
111
111
|
--pf-v5-c-tree-view--m-compact--m-no-background__node--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
|
112
|
-
padding-
|
113
|
-
padding-
|
112
|
+
padding-block-start: var(--pf-v5-c-tree-view--PaddingTop);
|
113
|
+
padding-block-end: var(--pf-v5-c-tree-view--PaddingBottom);
|
114
114
|
}
|
115
115
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item {
|
116
116
|
position: relative;
|
@@ -119,18 +119,18 @@
|
|
119
119
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before,
|
120
120
|
.pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before {
|
121
121
|
position: absolute;
|
122
|
-
|
122
|
+
inset-inline-start: var(--pf-v5-c-tree-view--m-guides--guide--Left);
|
123
123
|
content: "";
|
124
124
|
}
|
125
125
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before {
|
126
|
-
|
126
|
+
inset-block-start: var(--pf-v5-c-tree-view--m-guides__list-item--before--Top);
|
127
127
|
z-index: var(--pf-v5-c-tree-view--m-guides__list-item--ZIndex);
|
128
128
|
width: var(--pf-v5-c-tree-view--m-guides__list-item--before--Width);
|
129
129
|
height: var(--pf-v5-c-tree-view--m-guides__list-item--before--Height);
|
130
130
|
background-color: var(--pf-v5-c-tree-view--m-guides__list-item--before--BackgroundColor);
|
131
131
|
}
|
132
132
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before {
|
133
|
-
|
133
|
+
inset-block-start: var(--pf-v5-c-tree-view--m-guides__node--before--Top);
|
134
134
|
width: var(--pf-v5-c-tree-view--m-guides__node--before--Width);
|
135
135
|
height: var(--pf-v5-c-tree-view--m-guides__node--before--Height);
|
136
136
|
background-color: var(--pf-v5-c-tree-view--m-guides__node--before--BackgroundColor);
|
@@ -153,7 +153,7 @@
|
|
153
153
|
--pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top);
|
154
154
|
}
|
155
155
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item {
|
156
|
-
border-
|
156
|
+
border-block-end: var(--pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth) solid var(--pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor);
|
157
157
|
}
|
158
158
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item.pf-m-expanded {
|
159
159
|
--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom);
|
@@ -169,13 +169,13 @@
|
|
169
169
|
}
|
170
170
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before,
|
171
171
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before {
|
172
|
-
|
172
|
+
inset-inline-start: var(--pf-v5-c-tree-view--m-compact--border--Left);
|
173
173
|
}
|
174
174
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before {
|
175
|
-
|
175
|
+
inset-block-start: var(--pf-v5-c-tree-view--m-compact__list-item--before--Top);
|
176
176
|
}
|
177
177
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before {
|
178
|
-
|
178
|
+
inset-block-start: var(--pf-v5-c-tree-view--m-compact__node--before--Top);
|
179
179
|
}
|
180
180
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item:last-child::before {
|
181
181
|
height: var(--pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height);
|
@@ -187,15 +187,21 @@
|
|
187
187
|
--pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height);
|
188
188
|
}
|
189
189
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node-container {
|
190
|
-
padding: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop)
|
190
|
+
padding-block-start: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop);
|
191
|
+
padding-block-end: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom);
|
192
|
+
padding-inline-start: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft);
|
193
|
+
padding-inline-end: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight);
|
191
194
|
background-color: var(--pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor);
|
192
195
|
}
|
193
196
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node-toggle {
|
194
|
-
margin-
|
195
|
-
margin-
|
197
|
+
margin-inline-start: var(--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft);
|
198
|
+
margin-inline-end: var(--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight);
|
196
199
|
}
|
197
200
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__node-container {
|
198
|
-
padding: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop)
|
201
|
+
padding-block-start: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop);
|
202
|
+
padding-block-end: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom);
|
203
|
+
padding-inline-start: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingLeft);
|
204
|
+
padding-inline-end: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingRight);
|
199
205
|
}
|
200
206
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item:not([aria-expanded]) > .pf-v5-c-tree-view__content > .pf-v5-c-tree-view__node,
|
201
207
|
.pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item:not([aria-expanded]) > .pf-v5-c-tree-view__content > .pf-v5-c-tree-view__node > .pf-v5-c-tree-view__node-container {
|
@@ -238,7 +244,7 @@
|
|
238
244
|
flex: 1 1;
|
239
245
|
align-items: flex-start;
|
240
246
|
min-width: 0;
|
241
|
-
text-align:
|
247
|
+
text-align: start;
|
242
248
|
cursor: pointer;
|
243
249
|
border: 0;
|
244
250
|
}
|
@@ -246,7 +252,10 @@
|
|
246
252
|
.pf-v5-c-tree-view__node {
|
247
253
|
position: relative;
|
248
254
|
display: flex;
|
249
|
-
padding: var(--pf-v5-c-tree-view__node--PaddingTop)
|
255
|
+
padding-block-start: var(--pf-v5-c-tree-view__node--PaddingTop);
|
256
|
+
padding-block-end: var(--pf-v5-c-tree-view__node--PaddingBottom);
|
257
|
+
padding-inline-start: var(--pf-v5-c-tree-view__node--PaddingLeft);
|
258
|
+
padding-inline-end: var(--pf-v5-c-tree-view__node--PaddingRight);
|
250
259
|
color: var(--pf-v5-c-tree-view__node--Color);
|
251
260
|
background-color: var(--pf-v5-c-tree-view__node--BackgroundColor);
|
252
261
|
}
|
@@ -258,7 +267,7 @@
|
|
258
267
|
--pf-v5-c-tree-view__node--BackgroundColor: var(--pf-v5-c-tree-view__node--focus--BackgroundColor);
|
259
268
|
}
|
260
269
|
.pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count {
|
261
|
-
margin-
|
270
|
+
margin-inline-start: var(--pf-v5-c-tree-view__node-count--MarginLeft);
|
262
271
|
}
|
263
272
|
.pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count .pf-v5-c-badge.pf-m-read {
|
264
273
|
--pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
|
@@ -284,23 +293,26 @@
|
|
284
293
|
overflow: var(--pf-v5-c-tree-view__node-content--Overflow);
|
285
294
|
}
|
286
295
|
.pf-v5-c-tree-view__node-content > * + * {
|
287
|
-
margin-
|
296
|
+
margin-block-start: var(--pf-v5-c-tree-view__node-content--RowGap);
|
288
297
|
}
|
289
298
|
|
290
299
|
.pf-v5-c-tree-view__node-check {
|
291
|
-
margin-
|
300
|
+
margin-inline-end: var(--pf-v5-c-tree-view__node-check--MarginRight);
|
292
301
|
}
|
293
302
|
|
294
303
|
.pf-v5-c-tree-view__node-toggle {
|
295
304
|
position: var(--pf-v5-c-tree-view__node-toggle--Position);
|
296
|
-
|
297
|
-
|
305
|
+
inset-block-start: var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Top);
|
306
|
+
inset-inline-start: var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left);
|
298
307
|
display: inline-flex;
|
299
308
|
align-items: center;
|
300
309
|
justify-content: center;
|
301
|
-
padding: var(--pf-v5-c-tree-view__node-toggle-button--PaddingTop)
|
302
|
-
|
303
|
-
|
310
|
+
padding-block-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingTop);
|
311
|
+
padding-block-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingBottom);
|
312
|
+
padding-inline-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft);
|
313
|
+
padding-inline-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingRight);
|
314
|
+
margin-block-start: var(--pf-v5-c-tree-view__node-toggle-button--MarginTop);
|
315
|
+
margin-block-end: var(--pf-v5-c-tree-view__node-toggle-button--MarginBottom);
|
304
316
|
color: var(--pf-v5-c-tree-view__node-toggle--Color);
|
305
317
|
background-color: var(--pf-v5-c-tree-view__node-toggle--BackgroundColor);
|
306
318
|
border: 0;
|
@@ -325,7 +337,7 @@
|
|
325
337
|
.pf-v5-c-tree-view__node-text {
|
326
338
|
font-weight: inherit;
|
327
339
|
color: inherit;
|
328
|
-
text-align:
|
340
|
+
text-align: start;
|
329
341
|
background-color: transparent;
|
330
342
|
border: 0;
|
331
343
|
}
|
@@ -338,11 +350,14 @@ label.pf-v5-c-tree-view__node-text {
|
|
338
350
|
}
|
339
351
|
|
340
352
|
.pf-v5-c-tree-view__search {
|
341
|
-
padding: var(--pf-v5-c-tree-view__search--PaddingTop)
|
353
|
+
padding-block-start: var(--pf-v5-c-tree-view__search--PaddingTop);
|
354
|
+
padding-block-end: var(--pf-v5-c-tree-view__search--PaddingBottom);
|
355
|
+
padding-inline-start: var(--pf-v5-c-tree-view__search--PaddingLeft);
|
356
|
+
padding-inline-end: var(--pf-v5-c-tree-view__search--PaddingRight);
|
342
357
|
}
|
343
358
|
|
344
359
|
.pf-v5-c-tree-view__node-icon {
|
345
|
-
padding-
|
360
|
+
padding-inline-end: var(--pf-v5-c-tree-view__node-icon--PaddingRight);
|
346
361
|
color: var(--pf-v5-c-tree-view__node-icon--Color);
|
347
362
|
}
|
348
363
|
|
@@ -357,7 +372,7 @@ label.pf-v5-c-tree-view__node-text {
|
|
357
372
|
}
|
358
373
|
|
359
374
|
.pf-v5-c-tree-view__action {
|
360
|
-
margin-
|
375
|
+
margin-inline-start: var(--pf-v5-c-tree-view__action--MarginLeft);
|
361
376
|
}
|
362
377
|
|
363
378
|
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
|
@@ -211,20 +211,23 @@
|
|
211
211
|
color: var(--pf-v5-global--Color--100);
|
212
212
|
position: relative;
|
213
213
|
z-index: var(--pf-v5-c-wizard__header--ZIndex);
|
214
|
-
padding: var(--pf-v5-c-wizard__header--PaddingTop)
|
214
|
+
padding-block-start: var(--pf-v5-c-wizard__header--PaddingTop);
|
215
|
+
padding-block-end: var(--pf-v5-c-wizard__header--PaddingBottom);
|
216
|
+
padding-inline-start: var(--pf-v5-c-wizard__header--PaddingLeft);
|
217
|
+
padding-inline-end: var(--pf-v5-c-wizard__header--PaddingRight);
|
215
218
|
background-color: var(--pf-v5-c-wizard__header--BackgroundColor);
|
216
219
|
}
|
217
220
|
.pf-v5-c-wizard__header .pf-v5-c-wizard__close {
|
218
221
|
position: absolute;
|
219
|
-
|
220
|
-
|
222
|
+
inset-block-start: var(--pf-v5-c-wizard__close--Top);
|
223
|
+
inset-inline-end: var(--pf-v5-c-wizard__close--Right);
|
221
224
|
}
|
222
225
|
.pf-v5-c-wizard__header .pf-v5-c-wizard__close button {
|
223
226
|
font-size: var(--pf-v5-c-wizard__close--FontSize);
|
224
227
|
}
|
225
228
|
|
226
229
|
.pf-v5-c-wizard__title {
|
227
|
-
padding-
|
230
|
+
padding-inline-end: var(--pf-v5-c-wizard__title--PaddingRight);
|
228
231
|
word-wrap: break-word;
|
229
232
|
}
|
230
233
|
|
@@ -237,7 +240,7 @@
|
|
237
240
|
|
238
241
|
.pf-v5-c-wizard__description {
|
239
242
|
display: none;
|
240
|
-
padding-
|
243
|
+
padding-block-start: var(--pf-v5-c-wizard__description--PaddingTop);
|
241
244
|
color: var(--pf-v5-c-wizard__description--Color);
|
242
245
|
}
|
243
246
|
@media screen and (min-width: 992px) {
|
@@ -252,7 +255,10 @@
|
|
252
255
|
display: flex;
|
253
256
|
justify-content: space-between;
|
254
257
|
width: 100%;
|
255
|
-
padding: var(--pf-v5-c-wizard__toggle--PaddingTop)
|
258
|
+
padding-block-start: var(--pf-v5-c-wizard__toggle--PaddingTop);
|
259
|
+
padding-block-end: var(--pf-v5-c-wizard__toggle--PaddingBottom);
|
260
|
+
padding-inline-start: var(--pf-v5-c-wizard__toggle--PaddingLeft);
|
261
|
+
padding-inline-end: var(--pf-v5-c-wizard__toggle--PaddingRight);
|
256
262
|
background-color: var(--pf-v5-c-wizard__toggle--BackgroundColor);
|
257
263
|
border: 0;
|
258
264
|
box-shadow: var(--pf-v5-c-wizard__toggle--BoxShadow);
|
@@ -264,7 +270,7 @@
|
|
264
270
|
}
|
265
271
|
.pf-v5-c-wizard__toggle.pf-m-expanded {
|
266
272
|
--pf-v5-c-wizard__toggle--BoxShadow: none;
|
267
|
-
border-
|
273
|
+
border-block-end: var(--pf-v5-c-wizard__toggle--m-expanded--BorderBottomWidth) solid var(--pf-v5-c-wizard__toggle--m-expanded--BorderBottomColor);
|
268
274
|
}
|
269
275
|
.pf-v5-c-wizard__toggle.pf-m-expanded .pf-v5-c-wizard__toggle-icon {
|
270
276
|
transform: rotate(var(--pf-v5-c-wizard__toggle--m-expanded__toggle-icon--Rotate));
|
@@ -275,18 +281,18 @@
|
|
275
281
|
display: flex;
|
276
282
|
flex-wrap: wrap;
|
277
283
|
align-items: baseline;
|
278
|
-
margin-
|
279
|
-
margin-
|
284
|
+
margin-block-end: var(--pf-v5-c-wizard__toggle-list--MarginBottom);
|
285
|
+
margin-inline-end: var(--pf-v5-c-wizard__toggle-list--MarginRight);
|
280
286
|
list-style: none;
|
281
287
|
}
|
282
288
|
|
283
289
|
.pf-v5-c-wizard__toggle-list-item {
|
284
|
-
margin-
|
285
|
-
text-align:
|
290
|
+
margin-block-end: var(--pf-v5-c-wizard__toggle-list-item--MarginBottom);
|
291
|
+
text-align: start;
|
286
292
|
word-break: break-word;
|
287
293
|
}
|
288
294
|
.pf-v5-c-wizard__toggle-list-item:not(:last-child) {
|
289
|
-
margin-
|
295
|
+
margin-inline-end: var(--pf-v5-c-wizard__toggle-list-item--not-last-child--MarginRight);
|
290
296
|
}
|
291
297
|
|
292
298
|
.pf-v5-c-wizard__toggle-num {
|
@@ -294,7 +300,7 @@
|
|
294
300
|
}
|
295
301
|
|
296
302
|
.pf-v5-c-wizard__toggle-separator {
|
297
|
-
margin-
|
303
|
+
margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
|
298
304
|
color: var(--pf-v5-c-wizard__toggle-separator--Color);
|
299
305
|
}
|
300
306
|
|
@@ -312,7 +318,7 @@
|
|
312
318
|
}
|
313
319
|
@media screen and (min-width: 992px) {
|
314
320
|
.pf-v5-c-wizard__outer-wrap {
|
315
|
-
padding-
|
321
|
+
padding-inline-start: var(--pf-v5-c-wizard__outer-wrap--lg--PaddingLeft);
|
316
322
|
}
|
317
323
|
}
|
318
324
|
|
@@ -331,8 +337,8 @@
|
|
331
337
|
|
332
338
|
.pf-v5-c-wizard__nav {
|
333
339
|
position: absolute;
|
334
|
-
|
335
|
-
|
340
|
+
inset-block-start: 0;
|
341
|
+
inset-inline-start: 0;
|
336
342
|
z-index: var(--pf-v5-c-wizard__nav--ZIndex);
|
337
343
|
display: none;
|
338
344
|
width: var(--pf-v5-c-wizard__nav--Width);
|
@@ -349,22 +355,22 @@
|
|
349
355
|
.pf-v5-c-wizard__nav {
|
350
356
|
display: block;
|
351
357
|
height: 100%;
|
352
|
-
border-
|
358
|
+
border-inline-end: var(--pf-v5-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-v5-c-wizard__nav--lg--BorderRightColor);
|
353
359
|
}
|
354
360
|
}
|
355
361
|
|
356
362
|
.pf-v5-c-wizard__nav-list {
|
357
|
-
padding-
|
358
|
-
padding-
|
359
|
-
padding-
|
360
|
-
padding-
|
363
|
+
padding-block-start: var(--pf-v5-c-wizard__nav-list--PaddingTop);
|
364
|
+
padding-block-end: var(--pf-v5-c-wizard__nav-list--PaddingBottom);
|
365
|
+
padding-inline-start: var(--pf-v5-c-wizard__nav-list--PaddingLeft);
|
366
|
+
padding-inline-end: var(--pf-v5-c-wizard__nav-list--PaddingRight);
|
361
367
|
list-style: none;
|
362
368
|
counter-reset: wizard-nav-count;
|
363
369
|
}
|
364
370
|
.pf-v5-c-wizard__nav-list .pf-v5-c-wizard__nav-list {
|
365
371
|
padding: 0;
|
366
|
-
margin-
|
367
|
-
margin-
|
372
|
+
margin-block-start: var(--pf-v5-c-wizard__nav-list--nested--MarginTop);
|
373
|
+
margin-inline-start: var(--pf-v5-c-wizard__nav-list--nested--MarginLeft);
|
368
374
|
}
|
369
375
|
.pf-v5-c-wizard__nav-list .pf-v5-c-wizard__nav-list .pf-v5-c-wizard__nav-link::before {
|
370
376
|
content: none;
|
@@ -374,7 +380,7 @@
|
|
374
380
|
}
|
375
381
|
|
376
382
|
.pf-v5-c-wizard__nav-item + .pf-v5-c-wizard__nav-item {
|
377
|
-
margin-
|
383
|
+
margin-block-start: var(--pf-v5-c-wizard__nav-item--MarginTop);
|
378
384
|
}
|
379
385
|
.pf-v5-c-wizard__nav-item.pf-m-expandable > .pf-v5-c-wizard__nav-link {
|
380
386
|
display: flex;
|
@@ -394,7 +400,7 @@
|
|
394
400
|
display: inline-block;
|
395
401
|
width: 100%;
|
396
402
|
color: var(--pf-v5-c-wizard__nav-link--Color);
|
397
|
-
text-align:
|
403
|
+
text-align: start;
|
398
404
|
text-decoration: var(--pf-v5-c-wizard__nav-link--TextDecoration);
|
399
405
|
word-break: break-word;
|
400
406
|
background-color: var(--pf-v5-c-wizard__nav-link--BackgroundColor);
|
@@ -402,8 +408,8 @@
|
|
402
408
|
}
|
403
409
|
.pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
|
404
410
|
position: absolute;
|
405
|
-
|
406
|
-
|
411
|
+
inset-block-start: var(--pf-v5-c-wizard__nav-link--before--Top);
|
412
|
+
inset-inline-start: 0;
|
407
413
|
display: inline-flex;
|
408
414
|
align-items: center;
|
409
415
|
justify-content: center;
|
@@ -418,7 +424,7 @@
|
|
418
424
|
}
|
419
425
|
|
420
426
|
.pf-v5-c-wizard__nav-link::before {
|
421
|
-
|
427
|
+
inset-block-start: 0;
|
422
428
|
content: counter(wizard-nav-count);
|
423
429
|
counter-increment: wizard-nav-count;
|
424
430
|
}
|
@@ -453,8 +459,8 @@
|
|
453
459
|
}
|
454
460
|
|
455
461
|
.pf-v5-c-wizard__nav-link-toggle {
|
456
|
-
padding-
|
457
|
-
padding-
|
462
|
+
padding-inline-start: var(--pf-v5-c-wizard__nav-link-toggle--PaddingLeft);
|
463
|
+
padding-inline-end: var(--pf-v5-c-wizard__nav-link-toggle--PaddingRight);
|
458
464
|
color: var(--pf-v5-c-wizard__nav-link-toggle--Color);
|
459
465
|
}
|
460
466
|
|
@@ -473,7 +479,10 @@
|
|
473
479
|
}
|
474
480
|
|
475
481
|
.pf-v5-c-wizard__main-body {
|
476
|
-
padding: var(--pf-v5-c-wizard__main-body--PaddingTop)
|
482
|
+
padding-block-start: var(--pf-v5-c-wizard__main-body--PaddingTop);
|
483
|
+
padding-block-end: var(--pf-v5-c-wizard__main-body--PaddingBottom);
|
484
|
+
padding-inline-start: var(--pf-v5-c-wizard__main-body--PaddingLeft);
|
485
|
+
padding-inline-end: var(--pf-v5-c-wizard__main-body--PaddingRight);
|
477
486
|
}
|
478
487
|
.pf-v5-c-wizard__main-body.pf-m-no-padding {
|
479
488
|
padding: 0;
|
@@ -485,21 +494,24 @@
|
|
485
494
|
display: flex;
|
486
495
|
flex-shrink: 0;
|
487
496
|
flex-wrap: wrap;
|
488
|
-
padding: var(--pf-v5-c-wizard__footer--PaddingTop)
|
497
|
+
padding-block-start: var(--pf-v5-c-wizard__footer--PaddingTop);
|
498
|
+
padding-block-end: var(--pf-v5-c-wizard__footer--PaddingBottom);
|
499
|
+
padding-inline-start: var(--pf-v5-c-wizard__footer--PaddingLeft);
|
500
|
+
padding-inline-end: var(--pf-v5-c-wizard__footer--PaddingRight);
|
489
501
|
background-color: var(--pf-v5-c-wizard__footer--BackgroundColor);
|
490
502
|
}
|
491
503
|
.pf-v5-c-wizard__footer > * {
|
492
|
-
margin-
|
504
|
+
margin-block-end: var(--pf-v5-c-wizard__footer--child--MarginBottom);
|
493
505
|
}
|
494
506
|
.pf-v5-c-wizard__footer > *:not(:last-child) {
|
495
|
-
margin-
|
507
|
+
margin-inline-end: var(--pf-v5-c-wizard__footer--child--MarginRight);
|
496
508
|
}
|
497
509
|
.pf-v5-c-page__main-wizard .pf-v5-c-wizard__footer, .pf-v5-c-modal-box .pf-v5-c-wizard__footer, .pf-v5-c-drawer > .pf-v5-c-wizard__footer {
|
498
510
|
box-shadow: var(--pf-v5-c-wizard__footer--BoxShadow);
|
499
511
|
}
|
500
512
|
|
501
513
|
.pf-v5-c-wizard__footer-cancel {
|
502
|
-
margin-
|
514
|
+
margin-inline-start: var(--pf-v5-c-wizard__footer-cancel--MarginLeft);
|
503
515
|
}
|
504
516
|
|
505
517
|
:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button {
|
@@ -30,7 +30,8 @@
|
|
30
30
|
}
|
31
31
|
|
32
32
|
#ws-html-deprecated-c-select-multi-with-typeahead-chip-group-expanded,
|
33
|
-
#ws-html-deprecated-c-select-menu-footer
|
33
|
+
#ws-html-deprecated-c-select-menu-footer,
|
34
|
+
#ws-html-deprecated-c-select-checkbox-item-description {
|
34
35
|
min-height: 365px;
|
35
36
|
}
|
36
37
|
|
@@ -46,8 +47,7 @@
|
|
46
47
|
min-height: 120px;
|
47
48
|
}
|
48
49
|
|
49
|
-
#ws-html-deprecated-c-select-item-description
|
50
|
-
#ws-html-deprecated-c-select-checkbox-item-description {
|
50
|
+
#ws-html-deprecated-c-select-item-description {
|
51
51
|
min-height: 400px;
|
52
52
|
}
|
53
53
|
|
@@ -2,7 +2,7 @@
|
|
2
2
|
#ws-core-c-tile-extra-content .ws-preview-html .pf-v5-c-tile,
|
3
3
|
#ws-core-c-tile-stacked-tiles .ws-preview-html .pf-v5-c-tile,
|
4
4
|
#ws-core-c-tile-stacked-tiles-large .ws-preview-html .pf-v5-c-tile {
|
5
|
-
margin-
|
5
|
+
margin-inline-end: 8px;
|
6
6
|
}
|
7
7
|
|
8
8
|
#ws-core-c-tile-extra-content .ws-preview-html {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
#ws-html-demos-c-card-status-card-expanded-with-popover {
|
2
|
-
padding-
|
2
|
+
padding-block-start: 180px;
|
3
3
|
}
|
4
4
|
|
5
5
|
#ws-html-demos-c-card-status-card-expanded-with-popover #carview-demo--popover-parent,
|
@@ -9,10 +9,10 @@
|
|
9
9
|
|
10
10
|
#ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-popover {
|
11
11
|
position: absolute;
|
12
|
-
margin-
|
12
|
+
margin-block-start: -12px;
|
13
13
|
z-index: 1000;
|
14
14
|
transform: translateY(-50%);
|
15
|
-
|
15
|
+
inset-inline-start: calc(100% + var(--pf-v5-c-popover__arrow--Width) + var(--pf-v5-global--spacer--sm));
|
16
16
|
}
|
17
17
|
|
18
18
|
#ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-table {
|
@@ -1,20 +1,20 @@
|
|
1
1
|
.ws-core-u-box-shadow [class*="pf-v5-u-box-shadow"] {
|
2
2
|
padding: var(--pf-v5-global--spacer--lg);
|
3
|
-
margin-
|
3
|
+
margin-block-end: var(--pf-v5-global--spacer--md);
|
4
4
|
}
|
5
5
|
|
6
6
|
#ws-core-u-box-shadow-small [class*="pf-v5-u-box-shadow"]:not(:last-child) {
|
7
|
-
margin-
|
7
|
+
margin-block-end: var(--pf-v5-global--spacer--lg);
|
8
8
|
}
|
9
9
|
|
10
10
|
#ws-core-u-box-shadow-medium [class*="pf-v5-u-box-shadow"]:not(:last-child) {
|
11
|
-
margin-
|
11
|
+
margin-block-end: var(--pf-v5-global--spacer--xl);
|
12
12
|
}
|
13
13
|
|
14
14
|
#ws-core-u-box-shadow-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
|
15
|
-
margin-
|
15
|
+
margin-block-end: var(--pf-v5-global--spacer--2xl);
|
16
16
|
}
|
17
17
|
|
18
18
|
#ws-core-u-box-shadow-extra-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
|
19
|
-
margin-
|
19
|
+
margin-block-end: var(--pf-v5-global--spacer--3xl);
|
20
20
|
}
|