@patternfly/patternfly 5.1.0-prerelease.6 → 5.1.0-prerelease.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/pficon/pf-v5-pficon.woff2 +0 -0
- package/assets/pficon/pficon.scss +6 -129
- package/base/_globals.scss +1 -1
- package/base/patternfly-common.css +2 -2
- package/base/patternfly-globals.css +1 -1
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/components/AboutModalBox/about-modal-box.css +18 -12
- package/components/AboutModalBox/about-modal-box.scss +18 -12
- package/components/Accordion/accordion.css +30 -20
- package/components/Accordion/accordion.scss +30 -20
- package/components/ActionList/action-list.css +2 -2
- package/components/ActionList/action-list.scss +2 -2
- package/components/Alert/alert-group.css +7 -4
- package/components/Alert/alert-group.scss +7 -4
- package/components/Alert/alert.css +16 -13
- package/components/Alert/alert.scss +16 -13
- package/components/AppLauncher/app-launcher.css +32 -23
- package/components/AppLauncher/app-launcher.scss +32 -23
- package/components/BackToTop/back-to-top.css +2 -2
- package/components/BackToTop/back-to-top.scss +2 -2
- package/components/Backdrop/backdrop.css +2 -2
- package/components/Backdrop/backdrop.scss +2 -2
- package/components/BackgroundImage/background-image.css +2 -2
- package/components/BackgroundImage/background-image.scss +2 -2
- package/components/Badge/badge.css +2 -2
- package/components/Badge/badge.scss +2 -2
- package/components/Banner/banner.css +5 -2
- package/components/Banner/banner.scss +5 -2
- package/components/Breadcrumb/breadcrumb.css +6 -3
- package/components/Breadcrumb/breadcrumb.scss +6 -3
- package/components/Button/button.css +23 -17
- package/components/Button/button.scss +22 -16
- package/components/Button/themes/dark/button.scss +1 -1
- package/components/CalendarMonth/calendar-month.css +21 -15
- package/components/CalendarMonth/calendar-month.scss +21 -15
- package/components/Card/card.css +21 -16
- package/components/Card/card.scss +21 -16
- package/components/Check/check.css +2 -2
- package/components/Check/check.scss +2 -2
- package/components/Chip/chip-group.css +6 -6
- package/components/Chip/chip-group.scss +6 -6
- package/components/Chip/chip.css +16 -9
- package/components/Chip/chip.scss +17 -9
- package/components/ClipboardCopy/clipboard-copy.css +16 -10
- package/components/ClipboardCopy/clipboard-copy.scss +14 -8
- package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
- package/components/CodeBlock/code-block.css +6 -3
- package/components/CodeBlock/code-block.scss +6 -3
- package/components/CodeEditor/code-editor.css +31 -22
- package/components/CodeEditor/code-editor.scss +30 -21
- package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
- package/components/Content/content.css +33 -30
- package/components/Content/content.scss +33 -30
- package/components/ContextSelector/context-selector.css +41 -26
- package/components/ContextSelector/context-selector.scss +40 -25
- package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
- package/components/DataList/data-list-grid.css +21 -21
- package/components/DataList/data-list-grid.scss +3 -3
- package/components/DataList/data-list.css +66 -56
- package/components/DataList/data-list.scss +45 -35
- package/components/DatePicker/date-picker.css +8 -8
- package/components/DatePicker/date-picker.scss +8 -8
- package/components/DescriptionList/description-list.css +8 -5
- package/components/DescriptionList/description-list.scss +8 -5
- package/components/DragDrop/drag-drop.css +8 -8
- package/components/DragDrop/drag-drop.scss +8 -8
- package/components/Drawer/drawer.css +75 -60
- package/components/Drawer/drawer.scss +51 -36
- package/components/Dropdown/dropdown.css +73 -64
- package/components/Dropdown/dropdown.scss +63 -54
- package/components/DualListSelector/dual-list-selector.css +20 -14
- package/components/DualListSelector/dual-list-selector.scss +20 -14
- package/components/EmptyState/empty-state.css +7 -4
- package/components/EmptyState/empty-state.scss +7 -4
- package/components/ExpandableSection/expandable-section.css +13 -10
- package/components/ExpandableSection/expandable-section.scss +13 -10
- package/components/FileUpload/file-upload.css +9 -15
- package/components/FileUpload/file-upload.scss +9 -15
- package/components/Form/form.css +50 -50
- package/components/Form/form.scss +44 -44
- package/components/FormControl/form-control.css +18 -9
- package/components/FormControl/form-control.scss +18 -9
- package/components/HelperText/helper-text.css +1 -1
- package/components/HelperText/helper-text.scss +1 -1
- package/components/Hint/hint.css +9 -6
- package/components/Hint/hint.scss +9 -6
- package/components/Icon/icon.css +1 -1
- package/components/Icon/icon.scss +1 -1
- package/components/InlineEdit/inline-edit.css +4 -4
- package/components/InlineEdit/inline-edit.scss +4 -4
- package/components/InputGroup/input-group.css +12 -6
- package/components/InputGroup/input-group.scss +11 -5
- package/components/InputGroup/themes/dark/input-group.scss +1 -1
- package/components/JumpLinks/jump-links.css +24 -24
- package/components/JumpLinks/jump-links.scss +24 -24
- package/components/Label/label-group.css +12 -9
- package/components/Label/label-group.scss +12 -9
- package/components/Label/label.css +9 -9
- package/components/Label/label.scss +9 -9
- package/components/List/list.css +9 -9
- package/components/List/list.scss +9 -9
- package/components/LogViewer/log-viewer.css +14 -14
- package/components/LogViewer/log-viewer.scss +14 -14
- package/components/Login/login.css +36 -27
- package/components/Login/login.scss +36 -27
- package/components/Masthead/masthead.css +19 -22
- package/components/Masthead/masthead.scss +19 -22
- package/components/Menu/menu.css +68 -65
- package/components/Menu/menu.scss +68 -66
- package/components/MenuToggle/menu-toggle.css +41 -29
- package/components/MenuToggle/menu-toggle.scss +41 -29
- package/components/ModalBox/modal-box.css +19 -19
- package/components/ModalBox/modal-box.scss +20 -20
- package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
- package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
- package/components/Nav/nav.css +100 -93
- package/components/Nav/nav.scss +98 -91
- package/components/Nav/themes/dark/nav.scss +2 -2
- package/components/NotificationBadge/notification-badge.css +13 -7
- package/components/NotificationBadge/notification-badge.scss +13 -7
- package/components/NotificationDrawer/notification-drawer.css +28 -19
- package/components/NotificationDrawer/notification-drawer.scss +28 -19
- package/components/NumberInput/number-input.css +2 -2
- package/components/NumberInput/number-input.scss +2 -2
- package/components/OptionsMenu/options-menu.css +43 -31
- package/components/OptionsMenu/options-menu.scss +43 -31
- package/components/OverflowMenu/overflow-menu.css +2 -2
- package/components/OverflowMenu/overflow-menu.scss +2 -2
- package/components/Page/page.css +119 -65
- package/components/Page/page.scss +63 -39
- package/components/Page/themes/dark/page.scss +1 -1
- package/components/Pagination/pagination.css +23 -17
- package/components/Pagination/pagination.scss +23 -17
- package/components/Panel/panel.css +13 -7
- package/components/Panel/panel.scss +13 -7
- package/components/Popover/popover.css +24 -21
- package/components/Popover/popover.scss +24 -21
- package/components/Progress/progress.css +7 -7
- package/components/Progress/progress.scss +7 -7
- package/components/ProgressStepper/progress-stepper.css +25 -19
- package/components/ProgressStepper/progress-stepper.scss +24 -18
- package/components/Radio/radio.css +3 -3
- package/components/Radio/radio.scss +3 -3
- package/components/Select/select.css +56 -47
- package/components/Select/select.scss +56 -47
- package/components/Sidebar/sidebar.css +9 -3
- package/components/Sidebar/sidebar.scss +9 -3
- package/components/SimpleList/simple-list.css +10 -4
- package/components/SimpleList/simple-list.scss +10 -4
- package/components/Skeleton/skeleton.css +2 -5
- package/components/Skeleton/skeleton.scss +2 -5
- package/components/SkipToContent/skip-to-content.css +3 -3
- package/components/SkipToContent/skip-to-content.scss +3 -3
- package/components/Slider/slider.css +17 -20
- package/components/Slider/slider.scss +17 -20
- package/components/Switch/switch.css +5 -5
- package/components/Switch/switch.scss +5 -5
- package/components/TabContent/tab-content.css +4 -1
- package/components/TabContent/tab-content.scss +4 -1
- package/components/Table/table-grid.css +256 -195
- package/components/Table/table-grid.scss +53 -39
- package/components/Table/table-scrollable.css +2 -2
- package/components/Table/table-scrollable.scss +2 -2
- package/components/Table/table-tree-view.css +107 -104
- package/components/Table/table-tree-view.scss +32 -32
- package/components/Table/table.css +87 -69
- package/components/Table/table.scss +87 -69
- package/components/Tabs/tabs.css +66 -48
- package/components/Tabs/tabs.scss +66 -48
- package/components/TextInputGroup/text-input-group.css +15 -15
- package/components/TextInputGroup/text-input-group.scss +15 -15
- package/components/Tile/tile.css +10 -10
- package/components/Tile/tile.scss +10 -10
- package/components/ToggleGroup/toggle-group.css +14 -11
- package/components/ToggleGroup/toggle-group.scss +14 -11
- package/components/Toolbar/toolbar.css +44 -41
- package/components/Toolbar/toolbar.scss +24 -21
- package/components/Tooltip/tooltip.css +19 -16
- package/components/Tooltip/tooltip.scss +19 -16
- package/components/TreeView/tree-view.css +42 -27
- package/components/TreeView/tree-view.scss +42 -27
- package/components/Wizard/wizard.css +47 -35
- package/components/Wizard/wizard.scss +47 -35
- package/docs/components/Button/examples/Button.css +2 -2
- package/docs/components/DragDrop/examples/DragDrop.css +2 -2
- package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
- package/docs/components/LogViewer/examples/LogViewer.css +2 -2
- package/docs/components/ModalBox/examples/ModalBox.css +2 -2
- package/docs/components/Nav/examples/Navigation.css +2 -2
- package/docs/components/Popover/examples/Popover.css +2 -2
- package/docs/components/Table/examples/Table.css +2 -2
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
- package/docs/components/Tile/examples/Tile.css +1 -1
- package/docs/demos/Card/examples/Card.css +3 -3
- package/docs/demos/Card/examples/Card.md +3 -3
- package/docs/demos/Dashboard/examples/Dashboard.md +3 -3
- package/docs/layouts/Flex/examples/Flex.md +5 -5
- package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
- package/icons/pficons.mjs +1 -0
- package/layouts/Flex/flex.css +115 -43
- package/layouts/Flex/flex.scss +20 -8
- package/package.json +4 -1
- package/patternfly-addons.css +732 -972
- package/patternfly-base-no-globals-theme-dark-unversioned.css +7 -3
- package/patternfly-base-no-globals.css +7 -3
- package/patternfly-base-theme-dark-unversioned.css +8 -4
- package/patternfly-base.css +8 -4
- package/patternfly-no-globals.css +2323 -1799
- package/patternfly-theme-dark-unversioned.css +2324 -1800
- package/patternfly.css +2324 -1800
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +2 -2
- package/sass-utilities/scss-variables.scss +8 -8
- package/utilities/Accessibility/accessibility.css +12 -12
- package/utilities/Spacing/spacing.css +720 -960
- package/utilities/Spacing/spacing.scss +4 -8
|
@@ -172,8 +172,8 @@
|
|
|
172
172
|
width: 100%;
|
|
173
173
|
}
|
|
174
174
|
.pf-v5-c-select .pf-v5-c-divider {
|
|
175
|
-
margin-
|
|
176
|
-
margin-
|
|
175
|
+
margin-block-start: var(--pf-v5-c-select-menu--c-divider--MarginTop);
|
|
176
|
+
margin-block-end: var(--pf-v5-c-select-menu--c-divider--MarginBottom);
|
|
177
177
|
}
|
|
178
178
|
.pf-v5-c-select .pf-v5-c-divider:last-child {
|
|
179
179
|
--pf-v5-c-select-menu--c-divider--MarginBottom: 0;
|
|
@@ -217,7 +217,10 @@
|
|
|
217
217
|
justify-content: space-between;
|
|
218
218
|
width: 100%;
|
|
219
219
|
min-width: var(--pf-v5-c-select__toggle--MinWidth);
|
|
220
|
-
padding: var(--pf-v5-c-select__toggle--PaddingTop)
|
|
220
|
+
padding-block-start: var(--pf-v5-c-select__toggle--PaddingTop);
|
|
221
|
+
padding-block-end: var(--pf-v5-c-select__toggle--PaddingBottom);
|
|
222
|
+
padding-inline-start: var(--pf-v5-c-select__toggle--PaddingLeft);
|
|
223
|
+
padding-inline-end: var(--pf-v5-c-select__toggle--PaddingRight);
|
|
221
224
|
font-size: var(--pf-v5-c-select__toggle--FontSize);
|
|
222
225
|
font-weight: var(--pf-v5-c-select__toggle--FontWeight);
|
|
223
226
|
line-height: var(--pf-v5-c-select__toggle--LineHeight);
|
|
@@ -237,14 +240,14 @@
|
|
|
237
240
|
.pf-v5-c-select__toggle::before {
|
|
238
241
|
--pf-v5-c-select__toggle--before--BorderWidth-base: var(--pf-v5-c-select__toggle--before--BorderTopWidth) var(--pf-v5-c-select__toggle--before--BorderRightWidth) var(--pf-v5-c-select__toggle--before--BorderBottomWidth) var(--pf-v5-c-select__toggle--before--BorderLeftWidth);
|
|
239
242
|
position: absolute;
|
|
240
|
-
|
|
241
|
-
right: 0;
|
|
242
|
-
bottom: 0;
|
|
243
|
-
left: 0;
|
|
243
|
+
inset: 0;
|
|
244
244
|
content: "";
|
|
245
|
-
border-color: var(--pf-v5-c-select__toggle--before--BorderTopColor) var(--pf-v5-c-select__toggle--before--BorderRightColor) var(--pf-v5-c-select__toggle--before--BorderBottomColor) var(--pf-v5-c-select__toggle--before--BorderLeftColor);
|
|
246
245
|
border-style: solid;
|
|
247
246
|
border-width: var(--pf-v5-c-select__toggle--before--BorderWidth, var(--pf-v5-c-select__toggle--before--BorderWidth-base));
|
|
247
|
+
border-block-start-color: var(--pf-v5-c-select__toggle--before--BorderTopColor);
|
|
248
|
+
border-block-end-color: var(--pf-v5-c-select__toggle--before--BorderBottomColor);
|
|
249
|
+
border-inline-start-color: var(--pf-v5-c-select__toggle--before--BorderLeftColor);
|
|
250
|
+
border-inline-end-color: var(--pf-v5-c-select__toggle--before--BorderRightColor);
|
|
248
251
|
}
|
|
249
252
|
.pf-v5-c-select__toggle:hover {
|
|
250
253
|
--pf-v5-c-select__toggle--before--BorderBottomColor: var(--pf-v5-c-select__toggle--hover--before--BorderBottomColor);
|
|
@@ -283,15 +286,15 @@
|
|
|
283
286
|
position: relative;
|
|
284
287
|
}
|
|
285
288
|
.pf-v5-c-select__toggle .pf-v5-c-select__toggle-clear {
|
|
286
|
-
padding-
|
|
287
|
-
padding-
|
|
288
|
-
margin-
|
|
289
|
+
padding-inline-start: var(--pf-v5-c-select__toggle-clear--PaddingLeft);
|
|
290
|
+
padding-inline-end: var(--pf-v5-c-select__toggle-clear--PaddingRight);
|
|
291
|
+
margin-inline-start: auto;
|
|
289
292
|
}
|
|
290
293
|
.pf-v5-c-select__toggle .pf-v5-c-select__toggle-button {
|
|
291
294
|
color: var(--pf-v5-c-select__toggle-button--Color);
|
|
292
295
|
}
|
|
293
296
|
.pf-v5-c-select__toggle .pf-v5-c-select__toggle-clear + .pf-v5-c-select__toggle-button {
|
|
294
|
-
padding-
|
|
297
|
+
padding-inline-start: var(--pf-v5-c-select__toggle-clear--toggle-button--PaddingLeft);
|
|
295
298
|
}
|
|
296
299
|
.pf-v5-c-select__toggle.pf-m-placeholder {
|
|
297
300
|
--pf-v5-c-select__toggle-text--Color: var(--pf-v5-c-select__toggle--m-placeholder__toggle-text--Color);
|
|
@@ -301,8 +304,8 @@
|
|
|
301
304
|
color: var(--pf-v5-c-select__toggle-arrow--Color, inherit);
|
|
302
305
|
}
|
|
303
306
|
* + .pf-v5-c-select__toggle-arrow {
|
|
304
|
-
margin-
|
|
305
|
-
margin-
|
|
307
|
+
margin-inline-start: var(--pf-v5-c-select__toggle-arrow--MarginLeft);
|
|
308
|
+
margin-inline-end: var(--pf-v5-c-select__toggle-arrow--MarginRight);
|
|
306
309
|
}
|
|
307
310
|
.pf-v5-c-select.pf-m-top.pf-m-expanded .pf-v5-c-select__toggle-arrow {
|
|
308
311
|
transform: rotate(var(--pf-v5-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate));
|
|
@@ -326,28 +329,28 @@
|
|
|
326
329
|
white-space: normal;
|
|
327
330
|
}
|
|
328
331
|
.pf-v5-c-select__toggle-wrapper > :not(:last-child) {
|
|
329
|
-
margin-
|
|
332
|
+
margin-inline-end: var(--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight);
|
|
330
333
|
}
|
|
331
334
|
.pf-v5-c-select__toggle-wrapper .pf-v5-c-chip-group {
|
|
332
|
-
margin-
|
|
333
|
-
margin-
|
|
335
|
+
margin-block-start: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop);
|
|
336
|
+
margin-block-end: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom);
|
|
334
337
|
}
|
|
335
338
|
.pf-v5-c-select__toggle-wrapper > .pf-v5-c-select__toggle-typeahead:first-child {
|
|
336
|
-
margin-
|
|
339
|
+
margin-inline-start: calc(-1 * var(--pf-v5-c-select__toggle--PaddingLeft));
|
|
337
340
|
}
|
|
338
341
|
|
|
339
342
|
.pf-v5-c-select__toggle-icon + .pf-v5-c-select__toggle-text {
|
|
340
|
-
margin-
|
|
343
|
+
margin-inline-start: var(--pf-v5-c-select__toggle-icon--toggle-text--MarginLeft);
|
|
341
344
|
}
|
|
342
345
|
|
|
343
346
|
.pf-v5-c-select__toggle-status-icon {
|
|
344
|
-
margin-
|
|
347
|
+
margin-inline-start: var(--pf-v5-c-select__toggle-status-icon--MarginLeft);
|
|
345
348
|
color: var(--pf-v5-c-select__toggle-status-icon--Color);
|
|
346
349
|
}
|
|
347
350
|
|
|
348
351
|
.pf-v5-c-select__toggle-badge {
|
|
349
352
|
display: flex;
|
|
350
|
-
padding-
|
|
353
|
+
padding-inline-start: var(--pf-v5-c-select__toggle-badge--PaddingLeft);
|
|
351
354
|
}
|
|
352
355
|
|
|
353
356
|
.pf-v5-c-select__toggle-typeahead {
|
|
@@ -365,30 +368,27 @@
|
|
|
365
368
|
|
|
366
369
|
.pf-v5-c-select__menu {
|
|
367
370
|
position: absolute;
|
|
368
|
-
|
|
371
|
+
inset-block-start: var(--pf-v5-c-select__menu--Top);
|
|
369
372
|
z-index: var(--pf-v5-c-select__menu--ZIndex);
|
|
370
373
|
width: var(--pf-v5-c-select__menu--Width);
|
|
371
374
|
min-width: var(--pf-v5-c-select__menu--MinWidth);
|
|
372
|
-
padding-
|
|
373
|
-
padding-
|
|
375
|
+
padding-block-start: var(--pf-v5-c-select__menu--PaddingTop);
|
|
376
|
+
padding-block-end: var(--pf-v5-c-select__menu--PaddingBottom);
|
|
374
377
|
background-color: var(--pf-v5-c-select__menu--BackgroundColor);
|
|
375
378
|
background-clip: padding-box;
|
|
376
379
|
box-shadow: var(--pf-v5-c-select__menu--BoxShadow);
|
|
377
380
|
}
|
|
378
381
|
.pf-v5-c-select__menu.pf-m-align-right {
|
|
379
|
-
|
|
382
|
+
inset-inline-end: 0;
|
|
380
383
|
}
|
|
381
384
|
.pf-v5-c-select.pf-m-top .pf-v5-c-select__menu {
|
|
382
|
-
|
|
385
|
+
inset-block-start: 0;
|
|
383
386
|
transform: translateY(var(--pf-v5-c-select__menu--m-top--TranslateY));
|
|
384
387
|
}
|
|
385
388
|
.pf-v5-c-select__menu.pf-m-static {
|
|
386
389
|
--pf-v5-c-select__menu--m-top--TranslateY: 0;
|
|
387
390
|
position: static;
|
|
388
|
-
|
|
389
|
-
right: auto;
|
|
390
|
-
bottom: auto;
|
|
391
|
-
left: auto;
|
|
391
|
+
inset: auto;
|
|
392
392
|
z-index: auto;
|
|
393
393
|
min-width: min-content;
|
|
394
394
|
}
|
|
@@ -409,12 +409,15 @@
|
|
|
409
409
|
.pf-v5-c-select__menu-item {
|
|
410
410
|
position: relative;
|
|
411
411
|
width: var(--pf-v5-c-select__menu-item--Width);
|
|
412
|
-
padding: var(--pf-v5-c-select__menu-item--PaddingTop)
|
|
412
|
+
padding-block-start: var(--pf-v5-c-select__menu-item--PaddingTop);
|
|
413
|
+
padding-block-end: var(--pf-v5-c-select__menu-item--PaddingBottom);
|
|
414
|
+
padding-inline-start: var(--pf-v5-c-select__menu-item--PaddingLeft);
|
|
415
|
+
padding-inline-end: var(--pf-v5-c-select__menu-item--PaddingRight);
|
|
413
416
|
font-size: var(--pf-v5-c-select__menu-item--FontSize);
|
|
414
417
|
font-weight: var(--pf-v5-c-select__menu-item--FontWeight);
|
|
415
418
|
line-height: var(--pf-v5-c-select__menu-item--LineHeight);
|
|
416
419
|
color: var(--pf-v5-c-select__menu-item--Color);
|
|
417
|
-
text-align:
|
|
420
|
+
text-align: start;
|
|
418
421
|
white-space: nowrap;
|
|
419
422
|
background-color: transparent;
|
|
420
423
|
border: none;
|
|
@@ -495,14 +498,14 @@
|
|
|
495
498
|
}
|
|
496
499
|
|
|
497
500
|
.pf-v5-c-select__list-item.pf-m-loading {
|
|
498
|
-
padding-
|
|
501
|
+
padding-block-start: var(--pf-v5-c-select__list-item--m-loading--PaddingTop);
|
|
499
502
|
text-align: center;
|
|
500
503
|
}
|
|
501
504
|
|
|
502
505
|
.pf-v5-c-select__menu-item-main {
|
|
503
506
|
position: relative;
|
|
504
507
|
display: block;
|
|
505
|
-
padding-
|
|
508
|
+
padding-inline-end: var(--pf-v5-c-select__menu-item-main--PaddingRight);
|
|
506
509
|
white-space: nowrap;
|
|
507
510
|
}
|
|
508
511
|
|
|
@@ -516,22 +519,22 @@
|
|
|
516
519
|
|
|
517
520
|
.pf-v5-c-select__menu-item-count {
|
|
518
521
|
align-self: center;
|
|
519
|
-
margin-
|
|
522
|
+
margin-inline-start: var(--pf-v5-c-select__menu-item-count--MarginLeft);
|
|
520
523
|
font-size: var(--pf-v5-c-select__menu-item-count--FontSize);
|
|
521
524
|
color: var(--pf-v5-c-select__menu-item-count--Color);
|
|
522
525
|
}
|
|
523
526
|
|
|
524
527
|
.pf-v5-c-select__menu-item-description {
|
|
525
528
|
display: block;
|
|
526
|
-
padding-
|
|
529
|
+
padding-inline-end: var(--pf-v5-c-select__menu-item-description--PaddingRight);
|
|
527
530
|
font-size: var(--pf-v5-c-select__menu-item-description--FontSize);
|
|
528
531
|
color: var(--pf-v5-c-select__menu-item-description--Color);
|
|
529
532
|
}
|
|
530
533
|
|
|
531
534
|
.pf-v5-c-select__menu-item-icon {
|
|
532
535
|
position: absolute;
|
|
533
|
-
|
|
534
|
-
|
|
536
|
+
inset-block-start: var(--pf-v5-c-select__menu-item-icon--Top);
|
|
537
|
+
inset-inline-end: var(--pf-v5-c-select__menu-item-icon--Right);
|
|
535
538
|
font-size: var(--pf-v5-c-select__menu-item-icon--FontSize);
|
|
536
539
|
color: var(--pf-v5-c-select__menu-item-icon--Color);
|
|
537
540
|
transform: translateY(var(--pf-v5-c-select__menu-item-icon--TranslateY));
|
|
@@ -549,27 +552,33 @@
|
|
|
549
552
|
}
|
|
550
553
|
|
|
551
554
|
.pf-v5-c-select__menu-group + .pf-v5-c-select__menu-group {
|
|
552
|
-
padding-
|
|
555
|
+
padding-block-start: var(--pf-v5-c-select__menu-group--menu-group--PaddingTop);
|
|
553
556
|
}
|
|
554
557
|
|
|
555
558
|
.pf-v5-c-select__menu-search {
|
|
556
|
-
padding: var(--pf-v5-c-select__menu-search--PaddingTop)
|
|
559
|
+
padding-block-start: var(--pf-v5-c-select__menu-search--PaddingTop);
|
|
560
|
+
padding-block-end: var(--pf-v5-c-select__menu-search--PaddingBottom);
|
|
561
|
+
padding-inline-start: var(--pf-v5-c-select__menu-search--PaddingLeft);
|
|
562
|
+
padding-inline-end: var(--pf-v5-c-select__menu-search--PaddingRight);
|
|
557
563
|
}
|
|
558
564
|
|
|
559
565
|
.pf-v5-c-select__menu-group-title {
|
|
560
|
-
padding-
|
|
561
|
-
padding-
|
|
562
|
-
padding-
|
|
563
|
-
padding-
|
|
566
|
+
padding-block-start: var(--pf-v5-c-select__menu-group-title--PaddingTop);
|
|
567
|
+
padding-block-end: var(--pf-v5-c-select__menu-group-title--PaddingBottom);
|
|
568
|
+
padding-inline-start: var(--pf-v5-c-select__menu-group-title--PaddingLeft);
|
|
569
|
+
padding-inline-end: var(--pf-v5-c-select__menu-group-title--PaddingRight);
|
|
564
570
|
font-size: var(--pf-v5-c-select__menu-group-title--FontSize);
|
|
565
571
|
font-weight: var(--pf-v5-c-select__menu-group-title--FontWeight);
|
|
566
572
|
color: var(--pf-v5-c-select__menu-group-title--Color);
|
|
567
573
|
}
|
|
568
574
|
|
|
569
575
|
.pf-v5-c-select__menu-footer {
|
|
570
|
-
padding: var(--pf-v5-c-select__menu-footer--PaddingTop)
|
|
571
|
-
|
|
572
|
-
|
|
576
|
+
padding-block-start: var(--pf-v5-c-select__menu-footer--PaddingTop);
|
|
577
|
+
padding-block-end: var(--pf-v5-c-select__menu-footer--PaddingBottom);
|
|
578
|
+
padding-inline-start: var(--pf-v5-c-select__menu-footer--PaddingLeft);
|
|
579
|
+
padding-inline-end: var(--pf-v5-c-select__menu-footer--PaddingRight);
|
|
580
|
+
margin-block-start: var(--pf-v5-c-select__menu-footer--MarginTop);
|
|
581
|
+
margin-block-end: var(--pf-v5-c-select__menu-footer--MarginBottom);
|
|
573
582
|
box-shadow: var(--pf-v5-c-select__menu-footer--BoxShadow);
|
|
574
583
|
}
|
|
575
584
|
|
|
@@ -218,8 +218,8 @@
|
|
|
218
218
|
width: 100%;
|
|
219
219
|
|
|
220
220
|
.#{$divider} {
|
|
221
|
-
margin-
|
|
222
|
-
margin-
|
|
221
|
+
margin-block-start: var(--#{$select}-menu--c-divider--MarginTop);
|
|
222
|
+
margin-block-end: var(--#{$select}-menu--c-divider--MarginBottom);
|
|
223
223
|
|
|
224
224
|
// Support divider as last item in group to separate groups
|
|
225
225
|
&:last-child {
|
|
@@ -269,7 +269,10 @@
|
|
|
269
269
|
justify-content: space-between;
|
|
270
270
|
width: 100%;
|
|
271
271
|
min-width: var(--#{$select}__toggle--MinWidth);
|
|
272
|
-
padding: var(--#{$select}__toggle--PaddingTop)
|
|
272
|
+
padding-block-start: var(--#{$select}__toggle--PaddingTop);
|
|
273
|
+
padding-block-end: var(--#{$select}__toggle--PaddingBottom);
|
|
274
|
+
padding-inline-start: var(--#{$select}__toggle--PaddingLeft);
|
|
275
|
+
padding-inline-end: var(--#{$select}__toggle--PaddingRight);
|
|
273
276
|
font-size: var(--#{$select}__toggle--FontSize);
|
|
274
277
|
font-weight: var(--#{$select}__toggle--FontWeight);
|
|
275
278
|
line-height: var(--#{$select}__toggle--LineHeight);
|
|
@@ -294,14 +297,14 @@
|
|
|
294
297
|
--#{$select}__toggle--before--BorderWidth-base: var(--#{$select}__toggle--before--BorderTopWidth) var(--#{$select}__toggle--before--BorderRightWidth) var(--#{$select}__toggle--before--BorderBottomWidth) var(--#{$select}__toggle--before--BorderLeftWidth); // remove at breaking change
|
|
295
298
|
|
|
296
299
|
position: absolute;
|
|
297
|
-
|
|
298
|
-
right: 0;
|
|
299
|
-
bottom: 0;
|
|
300
|
-
left: 0;
|
|
300
|
+
inset: 0;
|
|
301
301
|
content: "";
|
|
302
|
-
border-color: var(--#{$select}__toggle--before--BorderTopColor) var(--#{$select}__toggle--before--BorderRightColor) var(--#{$select}__toggle--before--BorderBottomColor) var(--#{$select}__toggle--before--BorderLeftColor);
|
|
303
302
|
border-style: solid;
|
|
304
303
|
border-width: var(--#{$select}__toggle--before--BorderWidth, var(--#{$select}__toggle--before--BorderWidth-base));
|
|
304
|
+
border-block-start-color: var(--#{$select}__toggle--before--BorderTopColor);
|
|
305
|
+
border-block-end-color: var(--#{$select}__toggle--before--BorderBottomColor);
|
|
306
|
+
border-inline-start-color: var(--#{$select}__toggle--before--BorderLeftColor);
|
|
307
|
+
border-inline-end-color: var(--#{$select}__toggle--before--BorderRightColor);
|
|
305
308
|
}
|
|
306
309
|
|
|
307
310
|
&:hover {
|
|
@@ -356,9 +359,9 @@
|
|
|
356
359
|
}
|
|
357
360
|
|
|
358
361
|
.#{$select}__toggle-clear {
|
|
359
|
-
padding-
|
|
360
|
-
padding-
|
|
361
|
-
margin-
|
|
362
|
+
padding-inline-start: var(--#{$select}__toggle-clear--PaddingLeft);
|
|
363
|
+
padding-inline-end: var(--#{$select}__toggle-clear--PaddingRight);
|
|
364
|
+
margin-inline-start: auto;
|
|
362
365
|
}
|
|
363
366
|
|
|
364
367
|
.#{$select}__toggle-button {
|
|
@@ -366,7 +369,7 @@
|
|
|
366
369
|
}
|
|
367
370
|
|
|
368
371
|
.#{$select}__toggle-clear + .#{$select}__toggle-button {
|
|
369
|
-
padding-
|
|
372
|
+
padding-inline-start: var(--#{$select}__toggle-clear--toggle-button--PaddingLeft);
|
|
370
373
|
}
|
|
371
374
|
|
|
372
375
|
&.pf-m-placeholder {
|
|
@@ -378,8 +381,8 @@
|
|
|
378
381
|
color: var(--#{$select}__toggle-arrow--Color, inherit);
|
|
379
382
|
|
|
380
383
|
* + & {
|
|
381
|
-
margin-
|
|
382
|
-
margin-
|
|
384
|
+
margin-inline-start: var(--#{$select}__toggle-arrow--MarginLeft);
|
|
385
|
+
margin-inline-end: var(--#{$select}__toggle-arrow--MarginRight);
|
|
383
386
|
}
|
|
384
387
|
// stylelint-disable-next-line
|
|
385
388
|
.#{$select}.pf-m-top.pf-m-expanded & {
|
|
@@ -408,33 +411,33 @@
|
|
|
408
411
|
|
|
409
412
|
// Add space between children
|
|
410
413
|
> :not(:last-child) {
|
|
411
|
-
margin-
|
|
414
|
+
margin-inline-end: var(--#{$select}__toggle-wrapper--not-last-child--MarginRight);
|
|
412
415
|
}
|
|
413
416
|
|
|
414
417
|
// a chip group needs a bottom margin to make some space between the chip group and typeahead input box if it wraps
|
|
415
418
|
.#{$chip}-group {
|
|
416
|
-
margin-
|
|
417
|
-
margin-
|
|
419
|
+
margin-block-start: var(--#{$select}__toggle-wrapper--c-chip-group--MarginTop);
|
|
420
|
+
margin-block-end: var(--#{$select}__toggle-wrapper--c-chip-group--MarginBottom);
|
|
418
421
|
}
|
|
419
422
|
|
|
420
423
|
// When the input is the first thing then use a negative left padding so it matches the toggle container
|
|
421
424
|
> .#{$select}__toggle-typeahead:first-child {
|
|
422
|
-
margin-
|
|
425
|
+
margin-inline-start: calc(-1 * var(--#{$select}__toggle--PaddingLeft));
|
|
423
426
|
}
|
|
424
427
|
}
|
|
425
428
|
|
|
426
429
|
.#{$select}__toggle-icon + .#{$select}__toggle-text {
|
|
427
|
-
margin-
|
|
430
|
+
margin-inline-start: var(--#{$select}__toggle-icon--toggle-text--MarginLeft);
|
|
428
431
|
}
|
|
429
432
|
|
|
430
433
|
.#{$select}__toggle-status-icon {
|
|
431
|
-
margin-
|
|
434
|
+
margin-inline-start: var(--#{$select}__toggle-status-icon--MarginLeft);
|
|
432
435
|
color: var(--#{$select}__toggle-status-icon--Color);
|
|
433
436
|
}
|
|
434
437
|
|
|
435
438
|
.#{$select}__toggle-badge {
|
|
436
439
|
display: flex;
|
|
437
|
-
padding-
|
|
440
|
+
padding-inline-start: var(--#{$select}__toggle-badge--PaddingLeft);
|
|
438
441
|
}
|
|
439
442
|
|
|
440
443
|
.#{$select}__toggle-typeahead {
|
|
@@ -455,22 +458,22 @@
|
|
|
455
458
|
|
|
456
459
|
.#{$select}__menu {
|
|
457
460
|
position: absolute;
|
|
458
|
-
|
|
461
|
+
inset-block-start: var(--#{$select}__menu--Top);
|
|
459
462
|
z-index: var(--#{$select}__menu--ZIndex);
|
|
460
463
|
width: var(--#{$select}__menu--Width);
|
|
461
464
|
min-width: var(--#{$select}__menu--MinWidth);
|
|
462
|
-
padding-
|
|
463
|
-
padding-
|
|
465
|
+
padding-block-start: var(--#{$select}__menu--PaddingTop);
|
|
466
|
+
padding-block-end: var(--#{$select}__menu--PaddingBottom);
|
|
464
467
|
background-color: var(--#{$select}__menu--BackgroundColor);
|
|
465
468
|
background-clip: padding-box;
|
|
466
469
|
box-shadow: var(--#{$select}__menu--BoxShadow);
|
|
467
470
|
|
|
468
471
|
&.pf-m-align-right {
|
|
469
|
-
|
|
472
|
+
inset-inline-end: 0;
|
|
470
473
|
}
|
|
471
474
|
|
|
472
475
|
.#{$select}.pf-m-top & {
|
|
473
|
-
|
|
476
|
+
inset-block-start: 0;
|
|
474
477
|
transform: translateY(var(--#{$select}__menu--m-top--TranslateY));
|
|
475
478
|
}
|
|
476
479
|
|
|
@@ -478,10 +481,7 @@
|
|
|
478
481
|
--#{$select}__menu--m-top--TranslateY: 0;
|
|
479
482
|
|
|
480
483
|
position: static;
|
|
481
|
-
|
|
482
|
-
right: auto;
|
|
483
|
-
bottom: auto;
|
|
484
|
-
left: auto;
|
|
484
|
+
inset: auto;
|
|
485
485
|
z-index: auto;
|
|
486
486
|
min-width: min-content;
|
|
487
487
|
}
|
|
@@ -504,12 +504,15 @@
|
|
|
504
504
|
.#{$select}__menu-item {
|
|
505
505
|
position: relative;
|
|
506
506
|
width: var(--#{$select}__menu-item--Width);
|
|
507
|
-
padding: var(--#{$select}__menu-item--PaddingTop)
|
|
507
|
+
padding-block-start: var(--#{$select}__menu-item--PaddingTop);
|
|
508
|
+
padding-block-end: var(--#{$select}__menu-item--PaddingBottom);
|
|
509
|
+
padding-inline-start: var(--#{$select}__menu-item--PaddingLeft);
|
|
510
|
+
padding-inline-end: var(--#{$select}__menu-item--PaddingRight);
|
|
508
511
|
font-size: var(--#{$select}__menu-item--FontSize);
|
|
509
512
|
font-weight: var(--#{$select}__menu-item--FontWeight);
|
|
510
513
|
line-height: var(--#{$select}__menu-item--LineHeight);
|
|
511
514
|
color: var(--#{$select}__menu-item--Color);
|
|
512
|
-
text-align:
|
|
515
|
+
text-align: start;
|
|
513
516
|
white-space: nowrap;
|
|
514
517
|
background-color: transparent;
|
|
515
518
|
border: none;
|
|
@@ -617,7 +620,7 @@
|
|
|
617
620
|
|
|
618
621
|
.#{$select}__list-item {
|
|
619
622
|
&.pf-m-loading {
|
|
620
|
-
padding-
|
|
623
|
+
padding-block-start: var(--#{$select}__list-item--m-loading--PaddingTop);
|
|
621
624
|
text-align: center;
|
|
622
625
|
}
|
|
623
626
|
}
|
|
@@ -625,7 +628,7 @@
|
|
|
625
628
|
.#{$select}__menu-item-main {
|
|
626
629
|
position: relative;
|
|
627
630
|
display: block;
|
|
628
|
-
padding-
|
|
631
|
+
padding-inline-end: var(--#{$select}__menu-item-main--PaddingRight);
|
|
629
632
|
white-space: nowrap;
|
|
630
633
|
}
|
|
631
634
|
|
|
@@ -639,22 +642,22 @@
|
|
|
639
642
|
|
|
640
643
|
.#{$select}__menu-item-count {
|
|
641
644
|
align-self: center;
|
|
642
|
-
margin-
|
|
645
|
+
margin-inline-start: var(--#{$select}__menu-item-count--MarginLeft);
|
|
643
646
|
font-size: var(--#{$select}__menu-item-count--FontSize);
|
|
644
647
|
color: var(--#{$select}__menu-item-count--Color);
|
|
645
648
|
}
|
|
646
649
|
|
|
647
650
|
.#{$select}__menu-item-description {
|
|
648
651
|
display: block;
|
|
649
|
-
padding-
|
|
652
|
+
padding-inline-end: var(--#{$select}__menu-item-description--PaddingRight);
|
|
650
653
|
font-size: var(--#{$select}__menu-item-description--FontSize);
|
|
651
654
|
color: var(--#{$select}__menu-item-description--Color);
|
|
652
655
|
}
|
|
653
656
|
|
|
654
657
|
.#{$select}__menu-item-icon {
|
|
655
658
|
position: absolute;
|
|
656
|
-
|
|
657
|
-
|
|
659
|
+
inset-block-start: var(--#{$select}__menu-item-icon--Top);
|
|
660
|
+
inset-inline-end: var(--#{$select}__menu-item-icon--Right);
|
|
658
661
|
font-size: var(--#{$select}__menu-item-icon--FontSize);
|
|
659
662
|
color: var(--#{$select}__menu-item-icon--Color);
|
|
660
663
|
transform: translateY(var(--#{$select}__menu-item-icon--TranslateY));
|
|
@@ -672,27 +675,33 @@
|
|
|
672
675
|
}
|
|
673
676
|
|
|
674
677
|
.#{$select}__menu-group + .#{$select}__menu-group {
|
|
675
|
-
padding-
|
|
678
|
+
padding-block-start: var(--#{$select}__menu-group--menu-group--PaddingTop);
|
|
676
679
|
}
|
|
677
680
|
|
|
678
681
|
.#{$select}__menu-search {
|
|
679
|
-
padding: var(--#{$select}__menu-search--PaddingTop)
|
|
682
|
+
padding-block-start: var(--#{$select}__menu-search--PaddingTop);
|
|
683
|
+
padding-block-end: var(--#{$select}__menu-search--PaddingBottom);
|
|
684
|
+
padding-inline-start: var(--#{$select}__menu-search--PaddingLeft);
|
|
685
|
+
padding-inline-end: var(--#{$select}__menu-search--PaddingRight);
|
|
680
686
|
}
|
|
681
687
|
|
|
682
688
|
.#{$select}__menu-group-title {
|
|
683
|
-
padding-
|
|
684
|
-
padding-
|
|
685
|
-
padding-
|
|
686
|
-
padding-
|
|
689
|
+
padding-block-start: var(--#{$select}__menu-group-title--PaddingTop);
|
|
690
|
+
padding-block-end: var(--#{$select}__menu-group-title--PaddingBottom);
|
|
691
|
+
padding-inline-start: var(--#{$select}__menu-group-title--PaddingLeft);
|
|
692
|
+
padding-inline-end: var(--#{$select}__menu-group-title--PaddingRight);
|
|
687
693
|
font-size: var(--#{$select}__menu-group-title--FontSize);
|
|
688
694
|
font-weight: var(--#{$select}__menu-group-title--FontWeight);
|
|
689
695
|
color: var(--#{$select}__menu-group-title--Color);
|
|
690
696
|
}
|
|
691
697
|
|
|
692
698
|
.#{$select}__menu-footer {
|
|
693
|
-
padding: var(--#{$select}__menu-footer--PaddingTop)
|
|
694
|
-
|
|
695
|
-
|
|
699
|
+
padding-block-start: var(--#{$select}__menu-footer--PaddingTop);
|
|
700
|
+
padding-block-end: var(--#{$select}__menu-footer--PaddingBottom);
|
|
701
|
+
padding-inline-start: var(--#{$select}__menu-footer--PaddingLeft);
|
|
702
|
+
padding-inline-end: var(--#{$select}__menu-footer--PaddingRight);
|
|
703
|
+
margin-block-start: var(--#{$select}__menu-footer--MarginTop);
|
|
704
|
+
margin-block-end: var(--#{$select}__menu-footer--MarginBottom);
|
|
696
705
|
box-shadow: var(--#{$select}__menu-footer--BoxShadow);
|
|
697
706
|
}
|
|
698
707
|
|
|
@@ -131,12 +131,15 @@
|
|
|
131
131
|
|
|
132
132
|
.pf-v5-c-sidebar__panel {
|
|
133
133
|
position: var(--pf-v5-c-sidebar__panel--Position);
|
|
134
|
-
|
|
134
|
+
inset-block-start: var(--pf-v5-c-sidebar__panel--Top);
|
|
135
135
|
z-index: var(--pf-v5-c-sidebar__panel--ZIndex);
|
|
136
136
|
flex-basis: var(--pf-v5-c-sidebar__panel--FlexBasis);
|
|
137
137
|
flex-shrink: 0;
|
|
138
138
|
order: var(--pf-v5-c-sidebar__panel--Order);
|
|
139
|
-
padding: var(--pf-v5-c-sidebar__panel--PaddingTop)
|
|
139
|
+
padding-block-start: var(--pf-v5-c-sidebar__panel--PaddingTop);
|
|
140
|
+
padding-block-end: var(--pf-v5-c-sidebar__panel--PaddingBottom);
|
|
141
|
+
padding-inline-start: var(--pf-v5-c-sidebar__panel--PaddingLeft);
|
|
142
|
+
padding-inline-end: var(--pf-v5-c-sidebar__panel--PaddingRight);
|
|
140
143
|
background-color: var(--pf-v5-c-sidebar__panel--BackgroundColor);
|
|
141
144
|
box-shadow: var(--pf-v5-c-sidebar__panel--BoxShadow);
|
|
142
145
|
}
|
|
@@ -158,7 +161,10 @@
|
|
|
158
161
|
.pf-v5-c-sidebar__content {
|
|
159
162
|
flex-grow: 1;
|
|
160
163
|
order: var(--pf-v5-c-sidebar__content--Order);
|
|
161
|
-
padding: var(--pf-v5-c-sidebar__content--PaddingTop)
|
|
164
|
+
padding-block-start: var(--pf-v5-c-sidebar__content--PaddingTop);
|
|
165
|
+
padding-block-end: var(--pf-v5-c-sidebar__content--PaddingBottom);
|
|
166
|
+
padding-inline-start: var(--pf-v5-c-sidebar__content--PaddingLeft);
|
|
167
|
+
padding-inline-end: var(--pf-v5-c-sidebar__content--PaddingRight);
|
|
162
168
|
background-color: var(--pf-v5-c-sidebar__content--BackgroundColor);
|
|
163
169
|
}
|
|
164
170
|
.pf-v5-c-sidebar__content.pf-m-padding {
|
|
@@ -164,12 +164,15 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
|
|
|
164
164
|
|
|
165
165
|
.#{$sidebar}__panel {
|
|
166
166
|
position: var(--#{$sidebar}__panel--Position);
|
|
167
|
-
|
|
167
|
+
inset-block-start: var(--#{$sidebar}__panel--Top);
|
|
168
168
|
z-index: var(--#{$sidebar}__panel--ZIndex);
|
|
169
169
|
flex-basis: var(--#{$sidebar}__panel--FlexBasis);
|
|
170
170
|
flex-shrink: 0;
|
|
171
171
|
order: var(--#{$sidebar}__panel--Order);
|
|
172
|
-
padding: var(--#{$sidebar}__panel--PaddingTop)
|
|
172
|
+
padding-block-start: var(--#{$sidebar}__panel--PaddingTop);
|
|
173
|
+
padding-block-end: var(--#{$sidebar}__panel--PaddingBottom);
|
|
174
|
+
padding-inline-start: var(--#{$sidebar}__panel--PaddingLeft);
|
|
175
|
+
padding-inline-end: var(--#{$sidebar}__panel--PaddingRight);
|
|
173
176
|
background-color: var(--#{$sidebar}__panel--BackgroundColor);
|
|
174
177
|
box-shadow: var(--#{$sidebar}__panel--BoxShadow);
|
|
175
178
|
|
|
@@ -194,7 +197,10 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
|
|
|
194
197
|
.#{$sidebar}__content {
|
|
195
198
|
flex-grow: 1;
|
|
196
199
|
order: var(--#{$sidebar}__content--Order);
|
|
197
|
-
padding: var(--#{$sidebar}__content--PaddingTop)
|
|
200
|
+
padding-block-start: var(--#{$sidebar}__content--PaddingTop);
|
|
201
|
+
padding-block-end: var(--#{$sidebar}__content--PaddingBottom);
|
|
202
|
+
padding-inline-start: var(--#{$sidebar}__content--PaddingLeft);
|
|
203
|
+
padding-inline-end: var(--#{$sidebar}__content--PaddingRight);
|
|
198
204
|
background-color: var(--#{$sidebar}__content--BackgroundColor);
|
|
199
205
|
|
|
200
206
|
&.pf-m-padding {
|
|
@@ -31,11 +31,14 @@
|
|
|
31
31
|
.pf-v5-c-simple-list__item-link {
|
|
32
32
|
display: block;
|
|
33
33
|
width: 100%;
|
|
34
|
-
padding: var(--pf-v5-c-simple-list__item-link--PaddingTop)
|
|
34
|
+
padding-block-start: var(--pf-v5-c-simple-list__item-link--PaddingTop);
|
|
35
|
+
padding-block-end: var(--pf-v5-c-simple-list__item-link--PaddingBottom);
|
|
36
|
+
padding-inline-start: var(--pf-v5-c-simple-list__item-link--PaddingLeft);
|
|
37
|
+
padding-inline-end: var(--pf-v5-c-simple-list__item-link--PaddingRight);
|
|
35
38
|
font-size: var(--pf-v5-c-simple-list__item-link--FontSize);
|
|
36
39
|
font-weight: var(--pf-v5-c-simple-list__item-link--FontWeight);
|
|
37
40
|
color: var(--pf-v5-c-simple-list__item-link--Color);
|
|
38
|
-
text-align:
|
|
41
|
+
text-align: start;
|
|
39
42
|
background-color: var(--pf-v5-c-simple-list__item-link--BackgroundColor);
|
|
40
43
|
border: none;
|
|
41
44
|
}
|
|
@@ -61,14 +64,17 @@
|
|
|
61
64
|
}
|
|
62
65
|
|
|
63
66
|
.pf-v5-c-simple-list__title {
|
|
64
|
-
padding: var(--pf-v5-c-simple-list__title--PaddingTop)
|
|
67
|
+
padding-block-start: var(--pf-v5-c-simple-list__title--PaddingTop);
|
|
68
|
+
padding-block-end: var(--pf-v5-c-simple-list__title--PaddingBottom);
|
|
69
|
+
padding-inline-start: var(--pf-v5-c-simple-list__title--PaddingLeft);
|
|
70
|
+
padding-inline-end: var(--pf-v5-c-simple-list__title--PaddingRight);
|
|
65
71
|
font-size: var(--pf-v5-c-simple-list__title--FontSize);
|
|
66
72
|
font-weight: var(--pf-v5-c-simple-list__title--FontWeight);
|
|
67
73
|
color: var(--pf-v5-c-simple-list__title--Color);
|
|
68
74
|
}
|
|
69
75
|
|
|
70
76
|
.pf-v5-c-simple-list__section + .pf-v5-c-simple-list__section {
|
|
71
|
-
margin-
|
|
77
|
+
margin-block-start: var(--pf-v5-c-simple-list__section--section--MarginTop);
|
|
72
78
|
}
|
|
73
79
|
|
|
74
80
|
:where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
|
|
@@ -38,11 +38,14 @@
|
|
|
38
38
|
.#{$simple-list}__item-link {
|
|
39
39
|
display: block;
|
|
40
40
|
width: 100%;
|
|
41
|
-
padding: var(--#{$simple-list}__item-link--PaddingTop)
|
|
41
|
+
padding-block-start: var(--#{$simple-list}__item-link--PaddingTop);
|
|
42
|
+
padding-block-end: var(--#{$simple-list}__item-link--PaddingBottom);
|
|
43
|
+
padding-inline-start: var(--#{$simple-list}__item-link--PaddingLeft);
|
|
44
|
+
padding-inline-end: var(--#{$simple-list}__item-link--PaddingRight);
|
|
42
45
|
font-size: var(--#{$simple-list}__item-link--FontSize);
|
|
43
46
|
font-weight: var(--#{$simple-list}__item-link--FontWeight);
|
|
44
47
|
color: var(--#{$simple-list}__item-link--Color);
|
|
45
|
-
text-align:
|
|
48
|
+
text-align: start;
|
|
46
49
|
background-color: var(--#{$simple-list}__item-link--BackgroundColor);
|
|
47
50
|
border: none;
|
|
48
51
|
|
|
@@ -73,14 +76,17 @@
|
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
.#{$simple-list}__title {
|
|
76
|
-
padding: var(--#{$simple-list}__title--PaddingTop)
|
|
79
|
+
padding-block-start: var(--#{$simple-list}__title--PaddingTop);
|
|
80
|
+
padding-block-end: var(--#{$simple-list}__title--PaddingBottom);
|
|
81
|
+
padding-inline-start: var(--#{$simple-list}__title--PaddingLeft);
|
|
82
|
+
padding-inline-end: var(--#{$simple-list}__title--PaddingRight);
|
|
77
83
|
font-size: var(--#{$simple-list}__title--FontSize);
|
|
78
84
|
font-weight: var(--#{$simple-list}__title--FontWeight);
|
|
79
85
|
color: var(--#{$simple-list}__title--Color);
|
|
80
86
|
}
|
|
81
87
|
|
|
82
88
|
.#{$simple-list}__section + .#{$simple-list}__section {
|
|
83
|
-
margin-
|
|
89
|
+
margin-block-start: var(--#{$simple-list}__section--section--MarginTop);
|
|
84
90
|
}
|
|
85
91
|
|
|
86
92
|
// stylelint-disable no-invalid-position-at-import-rule
|
|
@@ -54,15 +54,12 @@
|
|
|
54
54
|
.pf-v5-c-skeleton::before {
|
|
55
55
|
display: block;
|
|
56
56
|
height: var(--pf-v5-c-skeleton--before--Height);
|
|
57
|
-
padding-
|
|
57
|
+
padding-block-end: var(--pf-v5-c-skeleton--before--PaddingBottom);
|
|
58
58
|
content: var(--pf-v5-c-skeleton--before--Content);
|
|
59
59
|
}
|
|
60
60
|
.pf-v5-c-skeleton::after {
|
|
61
61
|
position: absolute;
|
|
62
|
-
|
|
63
|
-
right: 0;
|
|
64
|
-
bottom: 0;
|
|
65
|
-
left: 0;
|
|
62
|
+
inset: 0;
|
|
66
63
|
display: block;
|
|
67
64
|
content: "";
|
|
68
65
|
background: linear-gradient(var(--pf-v5-c-skeleton--after--LinearGradientAngle), var(--pf-v5-c-skeleton--after--LinearGradientColorStop1), var(--pf-v5-c-skeleton--after--LinearGradientColorStop2), var(--pf-v5-c-skeleton--after--LinearGradientColorStop3));
|