@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50
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 +1 -1
- package/assets/fontawesome/_variables.scss +2 -1
- package/assets/images/RHAiExperienceIcon.svg +27 -0
- package/assets/images/RHAutomationsLogo.svg +96 -0
- package/assets/images/RHServerStackIcon.svg +16 -0
- package/assets/images/compass--hero-bg.png +0 -0
- package/assets/images/compass--rh-wallpaper-dark.png +0 -0
- package/assets/images/compass--rh-wallpaper-light.png +0 -0
- package/assets/images/compass--wallpaper-dark.png +0 -0
- package/assets/images/compass--wallpaper-light.png +0 -0
- package/base/normalize.scss +7 -0
- package/base/patternfly-common.css +50 -0
- package/base/patternfly-common.scss +59 -0
- package/base/patternfly-svg-icons.css +11 -0
- package/base/patternfly-svg-icons.scss +14 -0
- package/base/patternfly-variables.css +345 -14
- package/base/patternfly-variables.scss +40 -0
- package/base/tokens/tokens-dark.scss +51 -3
- package/base/tokens/tokens-default.scss +67 -13
- package/base/tokens/tokens-glass-dark.scss +9 -0
- package/base/tokens/tokens-glass.scss +9 -0
- package/base/tokens/tokens-local.scss +16 -0
- package/base/tokens/tokens-palette.scss +3 -1
- package/base/tokens/tokens-redhat-dark.scss +14 -0
- package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
- package/base/tokens/tokens-redhat-glass.scss +15 -0
- package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
- package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
- package/base/tokens/tokens-redhat.scss +15 -0
- package/components/AboutModalBox/about-modal-box.css +36 -26
- package/components/Accordion/accordion.css +17 -14
- package/components/Accordion/accordion.scss +1 -2
- package/components/ActionList/action-list.css +2 -0
- package/components/ActionList/action-list.scss +2 -0
- package/components/Alert/alert.css +7 -5
- package/components/Alert/alert.scss +2 -1
- package/components/Avatar/avatar.css +12 -4
- package/components/BackgroundImage/background-image.css +6 -3
- package/components/Banner/banner.css +8 -6
- package/components/Brand/brand.css +3 -1
- package/components/Breadcrumb/breadcrumb.css +4 -3
- package/components/Button/button.css +117 -14
- package/components/Button/button.scss +127 -10
- package/components/CalendarMonth/calendar-month.css +4 -3
- package/components/Card/card.css +20 -7
- package/components/Card/card.scss +16 -2
- package/components/ClipboardCopy/clipboard-copy.css +7 -6
- package/components/ClipboardCopy/clipboard-copy.scss +3 -3
- package/components/CodeEditor/code-editor.css +1 -1
- package/components/CodeEditor/code-editor.scss +1 -1
- package/components/Compass/compass.css +320 -0
- package/components/Compass/compass.scss +350 -0
- package/components/DataList/data-list.css +34 -23
- package/components/DataList/data-list.scss +7 -2
- package/components/DescriptionList/description-list-order.scss +5 -1
- package/components/DescriptionList/description-list.css +7 -5
- package/components/DescriptionList/description-list.scss +5 -1
- package/components/Divider/divider.css +7 -5
- package/components/Drawer/drawer.css +110 -56
- package/components/Drawer/drawer.scss +69 -9
- package/components/DualListSelector/dual-list-selector.css +18 -12
- package/components/DualListSelector/dual-list-selector.scss +1 -1
- package/components/ExpandableSection/expandable-section.css +21 -16
- package/components/ExpandableSection/expandable-section.scss +6 -3
- package/components/Form/form.css +2 -2
- package/components/Form/form.scss +2 -2
- package/components/FormControl/form-control.css +3 -3
- package/components/FormControl/form-control.scss +3 -3
- package/components/Hero/hero.css +74 -0
- package/components/Hero/hero.scss +86 -0
- package/components/JumpLinks/jump-links.css +5 -4
- package/components/JumpLinks/jump-links.scss +6 -2
- package/components/Label/label-group.css +2 -2
- package/components/Label/label-group.scss +2 -2
- package/components/Label/label.css +4 -3
- package/components/Login/login.css +51 -37
- package/components/Masthead/masthead.css +70 -16
- package/components/Masthead/masthead.scss +54 -1
- package/components/Menu/menu.css +23 -14
- package/components/MenuToggle/menu-toggle.css +5 -1
- package/components/MenuToggle/menu-toggle.scss +6 -1
- package/components/ModalBox/modal-box.css +9 -7
- package/components/ModalBox/modal-box.scss +2 -2
- package/components/Nav/nav.css +74 -11
- package/components/Nav/nav.scss +77 -5
- package/components/NotificationDrawer/notification-drawer.css +19 -9
- package/components/NotificationDrawer/notification-drawer.scss +14 -5
- package/components/Page/page.css +55 -29
- package/components/Page/page.scss +44 -5
- package/components/Pagination/pagination.scss +5 -1
- package/components/ProgressStepper/progress-stepper.scss +5 -1
- package/components/Sidebar/sidebar.css +1 -1
- package/components/Sidebar/sidebar.scss +7 -3
- package/components/Skeleton/skeleton.css +16 -15
- package/components/Slider/slider.css +32 -18
- package/components/Switch/switch.css +4 -2
- package/components/Switch/switch.scss +1 -1
- package/components/Table/table-grid.css +28 -36
- package/components/Table/table-grid.scss +4 -4
- package/components/Table/table-tree-view.css +4 -2
- package/components/Table/table.css +33 -29
- package/components/Table/table.scss +2 -2
- package/components/Tabs/tabs.css +35 -18
- package/components/Tabs/tabs.scss +35 -7
- package/components/TextInputGroup/text-input-group.css +2 -2
- package/components/TextInputGroup/text-input-group.scss +2 -2
- package/components/ToggleGroup/toggle-group.css +34 -17
- package/components/ToggleGroup/toggle-group.scss +36 -20
- package/components/Toolbar/toolbar.css +47 -15
- package/components/Toolbar/toolbar.scss +34 -6
- package/components/TreeView/tree-view.css +45 -14
- package/components/TreeView/tree-view.scss +32 -1
- package/components/Wizard/wizard.css +21 -17
- package/components/Wizard/wizard.scss +4 -4
- package/components/_index.css +1602 -676
- package/components/_index.scss +3 -1
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
- package/docs/components/Accordion/examples/Accordion.md +390 -30
- package/docs/components/ActionList/examples/ActionList.md +143 -11
- package/docs/components/Alert/examples/Alert.md +678 -54
- package/docs/components/Avatar/examples/Avatar.md +4 -4
- package/docs/components/BackToTop/examples/BackToTop.md +13 -1
- package/docs/components/Banner/examples/Banner.md +65 -5
- package/docs/components/Brand/examples/Brand.md +2 -2
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
- package/docs/components/Button/examples/Button.md +2217 -241
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
- package/docs/components/Card/examples/Card.md +206 -4
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
- package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
- package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
- package/docs/components/Compass/examples/Compass.css +17 -0
- package/docs/components/Compass/examples/Compass.md +119 -0
- package/docs/components/DataList/examples/DataList.md +405 -205
- package/docs/components/DatePicker/examples/DatePicker.md +78 -6
- package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +353 -35
- package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
- package/docs/components/Form/examples/Form.md +78 -6
- package/docs/components/Hero/examples/Hero.md +25 -0
- package/docs/components/Icon/examples/Icon.md +92 -8
- package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
- package/docs/components/InputGroup/examples/InputGroup.md +27 -3
- package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
- package/docs/components/Label/examples/Label.md +2834 -218
- package/docs/components/Login/examples/Login.md +26 -2
- package/docs/components/Masthead/examples/masthead.md +80 -1
- package/docs/components/Menu/examples/Menu.md +1458 -114
- package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
- package/docs/components/ModalBox/examples/ModalBox.md +287 -23
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
- package/docs/components/Nav/examples/Navigation.md +798 -58
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
- package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
- package/docs/components/Page/examples/Page.md +51 -2
- package/docs/components/Pagination/examples/Pagination.md +627 -51
- package/docs/components/Popover/examples/Popover.md +286 -22
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
- package/docs/components/Sidebar/examples/Sidebar.md +1 -1
- package/docs/components/Slider/examples/Slider.md +52 -4
- package/docs/components/Table/examples/Table.md +875 -70
- package/docs/components/Tabs/examples/Tabs.md +4127 -320
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
- package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
- package/docs/components/Toolbar/examples/Toolbar.md +490 -42
- package/docs/components/TreeView/examples/TreeView.md +1390 -130
- package/docs/components/Wizard/examples/Wizard.md +492 -72
- package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
- package/docs/demos/Alert/examples/Alert.md +236 -32
- package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
- package/docs/demos/Banner/examples/Banner.md +88 -16
- package/docs/demos/Button/examples/Button.md +13 -1
- package/docs/demos/Card/examples/Card.md +399 -42
- package/docs/demos/CardView/examples/CardView.md +161 -17
- package/docs/demos/Compass/examples/Compass.md +6836 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
- package/docs/demos/DataList/examples/DataList.md +566 -65
- package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
- package/docs/demos/Drawer/examples/Drawer.md +216 -45
- package/docs/demos/Form/examples/BasicForms.md +273 -21
- package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
- package/docs/demos/Masthead/examples/Masthead.md +458 -89
- package/docs/demos/Modal/examples/Modal.md +342 -57
- package/docs/demos/Nav/examples/Nav.md +660 -87
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
- package/docs/demos/Page/examples/Page.md +618 -123
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
- package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
- package/docs/demos/Table/examples/Table.md +3924 -256
- package/docs/demos/Tabs/examples/Tabs.md +407 -65
- package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
- package/docs/demos/Wizard/examples/Wizard.md +796 -130
- package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
- package/docs/layouts/Flex/examples/Flex.css +3 -3
- package/docs/layouts/Flex/examples/Flex.md +3 -2
- package/docs/layouts/Gallery/examples/Gallery.css +2 -2
- package/docs/layouts/Gallery/examples/Gallery.md +4 -3
- package/docs/layouts/Grid/examples/Grid.css +1 -1
- package/docs/layouts/Grid/examples/Grid.md +6 -5
- package/docs/layouts/Level/examples/Level.css +3 -3
- package/docs/layouts/Level/examples/Level.md +2 -1
- package/docs/layouts/Split/examples/Split.css +1 -1
- package/docs/layouts/Split/examples/Split.md +2 -1
- package/docs/layouts/Stack/examples/Stack.css +3 -3
- package/docs/layouts/Stack/examples/Stack.md +2 -1
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
- package/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +3 -2
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
- package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
- package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
- package/docs/utilities/Display/examples/Display.css +1 -1
- package/docs/utilities/Display/examples/Display.md +3 -2
- package/docs/utilities/Flex/examples/Flex.css +7 -7
- package/docs/utilities/Flex/examples/Flex.md +3 -2
- package/docs/utilities/Float/examples/Float.css +2 -2
- package/docs/utilities/Float/examples/Float.md +3 -2
- package/docs/utilities/Sizing/examples/Sizing.md +8 -7
- package/docs/utilities/Spacing/examples/Spacing.css +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +3 -2
- package/docs/utilities/Text/examples/Text.md +5 -4
- package/icons/PfIcons/add-circle-o.svg +4 -0
- package/icons/PfIcons/ansible-tower.svg +4 -0
- package/icons/PfIcons/applications.svg +4 -0
- package/icons/PfIcons/arrow.svg +4 -0
- package/icons/PfIcons/asleep.svg +4 -0
- package/icons/PfIcons/attention-bell.svg +4 -0
- package/icons/PfIcons/automation.svg +4 -0
- package/icons/PfIcons/bell.svg +4 -0
- package/icons/PfIcons/blueprint.svg +4 -0
- package/icons/PfIcons/build.svg +4 -0
- package/icons/PfIcons/builder-image.svg +4 -0
- package/icons/PfIcons/bundle.svg +4 -0
- package/icons/PfIcons/catalog.svg +4 -0
- package/icons/PfIcons/chat.svg +4 -0
- package/icons/PfIcons/close.svg +4 -0
- package/icons/PfIcons/cloud-security.svg +4 -0
- package/icons/PfIcons/cloud-tenant.svg +4 -0
- package/icons/PfIcons/cluster.svg +4 -0
- package/icons/PfIcons/connected.svg +4 -0
- package/icons/PfIcons/container-node.svg +4 -0
- package/icons/PfIcons/cpu.svg +4 -0
- package/icons/PfIcons/critical-risk.svg +4 -0
- package/icons/PfIcons/data-processor.svg +4 -0
- package/icons/PfIcons/data-sink.svg +4 -0
- package/icons/PfIcons/data-source.svg +4 -0
- package/icons/PfIcons/degraded.svg +4 -0
- package/icons/PfIcons/disconnected.svg +4 -0
- package/icons/PfIcons/domain.svg +4 -0
- package/icons/PfIcons/edit.svg +4 -0
- package/icons/PfIcons/enhancement.svg +4 -0
- package/icons/PfIcons/enterprise.svg +4 -0
- package/icons/PfIcons/equalizer.svg +4 -0
- package/icons/PfIcons/error-circle-o.svg +4 -0
- package/icons/PfIcons/export.svg +4 -0
- package/icons/PfIcons/filter.svg +4 -0
- package/icons/PfIcons/flavor.svg +4 -0
- package/icons/PfIcons/folder-close.svg +4 -0
- package/icons/PfIcons/folder-open.svg +4 -0
- package/icons/PfIcons/globe-route.svg +4 -0
- package/icons/PfIcons/help.svg +4 -0
- package/icons/PfIcons/history.svg +4 -0
- package/icons/PfIcons/home.svg +4 -0
- package/icons/PfIcons/import.svg +4 -0
- package/icons/PfIcons/in-progress.svg +4 -0
- package/icons/PfIcons/info.svg +4 -0
- package/icons/PfIcons/infrastructure.svg +4 -0
- package/icons/PfIcons/integration.svg +4 -0
- package/icons/PfIcons/key.svg +4 -0
- package/icons/PfIcons/locked.svg +4 -0
- package/icons/PfIcons/maintenance.svg +4 -0
- package/icons/PfIcons/memory.svg +4 -0
- package/icons/PfIcons/messages.svg +4 -0
- package/icons/PfIcons/middleware.svg +4 -0
- package/icons/PfIcons/migration.svg +4 -0
- package/icons/PfIcons/module.svg +4 -0
- package/icons/PfIcons/monitoring.svg +4 -0
- package/icons/PfIcons/multicluster.svg +4 -0
- package/icons/PfIcons/namespaces.svg +4 -0
- package/icons/PfIcons/network.svg +4 -0
- package/icons/PfIcons/new-process.svg +4 -0
- package/icons/PfIcons/not-started.svg +4 -0
- package/icons/PfIcons/off.svg +4 -0
- package/icons/PfIcons/ok.svg +4 -0
- package/icons/PfIcons/on-running.svg +4 -0
- package/icons/PfIcons/on.svg +4 -0
- package/icons/PfIcons/open-drawer-right.svg +4 -0
- package/icons/PfIcons/openshift.svg +4 -0
- package/icons/PfIcons/openstack.svg +4 -0
- package/icons/PfIcons/optimize.svg +4 -0
- package/icons/PfIcons/orders.svg +4 -0
- package/icons/PfIcons/os-image.svg +4 -0
- package/icons/PfIcons/package.svg +4 -0
- package/icons/PfIcons/panel-close.svg +4 -0
- package/icons/PfIcons/panel-open.svg +4 -0
- package/icons/PfIcons/paused.svg +4 -0
- package/icons/PfIcons/pending.svg +4 -0
- package/icons/PfIcons/pficon-dragdrop.svg +4 -0
- package/icons/PfIcons/pficon-history.svg +4 -0
- package/icons/PfIcons/pficon-network-range.svg +4 -0
- package/icons/PfIcons/pficon-satellite.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
- package/icons/PfIcons/pficon-template.svg +4 -0
- package/icons/PfIcons/pficon-vcenter.svg +4 -0
- package/icons/PfIcons/plugged.svg +4 -0
- package/icons/PfIcons/port.svg +4 -0
- package/icons/PfIcons/print.svg +4 -0
- package/icons/PfIcons/private.svg +4 -0
- package/icons/PfIcons/process-automation.svg +4 -0
- package/icons/PfIcons/project.svg +4 -0
- package/icons/PfIcons/rebalance.svg +4 -0
- package/icons/PfIcons/rebooting.svg +4 -0
- package/icons/PfIcons/regions.svg +4 -0
- package/icons/PfIcons/registry.svg +4 -0
- package/icons/PfIcons/remove2.svg +4 -0
- package/icons/PfIcons/replicator.svg +4 -0
- package/icons/PfIcons/repository.svg +4 -0
- package/icons/PfIcons/resource-pool.svg +4 -0
- package/icons/PfIcons/resources-almost-empty.svg +4 -0
- package/icons/PfIcons/resources-almost-full.svg +4 -0
- package/icons/PfIcons/resources-empty.svg +4 -0
- package/icons/PfIcons/resources-full.svg +4 -0
- package/icons/PfIcons/running.svg +4 -0
- package/icons/PfIcons/save.svg +4 -0
- package/icons/PfIcons/screen.svg +4 -0
- package/icons/PfIcons/security.svg +4 -0
- package/icons/PfIcons/server-group.svg +4 -0
- package/icons/PfIcons/server.svg +4 -0
- package/icons/PfIcons/service-catalog.svg +4 -0
- package/icons/PfIcons/service.svg +4 -0
- package/icons/PfIcons/services.svg +4 -0
- package/icons/PfIcons/severity-critical.svg +4 -0
- package/icons/PfIcons/severity-important.svg +4 -0
- package/icons/PfIcons/severity-minor.svg +4 -0
- package/icons/PfIcons/severity-moderate.svg +4 -0
- package/icons/PfIcons/severity-none.svg +4 -0
- package/icons/PfIcons/severity-undefined.svg +4 -0
- package/icons/PfIcons/spinner.svg +4 -0
- package/icons/PfIcons/spinner2.svg +4 -0
- package/icons/PfIcons/storage-domain.svg +4 -0
- package/icons/PfIcons/task.svg +4 -0
- package/icons/PfIcons/tenant.svg +4 -0
- package/icons/PfIcons/thumb-tack.svg +4 -0
- package/icons/PfIcons/topology.svg +4 -0
- package/icons/PfIcons/treeview.svg +4 -0
- package/icons/PfIcons/trend-down.svg +4 -0
- package/icons/PfIcons/trend-up.svg +4 -0
- package/icons/PfIcons/unknown.svg +4 -0
- package/icons/PfIcons/unlocked.svg +4 -0
- package/icons/PfIcons/unplugged.svg +4 -0
- package/icons/PfIcons/user.svg +4 -0
- package/icons/PfIcons/users.svg +4 -0
- package/icons/PfIcons/virtual-machine.svg +4 -0
- package/icons/PfIcons/volume.svg +4 -0
- package/icons/PfIcons/warning-triangle.svg +4 -0
- package/icons/PfIcons/zone.svg +4 -0
- package/layouts/Flex/flex.scss +83 -19
- package/layouts/Gallery/gallery.css +6 -2
- package/layouts/_index.css +6 -2
- package/package.json +34 -16
- package/patternfly-base-no-globals.css +406 -14
- package/patternfly-base.css +413 -14
- package/patternfly-charts.css +3 -3
- package/patternfly-no-globals.css +1947 -625
- package/patternfly.css +1954 -625
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +32 -25
- package/sass-utilities/mixins.scss +36 -20
- package/sass-utilities/namespaces-components.scss +6 -0
|
@@ -567,7 +567,19 @@ wrapperTag: div
|
|
|
567
567
|
aria-label="Show password"
|
|
568
568
|
>
|
|
569
569
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
570
|
-
<
|
|
570
|
+
<svg
|
|
571
|
+
class="pf-v6-svg"
|
|
572
|
+
viewBox="0 0 576 512"
|
|
573
|
+
fill="currentColor"
|
|
574
|
+
aria-hidden="true"
|
|
575
|
+
role="img"
|
|
576
|
+
width="1em"
|
|
577
|
+
height="1em"
|
|
578
|
+
>
|
|
579
|
+
<path
|
|
580
|
+
d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
|
|
581
|
+
/>
|
|
582
|
+
</svg>
|
|
571
583
|
</span>
|
|
572
584
|
</button>
|
|
573
585
|
</div>
|
|
@@ -820,7 +832,19 @@ wrapperTag: div
|
|
|
820
832
|
aria-label="Hide password"
|
|
821
833
|
>
|
|
822
834
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
823
|
-
<
|
|
835
|
+
<svg
|
|
836
|
+
class="pf-v6-svg"
|
|
837
|
+
viewBox="0 0 640 512"
|
|
838
|
+
fill="currentColor"
|
|
839
|
+
aria-hidden="true"
|
|
840
|
+
role="img"
|
|
841
|
+
width="1em"
|
|
842
|
+
height="1em"
|
|
843
|
+
>
|
|
844
|
+
<path
|
|
845
|
+
d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
|
|
846
|
+
/>
|
|
847
|
+
</svg>
|
|
824
848
|
</span>
|
|
825
849
|
</button>
|
|
826
850
|
</div>
|
|
@@ -684,6 +684,84 @@ cssPrefix: pf-v6-c-masthead
|
|
|
684
684
|
|
|
685
685
|
```
|
|
686
686
|
|
|
687
|
+
### Docked
|
|
688
|
+
|
|
689
|
+
```html isBeta
|
|
690
|
+
<header class="pf-v6-c-masthead pf-m-docked" id="docked-masthead-example">
|
|
691
|
+
<div class="pf-v6-c-masthead__main">
|
|
692
|
+
<div class="pf-v6-c-masthead__brand">
|
|
693
|
+
<a class="pf-v6-c-masthead__logo" href="#">
|
|
694
|
+
<svg width="37px" height="37px" viewBox="0 0 158 158">
|
|
695
|
+
<title>PF-HorizontalLogo-Color</title>
|
|
696
|
+
<defs>
|
|
697
|
+
<linearGradient
|
|
698
|
+
x1="68%"
|
|
699
|
+
y1="2.25860997e-13%"
|
|
700
|
+
x2="32%"
|
|
701
|
+
y2="100%"
|
|
702
|
+
id="linearGradient-1"
|
|
703
|
+
>
|
|
704
|
+
<stop stop-color="#2B9AF3" offset="0%" />
|
|
705
|
+
<stop
|
|
706
|
+
stop-color="#73BCF7"
|
|
707
|
+
stop-opacity="0.502212631"
|
|
708
|
+
offset="100%"
|
|
709
|
+
/>
|
|
710
|
+
</linearGradient>
|
|
711
|
+
</defs>
|
|
712
|
+
<g
|
|
713
|
+
id="PF-IconLogo-color"
|
|
714
|
+
stroke="none"
|
|
715
|
+
stroke-width="1"
|
|
716
|
+
fill="none"
|
|
717
|
+
fill-rule="evenodd"
|
|
718
|
+
>
|
|
719
|
+
<g id="Logo">
|
|
720
|
+
<path
|
|
721
|
+
d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
|
|
722
|
+
id="Rectangle-Copy-17"
|
|
723
|
+
fill="#0066CC"
|
|
724
|
+
/>
|
|
725
|
+
<path
|
|
726
|
+
d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
|
|
727
|
+
id="Path-2"
|
|
728
|
+
fill="url(#linearGradient-1)"
|
|
729
|
+
/>
|
|
730
|
+
<path
|
|
731
|
+
d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
|
|
732
|
+
id="Path-2"
|
|
733
|
+
fill="url(#linearGradient-1)"
|
|
734
|
+
transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
|
|
735
|
+
/>
|
|
736
|
+
</g>
|
|
737
|
+
</g>
|
|
738
|
+
</svg>
|
|
739
|
+
</a>
|
|
740
|
+
</div>
|
|
741
|
+
</div>
|
|
742
|
+
<div class="pf-v6-c-masthead__content">
|
|
743
|
+
<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Chat">
|
|
744
|
+
<span class="pf-v6-c-button__icon">
|
|
745
|
+
<svg
|
|
746
|
+
class="pf-v6-svg"
|
|
747
|
+
viewBox="0 0 512 512"
|
|
748
|
+
fill="currentColor"
|
|
749
|
+
aria-hidden="true"
|
|
750
|
+
role="img"
|
|
751
|
+
width="1em"
|
|
752
|
+
height="1em"
|
|
753
|
+
>
|
|
754
|
+
<path
|
|
755
|
+
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
|
|
756
|
+
/>
|
|
757
|
+
</svg>
|
|
758
|
+
</span>
|
|
759
|
+
</button>
|
|
760
|
+
</div>
|
|
761
|
+
</header>
|
|
762
|
+
|
|
763
|
+
```
|
|
764
|
+
|
|
687
765
|
## Documentation
|
|
688
766
|
|
|
689
767
|
### Usage
|
|
@@ -696,4 +774,5 @@ cssPrefix: pf-v6-c-masthead
|
|
|
696
774
|
| `.pf-v6-c-masthead__brand` | `<div>` | Initiates the masthead content component. |
|
|
697
775
|
| `.pf-v6-c-masthead__logo` | `<a>, <div>` | Initiates the masthead content component. |
|
|
698
776
|
| `.pf-v6-c-masthead__content` | `<div>` | Initiates the masthead content component. |
|
|
699
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/tokens/all-
|
|
777
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
778
|
+
| `.pf-m-docked` | `.pf-v6-c-masthead` | Modifies masthead for use with docked nav. |
|