@patternfly/patternfly 6.0.0-alpha.4 → 6.0.0-alpha.41

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.
Files changed (346) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -9
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -5
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +889 -787
  29. package/base/tokens/_tokens-dark.scss +322 -265
  30. package/base/tokens/_tokens-default.scss +428 -306
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +69 -71
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +2 -2
  39. package/components/ActionList/action-list.scss +2 -2
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -15
  49. package/components/BackToTop/back-to-top.scss +14 -13
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +35 -23
  61. package/components/Button/button.scss +36 -26
  62. package/components/Button/themes/dark/button.scss +1 -1
  63. package/components/CalendarMonth/calendar-month.css +25 -15
  64. package/components/CalendarMonth/calendar-month.scss +23 -15
  65. package/components/Card/card.css +28 -17
  66. package/components/Card/card.scss +32 -17
  67. package/components/Check/check.css +12 -10
  68. package/components/Check/check.scss +17 -12
  69. package/components/Chip/chip-group.css +6 -6
  70. package/components/Chip/chip-group.scss +6 -6
  71. package/components/Chip/chip.css +16 -9
  72. package/components/Chip/chip.scss +17 -9
  73. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  74. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  75. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  76. package/components/CodeBlock/code-block.css +6 -3
  77. package/components/CodeBlock/code-block.scss +6 -3
  78. package/components/CodeEditor/code-editor.css +31 -22
  79. package/components/CodeEditor/code-editor.scss +30 -21
  80. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  81. package/components/Content/content.css +100 -97
  82. package/components/Content/content.scss +101 -98
  83. package/components/ContextSelector/context-selector.css +41 -26
  84. package/components/ContextSelector/context-selector.scss +40 -25
  85. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  86. package/components/DataList/data-list-grid.css +21 -21
  87. package/components/DataList/data-list-grid.scss +3 -3
  88. package/components/DataList/data-list.css +69 -56
  89. package/components/DataList/data-list.scss +47 -35
  90. package/components/DatePicker/date-picker.css +8 -8
  91. package/components/DatePicker/date-picker.scss +8 -8
  92. package/components/DescriptionList/description-list.css +8 -5
  93. package/components/DescriptionList/description-list.scss +8 -5
  94. package/components/Divider/divider.css +97 -177
  95. package/components/Divider/divider.scss +60 -79
  96. package/components/DragDrop/drag-drop.css +8 -8
  97. package/components/DragDrop/drag-drop.scss +8 -8
  98. package/components/Drawer/drawer.css +120 -62
  99. package/components/Drawer/drawer.scss +94 -44
  100. package/components/Dropdown/dropdown.css +76 -69
  101. package/components/Dropdown/dropdown.scss +67 -62
  102. package/components/DualListSelector/dual-list-selector.css +29 -15
  103. package/components/DualListSelector/dual-list-selector.scss +30 -15
  104. package/components/EmptyState/empty-state.css +64 -38
  105. package/components/EmptyState/empty-state.scss +70 -38
  106. package/components/ExpandableSection/expandable-section.css +75 -66
  107. package/components/ExpandableSection/expandable-section.scss +82 -80
  108. package/components/FileUpload/file-upload.css +9 -15
  109. package/components/FileUpload/file-upload.scss +9 -15
  110. package/components/Form/form.css +59 -50
  111. package/components/Form/form.scss +50 -45
  112. package/components/FormControl/form-control.css +18 -9
  113. package/components/FormControl/form-control.scss +18 -9
  114. package/components/HelperText/helper-text.css +29 -35
  115. package/components/HelperText/helper-text.scss +31 -41
  116. package/components/Hint/hint.css +37 -27
  117. package/components/Hint/hint.scss +37 -30
  118. package/components/Icon/icon.css +1 -1
  119. package/components/Icon/icon.scss +1 -1
  120. package/components/InlineEdit/inline-edit.css +9 -9
  121. package/components/InlineEdit/inline-edit.scss +9 -9
  122. package/components/InputGroup/input-group.css +12 -6
  123. package/components/InputGroup/input-group.scss +11 -5
  124. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  125. package/components/JumpLinks/jump-links.css +27 -24
  126. package/components/JumpLinks/jump-links.scss +26 -24
  127. package/components/Label/label-group.css +13 -10
  128. package/components/Label/label-group.scss +13 -10
  129. package/components/Label/label.css +9 -9
  130. package/components/Label/label.scss +9 -9
  131. package/components/List/list.css +25 -25
  132. package/components/List/list.scss +26 -26
  133. package/components/LogViewer/log-viewer.css +14 -14
  134. package/components/LogViewer/log-viewer.scss +14 -14
  135. package/components/Login/login.css +104 -122
  136. package/components/Login/login.scss +92 -91
  137. package/components/Masthead/masthead.css +273 -498
  138. package/components/Masthead/masthead.scss +137 -282
  139. package/components/Menu/menu.css +82 -65
  140. package/components/Menu/menu.scss +85 -69
  141. package/components/MenuToggle/menu-toggle.css +90 -100
  142. package/components/MenuToggle/menu-toggle.scss +93 -111
  143. package/components/ModalBox/modal-box.css +76 -69
  144. package/components/ModalBox/modal-box.scss +74 -70
  145. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  146. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  147. package/components/Nav/nav.css +162 -133
  148. package/components/Nav/nav.scss +162 -135
  149. package/components/Nav/themes/dark/nav.scss +2 -2
  150. package/components/NotificationBadge/notification-badge.css +66 -85
  151. package/components/NotificationBadge/notification-badge.scss +72 -103
  152. package/components/NotificationDrawer/notification-drawer.css +32 -19
  153. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  154. package/components/NumberInput/number-input.css +2 -2
  155. package/components/NumberInput/number-input.scss +2 -2
  156. package/components/OptionsMenu/options-menu.css +43 -31
  157. package/components/OptionsMenu/options-menu.scss +43 -31
  158. package/components/OverflowMenu/overflow-menu.css +2 -2
  159. package/components/OverflowMenu/overflow-menu.scss +2 -2
  160. package/components/Page/page.css +232 -271
  161. package/components/Page/page.scss +180 -231
  162. package/components/Pagination/pagination.css +71 -121
  163. package/components/Pagination/pagination.scss +56 -127
  164. package/components/Panel/panel.css +13 -7
  165. package/components/Panel/panel.scss +13 -7
  166. package/components/Popover/popover.css +108 -87
  167. package/components/Popover/popover.scss +120 -109
  168. package/components/Progress/progress.css +9 -7
  169. package/components/Progress/progress.scss +12 -7
  170. package/components/ProgressStepper/progress-stepper.css +26 -20
  171. package/components/ProgressStepper/progress-stepper.scss +25 -19
  172. package/components/Radio/radio.css +16 -13
  173. package/components/Radio/radio.scss +20 -14
  174. package/components/Select/select.css +56 -47
  175. package/components/Select/select.scss +56 -47
  176. package/components/Sidebar/sidebar.css +11 -5
  177. package/components/Sidebar/sidebar.scss +11 -5
  178. package/components/SimpleList/simple-list.css +45 -56
  179. package/components/SimpleList/simple-list.scss +51 -55
  180. package/components/Skeleton/skeleton.css +24 -25
  181. package/components/Skeleton/skeleton.scss +21 -26
  182. package/components/SkipToContent/skip-to-content.css +9 -6
  183. package/components/SkipToContent/skip-to-content.scss +8 -6
  184. package/components/Slider/slider.css +47 -26
  185. package/components/Slider/slider.scss +56 -28
  186. package/components/Switch/switch.css +10 -6
  187. package/components/Switch/switch.scss +11 -7
  188. package/components/TabContent/tab-content.css +4 -1
  189. package/components/TabContent/tab-content.scss +4 -1
  190. package/components/Table/table-grid.css +264 -203
  191. package/components/Table/table-grid.scss +61 -47
  192. package/components/Table/table-scrollable.css +4 -4
  193. package/components/Table/table-scrollable.scss +6 -4
  194. package/components/Table/table-tree-view.css +112 -105
  195. package/components/Table/table-tree-view.scss +38 -33
  196. package/components/Table/table.css +105 -89
  197. package/components/Table/table.scss +105 -89
  198. package/components/Tabs/tabs.css +76 -48
  199. package/components/Tabs/tabs.scss +74 -48
  200. package/components/TextInputGroup/text-input-group.css +15 -15
  201. package/components/TextInputGroup/text-input-group.scss +15 -15
  202. package/components/Tile/tile.css +10 -10
  203. package/components/Tile/tile.scss +10 -10
  204. package/components/Title/title.css +70 -19
  205. package/components/Title/title.scss +90 -20
  206. package/components/ToggleGroup/toggle-group.css +14 -11
  207. package/components/ToggleGroup/toggle-group.scss +14 -11
  208. package/components/Toolbar/toolbar.css +57 -43
  209. package/components/Toolbar/toolbar.scss +45 -25
  210. package/components/Tooltip/tooltip.css +74 -44
  211. package/components/Tooltip/tooltip.scss +93 -77
  212. package/components/TreeView/tree-view.css +48 -27
  213. package/components/TreeView/tree-view.scss +50 -28
  214. package/components/Truncate/truncate.css +13 -0
  215. package/components/Truncate/truncate.scss +19 -3
  216. package/components/Wizard/wizard.css +57 -36
  217. package/components/Wizard/wizard.scss +57 -36
  218. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  219. package/docs/components/Accordion/examples/Accordion.md +614 -416
  220. package/docs/components/Alert/examples/Alert.md +3 -3
  221. package/docs/components/Avatar/examples/Avatar.md +5 -19
  222. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  223. package/docs/components/Badge/examples/Badge.md +21 -0
  224. package/docs/components/Banner/examples/Banner.md +48 -25
  225. package/docs/components/Brand/examples/Brand.css +12 -0
  226. package/docs/components/Brand/examples/Brand.md +51 -32
  227. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  228. package/docs/components/Button/examples/Button.css +2 -2
  229. package/docs/components/Button/examples/Button.md +15 -3
  230. package/docs/components/Card/examples/Card.md +143 -37
  231. package/docs/components/Check/examples/Check.md +71 -58
  232. package/docs/components/Chip/examples/Chip.md +1 -1
  233. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  234. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  235. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  236. package/docs/components/Content/examples/Content.md +5 -5
  237. package/docs/components/Divider/examples/Divider.css +3 -1
  238. package/docs/components/Divider/examples/Divider.md +4 -5
  239. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  240. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  241. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  242. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  243. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  244. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  245. package/docs/components/Label/examples/Label.md +12 -12
  246. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  247. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  248. package/docs/components/Login/examples/Login.md +10 -5
  249. package/docs/components/Masthead/examples/masthead.md +443 -65
  250. package/docs/components/Menu/examples/Menu.css +8 -0
  251. package/docs/components/Menu/examples/Menu.md +594 -543
  252. package/docs/components/MenuToggle/examples/MenuToggle.md +151 -138
  253. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  254. package/docs/components/Nav/examples/Navigation.css +2 -8
  255. package/docs/components/Nav/examples/Navigation.md +240 -114
  256. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  257. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  258. package/docs/components/Page/examples/Page.css +0 -8
  259. package/docs/components/Page/examples/Page.md +22 -21
  260. package/docs/components/Pagination/examples/Pagination.md +663 -637
  261. package/docs/components/Popover/examples/Popover.css +4 -9
  262. package/docs/components/Popover/examples/Popover.md +1 -1
  263. package/docs/components/Radio/examples/Radio.md +62 -54
  264. package/docs/components/Select/deprecated/Select.md +184 -177
  265. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  266. package/docs/components/Table/examples/Table.css +2 -2
  267. package/docs/components/Table/examples/Table.md +10 -10
  268. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  269. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  270. package/docs/components/Tile/examples/Tile.css +1 -1
  271. package/docs/components/Title/examples/Title.md +18 -0
  272. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  273. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  274. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  275. package/docs/components/Truncate/examples/Truncate.css +2 -2
  276. package/docs/components/Truncate/examples/Truncate.md +2 -2
  277. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  278. package/docs/demos/Alert/examples/Alert.md +303 -84
  279. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  280. package/docs/demos/Banner/examples/Banner.md +209 -58
  281. package/docs/demos/Card/examples/Card.css +3 -3
  282. package/docs/demos/Card/examples/Card.md +28 -12
  283. package/docs/demos/CardView/examples/CardView.md +259 -197
  284. package/docs/demos/ContextSelector/examples/ContextSelector.md +374 -91
  285. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  286. package/docs/demos/DataList/examples/DataList.md +974 -907
  287. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  288. package/docs/demos/Drawer/examples/Drawer.md +505 -140
  289. package/docs/demos/JumpLinks/examples/JumpLinks.md +606 -168
  290. package/docs/demos/Masthead/examples/Masthead.md +745 -310
  291. package/docs/demos/Modal/examples/Modal.md +606 -168
  292. package/docs/demos/Nav/examples/Nav.md +808 -224
  293. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  294. package/docs/demos/Page/examples/Page.md +909 -252
  295. package/docs/demos/Page/examples/Penta.md +570 -503
  296. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  297. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1293 -914
  298. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  299. package/docs/demos/Table/examples/Table.md +3842 -3400
  300. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  301. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  302. package/docs/demos/Toolbar/examples/Toolbar.md +1305 -1467
  303. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  304. package/docs/layouts/Flex/examples/Flex.md +16 -16
  305. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  306. package/icons/pficons.mjs +1 -0
  307. package/layouts/Flex/flex.css +115 -43
  308. package/layouts/Flex/flex.scss +20 -8
  309. package/package.json +36 -32
  310. package/patternfly-addons.css +732 -972
  311. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  312. package/patternfly-base-no-globals.css +923 -799
  313. package/patternfly-base-theme-dark-unversioned.css +928 -804
  314. package/patternfly-base.css +928 -804
  315. package/patternfly-no-globals.css +5253 -4984
  316. package/patternfly-theme-dark-unversioned.css +5258 -4989
  317. package/patternfly.css +5258 -4989
  318. package/patternfly.min.css +1 -1
  319. package/patternfly.min.css.map +1 -1
  320. package/sass-utilities/functions.scss +6 -0
  321. package/sass-utilities/mixins.scss +62 -2
  322. package/sass-utilities/scss-variables.scss +8 -8
  323. package/sass-utilities/themes/dark/mixins.scss +3 -1
  324. package/utilities/Accessibility/accessibility.css +12 -12
  325. package/utilities/Spacing/spacing.css +720 -960
  326. package/utilities/Spacing/spacing.scss +4 -8
  327. package/base/themes/dark/_variables.scss +0 -102
  328. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  329. package/components/Accordion/themes/dark/accordion.scss +0 -9
  330. package/components/Alert/themes/dark/alert.scss +0 -17
  331. package/components/Badge/themes/dark/badge.scss +0 -9
  332. package/components/Banner/themes/dark/banner.scss +0 -14
  333. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  334. package/components/Hint/themes/dark/hint.scss +0 -8
  335. package/components/Login/themes/dark/login.scss +0 -12
  336. package/components/Masthead/themes/dark/masthead.scss +0 -14
  337. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  338. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  339. package/components/Page/themes/dark/page.scss +0 -69
  340. package/components/Pagination/themes/dark/pagination.scss +0 -7
  341. package/components/Popover/themes/dark/popover.scss +0 -11
  342. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  343. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  344. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  345. package/docs/components/Avatar/examples/Avatar.css +0 -3
  346. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -25,12 +25,76 @@ section: components
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
27
  <a class="pf-v5-c-masthead__brand" href="#">
28
- <img
29
- class="pf-v5-c-brand"
30
- src="/assets/images/pf-logo.svg"
31
- alt="PatternFly logo"
32
- style="--pf-v5-c-brand--Height:36px"
33
- />
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
30
+ <defs>
31
+ <linearGradient
32
+ x1="68%"
33
+ y1="2.25860997e-13%"
34
+ x2="32%"
35
+ y2="100%"
36
+ id="linearGradient-alert-basic-example-masthead"
37
+ >
38
+ <stop stop-color="#2B9AF3" offset="0%" />
39
+ <stop
40
+ stop-color="#73BCF7"
41
+ stop-opacity="0.502212631"
42
+ offset="100%"
43
+ />
44
+ </linearGradient>
45
+ </defs>
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47
+ <g
48
+ transform="translate(206.000000, 45.750000)"
49
+ fill="var(--pf-t--global--text--color--regular)"
50
+ fill-rule="nonzero"
51
+ >
52
+ <path
53
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
54
+ />
55
+ <path
56
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
57
+ />
58
+ <path
59
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
60
+ />
61
+ <path
62
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
63
+ />
64
+ <path
65
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
66
+ />
67
+ <path
68
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
69
+ />
70
+ <path
71
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
72
+ />
73
+ <polygon
74
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
75
+ />
76
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
77
+ <path
78
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
79
+ />
80
+ </g>
81
+ <g transform="translate(0.000000, 0.000000)">
82
+ <path
83
+ 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"
84
+ fill="#0066CC"
85
+ />
86
+ <path
87
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
88
+ fill="url(#linearGradient-alert-basic-example-masthead)"
89
+ />
90
+ <path
91
+ 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"
92
+ fill="url(#linearGradient-alert-basic-example-masthead)"
93
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
94
+ />
95
+ </g>
96
+ </g>
97
+ </svg>
34
98
  </a>
35
99
  </div>
36
100
  <div class="pf-v5-c-masthead__content">
@@ -40,8 +104,38 @@ section: components
40
104
  >
41
105
  <div class="pf-v5-c-toolbar__content">
42
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
43
137
  <div
44
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
138
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
45
139
  >
46
140
  <div
47
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -88,27 +182,6 @@ section: components
88
182
  </button>
89
183
  </div>
90
184
  </div>
91
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
92
- <button
93
- class="pf-v5-c-menu-toggle pf-m-full-height"
94
- type="button"
95
- aria-expanded="false"
96
- >
97
- <span class="pf-v5-c-menu-toggle__icon">
98
- <img
99
- class="pf-v5-c-avatar"
100
- alt="Avatar image"
101
- src="/assets/images/img_avatar-light.svg"
102
- />
103
- </span>
104
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
105
- <span class="pf-v5-c-menu-toggle__controls">
106
- <span class="pf-v5-c-menu-toggle__toggle-icon">
107
- <i class="fas fa-caret-down" aria-hidden="true"></i>
108
- </span>
109
- </span>
110
- </button>
111
- </div>
112
185
  </div>
113
186
  </div>
114
187
  </div>
@@ -328,12 +401,76 @@ section: components
328
401
  </span>
329
402
  <div class="pf-v5-c-masthead__main">
330
403
  <a class="pf-v5-c-masthead__brand" href="#">
331
- <img
332
- class="pf-v5-c-brand"
333
- src="/assets/images/pf-logo.svg"
334
- alt="PatternFly logo"
335
- style="--pf-v5-c-brand--Height:36px"
336
- />
404
+ <svg height="40px" viewBox="0 0 679 158">
405
+ <title>PF-HorizontalLogo-Color</title>
406
+ <defs>
407
+ <linearGradient
408
+ x1="68%"
409
+ y1="2.25860997e-13%"
410
+ x2="32%"
411
+ y2="100%"
412
+ id="linearGradient-alert-horizontal-example-masthead"
413
+ >
414
+ <stop stop-color="#2B9AF3" offset="0%" />
415
+ <stop
416
+ stop-color="#73BCF7"
417
+ stop-opacity="0.502212631"
418
+ offset="100%"
419
+ />
420
+ </linearGradient>
421
+ </defs>
422
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
423
+ <g
424
+ transform="translate(206.000000, 45.750000)"
425
+ fill="var(--pf-t--global--text--color--regular)"
426
+ fill-rule="nonzero"
427
+ >
428
+ <path
429
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
430
+ />
431
+ <path
432
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
433
+ />
434
+ <path
435
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
436
+ />
437
+ <path
438
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
439
+ />
440
+ <path
441
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
442
+ />
443
+ <path
444
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
445
+ />
446
+ <path
447
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
448
+ />
449
+ <polygon
450
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
451
+ />
452
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
453
+ <path
454
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
455
+ />
456
+ </g>
457
+ <g transform="translate(0.000000, 0.000000)">
458
+ <path
459
+ 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"
460
+ fill="#0066CC"
461
+ />
462
+ <path
463
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
464
+ fill="url(#linearGradient-alert-horizontal-example-masthead)"
465
+ />
466
+ <path
467
+ 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"
468
+ fill="url(#linearGradient-alert-horizontal-example-masthead)"
469
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
470
+ />
471
+ </g>
472
+ </g>
473
+ </svg>
337
474
  </a>
338
475
  </div>
339
476
  <div class="pf-v5-c-masthead__content">
@@ -343,8 +480,38 @@ section: components
343
480
  >
344
481
  <div class="pf-v5-c-toolbar__content">
345
482
  <div class="pf-v5-c-toolbar__content-section">
483
+ <div class="pf-v5-c-toolbar__item">
484
+ <button
485
+ class="pf-v5-c-menu-toggle"
486
+ type="button"
487
+ aria-expanded="false"
488
+ >
489
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
490
+ <span class="pf-v5-c-menu-toggle__controls">
491
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
492
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
493
+ </span>
494
+ </span>
495
+ </button>
496
+ </div>
497
+
498
+ <div class="pf-v5-c-toolbar__item">
499
+ <button
500
+ class="pf-v5-c-menu-toggle"
501
+ type="button"
502
+ aria-expanded="false"
503
+ >
504
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
505
+ <span class="pf-v5-c-menu-toggle__controls">
506
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
507
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
508
+ </span>
509
+ </span>
510
+ </button>
511
+ </div>
512
+
346
513
  <div
347
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
514
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
348
515
  >
349
516
  <div
350
517
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -391,27 +558,6 @@ section: components
391
558
  </button>
392
559
  </div>
393
560
  </div>
394
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
395
- <button
396
- class="pf-v5-c-menu-toggle pf-m-full-height"
397
- type="button"
398
- aria-expanded="false"
399
- >
400
- <span class="pf-v5-c-menu-toggle__icon">
401
- <img
402
- class="pf-v5-c-avatar"
403
- alt="Avatar image"
404
- src="/assets/images/img_avatar-light.svg"
405
- />
406
- </span>
407
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
408
- <span class="pf-v5-c-menu-toggle__controls">
409
- <span class="pf-v5-c-menu-toggle__toggle-icon">
410
- <i class="fas fa-caret-down" aria-hidden="true"></i>
411
- </span>
412
- </span>
413
- </button>
414
- </div>
415
561
  </div>
416
562
  </div>
417
563
  </div>
@@ -712,12 +858,76 @@ section: components
712
858
  </span>
713
859
  <div class="pf-v5-c-masthead__main">
714
860
  <a class="pf-v5-c-masthead__brand" href="#">
715
- <img
716
- class="pf-v5-c-brand"
717
- src="/assets/images/pf-logo.svg"
718
- alt="PatternFly logo"
719
- style="--pf-v5-c-brand--Height:36px"
720
- />
861
+ <svg height="40px" viewBox="0 0 679 158">
862
+ <title>PF-HorizontalLogo-Color</title>
863
+ <defs>
864
+ <linearGradient
865
+ x1="68%"
866
+ y1="2.25860997e-13%"
867
+ x2="32%"
868
+ y2="100%"
869
+ id="linearGradient-alert-stacked-example-masthead"
870
+ >
871
+ <stop stop-color="#2B9AF3" offset="0%" />
872
+ <stop
873
+ stop-color="#73BCF7"
874
+ stop-opacity="0.502212631"
875
+ offset="100%"
876
+ />
877
+ </linearGradient>
878
+ </defs>
879
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
880
+ <g
881
+ transform="translate(206.000000, 45.750000)"
882
+ fill="var(--pf-t--global--text--color--regular)"
883
+ fill-rule="nonzero"
884
+ >
885
+ <path
886
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
887
+ />
888
+ <path
889
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
890
+ />
891
+ <path
892
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
893
+ />
894
+ <path
895
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
896
+ />
897
+ <path
898
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
899
+ />
900
+ <path
901
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
902
+ />
903
+ <path
904
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
905
+ />
906
+ <polygon
907
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
908
+ />
909
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
910
+ <path
911
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
912
+ />
913
+ </g>
914
+ <g transform="translate(0.000000, 0.000000)">
915
+ <path
916
+ 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"
917
+ fill="#0066CC"
918
+ />
919
+ <path
920
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
921
+ fill="url(#linearGradient-alert-stacked-example-masthead)"
922
+ />
923
+ <path
924
+ 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"
925
+ fill="url(#linearGradient-alert-stacked-example-masthead)"
926
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
927
+ />
928
+ </g>
929
+ </g>
930
+ </svg>
721
931
  </a>
722
932
  </div>
723
933
  <div class="pf-v5-c-masthead__content">
@@ -727,8 +937,38 @@ section: components
727
937
  >
728
938
  <div class="pf-v5-c-toolbar__content">
729
939
  <div class="pf-v5-c-toolbar__content-section">
940
+ <div class="pf-v5-c-toolbar__item">
941
+ <button
942
+ class="pf-v5-c-menu-toggle"
943
+ type="button"
944
+ aria-expanded="false"
945
+ >
946
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
947
+ <span class="pf-v5-c-menu-toggle__controls">
948
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
949
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
950
+ </span>
951
+ </span>
952
+ </button>
953
+ </div>
954
+
955
+ <div class="pf-v5-c-toolbar__item">
956
+ <button
957
+ class="pf-v5-c-menu-toggle"
958
+ type="button"
959
+ aria-expanded="false"
960
+ >
961
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
962
+ <span class="pf-v5-c-menu-toggle__controls">
963
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
964
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
965
+ </span>
966
+ </span>
967
+ </button>
968
+ </div>
969
+
730
970
  <div
731
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
971
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
732
972
  >
733
973
  <div
734
974
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -775,27 +1015,6 @@ section: components
775
1015
  </button>
776
1016
  </div>
777
1017
  </div>
778
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
779
- <button
780
- class="pf-v5-c-menu-toggle pf-m-full-height"
781
- type="button"
782
- aria-expanded="false"
783
- >
784
- <span class="pf-v5-c-menu-toggle__icon">
785
- <img
786
- class="pf-v5-c-avatar"
787
- alt="Avatar image"
788
- src="/assets/images/img_avatar-light.svg"
789
- />
790
- </span>
791
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
792
- <span class="pf-v5-c-menu-toggle__controls">
793
- <span class="pf-v5-c-menu-toggle__toggle-icon">
794
- <i class="fas fa-caret-down" aria-hidden="true"></i>
795
- </span>
796
- </span>
797
- </button>
798
- </div>
799
1018
  </div>
800
1019
  </div>
801
1020
  </div>
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -26,12 +26,76 @@ cssPrefix: pf-d-back-to-top
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <img
30
- class="pf-v5-c-brand"
31
- src="/assets/images/pf-logo.svg"
32
- alt="PatternFly logo"
33
- style="--pf-v5-c-brand--Height:36px"
34
- />
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
31
+ <defs>
32
+ <linearGradient
33
+ x1="68%"
34
+ y1="2.25860997e-13%"
35
+ x2="32%"
36
+ y2="100%"
37
+ id="linearGradient-back-to-top-basic-example-masthead"
38
+ >
39
+ <stop stop-color="#2B9AF3" offset="0%" />
40
+ <stop
41
+ stop-color="#73BCF7"
42
+ stop-opacity="0.502212631"
43
+ offset="100%"
44
+ />
45
+ </linearGradient>
46
+ </defs>
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
48
+ <g
49
+ transform="translate(206.000000, 45.750000)"
50
+ fill="var(--pf-t--global--text--color--regular)"
51
+ fill-rule="nonzero"
52
+ >
53
+ <path
54
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
55
+ />
56
+ <path
57
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
58
+ />
59
+ <path
60
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
61
+ />
62
+ <path
63
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
64
+ />
65
+ <path
66
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
67
+ />
68
+ <path
69
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
70
+ />
71
+ <path
72
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
73
+ />
74
+ <polygon
75
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
76
+ />
77
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
78
+ <path
79
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
80
+ />
81
+ </g>
82
+ <g transform="translate(0.000000, 0.000000)">
83
+ <path
84
+ 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"
85
+ fill="#0066CC"
86
+ />
87
+ <path
88
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
89
+ fill="url(#linearGradient-back-to-top-basic-example-masthead)"
90
+ />
91
+ <path
92
+ 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"
93
+ fill="url(#linearGradient-back-to-top-basic-example-masthead)"
94
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
95
+ />
96
+ </g>
97
+ </g>
98
+ </svg>
35
99
  </a>
36
100
  </div>
37
101
  <div class="pf-v5-c-masthead__content">
@@ -41,8 +105,38 @@ cssPrefix: pf-d-back-to-top
41
105
  >
42
106
  <div class="pf-v5-c-toolbar__content">
43
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
44
138
  <div
45
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
139
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
46
140
  >
47
141
  <div
48
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -89,27 +183,6 @@ cssPrefix: pf-d-back-to-top
89
183
  </button>
90
184
  </div>
91
185
  </div>
92
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
93
- <button
94
- class="pf-v5-c-menu-toggle pf-m-full-height"
95
- type="button"
96
- aria-expanded="false"
97
- >
98
- <span class="pf-v5-c-menu-toggle__icon">
99
- <img
100
- class="pf-v5-c-avatar"
101
- alt="Avatar image"
102
- src="/assets/images/img_avatar-light.svg"
103
- />
104
- </span>
105
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
106
- <span class="pf-v5-c-menu-toggle__controls">
107
- <span class="pf-v5-c-menu-toggle__toggle-icon">
108
- <i class="fas fa-caret-down" aria-hidden="true"></i>
109
- </span>
110
- </span>
111
- </button>
112
- </div>
113
186
  </div>
114
187
  </div>
115
188
  </div>