@patternfly/react-styles 5.0.0-alpha.8 → 5.0.0-prerelease.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +62 -0
- package/css/assets/images/pf_logo.svg +11 -11
- package/css/components/AboutModalBox/about-modal-box.css +128 -146
- package/css/components/AboutModalBox/about-modal-box.d.ts +9 -10
- package/css/components/AboutModalBox/about-modal-box.js +9 -10
- package/css/components/AboutModalBox/about-modal-box.mjs +9 -10
- package/css/components/Accordion/accordion.css +164 -164
- package/css/components/Accordion/accordion.d.ts +7 -7
- package/css/components/Accordion/accordion.js +7 -7
- package/css/components/Accordion/accordion.mjs +7 -7
- package/css/components/ActionList/action-list.css +19 -19
- package/css/components/ActionList/action-list.d.ts +2 -2
- package/css/components/ActionList/action-list.js +2 -2
- package/css/components/ActionList/action-list.mjs +2 -2
- package/css/components/Alert/alert-group.css +54 -0
- package/css/components/Alert/alert-group.d.ts +9 -0
- package/css/components/{AlertGroup → Alert}/alert-group.js +2 -2
- package/css/components/Alert/alert-group.mjs +8 -0
- package/css/components/Alert/alert.css +179 -179
- package/css/components/Alert/alert.d.ts +10 -10
- package/css/components/Alert/alert.js +10 -10
- package/css/components/Alert/alert.mjs +10 -10
- package/css/components/AppLauncher/app-launcher.css +159 -158
- package/css/components/AppLauncher/app-launcher.d.ts +12 -12
- package/css/components/AppLauncher/app-launcher.js +12 -12
- package/css/components/AppLauncher/app-launcher.mjs +12 -12
- package/css/components/Avatar/avatar.css +123 -123
- package/css/components/Avatar/avatar.d.ts +1 -1
- package/css/components/Avatar/avatar.js +1 -1
- package/css/components/Avatar/avatar.mjs +1 -1
- package/css/components/BackToTop/back-to-top.css +24 -24
- package/css/components/BackToTop/back-to-top.d.ts +2 -2
- package/css/components/BackToTop/back-to-top.js +2 -2
- package/css/components/BackToTop/back-to-top.mjs +2 -2
- package/css/components/Backdrop/backdrop.css +8 -8
- package/css/components/Backdrop/backdrop.d.ts +2 -2
- package/css/components/Backdrop/backdrop.js +2 -2
- package/css/components/Backdrop/backdrop.mjs +2 -2
- package/css/components/BackgroundImage/background-image.css +12 -12
- package/css/components/BackgroundImage/background-image.d.ts +1 -1
- package/css/components/BackgroundImage/background-image.js +1 -1
- package/css/components/BackgroundImage/background-image.mjs +1 -1
- package/css/components/Badge/badge.css +30 -29
- package/css/components/Badge/badge.d.ts +2 -2
- package/css/components/Badge/badge.js +2 -2
- package/css/components/Badge/badge.mjs +2 -2
- package/css/components/Banner/banner.css +88 -90
- package/css/components/Banner/banner.d.ts +4 -8
- package/css/components/Banner/banner.js +4 -8
- package/css/components/Banner/banner.mjs +4 -8
- package/css/components/Brand/brand.css +28 -28
- package/css/components/Brand/brand.d.ts +1 -1
- package/css/components/Brand/brand.js +1 -1
- package/css/components/Brand/brand.mjs +1 -1
- package/css/components/Breadcrumb/breadcrumb.css +51 -55
- package/css/components/Breadcrumb/breadcrumb.d.ts +9 -10
- package/css/components/Breadcrumb/breadcrumb.js +9 -10
- package/css/components/Breadcrumb/breadcrumb.mjs +9 -10
- package/css/components/Button/button.css +480 -476
- package/css/components/Button/button.d.ts +7 -7
- package/css/components/Button/button.js +7 -7
- package/css/components/Button/button.mjs +7 -7
- package/css/components/CalendarMonth/calendar-month.css +157 -157
- package/css/components/CalendarMonth/calendar-month.d.ts +12 -12
- package/css/components/CalendarMonth/calendar-month.js +12 -12
- package/css/components/CalendarMonth/calendar-month.mjs +12 -12
- package/css/components/Card/card.css +300 -300
- package/css/components/Card/card.d.ts +19 -19
- package/css/components/Card/card.js +19 -19
- package/css/components/Card/card.mjs +19 -19
- package/css/components/Check/check.css +45 -45
- package/css/components/Check/check.d.ts +6 -6
- package/css/components/Check/check.js +6 -6
- package/css/components/Check/check.mjs +6 -6
- package/css/components/Chip/chip-group.css +91 -0
- package/css/components/Chip/chip-group.d.ts +13 -0
- package/css/components/Chip/chip-group.js +14 -0
- package/css/components/Chip/chip-group.mjs +12 -0
- package/css/components/Chip/chip.css +75 -75
- package/css/components/Chip/chip.d.ts +7 -7
- package/css/components/Chip/chip.js +7 -7
- package/css/components/Chip/chip.mjs +7 -7
- package/css/components/ClipboardCopy/clipboard-copy.css +65 -65
- package/css/components/ClipboardCopy/clipboard-copy.d.ts +9 -9
- package/css/components/ClipboardCopy/clipboard-copy.js +9 -9
- package/css/components/ClipboardCopy/clipboard-copy.mjs +9 -9
- package/css/components/CodeBlock/code-block.css +21 -21
- package/css/components/CodeBlock/code-block.d.ts +6 -6
- package/css/components/CodeBlock/code-block.js +6 -6
- package/css/components/CodeBlock/code-block.mjs +6 -6
- package/css/components/CodeEditor/code-editor.css +85 -80
- package/css/components/CodeEditor/code-editor.d.ts +12 -12
- package/css/components/CodeEditor/code-editor.js +12 -12
- package/css/components/CodeEditor/code-editor.mjs +12 -12
- package/css/components/Consoles/AccessConsoles.css +8 -7
- package/css/components/Consoles/AccessConsoles.d.ts +2 -2
- package/css/components/Consoles/AccessConsoles.js +2 -2
- package/css/components/Consoles/AccessConsoles.mjs +2 -2
- package/css/components/Consoles/DesktopViewer.css +2 -3
- package/css/components/Consoles/DesktopViewer.d.ts +1 -1
- package/css/components/Consoles/DesktopViewer.js +1 -1
- package/css/components/Consoles/DesktopViewer.mjs +1 -1
- package/css/components/Consoles/SerialConsole.css +4 -4
- package/css/components/Consoles/SerialConsole.d.ts +2 -2
- package/css/components/Consoles/SerialConsole.js +2 -2
- package/css/components/Consoles/SerialConsole.mjs +2 -2
- package/css/components/Consoles/VncConsole.css +3 -3
- package/css/components/Consoles/VncConsole.d.ts +2 -2
- package/css/components/Consoles/VncConsole.js +2 -2
- package/css/components/Consoles/VncConsole.mjs +2 -2
- package/css/components/Content/content.css +210 -210
- package/css/components/Content/content.d.ts +1 -1
- package/css/components/Content/content.js +1 -1
- package/css/components/Content/content.mjs +1 -1
- package/css/components/ContextSelector/context-selector.css +228 -228
- package/css/components/ContextSelector/context-selector.d.ts +10 -10
- package/css/components/ContextSelector/context-selector.js +10 -10
- package/css/components/ContextSelector/context-selector.mjs +10 -10
- package/css/components/DataList/data-list-grid.css +182 -182
- package/css/components/DataList/data-list-grid.d.ts +4 -4
- package/css/components/DataList/data-list-grid.js +4 -4
- package/css/components/DataList/data-list-grid.mjs +4 -4
- package/css/components/DataList/data-list.css +510 -510
- package/css/components/DataList/data-list.d.ts +17 -17
- package/css/components/DataList/data-list.js +17 -17
- package/css/components/DataList/data-list.mjs +17 -17
- package/css/components/DatePicker/date-picker.css +37 -37
- package/css/components/DatePicker/date-picker.d.ts +6 -6
- package/css/components/DatePicker/date-picker.js +6 -6
- package/css/components/DatePicker/date-picker.mjs +6 -6
- package/css/components/DescriptionList/description-list-order.css +90 -90
- package/css/components/DescriptionList/description-list-order.d.ts +1 -1
- package/css/components/DescriptionList/description-list-order.js +1 -1
- package/css/components/DescriptionList/description-list-order.mjs +1 -1
- package/css/components/DescriptionList/description-list.css +192 -192
- package/css/components/DescriptionList/description-list.d.ts +7 -7
- package/css/components/DescriptionList/description-list.js +7 -7
- package/css/components/DescriptionList/description-list.mjs +7 -7
- package/css/components/Divider/divider.css +228 -228
- package/css/components/Divider/divider.d.ts +1 -1
- package/css/components/Divider/divider.js +1 -1
- package/css/components/Divider/divider.mjs +1 -1
- package/css/components/DragDrop/drag-drop.css +49 -33
- package/css/components/DragDrop/drag-drop.d.ts +4 -3
- package/css/components/DragDrop/drag-drop.js +4 -3
- package/css/components/DragDrop/drag-drop.mjs +4 -3
- package/css/components/Drawer/drawer.css +435 -435
- package/css/components/Drawer/drawer.d.ts +14 -14
- package/css/components/Drawer/drawer.js +14 -14
- package/css/components/Drawer/drawer.mjs +14 -14
- package/css/components/Dropdown/dropdown.css +446 -444
- package/css/components/Dropdown/dropdown.d.ts +21 -21
- package/css/components/Dropdown/dropdown.js +21 -21
- package/css/components/Dropdown/dropdown.mjs +21 -21
- package/css/components/DualListSelector/dual-list-selector.css +193 -187
- package/css/components/DualListSelector/dual-list-selector.d.ts +27 -26
- package/css/components/DualListSelector/dual-list-selector.js +27 -26
- package/css/components/DualListSelector/dual-list-selector.mjs +27 -26
- package/css/components/EmptyState/empty-state.css +82 -82
- package/css/components/EmptyState/empty-state.d.ts +7 -7
- package/css/components/EmptyState/empty-state.js +7 -7
- package/css/components/EmptyState/empty-state.mjs +7 -7
- package/css/components/ExpandableSection/expandable-section.css +102 -102
- package/css/components/ExpandableSection/expandable-section.d.ts +5 -5
- package/css/components/ExpandableSection/expandable-section.js +5 -5
- package/css/components/ExpandableSection/expandable-section.mjs +5 -5
- package/css/components/FileUpload/file-upload.css +30 -30
- package/css/components/FileUpload/file-upload.d.ts +6 -6
- package/css/components/FileUpload/file-upload.js +6 -6
- package/css/components/FileUpload/file-upload.mjs +6 -6
- package/css/components/Form/form.css +327 -327
- package/css/components/Form/form.d.ts +28 -28
- package/css/components/Form/form.js +28 -28
- package/css/components/Form/form.mjs +28 -28
- package/css/components/FormControl/form-control.css +252 -316
- package/css/components/FormControl/form-control.d.ts +12 -8
- package/css/components/FormControl/form-control.js +12 -8
- package/css/components/FormControl/form-control.mjs +12 -8
- package/css/components/HelperText/helper-text.css +58 -58
- package/css/components/HelperText/helper-text.d.ts +5 -5
- package/css/components/HelperText/helper-text.js +5 -5
- package/css/components/HelperText/helper-text.mjs +5 -5
- package/css/components/Hint/hint.css +38 -38
- package/css/components/Hint/hint.d.ts +9 -9
- package/css/components/Hint/hint.js +9 -9
- package/css/components/Hint/hint.mjs +9 -9
- package/css/components/Icon/icon.css +91 -90
- package/css/components/Icon/icon.d.ts +4 -4
- package/css/components/Icon/icon.js +4 -4
- package/css/components/Icon/icon.mjs +4 -4
- package/css/components/InlineEdit/inline-edit.css +43 -43
- package/css/components/InlineEdit/inline-edit.d.ts +8 -8
- package/css/components/InlineEdit/inline-edit.js +8 -8
- package/css/components/InlineEdit/inline-edit.mjs +8 -8
- package/css/components/InputGroup/input-group.css +61 -63
- package/css/components/InputGroup/input-group.d.ts +4 -4
- package/css/components/InputGroup/input-group.js +4 -4
- package/css/components/InputGroup/input-group.mjs +4 -4
- package/css/components/JumpLinks/jump-links.css +178 -178
- package/css/components/JumpLinks/jump-links.d.ts +11 -11
- package/css/components/JumpLinks/jump-links.js +11 -11
- package/css/components/JumpLinks/jump-links.mjs +11 -11
- package/css/components/Label/label-group.css +137 -0
- package/css/components/Label/label-group.d.ts +18 -0
- package/css/components/Label/label-group.js +19 -0
- package/css/components/Label/label-group.mjs +17 -0
- package/css/components/Label/label.css +393 -387
- package/css/components/Label/label.d.ts +7 -7
- package/css/components/Label/label.js +7 -7
- package/css/components/Label/label.mjs +7 -7
- package/css/components/List/list.css +53 -53
- package/css/components/List/list.d.ts +3 -3
- package/css/components/List/list.js +3 -3
- package/css/components/List/list.mjs +3 -3
- package/css/components/LogViewer/log-viewer.css +139 -142
- package/css/components/LogViewer/log-viewer.d.ts +13 -14
- package/css/components/LogViewer/log-viewer.js +13 -14
- package/css/components/LogViewer/log-viewer.mjs +13 -14
- package/css/components/Login/login.css +174 -174
- package/css/components/Login/login.d.ts +19 -19
- package/css/components/Login/login.js +19 -19
- package/css/components/Login/login.mjs +19 -19
- package/css/components/Masthead/masthead.css +555 -541
- package/css/components/Masthead/masthead.d.ts +15 -15
- package/css/components/Masthead/masthead.js +15 -15
- package/css/components/Masthead/masthead.mjs +15 -15
- package/css/components/Menu/menu.css +433 -434
- package/css/components/Menu/menu.d.ts +24 -24
- package/css/components/Menu/menu.js +24 -24
- package/css/components/Menu/menu.mjs +24 -24
- package/css/components/MenuToggle/menu-toggle.css +317 -311
- package/css/components/MenuToggle/menu-toggle.d.ts +10 -10
- package/css/components/MenuToggle/menu-toggle.js +10 -10
- package/css/components/MenuToggle/menu-toggle.mjs +10 -10
- package/css/components/ModalBox/modal-box.css +118 -118
- package/css/components/ModalBox/modal-box.d.ts +12 -12
- package/css/components/ModalBox/modal-box.js +12 -12
- package/css/components/ModalBox/modal-box.mjs +12 -12
- package/css/components/MultipleFileUpload/multiple-file-upload.css +136 -136
- package/css/components/MultipleFileUpload/multiple-file-upload.d.ts +18 -18
- package/css/components/MultipleFileUpload/multiple-file-upload.js +18 -18
- package/css/components/MultipleFileUpload/multiple-file-upload.mjs +18 -18
- package/css/components/Nav/nav.css +786 -769
- package/css/components/Nav/nav.d.ts +18 -19
- package/css/components/Nav/nav.js +18 -19
- package/css/components/Nav/nav.mjs +18 -19
- package/css/components/NotificationBadge/notification-badge.css +81 -80
- package/css/components/NotificationBadge/notification-badge.d.ts +5 -5
- package/css/components/NotificationBadge/notification-badge.js +5 -5
- package/css/components/NotificationBadge/notification-badge.mjs +5 -5
- package/css/components/NotificationDrawer/notification-drawer.css +180 -180
- package/css/components/NotificationDrawer/notification-drawer.d.ts +20 -20
- package/css/components/NotificationDrawer/notification-drawer.js +20 -20
- package/css/components/NotificationDrawer/notification-drawer.mjs +20 -20
- package/css/components/NumberInput/number-input.css +23 -22
- package/css/components/NumberInput/number-input.d.ts +5 -5
- package/css/components/NumberInput/number-input.js +5 -5
- package/css/components/NumberInput/number-input.mjs +5 -5
- package/css/components/OptionsMenu/options-menu.css +175 -175
- package/css/components/OptionsMenu/options-menu.d.ts +13 -13
- package/css/components/OptionsMenu/options-menu.js +13 -13
- package/css/components/OptionsMenu/options-menu.mjs +13 -13
- package/css/components/OverflowMenu/overflow-menu.css +42 -42
- package/css/components/OverflowMenu/overflow-menu.d.ts +6 -6
- package/css/components/OverflowMenu/overflow-menu.js +6 -6
- package/css/components/OverflowMenu/overflow-menu.mjs +6 -6
- package/css/components/Page/page.css +639 -639
- package/css/components/Page/page.d.ts +31 -32
- package/css/components/Page/page.js +31 -32
- package/css/components/Page/page.mjs +31 -32
- package/css/components/Pagination/pagination.css +277 -277
- package/css/components/Pagination/pagination.d.ts +9 -10
- package/css/components/Pagination/pagination.js +9 -10
- package/css/components/Pagination/pagination.mjs +9 -10
- package/css/components/Panel/panel.css +63 -57
- package/css/components/Panel/panel.d.ts +6 -5
- package/css/components/Panel/panel.js +6 -5
- package/css/components/Panel/panel.mjs +6 -5
- package/css/components/Popover/popover.css +125 -125
- package/css/components/Popover/popover.d.ts +11 -11
- package/css/components/Popover/popover.js +11 -11
- package/css/components/Popover/popover.mjs +11 -11
- package/css/components/Popper/Popper.css +1 -1
- package/css/components/Popper/Popper.d.ts +1 -1
- package/css/components/Popper/Popper.js +1 -1
- package/css/components/Popper/Popper.mjs +1 -1
- package/css/components/Progress/progress.css +87 -87
- package/css/components/Progress/progress.d.ts +9 -9
- package/css/components/Progress/progress.js +9 -9
- package/css/components/Progress/progress.mjs +9 -9
- package/css/components/ProgressStepper/progress-stepper.css +509 -508
- package/css/components/ProgressStepper/progress-stepper.d.ts +8 -8
- package/css/components/ProgressStepper/progress-stepper.js +8 -8
- package/css/components/ProgressStepper/progress-stepper.mjs +8 -8
- package/css/components/Radio/radio.css +44 -44
- package/css/components/Radio/radio.d.ts +5 -5
- package/css/components/Radio/radio.js +5 -5
- package/css/components/Radio/radio.mjs +5 -5
- package/css/components/Select/select.css +413 -413
- package/css/components/Select/select.d.ts +34 -34
- package/css/components/Select/select.js +34 -34
- package/css/components/Select/select.mjs +34 -34
- package/css/components/Sidebar/sidebar.css +231 -231
- package/css/components/Sidebar/sidebar.d.ts +4 -4
- package/css/components/Sidebar/sidebar.js +4 -4
- package/css/components/Sidebar/sidebar.mjs +4 -4
- package/css/components/SimpleList/simple-list.css +65 -65
- package/css/components/SimpleList/simple-list.d.ts +5 -5
- package/css/components/SimpleList/simple-list.js +5 -5
- package/css/components/SimpleList/simple-list.mjs +5 -5
- package/css/components/Skeleton/skeleton.css +115 -115
- package/css/components/Skeleton/skeleton.d.ts +2 -2
- package/css/components/Skeleton/skeleton.js +2 -2
- package/css/components/Skeleton/skeleton.mjs +2 -2
- package/css/components/SkipToContent/skip-to-content.css +8 -8
- package/css/components/SkipToContent/skip-to-content.d.ts +1 -1
- package/css/components/SkipToContent/skip-to-content.js +1 -1
- package/css/components/SkipToContent/skip-to-content.mjs +1 -1
- package/css/components/Slider/slider.css +132 -132
- package/css/components/Slider/slider.d.ts +12 -12
- package/css/components/Slider/slider.js +12 -12
- package/css/components/Slider/slider.mjs +12 -12
- package/css/components/Spinner/spinner.css +50 -50
- package/css/components/Spinner/spinner.d.ts +2 -2
- package/css/components/Spinner/spinner.js +2 -2
- package/css/components/Spinner/spinner.mjs +2 -2
- package/css/components/Switch/switch.css +87 -87
- package/css/components/Switch/switch.d.ts +6 -6
- package/css/components/Switch/switch.js +6 -6
- package/css/components/Switch/switch.mjs +6 -6
- package/css/components/TabContent/tab-content.css +28 -28
- package/css/components/TabContent/tab-content.d.ts +2 -2
- package/css/components/TabContent/tab-content.js +2 -2
- package/css/components/TabContent/tab-content.mjs +2 -2
- package/css/components/Table/inline-edit.css +32 -28
- package/css/components/Table/inline-edit.d.ts +2 -2
- package/css/components/Table/inline-edit.js +2 -2
- package/css/components/Table/inline-edit.mjs +2 -2
- package/css/components/Table/table-grid.css +850 -861
- package/css/components/Table/table-grid.d.ts +19 -14
- package/css/components/Table/table-grid.js +19 -14
- package/css/components/Table/table-grid.mjs +19 -14
- package/css/components/Table/table-scrollable.css +38 -38
- package/css/components/Table/table-scrollable.d.ts +4 -4
- package/css/components/Table/table-scrollable.js +4 -4
- package/css/components/Table/table-scrollable.mjs +4 -4
- package/css/components/Table/table-tree-view.css +492 -492
- package/css/components/Table/table-tree-view.d.ts +17 -12
- package/css/components/Table/table-tree-view.js +17 -12
- package/css/components/Table/table-tree-view.mjs +17 -12
- package/css/components/Table/table.css +739 -740
- package/css/components/Table/table.d.ts +31 -24
- package/css/components/Table/table.js +31 -24
- package/css/components/Table/table.mjs +31 -24
- package/css/components/Tabs/tabs.css +606 -605
- package/css/components/Tabs/tabs.d.ts +17 -17
- package/css/components/Tabs/tabs.js +17 -17
- package/css/components/Tabs/tabs.mjs +17 -17
- package/css/components/TextInputGroup/text-input-group.css +98 -94
- package/css/components/TextInputGroup/text-input-group.d.ts +10 -9
- package/css/components/TextInputGroup/text-input-group.js +10 -9
- package/css/components/TextInputGroup/text-input-group.mjs +10 -9
- package/css/components/Tile/tile.css +99 -99
- package/css/components/Tile/tile.d.ts +6 -6
- package/css/components/Tile/tile.js +6 -6
- package/css/components/Tile/tile.mjs +6 -6
- package/css/components/Timestamp/timestamp.css +28 -28
- package/css/components/Timestamp/timestamp.d.ts +1 -1
- package/css/components/Timestamp/timestamp.js +1 -1
- package/css/components/Timestamp/timestamp.mjs +1 -1
- package/css/components/Title/title.css +45 -45
- package/css/components/Title/title.d.ts +1 -1
- package/css/components/Title/title.js +1 -1
- package/css/components/Title/title.mjs +1 -1
- package/css/components/ToggleGroup/toggle-group.css +84 -81
- package/css/components/ToggleGroup/toggle-group.d.ts +6 -6
- package/css/components/ToggleGroup/toggle-group.js +6 -6
- package/css/components/ToggleGroup/toggle-group.mjs +6 -6
- package/css/components/Toolbar/toolbar.css +743 -708
- package/css/components/Toolbar/toolbar.d.ts +14 -12
- package/css/components/Toolbar/toolbar.js +14 -12
- package/css/components/Toolbar/toolbar.mjs +14 -12
- package/css/components/Tooltip/tooltip.css +56 -56
- package/css/components/Tooltip/tooltip.d.ts +4 -4
- package/css/components/Tooltip/tooltip.js +4 -4
- package/css/components/Tooltip/tooltip.mjs +4 -4
- package/css/components/TreeView/tree-view.css +364 -364
- package/css/components/TreeView/tree-view.d.ts +17 -17
- package/css/components/TreeView/tree-view.js +17 -17
- package/css/components/TreeView/tree-view.mjs +17 -17
- package/css/components/Truncate/truncate.css +11 -11
- package/css/components/Truncate/truncate.d.ts +3 -3
- package/css/components/Truncate/truncate.js +3 -3
- package/css/components/Truncate/truncate.mjs +3 -3
- package/css/components/Wizard/wizard.css +315 -317
- package/css/components/Wizard/wizard.d.ts +29 -29
- package/css/components/Wizard/wizard.js +29 -29
- package/css/components/Wizard/wizard.mjs +29 -29
- package/css/docs/components/AppLauncher/deprecated/application-launcher.css +25 -0
- package/css/docs/components/Avatar/examples/Avatar.css +1 -1
- package/css/docs/components/Button/examples/Button.css +1 -1
- package/css/docs/components/Button/examples/Button.d.ts +1 -1
- package/css/docs/components/Button/examples/Button.js +1 -1
- package/css/docs/components/Button/examples/Button.mjs +1 -1
- package/css/docs/components/ContextSelector/deprecated/context-selector.css +7 -0
- package/css/docs/components/DragDrop/examples/DragDrop.css +3 -3
- package/css/docs/components/DragDrop/examples/DragDrop.d.ts +1 -1
- package/css/docs/components/DragDrop/examples/DragDrop.js +1 -1
- package/css/docs/components/DragDrop/examples/DragDrop.mjs +1 -1
- package/css/docs/components/Dropdown/examples/Dropdown.css +1 -1
- package/css/docs/components/Dropdown/examples/Dropdown.d.ts +1 -1
- package/css/docs/components/Dropdown/examples/Dropdown.js +1 -1
- package/css/docs/components/Dropdown/examples/Dropdown.mjs +1 -1
- package/css/docs/components/Label/examples/Label.css +2 -2
- package/css/docs/components/Label/examples/Label.d.ts +1 -1
- package/css/docs/components/Label/examples/Label.js +1 -1
- package/css/docs/components/Label/examples/Label.mjs +1 -1
- package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
- package/css/docs/components/LogViewer/examples/LogViewer.d.ts +1 -1
- package/css/docs/components/LogViewer/examples/LogViewer.js +1 -1
- package/css/docs/components/LogViewer/examples/LogViewer.mjs +1 -1
- package/css/docs/components/ModalBox/examples/ModalBox.css +2 -2
- package/css/docs/components/ModalBox/examples/ModalBox.d.ts +1 -1
- package/css/docs/components/ModalBox/examples/ModalBox.js +1 -1
- package/css/docs/components/ModalBox/examples/ModalBox.mjs +1 -1
- package/css/docs/components/Nav/examples/Navigation.css +13 -13
- package/css/docs/components/Nav/examples/Navigation.d.ts +4 -4
- package/css/docs/components/Nav/examples/Navigation.js +4 -4
- package/css/docs/components/Nav/examples/Navigation.mjs +4 -4
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +1 -1
- package/css/docs/components/OptionsMenu/deprecated/options-menu.css +25 -0
- package/css/docs/components/OverflowMenu/examples/overflow-menu.css +4 -4
- package/css/docs/components/OverflowMenu/examples/overflow-menu.d.ts +2 -2
- package/css/docs/components/OverflowMenu/examples/overflow-menu.js +2 -2
- package/css/docs/components/OverflowMenu/examples/overflow-menu.mjs +2 -2
- package/css/docs/components/Page/deprecated/PageHeader.css +17 -0
- package/css/docs/components/Page/deprecated/PageHeader.d.ts +12 -0
- package/css/docs/components/Page/deprecated/PageHeader.js +13 -0
- package/css/docs/components/Page/deprecated/PageHeader.mjs +11 -0
- package/css/docs/components/Page/examples/Page.css +4 -4
- package/css/docs/components/Page/examples/Page.d.ts +3 -3
- package/css/docs/components/Page/examples/Page.js +3 -3
- package/css/docs/components/Page/examples/Page.mjs +3 -3
- package/css/docs/components/Popover/examples/Popover.css +1 -1
- package/css/docs/components/Popover/examples/Popover.d.ts +1 -1
- package/css/docs/components/Popover/examples/Popover.js +1 -1
- package/css/docs/components/Popover/examples/Popover.mjs +1 -1
- package/css/docs/components/Skeleton/examples/Skeleton.css +1 -1
- package/css/docs/components/Skeleton/examples/Skeleton.d.ts +1 -1
- package/css/docs/components/Skeleton/examples/Skeleton.js +1 -1
- package/css/docs/components/Skeleton/examples/Skeleton.mjs +1 -1
- package/css/docs/components/Table/examples/Table.css +1 -1
- package/css/docs/components/Table/examples/Table.d.ts +1 -1
- package/css/docs/components/Table/examples/Table.js +1 -1
- package/css/docs/components/Table/examples/Table.mjs +1 -1
- package/css/docs/components/Tabs/examples/Tabs.css +1 -1
- package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +6 -15
- package/css/docs/components/TextInputGroup/examples/TextInputGroup.d.ts +2 -2
- package/css/docs/components/TextInputGroup/examples/TextInputGroup.js +2 -2
- package/css/docs/components/TextInputGroup/examples/TextInputGroup.mjs +2 -2
- package/css/docs/components/Tile/examples/Tile.css +5 -5
- package/css/docs/components/Tile/examples/Tile.d.ts +1 -1
- package/css/docs/components/Tile/examples/Tile.js +1 -1
- package/css/docs/components/Tile/examples/Tile.mjs +1 -1
- package/css/docs/components/ToggleGroup/examples/toggle-group.css +1 -1
- package/css/docs/components/Toolbar/examples/Toolbar.css +34 -34
- package/css/docs/components/Toolbar/examples/Toolbar.d.ts +3 -3
- package/css/docs/components/Toolbar/examples/Toolbar.js +3 -3
- package/css/docs/components/Toolbar/examples/Toolbar.mjs +3 -3
- package/css/docs/components/Truncate/examples/Truncate.css +3 -3
- package/css/docs/components/Truncate/examples/Truncate.d.ts +1 -1
- package/css/docs/components/Truncate/examples/Truncate.js +1 -1
- package/css/docs/components/Truncate/examples/Truncate.mjs +1 -1
- package/css/docs/demos/Card/examples/Card.css +6 -6
- package/css/docs/demos/Card/examples/Card.d.ts +2 -2
- package/css/docs/demos/Card/examples/Card.js +2 -2
- package/css/docs/demos/Card/examples/Card.mjs +2 -2
- package/css/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
- package/css/docs/layouts/Bullseye/examples/Bullseye.d.ts +2 -2
- package/css/docs/layouts/Bullseye/examples/Bullseye.js +2 -2
- package/css/docs/layouts/Bullseye/examples/Bullseye.mjs +2 -2
- package/css/docs/layouts/Flex/examples/Flex.css +2 -2
- package/css/docs/layouts/Flex/examples/Flex.d.ts +2 -2
- package/css/docs/layouts/Flex/examples/Flex.js +2 -2
- package/css/docs/layouts/Flex/examples/Flex.mjs +2 -2
- package/css/docs/layouts/Gallery/examples/Gallery.css +2 -2
- package/css/docs/layouts/Gallery/examples/Gallery.d.ts +2 -2
- package/css/docs/layouts/Gallery/examples/Gallery.js +2 -2
- package/css/docs/layouts/Gallery/examples/Gallery.mjs +2 -2
- package/css/docs/layouts/Grid/examples/Grid.css +1 -1
- package/css/docs/layouts/Grid/examples/Grid.d.ts +1 -1
- package/css/docs/layouts/Grid/examples/Grid.js +1 -1
- package/css/docs/layouts/Grid/examples/Grid.mjs +1 -1
- package/css/docs/layouts/Level/examples/Level.css +3 -3
- package/css/docs/layouts/Level/examples/Level.d.ts +2 -2
- package/css/docs/layouts/Level/examples/Level.js +2 -2
- package/css/docs/layouts/Level/examples/Level.mjs +2 -2
- package/css/docs/layouts/Split/examples/Split.css +2 -2
- package/css/docs/layouts/Split/examples/Split.d.ts +2 -2
- package/css/docs/layouts/Split/examples/Split.js +2 -2
- package/css/docs/layouts/Split/examples/Split.mjs +2 -2
- package/css/docs/layouts/Stack/examples/Stack.css +3 -3
- package/css/docs/layouts/Stack/examples/Stack.d.ts +2 -2
- package/css/docs/layouts/Stack/examples/Stack.js +2 -2
- package/css/docs/layouts/Stack/examples/Stack.mjs +2 -2
- package/css/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/css/docs/utilities/Alignment/examples/Alignment.d.ts +4 -4
- package/css/docs/utilities/Alignment/examples/Alignment.js +4 -4
- package/css/docs/utilities/Alignment/examples/Alignment.mjs +4 -4
- package/css/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
- package/css/docs/utilities/Display/examples/Display.css +8 -8
- package/css/docs/utilities/Display/examples/Display.d.ts +8 -8
- package/css/docs/utilities/Display/examples/Display.js +8 -8
- package/css/docs/utilities/Display/examples/Display.mjs +8 -8
- package/css/docs/utilities/Flex/examples/Flex.css +5 -5
- package/css/docs/utilities/Flex/examples/Flex.d.ts +2 -2
- package/css/docs/utilities/Flex/examples/Flex.js +2 -2
- package/css/docs/utilities/Flex/examples/Flex.mjs +2 -2
- package/css/docs/utilities/Float/examples/Float.css +2 -2
- package/css/docs/utilities/Float/examples/Float.d.ts +2 -2
- package/css/docs/utilities/Float/examples/Float.js +2 -2
- package/css/docs/utilities/Float/examples/Float.mjs +2 -2
- package/css/docs/utilities/Sizing/examples/Sizing.css +4 -4
- package/css/docs/utilities/Sizing/examples/Sizing.d.ts +4 -4
- package/css/docs/utilities/Sizing/examples/Sizing.js +4 -4
- package/css/docs/utilities/Sizing/examples/Sizing.mjs +4 -4
- package/css/docs/utilities/Spacing/examples/Spacing.css +1 -1
- package/css/docs/utilities/Spacing/examples/Spacing.d.ts +1 -1
- package/css/docs/utilities/Spacing/examples/Spacing.js +1 -1
- package/css/docs/utilities/Spacing/examples/Spacing.mjs +1 -1
- package/css/layouts/Bullseye/bullseye.css +3 -3
- package/css/layouts/Bullseye/bullseye.d.ts +1 -1
- package/css/layouts/Bullseye/bullseye.js +1 -1
- package/css/layouts/Bullseye/bullseye.mjs +1 -1
- package/css/layouts/Flex/flex.css +1504 -796
- package/css/layouts/Flex/flex.d.ts +182 -2
- package/css/layouts/Flex/flex.js +182 -2
- package/css/layouts/Flex/flex.mjs +182 -2
- package/css/layouts/Gallery/gallery.css +34 -34
- package/css/layouts/Gallery/gallery.d.ts +1 -1
- package/css/layouts/Gallery/gallery.js +1 -1
- package/css/layouts/Gallery/gallery.mjs +1 -1
- package/css/layouts/Grid/grid.css +531 -531
- package/css/layouts/Grid/grid.d.ts +2 -2
- package/css/layouts/Grid/grid.js +2 -2
- package/css/layouts/Grid/grid.mjs +2 -2
- package/css/layouts/Level/level.css +4 -4
- package/css/layouts/Level/level.d.ts +1 -1
- package/css/layouts/Level/level.js +1 -1
- package/css/layouts/Level/level.mjs +1 -1
- package/css/layouts/Split/split.css +6 -6
- package/css/layouts/Split/split.d.ts +2 -2
- package/css/layouts/Split/split.js +2 -2
- package/css/layouts/Split/split.mjs +2 -2
- package/css/layouts/Stack/stack.css +5 -5
- package/css/layouts/Stack/stack.d.ts +2 -2
- package/css/layouts/Stack/stack.js +2 -2
- package/css/layouts/Stack/stack.mjs +2 -2
- package/css/layouts/Toolbar/toolbar.css +20 -14
- package/css/utilities/Accessibility/accessibility.css +18 -18
- package/css/utilities/Accessibility/accessibility.d.ts +18 -18
- package/css/utilities/Accessibility/accessibility.js +18 -18
- package/css/utilities/Accessibility/accessibility.mjs +18 -18
- package/css/utilities/Alignment/alignment.css +24 -24
- package/css/utilities/Alignment/alignment.d.ts +24 -24
- package/css/utilities/Alignment/alignment.js +24 -24
- package/css/utilities/Alignment/alignment.mjs +24 -24
- package/css/utilities/BackgroundColor/BackgroundColor.css +252 -252
- package/css/utilities/BackgroundColor/BackgroundColor.d.ts +97 -97
- package/css/utilities/BackgroundColor/BackgroundColor.js +97 -97
- package/css/utilities/BackgroundColor/BackgroundColor.mjs +97 -97
- package/css/utilities/BoxShadow/box-shadow.css +42 -42
- package/css/utilities/BoxShadow/box-shadow.d.ts +21 -21
- package/css/utilities/BoxShadow/box-shadow.js +21 -21
- package/css/utilities/BoxShadow/box-shadow.mjs +21 -21
- package/css/utilities/Display/display.css +54 -54
- package/css/utilities/Display/display.d.ts +54 -54
- package/css/utilities/Display/display.js +54 -54
- package/css/utilities/Display/display.mjs +54 -54
- package/css/utilities/Flex/flex.css +228 -228
- package/css/utilities/Flex/flex.d.ts +228 -228
- package/css/utilities/Flex/flex.js +228 -228
- package/css/utilities/Flex/flex.mjs +228 -228
- package/css/utilities/Float/float.css +12 -12
- package/css/utilities/Float/float.d.ts +12 -12
- package/css/utilities/Float/float.js +12 -12
- package/css/utilities/Float/float.mjs +12 -12
- package/css/utilities/Sizing/sizing.css +244 -244
- package/css/utilities/Sizing/sizing.d.ts +196 -196
- package/css/utilities/Sizing/sizing.js +196 -196
- package/css/utilities/Sizing/sizing.mjs +196 -196
- package/css/utilities/Spacing/spacing.css +1704 -1704
- package/css/utilities/Spacing/spacing.d.ts +840 -840
- package/css/utilities/Spacing/spacing.js +840 -840
- package/css/utilities/Spacing/spacing.mjs +840 -840
- package/css/utilities/Text/text.css +631 -650
- package/css/utilities/Text/text.d.ts +278 -284
- package/css/utilities/Text/text.js +278 -284
- package/css/utilities/Text/text.mjs +278 -284
- package/package.json +4 -4
- package/scripts/generateClassMaps.js +5 -5
- package/src/css/components/Consoles/AccessConsoles.css +8 -7
- package/src/css/components/Consoles/DesktopViewer.css +2 -3
- package/src/css/components/Consoles/SerialConsole.css +4 -4
- package/src/css/components/Consoles/VncConsole.css +3 -3
- package/src/css/components/Popper/Popper.css +1 -1
- package/src/css/components/Table/inline-edit.css +32 -28
- package/src/css/layouts/Toolbar/toolbar.css +20 -14
- package/css/components/AlertGroup/alert-group.css +0 -54
- package/css/components/AlertGroup/alert-group.d.ts +0 -9
- package/css/components/AlertGroup/alert-group.mjs +0 -8
- package/css/components/ChipGroup/chip-group.css +0 -91
- package/css/components/ChipGroup/chip-group.d.ts +0 -13
- package/css/components/ChipGroup/chip-group.js +0 -14
- package/css/components/ChipGroup/chip-group.mjs +0 -12
- package/css/components/LabelGroup/label-group.css +0 -137
- package/css/components/LabelGroup/label-group.d.ts +0 -18
- package/css/components/LabelGroup/label-group.js +0 -19
- package/css/components/LabelGroup/label-group.mjs +0 -17
- package/css/components/SearchInput/search-input.css +0 -199
- package/css/components/SearchInput/search-input.d.ts +0 -24
- package/css/components/SearchInput/search-input.js +0 -25
- package/css/components/SearchInput/search-input.mjs +0 -23
- package/css/docs/components/AppLauncher/examples/application-launcher.css +0 -25
- package/css/docs/components/ContextSelector/examples/context-selector.css +0 -7
- package/css/docs/components/FormControl/examples/FormControl.css +0 -5
- package/css/docs/components/FormControl/examples/FormControl.d.ts +0 -3
- package/css/docs/components/FormControl/examples/FormControl.js +0 -4
- package/css/docs/components/FormControl/examples/FormControl.mjs +0 -2
- package/css/docs/components/OptionsMenu/examples/options-menu.css +0 -25
- package/css/docs/components/SearchInput/examples/SearchInput.css +0 -12
- package/css/docs/components/SearchInput/examples/SearchInput.d.ts +0 -3
- package/css/docs/components/SearchInput/examples/SearchInput.js +0 -4
- package/css/docs/components/SearchInput/examples/SearchInput.mjs +0 -2
- /package/css/docs/components/AppLauncher/{examples → deprecated}/application-launcher.d.ts +0 -0
- /package/css/docs/components/AppLauncher/{examples → deprecated}/application-launcher.js +0 -0
- /package/css/docs/components/AppLauncher/{examples → deprecated}/application-launcher.mjs +0 -0
- /package/css/docs/components/ContextSelector/{examples → deprecated}/context-selector.d.ts +0 -0
- /package/css/docs/components/ContextSelector/{examples → deprecated}/context-selector.js +0 -0
- /package/css/docs/components/ContextSelector/{examples → deprecated}/context-selector.mjs +0 -0
- /package/css/docs/components/OptionsMenu/{examples → deprecated}/options-menu.d.ts +0 -0
- /package/css/docs/components/OptionsMenu/{examples → deprecated}/options-menu.js +0 -0
- /package/css/docs/components/OptionsMenu/{examples → deprecated}/options-menu.mjs +0 -0
@@ -1,1001 +1,1001 @@
|
|
1
|
-
.pf-c-page__sidebar.pf-m-light {
|
2
|
-
--pf-global--Color--100: var(--pf-global--Color--dark-100);
|
3
|
-
--pf-global--Color--200: var(--pf-global--Color--dark-200);
|
4
|
-
--pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
|
5
|
-
--pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
|
6
|
-
--pf-global--link--Color: var(--pf-global--link--Color--dark);
|
7
|
-
--pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
|
8
|
-
--pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
|
9
|
-
}
|
10
|
-
|
11
|
-
.pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__sidebar, .pf-c-page__header {
|
12
|
-
--pf-global--Color--100: var(--pf-global--Color--light-100);
|
13
|
-
--pf-global--Color--200: var(--pf-global--Color--light-200);
|
14
|
-
--pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
|
15
|
-
--pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
|
16
|
-
--pf-global--link--Color: var(--pf-global--link--Color--light);
|
17
|
-
--pf-global--link--Color--hover: var(--pf-global--link--Color--light);
|
18
|
-
--pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
|
19
|
-
}
|
20
|
-
|
21
|
-
.pf-c-page__header-tools-item, .pf-c-page__header-tools-group {
|
22
|
-
--pf-hidden-visible--hidden--Display: none;
|
23
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
|
24
|
-
display: var(--pf-hidden-visible--Display);
|
25
|
-
}
|
26
|
-
.pf-m-hidden.pf-c-page__header-tools-item, .pf-m-hidden.pf-c-page__header-tools-group {
|
27
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
|
1
|
+
.pf-v5-c-page__sidebar.pf-m-light {
|
2
|
+
--pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
|
3
|
+
--pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
|
4
|
+
--pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
|
5
|
+
--pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
|
6
|
+
--pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
|
7
|
+
--pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
|
8
|
+
--pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
|
9
|
+
}
|
10
|
+
|
11
|
+
.pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__sidebar, .pf-v5-c-page__header {
|
12
|
+
--pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
|
13
|
+
--pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
|
14
|
+
--pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
|
15
|
+
--pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
|
16
|
+
--pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
|
17
|
+
--pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
|
18
|
+
--pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
|
19
|
+
}
|
20
|
+
|
21
|
+
.pf-v5-c-page__header-tools-item, .pf-v5-c-page__header-tools-group {
|
22
|
+
--pf-v5-hidden-visible--hidden--Display: none;
|
23
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
24
|
+
display: var(--pf-v5-hidden-visible--Display);
|
25
|
+
}
|
26
|
+
.pf-m-hidden.pf-v5-c-page__header-tools-item, .pf-m-hidden.pf-v5-c-page__header-tools-group {
|
27
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
28
28
|
}
|
29
29
|
@media screen and (min-width: 576px) {
|
30
|
-
.pf-m-hidden-on-sm.pf-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-c-page__header-tools-group {
|
31
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
|
30
|
+
.pf-m-hidden-on-sm.pf-v5-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-v5-c-page__header-tools-group {
|
31
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
32
32
|
}
|
33
|
-
.pf-m-visible-on-sm.pf-c-page__header-tools-item, .pf-m-visible-on-sm.pf-c-page__header-tools-group {
|
34
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
|
33
|
+
.pf-m-visible-on-sm.pf-v5-c-page__header-tools-item, .pf-m-visible-on-sm.pf-v5-c-page__header-tools-group {
|
34
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
35
35
|
}
|
36
36
|
}
|
37
37
|
@media screen and (min-width: 768px) {
|
38
|
-
.pf-m-hidden-on-md.pf-c-page__header-tools-item, .pf-m-hidden-on-md.pf-c-page__header-tools-group {
|
39
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
|
38
|
+
.pf-m-hidden-on-md.pf-v5-c-page__header-tools-item, .pf-m-hidden-on-md.pf-v5-c-page__header-tools-group {
|
39
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
40
40
|
}
|
41
|
-
.pf-m-visible-on-md.pf-c-page__header-tools-item, .pf-m-visible-on-md.pf-c-page__header-tools-group {
|
42
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
|
41
|
+
.pf-m-visible-on-md.pf-v5-c-page__header-tools-item, .pf-m-visible-on-md.pf-v5-c-page__header-tools-group {
|
42
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
43
43
|
}
|
44
44
|
}
|
45
45
|
@media screen and (min-width: 992px) {
|
46
|
-
.pf-m-hidden-on-lg.pf-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-c-page__header-tools-group {
|
47
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
|
46
|
+
.pf-m-hidden-on-lg.pf-v5-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-v5-c-page__header-tools-group {
|
47
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
48
48
|
}
|
49
|
-
.pf-m-visible-on-lg.pf-c-page__header-tools-item, .pf-m-visible-on-lg.pf-c-page__header-tools-group {
|
50
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
|
49
|
+
.pf-m-visible-on-lg.pf-v5-c-page__header-tools-item, .pf-m-visible-on-lg.pf-v5-c-page__header-tools-group {
|
50
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
51
51
|
}
|
52
52
|
}
|
53
53
|
@media screen and (min-width: 1200px) {
|
54
|
-
.pf-m-hidden-on-xl.pf-c-page__header-tools-item, .pf-m-hidden-on-xl.pf-c-page__header-tools-group {
|
55
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
|
54
|
+
.pf-m-hidden-on-xl.pf-v5-c-page__header-tools-item, .pf-m-hidden-on-xl.pf-v5-c-page__header-tools-group {
|
55
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
56
56
|
}
|
57
|
-
.pf-m-visible-on-xl.pf-c-page__header-tools-item, .pf-m-visible-on-xl.pf-c-page__header-tools-group {
|
58
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
|
57
|
+
.pf-m-visible-on-xl.pf-v5-c-page__header-tools-item, .pf-m-visible-on-xl.pf-v5-c-page__header-tools-group {
|
58
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
59
59
|
}
|
60
60
|
}
|
61
61
|
@media screen and (min-width: 1450px) {
|
62
|
-
.pf-m-hidden-on-2xl.pf-c-page__header-tools-item, .pf-m-hidden-on-2xl.pf-c-page__header-tools-group {
|
63
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
|
64
|
-
}
|
65
|
-
.pf-m-visible-on-2xl.pf-c-page__header-tools-item, .pf-m-visible-on-2xl.pf-c-page__header-tools-group {
|
66
|
-
--pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
|
67
|
-
}
|
68
|
-
}
|
69
|
-
|
70
|
-
|
71
|
-
--pf-c-page--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
|
72
|
-
--pf-c-page--inset: var(--pf-global--spacer--md);
|
73
|
-
--pf-c-page--xl--inset: var(--pf-global--spacer--lg);
|
74
|
-
--pf-c-page__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
|
75
|
-
--pf-c-page__header--ZIndex: var(--pf-global--ZIndex--md);
|
76
|
-
--pf-c-page__header--MinHeight: 4.75rem;
|
77
|
-
--pf-c-page__header-brand--PaddingLeft: var(--pf-global--spacer--md);
|
78
|
-
--pf-c-page__header-brand--xl--PaddingRight: var(--pf-global--spacer--xl);
|
79
|
-
--pf-c-page__header-brand--xl--PaddingLeft: var(--pf-global--spacer--lg);
|
80
|
-
--pf-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-global--spacer--sm);
|
81
|
-
--pf-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-global--spacer--sm);
|
82
|
-
--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-global--spacer--sm);
|
83
|
-
--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-global--spacer--sm);
|
84
|
-
--pf-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-global--spacer--md);
|
85
|
-
--pf-c-page__header-sidebar-toggle__c-button--MarginLeft: calc(var(--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft) * -1);
|
86
|
-
--pf-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-global--FontSize--2xl);
|
87
|
-
--pf-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
|
88
|
-
--pf-c-page__header-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
|
89
|
-
--pf-c-page__header-nav--xl--BackgroundColor: transparent;
|
90
|
-
--pf-c-page__header-nav--xl--PaddingRight: var(--pf-global--spacer--xl);
|
91
|
-
--pf-c-page__header-nav--xl--PaddingLeft: var(--pf-global--spacer--xl);
|
92
|
-
--pf-c-page__header-tools--MarginRight: var(--pf-global--spacer--md);
|
93
|
-
--pf-c-page__header-tools--xl--MarginRight: var(--pf-global--spacer--lg);
|
94
|
-
--pf-c-page__header-tools--c-avatar--MarginLeft: var(--pf-global--spacer--md);
|
95
|
-
--pf-c-page__header-tools-group--MarginLeft: var(--pf-global--spacer--xl);
|
96
|
-
--pf-c-page__header-tools-group--Display: flex;
|
97
|
-
--pf-c-page__header-tools-item--Display: block;
|
98
|
-
--pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
|
99
|
-
--pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--200);
|
100
|
-
--pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--200);
|
101
|
-
--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--200);
|
102
|
-
--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--200);
|
103
|
-
--pf-c-page__header-tools--c-button--m-selected--before--Width: auto;
|
104
|
-
--pf-c-page__header-tools--c-button--m-selected--before--Height: auto;
|
105
|
-
--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
|
106
|
-
--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius: var(--pf-global--BorderRadius--sm);
|
107
|
-
--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent;
|
108
|
-
--pf-c-page__sidebar--ZIndex: var(--pf-global--ZIndex--sm);
|
109
|
-
--pf-c-page__sidebar--Width: 18.125rem;
|
110
|
-
--pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
|
111
|
-
--pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
112
|
-
--pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
|
113
|
-
--pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
|
114
|
-
--pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
|
115
|
-
--pf-c-page__sidebar--Transition: var(--pf-global--Transition);
|
116
|
-
--pf-c-page__sidebar--TranslateX: -100%;
|
117
|
-
--pf-c-page__sidebar--TranslateZ: 0;
|
118
|
-
--pf-c-page__sidebar--m-expanded--TranslateX: 0;
|
119
|
-
--pf-c-page__sidebar--xl--TranslateX: 0;
|
120
|
-
--pf-c-page__sidebar-body--PaddingRight: 0;
|
121
|
-
--pf-c-page__sidebar-body--PaddingLeft: 0;
|
122
|
-
--pf-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-c-page--inset);
|
123
|
-
--pf-c-page__sidebar-body--m-page-insets--PaddingLeft: var(--pf-c-page--inset);
|
124
|
-
--pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
|
125
|
-
--pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
|
126
|
-
--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
|
127
|
-
--pf-c-page__main--ZIndex: var(--pf-global--ZIndex--xs);
|
128
|
-
--pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--md);
|
129
|
-
--pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--md);
|
130
|
-
--pf-c-page__main-section--PaddingBottom: var(--pf-global--spacer--md);
|
131
|
-
--pf-c-page__main-section--PaddingLeft: var(--pf-global--spacer--md);
|
132
|
-
--pf-c-page__main-section--xl--PaddingTop: var(--pf-global--spacer--lg);
|
133
|
-
--pf-c-page__main-section--xl--PaddingRight: var(--pf-global--spacer--lg);
|
134
|
-
--pf-c-page__main-section--xl--PaddingBottom: var(--pf-global--spacer--lg);
|
135
|
-
--pf-c-page__main-section--xl--PaddingLeft: var(--pf-global--spacer--lg);
|
136
|
-
--pf-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-global--spacer--md);
|
137
|
-
--pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
|
138
|
-
--pf-c-page__main-section--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
139
|
-
--pf-c-page__main-section--m-light-100--BackgroundColor: var(--pf-global--BackgroundColor--150);
|
140
|
-
--pf-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
|
141
|
-
--pf-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
|
142
|
-
--pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-global--spacer--md);
|
143
|
-
--pf-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-global--spacer--md);
|
144
|
-
--pf-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-c-page__sidebar--Width));
|
145
|
-
--pf-c-page--section--m-sticky-top--ZIndex: var(--pf-global--ZIndex--md);
|
146
|
-
--pf-c-page--section--m-sticky-top--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
|
147
|
-
--pf-c-page--section--m-sticky-bottom--ZIndex: var(--pf-global--ZIndex--md);
|
148
|
-
--pf-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-global--BoxShadow--sm-top);
|
149
|
-
--pf-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
|
150
|
-
--pf-c-page--section--m-shadow-bottom--ZIndex: var(--pf-global--ZIndex--xs);
|
151
|
-
--pf-c-page--section--m-shadow-top--BoxShadow: var(--pf-global--BoxShadow--sm-top);
|
152
|
-
--pf-c-page--section--m-shadow-top--ZIndex: var(--pf-global--ZIndex--xs);
|
153
|
-
--pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
154
|
-
--pf-c-page__main-nav--PaddingTop: var(--pf-global--spacer--md);
|
155
|
-
--pf-c-page__main-nav--PaddingRight: 0;
|
156
|
-
--pf-c-page__main-nav--PaddingLeft: 0;
|
157
|
-
--pf-c-page__main-nav--m-sticky-top--PaddingBottom: var(--pf-global--spacer--md);
|
158
|
-
--pf-c-page__main-nav--xl--PaddingRight: var(--pf-global--spacer--sm);
|
159
|
-
--pf-c-page__main-nav--xl--PaddingLeft: var(--pf-global--spacer--sm);
|
160
|
-
--pf-c-page__main-subnav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
|
161
|
-
--pf-c-page__main-subnav--BorderTopWidth: var(--pf-global--BorderWidth--sm);
|
162
|
-
--pf-c-page__main-subnav--BorderTopColor: var(--pf-global--palette--black-800);
|
163
|
-
--pf-c-page__main-subnav--BorderLeftWidth: 0;
|
164
|
-
--pf-c-page__main-subnav--BorderLeftColor: var(--pf-global--palette--black-800);
|
165
|
-
--pf-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
|
166
|
-
--pf-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
|
167
|
-
--pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
168
|
-
--pf-c-page__main-breadcrumb--PaddingTop: var(--pf-global--spacer--md);
|
169
|
-
--pf-c-page__main-breadcrumb--PaddingRight: var(--pf-global--spacer--md);
|
170
|
-
--pf-c-page__main-breadcrumb--PaddingBottom: 0;
|
171
|
-
--pf-c-page__main-breadcrumb--PaddingLeft: var(--pf-global--spacer--md);
|
172
|
-
--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom: var(--pf-global--spacer--md);
|
173
|
-
--pf-c-page__main-breadcrumb--xl--PaddingRight: var(--pf-global--spacer--lg);
|
174
|
-
--pf-c-page__main-breadcrumb--xl--PaddingLeft: var(--pf-global--spacer--lg);
|
175
|
-
--pf-c-page__main-tabs--PaddingTop: 0;
|
176
|
-
--pf-c-page__main-tabs--PaddingRight: 0;
|
177
|
-
--pf-c-page__main-tabs--PaddingBottom: 0;
|
178
|
-
--pf-c-page__main-tabs--PaddingLeft: 0;
|
179
|
-
--pf-c-page__main-tabs--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
180
|
-
--pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
181
|
-
--pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
|
182
|
-
--pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
|
183
|
-
--pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
184
|
-
display: grid;
|
185
|
-
grid-template-areas: "header" "main";
|
186
|
-
grid-template-rows: max-content 1fr;
|
187
|
-
grid-template-columns: 1fr;
|
188
|
-
height: 100%;
|
189
|
-
background-color: var(--pf-c-page--BackgroundColor);
|
62
|
+
.pf-m-hidden-on-2xl.pf-v5-c-page__header-tools-item, .pf-m-hidden-on-2xl.pf-v5-c-page__header-tools-group {
|
63
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
64
|
+
}
|
65
|
+
.pf-m-visible-on-2xl.pf-v5-c-page__header-tools-item, .pf-m-visible-on-2xl.pf-v5-c-page__header-tools-group {
|
66
|
+
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
:root {
|
71
|
+
--pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
|
72
|
+
--pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
|
73
|
+
--pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
|
74
|
+
--pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
|
75
|
+
--pf-v5-c-page__header--ZIndex: var(--pf-v5-global--ZIndex--md);
|
76
|
+
--pf-v5-c-page__header--MinHeight: 4.75rem;
|
77
|
+
--pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-global--spacer--md);
|
78
|
+
--pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
|
79
|
+
--pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
80
|
+
--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-v5-global--spacer--sm);
|
81
|
+
--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
|
82
|
+
--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-v5-global--spacer--sm);
|
83
|
+
--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
|
84
|
+
--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-v5-global--spacer--md);
|
85
|
+
--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft: calc(var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft) * -1);
|
86
|
+
--pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
|
87
|
+
--pf-v5-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
|
88
|
+
--pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
|
89
|
+
--pf-v5-c-page__header-nav--xl--BackgroundColor: transparent;
|
90
|
+
--pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
|
91
|
+
--pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--xl);
|
92
|
+
--pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-global--spacer--md);
|
93
|
+
--pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-v5-global--spacer--lg);
|
94
|
+
--pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-v5-global--spacer--md);
|
95
|
+
--pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-v5-global--spacer--xl);
|
96
|
+
--pf-v5-c-page__header-tools-group--Display: flex;
|
97
|
+
--pf-v5-c-page__header-tools-item--Display: block;
|
98
|
+
--pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
99
|
+
--pf-v5-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
|
100
|
+
--pf-v5-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
|
101
|
+
--pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
|
102
|
+
--pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
|
103
|
+
--pf-v5-c-page__header-tools--c-button--m-selected--before--Width: auto;
|
104
|
+
--pf-v5-c-page__header-tools--c-button--m-selected--before--Height: auto;
|
105
|
+
--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
106
|
+
--pf-v5-c-page__header-tools--c-button--m-selected--before--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
|
107
|
+
--pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent;
|
108
|
+
--pf-v5-c-page__sidebar--ZIndex: var(--pf-v5-global--ZIndex--sm);
|
109
|
+
--pf-v5-c-page__sidebar--Width: 18.125rem;
|
110
|
+
--pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
|
111
|
+
--pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
|
112
|
+
--pf-v5-c-page__sidebar--m-light--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
|
113
|
+
--pf-v5-c-page__sidebar--m-light--BorderRightColor: var(--pf-v5-global--BorderColor--100);
|
114
|
+
--pf-v5-c-page__sidebar--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
|
115
|
+
--pf-v5-c-page__sidebar--Transition: var(--pf-v5-global--Transition);
|
116
|
+
--pf-v5-c-page__sidebar--TranslateX: -100%;
|
117
|
+
--pf-v5-c-page__sidebar--TranslateZ: 0;
|
118
|
+
--pf-v5-c-page__sidebar--m-expanded--TranslateX: 0;
|
119
|
+
--pf-v5-c-page__sidebar--xl--TranslateX: 0;
|
120
|
+
--pf-v5-c-page__sidebar-body--PaddingRight: 0;
|
121
|
+
--pf-v5-c-page__sidebar-body--PaddingLeft: 0;
|
122
|
+
--pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-v5-c-page--inset);
|
123
|
+
--pf-v5-c-page__sidebar-body--m-page-insets--PaddingLeft: var(--pf-v5-c-page--inset);
|
124
|
+
--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
125
|
+
--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
|
126
|
+
--pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
|
127
|
+
--pf-v5-c-page__main--ZIndex: var(--pf-v5-global--ZIndex--xs);
|
128
|
+
--pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--md);
|
129
|
+
--pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--md);
|
130
|
+
--pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--md);
|
131
|
+
--pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--md);
|
132
|
+
--pf-v5-c-page__main-section--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
|
133
|
+
--pf-v5-c-page__main-section--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
|
134
|
+
--pf-v5-c-page__main-section--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
|
135
|
+
--pf-v5-c-page__main-section--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
136
|
+
--pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-v5-global--spacer--md);
|
137
|
+
--pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
|
138
|
+
--pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
|
139
|
+
--pf-v5-c-page__main-section--m-light-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
|
140
|
+
--pf-v5-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
|
141
|
+
--pf-v5-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
|
142
|
+
--pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
|
143
|
+
--pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
|
144
|
+
--pf-v5-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v5-c-page__sidebar--Width));
|
145
|
+
--pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
|
146
|
+
--pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
|
147
|
+
--pf-v5-c-page--section--m-sticky-bottom--ZIndex: var(--pf-v5-global--ZIndex--md);
|
148
|
+
--pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
|
149
|
+
--pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
|
150
|
+
--pf-v5-c-page--section--m-shadow-bottom--ZIndex: var(--pf-v5-global--ZIndex--xs);
|
151
|
+
--pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
|
152
|
+
--pf-v5-c-page--section--m-shadow-top--ZIndex: var(--pf-v5-global--ZIndex--xs);
|
153
|
+
--pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
|
154
|
+
--pf-v5-c-page__main-nav--PaddingTop: var(--pf-v5-global--spacer--md);
|
155
|
+
--pf-v5-c-page__main-nav--PaddingRight: 0;
|
156
|
+
--pf-v5-c-page__main-nav--PaddingLeft: 0;
|
157
|
+
--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
|
158
|
+
--pf-v5-c-page__main-nav--xl--PaddingRight: var(--pf-v5-global--spacer--sm);
|
159
|
+
--pf-v5-c-page__main-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--sm);
|
160
|
+
--pf-v5-c-page__main-subnav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
|
161
|
+
--pf-v5-c-page__main-subnav--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
|
162
|
+
--pf-v5-c-page__main-subnav--BorderTopColor: var(--pf-v5-global--palette--black-800);
|
163
|
+
--pf-v5-c-page__main-subnav--BorderLeftWidth: 0;
|
164
|
+
--pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-v5-global--palette--black-800);
|
165
|
+
--pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
|
166
|
+
--pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
|
167
|
+
--pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
|
168
|
+
--pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
|
169
|
+
--pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
|
170
|
+
--pf-v5-c-page__main-breadcrumb--PaddingBottom: 0;
|
171
|
+
--pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
|
172
|
+
--pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
|
173
|
+
--pf-v5-c-page__main-breadcrumb--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
|
174
|
+
--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
175
|
+
--pf-v5-c-page__main-tabs--PaddingTop: 0;
|
176
|
+
--pf-v5-c-page__main-tabs--PaddingRight: 0;
|
177
|
+
--pf-v5-c-page__main-tabs--PaddingBottom: 0;
|
178
|
+
--pf-v5-c-page__main-tabs--PaddingLeft: 0;
|
179
|
+
--pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
|
180
|
+
--pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
|
181
|
+
--pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
|
182
|
+
--pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
|
183
|
+
--pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
|
190
184
|
}
|
191
185
|
@media (min-width: 1200px) {
|
192
|
-
|
193
|
-
--pf-c-page__header-brand--PaddingLeft: var(--pf-c-page__header-brand--xl--PaddingLeft);
|
194
|
-
--pf-c-page--inset: var(--pf-c-page--xl--inset);
|
186
|
+
:root {
|
187
|
+
--pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
|
188
|
+
--pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
|
195
189
|
}
|
196
190
|
}
|
197
191
|
@media screen and (min-width: 1200px) {
|
198
|
-
|
199
|
-
--pf-c-page__header-nav--BackgroundColor: var(--pf-c-page__header-nav--xl--BackgroundColor);
|
200
|
-
--pf-c-page__header-nav--PaddingRight: var(--pf-c-page__header-nav--xl--PaddingRight);
|
201
|
-
--pf-c-page__header-nav--PaddingLeft: var(--pf-c-page__header-nav--xl--PaddingLeft);
|
192
|
+
:root {
|
193
|
+
--pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
|
194
|
+
--pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
|
195
|
+
--pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
|
202
196
|
}
|
203
197
|
}
|
204
198
|
@media screen and (min-width: 1200px) {
|
205
|
-
|
206
|
-
--pf-c-page__header-tools--MarginRight: var(--pf-c-page__header-tools--xl--MarginRight);
|
199
|
+
:root {
|
200
|
+
--pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
|
207
201
|
}
|
208
202
|
}
|
209
203
|
@media screen and (min-width: 1200px) {
|
210
|
-
|
211
|
-
--pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--xl--TranslateX);
|
204
|
+
:root {
|
205
|
+
--pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
|
212
206
|
}
|
213
207
|
}
|
214
208
|
@media screen and (min-width: 1200px) {
|
215
|
-
|
216
|
-
--pf-c-page__main-section--PaddingTop: var(--pf-c-page__main-section--xl--PaddingTop);
|
217
|
-
--pf-c-page__main-section--PaddingRight: var(--pf-c-page__main-section--xl--PaddingRight);
|
218
|
-
--pf-c-page__main-section--PaddingBottom: var(--pf-c-page__main-section--xl--PaddingBottom);
|
219
|
-
--pf-c-page__main-section--PaddingLeft: var(--pf-c-page__main-section--xl--PaddingLeft);
|
209
|
+
:root {
|
210
|
+
--pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
|
211
|
+
--pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
|
212
|
+
--pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
|
213
|
+
--pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-c-page__main-section--xl--PaddingLeft);
|
220
214
|
}
|
221
215
|
}
|
222
216
|
@media screen and (min-width: 1200px) {
|
223
|
-
|
224
|
-
--pf-c-page__main-nav--PaddingRight: var(--pf-c-page__main-nav--xl--PaddingRight);
|
225
|
-
--pf-c-page__main-nav--PaddingLeft: var(--pf-c-page__main-nav--xl--PaddingLeft);
|
217
|
+
:root {
|
218
|
+
--pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
|
219
|
+
--pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
|
226
220
|
}
|
227
221
|
}
|
228
222
|
@media screen and (min-width: 1200px) {
|
229
|
-
|
230
|
-
--pf-c-page__main-breadcrumb--PaddingRight: var(--pf-c-page__main-breadcrumb--xl--PaddingRight);
|
231
|
-
--pf-c-page__main-breadcrumb--PaddingLeft: var(--pf-c-page__main-breadcrumb--xl--PaddingLeft);
|
223
|
+
:root {
|
224
|
+
--pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
|
225
|
+
--pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
|
232
226
|
}
|
233
227
|
}
|
228
|
+
|
229
|
+
.pf-v5-c-page {
|
230
|
+
display: grid;
|
231
|
+
grid-template-areas: "header" "main";
|
232
|
+
grid-template-rows: max-content 1fr;
|
233
|
+
grid-template-columns: 1fr;
|
234
|
+
height: 100vh;
|
235
|
+
height: 100dvh;
|
236
|
+
max-height: 100%;
|
237
|
+
background-color: var(--pf-v5-c-page--BackgroundColor);
|
238
|
+
}
|
234
239
|
@media (min-width: 1200px) {
|
235
|
-
.pf-c-page {
|
240
|
+
.pf-v5-c-page {
|
236
241
|
grid-template-areas: "header header" "nav main";
|
237
242
|
grid-template-columns: max-content 1fr;
|
238
243
|
}
|
239
244
|
}
|
240
|
-
.pf-c-page.pf-m-full-height {
|
241
|
-
height: 100vh;
|
242
|
-
height: 100dvh;
|
243
|
-
max-height: 100%;
|
244
|
-
}
|
245
245
|
|
246
|
-
.pf-c-page__header,
|
247
|
-
.pf-c-page > .pf-c-masthead {
|
248
|
-
z-index: var(--pf-c-page__header--ZIndex);
|
246
|
+
.pf-v5-c-page__header,
|
247
|
+
.pf-v5-c-page > .pf-v5-c-masthead {
|
248
|
+
z-index: var(--pf-v5-c-page__header--ZIndex);
|
249
249
|
grid-area: header;
|
250
250
|
}
|
251
251
|
|
252
|
-
.pf-c-page__header {
|
253
|
-
color: var(--pf-global--Color--100);
|
252
|
+
.pf-v5-c-page__header {
|
253
|
+
color: var(--pf-v5-global--Color--100);
|
254
254
|
display: grid;
|
255
255
|
grid-template-columns: auto auto;
|
256
256
|
align-items: center;
|
257
257
|
min-width: 0;
|
258
|
-
min-height: var(--pf-c-page__header--MinHeight);
|
259
|
-
background-color: var(--pf-c-page__header--BackgroundColor);
|
258
|
+
min-height: var(--pf-v5-c-page__header--MinHeight);
|
259
|
+
background-color: var(--pf-v5-c-page__header--BackgroundColor);
|
260
260
|
}
|
261
|
-
.pf-c-page__header > * {
|
261
|
+
.pf-v5-c-page__header > * {
|
262
262
|
display: flex;
|
263
263
|
align-items: center;
|
264
264
|
}
|
265
265
|
@media screen and (min-width: 992px) {
|
266
|
-
.pf-c-page__header {
|
266
|
+
.pf-v5-c-page__header {
|
267
267
|
grid-template-columns: auto 1fr auto;
|
268
268
|
}
|
269
269
|
}
|
270
|
-
.pf-c-page__header .pf-c-masthead {
|
270
|
+
.pf-v5-c-page__header .pf-v5-c-masthead {
|
271
271
|
grid-column: span 2;
|
272
272
|
align-self: stretch;
|
273
273
|
}
|
274
274
|
|
275
|
-
.pf-c-page__header-brand {
|
275
|
+
.pf-v5-c-page__header-brand {
|
276
276
|
grid-column: 1/2;
|
277
|
-
padding-left: var(--pf-c-page__header-brand--PaddingLeft);
|
277
|
+
padding-left: var(--pf-v5-c-page__header-brand--PaddingLeft);
|
278
278
|
}
|
279
279
|
@media (min-width: 1200px) {
|
280
|
-
.pf-c-page__header-brand {
|
281
|
-
padding-right: var(--pf-c-page__header-brand--xl--PaddingRight);
|
280
|
+
.pf-v5-c-page__header-brand {
|
281
|
+
padding-right: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
|
282
282
|
}
|
283
283
|
}
|
284
284
|
|
285
|
-
.pf-c-page__header-brand-link {
|
285
|
+
.pf-v5-c-page__header-brand-link {
|
286
286
|
display: flex;
|
287
287
|
flex: 1;
|
288
288
|
align-items: center;
|
289
289
|
}
|
290
|
-
.pf-c-page__header-brand-link .pf-c-brand {
|
291
|
-
max-height: var(--pf-c-page__header-brand-link--c-brand--MaxHeight);
|
290
|
+
.pf-v5-c-page__header-brand-link .pf-v5-c-brand {
|
291
|
+
max-height: var(--pf-v5-c-page__header-brand-link--c-brand--MaxHeight);
|
292
292
|
}
|
293
293
|
|
294
|
-
.pf-c-page__header-brand-toggle .pf-c-button {
|
295
|
-
padding: var(--pf-c-page__header-sidebar-toggle__c-button--PaddingTop) var(--pf-c-page__header-sidebar-toggle__c-button--PaddingRight) var(--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom) var(--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft);
|
296
|
-
margin-right: var(--pf-c-page__header-sidebar-toggle__c-button--MarginRight);
|
297
|
-
margin-left: var(--pf-c-page__header-sidebar-toggle__c-button--MarginLeft);
|
298
|
-
font-size: var(--pf-c-page__header-sidebar-toggle__c-button--FontSize);
|
294
|
+
.pf-v5-c-page__header-brand-toggle .pf-v5-c-button {
|
295
|
+
padding: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft);
|
296
|
+
margin-right: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight);
|
297
|
+
margin-left: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft);
|
298
|
+
font-size: var(--pf-v5-c-page__header-sidebar-toggle__c-button--FontSize);
|
299
299
|
line-height: 1;
|
300
300
|
}
|
301
301
|
|
302
|
-
.pf-c-page__header-nav {
|
302
|
+
.pf-v5-c-page__header-nav {
|
303
303
|
grid-row: 2/3;
|
304
304
|
grid-column: 1/-1;
|
305
305
|
align-self: stretch;
|
306
306
|
min-width: 0;
|
307
|
-
padding-right: var(--pf-c-page__header-nav--PaddingRight);
|
308
|
-
padding-left: var(--pf-c-page__header-nav--PaddingLeft);
|
309
|
-
background-color: var(--pf-c-page__header-nav--BackgroundColor);
|
307
|
+
padding-right: var(--pf-v5-c-page__header-nav--PaddingRight);
|
308
|
+
padding-left: var(--pf-v5-c-page__header-nav--PaddingLeft);
|
309
|
+
background-color: var(--pf-v5-c-page__header-nav--BackgroundColor);
|
310
310
|
}
|
311
311
|
@media screen and (min-width: 1200px) {
|
312
|
-
.pf-c-page__header-nav {
|
312
|
+
.pf-v5-c-page__header-nav {
|
313
313
|
grid-row: 1/2;
|
314
314
|
grid-column: 2/3;
|
315
315
|
}
|
316
316
|
}
|
317
|
-
.pf-c-page__header-nav .pf-c-nav {
|
317
|
+
.pf-v5-c-page__header-nav .pf-v5-c-nav {
|
318
318
|
align-self: stretch;
|
319
319
|
}
|
320
320
|
|
321
|
-
.pf-c-page__header-tools {
|
321
|
+
.pf-v5-c-page__header-tools {
|
322
322
|
grid-column: 2/3;
|
323
|
-
margin-right: var(--pf-c-page__header-tools--MarginRight);
|
323
|
+
margin-right: var(--pf-v5-c-page__header-tools--MarginRight);
|
324
324
|
margin-left: auto;
|
325
325
|
}
|
326
|
-
.pf-c-page__header-tools .pf-c-avatar {
|
327
|
-
margin-left: var(--pf-c-page__header-tools--c-avatar--MarginLeft);
|
326
|
+
.pf-v5-c-page__header-tools .pf-v5-c-avatar {
|
327
|
+
margin-left: var(--pf-v5-c-page__header-tools--c-avatar--MarginLeft);
|
328
328
|
}
|
329
329
|
@media screen and (min-width: 992px) {
|
330
|
-
.pf-c-page__header-tools {
|
330
|
+
.pf-v5-c-page__header-tools {
|
331
331
|
grid-column: 3/4;
|
332
332
|
}
|
333
333
|
}
|
334
334
|
|
335
|
-
.pf-c-page__header-tools-group {
|
336
|
-
--pf-hidden-visible--visible--Display: var(--pf-c-page__header-tools-group--Display);
|
335
|
+
.pf-v5-c-page__header-tools-group {
|
336
|
+
--pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-page__header-tools-group--Display);
|
337
337
|
align-items: center;
|
338
338
|
}
|
339
|
-
.pf-c-page__header-tools-group + .pf-c-page__header-tools-group {
|
340
|
-
margin-left: var(--pf-c-page__header-tools-group--MarginLeft);
|
339
|
+
.pf-v5-c-page__header-tools-group + .pf-v5-c-page__header-tools-group {
|
340
|
+
margin-left: var(--pf-v5-c-page__header-tools-group--MarginLeft);
|
341
341
|
}
|
342
342
|
|
343
|
-
.pf-c-page__header-tools-item {
|
344
|
-
--pf-hidden-visible--visible--Display: var(--pf-c-page__header-tools-item--Display);
|
343
|
+
.pf-v5-c-page__header-tools-item {
|
344
|
+
--pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-page__header-tools-item--Display);
|
345
345
|
}
|
346
|
-
.pf-c-page__header-tools-item .pf-c-notification-badge.pf-m-read:hover {
|
347
|
-
--pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor);
|
346
|
+
.pf-v5-c-page__header-tools-item .pf-v5-c-notification-badge.pf-m-read:hover {
|
347
|
+
--pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor);
|
348
348
|
}
|
349
|
-
.pf-c-page__header-tools-item.pf-m-selected .pf-c-button {
|
350
|
-
background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
|
351
|
-
border-radius: var(--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius);
|
349
|
+
.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
|
350
|
+
background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
|
351
|
+
border-radius: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BorderRadius);
|
352
352
|
}
|
353
|
-
.pf-c-page__header-tools-item.pf-m-selected .pf-c-button::before {
|
353
|
+
.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button::before {
|
354
354
|
position: absolute;
|
355
355
|
top: 0;
|
356
356
|
right: 0;
|
357
357
|
bottom: 0;
|
358
358
|
left: 0;
|
359
|
-
width: var(--pf-c-page__header-tools--c-button--m-selected--before--Width);
|
360
|
-
height: var(--pf-c-page__header-tools--c-button--m-selected--before--Height);
|
359
|
+
width: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Width);
|
360
|
+
height: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Height);
|
361
361
|
content: "";
|
362
362
|
}
|
363
|
-
.pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread {
|
364
|
-
--pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor);
|
363
|
+
.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-unread {
|
364
|
+
--pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor);
|
365
365
|
}
|
366
|
-
.pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread::after {
|
367
|
-
border-color: var(--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor);
|
366
|
+
.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-unread::after {
|
367
|
+
border-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor);
|
368
368
|
}
|
369
|
-
.pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-attention {
|
370
|
-
--pf-c-notification-badge--after--BackgroundColor: var(--pf-global--danger-color--200);
|
369
|
+
.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-attention {
|
370
|
+
--pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
|
371
371
|
}
|
372
|
-
.pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-unread {
|
373
|
-
--pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor);
|
372
|
+
.pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-unread {
|
373
|
+
--pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor);
|
374
374
|
}
|
375
|
-
.pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-attention {
|
376
|
-
--pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor);
|
375
|
+
.pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-attention {
|
376
|
+
--pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor);
|
377
377
|
}
|
378
378
|
|
379
|
-
.pf-c-page__sidebar {
|
380
|
-
color: var(--pf-global--Color--100);
|
381
|
-
z-index: var(--pf-c-page__sidebar--ZIndex);
|
379
|
+
.pf-v5-c-page__sidebar {
|
380
|
+
color: var(--pf-v5-global--Color--100);
|
381
|
+
z-index: var(--pf-v5-c-page__sidebar--ZIndex);
|
382
382
|
display: flex;
|
383
383
|
flex-direction: column;
|
384
384
|
grid-area: nav;
|
385
385
|
grid-row-start: 2;
|
386
386
|
grid-column-start: 1;
|
387
|
-
width: var(--pf-c-page__sidebar--Width);
|
387
|
+
width: var(--pf-v5-c-page__sidebar--Width);
|
388
388
|
overflow-x: hidden;
|
389
389
|
overflow-y: auto;
|
390
390
|
-webkit-overflow-scrolling: touch;
|
391
|
-
background-color: var(--pf-c-page__sidebar--BackgroundColor);
|
392
|
-
transition: var(--pf-c-page__sidebar--Transition);
|
393
|
-
transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
|
391
|
+
background-color: var(--pf-v5-c-page__sidebar--BackgroundColor);
|
392
|
+
transition: var(--pf-v5-c-page__sidebar--Transition);
|
393
|
+
transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
|
394
394
|
}
|
395
|
-
.pf-c-page__sidebar.pf-m-expanded {
|
396
|
-
--pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
|
397
|
-
box-shadow: var(--pf-c-page__sidebar--BoxShadow);
|
395
|
+
.pf-v5-c-page__sidebar.pf-m-expanded {
|
396
|
+
--pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
|
397
|
+
box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
|
398
398
|
}
|
399
399
|
@media screen and (min-width: 1200px) {
|
400
|
-
.pf-c-page__sidebar.pf-m-expanded {
|
401
|
-
--pf-c-page__sidebar--BoxShadow: none;
|
400
|
+
.pf-v5-c-page__sidebar.pf-m-expanded {
|
401
|
+
--pf-v5-c-page__sidebar--BoxShadow: none;
|
402
402
|
}
|
403
403
|
}
|
404
|
-
.pf-c-page__sidebar.pf-m-collapsed {
|
404
|
+
.pf-v5-c-page__sidebar.pf-m-collapsed {
|
405
405
|
max-width: 0;
|
406
406
|
overflow: hidden;
|
407
407
|
}
|
408
|
-
.pf-c-page__sidebar.pf-m-light {
|
409
|
-
color: var(--pf-global--Color--100);
|
410
|
-
--pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
|
411
|
-
border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
|
408
|
+
.pf-v5-c-page__sidebar.pf-m-light {
|
409
|
+
color: var(--pf-v5-global--Color--100);
|
410
|
+
--pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-c-page__sidebar--m-light--BackgroundColor);
|
411
|
+
border-right: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
|
412
412
|
}
|
413
413
|
|
414
|
-
.pf-c-page__sidebar-body {
|
415
|
-
padding-right: var(--pf-c-page__sidebar-body--PaddingRight);
|
416
|
-
padding-left: var(--pf-c-page__sidebar-body--PaddingLeft);
|
414
|
+
.pf-v5-c-page__sidebar-body {
|
415
|
+
padding-right: var(--pf-v5-c-page__sidebar-body--PaddingRight);
|
416
|
+
padding-left: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
|
417
417
|
}
|
418
|
-
.pf-c-page__sidebar-body:last-child {
|
418
|
+
.pf-v5-c-page__sidebar-body:last-child {
|
419
419
|
flex-grow: 1;
|
420
420
|
}
|
421
|
-
.pf-c-page__sidebar-body.pf-m-menu {
|
422
|
-
background-color: var(--pf-global--palette--black-900);
|
423
|
-
border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
|
421
|
+
.pf-v5-c-page__sidebar-body.pf-m-menu {
|
422
|
+
background-color: var(--pf-v5-global--palette--black-900);
|
423
|
+
border-top: var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor);
|
424
424
|
}
|
425
|
-
.pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu {
|
426
|
-
--pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
|
425
|
+
.pf-v5-c-page__sidebar-body.pf-m-menu + .pf-v5-c-page__sidebar-body.pf-m-menu {
|
426
|
+
--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
|
427
427
|
}
|
428
|
-
.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector {
|
429
|
-
--pf-c-context-selector__toggle--BorderTopColor: transparent;
|
430
|
-
--pf-c-context-selector__toggle--BorderRightColor: transparent;
|
431
|
-
--pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
|
432
|
-
--pf-c-context-selector__toggle--BorderLeftColor: transparent;
|
433
|
-
--pf-c-context-selector__menu--Top: 100%;
|
434
|
-
color: var(--pf-global--Color--100);
|
428
|
+
.pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector {
|
429
|
+
--pf-v5-c-context-selector__toggle--BorderTopColor: transparent;
|
430
|
+
--pf-v5-c-context-selector__toggle--BorderRightColor: transparent;
|
431
|
+
--pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
|
432
|
+
--pf-v5-c-context-selector__toggle--BorderLeftColor: transparent;
|
433
|
+
--pf-v5-c-context-selector__menu--Top: 100%;
|
434
|
+
color: var(--pf-v5-global--Color--100);
|
435
435
|
width: 100%;
|
436
436
|
}
|
437
|
-
.pf-c-page__sidebar-body.pf-m-page-insets {
|
438
|
-
--pf-c-page__sidebar-body--PaddingRight: var(--pf-c-page__sidebar-body--m-page-insets--PaddingRight);
|
439
|
-
--pf-c-page__sidebar-body--PaddingLeft: var(--pf-c-page__sidebar-body--m-page-insets--PaddingLeft);
|
437
|
+
.pf-v5-c-page__sidebar-body.pf-m-page-insets {
|
438
|
+
--pf-v5-c-page__sidebar-body--PaddingRight: var(--pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight);
|
439
|
+
--pf-v5-c-page__sidebar-body--PaddingLeft: var(--pf-v5-c-page__sidebar-body--m-page-insets--PaddingLeft);
|
440
440
|
}
|
441
|
-
.pf-c-page__sidebar-body.pf-m-inset-none {
|
442
|
-
--pf-c-page__sidebar-body--PaddingRight: 0;
|
443
|
-
--pf-c-page__sidebar-body--PaddingLeft: 0;
|
441
|
+
.pf-v5-c-page__sidebar-body.pf-m-inset-none {
|
442
|
+
--pf-v5-c-page__sidebar-body--PaddingRight: 0;
|
443
|
+
--pf-v5-c-page__sidebar-body--PaddingLeft: 0;
|
444
444
|
}
|
445
|
-
.pf-c-page__sidebar-body.pf-m-fill {
|
445
|
+
.pf-v5-c-page__sidebar-body.pf-m-fill {
|
446
446
|
flex-grow: 1;
|
447
447
|
}
|
448
|
-
.pf-c-page__sidebar-body.pf-m-no-fill {
|
448
|
+
.pf-v5-c-page__sidebar-body.pf-m-no-fill {
|
449
449
|
flex-grow: 0;
|
450
450
|
}
|
451
451
|
|
452
|
-
.pf-c-page__main-nav.pf-m-limit-width,
|
453
|
-
.pf-c-page__main-breadcrumb.pf-m-limit-width,
|
454
|
-
.pf-c-page__main-tabs.pf-m-limit-width,
|
455
|
-
.pf-c-page__main-section.pf-m-limit-width,
|
456
|
-
.pf-c-page__main-wizard.pf-m-limit-width {
|
452
|
+
.pf-v5-c-page__main-nav.pf-m-limit-width,
|
453
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-limit-width,
|
454
|
+
.pf-v5-c-page__main-tabs.pf-m-limit-width,
|
455
|
+
.pf-v5-c-page__main-section.pf-m-limit-width,
|
456
|
+
.pf-v5-c-page__main-wizard.pf-m-limit-width {
|
457
457
|
display: flex;
|
458
458
|
flex-direction: column;
|
459
459
|
padding: 0;
|
460
460
|
}
|
461
|
-
.pf-c-page__main-nav.pf-m-limit-width > .pf-c-page__main-body,
|
462
|
-
.pf-c-page__main-breadcrumb.pf-m-limit-width > .pf-c-page__main-body,
|
463
|
-
.pf-c-page__main-tabs.pf-m-limit-width > .pf-c-page__main-body,
|
464
|
-
.pf-c-page__main-section.pf-m-limit-width > .pf-c-page__main-body,
|
465
|
-
.pf-c-page__main-wizard.pf-m-limit-width > .pf-c-page__main-body {
|
461
|
+
.pf-v5-c-page__main-nav.pf-m-limit-width > .pf-v5-c-page__main-body,
|
462
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-limit-width > .pf-v5-c-page__main-body,
|
463
|
+
.pf-v5-c-page__main-tabs.pf-m-limit-width > .pf-v5-c-page__main-body,
|
464
|
+
.pf-v5-c-page__main-section.pf-m-limit-width > .pf-v5-c-page__main-body,
|
465
|
+
.pf-v5-c-page__main-wizard.pf-m-limit-width > .pf-v5-c-page__main-body {
|
466
466
|
flex: 1;
|
467
|
-
max-width: var(--pf-c-page--section--m-limit-width--MaxWidth);
|
467
|
+
max-width: var(--pf-v5-c-page--section--m-limit-width--MaxWidth);
|
468
468
|
}
|
469
|
-
.pf-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
|
470
|
-
.pf-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
|
471
|
-
.pf-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
|
472
|
-
.pf-c-page__main-section.pf-m-limit-width.pf-m-align-center,
|
473
|
-
.pf-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
|
469
|
+
.pf-v5-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
|
470
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
|
471
|
+
.pf-v5-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
|
472
|
+
.pf-v5-c-page__main-section.pf-m-limit-width.pf-m-align-center,
|
473
|
+
.pf-v5-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
|
474
474
|
align-items: center;
|
475
475
|
}
|
476
|
-
.pf-c-page__main-nav.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
|
477
|
-
.pf-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
|
478
|
-
.pf-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
|
479
|
-
.pf-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
|
480
|
-
.pf-c-page__main-wizard.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body {
|
476
|
+
.pf-v5-c-page__main-nav.pf-m-limit-width.pf-m-align-center > .pf-v5-c-page__main-body,
|
477
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v5-c-page__main-body,
|
478
|
+
.pf-v5-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v5-c-page__main-body,
|
479
|
+
.pf-v5-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v5-c-page__main-body,
|
480
|
+
.pf-v5-c-page__main-wizard.pf-m-limit-width.pf-m-align-center > .pf-v5-c-page__main-body {
|
481
481
|
width: 100%;
|
482
482
|
}
|
483
483
|
|
484
|
-
.pf-c-page__main-nav,
|
485
|
-
.pf-c-page__main-breadcrumb,
|
486
|
-
.pf-c-page__main-tabs,
|
487
|
-
.pf-c-page__main-section,
|
488
|
-
.pf-c-page__main-wizard,
|
489
|
-
.pf-c-page__main-group,
|
490
|
-
.pf-c-page__main-subnav {
|
484
|
+
.pf-v5-c-page__main-nav,
|
485
|
+
.pf-v5-c-page__main-breadcrumb,
|
486
|
+
.pf-v5-c-page__main-tabs,
|
487
|
+
.pf-v5-c-page__main-section,
|
488
|
+
.pf-v5-c-page__main-wizard,
|
489
|
+
.pf-v5-c-page__main-group,
|
490
|
+
.pf-v5-c-page__main-subnav {
|
491
491
|
flex-shrink: 0;
|
492
492
|
}
|
493
|
-
.pf-c-page__main-nav.pf-m-overflow-scroll,
|
494
|
-
.pf-c-page__main-breadcrumb.pf-m-overflow-scroll,
|
495
|
-
.pf-c-page__main-tabs.pf-m-overflow-scroll,
|
496
|
-
.pf-c-page__main-section.pf-m-overflow-scroll,
|
497
|
-
.pf-c-page__main-wizard.pf-m-overflow-scroll,
|
498
|
-
.pf-c-page__main-group.pf-m-overflow-scroll,
|
499
|
-
.pf-c-page__main-subnav.pf-m-overflow-scroll {
|
493
|
+
.pf-v5-c-page__main-nav.pf-m-overflow-scroll,
|
494
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-overflow-scroll,
|
495
|
+
.pf-v5-c-page__main-tabs.pf-m-overflow-scroll,
|
496
|
+
.pf-v5-c-page__main-section.pf-m-overflow-scroll,
|
497
|
+
.pf-v5-c-page__main-wizard.pf-m-overflow-scroll,
|
498
|
+
.pf-v5-c-page__main-group.pf-m-overflow-scroll,
|
499
|
+
.pf-v5-c-page__main-subnav.pf-m-overflow-scroll {
|
500
500
|
position: relative;
|
501
501
|
flex-shrink: 1;
|
502
502
|
overflow: auto;
|
503
503
|
}
|
504
|
-
.pf-c-page__main-nav.pf-m-shadow-bottom,
|
505
|
-
.pf-c-page__main-breadcrumb.pf-m-shadow-bottom,
|
506
|
-
.pf-c-page__main-tabs.pf-m-shadow-bottom,
|
507
|
-
.pf-c-page__main-section.pf-m-shadow-bottom,
|
508
|
-
.pf-c-page__main-wizard.pf-m-shadow-bottom,
|
509
|
-
.pf-c-page__main-group.pf-m-shadow-bottom,
|
510
|
-
.pf-c-page__main-subnav.pf-m-shadow-bottom {
|
511
|
-
z-index: var(--pf-c-page--section--m-shadow-bottom--ZIndex);
|
512
|
-
box-shadow: var(--pf-c-page--section--m-shadow-bottom--BoxShadow);
|
513
|
-
}
|
514
|
-
.pf-c-page__main-nav.pf-m-shadow-top,
|
515
|
-
.pf-c-page__main-breadcrumb.pf-m-shadow-top,
|
516
|
-
.pf-c-page__main-tabs.pf-m-shadow-top,
|
517
|
-
.pf-c-page__main-section.pf-m-shadow-top,
|
518
|
-
.pf-c-page__main-wizard.pf-m-shadow-top,
|
519
|
-
.pf-c-page__main-group.pf-m-shadow-top,
|
520
|
-
.pf-c-page__main-subnav.pf-m-shadow-top {
|
521
|
-
z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
|
522
|
-
box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
|
523
|
-
}
|
524
|
-
.pf-c-page__main-nav.pf-m-sticky-top,
|
525
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top,
|
526
|
-
.pf-c-page__main-tabs.pf-m-sticky-top,
|
527
|
-
.pf-c-page__main-section.pf-m-sticky-top,
|
528
|
-
.pf-c-page__main-wizard.pf-m-sticky-top,
|
529
|
-
.pf-c-page__main-group.pf-m-sticky-top,
|
530
|
-
.pf-c-page__main-subnav.pf-m-sticky-top {
|
504
|
+
.pf-v5-c-page__main-nav.pf-m-shadow-bottom,
|
505
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-shadow-bottom,
|
506
|
+
.pf-v5-c-page__main-tabs.pf-m-shadow-bottom,
|
507
|
+
.pf-v5-c-page__main-section.pf-m-shadow-bottom,
|
508
|
+
.pf-v5-c-page__main-wizard.pf-m-shadow-bottom,
|
509
|
+
.pf-v5-c-page__main-group.pf-m-shadow-bottom,
|
510
|
+
.pf-v5-c-page__main-subnav.pf-m-shadow-bottom {
|
511
|
+
z-index: var(--pf-v5-c-page--section--m-shadow-bottom--ZIndex);
|
512
|
+
box-shadow: var(--pf-v5-c-page--section--m-shadow-bottom--BoxShadow);
|
513
|
+
}
|
514
|
+
.pf-v5-c-page__main-nav.pf-m-shadow-top,
|
515
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-shadow-top,
|
516
|
+
.pf-v5-c-page__main-tabs.pf-m-shadow-top,
|
517
|
+
.pf-v5-c-page__main-section.pf-m-shadow-top,
|
518
|
+
.pf-v5-c-page__main-wizard.pf-m-shadow-top,
|
519
|
+
.pf-v5-c-page__main-group.pf-m-shadow-top,
|
520
|
+
.pf-v5-c-page__main-subnav.pf-m-shadow-top {
|
521
|
+
z-index: var(--pf-v5-c-page--section--m-shadow-top--ZIndex);
|
522
|
+
box-shadow: var(--pf-v5-c-page--section--m-shadow-top--BoxShadow);
|
523
|
+
}
|
524
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top,
|
525
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top,
|
526
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-top,
|
527
|
+
.pf-v5-c-page__main-section.pf-m-sticky-top,
|
528
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-top,
|
529
|
+
.pf-v5-c-page__main-group.pf-m-sticky-top,
|
530
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-top {
|
531
531
|
position: sticky;
|
532
532
|
top: 0;
|
533
|
-
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
534
|
-
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
535
|
-
}
|
536
|
-
.pf-c-page__main-nav.pf-m-sticky-bottom,
|
537
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
|
538
|
-
.pf-c-page__main-tabs.pf-m-sticky-bottom,
|
539
|
-
.pf-c-page__main-section.pf-m-sticky-bottom,
|
540
|
-
.pf-c-page__main-wizard.pf-m-sticky-bottom,
|
541
|
-
.pf-c-page__main-group.pf-m-sticky-bottom,
|
542
|
-
.pf-c-page__main-subnav.pf-m-sticky-bottom {
|
533
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
|
534
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
|
535
|
+
}
|
536
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-bottom,
|
537
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom,
|
538
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-bottom,
|
539
|
+
.pf-v5-c-page__main-section.pf-m-sticky-bottom,
|
540
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-bottom,
|
541
|
+
.pf-v5-c-page__main-group.pf-m-sticky-bottom,
|
542
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-bottom {
|
543
543
|
position: sticky;
|
544
544
|
bottom: 0;
|
545
|
-
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
546
|
-
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
545
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
|
546
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
|
547
547
|
}
|
548
548
|
@media (min-height: 0) {
|
549
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
|
550
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
|
551
|
-
.pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
|
552
|
-
.pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
|
553
|
-
.pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
|
554
|
-
.pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
|
555
|
-
.pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
|
549
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-sm-height,
|
550
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
|
551
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
|
552
|
+
.pf-v5-c-page__main-section.pf-m-sticky-top-on-sm-height,
|
553
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
|
554
|
+
.pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height,
|
555
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
|
556
556
|
position: sticky;
|
557
557
|
top: 0;
|
558
|
-
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
559
|
-
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
560
|
-
}
|
561
|
-
.pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
|
562
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
|
563
|
-
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
|
564
|
-
.pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
|
565
|
-
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
|
566
|
-
.pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
|
567
|
-
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
|
558
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
|
559
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
|
560
|
+
}
|
561
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
|
562
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
|
563
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
|
564
|
+
.pf-v5-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
|
565
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
|
566
|
+
.pf-v5-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
|
567
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
|
568
568
|
position: sticky;
|
569
569
|
bottom: 0;
|
570
|
-
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
571
|
-
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
570
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
|
571
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
|
572
572
|
}
|
573
573
|
}
|
574
574
|
@media (min-height: 40rem) {
|
575
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
|
576
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
|
577
|
-
.pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
|
578
|
-
.pf-c-page__main-section.pf-m-sticky-top-on-md-height,
|
579
|
-
.pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
|
580
|
-
.pf-c-page__main-group.pf-m-sticky-top-on-md-height,
|
581
|
-
.pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
|
575
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-md-height,
|
576
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
|
577
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-top-on-md-height,
|
578
|
+
.pf-v5-c-page__main-section.pf-m-sticky-top-on-md-height,
|
579
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-top-on-md-height,
|
580
|
+
.pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height,
|
581
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-top-on-md-height {
|
582
582
|
position: sticky;
|
583
583
|
top: 0;
|
584
|
-
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
585
|
-
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
586
|
-
}
|
587
|
-
.pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
|
588
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
|
589
|
-
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
|
590
|
-
.pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
|
591
|
-
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
|
592
|
-
.pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
|
593
|
-
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
|
584
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
|
585
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
|
586
|
+
}
|
587
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
|
588
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
|
589
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
|
590
|
+
.pf-v5-c-page__main-section.pf-m-sticky-bottom-on-md-height,
|
591
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
|
592
|
+
.pf-v5-c-page__main-group.pf-m-sticky-bottom-on-md-height,
|
593
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
|
594
594
|
position: sticky;
|
595
595
|
bottom: 0;
|
596
|
-
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
597
|
-
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
596
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
|
597
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
|
598
598
|
}
|
599
599
|
}
|
600
600
|
@media (min-height: 48rem) {
|
601
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
|
602
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
|
603
|
-
.pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
|
604
|
-
.pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
|
605
|
-
.pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
|
606
|
-
.pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
|
607
|
-
.pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
|
601
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-lg-height,
|
602
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
|
603
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
|
604
|
+
.pf-v5-c-page__main-section.pf-m-sticky-top-on-lg-height,
|
605
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
|
606
|
+
.pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height,
|
607
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
|
608
608
|
position: sticky;
|
609
609
|
top: 0;
|
610
|
-
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
611
|
-
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
612
|
-
}
|
613
|
-
.pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
|
614
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
|
615
|
-
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
|
616
|
-
.pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
|
617
|
-
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
|
618
|
-
.pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
|
619
|
-
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
|
610
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
|
611
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
|
612
|
+
}
|
613
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
|
614
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
|
615
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
|
616
|
+
.pf-v5-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
|
617
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
|
618
|
+
.pf-v5-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
|
619
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
|
620
620
|
position: sticky;
|
621
621
|
bottom: 0;
|
622
|
-
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
623
|
-
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
622
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
|
623
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
|
624
624
|
}
|
625
625
|
}
|
626
626
|
@media (min-height: 60rem) {
|
627
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
|
628
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
|
629
|
-
.pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
|
630
|
-
.pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
|
631
|
-
.pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
|
632
|
-
.pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
|
633
|
-
.pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
|
627
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-xl-height,
|
628
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
|
629
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
|
630
|
+
.pf-v5-c-page__main-section.pf-m-sticky-top-on-xl-height,
|
631
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
|
632
|
+
.pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height,
|
633
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
|
634
634
|
position: sticky;
|
635
635
|
top: 0;
|
636
|
-
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
637
|
-
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
638
|
-
}
|
639
|
-
.pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
|
640
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
|
641
|
-
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
|
642
|
-
.pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
|
643
|
-
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
|
644
|
-
.pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
|
645
|
-
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
|
636
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
|
637
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
|
638
|
+
}
|
639
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
|
640
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
|
641
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
|
642
|
+
.pf-v5-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
|
643
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
|
644
|
+
.pf-v5-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
|
645
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
|
646
646
|
position: sticky;
|
647
647
|
bottom: 0;
|
648
|
-
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
649
|
-
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
648
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
|
649
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
|
650
650
|
}
|
651
651
|
}
|
652
652
|
@media (min-height: 80rem) {
|
653
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
|
654
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
|
655
|
-
.pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
|
656
|
-
.pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
|
657
|
-
.pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
|
658
|
-
.pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
|
659
|
-
.pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
|
653
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
|
654
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
|
655
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
|
656
|
+
.pf-v5-c-page__main-section.pf-m-sticky-top-on-2xl-height,
|
657
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
|
658
|
+
.pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height,
|
659
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
|
660
660
|
position: sticky;
|
661
661
|
top: 0;
|
662
|
-
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
663
|
-
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
664
|
-
}
|
665
|
-
.pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
|
666
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
|
667
|
-
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
|
668
|
-
.pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
|
669
|
-
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
|
670
|
-
.pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
|
671
|
-
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
|
662
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
|
663
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
|
664
|
+
}
|
665
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
|
666
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
|
667
|
+
.pf-v5-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
|
668
|
+
.pf-v5-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
|
669
|
+
.pf-v5-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
|
670
|
+
.pf-v5-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
|
671
|
+
.pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
|
672
672
|
position: sticky;
|
673
673
|
bottom: 0;
|
674
|
-
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
675
|
-
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
674
|
+
z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
|
675
|
+
box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
|
676
676
|
}
|
677
677
|
}
|
678
678
|
|
679
|
-
.pf-c-page__main,
|
680
|
-
.pf-c-page__drawer {
|
681
|
-
z-index: var(--pf-c-page__main--ZIndex);
|
679
|
+
.pf-v5-c-page__main,
|
680
|
+
.pf-v5-c-page__drawer {
|
681
|
+
z-index: var(--pf-v5-c-page__main--ZIndex);
|
682
682
|
grid-area: main;
|
683
683
|
overflow-x: hidden;
|
684
684
|
overflow-y: auto;
|
685
685
|
-webkit-overflow-scrolling: touch;
|
686
686
|
}
|
687
|
-
.pf-c-page__main:focus,
|
688
|
-
.pf-c-page__drawer:focus {
|
687
|
+
.pf-v5-c-page__main:focus,
|
688
|
+
.pf-v5-c-page__drawer:focus {
|
689
689
|
outline: 0;
|
690
690
|
}
|
691
691
|
|
692
|
-
.pf-c-page__main,
|
693
|
-
.pf-c-page__main-drawer,
|
694
|
-
.pf-c-page__main-group {
|
692
|
+
.pf-v5-c-page__main,
|
693
|
+
.pf-v5-c-page__main-drawer,
|
694
|
+
.pf-v5-c-page__main-group {
|
695
695
|
display: flex;
|
696
696
|
flex-direction: column;
|
697
697
|
}
|
698
698
|
|
699
|
-
.pf-c-page__main-nav {
|
700
|
-
padding-top: var(--pf-c-page__main-nav--PaddingTop);
|
701
|
-
padding-right: var(--pf-c-page__main-nav--PaddingRight);
|
702
|
-
padding-left: var(--pf-c-page__main-nav--PaddingLeft);
|
703
|
-
background-color: var(--pf-c-page__main-nav--BackgroundColor);
|
699
|
+
.pf-v5-c-page__main-nav {
|
700
|
+
padding-top: var(--pf-v5-c-page__main-nav--PaddingTop);
|
701
|
+
padding-right: var(--pf-v5-c-page__main-nav--PaddingRight);
|
702
|
+
padding-left: var(--pf-v5-c-page__main-nav--PaddingLeft);
|
703
|
+
background-color: var(--pf-v5-c-page__main-nav--BackgroundColor);
|
704
704
|
}
|
705
|
-
.pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
|
706
|
-
padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
|
705
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top, .pf-v5-c-page__main-group.pf-m-sticky-top .pf-v5-c-page__main-nav:last-child {
|
706
|
+
padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
|
707
707
|
}
|
708
708
|
@media (min-height: 0) {
|
709
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-nav:last-child {
|
710
|
-
padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
|
709
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v5-c-page__main-nav:last-child {
|
710
|
+
padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
|
711
711
|
}
|
712
712
|
}
|
713
713
|
@media (min-height: 40rem) {
|
714
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-nav:last-child {
|
715
|
-
padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
|
714
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v5-c-page__main-nav:last-child {
|
715
|
+
padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
|
716
716
|
}
|
717
717
|
}
|
718
718
|
@media (min-height: 48rem) {
|
719
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-nav:last-child {
|
720
|
-
padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
|
719
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v5-c-page__main-nav:last-child {
|
720
|
+
padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
|
721
721
|
}
|
722
722
|
}
|
723
723
|
@media (min-height: 60rem) {
|
724
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-nav:last-child {
|
725
|
-
padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
|
724
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v5-c-page__main-nav:last-child {
|
725
|
+
padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
|
726
726
|
}
|
727
727
|
}
|
728
728
|
@media (min-height: 80rem) {
|
729
|
-
.pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-nav:last-child {
|
730
|
-
padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
|
729
|
+
.pf-v5-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v5-c-page__main-nav:last-child {
|
730
|
+
padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
|
731
731
|
}
|
732
732
|
}
|
733
733
|
|
734
|
-
.pf-c-page__main-subnav {
|
735
|
-
background-color: var(--pf-c-page__main-subnav--BackgroundColor);
|
736
|
-
border-top: var(--pf-c-page__main-subnav--BorderTopWidth) solid var(--pf-c-page__main-subnav--BorderTopColor);
|
737
|
-
border-left: var(--pf-c-page__main-subnav--BorderLeftWidth) solid var(--pf-c-page__main-subnav--BorderLeftColor);
|
734
|
+
.pf-v5-c-page__main-subnav {
|
735
|
+
background-color: var(--pf-v5-c-page__main-subnav--BackgroundColor);
|
736
|
+
border-top: var(--pf-v5-c-page__main-subnav--BorderTopWidth) solid var(--pf-v5-c-page__main-subnav--BorderTopColor);
|
737
|
+
border-left: var(--pf-v5-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v5-c-page__main-subnav--BorderLeftColor);
|
738
738
|
}
|
739
739
|
@media screen and (min-width: 1200px) {
|
740
|
-
.pf-c-page__sidebar ~ .pf-c-page__main {
|
741
|
-
--pf-c-page__main-subnav--BorderLeftWidth: var(--pf-c-page__sidebar--main__main-subnav--BorderLeftWidth);
|
740
|
+
.pf-v5-c-page__sidebar ~ .pf-v5-c-page__main {
|
741
|
+
--pf-v5-c-page__main-subnav--BorderLeftWidth: var(--pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth);
|
742
742
|
}
|
743
743
|
}
|
744
|
-
.pf-c-page__sidebar.pf-m-collapsed ~ .pf-c-page__main {
|
745
|
-
--pf-c-page__main-subnav--BorderLeftWidth: var(--pf-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth);
|
744
|
+
.pf-v5-c-page__sidebar.pf-m-collapsed ~ .pf-v5-c-page__main {
|
745
|
+
--pf-v5-c-page__main-subnav--BorderLeftWidth: var(--pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth);
|
746
746
|
}
|
747
747
|
|
748
|
-
.pf-c-page__main-breadcrumb {
|
749
|
-
padding: var(--pf-c-page__main-breadcrumb--PaddingTop) var(--pf-c-page__main-breadcrumb--PaddingRight) var(--pf-c-page__main-breadcrumb--PaddingBottom) var(--pf-c-page__main-breadcrumb--PaddingLeft);
|
750
|
-
background-color: var(--pf-c-page__main-breadcrumb--BackgroundColor);
|
748
|
+
.pf-v5-c-page__main-breadcrumb {
|
749
|
+
padding: var(--pf-v5-c-page__main-breadcrumb--PaddingTop) var(--pf-v5-c-page__main-breadcrumb--PaddingRight) var(--pf-v5-c-page__main-breadcrumb--PaddingBottom) var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
|
750
|
+
background-color: var(--pf-v5-c-page__main-breadcrumb--BackgroundColor);
|
751
751
|
}
|
752
|
-
.pf-c-page__main-breadcrumb + .pf-c-page__main-section {
|
753
|
-
--pf-c-page__main-section--PaddingTop: var(--pf-c-page__main-breadcrumb--main-section--PaddingTop);
|
752
|
+
.pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-section {
|
753
|
+
--pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-breadcrumb--main-section--PaddingTop);
|
754
754
|
}
|
755
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
|
756
|
-
--pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
755
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, .pf-v5-c-page__main-group.pf-m-sticky-top .pf-v5-c-page__main-breadcrumb:last-child {
|
756
|
+
--pf-v5-c-page__main-breadcrumb--PaddingBottom: var(--pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
757
757
|
}
|
758
758
|
@media (min-height: 0) {
|
759
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-breadcrumb:last-child {
|
760
|
-
--pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
759
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v5-c-page__main-breadcrumb:last-child {
|
760
|
+
--pf-v5-c-page__main-breadcrumb--PaddingBottom: var(--pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
761
761
|
}
|
762
762
|
}
|
763
763
|
@media (min-height: 40rem) {
|
764
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-breadcrumb:last-child {
|
765
|
-
--pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
764
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v5-c-page__main-breadcrumb:last-child {
|
765
|
+
--pf-v5-c-page__main-breadcrumb--PaddingBottom: var(--pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
766
766
|
}
|
767
767
|
}
|
768
768
|
@media (min-height: 48rem) {
|
769
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-breadcrumb:last-child {
|
770
|
-
--pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
769
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v5-c-page__main-breadcrumb:last-child {
|
770
|
+
--pf-v5-c-page__main-breadcrumb--PaddingBottom: var(--pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
771
771
|
}
|
772
772
|
}
|
773
773
|
@media (min-height: 60rem) {
|
774
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-breadcrumb:last-child {
|
775
|
-
--pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
774
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v5-c-page__main-breadcrumb:last-child {
|
775
|
+
--pf-v5-c-page__main-breadcrumb--PaddingBottom: var(--pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
776
776
|
}
|
777
777
|
}
|
778
778
|
@media (min-height: 80rem) {
|
779
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-breadcrumb:last-child {
|
780
|
-
--pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
779
|
+
.pf-v5-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v5-c-page__main-breadcrumb:last-child {
|
780
|
+
--pf-v5-c-page__main-breadcrumb--PaddingBottom: var(--pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
|
781
781
|
}
|
782
782
|
}
|
783
783
|
|
784
|
-
.pf-c-page__main-tabs {
|
785
|
-
padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
|
786
|
-
background-color: var(--pf-c-page__main-tabs--BackgroundColor);
|
784
|
+
.pf-v5-c-page__main-tabs {
|
785
|
+
padding: var(--pf-v5-c-page__main-tabs--PaddingTop) var(--pf-v5-c-page__main-tabs--PaddingRight) var(--pf-v5-c-page__main-tabs--PaddingBottom) var(--pf-v5-c-page__main-tabs--PaddingLeft);
|
786
|
+
background-color: var(--pf-v5-c-page__main-tabs--BackgroundColor);
|
787
787
|
}
|
788
|
-
.pf-c-page__main-nav + .pf-c-page__main-tabs {
|
789
|
-
--pf-c-page__main-tabs--PaddingTop: var(--pf-c-page__main-nav--page__main-tabs--PaddingTop);
|
788
|
+
.pf-v5-c-page__main-nav + .pf-v5-c-page__main-tabs {
|
789
|
+
--pf-v5-c-page__main-tabs--PaddingTop: var(--pf-v5-c-page__main-nav--page__main-tabs--PaddingTop);
|
790
790
|
}
|
791
|
-
.pf-c-page__main-breadcrumb + .pf-c-page__main-tabs {
|
792
|
-
--pf-c-page__main-tabs--PaddingTop: var(--pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop);
|
791
|
+
.pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-tabs {
|
792
|
+
--pf-v5-c-page__main-tabs--PaddingTop: var(--pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop);
|
793
793
|
}
|
794
794
|
|
795
|
-
.pf-c-page__main-section:last-child, .pf-c-page__main-section:only-child, .pf-c-page__main-section.pf-m-fill,
|
796
|
-
.pf-c-page__main-group:last-child,
|
797
|
-
.pf-c-page__main-group:only-child,
|
798
|
-
.pf-c-page__main-group.pf-m-fill,
|
799
|
-
.pf-c-page__main-wizard:last-child,
|
800
|
-
.pf-c-page__main-wizard:only-child,
|
801
|
-
.pf-c-page__main-wizard.pf-m-fill {
|
795
|
+
.pf-v5-c-page__main-section:last-child, .pf-v5-c-page__main-section:only-child, .pf-v5-c-page__main-section.pf-m-fill,
|
796
|
+
.pf-v5-c-page__main-group:last-child,
|
797
|
+
.pf-v5-c-page__main-group:only-child,
|
798
|
+
.pf-v5-c-page__main-group.pf-m-fill,
|
799
|
+
.pf-v5-c-page__main-wizard:last-child,
|
800
|
+
.pf-v5-c-page__main-wizard:only-child,
|
801
|
+
.pf-v5-c-page__main-wizard.pf-m-fill {
|
802
802
|
flex-grow: 1;
|
803
803
|
}
|
804
|
-
.pf-c-page__main-section.pf-m-no-fill,
|
805
|
-
.pf-c-page__main-group.pf-m-no-fill,
|
806
|
-
.pf-c-page__main-wizard.pf-m-no-fill {
|
804
|
+
.pf-v5-c-page__main-section.pf-m-no-fill,
|
805
|
+
.pf-v5-c-page__main-group.pf-m-no-fill,
|
806
|
+
.pf-v5-c-page__main-wizard.pf-m-no-fill {
|
807
807
|
flex-grow: 0;
|
808
808
|
}
|
809
809
|
|
810
|
-
.pf-c-page__main-section {
|
811
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
812
|
-
background-color: var(--pf-c-page__main-section--BackgroundColor);
|
810
|
+
.pf-v5-c-page__main-section {
|
811
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
812
|
+
background-color: var(--pf-v5-c-page__main-section--BackgroundColor);
|
813
813
|
}
|
814
|
-
.pf-c-page__main-section.pf-m-light {
|
815
|
-
--pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor);
|
814
|
+
.pf-v5-c-page__main-section.pf-m-light {
|
815
|
+
--pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-light--BackgroundColor);
|
816
816
|
}
|
817
|
-
.pf-c-page__main-section.pf-m-light-100 {
|
818
|
-
--pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light-100--BackgroundColor);
|
817
|
+
.pf-v5-c-page__main-section.pf-m-light-100 {
|
818
|
+
--pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-light-100--BackgroundColor);
|
819
819
|
}
|
820
|
-
.pf-c-page__main-section[class*=pf-m-dark-] {
|
821
|
-
color: var(--pf-global--Color--100);
|
820
|
+
.pf-v5-c-page__main-section[class*=pf-m-dark-] {
|
821
|
+
color: var(--pf-v5-global--Color--100);
|
822
822
|
}
|
823
|
-
.pf-c-page__main-section.pf-m-dark-100 {
|
824
|
-
--pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-dark-100--BackgroundColor);
|
823
|
+
.pf-v5-c-page__main-section.pf-m-dark-100 {
|
824
|
+
--pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-100--BackgroundColor);
|
825
825
|
}
|
826
|
-
.pf-c-page__main-section.pf-m-dark-200 {
|
827
|
-
--pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-dark-200--BackgroundColor);
|
826
|
+
.pf-v5-c-page__main-section.pf-m-dark-200 {
|
827
|
+
--pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-200--BackgroundColor);
|
828
828
|
}
|
829
|
-
.pf-c-page__main-section.pf-m-padding {
|
830
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
829
|
+
.pf-v5-c-page__main-section.pf-m-padding {
|
830
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
831
831
|
}
|
832
|
-
.pf-c-page__main-section.pf-m-padding.pf-m-limit-width {
|
832
|
+
.pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width {
|
833
833
|
padding: 0;
|
834
834
|
}
|
835
|
-
.pf-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-c-page__main-body {
|
836
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
835
|
+
.pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v5-c-page__main-body {
|
836
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
837
837
|
}
|
838
|
-
.pf-c-page__main-section.pf-m-no-padding, .pf-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-c-page__main-body {
|
838
|
+
.pf-v5-c-page__main-section.pf-m-no-padding, .pf-v5-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v5-c-page__main-body {
|
839
839
|
padding: 0;
|
840
840
|
}
|
841
841
|
@media (min-width: 576px) {
|
842
|
-
.pf-c-page__main-section.pf-m-padding-on-sm {
|
843
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
842
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-sm {
|
843
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
844
844
|
}
|
845
|
-
.pf-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
|
845
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
|
846
846
|
padding: 0;
|
847
847
|
}
|
848
|
-
.pf-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-c-page__main-body {
|
849
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
848
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v5-c-page__main-body {
|
849
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
850
850
|
}
|
851
|
-
.pf-c-page__main-section.pf-m-no-padding-on-sm, .pf-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-c-page__main-body {
|
851
|
+
.pf-v5-c-page__main-section.pf-m-no-padding-on-sm, .pf-v5-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v5-c-page__main-body {
|
852
852
|
padding: 0;
|
853
853
|
}
|
854
854
|
}
|
855
855
|
@media (min-width: 768px) {
|
856
|
-
.pf-c-page__main-section.pf-m-padding-on-md {
|
857
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
856
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-md {
|
857
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
858
858
|
}
|
859
|
-
.pf-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
|
859
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
|
860
860
|
padding: 0;
|
861
861
|
}
|
862
|
-
.pf-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-c-page__main-body {
|
863
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
862
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v5-c-page__main-body {
|
863
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
864
864
|
}
|
865
|
-
.pf-c-page__main-section.pf-m-no-padding-on-md, .pf-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-c-page__main-body {
|
865
|
+
.pf-v5-c-page__main-section.pf-m-no-padding-on-md, .pf-v5-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v5-c-page__main-body {
|
866
866
|
padding: 0;
|
867
867
|
}
|
868
868
|
}
|
869
869
|
@media (min-width: 992px) {
|
870
|
-
.pf-c-page__main-section.pf-m-padding-on-lg {
|
871
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
870
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-lg {
|
871
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
872
872
|
}
|
873
|
-
.pf-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
|
873
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
|
874
874
|
padding: 0;
|
875
875
|
}
|
876
|
-
.pf-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-c-page__main-body {
|
877
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
876
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v5-c-page__main-body {
|
877
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
878
878
|
}
|
879
|
-
.pf-c-page__main-section.pf-m-no-padding-on-lg, .pf-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-c-page__main-body {
|
879
|
+
.pf-v5-c-page__main-section.pf-m-no-padding-on-lg, .pf-v5-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v5-c-page__main-body {
|
880
880
|
padding: 0;
|
881
881
|
}
|
882
882
|
}
|
883
883
|
@media (min-width: 1200px) {
|
884
|
-
.pf-c-page__main-section.pf-m-padding-on-xl {
|
885
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
884
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-xl {
|
885
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
886
886
|
}
|
887
|
-
.pf-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
|
887
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
|
888
888
|
padding: 0;
|
889
889
|
}
|
890
|
-
.pf-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-c-page__main-body {
|
891
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
890
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v5-c-page__main-body {
|
891
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
892
892
|
}
|
893
|
-
.pf-c-page__main-section.pf-m-no-padding-on-xl, .pf-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-c-page__main-body {
|
893
|
+
.pf-v5-c-page__main-section.pf-m-no-padding-on-xl, .pf-v5-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v5-c-page__main-body {
|
894
894
|
padding: 0;
|
895
895
|
}
|
896
896
|
}
|
897
897
|
@media (min-width: 1450px) {
|
898
|
-
.pf-c-page__main-section.pf-m-padding-on-2xl {
|
899
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
898
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-2xl {
|
899
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
900
900
|
}
|
901
|
-
.pf-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
|
901
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
|
902
902
|
padding: 0;
|
903
903
|
}
|
904
|
-
.pf-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-c-page__main-body {
|
905
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
904
|
+
.pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v5-c-page__main-body {
|
905
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
906
906
|
}
|
907
|
-
.pf-c-page__main-section.pf-m-no-padding-on-2xl, .pf-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-c-page__main-body {
|
907
|
+
.pf-v5-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v5-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v5-c-page__main-body {
|
908
908
|
padding: 0;
|
909
909
|
}
|
910
910
|
}
|
911
911
|
|
912
|
-
.pf-c-page__main-wizard {
|
912
|
+
.pf-v5-c-page__main-wizard {
|
913
913
|
flex: 1 1;
|
914
914
|
min-height: 0;
|
915
|
-
background-color: var(--pf-c-page__main-wizard--BackgroundColor);
|
916
|
-
border-top: var(--pf-c-page__main-wizard--BorderTopWidth) solid var(--pf-c-page__main-wizard--BorderTopColor);
|
915
|
+
background-color: var(--pf-v5-c-page__main-wizard--BackgroundColor);
|
916
|
+
border-top: var(--pf-v5-c-page__main-wizard--BorderTopWidth) solid var(--pf-v5-c-page__main-wizard--BorderTopColor);
|
917
917
|
}
|
918
|
-
.pf-c-page__main-wizard:first-child {
|
919
|
-
--pf-c-page__main-wizard--BorderTopWidth: 0;
|
918
|
+
.pf-v5-c-page__main-wizard:first-child {
|
919
|
+
--pf-v5-c-page__main-wizard--BorderTopWidth: 0;
|
920
920
|
}
|
921
|
-
.pf-c-page__main-wizard.pf-m-light-200 {
|
922
|
-
--pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
|
921
|
+
.pf-v5-c-page__main-wizard.pf-m-light-200 {
|
922
|
+
--pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-c-page__main-wizard--m-light-200--BackgroundColor);
|
923
923
|
}
|
924
924
|
|
925
|
-
.pf-c-page__main-wizard .pf-c-page__main-body {
|
925
|
+
.pf-v5-c-page__main-wizard .pf-v5-c-page__main-body {
|
926
926
|
min-height: 0;
|
927
927
|
}
|
928
928
|
|
929
|
-
.pf-c-page__main-group {
|
929
|
+
.pf-v5-c-page__main-group {
|
930
930
|
flex-shrink: 0;
|
931
931
|
}
|
932
932
|
|
933
|
-
.pf-c-page__main-nav .pf-c-page__main-body {
|
934
|
-
padding-top: var(--pf-c-page__main-nav--PaddingTop);
|
935
|
-
padding-right: var(--pf-c-page__main-nav--PaddingRight);
|
936
|
-
padding-left: var(--pf-c-page__main-nav--PaddingLeft);
|
933
|
+
.pf-v5-c-page__main-nav .pf-v5-c-page__main-body {
|
934
|
+
padding-top: var(--pf-v5-c-page__main-nav--PaddingTop);
|
935
|
+
padding-right: var(--pf-v5-c-page__main-nav--PaddingRight);
|
936
|
+
padding-left: var(--pf-v5-c-page__main-nav--PaddingLeft);
|
937
937
|
}
|
938
|
-
.pf-c-page__main-breadcrumb .pf-c-page__main-body {
|
939
|
-
padding: var(--pf-c-page__main-breadcrumb--PaddingTop) var(--pf-c-page__main-breadcrumb--PaddingRight) var(--pf-c-page__main-breadcrumb--PaddingBottom) var(--pf-c-page__main-breadcrumb--PaddingLeft);
|
938
|
+
.pf-v5-c-page__main-breadcrumb .pf-v5-c-page__main-body {
|
939
|
+
padding: var(--pf-v5-c-page__main-breadcrumb--PaddingTop) var(--pf-v5-c-page__main-breadcrumb--PaddingRight) var(--pf-v5-c-page__main-breadcrumb--PaddingBottom) var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
|
940
940
|
}
|
941
|
-
.pf-c-page__main-section .pf-c-page__main-body {
|
942
|
-
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
941
|
+
.pf-v5-c-page__main-section .pf-v5-c-page__main-body {
|
942
|
+
padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
|
943
943
|
}
|
944
|
-
.pf-c-page__main-tabs .pf-c-page__main-body {
|
945
|
-
padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
|
944
|
+
.pf-v5-c-page__main-tabs .pf-v5-c-page__main-body {
|
945
|
+
padding: var(--pf-v5-c-page__main-tabs--PaddingTop) var(--pf-v5-c-page__main-tabs--PaddingRight) var(--pf-v5-c-page__main-tabs--PaddingBottom) var(--pf-v5-c-page__main-tabs--PaddingLeft);
|
946
946
|
}
|
947
947
|
|
948
|
-
.pf-c-page__drawer {
|
948
|
+
.pf-v5-c-page__drawer {
|
949
949
|
grid-area: main;
|
950
950
|
}
|
951
|
-
.pf-c-page__drawer > .pf-c-drawer {
|
951
|
+
.pf-v5-c-page__drawer > .pf-v5-c-drawer {
|
952
952
|
flex: 1 0 auto;
|
953
953
|
}
|
954
954
|
|
955
|
-
:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
|
956
|
-
:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
|
957
|
-
:where(.pf-theme-dark) .pf-c-page__header {
|
958
|
-
--pf-global--Color--100: #e0e0e0;
|
959
|
-
--pf-global--Color--200: #aaabac;
|
960
|
-
--pf-global--BorderColor--100: #444548;
|
961
|
-
--pf-global--primary-color--100: #1fa7f8;
|
962
|
-
--pf-global--link--Color: #1fa7f8;
|
963
|
-
--pf-global--link--Color--hover: #73bcf7;
|
964
|
-
--pf-global--BackgroundColor--100: #1b1d21;
|
955
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
|
956
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
|
957
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
|
958
|
+
--pf-v5-global--Color--100: #e0e0e0;
|
959
|
+
--pf-v5-global--Color--200: #aaabac;
|
960
|
+
--pf-v5-global--BorderColor--100: #444548;
|
961
|
+
--pf-v5-global--primary-color--100: #1fa7f8;
|
962
|
+
--pf-v5-global--link--Color: #1fa7f8;
|
963
|
+
--pf-v5-global--link--Color--hover: #73bcf7;
|
964
|
+
--pf-v5-global--BackgroundColor--100: #1b1d21;
|
965
965
|
}
|
966
966
|
|
967
|
-
:where(.pf-theme-dark)
|
968
|
-
--pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
969
|
-
--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
970
|
-
--pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
971
|
-
--pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);
|
967
|
+
:where(.pf-v5-theme-dark):root {
|
968
|
+
--pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
|
969
|
+
--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
970
|
+
--pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
971
|
+
--pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
|
972
972
|
}
|
973
|
-
:where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button {
|
974
|
-
color: var(--pf-global--Color--100);
|
973
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
|
974
|
+
color: var(--pf-v5-global--Color--100);
|
975
975
|
}
|
976
|
-
:where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
|
977
|
-
background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
|
976
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
|
977
|
+
background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
|
978
978
|
}
|
979
|
-
:where(.pf-theme-dark) .pf-c-page__sidebar {
|
980
|
-
border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
|
979
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
|
980
|
+
border-right: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
|
981
981
|
}
|
982
|
-
:where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
|
983
|
-
--pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
982
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
|
983
|
+
--pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
984
984
|
}
|
985
|
-
:where(.pf-theme-dark) .pf-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-breadcrumb.pf-m-sticky-bottom {
|
986
|
-
--pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
985
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
|
986
|
+
--pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
987
987
|
}
|
988
|
-
:where(.pf-theme-dark) .pf-c-page__main-group.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-group.pf-m-sticky-bottom {
|
989
|
-
--pf-c-page__main-section--m-light--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
990
|
-
--pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
991
|
-
--pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
992
|
-
--pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
988
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
|
989
|
+
--pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
990
|
+
--pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
991
|
+
--pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
992
|
+
--pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
993
993
|
}
|
994
|
-
:where(.pf-theme-dark) .pf-c-page__main-section.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-section.pf-m-sticky-bottom {
|
995
|
-
--pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
994
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
|
995
|
+
--pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
996
996
|
}
|
997
|
-
:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
|
998
|
-
:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
|
999
|
-
:where(.pf-theme-dark) .pf-c-page__header {
|
1000
|
-
color: var(--pf-global--Color--100);
|
997
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
|
998
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
|
999
|
+
:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
|
1000
|
+
color: var(--pf-v5-global--Color--100);
|
1001
1001
|
}
|