@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -3
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/images/PF-Backdrop.svg +1 -0
- package/assets/images/PF-IconLogo-Reverse.svg +14 -0
- package/assets/images/PF-IconLogo.svg +17 -0
- package/assets/images/logo__pf--reverse-on-md.svg +1 -1
- package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
- package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
- package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
- package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
- package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
- package/assets/images/pf_logo_white.hbs +35 -0
- package/assets/images/pf_logo_white.svg +38 -0
- package/assets/pficon/pf-v5-pficon.woff2 +0 -0
- package/assets/pficon/pficon.scss +6 -129
- package/base/_common.scss +29 -4
- package/base/_globals.scss +5 -9
- package/base/_variables.scss +8 -6
- package/base/patternfly-common.css +24 -6
- package/base/patternfly-globals.css +5 -5
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/base/patternfly-variables.css +886 -771
- package/base/tokens/_tokens-dark.scss +322 -265
- package/base/tokens/_tokens-default.scss +426 -306
- package/base/tokens/_tokens-font.scss +59 -35
- package/base/tokens/_tokens-palette.scss +69 -71
- package/base/tokens/_workspace-overrides.scss +7 -0
- package/components/AboutModalBox/about-modal-box.css +80 -108
- package/components/AboutModalBox/about-modal-box.scss +64 -78
- package/components/Accordion/accordion.css +96 -175
- package/components/Accordion/accordion.scss +106 -193
- package/components/ActionList/action-list.css +2 -2
- package/components/ActionList/action-list.scss +2 -2
- package/components/Alert/alert-group.css +27 -20
- package/components/Alert/alert-group.scss +27 -20
- package/components/Alert/alert.css +74 -95
- package/components/Alert/alert.scss +76 -89
- package/components/AppLauncher/app-launcher.css +32 -23
- package/components/AppLauncher/app-launcher.scss +32 -23
- package/components/BackToTop/back-to-top.css +17 -15
- package/components/BackToTop/back-to-top.scss +14 -13
- package/components/Backdrop/backdrop.css +2 -2
- package/components/Backdrop/backdrop.scss +2 -2
- package/components/BackgroundImage/background-image.css +6 -3
- package/components/BackgroundImage/background-image.scss +8 -3
- package/components/Badge/badge.css +25 -17
- package/components/Badge/badge.scss +27 -19
- package/components/Banner/banner.css +91 -69
- package/components/Banner/banner.scss +95 -34
- package/components/Breadcrumb/breadcrumb.css +28 -19
- package/components/Breadcrumb/breadcrumb.scss +26 -19
- package/components/Button/button.css +35 -23
- package/components/Button/button.scss +36 -26
- package/components/Button/themes/dark/button.scss +1 -1
- package/components/CalendarMonth/calendar-month.css +25 -15
- package/components/CalendarMonth/calendar-month.scss +23 -15
- package/components/Card/card.css +25 -17
- package/components/Card/card.scss +24 -17
- package/components/Check/check.css +12 -10
- package/components/Check/check.scss +17 -12
- package/components/Chip/chip-group.css +6 -6
- package/components/Chip/chip-group.scss +6 -6
- package/components/Chip/chip.css +16 -9
- package/components/Chip/chip.scss +17 -9
- package/components/ClipboardCopy/clipboard-copy.css +19 -10
- package/components/ClipboardCopy/clipboard-copy.scss +16 -8
- package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
- package/components/CodeBlock/code-block.css +6 -3
- package/components/CodeBlock/code-block.scss +6 -3
- package/components/CodeEditor/code-editor.css +31 -22
- package/components/CodeEditor/code-editor.scss +30 -21
- package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
- package/components/Content/content.css +100 -97
- package/components/Content/content.scss +101 -98
- package/components/ContextSelector/context-selector.css +41 -26
- package/components/ContextSelector/context-selector.scss +40 -25
- package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
- package/components/DataList/data-list-grid.css +21 -21
- package/components/DataList/data-list-grid.scss +3 -3
- package/components/DataList/data-list.css +69 -56
- package/components/DataList/data-list.scss +47 -35
- package/components/DatePicker/date-picker.css +8 -8
- package/components/DatePicker/date-picker.scss +8 -8
- package/components/DescriptionList/description-list.css +8 -5
- package/components/DescriptionList/description-list.scss +8 -5
- package/components/DragDrop/drag-drop.css +8 -8
- package/components/DragDrop/drag-drop.scss +8 -8
- package/components/Drawer/drawer.css +120 -62
- package/components/Drawer/drawer.scss +94 -44
- package/components/Dropdown/dropdown.css +76 -69
- package/components/Dropdown/dropdown.scss +67 -62
- package/components/DualListSelector/dual-list-selector.css +29 -15
- package/components/DualListSelector/dual-list-selector.scss +30 -15
- package/components/EmptyState/empty-state.css +7 -4
- package/components/EmptyState/empty-state.scss +7 -4
- package/components/ExpandableSection/expandable-section.css +75 -59
- package/components/ExpandableSection/expandable-section.scss +81 -72
- package/components/FileUpload/file-upload.css +9 -15
- package/components/FileUpload/file-upload.scss +9 -15
- package/components/Form/form.css +53 -50
- package/components/Form/form.scss +46 -44
- package/components/FormControl/form-control.css +18 -9
- package/components/FormControl/form-control.scss +18 -9
- package/components/HelperText/helper-text.css +29 -35
- package/components/HelperText/helper-text.scss +31 -41
- package/components/Hint/hint.css +37 -27
- package/components/Hint/hint.scss +37 -30
- package/components/Icon/icon.css +1 -1
- package/components/Icon/icon.scss +1 -1
- package/components/InlineEdit/inline-edit.css +9 -9
- package/components/InlineEdit/inline-edit.scss +9 -9
- package/components/InputGroup/input-group.css +12 -6
- package/components/InputGroup/input-group.scss +11 -5
- package/components/InputGroup/themes/dark/input-group.scss +1 -1
- package/components/JumpLinks/jump-links.css +27 -24
- package/components/JumpLinks/jump-links.scss +26 -24
- package/components/Label/label-group.css +13 -10
- package/components/Label/label-group.scss +13 -10
- package/components/Label/label.css +9 -9
- package/components/Label/label.scss +9 -9
- package/components/List/list.css +25 -25
- package/components/List/list.scss +26 -26
- package/components/LogViewer/log-viewer.css +14 -14
- package/components/LogViewer/log-viewer.scss +14 -14
- package/components/Login/login.css +104 -122
- package/components/Login/login.scss +92 -91
- package/components/Masthead/masthead.css +68 -125
- package/components/Masthead/masthead.scss +123 -153
- package/components/Menu/menu.css +82 -65
- package/components/Menu/menu.scss +85 -69
- package/components/MenuToggle/menu-toggle.css +89 -100
- package/components/MenuToggle/menu-toggle.scss +92 -112
- package/components/ModalBox/modal-box.css +76 -69
- package/components/ModalBox/modal-box.scss +74 -70
- package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
- package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
- package/components/Nav/nav.css +162 -133
- package/components/Nav/nav.scss +162 -135
- package/components/Nav/themes/dark/nav.scss +2 -2
- package/components/NotificationBadge/notification-badge.css +66 -85
- package/components/NotificationBadge/notification-badge.scss +72 -103
- package/components/NotificationDrawer/notification-drawer.css +32 -19
- package/components/NotificationDrawer/notification-drawer.scss +30 -19
- package/components/NumberInput/number-input.css +2 -2
- package/components/NumberInput/number-input.scss +2 -2
- package/components/OptionsMenu/options-menu.css +43 -31
- package/components/OptionsMenu/options-menu.scss +43 -31
- package/components/OverflowMenu/overflow-menu.css +2 -2
- package/components/OverflowMenu/overflow-menu.scss +2 -2
- package/components/Page/page.css +232 -271
- package/components/Page/page.scss +180 -231
- package/components/Pagination/pagination.css +27 -17
- package/components/Pagination/pagination.scss +25 -17
- package/components/Panel/panel.css +13 -7
- package/components/Panel/panel.scss +13 -7
- package/components/Popover/popover.css +110 -87
- package/components/Popover/popover.scss +120 -109
- package/components/Progress/progress.css +9 -7
- package/components/Progress/progress.scss +12 -7
- package/components/ProgressStepper/progress-stepper.css +26 -20
- package/components/ProgressStepper/progress-stepper.scss +25 -19
- package/components/Radio/radio.css +16 -13
- package/components/Radio/radio.scss +20 -14
- package/components/Select/select.css +56 -47
- package/components/Select/select.scss +56 -47
- package/components/Sidebar/sidebar.css +11 -5
- package/components/Sidebar/sidebar.scss +11 -5
- package/components/SimpleList/simple-list.css +10 -4
- package/components/SimpleList/simple-list.scss +10 -4
- package/components/Skeleton/skeleton.css +6 -5
- package/components/Skeleton/skeleton.scss +4 -5
- package/components/SkipToContent/skip-to-content.css +9 -6
- package/components/SkipToContent/skip-to-content.scss +8 -6
- package/components/Slider/slider.css +47 -26
- package/components/Slider/slider.scss +56 -28
- package/components/Switch/switch.css +10 -6
- package/components/Switch/switch.scss +11 -7
- package/components/TabContent/tab-content.css +4 -1
- package/components/TabContent/tab-content.scss +4 -1
- package/components/Table/table-grid.css +264 -203
- package/components/Table/table-grid.scss +61 -47
- package/components/Table/table-scrollable.css +4 -4
- package/components/Table/table-scrollable.scss +6 -4
- package/components/Table/table-tree-view.css +112 -105
- package/components/Table/table-tree-view.scss +38 -33
- package/components/Table/table.css +176 -159
- package/components/Table/table.scss +177 -165
- package/components/Tabs/tabs.css +76 -48
- package/components/Tabs/tabs.scss +74 -48
- package/components/TextInputGroup/text-input-group.css +15 -15
- package/components/TextInputGroup/text-input-group.scss +15 -15
- package/components/Tile/tile.css +10 -10
- package/components/Tile/tile.scss +10 -10
- package/components/Title/title.css +70 -19
- package/components/Title/title.scss +90 -20
- package/components/ToggleGroup/toggle-group.css +14 -11
- package/components/ToggleGroup/toggle-group.scss +14 -11
- package/components/Toolbar/toolbar.css +57 -44
- package/components/Toolbar/toolbar.scss +45 -26
- package/components/Tooltip/tooltip.css +76 -44
- package/components/Tooltip/tooltip.scss +93 -77
- package/components/TreeView/tree-view.css +48 -27
- package/components/TreeView/tree-view.scss +50 -28
- package/components/Truncate/truncate.css +9 -0
- package/components/Truncate/truncate.scss +16 -3
- package/components/Wizard/wizard.css +57 -36
- package/components/Wizard/wizard.scss +57 -36
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
- package/docs/components/Accordion/examples/Accordion.md +614 -416
- package/docs/components/Alert/examples/Alert.md +1 -1
- package/docs/components/Badge/examples/Badge.md +21 -0
- package/docs/components/Banner/examples/Banner.md +48 -25
- package/docs/components/Brand/examples/Brand.css +12 -0
- package/docs/components/Brand/examples/Brand.md +75 -32
- package/docs/components/Button/examples/Button.css +2 -2
- package/docs/components/Button/examples/Button.md +15 -3
- package/docs/components/Card/examples/Card.md +125 -17
- package/docs/components/Check/examples/Check.md +71 -59
- package/docs/components/Chip/examples/Chip.md +1 -1
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
- package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
- package/docs/components/DragDrop/examples/DragDrop.css +2 -2
- package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
- package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -24
- package/docs/components/Label/examples/Label.md +1 -1
- package/docs/components/LogViewer/examples/LogViewer.css +2 -2
- package/docs/components/LogViewer/examples/LogViewer.md +250 -160
- package/docs/components/Login/examples/Login.md +5 -0
- package/docs/components/Masthead/examples/masthead.md +7 -54
- package/docs/components/Menu/examples/Menu.css +8 -0
- package/docs/components/Menu/examples/Menu.md +594 -543
- package/docs/components/MenuToggle/examples/MenuToggle.md +151 -138
- package/docs/components/ModalBox/examples/ModalBox.css +3 -8
- package/docs/components/Nav/examples/Navigation.css +3 -25
- package/docs/components/Nav/examples/Navigation.md +239 -113
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
- package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
- package/docs/components/Page/examples/Page.css +0 -8
- package/docs/components/Page/examples/Page.md +22 -21
- package/docs/components/Popover/examples/Popover.css +4 -9
- package/docs/components/Popover/examples/Popover.md +1 -1
- package/docs/components/Radio/examples/Radio.md +63 -55
- package/docs/components/Select/deprecated/Select.md +184 -177
- package/docs/components/Table/examples/Table.css +2 -2
- package/docs/components/Table/examples/Table.md +2 -2
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
- package/docs/components/Tile/examples/Tile.css +1 -1
- package/docs/components/Title/examples/Title.md +18 -0
- package/docs/components/Toolbar/examples/Toolbar.md +570 -2803
- package/docs/components/Tooltip/examples/Tooltip.css +4 -0
- package/docs/components/Tooltip/examples/Tooltip.md +3 -1
- package/docs/components/Truncate/examples/Truncate.md +2 -2
- package/docs/demos/AboutModal/examples/AboutModal.md +85 -10
- package/docs/demos/Alert/examples/Alert.md +249 -24
- package/docs/demos/BackToTop/examples/BackToTop.md +83 -8
- package/docs/demos/Banner/examples/Banner.md +168 -16
- package/docs/demos/Card/examples/Card.css +3 -3
- package/docs/demos/Card/examples/Card.md +28 -12
- package/docs/demos/CardView/examples/CardView.md +139 -79
- package/docs/demos/ContextSelector/examples/ContextSelector.md +332 -32
- package/docs/demos/Dashboard/examples/Dashboard.md +86 -11
- package/docs/demos/DataList/examples/DataList.md +524 -354
- package/docs/demos/DescriptionList/examples/DescriptionList.md +249 -24
- package/docs/demos/Drawer/examples/Drawer.md +415 -40
- package/docs/demos/JumpLinks/examples/JumpLinks.md +498 -48
- package/docs/demos/Masthead/examples/Masthead.md +793 -277
- package/docs/demos/Modal/examples/Modal.md +498 -48
- package/docs/demos/Nav/examples/Nav.md +664 -64
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +420 -40
- package/docs/demos/Page/examples/Page.md +747 -72
- package/docs/demos/Page/examples/Penta.md +746 -0
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +824 -451
- package/docs/demos/Skeleton/examples/Skeleton.md +90 -43
- package/docs/demos/Table/examples/Table.md +2313 -1887
- package/docs/demos/Tabs/examples/Tabs.md +528 -71
- package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
- package/docs/demos/Toolbar/examples/Toolbar.md +870 -1044
- package/docs/demos/Wizard/examples/Wizard.md +747 -72
- package/docs/layouts/Flex/examples/Flex.md +5 -5
- package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
- package/icons/pficons.mjs +1 -0
- package/layouts/Flex/flex.css +115 -43
- package/layouts/Flex/flex.scss +20 -8
- package/package.json +9 -5
- package/patternfly-addons.css +732 -972
- package/patternfly-base-no-globals-theme-dark-unversioned.css +921 -784
- package/patternfly-base-no-globals.css +921 -784
- package/patternfly-base-theme-dark-unversioned.css +926 -789
- package/patternfly-base.css +926 -789
- package/patternfly-no-globals.css +4838 -4253
- package/patternfly-theme-dark-unversioned.css +4843 -4258
- package/patternfly.css +4843 -4258
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +6 -0
- package/sass-utilities/mixins.scss +62 -2
- package/sass-utilities/scss-variables.scss +8 -8
- package/sass-utilities/themes/dark/mixins.scss +3 -1
- package/utilities/Accessibility/accessibility.css +12 -12
- package/utilities/Spacing/spacing.css +720 -960
- package/utilities/Spacing/spacing.scss +4 -8
- package/base/themes/dark/_variables.scss +0 -102
- package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
- package/components/Accordion/themes/dark/accordion.scss +0 -9
- package/components/Alert/themes/dark/alert.scss +0 -17
- package/components/Badge/themes/dark/badge.scss +0 -9
- package/components/Banner/themes/dark/banner.scss +0 -14
- package/components/HelperText/themes/dark/helper-text.scss +0 -7
- package/components/Hint/themes/dark/hint.scss +0 -8
- package/components/Login/themes/dark/login.scss +0 -12
- package/components/Masthead/themes/dark/masthead.scss +0 -14
- package/components/ModalBox/themes/dark/modal-box.scss +0 -7
- package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
- package/components/Page/themes/dark/page.scss +0 -69
- package/components/Popover/themes/dark/popover.scss +0 -11
- package/components/Tooltip/themes/dark/tooltip.scss +0 -8
- package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
|
@@ -19,6 +19,7 @@ wrapperTag: div
|
|
|
19
19
|
class="pf-v5-c-brand"
|
|
20
20
|
src="/assets/images/pf_logo_color.svg"
|
|
21
21
|
alt="PatternFly Logo"
|
|
22
|
+
style="--pf-v5-c-brand--Height:48px;"
|
|
22
23
|
/>
|
|
23
24
|
</header>
|
|
24
25
|
<main class="pf-v5-c-login__main">
|
|
@@ -228,6 +229,7 @@ wrapperTag: div
|
|
|
228
229
|
class="pf-v5-c-brand"
|
|
229
230
|
src="/assets/images/pf_logo_color.svg"
|
|
230
231
|
alt="PatternFly Logo"
|
|
232
|
+
style="--pf-v5-c-brand--Height:48px;"
|
|
231
233
|
/>
|
|
232
234
|
</header>
|
|
233
235
|
<main class="pf-v5-c-login__main">
|
|
@@ -454,6 +456,7 @@ wrapperTag: div
|
|
|
454
456
|
class="pf-v5-c-brand"
|
|
455
457
|
src="/assets/images/pf_logo_color.svg"
|
|
456
458
|
alt="PatternFly Logo"
|
|
459
|
+
style="--pf-v5-c-brand--Height:48px;"
|
|
457
460
|
/>
|
|
458
461
|
</header>
|
|
459
462
|
<main class="pf-v5-c-login__main">
|
|
@@ -673,6 +676,7 @@ wrapperTag: div
|
|
|
673
676
|
class="pf-v5-c-brand"
|
|
674
677
|
src="/assets/images/pf_logo_color.svg"
|
|
675
678
|
alt="PatternFly Logo"
|
|
679
|
+
style="--pf-v5-c-brand--Height:48px;"
|
|
676
680
|
/>
|
|
677
681
|
</header>
|
|
678
682
|
<main class="pf-v5-c-login__main">
|
|
@@ -899,6 +903,7 @@ wrapperTag: div
|
|
|
899
903
|
class="pf-v5-c-brand"
|
|
900
904
|
src="/assets/images/pf_logo_color.svg"
|
|
901
905
|
alt="PatternFly Logo"
|
|
906
|
+
style="--pf-v5-c-brand--Height:48px;"
|
|
902
907
|
/>
|
|
903
908
|
</header>
|
|
904
909
|
<main class="pf-v5-c-login__main">
|
|
@@ -44,12 +44,13 @@ cssPrefix: pf-v5-c-masthead
|
|
|
44
44
|
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
45
45
|
</div>
|
|
46
46
|
<div class="pf-v5-c-masthead__content">
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
</
|
|
47
|
+
<span>Content</span>
|
|
48
|
+
<button
|
|
49
|
+
class="pf-v5-c-button pf-m-primary pf-v5-u-text-align-right"
|
|
50
|
+
type="button"
|
|
51
|
+
>Primary</button>
|
|
52
|
+
<button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
|
|
53
|
+
<button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
|
|
53
54
|
</div>
|
|
54
55
|
</header>
|
|
55
56
|
|
|
@@ -127,52 +128,6 @@ cssPrefix: pf-v5-c-masthead
|
|
|
127
128
|
|
|
128
129
|
```
|
|
129
130
|
|
|
130
|
-
### Light variant
|
|
131
|
-
|
|
132
|
-
```html
|
|
133
|
-
<header class="pf-v5-c-masthead pf-m-light" id="light-masthead">
|
|
134
|
-
<span class="pf-v5-c-masthead__toggle">
|
|
135
|
-
<button
|
|
136
|
-
class="pf-v5-c-button pf-m-plain"
|
|
137
|
-
type="button"
|
|
138
|
-
aria-label="Global navigation"
|
|
139
|
-
>
|
|
140
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
141
|
-
</button>
|
|
142
|
-
</span>
|
|
143
|
-
<div class="pf-v5-c-masthead__main">
|
|
144
|
-
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
145
|
-
</div>
|
|
146
|
-
<div class="pf-v5-c-masthead__content">
|
|
147
|
-
<span>Content</span>
|
|
148
|
-
</div>
|
|
149
|
-
</header>
|
|
150
|
-
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
### Light 200 variant
|
|
154
|
-
|
|
155
|
-
```html
|
|
156
|
-
<header class="pf-v5-c-masthead pf-m-light-200" id="light-200-masthead">
|
|
157
|
-
<span class="pf-v5-c-masthead__toggle">
|
|
158
|
-
<button
|
|
159
|
-
class="pf-v5-c-button pf-m-plain"
|
|
160
|
-
type="button"
|
|
161
|
-
aria-label="Global navigation"
|
|
162
|
-
>
|
|
163
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
164
|
-
</button>
|
|
165
|
-
</span>
|
|
166
|
-
<div class="pf-v5-c-masthead__main">
|
|
167
|
-
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
168
|
-
</div>
|
|
169
|
-
<div class="pf-v5-c-masthead__content">
|
|
170
|
-
<span>Content</span>
|
|
171
|
-
</div>
|
|
172
|
-
</header>
|
|
173
|
-
|
|
174
|
-
```
|
|
175
|
-
|
|
176
131
|
### Insets
|
|
177
132
|
|
|
178
133
|
```html
|
|
@@ -208,5 +163,3 @@ cssPrefix: pf-v5-c-masthead
|
|
|
208
163
|
| `.pf-v5-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component. |
|
|
209
164
|
| `.pf-v5-c-masthead__content` | `<div>` | Initiates the masthead content component. |
|
|
210
165
|
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v5-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
211
|
-
| `.pf-m-light` | `.pf-v5-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-v5-global--BackgroundColor--100`. |
|
|
212
|
-
| `.pf-m-light-200` | `.pf-v5-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-v5-global--BackgroundColor--200`. |
|
|
@@ -16,3 +16,11 @@
|
|
|
16
16
|
align-items: flex-end;
|
|
17
17
|
justify-content: flex-end;
|
|
18
18
|
}
|
|
19
|
+
|
|
20
|
+
:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) {
|
|
21
|
+
position: relative;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) .pf-v5-c-breadcrumb__dropdown .pf-v5-c-menu {
|
|
25
|
+
position: absolute;
|
|
26
|
+
}
|