@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
package/components/Menu/menu.css
CHANGED
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
--pf-v5-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-v5-c-menu--m-nav--c-menu--m-left--right-offset));
|
|
212
212
|
--pf-v5-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-v5-c-menu--m-nav--c-menu--m-top--bottom-offset));
|
|
213
213
|
--pf-v5-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
|
|
214
|
-
|
|
214
|
+
inset-block-start: var(--pf-v5-c-menu--Top);
|
|
215
215
|
z-index: var(--pf-v5-c-menu--ZIndex);
|
|
216
216
|
width: var(--pf-v5-c-menu--Width);
|
|
217
217
|
min-width: var(--pf-v5-c-menu--MinWidth);
|
|
@@ -222,15 +222,15 @@
|
|
|
222
222
|
overflow: visible;
|
|
223
223
|
}
|
|
224
224
|
.pf-v5-c-menu .pf-v5-c-divider {
|
|
225
|
-
margin-
|
|
226
|
-
margin-
|
|
225
|
+
margin-block-start: var(--pf-v5-c-menu--c-divider--MarginTop);
|
|
226
|
+
margin-block-end: var(--pf-v5-c-menu--c-divider--MarginBottom);
|
|
227
227
|
}
|
|
228
228
|
.pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu {
|
|
229
229
|
position: absolute;
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
230
|
+
inset-block-start: var(--pf-v5-c-menu--m-flyout__menu--Top);
|
|
231
|
+
inset-block-end: var(--pf-v5-c-menu--m-flyout__menu--Bottom);
|
|
232
|
+
inset-inline-start: var(--pf-v5-c-menu--m-flyout__menu--Left);
|
|
233
|
+
inset-inline-end: var(--pf-v5-c-menu--m-flyout__menu--Right);
|
|
234
234
|
}
|
|
235
235
|
.pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__content, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__content {
|
|
236
236
|
overflow-y: visible;
|
|
@@ -262,8 +262,8 @@
|
|
|
262
262
|
.pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
|
|
263
263
|
--pf-v5-c-menu--BoxShadow: none;
|
|
264
264
|
position: absolute;
|
|
265
|
-
|
|
266
|
-
|
|
265
|
+
inset-block-start: var(--pf-v5-c-menu--m-drilldown--c-menu--Top);
|
|
266
|
+
inset-inline-start: 100%;
|
|
267
267
|
width: 100%;
|
|
268
268
|
transition: var(--pf-v5-c-menu--m-drilldown--c-menu--Transition);
|
|
269
269
|
}
|
|
@@ -341,34 +341,34 @@
|
|
|
341
341
|
}
|
|
342
342
|
.pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item::before, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item::before {
|
|
343
343
|
position: absolute;
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
344
|
+
inset-block-end: 0;
|
|
345
|
+
inset-inline-start: 0;
|
|
346
|
+
inset-inline-end: 0;
|
|
347
347
|
content: "";
|
|
348
|
-
border-
|
|
348
|
+
border-block-end: var(--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-v5-c-menu--m-nav__item--before--BorderBottomColor);
|
|
349
349
|
}
|
|
350
350
|
.pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item:hover::after, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item:hover::after {
|
|
351
351
|
position: absolute;
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
352
|
+
inset-block-start: var(--pf-v5-c-menu--m-nav__item--hover--after--Top);
|
|
353
|
+
inset-block-end: 0;
|
|
354
|
+
inset-inline-start: 0;
|
|
355
355
|
content: "";
|
|
356
|
-
border-
|
|
356
|
+
border-inline-start: var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftColor);
|
|
357
357
|
}
|
|
358
358
|
.pf-v5-c-menu.pf-m-nav .pf-v5-c-menu {
|
|
359
359
|
width: 100%;
|
|
360
360
|
}
|
|
361
361
|
.pf-v5-c-menu.pf-m-flyout.pf-m-nav, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu {
|
|
362
|
-
|
|
363
|
-
|
|
362
|
+
inset-block-start: var(--pf-v5-c-menu--m-nav--c-menu--Top);
|
|
363
|
+
inset-inline-start: var(--pf-v5-c-menu--m-nav--c-menu--Left);
|
|
364
364
|
}
|
|
365
365
|
.pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-top {
|
|
366
366
|
--pf-v5-c-menu--m-nav--c-menu--Top: auto;
|
|
367
|
-
|
|
367
|
+
inset-block-end: var(--pf-v5-c-menu--m-nav--c-menu--m-top--Bottom);
|
|
368
368
|
}
|
|
369
369
|
.pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-left {
|
|
370
370
|
--pf-v5-c-menu--m-nav--c-menu--Left: auto;
|
|
371
|
-
|
|
371
|
+
inset-inline-end: var(--pf-v5-c-menu--m-nav--c-menu--m-left--Right);
|
|
372
372
|
}
|
|
373
373
|
.pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu__list-item:first-child, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child {
|
|
374
374
|
--pf-v5-c-menu--m-nav__item--hover--after--Top: var(--pf-v5-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
|
|
@@ -381,7 +381,10 @@
|
|
|
381
381
|
display: flex;
|
|
382
382
|
align-items: center;
|
|
383
383
|
min-height: var(--pf-v5-c-menu__breadcrumb--MinHeight);
|
|
384
|
-
padding: var(--pf-v5-c-menu__breadcrumb--PaddingTop)
|
|
384
|
+
padding-block-start: var(--pf-v5-c-menu__breadcrumb--PaddingTop);
|
|
385
|
+
padding-block-end: var(--pf-v5-c-menu__breadcrumb--PaddingBottom);
|
|
386
|
+
padding-inline-start: var(--pf-v5-c-menu__breadcrumb--PaddingLeft);
|
|
387
|
+
padding-inline-end: var(--pf-v5-c-menu__breadcrumb--PaddingRight);
|
|
385
388
|
}
|
|
386
389
|
.pf-v5-c-menu__breadcrumb .pf-v5-c-breadcrumb {
|
|
387
390
|
--pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
|
|
@@ -401,17 +404,17 @@
|
|
|
401
404
|
--pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-menu__header--c-menu__item--PaddingRight);
|
|
402
405
|
--pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-menu__header--c-menu__item--PaddingBottom);
|
|
403
406
|
--pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-menu__header--c-menu__item--PaddingLeft);
|
|
404
|
-
padding-
|
|
405
|
-
padding-
|
|
406
|
-
padding-
|
|
407
|
-
padding-
|
|
407
|
+
padding-block-start: var(--pf-v5-c-menu__header--PaddingTop);
|
|
408
|
+
padding-block-end: var(--pf-v5-c-menu__header--PaddingBottom);
|
|
409
|
+
padding-inline-start: var(--pf-v5-c-menu__header--PaddingLeft);
|
|
410
|
+
padding-inline-end: var(--pf-v5-c-menu__header--PaddingRight);
|
|
408
411
|
}
|
|
409
412
|
.pf-v5-c-menu__header > .pf-v5-c-menu__item {
|
|
410
413
|
--pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--BackgroundColor);
|
|
411
|
-
margin-
|
|
412
|
-
margin-
|
|
413
|
-
margin-
|
|
414
|
-
margin-
|
|
414
|
+
margin-block-start: var(--pf-v5-c-menu__header--c-menu__item--MarginTop);
|
|
415
|
+
margin-block-end: var(--pf-v5-c-menu__header--c-menu__item--MarginBottom);
|
|
416
|
+
margin-inline-start: var(--pf-v5-c-menu__header--c-menu__item--MarginLeft);
|
|
417
|
+
margin-inline-end: var(--pf-v5-c-menu__header--c-menu__item--MarginRight);
|
|
415
418
|
}
|
|
416
419
|
.pf-v5-c-menu__header > .pf-v5-c-menu__item:hover {
|
|
417
420
|
--pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--hover--BackgroundColor);
|
|
@@ -424,20 +427,20 @@
|
|
|
424
427
|
}
|
|
425
428
|
|
|
426
429
|
.pf-v5-c-menu__search {
|
|
427
|
-
padding-
|
|
428
|
-
padding-
|
|
429
|
-
padding-
|
|
430
|
-
padding-
|
|
430
|
+
padding-block-start: var(--pf-v5-c-menu__search--PaddingTop);
|
|
431
|
+
padding-block-end: var(--pf-v5-c-menu__search--PaddingBottom);
|
|
432
|
+
padding-inline-start: var(--pf-v5-c-menu__search--PaddingLeft);
|
|
433
|
+
padding-inline-end: var(--pf-v5-c-menu__search--PaddingRight);
|
|
431
434
|
}
|
|
432
435
|
|
|
433
436
|
.pf-v5-c-menu__list {
|
|
434
437
|
--pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__list--Display);
|
|
435
|
-
padding-
|
|
436
|
-
padding-
|
|
438
|
+
padding-block-start: var(--pf-v5-c-menu__list--PaddingTop);
|
|
439
|
+
padding-block-end: var(--pf-v5-c-menu__list--PaddingBottom);
|
|
437
440
|
}
|
|
438
441
|
.pf-v5-c-menu__list > .pf-v5-c-divider {
|
|
439
|
-
margin-
|
|
440
|
-
margin-
|
|
442
|
+
margin-block-start: var(--pf-v5-c-menu__list--c-divider--MarginTop);
|
|
443
|
+
margin-block-end: var(--pf-v5-c-menu__list--c-divider--MarginBottom);
|
|
441
444
|
}
|
|
442
445
|
|
|
443
446
|
.pf-v5-c-menu__list-item {
|
|
@@ -475,7 +478,7 @@
|
|
|
475
478
|
--pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
|
|
476
479
|
--pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
|
|
477
480
|
justify-content: center;
|
|
478
|
-
padding-
|
|
481
|
+
padding-block-start: var(--pf-v5-c-menu__list-item--m-loading--PaddingTop);
|
|
479
482
|
overflow: hidden;
|
|
480
483
|
}
|
|
481
484
|
.pf-v5-c-menu__list-item.pf-m-danger {
|
|
@@ -487,15 +490,15 @@
|
|
|
487
490
|
flex-basis: 100%;
|
|
488
491
|
flex-direction: column;
|
|
489
492
|
min-width: 0;
|
|
490
|
-
padding-
|
|
491
|
-
padding-
|
|
492
|
-
padding-
|
|
493
|
-
padding-
|
|
493
|
+
padding-block-start: var(--pf-v5-c-menu__item--PaddingTop);
|
|
494
|
+
padding-block-end: var(--pf-v5-c-menu__item--PaddingBottom);
|
|
495
|
+
padding-inline-start: var(--pf-v5-c-menu__item--PaddingLeft);
|
|
496
|
+
padding-inline-end: var(--pf-v5-c-menu__item--PaddingRight);
|
|
494
497
|
font-size: var(--pf-v5-c-menu__item--FontSize);
|
|
495
498
|
font-weight: var(--pf-v5-c-menu__item--FontWeight);
|
|
496
499
|
line-height: var(--pf-v5-c-menu__item--LineHeight);
|
|
497
500
|
color: var(--pf-v5-c-menu__item--Color);
|
|
498
|
-
text-align:
|
|
501
|
+
text-align: start;
|
|
499
502
|
background-color: var(--pf-v5-c-menu__item--BackgroundColor);
|
|
500
503
|
border: none;
|
|
501
504
|
}
|
|
@@ -519,7 +522,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
519
522
|
}
|
|
520
523
|
|
|
521
524
|
.pf-v5-c-menu__item-external-icon {
|
|
522
|
-
margin-
|
|
525
|
+
margin-inline-start: var(--pf-v5-c-menu__item-external-icon--MarginLeft);
|
|
523
526
|
font-size: var(--pf-v5-c-menu__item-external-icon--FontSize);
|
|
524
527
|
color: var(--pf-v5-c-menu__item-external-icon--Color);
|
|
525
528
|
opacity: var(--pf-v5-c-menu__item-external-icon--Opacity);
|
|
@@ -537,9 +540,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
537
540
|
}
|
|
538
541
|
|
|
539
542
|
.pf-v5-c-menu__group-title {
|
|
540
|
-
padding-
|
|
541
|
-
padding-
|
|
542
|
-
padding-
|
|
543
|
+
padding-block-start: var(--pf-v5-c-menu__group-title--PaddingTop);
|
|
544
|
+
padding-inline-start: var(--pf-v5-c-menu__group-title--PaddingLeft);
|
|
545
|
+
padding-inline-end: var(--pf-v5-c-menu__group-title--PaddingRight);
|
|
543
546
|
font-size: var(--pf-v5-c-menu__group-title--FontSize);
|
|
544
547
|
font-weight: var(--pf-v5-c-menu__group-title--FontWeight);
|
|
545
548
|
color: var(--pf-v5-c-menu__group-title--Color);
|
|
@@ -552,31 +555,31 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
552
555
|
}
|
|
553
556
|
|
|
554
557
|
.pf-v5-c-menu__item-icon {
|
|
555
|
-
margin-
|
|
558
|
+
margin-inline-end: var(--pf-v5-c-menu__item-icon--MarginRight);
|
|
556
559
|
}
|
|
557
560
|
|
|
558
561
|
.pf-v5-c-menu__item-check {
|
|
559
562
|
display: flex;
|
|
560
563
|
align-items: center;
|
|
561
|
-
margin-
|
|
564
|
+
margin-inline-end: var(--pf-v5-c-menu__item-check--MarginRight);
|
|
562
565
|
}
|
|
563
566
|
|
|
564
567
|
.pf-v5-c-menu__item-toggle-icon {
|
|
565
|
-
padding-
|
|
566
|
-
padding-
|
|
568
|
+
padding-inline-start: var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft);
|
|
569
|
+
padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
|
|
567
570
|
color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
|
|
568
571
|
}
|
|
569
572
|
|
|
570
573
|
.pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
|
|
571
|
-
margin-
|
|
574
|
+
margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
|
|
572
575
|
}
|
|
573
576
|
|
|
574
577
|
.pf-v5-c-menu__item-toggle-icon + .pf-v5-c-menu__item-text {
|
|
575
|
-
margin-
|
|
578
|
+
margin-inline-start: var(--pf-v5-c-menu__item-toggle-icon--item-text--MarginLeft);
|
|
576
579
|
}
|
|
577
580
|
|
|
578
581
|
.pf-v5-c-menu__item-select-icon {
|
|
579
|
-
margin-
|
|
582
|
+
margin-inline-start: var(--pf-v5-c-menu__item-select-icon--MarginLeft);
|
|
580
583
|
font-size: var(--pf-v5-c-menu__item-select-icon--FontSize);
|
|
581
584
|
color: var(--pf-v5-c-menu__item-select-icon--Color);
|
|
582
585
|
opacity: 0;
|
|
@@ -584,10 +587,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
584
587
|
|
|
585
588
|
.pf-v5-c-menu__item-action {
|
|
586
589
|
display: flex;
|
|
587
|
-
padding-
|
|
588
|
-
padding-
|
|
589
|
-
padding-
|
|
590
|
-
padding-
|
|
590
|
+
padding-block-start: var(--pf-v5-c-menu__item-action--PaddingTop);
|
|
591
|
+
padding-block-end: var(--pf-v5-c-menu__item-action--PaddingBottom);
|
|
592
|
+
padding-inline-start: var(--pf-v5-c-menu__item-action--PaddingLeft);
|
|
593
|
+
padding-inline-end: var(--pf-v5-c-menu__item-action--PaddingRight);
|
|
591
594
|
color: var(--pf-v5-c-menu__item-action--Color);
|
|
592
595
|
background-color: var(--pf-v5-c-menu__item-action--BackgroundColor);
|
|
593
596
|
border: none;
|
|
@@ -614,18 +617,18 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
614
617
|
|
|
615
618
|
.pf-v5-c-menu__footer {
|
|
616
619
|
position: relative;
|
|
617
|
-
padding: var(--pf-v5-c-menu__footer--PaddingTop)
|
|
620
|
+
padding-block-start: var(--pf-v5-c-menu__footer--PaddingTop);
|
|
621
|
+
padding-block-end: var(--pf-v5-c-menu__footer--PaddingBottom);
|
|
622
|
+
padding-inline-start: var(--pf-v5-c-menu__footer--PaddingLeft);
|
|
623
|
+
padding-inline-end: var(--pf-v5-c-menu__footer--PaddingRight);
|
|
618
624
|
box-shadow: var(--pf-v5-c-menu__footer--BoxShadow);
|
|
619
625
|
}
|
|
620
626
|
.pf-v5-c-menu__footer::after {
|
|
621
627
|
position: absolute;
|
|
622
|
-
|
|
623
|
-
right: 0;
|
|
624
|
-
bottom: 0;
|
|
625
|
-
left: 0;
|
|
628
|
+
inset: 0;
|
|
626
629
|
pointer-events: none;
|
|
627
630
|
content: "";
|
|
628
|
-
border-
|
|
631
|
+
border-block-start: var(--pf-v5-c-menu__footer--after--BorderTopWidth) solid var(--pf-v5-c-menu__footer--after--BorderTopColor);
|
|
629
632
|
}
|
|
630
633
|
|
|
631
634
|
:where(.pf-v5-theme-dark) .pf-v5-c-menu {
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
--#{$menu}--m-nav--c-menu--m-top--Bottom: calc(0 + var(--#{$menu}--m-nav--c-menu--m-top--bottom-offset));
|
|
222
222
|
--#{$menu}--m-nav__list-item--first-child--c-menu--Top: 0;
|
|
223
223
|
|
|
224
|
-
|
|
224
|
+
inset-block-start: var(--#{$menu}--Top);
|
|
225
225
|
z-index: var(--#{$menu}--ZIndex);
|
|
226
226
|
width: var(--#{$menu}--Width);
|
|
227
227
|
min-width: var(--#{$menu}--MinWidth);
|
|
@@ -235,19 +235,18 @@
|
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
.#{$divider} {
|
|
238
|
-
margin-
|
|
239
|
-
margin-
|
|
238
|
+
margin-block-start: var(--#{$menu}--c-divider--MarginTop);
|
|
239
|
+
margin-block-end: var(--#{$menu}--c-divider--MarginBottom);
|
|
240
240
|
}
|
|
241
241
|
|
|
242
242
|
// nested flyout menu
|
|
243
243
|
& &.pf-m-flyout,
|
|
244
244
|
&.pf-m-flyout & {
|
|
245
245
|
position: absolute;
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
246
|
+
inset-block-start: var(--#{$menu}--m-flyout__menu--Top);
|
|
247
|
+
inset-block-end: var(--#{$menu}--m-flyout__menu--Bottom);
|
|
248
|
+
inset-inline-start: var(--#{$menu}--m-flyout__menu--Left);
|
|
249
|
+
inset-inline-end: var(--#{$menu}--m-flyout__menu--Right);
|
|
251
250
|
|
|
252
251
|
.#{$menu}__content {
|
|
253
252
|
overflow-y: visible;
|
|
@@ -293,8 +292,8 @@
|
|
|
293
292
|
--#{$menu}--BoxShadow: none;
|
|
294
293
|
|
|
295
294
|
position: absolute;
|
|
296
|
-
|
|
297
|
-
|
|
295
|
+
inset-block-start: var(--#{$menu}--m-drilldown--c-menu--Top);
|
|
296
|
+
inset-inline-start: 100%;
|
|
298
297
|
width: 100%;
|
|
299
298
|
transition: var(--#{$menu}--m-drilldown--c-menu--Transition);
|
|
300
299
|
|
|
@@ -402,21 +401,21 @@
|
|
|
402
401
|
|
|
403
402
|
&::before {
|
|
404
403
|
position: absolute;
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
404
|
+
inset-block-end: 0;
|
|
405
|
+
inset-inline-start: 0;
|
|
406
|
+
inset-inline-end: 0;
|
|
408
407
|
content: "";
|
|
409
|
-
border-
|
|
408
|
+
border-block-end: var(--#{$menu}--m-nav__item--before--BorderBottomWidth) solid var(--#{$menu}--m-nav__item--before--BorderBottomColor);
|
|
410
409
|
}
|
|
411
410
|
|
|
412
411
|
&:hover {
|
|
413
412
|
&::after {
|
|
414
413
|
position: absolute;
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
414
|
+
inset-block-start: var(--#{$menu}--m-nav__item--hover--after--Top);
|
|
415
|
+
inset-block-end: 0;
|
|
416
|
+
inset-inline-start: 0;
|
|
418
417
|
content: "";
|
|
419
|
-
border-
|
|
418
|
+
border-inline-start: var(--#{$menu}--m-nav__item--hover--after--BorderLeftWidth) solid var(--#{$menu}--m-nav__item--hover--after--BorderLeftColor);
|
|
420
419
|
}
|
|
421
420
|
}
|
|
422
421
|
}
|
|
@@ -429,20 +428,20 @@
|
|
|
429
428
|
|
|
430
429
|
&.pf-m-flyout.pf-m-nav,
|
|
431
430
|
&.pf-m-flyout.pf-m-nav & {
|
|
432
|
-
|
|
433
|
-
|
|
431
|
+
inset-block-start: var(--#{$menu}--m-nav--c-menu--Top);
|
|
432
|
+
inset-inline-start: var(--#{$menu}--m-nav--c-menu--Left);
|
|
434
433
|
|
|
435
434
|
// stylelint-disable selector-max-class
|
|
436
435
|
&.pf-m-top {
|
|
437
436
|
--#{$menu}--m-nav--c-menu--Top: auto;
|
|
438
437
|
|
|
439
|
-
|
|
438
|
+
inset-block-end: var(--#{$menu}--m-nav--c-menu--m-top--Bottom);
|
|
440
439
|
}
|
|
441
440
|
|
|
442
441
|
&.pf-m-left {
|
|
443
442
|
--#{$menu}--m-nav--c-menu--Left: auto;
|
|
444
443
|
|
|
445
|
-
|
|
444
|
+
inset-inline-end: var(--#{$menu}--m-nav--c-menu--m-left--Right);
|
|
446
445
|
}
|
|
447
446
|
|
|
448
447
|
.#{$menu}__list-item:first-child {
|
|
@@ -461,7 +460,10 @@
|
|
|
461
460
|
display: flex;
|
|
462
461
|
align-items: center;
|
|
463
462
|
min-height: var(--#{$menu}__breadcrumb--MinHeight);
|
|
464
|
-
padding: var(--#{$menu}__breadcrumb--PaddingTop)
|
|
463
|
+
padding-block-start: var(--#{$menu}__breadcrumb--PaddingTop);
|
|
464
|
+
padding-block-end: var(--#{$menu}__breadcrumb--PaddingBottom);
|
|
465
|
+
padding-inline-start: var(--#{$menu}__breadcrumb--PaddingLeft);
|
|
466
|
+
padding-inline-end: var(--#{$menu}__breadcrumb--PaddingRight);
|
|
465
467
|
|
|
466
468
|
.#{$breadcrumb} {
|
|
467
469
|
--#{$breadcrumb}__item--FontSize: var(--#{$menu}__breadcrumb--c-breadcrumb__item--FontSize);
|
|
@@ -486,18 +488,18 @@
|
|
|
486
488
|
--#{$menu}__item--PaddingBottom: var(--#{$menu}__header--c-menu__item--PaddingBottom);
|
|
487
489
|
--#{$menu}__item--PaddingLeft: var(--#{$menu}__header--c-menu__item--PaddingLeft);
|
|
488
490
|
|
|
489
|
-
padding-
|
|
490
|
-
padding-
|
|
491
|
-
padding-
|
|
492
|
-
padding-
|
|
491
|
+
padding-block-start: var(--#{$menu}__header--PaddingTop);
|
|
492
|
+
padding-block-end: var(--#{$menu}__header--PaddingBottom);
|
|
493
|
+
padding-inline-start: var(--#{$menu}__header--PaddingLeft);
|
|
494
|
+
padding-inline-end: var(--#{$menu}__header--PaddingRight);
|
|
493
495
|
|
|
494
496
|
> .#{$menu}__item {
|
|
495
497
|
--#{$menu}__item--BackgroundColor: var(--#{$menu}__header--c-menu__item--BackgroundColor);
|
|
496
498
|
|
|
497
|
-
margin-
|
|
498
|
-
margin-
|
|
499
|
-
margin-
|
|
500
|
-
margin-
|
|
499
|
+
margin-block-start: var(--#{$menu}__header--c-menu__item--MarginTop);
|
|
500
|
+
margin-block-end: var(--#{$menu}__header--c-menu__item--MarginBottom);
|
|
501
|
+
margin-inline-start: var(--#{$menu}__header--c-menu__item--MarginLeft);
|
|
502
|
+
margin-inline-end: var(--#{$menu}__header--c-menu__item--MarginRight);
|
|
501
503
|
|
|
502
504
|
&:hover {
|
|
503
505
|
--#{$menu}__item--BackgroundColor: var(--#{$menu}__header--c-menu__item--hover--BackgroundColor);
|
|
@@ -515,22 +517,22 @@
|
|
|
515
517
|
|
|
516
518
|
// Search
|
|
517
519
|
.#{$menu}__search {
|
|
518
|
-
padding-
|
|
519
|
-
padding-
|
|
520
|
-
padding-
|
|
521
|
-
padding-
|
|
520
|
+
padding-block-start: var(--#{$menu}__search--PaddingTop);
|
|
521
|
+
padding-block-end: var(--#{$menu}__search--PaddingBottom);
|
|
522
|
+
padding-inline-start: var(--#{$menu}__search--PaddingLeft);
|
|
523
|
+
padding-inline-end: var(--#{$menu}__search--PaddingRight);
|
|
522
524
|
}
|
|
523
525
|
|
|
524
526
|
// List
|
|
525
527
|
.#{$menu}__list {
|
|
526
528
|
@include pf-v5-hidden-visible(var(--#{$menu}__list--Display));
|
|
527
529
|
|
|
528
|
-
padding-
|
|
529
|
-
padding-
|
|
530
|
+
padding-block-start: var(--#{$menu}__list--PaddingTop);
|
|
531
|
+
padding-block-end: var(--#{$menu}__list--PaddingBottom);
|
|
530
532
|
|
|
531
533
|
> .#{$divider} {
|
|
532
|
-
margin-
|
|
533
|
-
margin-
|
|
534
|
+
margin-block-start: var(--#{$menu}__list--c-divider--MarginTop);
|
|
535
|
+
margin-block-end: var(--#{$menu}__list--c-divider--MarginBottom);
|
|
534
536
|
}
|
|
535
537
|
}
|
|
536
538
|
|
|
@@ -581,7 +583,7 @@
|
|
|
581
583
|
--#{$menu}__list-item--focus-within--BackgroundColor: transparent;
|
|
582
584
|
|
|
583
585
|
justify-content: center;
|
|
584
|
-
padding-
|
|
586
|
+
padding-block-start: var(--#{$menu}__list-item--m-loading--PaddingTop);
|
|
585
587
|
overflow: hidden; // prevents spinner rotation from overflowing
|
|
586
588
|
}
|
|
587
589
|
|
|
@@ -596,15 +598,15 @@
|
|
|
596
598
|
flex-basis: 100%;
|
|
597
599
|
flex-direction: column;
|
|
598
600
|
min-width: 0;
|
|
599
|
-
padding-
|
|
600
|
-
padding-
|
|
601
|
-
padding-
|
|
602
|
-
padding-
|
|
601
|
+
padding-block-start: var(--#{$menu}__item--PaddingTop);
|
|
602
|
+
padding-block-end: var(--#{$menu}__item--PaddingBottom);
|
|
603
|
+
padding-inline-start: var(--#{$menu}__item--PaddingLeft);
|
|
604
|
+
padding-inline-end: var(--#{$menu}__item--PaddingRight);
|
|
603
605
|
font-size: var(--#{$menu}__item--FontSize);
|
|
604
606
|
font-weight: var(--#{$menu}__item--FontWeight);
|
|
605
607
|
line-height: var(--#{$menu}__item--LineHeight);
|
|
606
608
|
color: var(--#{$menu}__item--Color);
|
|
607
|
-
text-align:
|
|
609
|
+
text-align: start;
|
|
608
610
|
background-color: var(--#{$menu}__item--BackgroundColor);
|
|
609
611
|
border: none;
|
|
610
612
|
|
|
@@ -635,7 +637,7 @@
|
|
|
635
637
|
}
|
|
636
638
|
|
|
637
639
|
.#{$menu}__item-external-icon {
|
|
638
|
-
margin-
|
|
640
|
+
margin-inline-start: var(--#{$menu}__item-external-icon--MarginLeft);
|
|
639
641
|
font-size: var(--#{$menu}__item-external-icon--FontSize);
|
|
640
642
|
color: var(--#{$menu}__item-external-icon--Color);
|
|
641
643
|
opacity: var(--#{$menu}__item-external-icon--Opacity);
|
|
@@ -655,9 +657,9 @@
|
|
|
655
657
|
|
|
656
658
|
// Group title
|
|
657
659
|
.#{$menu}__group-title {
|
|
658
|
-
padding-
|
|
659
|
-
padding-
|
|
660
|
-
padding-
|
|
660
|
+
padding-block-start: var(--#{$menu}__group-title--PaddingTop);
|
|
661
|
+
padding-inline-start: var(--#{$menu}__group-title--PaddingLeft);
|
|
662
|
+
padding-inline-end: var(--#{$menu}__group-title--PaddingRight);
|
|
661
663
|
font-size: var(--#{$menu}__group-title--FontSize);
|
|
662
664
|
font-weight: var(--#{$menu}__group-title--FontWeight);
|
|
663
665
|
color: var(--#{$menu}__group-title--Color);
|
|
@@ -672,34 +674,34 @@
|
|
|
672
674
|
|
|
673
675
|
// General icon
|
|
674
676
|
.#{$menu}__item-icon {
|
|
675
|
-
margin-
|
|
677
|
+
margin-inline-end: var(--#{$menu}__item-icon--MarginRight);
|
|
676
678
|
}
|
|
677
679
|
|
|
678
680
|
// Check
|
|
679
681
|
.#{$menu}__item-check {
|
|
680
682
|
display: flex;
|
|
681
683
|
align-items: center;
|
|
682
|
-
margin-
|
|
684
|
+
margin-inline-end: var(--#{$menu}__item-check--MarginRight);
|
|
683
685
|
}
|
|
684
686
|
|
|
685
687
|
// Toggle icon
|
|
686
688
|
.#{$menu}__item-toggle-icon {
|
|
687
|
-
padding-
|
|
688
|
-
padding-
|
|
689
|
+
padding-inline-start: var(--#{$menu}__item-toggle-icon--PaddingLeft);
|
|
690
|
+
padding-inline-end: var(--#{$menu}__item-toggle-icon--PaddingRight);
|
|
689
691
|
color: var(--#{$menu}__item-toggle-icon, inherit);
|
|
690
692
|
}
|
|
691
693
|
|
|
692
694
|
.#{$menu}__item-text + .#{$menu}__item-toggle-icon {
|
|
693
|
-
margin-
|
|
695
|
+
margin-inline-start: var(--#{$menu}__item-text--item-toggle-icon--MarginLeft);
|
|
694
696
|
}
|
|
695
697
|
|
|
696
698
|
.#{$menu}__item-toggle-icon + .#{$menu}__item-text {
|
|
697
|
-
margin-
|
|
699
|
+
margin-inline-start: var(--#{$menu}__item-toggle-icon--item-text--MarginLeft);
|
|
698
700
|
}
|
|
699
701
|
|
|
700
702
|
// Select icon
|
|
701
703
|
.#{$menu}__item-select-icon {
|
|
702
|
-
margin-
|
|
704
|
+
margin-inline-start: var(--#{$menu}__item-select-icon--MarginLeft);
|
|
703
705
|
font-size: var(--#{$menu}__item-select-icon--FontSize);
|
|
704
706
|
color: var(--#{$menu}__item-select-icon--Color);
|
|
705
707
|
opacity: 0;
|
|
@@ -708,10 +710,10 @@
|
|
|
708
710
|
// Actions
|
|
709
711
|
.#{$menu}__item-action {
|
|
710
712
|
display: flex;
|
|
711
|
-
padding-
|
|
712
|
-
padding-
|
|
713
|
-
padding-
|
|
714
|
-
padding-
|
|
713
|
+
padding-block-start: var(--#{$menu}__item-action--PaddingTop);
|
|
714
|
+
padding-block-end: var(--#{$menu}__item-action--PaddingBottom);
|
|
715
|
+
padding-inline-start: var(--#{$menu}__item-action--PaddingLeft);
|
|
716
|
+
padding-inline-end: var(--#{$menu}__item-action--PaddingRight);
|
|
715
717
|
color: var(--#{$menu}__item-action--Color);
|
|
716
718
|
background-color: var(--#{$menu}__item-action--BackgroundColor);
|
|
717
719
|
border: none;
|
|
@@ -747,18 +749,18 @@
|
|
|
747
749
|
|
|
748
750
|
.#{$menu}__footer {
|
|
749
751
|
position: relative;
|
|
750
|
-
padding: var(--#{$menu}__footer--PaddingTop)
|
|
752
|
+
padding-block-start: var(--#{$menu}__footer--PaddingTop);
|
|
753
|
+
padding-block-end: var(--#{$menu}__footer--PaddingBottom);
|
|
754
|
+
padding-inline-start: var(--#{$menu}__footer--PaddingLeft);
|
|
755
|
+
padding-inline-end: var(--#{$menu}__footer--PaddingRight);
|
|
751
756
|
box-shadow: var(--#{$menu}__footer--BoxShadow);
|
|
752
757
|
|
|
753
758
|
&::after {
|
|
754
759
|
position: absolute;
|
|
755
|
-
|
|
756
|
-
right: 0;
|
|
757
|
-
bottom: 0;
|
|
758
|
-
left: 0;
|
|
760
|
+
inset: 0;
|
|
759
761
|
pointer-events: none;
|
|
760
762
|
content: "";
|
|
761
|
-
border-
|
|
763
|
+
border-block-start: var(--#{$menu}__footer--after--BorderTopWidth) solid var(--#{$menu}__footer--after--BorderTopColor);
|
|
762
764
|
}
|
|
763
765
|
}
|
|
764
766
|
|