@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

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 (341) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +1005 -856
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +319 -290
  25. package/base/tokens/_tokens-default.scss +485 -329
  26. package/base/tokens/_tokens-font.scss +122 -58
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +27 -16
  52. package/components/Breadcrumb/breadcrumb.scss +27 -18
  53. package/components/Button/button.css +398 -354
  54. package/components/Button/button.scss +455 -477
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +54 -51
  84. package/components/DualListSelector/dual-list-selector.scss +55 -54
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +66 -116
  92. package/components/Form/form.scss +63 -128
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +378 -355
  110. package/components/Label/label.scss +431 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +68 -112
  114. package/components/Login/login.scss +54 -82
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +388 -417
  118. package/components/Menu/menu.scss +370 -525
  119. package/components/MenuToggle/menu-toggle.css +223 -276
  120. package/components/MenuToggle/menu-toggle.scss +322 -390
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +4 -4
  128. package/components/NotificationBadge/notification-badge.scss +4 -4
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +32 -52
  152. package/components/SimpleList/simple-list.scss +37 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +31 -47
  166. package/components/Table/table-grid.scss +42 -55
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +81 -74
  170. package/components/Table/table-tree-view.scss +53 -39
  171. package/components/Table/table.css +159 -264
  172. package/components/Table/table.scss +216 -351
  173. package/components/Tabs/tabs.css +142 -175
  174. package/components/Tabs/tabs.scss +158 -218
  175. package/components/TextInputGroup/text-input-group.css +0 -14
  176. package/components/TextInputGroup/text-input-group.scss +3 -16
  177. package/components/Tile/tile.css +40 -81
  178. package/components/Tile/tile.scss +38 -84
  179. package/components/Timestamp/timestamp.css +12 -9
  180. package/components/Timestamp/timestamp.scss +11 -10
  181. package/components/Title/title.css +70 -19
  182. package/components/Title/title.scss +90 -20
  183. package/components/ToggleGroup/toggle-group.css +54 -48
  184. package/components/ToggleGroup/toggle-group.scss +62 -50
  185. package/components/Toolbar/toolbar.css +2527 -1031
  186. package/components/Toolbar/toolbar.scss +233 -520
  187. package/components/Tooltip/tooltip.css +16 -18
  188. package/components/Tooltip/tooltip.scss +20 -24
  189. package/components/TreeView/tree-view.css +76 -97
  190. package/components/TreeView/tree-view.scss +82 -113
  191. package/components/Truncate/truncate.css +4 -0
  192. package/components/Truncate/truncate.scss +3 -0
  193. package/components/Wizard/wizard.css +122 -205
  194. package/components/Wizard/wizard.scss +121 -181
  195. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  196. package/docs/components/Accordion/examples/Accordion.md +614 -416
  197. package/docs/components/ActionList/examples/ActionList.md +73 -22
  198. package/docs/components/Alert/examples/Alert.md +3 -3
  199. package/docs/components/Avatar/examples/Avatar.md +5 -19
  200. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  201. package/docs/components/Badge/examples/Badge.md +21 -0
  202. package/docs/components/Banner/examples/Banner.md +48 -25
  203. package/docs/components/Brand/examples/Brand.css +12 -0
  204. package/docs/components/Brand/examples/Brand.md +51 -32
  205. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  206. package/docs/components/Button/examples/Button.css +4 -0
  207. package/docs/components/Button/examples/Button.md +1439 -113
  208. package/docs/components/CalendarMonth/examples/CalendarMonth.md +44 -220
  209. package/docs/components/Card/examples/Card.md +550 -133
  210. package/docs/components/Check/examples/Check.md +1 -0
  211. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  212. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  213. package/docs/components/Content/examples/Content.md +5 -5
  214. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  215. package/docs/components/Divider/examples/Divider.css +3 -1
  216. package/docs/components/Divider/examples/Divider.md +30 -5
  217. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  218. package/docs/components/Drawer/examples/Drawer.md +294 -256
  219. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  220. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  221. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  222. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  223. package/docs/components/Form/examples/Form.md +134 -89
  224. package/docs/components/Icon/examples/Icon.md +82 -11
  225. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  226. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  227. package/docs/components/Label/examples/Label.css +4 -0
  228. package/docs/components/Label/examples/Label.md +3090 -703
  229. package/docs/components/LogViewer/examples/LogViewer.md +100 -80
  230. package/docs/components/Login/examples/Login.md +160 -105
  231. package/docs/components/Masthead/examples/masthead.md +443 -65
  232. package/docs/components/Menu/examples/Menu.css +7 -11
  233. package/docs/components/Menu/examples/Menu.md +213 -486
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +253 -224
  235. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  236. package/docs/components/Nav/examples/Navigation.css +1 -23
  237. package/docs/components/Nav/examples/Navigation.md +69 -243
  238. package/docs/components/Page/examples/Page.css +0 -8
  239. package/docs/components/Page/examples/Page.md +22 -21
  240. package/docs/components/Pagination/examples/Pagination.md +663 -637
  241. package/docs/components/Panel/examples/Panel.md +12 -0
  242. package/docs/components/Popover/examples/Popover.md +1 -1
  243. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  244. package/docs/components/Radio/examples/Radio.md +1 -1
  245. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  246. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  247. package/docs/components/TabContent/examples/TabContent.md +10 -10
  248. package/docs/components/Table/examples/Table.md +8 -8
  249. package/docs/components/Tabs/examples/Tabs.css +1 -1
  250. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  251. package/docs/components/Tile/examples/Tile.md +264 -144
  252. package/docs/components/Title/examples/Title.md +18 -0
  253. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/docs/components/Toolbar/examples/Toolbar.md +985 -3341
  255. package/docs/components/TreeView/examples/TreeView.md +7 -57
  256. package/docs/components/Truncate/examples/Truncate.css +2 -2
  257. package/docs/components/Wizard/examples/Wizard.md +31 -7
  258. package/docs/demos/AboutModal/examples/AboutModal.md +116 -35
  259. package/docs/demos/Alert/examples/Alert.md +366 -99
  260. package/docs/demos/BackToTop/examples/BackToTop.md +114 -33
  261. package/docs/demos/Banner/examples/Banner.md +235 -68
  262. package/docs/demos/Button/examples/Button.md +1 -1
  263. package/docs/demos/Card/examples/Card.md +2 -2
  264. package/docs/demos/CardView/examples/CardView.md +256 -192
  265. package/docs/demos/ContextSelector/examples/ContextSelector.md +414 -107
  266. package/docs/demos/Dashboard/examples/Dashboard.md +114 -33
  267. package/docs/demos/DataList/examples/DataList.md +1049 -950
  268. package/docs/demos/DescriptionList/examples/DescriptionList.md +342 -99
  269. package/docs/demos/Drawer/examples/Drawer.md +700 -271
  270. package/docs/demos/Form/examples/BasicForms.md +138 -84
  271. package/docs/demos/JumpLinks/examples/JumpLinks.md +989 -409
  272. package/docs/demos/Masthead/examples/Masthead.md +833 -357
  273. package/docs/demos/Modal/examples/Modal.md +717 -222
  274. package/docs/demos/Nav/examples/Nav.md +763 -926
  275. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +575 -165
  276. package/docs/demos/Page/examples/Page.md +1050 -309
  277. package/docs/demos/Page/examples/Penta.md +73 -31
  278. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +20 -16
  279. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  280. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1276 -861
  281. package/docs/demos/Skeleton/examples/Skeleton.md +114 -33
  282. package/docs/demos/Table/examples/Table.md +4002 -3503
  283. package/docs/demos/Tabs/examples/Tabs.md +711 -219
  284. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  285. package/docs/demos/Toolbar/examples/Toolbar.md +1350 -1480
  286. package/docs/demos/Wizard/examples/Wizard.md +1134 -315
  287. package/docs/layouts/Flex/examples/Flex.md +11 -11
  288. package/package.json +32 -32
  289. package/patternfly-base-no-globals-theme-dark-unversioned.css +1021 -868
  290. package/patternfly-base-no-globals.css +1021 -868
  291. package/patternfly-base-theme-dark-unversioned.css +1027 -873
  292. package/patternfly-base.css +1027 -873
  293. package/patternfly-no-globals.css +9048 -8979
  294. package/patternfly-theme-dark-unversioned.css +9051 -8981
  295. package/patternfly.css +9051 -8981
  296. package/patternfly.min.css +1 -1
  297. package/patternfly.min.css.map +1 -1
  298. package/sass-utilities/mixins.scss +18 -0
  299. package/base/themes/dark/_variables.scss +0 -102
  300. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  301. package/components/Accordion/themes/dark/accordion.scss +0 -9
  302. package/components/Alert/themes/dark/alert.scss +0 -17
  303. package/components/Badge/themes/dark/badge.scss +0 -9
  304. package/components/Banner/themes/dark/banner.scss +0 -14
  305. package/components/Button/themes/dark/button.scss +0 -51
  306. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  307. package/components/Card/themes/dark/card.scss +0 -20
  308. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  309. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  310. package/components/DataList/themes/dark/data-list.scss +0 -10
  311. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  312. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  313. package/components/Drawer/themes/dark/drawer.scss +0 -13
  314. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  315. package/components/Form/themes/dark/form.scss +0 -7
  316. package/components/FormControl/themes/dark/form-control.scss +0 -24
  317. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  318. package/components/Hint/themes/dark/hint.scss +0 -8
  319. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  320. package/components/Label/themes/dark/label.scss +0 -53
  321. package/components/Login/themes/dark/login.scss +0 -12
  322. package/components/Masthead/themes/dark/masthead.scss +0 -14
  323. package/components/MenuToggle/themes/dark/menu-toggle.scss +0 -27
  324. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  325. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  326. package/components/Page/themes/dark/page.scss +0 -69
  327. package/components/Pagination/themes/dark/pagination.scss +0 -7
  328. package/components/Panel/themes/dark/panel.scss +0 -7
  329. package/components/Popover/themes/dark/popover.scss +0 -11
  330. package/components/Progress/themes/dark/progress.scss +0 -9
  331. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  332. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  333. package/components/Switch/themes/dark/switch.scss +0 -11
  334. package/components/Tabs/themes/dark/tabs.scss +0 -10
  335. package/components/TextInputGroup/themes/dark/text-input-group.scss +0 -11
  336. package/components/Tile/themes/dark/tile.scss +0 -10
  337. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  338. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  339. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  340. package/components/Wizard/themes/dark/wizard.scss +0 -12
  341. package/docs/components/Avatar/examples/Avatar.css +0 -3
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -29,23 +29,117 @@ wrapperTag: div
29
29
  </span>
30
30
  <div class="pf-v5-c-masthead__main">
31
31
  <a class="pf-v5-c-masthead__brand" href="#">
32
- <img
33
- class="pf-v5-c-brand"
34
- src="/assets/images/pf-logo.svg"
35
- alt="PatternFly logo"
36
- style="--pf-v5-c-brand--Height:36px"
37
- />
32
+ <svg height="40px" viewBox="0 0 679 158">
33
+ <title>PF-HorizontalLogo-Color</title>
34
+ <defs>
35
+ <linearGradient
36
+ x1="68%"
37
+ y1="2.25860997e-13%"
38
+ x2="32%"
39
+ y2="100%"
40
+ id="linearGradient-primary-detail-expanded-example-masthead"
41
+ >
42
+ <stop stop-color="#2B9AF3" offset="0%" />
43
+ <stop
44
+ stop-color="#73BCF7"
45
+ stop-opacity="0.502212631"
46
+ offset="100%"
47
+ />
48
+ </linearGradient>
49
+ </defs>
50
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
51
+ <g
52
+ transform="translate(206.000000, 45.750000)"
53
+ fill="var(--pf-t--global--text--color--regular)"
54
+ fill-rule="nonzero"
55
+ >
56
+ <path
57
+ 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"
58
+ />
59
+ <path
60
+ 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"
61
+ />
62
+ <path
63
+ 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"
64
+ />
65
+ <path
66
+ 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"
67
+ />
68
+ <path
69
+ 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"
70
+ />
71
+ <path
72
+ 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"
73
+ />
74
+ <path
75
+ 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"
76
+ />
77
+ <polygon
78
+ 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"
79
+ />
80
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
81
+ <path
82
+ 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"
83
+ />
84
+ </g>
85
+ <g transform="translate(0.000000, 0.000000)">
86
+ <path
87
+ 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"
88
+ fill="#0066CC"
89
+ />
90
+ <path
91
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
92
+ fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
93
+ />
94
+ <path
95
+ 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"
96
+ fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
97
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
98
+ />
99
+ </g>
100
+ </g>
101
+ </svg>
38
102
  </a>
39
103
  </div>
40
104
  <div class="pf-v5-c-masthead__content">
41
105
  <div
42
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
106
+ class="pf-v5-c-toolbar pf-m-static"
43
107
  id="primary-detail-expanded-example-masthead-toolbar"
44
108
  >
45
109
  <div class="pf-v5-c-toolbar__content">
46
110
  <div class="pf-v5-c-toolbar__content-section">
111
+ <div class="pf-v5-c-toolbar__item">
112
+ <button
113
+ class="pf-v5-c-menu-toggle"
114
+ type="button"
115
+ aria-expanded="false"
116
+ >
117
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
118
+ <span class="pf-v5-c-menu-toggle__controls">
119
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
120
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
121
+ </span>
122
+ </span>
123
+ </button>
124
+ </div>
125
+
126
+ <div class="pf-v5-c-toolbar__item">
127
+ <button
128
+ class="pf-v5-c-menu-toggle"
129
+ type="button"
130
+ aria-expanded="false"
131
+ >
132
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
133
+ <span class="pf-v5-c-menu-toggle__controls">
134
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
135
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
136
+ </span>
137
+ </span>
138
+ </button>
139
+ </div>
140
+
47
141
  <div
48
- 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"
142
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
49
143
  >
50
144
  <div
51
145
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -57,7 +151,9 @@ wrapperTag: div
57
151
  aria-expanded="false"
58
152
  aria-label="Application launcher"
59
153
  >
60
- <i class="fas fa-th" aria-hidden="true"></i>
154
+ <span class="pf-v5-c-menu-toggle__icon">
155
+ <i class="fas fa-th" aria-hidden="true"></i>
156
+ </span>
61
157
  </button>
62
158
  </div>
63
159
  <div class="pf-v5-c-toolbar__item">
@@ -67,7 +163,9 @@ wrapperTag: div
67
163
  aria-expanded="false"
68
164
  aria-label="Settings"
69
165
  >
70
- <i class="fas fa-cog" aria-hidden="true"></i>
166
+ <span class="pf-v5-c-menu-toggle__icon">
167
+ <i class="fas fa-cog" aria-hidden="true"></i>
168
+ </span>
71
169
  </button>
72
170
  </div>
73
171
  <div class="pf-v5-c-toolbar__item">
@@ -77,7 +175,9 @@ wrapperTag: div
77
175
  aria-expanded="false"
78
176
  aria-label="Help"
79
177
  >
80
- <i class="fas fa-question-circle" aria-hidden="true"></i>
178
+ <span class="pf-v5-c-menu-toggle__icon">
179
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
180
+ </span>
81
181
  </button>
82
182
  </div>
83
183
  </div>
@@ -88,31 +188,12 @@ wrapperTag: div
88
188
  aria-expanded="false"
89
189
  aria-label="Actions"
90
190
  >
91
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
191
+ <span class="pf-v5-c-menu-toggle__icon">
192
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
193
+ </span>
92
194
  </button>
93
195
  </div>
94
196
  </div>
95
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
96
- <button
97
- class="pf-v5-c-menu-toggle pf-m-full-height"
98
- type="button"
99
- aria-expanded="false"
100
- >
101
- <span class="pf-v5-c-menu-toggle__icon">
102
- <img
103
- class="pf-v5-c-avatar"
104
- alt="Avatar image"
105
- src="/assets/images/img_avatar-light.svg"
106
- />
107
- </span>
108
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
109
- <span class="pf-v5-c-menu-toggle__controls">
110
- <span class="pf-v5-c-menu-toggle__toggle-icon">
111
- <i class="fas fa-angle-down" aria-hidden="true"></i>
112
- </span>
113
- </span>
114
- </button>
115
- </div>
116
197
  </div>
117
198
  </div>
118
199
  </div>
@@ -215,15 +296,17 @@ wrapperTag: div
215
296
  <div
216
297
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
217
298
  >
218
- <div class="pf-v5-c-toolbar__toggle">
299
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
219
300
  <button
220
- class="pf-v5-c-button pf-m-plain"
301
+ class="pf-v5-c-menu-toggle pf-m-plain"
221
302
  type="button"
222
- aria-label="Show filters"
223
303
  aria-expanded="false"
304
+ aria-label="Show filters"
224
305
  aria-controls="primary-detail-expanded-example-drawer-toolbar-expandable-content"
225
306
  >
226
- <i class="fas fa-filter" aria-hidden="true"></i>
307
+ <span class="pf-v5-c-menu-toggle__icon">
308
+ <i class="fas fa-filter" aria-hidden="true"></i>
309
+ </span>
227
310
  </button>
228
311
  </div>
229
312
 
@@ -234,83 +317,25 @@ wrapperTag: div
234
317
  role="group"
235
318
  >
236
319
  <div class="pf-v5-c-input-group__item">
237
- <div class="pf-v5-c-select" style="width: 124px">
238
- <span
239
- id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
240
- hidden
241
- >Choose one</span>
242
-
243
- <button
244
- class="pf-v5-c-select__toggle"
245
- type="button"
246
- id="primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
247
- aria-haspopup="true"
248
- aria-expanded="false"
249
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
250
- >
251
- <div class="pf-v5-c-select__toggle-wrapper">
252
- <span class="pf-v5-c-select__toggle-icon">
253
- <i class="fas fa-filter" aria-hidden="true"></i>
254
- </span>
255
- <span class="pf-v5-c-select__toggle-text">Name</span>
256
- </div>
257
- <span class="pf-v5-c-select__toggle-arrow">
320
+ <button
321
+ class="pf-v5-c-menu-toggle"
322
+ type="button"
323
+ aria-expanded="false"
324
+ id="primary-detail-expanded-example-drawer-toolbar-search-filter-menu"
325
+ >
326
+ <span class="pf-v5-c-menu-toggle__icon">
327
+ <i class="fas fa-filter" aria-hidden="true"></i>
328
+ </span>
329
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
330
+ <span class="pf-v5-c-menu-toggle__controls">
331
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
258
332
  <i
259
333
  class="fas fa-caret-down"
260
334
  aria-hidden="true"
261
335
  ></i>
262
336
  </span>
263
- </button>
264
-
265
- <ul
266
- class="pf-v5-c-select__menu"
267
- role="listbox"
268
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
269
- hidden
270
- >
271
- <li role="presentation">
272
- <button
273
- class="pf-v5-c-select__menu-item"
274
- role="option"
275
- >Running</button>
276
- </li>
277
- <li role="presentation">
278
- <button
279
- class="pf-v5-c-select__menu-item pf-m-selected"
280
- role="option"
281
- aria-selected="true"
282
- >
283
- Stopped
284
- <span
285
- class="pf-v5-c-select__menu-item-icon"
286
- >
287
- <i
288
- class="fas fa-check"
289
- aria-hidden="true"
290
- ></i>
291
- </span>
292
- </button>
293
- </li>
294
- <li role="presentation">
295
- <button
296
- class="pf-v5-c-select__menu-item"
297
- role="option"
298
- >Down</button>
299
- </li>
300
- <li role="presentation">
301
- <button
302
- class="pf-v5-c-select__menu-item"
303
- role="option"
304
- >Degraded</button>
305
- </li>
306
- <li role="presentation">
307
- <button
308
- class="pf-v5-c-select__menu-item"
309
- role="option"
310
- >Needs maintenance</button>
311
- </li>
312
- </ul>
313
- </div>
337
+ </span>
338
+ </button>
314
339
  </div>
315
340
  <div class="pf-v5-c-input-group__item pf-m-fill">
316
341
  <div class="pf-v5-c-text-input-group">
@@ -614,57 +639,59 @@ wrapperTag: div
614
639
 
615
640
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
616
641
  <div class="pf-v5-c-pagination pf-m-compact">
617
- <div class="pf-v5-c-options-menu">
618
- <button
619
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
620
- type="button"
621
- id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
622
- aria-haspopup="listbox"
623
- aria-expanded="false"
624
- >
625
- <span class="pf-v5-c-options-menu__toggle-text">
626
- <b>1 - 10</b>&nbsp;of&nbsp;
627
- <b>36</b>
628
- </span>
629
- <div class="pf-v5-c-options-menu__toggle-icon">
630
- <i class="fas fa-caret-down" aria-hidden="true"></i>
631
- </div>
632
- </button>
633
- <ul
634
- class="pf-v5-c-options-menu__menu"
635
- role="menu"
636
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
637
- hidden
638
- >
639
- <li role="none">
640
- <button
641
- class="pf-v5-c-options-menu__menu-item"
642
- type="button"
643
- role="menuitem"
644
- >5 per page</button>
645
- </li>
646
- <li role="none">
647
- <button
648
- class="pf-v5-c-options-menu__menu-item"
649
- type="button"
650
- role="menuitem"
651
- >
652
- 10 per page
653
- <div
654
- class="pf-v5-c-options-menu__menu-item-icon"
642
+ <div class="pf-v5-c-pagination__page-menu">
643
+ <div class="pf-v5-c-options-menu">
644
+ <button
645
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
646
+ type="button"
647
+ id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
648
+ aria-haspopup="listbox"
649
+ aria-expanded="false"
650
+ >
651
+ <span class="pf-v5-c-options-menu__toggle-text">
652
+ <b>1 - 10</b>&nbsp;of&nbsp;
653
+ <b>36</b>
654
+ </span>
655
+ <div class="pf-v5-c-options-menu__toggle-icon">
656
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
657
+ </div>
658
+ </button>
659
+ <ul
660
+ class="pf-v5-c-options-menu__menu"
661
+ role="menu"
662
+ aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
663
+ hidden
664
+ >
665
+ <li role="none">
666
+ <button
667
+ class="pf-v5-c-options-menu__menu-item"
668
+ type="button"
669
+ role="menuitem"
670
+ >5 per page</button>
671
+ </li>
672
+ <li role="none">
673
+ <button
674
+ class="pf-v5-c-options-menu__menu-item"
675
+ type="button"
676
+ role="menuitem"
655
677
  >
656
- <i class="fas fa-check" aria-hidden="true"></i>
657
- </div>
658
- </button>
659
- </li>
660
- <li role="none">
661
- <button
662
- class="pf-v5-c-options-menu__menu-item"
663
- type="button"
664
- role="menuitem"
665
- >20 per page</button>
666
- </li>
667
- </ul>
678
+ 10 per page
679
+ <div
680
+ class="pf-v5-c-options-menu__menu-item-icon"
681
+ >
682
+ <i class="fas fa-check" aria-hidden="true"></i>
683
+ </div>
684
+ </button>
685
+ </li>
686
+ <li role="none">
687
+ <button
688
+ class="pf-v5-c-options-menu__menu-item"
689
+ type="button"
690
+ role="menuitem"
691
+ >20 per page</button>
692
+ </li>
693
+ </ul>
694
+ </div>
668
695
  </div>
669
696
  <nav
670
697
  class="pf-v5-c-pagination__nav"
@@ -1130,13 +1157,15 @@ wrapperTag: div
1130
1157
  role="region"
1131
1158
  id="primary-detail-expanded-example-drawer-tabs"
1132
1159
  >
1133
- <button
1134
- class="pf-v5-c-tabs__scroll-button"
1135
- type="button"
1136
- aria-label="Scroll left"
1137
- >
1138
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1139
- </button>
1160
+ <div class="pf-v5-c-tabs__scroll-button">
1161
+ <button
1162
+ class="pf-v5-c-button pf-m-plain"
1163
+ type="button"
1164
+ aria-label="Scroll left"
1165
+ >
1166
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1167
+ </button>
1168
+ </div>
1140
1169
  <ul class="pf-v5-c-tabs__list" role="tablist">
1141
1170
  <li
1142
1171
  class="pf-v5-c-tabs__item pf-m-current"
@@ -1164,13 +1193,15 @@ wrapperTag: div
1164
1193
  </button>
1165
1194
  </li>
1166
1195
  </ul>
1167
- <button
1168
- class="pf-v5-c-tabs__scroll-button"
1169
- type="button"
1170
- aria-label="Scroll right"
1171
- >
1172
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1173
- </button>
1196
+ <div class="pf-v5-c-tabs__scroll-button">
1197
+ <button
1198
+ class="pf-v5-c-button pf-m-plain"
1199
+ type="button"
1200
+ aria-label="Scroll right"
1201
+ >
1202
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1203
+ </button>
1204
+ </div>
1174
1205
  </div>
1175
1206
  </div>
1176
1207
 
@@ -1298,23 +1329,117 @@ wrapperTag: div
1298
1329
  </span>
1299
1330
  <div class="pf-v5-c-masthead__main">
1300
1331
  <a class="pf-v5-c-masthead__brand" href="#">
1301
- <img
1302
- class="pf-v5-c-brand"
1303
- src="/assets/images/pf-logo.svg"
1304
- alt="PatternFly logo"
1305
- style="--pf-v5-c-brand--Height:36px"
1306
- />
1332
+ <svg height="40px" viewBox="0 0 679 158">
1333
+ <title>PF-HorizontalLogo-Color</title>
1334
+ <defs>
1335
+ <linearGradient
1336
+ x1="68%"
1337
+ y1="2.25860997e-13%"
1338
+ x2="32%"
1339
+ y2="100%"
1340
+ id="linearGradient-primary-detail-collapsed-example-masthead"
1341
+ >
1342
+ <stop stop-color="#2B9AF3" offset="0%" />
1343
+ <stop
1344
+ stop-color="#73BCF7"
1345
+ stop-opacity="0.502212631"
1346
+ offset="100%"
1347
+ />
1348
+ </linearGradient>
1349
+ </defs>
1350
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1351
+ <g
1352
+ transform="translate(206.000000, 45.750000)"
1353
+ fill="var(--pf-t--global--text--color--regular)"
1354
+ fill-rule="nonzero"
1355
+ >
1356
+ <path
1357
+ 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"
1358
+ />
1359
+ <path
1360
+ 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"
1361
+ />
1362
+ <path
1363
+ 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"
1364
+ />
1365
+ <path
1366
+ 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"
1367
+ />
1368
+ <path
1369
+ 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"
1370
+ />
1371
+ <path
1372
+ 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"
1373
+ />
1374
+ <path
1375
+ 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"
1376
+ />
1377
+ <polygon
1378
+ 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"
1379
+ />
1380
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1381
+ <path
1382
+ 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"
1383
+ />
1384
+ </g>
1385
+ <g transform="translate(0.000000, 0.000000)">
1386
+ <path
1387
+ 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"
1388
+ fill="#0066CC"
1389
+ />
1390
+ <path
1391
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1392
+ fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1393
+ />
1394
+ <path
1395
+ 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"
1396
+ fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1397
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1398
+ />
1399
+ </g>
1400
+ </g>
1401
+ </svg>
1307
1402
  </a>
1308
1403
  </div>
1309
1404
  <div class="pf-v5-c-masthead__content">
1310
1405
  <div
1311
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1406
+ class="pf-v5-c-toolbar pf-m-static"
1312
1407
  id="primary-detail-collapsed-example-masthead-toolbar"
1313
1408
  >
1314
1409
  <div class="pf-v5-c-toolbar__content">
1315
1410
  <div class="pf-v5-c-toolbar__content-section">
1411
+ <div class="pf-v5-c-toolbar__item">
1412
+ <button
1413
+ class="pf-v5-c-menu-toggle"
1414
+ type="button"
1415
+ aria-expanded="false"
1416
+ >
1417
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1418
+ <span class="pf-v5-c-menu-toggle__controls">
1419
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1420
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1421
+ </span>
1422
+ </span>
1423
+ </button>
1424
+ </div>
1425
+
1426
+ <div class="pf-v5-c-toolbar__item">
1427
+ <button
1428
+ class="pf-v5-c-menu-toggle"
1429
+ type="button"
1430
+ aria-expanded="false"
1431
+ >
1432
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1433
+ <span class="pf-v5-c-menu-toggle__controls">
1434
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1435
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1436
+ </span>
1437
+ </span>
1438
+ </button>
1439
+ </div>
1440
+
1316
1441
  <div
1317
- 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"
1442
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1318
1443
  >
1319
1444
  <div
1320
1445
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1326,7 +1451,9 @@ wrapperTag: div
1326
1451
  aria-expanded="false"
1327
1452
  aria-label="Application launcher"
1328
1453
  >
1329
- <i class="fas fa-th" aria-hidden="true"></i>
1454
+ <span class="pf-v5-c-menu-toggle__icon">
1455
+ <i class="fas fa-th" aria-hidden="true"></i>
1456
+ </span>
1330
1457
  </button>
1331
1458
  </div>
1332
1459
  <div class="pf-v5-c-toolbar__item">
@@ -1336,7 +1463,9 @@ wrapperTag: div
1336
1463
  aria-expanded="false"
1337
1464
  aria-label="Settings"
1338
1465
  >
1339
- <i class="fas fa-cog" aria-hidden="true"></i>
1466
+ <span class="pf-v5-c-menu-toggle__icon">
1467
+ <i class="fas fa-cog" aria-hidden="true"></i>
1468
+ </span>
1340
1469
  </button>
1341
1470
  </div>
1342
1471
  <div class="pf-v5-c-toolbar__item">
@@ -1346,7 +1475,9 @@ wrapperTag: div
1346
1475
  aria-expanded="false"
1347
1476
  aria-label="Help"
1348
1477
  >
1349
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1478
+ <span class="pf-v5-c-menu-toggle__icon">
1479
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1480
+ </span>
1350
1481
  </button>
1351
1482
  </div>
1352
1483
  </div>
@@ -1357,31 +1488,12 @@ wrapperTag: div
1357
1488
  aria-expanded="false"
1358
1489
  aria-label="Actions"
1359
1490
  >
1360
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1491
+ <span class="pf-v5-c-menu-toggle__icon">
1492
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1493
+ </span>
1361
1494
  </button>
1362
1495
  </div>
1363
1496
  </div>
1364
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1365
- <button
1366
- class="pf-v5-c-menu-toggle pf-m-full-height"
1367
- type="button"
1368
- aria-expanded="false"
1369
- >
1370
- <span class="pf-v5-c-menu-toggle__icon">
1371
- <img
1372
- class="pf-v5-c-avatar"
1373
- alt="Avatar image"
1374
- src="/assets/images/img_avatar-light.svg"
1375
- />
1376
- </span>
1377
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1378
- <span class="pf-v5-c-menu-toggle__controls">
1379
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1380
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1381
- </span>
1382
- </span>
1383
- </button>
1384
- </div>
1385
1497
  </div>
1386
1498
  </div>
1387
1499
  </div>
@@ -1484,15 +1596,17 @@ wrapperTag: div
1484
1596
  <div
1485
1597
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
1486
1598
  >
1487
- <div class="pf-v5-c-toolbar__toggle">
1599
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1488
1600
  <button
1489
- class="pf-v5-c-button pf-m-plain"
1601
+ class="pf-v5-c-menu-toggle pf-m-plain"
1490
1602
  type="button"
1491
- aria-label="Show filters"
1492
1603
  aria-expanded="false"
1604
+ aria-label="Show filters"
1493
1605
  aria-controls="primary-detail-collapsed-example-drawer-toolbar-expandable-content"
1494
1606
  >
1495
- <i class="fas fa-filter" aria-hidden="true"></i>
1607
+ <span class="pf-v5-c-menu-toggle__icon">
1608
+ <i class="fas fa-filter" aria-hidden="true"></i>
1609
+ </span>
1496
1610
  </button>
1497
1611
  </div>
1498
1612
 
@@ -1503,83 +1617,25 @@ wrapperTag: div
1503
1617
  role="group"
1504
1618
  >
1505
1619
  <div class="pf-v5-c-input-group__item">
1506
- <div class="pf-v5-c-select" style="width: 124px">
1507
- <span
1508
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1509
- hidden
1510
- >Choose one</span>
1511
-
1512
- <button
1513
- class="pf-v5-c-select__toggle"
1514
- type="button"
1515
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1516
- aria-haspopup="true"
1517
- aria-expanded="false"
1518
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1519
- >
1520
- <div class="pf-v5-c-select__toggle-wrapper">
1521
- <span class="pf-v5-c-select__toggle-icon">
1522
- <i class="fas fa-filter" aria-hidden="true"></i>
1523
- </span>
1524
- <span class="pf-v5-c-select__toggle-text">Name</span>
1525
- </div>
1526
- <span class="pf-v5-c-select__toggle-arrow">
1527
- <i
1528
- class="fas fa-caret-down"
1529
- aria-hidden="true"
1530
- ></i>
1531
- </span>
1532
- </button>
1533
-
1534
- <ul
1535
- class="pf-v5-c-select__menu"
1536
- role="listbox"
1537
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1538
- hidden
1539
- >
1540
- <li role="presentation">
1541
- <button
1542
- class="pf-v5-c-select__menu-item"
1543
- role="option"
1544
- >Running</button>
1545
- </li>
1546
- <li role="presentation">
1547
- <button
1548
- class="pf-v5-c-select__menu-item pf-m-selected"
1549
- role="option"
1550
- aria-selected="true"
1551
- >
1552
- Stopped
1553
- <span
1554
- class="pf-v5-c-select__menu-item-icon"
1555
- >
1556
- <i
1557
- class="fas fa-check"
1558
- aria-hidden="true"
1559
- ></i>
1560
- </span>
1561
- </button>
1562
- </li>
1563
- <li role="presentation">
1564
- <button
1565
- class="pf-v5-c-select__menu-item"
1566
- role="option"
1567
- >Down</button>
1568
- </li>
1569
- <li role="presentation">
1570
- <button
1571
- class="pf-v5-c-select__menu-item"
1572
- role="option"
1573
- >Degraded</button>
1574
- </li>
1575
- <li role="presentation">
1576
- <button
1577
- class="pf-v5-c-select__menu-item"
1578
- role="option"
1579
- >Needs maintenance</button>
1580
- </li>
1581
- </ul>
1582
- </div>
1620
+ <button
1621
+ class="pf-v5-c-menu-toggle"
1622
+ type="button"
1623
+ aria-expanded="false"
1624
+ id="primary-detail-collapsed-example-drawer-toolbar-search-filter-menu"
1625
+ >
1626
+ <span class="pf-v5-c-menu-toggle__icon">
1627
+ <i class="fas fa-filter" aria-hidden="true"></i>
1628
+ </span>
1629
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1630
+ <span class="pf-v5-c-menu-toggle__controls">
1631
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1632
+ <i
1633
+ class="fas fa-caret-down"
1634
+ aria-hidden="true"
1635
+ ></i>
1636
+ </span>
1637
+ </span>
1638
+ </button>
1583
1639
  </div>
1584
1640
  <div class="pf-v5-c-input-group__item pf-m-fill">
1585
1641
  <div class="pf-v5-c-text-input-group">
@@ -1883,57 +1939,59 @@ wrapperTag: div
1883
1939
 
1884
1940
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
1885
1941
  <div class="pf-v5-c-pagination pf-m-compact">
1886
- <div class="pf-v5-c-options-menu">
1887
- <button
1888
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1889
- type="button"
1890
- id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1891
- aria-haspopup="listbox"
1892
- aria-expanded="false"
1893
- >
1894
- <span class="pf-v5-c-options-menu__toggle-text">
1895
- <b>1 - 10</b>&nbsp;of&nbsp;
1896
- <b>36</b>
1897
- </span>
1898
- <div class="pf-v5-c-options-menu__toggle-icon">
1899
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1900
- </div>
1901
- </button>
1902
- <ul
1903
- class="pf-v5-c-options-menu__menu"
1904
- role="menu"
1905
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1906
- hidden
1907
- >
1908
- <li role="none">
1909
- <button
1910
- class="pf-v5-c-options-menu__menu-item"
1911
- type="button"
1912
- role="menuitem"
1913
- >5 per page</button>
1914
- </li>
1915
- <li role="none">
1916
- <button
1917
- class="pf-v5-c-options-menu__menu-item"
1918
- type="button"
1919
- role="menuitem"
1920
- >
1921
- 10 per page
1922
- <div
1923
- class="pf-v5-c-options-menu__menu-item-icon"
1942
+ <div class="pf-v5-c-pagination__page-menu">
1943
+ <div class="pf-v5-c-options-menu">
1944
+ <button
1945
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1946
+ type="button"
1947
+ id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1948
+ aria-haspopup="listbox"
1949
+ aria-expanded="false"
1950
+ >
1951
+ <span class="pf-v5-c-options-menu__toggle-text">
1952
+ <b>1 - 10</b>&nbsp;of&nbsp;
1953
+ <b>36</b>
1954
+ </span>
1955
+ <div class="pf-v5-c-options-menu__toggle-icon">
1956
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1957
+ </div>
1958
+ </button>
1959
+ <ul
1960
+ class="pf-v5-c-options-menu__menu"
1961
+ role="menu"
1962
+ aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1963
+ hidden
1964
+ >
1965
+ <li role="none">
1966
+ <button
1967
+ class="pf-v5-c-options-menu__menu-item"
1968
+ type="button"
1969
+ role="menuitem"
1970
+ >5 per page</button>
1971
+ </li>
1972
+ <li role="none">
1973
+ <button
1974
+ class="pf-v5-c-options-menu__menu-item"
1975
+ type="button"
1976
+ role="menuitem"
1924
1977
  >
1925
- <i class="fas fa-check" aria-hidden="true"></i>
1926
- </div>
1927
- </button>
1928
- </li>
1929
- <li role="none">
1930
- <button
1931
- class="pf-v5-c-options-menu__menu-item"
1932
- type="button"
1933
- role="menuitem"
1934
- >20 per page</button>
1935
- </li>
1936
- </ul>
1978
+ 10 per page
1979
+ <div
1980
+ class="pf-v5-c-options-menu__menu-item-icon"
1981
+ >
1982
+ <i class="fas fa-check" aria-hidden="true"></i>
1983
+ </div>
1984
+ </button>
1985
+ </li>
1986
+ <li role="none">
1987
+ <button
1988
+ class="pf-v5-c-options-menu__menu-item"
1989
+ type="button"
1990
+ role="menuitem"
1991
+ >20 per page</button>
1992
+ </li>
1993
+ </ul>
1994
+ </div>
1937
1995
  </div>
1938
1996
  <nav
1939
1997
  class="pf-v5-c-pagination__nav"
@@ -2488,23 +2546,117 @@ wrapperTag: div
2488
2546
  </span>
2489
2547
  <div class="pf-v5-c-masthead__main">
2490
2548
  <a class="pf-v5-c-masthead__brand" href="#">
2491
- <img
2492
- class="pf-v5-c-brand"
2493
- src="/assets/images/pf-logo.svg"
2494
- alt="PatternFly logo"
2495
- style="--pf-v5-c-brand--Height:36px"
2496
- />
2549
+ <svg height="40px" viewBox="0 0 679 158">
2550
+ <title>PF-HorizontalLogo-Color</title>
2551
+ <defs>
2552
+ <linearGradient
2553
+ x1="68%"
2554
+ y1="2.25860997e-13%"
2555
+ x2="32%"
2556
+ y2="100%"
2557
+ id="linearGradient-primary-detail-content-body-padding-example-masthead"
2558
+ >
2559
+ <stop stop-color="#2B9AF3" offset="0%" />
2560
+ <stop
2561
+ stop-color="#73BCF7"
2562
+ stop-opacity="0.502212631"
2563
+ offset="100%"
2564
+ />
2565
+ </linearGradient>
2566
+ </defs>
2567
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2568
+ <g
2569
+ transform="translate(206.000000, 45.750000)"
2570
+ fill="var(--pf-t--global--text--color--regular)"
2571
+ fill-rule="nonzero"
2572
+ >
2573
+ <path
2574
+ 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"
2575
+ />
2576
+ <path
2577
+ 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"
2578
+ />
2579
+ <path
2580
+ 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"
2581
+ />
2582
+ <path
2583
+ 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"
2584
+ />
2585
+ <path
2586
+ 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"
2587
+ />
2588
+ <path
2589
+ 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"
2590
+ />
2591
+ <path
2592
+ 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"
2593
+ />
2594
+ <polygon
2595
+ 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"
2596
+ />
2597
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2598
+ <path
2599
+ 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"
2600
+ />
2601
+ </g>
2602
+ <g transform="translate(0.000000, 0.000000)">
2603
+ <path
2604
+ 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"
2605
+ fill="#0066CC"
2606
+ />
2607
+ <path
2608
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2609
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2610
+ />
2611
+ <path
2612
+ 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"
2613
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2614
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2615
+ />
2616
+ </g>
2617
+ </g>
2618
+ </svg>
2497
2619
  </a>
2498
2620
  </div>
2499
2621
  <div class="pf-v5-c-masthead__content">
2500
2622
  <div
2501
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2623
+ class="pf-v5-c-toolbar pf-m-static"
2502
2624
  id="primary-detail-content-body-padding-example-masthead-toolbar"
2503
2625
  >
2504
2626
  <div class="pf-v5-c-toolbar__content">
2505
2627
  <div class="pf-v5-c-toolbar__content-section">
2628
+ <div class="pf-v5-c-toolbar__item">
2629
+ <button
2630
+ class="pf-v5-c-menu-toggle"
2631
+ type="button"
2632
+ aria-expanded="false"
2633
+ >
2634
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2635
+ <span class="pf-v5-c-menu-toggle__controls">
2636
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2637
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2638
+ </span>
2639
+ </span>
2640
+ </button>
2641
+ </div>
2642
+
2643
+ <div class="pf-v5-c-toolbar__item">
2644
+ <button
2645
+ class="pf-v5-c-menu-toggle"
2646
+ type="button"
2647
+ aria-expanded="false"
2648
+ >
2649
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2650
+ <span class="pf-v5-c-menu-toggle__controls">
2651
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2652
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2653
+ </span>
2654
+ </span>
2655
+ </button>
2656
+ </div>
2657
+
2506
2658
  <div
2507
- 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"
2659
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
2508
2660
  >
2509
2661
  <div
2510
2662
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2516,7 +2668,9 @@ wrapperTag: div
2516
2668
  aria-expanded="false"
2517
2669
  aria-label="Application launcher"
2518
2670
  >
2519
- <i class="fas fa-th" aria-hidden="true"></i>
2671
+ <span class="pf-v5-c-menu-toggle__icon">
2672
+ <i class="fas fa-th" aria-hidden="true"></i>
2673
+ </span>
2520
2674
  </button>
2521
2675
  </div>
2522
2676
  <div class="pf-v5-c-toolbar__item">
@@ -2526,7 +2680,9 @@ wrapperTag: div
2526
2680
  aria-expanded="false"
2527
2681
  aria-label="Settings"
2528
2682
  >
2529
- <i class="fas fa-cog" aria-hidden="true"></i>
2683
+ <span class="pf-v5-c-menu-toggle__icon">
2684
+ <i class="fas fa-cog" aria-hidden="true"></i>
2685
+ </span>
2530
2686
  </button>
2531
2687
  </div>
2532
2688
  <div class="pf-v5-c-toolbar__item">
@@ -2536,7 +2692,9 @@ wrapperTag: div
2536
2692
  aria-expanded="false"
2537
2693
  aria-label="Help"
2538
2694
  >
2539
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2695
+ <span class="pf-v5-c-menu-toggle__icon">
2696
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2697
+ </span>
2540
2698
  </button>
2541
2699
  </div>
2542
2700
  </div>
@@ -2547,31 +2705,12 @@ wrapperTag: div
2547
2705
  aria-expanded="false"
2548
2706
  aria-label="Actions"
2549
2707
  >
2550
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2708
+ <span class="pf-v5-c-menu-toggle__icon">
2709
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2710
+ </span>
2551
2711
  </button>
2552
2712
  </div>
2553
2713
  </div>
2554
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2555
- <button
2556
- class="pf-v5-c-menu-toggle pf-m-full-height"
2557
- type="button"
2558
- aria-expanded="false"
2559
- >
2560
- <span class="pf-v5-c-menu-toggle__icon">
2561
- <img
2562
- class="pf-v5-c-avatar"
2563
- alt="Avatar image"
2564
- src="/assets/images/img_avatar-light.svg"
2565
- />
2566
- </span>
2567
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2568
- <span class="pf-v5-c-menu-toggle__controls">
2569
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2570
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2571
- </span>
2572
- </span>
2573
- </button>
2574
- </div>
2575
2714
  </div>
2576
2715
  </div>
2577
2716
  </div>
@@ -2674,15 +2813,17 @@ wrapperTag: div
2674
2813
  <div
2675
2814
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
2676
2815
  >
2677
- <div class="pf-v5-c-toolbar__toggle">
2816
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
2678
2817
  <button
2679
- class="pf-v5-c-button pf-m-plain"
2818
+ class="pf-v5-c-menu-toggle pf-m-plain"
2680
2819
  type="button"
2681
- aria-label="Show filters"
2682
2820
  aria-expanded="false"
2821
+ aria-label="Show filters"
2683
2822
  aria-controls="primary-detail-content-body-padding-example-drawer-toolbar-expandable-content"
2684
2823
  >
2685
- <i class="fas fa-filter" aria-hidden="true"></i>
2824
+ <span class="pf-v5-c-menu-toggle__icon">
2825
+ <i class="fas fa-filter" aria-hidden="true"></i>
2826
+ </span>
2686
2827
  </button>
2687
2828
  </div>
2688
2829
 
@@ -2965,82 +3106,84 @@ wrapperTag: div
2965
3106
 
2966
3107
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2967
3108
  <div class="pf-v5-c-pagination pf-m-compact">
2968
- <div class="pf-v5-c-options-menu">
2969
- <button
2970
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2971
- type="button"
2972
- id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
2973
- aria-haspopup="listbox"
2974
- aria-expanded="false"
2975
- >
2976
- <span class="pf-v5-c-options-menu__toggle-text">
2977
- <b>1 - 10</b>&nbsp;of&nbsp;
2978
- <b>36</b>
2979
- </span>
2980
- <div class="pf-v5-c-options-menu__toggle-icon">
2981
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2982
- </div>
2983
- </button>
2984
- <ul
2985
- class="pf-v5-c-options-menu__menu"
2986
- role="menu"
2987
- aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
2988
- hidden
2989
- >
2990
- <li role="none">
2991
- <button
2992
- class="pf-v5-c-options-menu__menu-item"
2993
- type="button"
2994
- role="menuitem"
2995
- >5 per page</button>
2996
- </li>
2997
- <li role="none">
2998
- <button
2999
- class="pf-v5-c-options-menu__menu-item"
3000
- type="button"
3001
- role="menuitem"
3002
- >
3003
- 10 per page
3004
- <div
3005
- class="pf-v5-c-options-menu__menu-item-icon"
3006
- >
3007
- <i class="fas fa-check" aria-hidden="true"></i>
3008
- </div>
3009
- </button>
3010
- </li>
3011
- <li role="none">
3012
- <button
3013
- class="pf-v5-c-options-menu__menu-item"
3014
- type="button"
3015
- role="menuitem"
3016
- >20 per page</button>
3017
- </li>
3018
- </ul>
3019
- </div>
3020
- <nav
3021
- class="pf-v5-c-pagination__nav"
3022
- aria-label="Toolbar top pagination"
3023
- >
3024
- <div
3025
- class="pf-v5-c-pagination__nav-control pf-m-prev"
3026
- >
3109
+ <div class="pf-v5-c-pagination__page-menu">
3110
+ <div class="pf-v5-c-options-menu">
3027
3111
  <button
3028
- class="pf-v5-c-button pf-m-plain"
3112
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3029
3113
  type="button"
3030
- disabled
3031
- aria-label="Go to previous page"
3114
+ id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3115
+ aria-haspopup="listbox"
3116
+ aria-expanded="false"
3032
3117
  >
3033
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3118
+ <span class="pf-v5-c-options-menu__toggle-text">
3119
+ <b>1 - 10</b>&nbsp;of&nbsp;
3120
+ <b>36</b>
3121
+ </span>
3122
+ <div class="pf-v5-c-options-menu__toggle-icon">
3123
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3124
+ </div>
3034
3125
  </button>
3035
- </div>
3036
- <div
3037
- class="pf-v5-c-pagination__nav-control pf-m-next"
3038
- >
3039
- <button
3040
- class="pf-v5-c-button pf-m-plain"
3041
- type="button"
3042
- aria-label="Go to next page"
3043
- >
3126
+ <ul
3127
+ class="pf-v5-c-options-menu__menu"
3128
+ role="menu"
3129
+ aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3130
+ hidden
3131
+ >
3132
+ <li role="none">
3133
+ <button
3134
+ class="pf-v5-c-options-menu__menu-item"
3135
+ type="button"
3136
+ role="menuitem"
3137
+ >5 per page</button>
3138
+ </li>
3139
+ <li role="none">
3140
+ <button
3141
+ class="pf-v5-c-options-menu__menu-item"
3142
+ type="button"
3143
+ role="menuitem"
3144
+ >
3145
+ 10 per page
3146
+ <div
3147
+ class="pf-v5-c-options-menu__menu-item-icon"
3148
+ >
3149
+ <i class="fas fa-check" aria-hidden="true"></i>
3150
+ </div>
3151
+ </button>
3152
+ </li>
3153
+ <li role="none">
3154
+ <button
3155
+ class="pf-v5-c-options-menu__menu-item"
3156
+ type="button"
3157
+ role="menuitem"
3158
+ >20 per page</button>
3159
+ </li>
3160
+ </ul>
3161
+ </div>
3162
+ </div>
3163
+ <nav
3164
+ class="pf-v5-c-pagination__nav"
3165
+ aria-label="Toolbar top pagination"
3166
+ >
3167
+ <div
3168
+ class="pf-v5-c-pagination__nav-control pf-m-prev"
3169
+ >
3170
+ <button
3171
+ class="pf-v5-c-button pf-m-plain"
3172
+ type="button"
3173
+ disabled
3174
+ aria-label="Go to previous page"
3175
+ >
3176
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3177
+ </button>
3178
+ </div>
3179
+ <div
3180
+ class="pf-v5-c-pagination__nav-control pf-m-next"
3181
+ >
3182
+ <button
3183
+ class="pf-v5-c-button pf-m-plain"
3184
+ type="button"
3185
+ aria-label="Go to next page"
3186
+ >
3044
3187
  <i class="fas fa-angle-right" aria-hidden="true"></i>
3045
3188
  </button>
3046
3189
  </div>
@@ -3570,23 +3713,117 @@ wrapperTag: div
3570
3713
  </span>
3571
3714
  <div class="pf-v5-c-masthead__main">
3572
3715
  <a class="pf-v5-c-masthead__brand" href="#">
3573
- <img
3574
- class="pf-v5-c-brand"
3575
- src="/assets/images/pf-logo.svg"
3576
- alt="PatternFly logo"
3577
- style="--pf-v5-c-brand--Height:36px"
3578
- />
3716
+ <svg height="40px" viewBox="0 0 679 158">
3717
+ <title>PF-HorizontalLogo-Color</title>
3718
+ <defs>
3719
+ <linearGradient
3720
+ x1="68%"
3721
+ y1="2.25860997e-13%"
3722
+ x2="32%"
3723
+ y2="100%"
3724
+ id="linearGradient-primary-detail-card-view-expanded-example-masthead"
3725
+ >
3726
+ <stop stop-color="#2B9AF3" offset="0%" />
3727
+ <stop
3728
+ stop-color="#73BCF7"
3729
+ stop-opacity="0.502212631"
3730
+ offset="100%"
3731
+ />
3732
+ </linearGradient>
3733
+ </defs>
3734
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3735
+ <g
3736
+ transform="translate(206.000000, 45.750000)"
3737
+ fill="var(--pf-t--global--text--color--regular)"
3738
+ fill-rule="nonzero"
3739
+ >
3740
+ <path
3741
+ 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"
3742
+ />
3743
+ <path
3744
+ 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"
3745
+ />
3746
+ <path
3747
+ 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"
3748
+ />
3749
+ <path
3750
+ 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"
3751
+ />
3752
+ <path
3753
+ 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"
3754
+ />
3755
+ <path
3756
+ 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"
3757
+ />
3758
+ <path
3759
+ 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"
3760
+ />
3761
+ <polygon
3762
+ 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"
3763
+ />
3764
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3765
+ <path
3766
+ 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"
3767
+ />
3768
+ </g>
3769
+ <g transform="translate(0.000000, 0.000000)">
3770
+ <path
3771
+ 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"
3772
+ fill="#0066CC"
3773
+ />
3774
+ <path
3775
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3776
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3777
+ />
3778
+ <path
3779
+ 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"
3780
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3781
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3782
+ />
3783
+ </g>
3784
+ </g>
3785
+ </svg>
3579
3786
  </a>
3580
3787
  </div>
3581
3788
  <div class="pf-v5-c-masthead__content">
3582
3789
  <div
3583
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
3790
+ class="pf-v5-c-toolbar pf-m-static"
3584
3791
  id="primary-detail-card-view-expanded-example-masthead-toolbar"
3585
3792
  >
3586
3793
  <div class="pf-v5-c-toolbar__content">
3587
3794
  <div class="pf-v5-c-toolbar__content-section">
3795
+ <div class="pf-v5-c-toolbar__item">
3796
+ <button
3797
+ class="pf-v5-c-menu-toggle"
3798
+ type="button"
3799
+ aria-expanded="false"
3800
+ >
3801
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3802
+ <span class="pf-v5-c-menu-toggle__controls">
3803
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3804
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3805
+ </span>
3806
+ </span>
3807
+ </button>
3808
+ </div>
3809
+
3810
+ <div class="pf-v5-c-toolbar__item">
3811
+ <button
3812
+ class="pf-v5-c-menu-toggle"
3813
+ type="button"
3814
+ aria-expanded="false"
3815
+ >
3816
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3817
+ <span class="pf-v5-c-menu-toggle__controls">
3818
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3819
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3820
+ </span>
3821
+ </span>
3822
+ </button>
3823
+ </div>
3824
+
3588
3825
  <div
3589
- 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"
3826
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3590
3827
  >
3591
3828
  <div
3592
3829
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3598,7 +3835,9 @@ wrapperTag: div
3598
3835
  aria-expanded="false"
3599
3836
  aria-label="Application launcher"
3600
3837
  >
3601
- <i class="fas fa-th" aria-hidden="true"></i>
3838
+ <span class="pf-v5-c-menu-toggle__icon">
3839
+ <i class="fas fa-th" aria-hidden="true"></i>
3840
+ </span>
3602
3841
  </button>
3603
3842
  </div>
3604
3843
  <div class="pf-v5-c-toolbar__item">
@@ -3608,7 +3847,9 @@ wrapperTag: div
3608
3847
  aria-expanded="false"
3609
3848
  aria-label="Settings"
3610
3849
  >
3611
- <i class="fas fa-cog" aria-hidden="true"></i>
3850
+ <span class="pf-v5-c-menu-toggle__icon">
3851
+ <i class="fas fa-cog" aria-hidden="true"></i>
3852
+ </span>
3612
3853
  </button>
3613
3854
  </div>
3614
3855
  <div class="pf-v5-c-toolbar__item">
@@ -3618,7 +3859,9 @@ wrapperTag: div
3618
3859
  aria-expanded="false"
3619
3860
  aria-label="Help"
3620
3861
  >
3621
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3862
+ <span class="pf-v5-c-menu-toggle__icon">
3863
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3864
+ </span>
3622
3865
  </button>
3623
3866
  </div>
3624
3867
  </div>
@@ -3629,31 +3872,12 @@ wrapperTag: div
3629
3872
  aria-expanded="false"
3630
3873
  aria-label="Actions"
3631
3874
  >
3632
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3875
+ <span class="pf-v5-c-menu-toggle__icon">
3876
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3877
+ </span>
3633
3878
  </button>
3634
3879
  </div>
3635
3880
  </div>
3636
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3637
- <button
3638
- class="pf-v5-c-menu-toggle pf-m-full-height"
3639
- type="button"
3640
- aria-expanded="false"
3641
- >
3642
- <span class="pf-v5-c-menu-toggle__icon">
3643
- <img
3644
- class="pf-v5-c-avatar"
3645
- alt="Avatar image"
3646
- src="/assets/images/img_avatar-light.svg"
3647
- />
3648
- </span>
3649
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3650
- <span class="pf-v5-c-menu-toggle__controls">
3651
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3652
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3653
- </span>
3654
- </span>
3655
- </button>
3656
- </div>
3657
3881
  </div>
3658
3882
  </div>
3659
3883
  </div>
@@ -3752,67 +3976,50 @@ wrapperTag: div
3752
3976
  <div
3753
3977
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
3754
3978
  >
3755
- <div class="pf-v5-c-toolbar__toggle">
3979
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
3756
3980
  <button
3757
- class="pf-v5-c-button pf-m-plain"
3981
+ class="pf-v5-c-menu-toggle pf-m-plain"
3758
3982
  type="button"
3759
- aria-label="Show filters"
3760
3983
  aria-expanded="false"
3984
+ aria-label="Show filters"
3761
3985
  aria-controls="primary-detail-card-view-expanded-example-drawer-toolbar-expandable-content"
3762
3986
  >
3763
- <i class="fas fa-filter" aria-hidden="true"></i>
3987
+ <span class="pf-v5-c-menu-toggle__icon">
3988
+ <i class="fas fa-filter" aria-hidden="true"></i>
3989
+ </span>
3764
3990
  </button>
3765
3991
  </div>
3766
3992
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
3767
- <div class="pf-v5-c-dropdown">
3768
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
3769
- <label
3770
- class="pf-v5-c-dropdown__toggle-check"
3771
- for="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
3772
- >
3773
- <div class="pf-v5-c-check pf-m-standalone">
3774
- <input
3775
- class="pf-v5-c-check__input"
3776
- type="checkbox"
3777
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
3778
- aria-label="Select all"
3779
- />
3780
- </div>
3781
- </label>
3782
-
3783
- <button
3784
- class="pf-v5-c-dropdown__toggle-button"
3785
- type="button"
3786
- aria-expanded="false"
3787
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-button"
3788
- aria-label="Dropdown toggle"
3789
- >
3790
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3791
- </button>
3792
- </div>
3793
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3794
- <li role="none">
3795
- <button
3796
- class="pf-v5-c-dropdown__menu-item"
3797
- role="menuitem"
3798
- type="button"
3799
- >Select all</button>
3800
- </li>
3801
- <li role="none">
3802
- <button
3803
- class="pf-v5-c-dropdown__menu-item"
3804
- role="menuitem"
3805
- type="button"
3806
- >Select none</button>
3807
- </li>
3808
- <li role="none">
3809
- <button
3810
- class="pf-v5-c-dropdown__menu-item"
3811
- role="menuitem"
3812
- type="button"
3813
- >Other action</button>
3814
- </li>
3815
- </ul>
3993
+ <div
3994
+ class="pf-v5-c-menu-toggle pf-m-split-button"
3995
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check"
3996
+ >
3997
+ <label
3998
+ class="pf-v5-c-check pf-m-standalone"
3999
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check"
4000
+ for="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
4001
+ >
4002
+ <input
4003
+ class="pf-v5-c-check__input"
4004
+ type="checkbox"
4005
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
4006
+ name="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
4007
+ aria-label="Standalone check"
4008
+ />
4009
+ </label>
4010
+ <button
4011
+ class="pf-v5-c-menu-toggle__button"
4012
+ type="button"
4013
+ aria-expanded="false"
4014
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-menu-toggle-toggle-button"
4015
+ aria-label="Menu toggle"
4016
+ >
4017
+ <span class="pf-v5-c-menu-toggle__controls">
4018
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4019
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4020
+ </span>
4021
+ </span>
4022
+ </button>
3816
4023
  </div>
3817
4024
  </div>
3818
4025
 
@@ -3823,75 +4030,22 @@ wrapperTag: div
3823
4030
  role="group"
3824
4031
  >
3825
4032
  <div class="pf-v5-c-input-group__item">
3826
- <div class="pf-v5-c-select" style="width: 124px">
3827
- <span
3828
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
3829
- hidden
3830
- >Choose one</span>
3831
-
3832
- <button
3833
- class="pf-v5-c-select__toggle"
3834
- type="button"
3835
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
3836
- aria-haspopup="true"
3837
- aria-expanded="false"
3838
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
3839
- >
3840
- <div class="pf-v5-c-select__toggle-wrapper">
3841
- <span class="pf-v5-c-select__toggle-icon">
3842
- <i class="fas fa-filter" aria-hidden="true"></i>
3843
- </span>
3844
- <span class="pf-v5-c-select__toggle-text">Name</span>
3845
- </div>
3846
- <span class="pf-v5-c-select__toggle-arrow">
4033
+ <button
4034
+ class="pf-v5-c-menu-toggle"
4035
+ type="button"
4036
+ aria-expanded="false"
4037
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-search-filter-menu"
4038
+ >
4039
+ <span class="pf-v5-c-menu-toggle__icon">
4040
+ <i class="fas fa-filter" aria-hidden="true"></i>
4041
+ </span>
4042
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
4043
+ <span class="pf-v5-c-menu-toggle__controls">
4044
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3847
4045
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3848
4046
  </span>
3849
- </button>
3850
-
3851
- <ul
3852
- class="pf-v5-c-select__menu"
3853
- role="listbox"
3854
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
3855
- hidden
3856
- >
3857
- <li role="presentation">
3858
- <button
3859
- class="pf-v5-c-select__menu-item"
3860
- role="option"
3861
- >Running</button>
3862
- </li>
3863
- <li role="presentation">
3864
- <button
3865
- class="pf-v5-c-select__menu-item pf-m-selected"
3866
- role="option"
3867
- aria-selected="true"
3868
- >
3869
- Stopped
3870
- <span class="pf-v5-c-select__menu-item-icon">
3871
- <i class="fas fa-check" aria-hidden="true"></i>
3872
- </span>
3873
- </button>
3874
- </li>
3875
- <li role="presentation">
3876
- <button
3877
- class="pf-v5-c-select__menu-item"
3878
- role="option"
3879
- >Down</button>
3880
- </li>
3881
- <li role="presentation">
3882
- <button
3883
- class="pf-v5-c-select__menu-item"
3884
- role="option"
3885
- >Degraded</button>
3886
- </li>
3887
- <li role="presentation">
3888
- <button
3889
- class="pf-v5-c-select__menu-item"
3890
- role="option"
3891
- >Needs maintenance</button>
3892
- </li>
3893
- </ul>
3894
- </div>
4047
+ </span>
4048
+ </button>
3895
4049
  </div>
3896
4050
  <div class="pf-v5-c-input-group__item pf-m-fill">
3897
4051
  <div class="pf-v5-c-text-input-group">
@@ -3980,7 +4134,7 @@ wrapperTag: div
3980
4134
  </div>
3981
4135
 
3982
4136
  <div
3983
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right"
4137
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end"
3984
4138
  >
3985
4139
  <div class="pf-v5-c-toolbar__item">
3986
4140
  <button
@@ -4004,55 +4158,57 @@ wrapperTag: div
4004
4158
 
4005
4159
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
4006
4160
  <div class="pf-v5-c-pagination pf-m-compact">
4007
- <div class="pf-v5-c-options-menu">
4008
- <button
4009
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4010
- type="button"
4011
- id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4012
- aria-haspopup="listbox"
4013
- aria-expanded="false"
4014
- >
4015
- <span class="pf-v5-c-options-menu__toggle-text">
4016
- <b>1 - 10</b>&nbsp;of&nbsp;
4017
- <b>36</b>
4018
- </span>
4019
- <div class="pf-v5-c-options-menu__toggle-icon">
4020
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4021
- </div>
4022
- </button>
4023
- <ul
4024
- class="pf-v5-c-options-menu__menu"
4025
- role="menu"
4026
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4027
- hidden
4028
- >
4029
- <li role="none">
4030
- <button
4031
- class="pf-v5-c-options-menu__menu-item"
4032
- type="button"
4033
- role="menuitem"
4034
- >5 per page</button>
4035
- </li>
4036
- <li role="none">
4037
- <button
4038
- class="pf-v5-c-options-menu__menu-item"
4039
- type="button"
4040
- role="menuitem"
4041
- >
4042
- 10 per page
4043
- <div class="pf-v5-c-options-menu__menu-item-icon">
4044
- <i class="fas fa-check" aria-hidden="true"></i>
4045
- </div>
4046
- </button>
4047
- </li>
4048
- <li role="none">
4049
- <button
4050
- class="pf-v5-c-options-menu__menu-item"
4051
- type="button"
4052
- role="menuitem"
4053
- >20 per page</button>
4054
- </li>
4055
- </ul>
4161
+ <div class="pf-v5-c-pagination__page-menu">
4162
+ <div class="pf-v5-c-options-menu">
4163
+ <button
4164
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4165
+ type="button"
4166
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4167
+ aria-haspopup="listbox"
4168
+ aria-expanded="false"
4169
+ >
4170
+ <span class="pf-v5-c-options-menu__toggle-text">
4171
+ <b>1 - 10</b>&nbsp;of&nbsp;
4172
+ <b>36</b>
4173
+ </span>
4174
+ <div class="pf-v5-c-options-menu__toggle-icon">
4175
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4176
+ </div>
4177
+ </button>
4178
+ <ul
4179
+ class="pf-v5-c-options-menu__menu"
4180
+ role="menu"
4181
+ aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4182
+ hidden
4183
+ >
4184
+ <li role="none">
4185
+ <button
4186
+ class="pf-v5-c-options-menu__menu-item"
4187
+ type="button"
4188
+ role="menuitem"
4189
+ >5 per page</button>
4190
+ </li>
4191
+ <li role="none">
4192
+ <button
4193
+ class="pf-v5-c-options-menu__menu-item"
4194
+ type="button"
4195
+ role="menuitem"
4196
+ >
4197
+ 10 per page
4198
+ <div class="pf-v5-c-options-menu__menu-item-icon">
4199
+ <i class="fas fa-check" aria-hidden="true"></i>
4200
+ </div>
4201
+ </button>
4202
+ </li>
4203
+ <li role="none">
4204
+ <button
4205
+ class="pf-v5-c-options-menu__menu-item"
4206
+ type="button"
4207
+ role="menuitem"
4208
+ >20 per page</button>
4209
+ </li>
4210
+ </ul>
4211
+ </div>
4056
4212
  </div>
4057
4213
  <nav
4058
4214
  class="pf-v5-c-pagination__nav"
@@ -5144,23 +5300,117 @@ wrapperTag: div
5144
5300
  </span>
5145
5301
  <div class="pf-v5-c-masthead__main">
5146
5302
  <a class="pf-v5-c-masthead__brand" href="#">
5147
- <img
5148
- class="pf-v5-c-brand"
5149
- src="/assets/images/pf-logo.svg"
5150
- alt="PatternFly logo"
5151
- style="--pf-v5-c-brand--Height:36px"
5152
- />
5303
+ <svg height="40px" viewBox="0 0 679 158">
5304
+ <title>PF-HorizontalLogo-Color</title>
5305
+ <defs>
5306
+ <linearGradient
5307
+ x1="68%"
5308
+ y1="2.25860997e-13%"
5309
+ x2="32%"
5310
+ y2="100%"
5311
+ id="linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead"
5312
+ >
5313
+ <stop stop-color="#2B9AF3" offset="0%" />
5314
+ <stop
5315
+ stop-color="#73BCF7"
5316
+ stop-opacity="0.502212631"
5317
+ offset="100%"
5318
+ />
5319
+ </linearGradient>
5320
+ </defs>
5321
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5322
+ <g
5323
+ transform="translate(206.000000, 45.750000)"
5324
+ fill="var(--pf-t--global--text--color--regular)"
5325
+ fill-rule="nonzero"
5326
+ >
5327
+ <path
5328
+ 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"
5329
+ />
5330
+ <path
5331
+ 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"
5332
+ />
5333
+ <path
5334
+ 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"
5335
+ />
5336
+ <path
5337
+ 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"
5338
+ />
5339
+ <path
5340
+ 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"
5341
+ />
5342
+ <path
5343
+ 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"
5344
+ />
5345
+ <path
5346
+ 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"
5347
+ />
5348
+ <polygon
5349
+ 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"
5350
+ />
5351
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
5352
+ <path
5353
+ 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"
5354
+ />
5355
+ </g>
5356
+ <g transform="translate(0.000000, 0.000000)">
5357
+ <path
5358
+ 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"
5359
+ fill="#0066CC"
5360
+ />
5361
+ <path
5362
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5363
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5364
+ />
5365
+ <path
5366
+ 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"
5367
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5368
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5369
+ />
5370
+ </g>
5371
+ </g>
5372
+ </svg>
5153
5373
  </a>
5154
5374
  </div>
5155
5375
  <div class="pf-v5-c-masthead__content">
5156
5376
  <div
5157
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
5377
+ class="pf-v5-c-toolbar pf-m-static"
5158
5378
  id="primary-detail-card-simple-list-on-mobile-example-masthead-toolbar"
5159
5379
  >
5160
5380
  <div class="pf-v5-c-toolbar__content">
5161
5381
  <div class="pf-v5-c-toolbar__content-section">
5382
+ <div class="pf-v5-c-toolbar__item">
5383
+ <button
5384
+ class="pf-v5-c-menu-toggle"
5385
+ type="button"
5386
+ aria-expanded="false"
5387
+ >
5388
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
5389
+ <span class="pf-v5-c-menu-toggle__controls">
5390
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5391
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
5392
+ </span>
5393
+ </span>
5394
+ </button>
5395
+ </div>
5396
+
5397
+ <div class="pf-v5-c-toolbar__item">
5398
+ <button
5399
+ class="pf-v5-c-menu-toggle"
5400
+ type="button"
5401
+ aria-expanded="false"
5402
+ >
5403
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
5404
+ <span class="pf-v5-c-menu-toggle__controls">
5405
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5406
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
5407
+ </span>
5408
+ </span>
5409
+ </button>
5410
+ </div>
5411
+
5162
5412
  <div
5163
- 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"
5413
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
5164
5414
  >
5165
5415
  <div
5166
5416
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -5172,7 +5422,9 @@ wrapperTag: div
5172
5422
  aria-expanded="false"
5173
5423
  aria-label="Application launcher"
5174
5424
  >
5175
- <i class="fas fa-th" aria-hidden="true"></i>
5425
+ <span class="pf-v5-c-menu-toggle__icon">
5426
+ <i class="fas fa-th" aria-hidden="true"></i>
5427
+ </span>
5176
5428
  </button>
5177
5429
  </div>
5178
5430
  <div class="pf-v5-c-toolbar__item">
@@ -5182,7 +5434,9 @@ wrapperTag: div
5182
5434
  aria-expanded="false"
5183
5435
  aria-label="Settings"
5184
5436
  >
5185
- <i class="fas fa-cog" aria-hidden="true"></i>
5437
+ <span class="pf-v5-c-menu-toggle__icon">
5438
+ <i class="fas fa-cog" aria-hidden="true"></i>
5439
+ </span>
5186
5440
  </button>
5187
5441
  </div>
5188
5442
  <div class="pf-v5-c-toolbar__item">
@@ -5192,7 +5446,9 @@ wrapperTag: div
5192
5446
  aria-expanded="false"
5193
5447
  aria-label="Help"
5194
5448
  >
5195
- <i class="fas fa-question-circle" aria-hidden="true"></i>
5449
+ <span class="pf-v5-c-menu-toggle__icon">
5450
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
5451
+ </span>
5196
5452
  </button>
5197
5453
  </div>
5198
5454
  </div>
@@ -5203,31 +5459,12 @@ wrapperTag: div
5203
5459
  aria-expanded="false"
5204
5460
  aria-label="Actions"
5205
5461
  >
5206
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5462
+ <span class="pf-v5-c-menu-toggle__icon">
5463
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5464
+ </span>
5207
5465
  </button>
5208
5466
  </div>
5209
5467
  </div>
5210
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
5211
- <button
5212
- class="pf-v5-c-menu-toggle pf-m-full-height"
5213
- type="button"
5214
- aria-expanded="false"
5215
- >
5216
- <span class="pf-v5-c-menu-toggle__icon">
5217
- <img
5218
- class="pf-v5-c-avatar"
5219
- alt="Avatar image"
5220
- src="/assets/images/img_avatar-light.svg"
5221
- />
5222
- </span>
5223
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
5224
- <span class="pf-v5-c-menu-toggle__controls">
5225
- <span class="pf-v5-c-menu-toggle__toggle-icon">
5226
- <i class="fas fa-angle-down" aria-hidden="true"></i>
5227
- </span>
5228
- </span>
5229
- </button>
5230
- </div>
5231
5468
  </div>
5232
5469
  </div>
5233
5470
  </div>
@@ -5524,23 +5761,117 @@ wrapperTag: div
5524
5761
  </span>
5525
5762
  <div class="pf-v5-c-masthead__main">
5526
5763
  <a class="pf-v5-c-masthead__brand" href="#">
5527
- <img
5528
- class="pf-v5-c-brand"
5529
- src="/assets/images/pf-logo.svg"
5530
- alt="PatternFly logo"
5531
- style="--pf-v5-c-brand--Height:36px"
5532
- />
5764
+ <svg height="40px" viewBox="0 0 679 158">
5765
+ <title>PF-HorizontalLogo-Color</title>
5766
+ <defs>
5767
+ <linearGradient
5768
+ x1="68%"
5769
+ y1="2.25860997e-13%"
5770
+ x2="32%"
5771
+ y2="100%"
5772
+ id="linearGradient-primary-detail-card-data-list-example-masthead"
5773
+ >
5774
+ <stop stop-color="#2B9AF3" offset="0%" />
5775
+ <stop
5776
+ stop-color="#73BCF7"
5777
+ stop-opacity="0.502212631"
5778
+ offset="100%"
5779
+ />
5780
+ </linearGradient>
5781
+ </defs>
5782
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5783
+ <g
5784
+ transform="translate(206.000000, 45.750000)"
5785
+ fill="var(--pf-t--global--text--color--regular)"
5786
+ fill-rule="nonzero"
5787
+ >
5788
+ <path
5789
+ 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"
5790
+ />
5791
+ <path
5792
+ 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"
5793
+ />
5794
+ <path
5795
+ 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"
5796
+ />
5797
+ <path
5798
+ 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"
5799
+ />
5800
+ <path
5801
+ 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"
5802
+ />
5803
+ <path
5804
+ 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"
5805
+ />
5806
+ <path
5807
+ 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"
5808
+ />
5809
+ <polygon
5810
+ 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"
5811
+ />
5812
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
5813
+ <path
5814
+ 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"
5815
+ />
5816
+ </g>
5817
+ <g transform="translate(0.000000, 0.000000)">
5818
+ <path
5819
+ 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"
5820
+ fill="#0066CC"
5821
+ />
5822
+ <path
5823
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5824
+ fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5825
+ />
5826
+ <path
5827
+ 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"
5828
+ fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5829
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5830
+ />
5831
+ </g>
5832
+ </g>
5833
+ </svg>
5533
5834
  </a>
5534
5835
  </div>
5535
5836
  <div class="pf-v5-c-masthead__content">
5536
5837
  <div
5537
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
5838
+ class="pf-v5-c-toolbar pf-m-static"
5538
5839
  id="primary-detail-card-data-list-example-masthead-toolbar"
5539
5840
  >
5540
5841
  <div class="pf-v5-c-toolbar__content">
5541
5842
  <div class="pf-v5-c-toolbar__content-section">
5843
+ <div class="pf-v5-c-toolbar__item">
5844
+ <button
5845
+ class="pf-v5-c-menu-toggle"
5846
+ type="button"
5847
+ aria-expanded="false"
5848
+ >
5849
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
5850
+ <span class="pf-v5-c-menu-toggle__controls">
5851
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5852
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
5853
+ </span>
5854
+ </span>
5855
+ </button>
5856
+ </div>
5857
+
5858
+ <div class="pf-v5-c-toolbar__item">
5859
+ <button
5860
+ class="pf-v5-c-menu-toggle"
5861
+ type="button"
5862
+ aria-expanded="false"
5863
+ >
5864
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
5865
+ <span class="pf-v5-c-menu-toggle__controls">
5866
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5867
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
5868
+ </span>
5869
+ </span>
5870
+ </button>
5871
+ </div>
5872
+
5542
5873
  <div
5543
- 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"
5874
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
5544
5875
  >
5545
5876
  <div
5546
5877
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -5552,7 +5883,9 @@ wrapperTag: div
5552
5883
  aria-expanded="false"
5553
5884
  aria-label="Application launcher"
5554
5885
  >
5555
- <i class="fas fa-th" aria-hidden="true"></i>
5886
+ <span class="pf-v5-c-menu-toggle__icon">
5887
+ <i class="fas fa-th" aria-hidden="true"></i>
5888
+ </span>
5556
5889
  </button>
5557
5890
  </div>
5558
5891
  <div class="pf-v5-c-toolbar__item">
@@ -5562,7 +5895,9 @@ wrapperTag: div
5562
5895
  aria-expanded="false"
5563
5896
  aria-label="Settings"
5564
5897
  >
5565
- <i class="fas fa-cog" aria-hidden="true"></i>
5898
+ <span class="pf-v5-c-menu-toggle__icon">
5899
+ <i class="fas fa-cog" aria-hidden="true"></i>
5900
+ </span>
5566
5901
  </button>
5567
5902
  </div>
5568
5903
  <div class="pf-v5-c-toolbar__item">
@@ -5572,7 +5907,9 @@ wrapperTag: div
5572
5907
  aria-expanded="false"
5573
5908
  aria-label="Help"
5574
5909
  >
5575
- <i class="fas fa-question-circle" aria-hidden="true"></i>
5910
+ <span class="pf-v5-c-menu-toggle__icon">
5911
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
5912
+ </span>
5576
5913
  </button>
5577
5914
  </div>
5578
5915
  </div>
@@ -5583,31 +5920,12 @@ wrapperTag: div
5583
5920
  aria-expanded="false"
5584
5921
  aria-label="Actions"
5585
5922
  >
5586
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5923
+ <span class="pf-v5-c-menu-toggle__icon">
5924
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5925
+ </span>
5587
5926
  </button>
5588
5927
  </div>
5589
5928
  </div>
5590
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
5591
- <button
5592
- class="pf-v5-c-menu-toggle pf-m-full-height"
5593
- type="button"
5594
- aria-expanded="false"
5595
- >
5596
- <span class="pf-v5-c-menu-toggle__icon">
5597
- <img
5598
- class="pf-v5-c-avatar"
5599
- alt="Avatar image"
5600
- src="/assets/images/img_avatar-light.svg"
5601
- />
5602
- </span>
5603
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
5604
- <span class="pf-v5-c-menu-toggle__controls">
5605
- <span class="pf-v5-c-menu-toggle__toggle-icon">
5606
- <i class="fas fa-angle-down" aria-hidden="true"></i>
5607
- </span>
5608
- </span>
5609
- </button>
5610
- </div>
5611
5929
  </div>
5612
5930
  </div>
5613
5931
  </div>
@@ -5783,57 +6101,65 @@ wrapperTag: div
5783
6101
  <b>1 - 10</b> of
5784
6102
  <b>37</b>
5785
6103
  </div>
5786
- <div class="pf-v5-c-options-menu">
5787
- <button
5788
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
5789
- type="button"
5790
- id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5791
- aria-haspopup="listbox"
5792
- aria-expanded="false"
5793
- >
5794
- <span class="pf-v5-c-options-menu__toggle-text">
5795
- <b>1 - 10</b>&nbsp;of&nbsp;
5796
- <b>36</b>
5797
- </span>
5798
- <div class="pf-v5-c-options-menu__toggle-icon">
5799
- <i class="fas fa-caret-down" aria-hidden="true"></i>
5800
- </div>
5801
- </button>
5802
- <ul
5803
- class="pf-v5-c-options-menu__menu"
5804
- role="menu"
5805
- aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5806
- hidden
5807
- >
5808
- <li role="none">
5809
- <button
5810
- class="pf-v5-c-options-menu__menu-item"
5811
- type="button"
5812
- role="menuitem"
5813
- >5 per page</button>
5814
- </li>
5815
- <li role="none">
5816
- <button
5817
- class="pf-v5-c-options-menu__menu-item"
5818
- type="button"
5819
- role="menuitem"
5820
- >
5821
- 10 per page
5822
- <div
5823
- class="pf-v5-c-options-menu__menu-item-icon"
6104
+ <div class="pf-v5-c-pagination__page-menu">
6105
+ <div class="pf-v5-c-options-menu">
6106
+ <button
6107
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6108
+ type="button"
6109
+ id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6110
+ aria-haspopup="listbox"
6111
+ aria-expanded="false"
6112
+ >
6113
+ <span class="pf-v5-c-options-menu__toggle-text">
6114
+ <b>1 - 10</b>&nbsp;of&nbsp;
6115
+ <b>36</b>
6116
+ </span>
6117
+ <div class="pf-v5-c-options-menu__toggle-icon">
6118
+ <i
6119
+ class="fas fa-caret-down"
6120
+ aria-hidden="true"
6121
+ ></i>
6122
+ </div>
6123
+ </button>
6124
+ <ul
6125
+ class="pf-v5-c-options-menu__menu"
6126
+ role="menu"
6127
+ aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6128
+ hidden
6129
+ >
6130
+ <li role="none">
6131
+ <button
6132
+ class="pf-v5-c-options-menu__menu-item"
6133
+ type="button"
6134
+ role="menuitem"
6135
+ >5 per page</button>
6136
+ </li>
6137
+ <li role="none">
6138
+ <button
6139
+ class="pf-v5-c-options-menu__menu-item"
6140
+ type="button"
6141
+ role="menuitem"
5824
6142
  >
5825
- <i class="fas fa-check" aria-hidden="true"></i>
5826
- </div>
5827
- </button>
5828
- </li>
5829
- <li role="none">
5830
- <button
5831
- class="pf-v5-c-options-menu__menu-item"
5832
- type="button"
5833
- role="menuitem"
5834
- >20 per page</button>
5835
- </li>
5836
- </ul>
6143
+ 10 per page
6144
+ <div
6145
+ class="pf-v5-c-options-menu__menu-item-icon"
6146
+ >
6147
+ <i
6148
+ class="fas fa-check"
6149
+ aria-hidden="true"
6150
+ ></i>
6151
+ </div>
6152
+ </button>
6153
+ </li>
6154
+ <li role="none">
6155
+ <button
6156
+ class="pf-v5-c-options-menu__menu-item"
6157
+ type="button"
6158
+ role="menuitem"
6159
+ >20 per page</button>
6160
+ </li>
6161
+ </ul>
6162
+ </div>
5837
6163
  </div>
5838
6164
  </div>
5839
6165
  </div>
@@ -6142,23 +6468,117 @@ wrapperTag: div
6142
6468
  </span>
6143
6469
  <div class="pf-v5-c-masthead__main">
6144
6470
  <a class="pf-v5-c-masthead__brand" href="#">
6145
- <img
6146
- class="pf-v5-c-brand"
6147
- src="/assets/images/pf-logo.svg"
6148
- alt="PatternFly logo"
6149
- style="--pf-v5-c-brand--Height:36px"
6150
- />
6471
+ <svg height="40px" viewBox="0 0 679 158">
6472
+ <title>PF-HorizontalLogo-Color</title>
6473
+ <defs>
6474
+ <linearGradient
6475
+ x1="68%"
6476
+ y1="2.25860997e-13%"
6477
+ x2="32%"
6478
+ y2="100%"
6479
+ id="linearGradient-primary-detail-inline-modifier-example-masthead"
6480
+ >
6481
+ <stop stop-color="#2B9AF3" offset="0%" />
6482
+ <stop
6483
+ stop-color="#73BCF7"
6484
+ stop-opacity="0.502212631"
6485
+ offset="100%"
6486
+ />
6487
+ </linearGradient>
6488
+ </defs>
6489
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
6490
+ <g
6491
+ transform="translate(206.000000, 45.750000)"
6492
+ fill="var(--pf-t--global--text--color--regular)"
6493
+ fill-rule="nonzero"
6494
+ >
6495
+ <path
6496
+ 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"
6497
+ />
6498
+ <path
6499
+ 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"
6500
+ />
6501
+ <path
6502
+ 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"
6503
+ />
6504
+ <path
6505
+ 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"
6506
+ />
6507
+ <path
6508
+ 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"
6509
+ />
6510
+ <path
6511
+ 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"
6512
+ />
6513
+ <path
6514
+ 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"
6515
+ />
6516
+ <polygon
6517
+ 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"
6518
+ />
6519
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
6520
+ <path
6521
+ 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"
6522
+ />
6523
+ </g>
6524
+ <g transform="translate(0.000000, 0.000000)">
6525
+ <path
6526
+ 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"
6527
+ fill="#0066CC"
6528
+ />
6529
+ <path
6530
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
6531
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
6532
+ />
6533
+ <path
6534
+ 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"
6535
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
6536
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
6537
+ />
6538
+ </g>
6539
+ </g>
6540
+ </svg>
6151
6541
  </a>
6152
6542
  </div>
6153
6543
  <div class="pf-v5-c-masthead__content">
6154
6544
  <div
6155
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
6545
+ class="pf-v5-c-toolbar pf-m-static"
6156
6546
  id="primary-detail-inline-modifier-example-masthead-toolbar"
6157
6547
  >
6158
6548
  <div class="pf-v5-c-toolbar__content">
6159
6549
  <div class="pf-v5-c-toolbar__content-section">
6550
+ <div class="pf-v5-c-toolbar__item">
6551
+ <button
6552
+ class="pf-v5-c-menu-toggle"
6553
+ type="button"
6554
+ aria-expanded="false"
6555
+ >
6556
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
6557
+ <span class="pf-v5-c-menu-toggle__controls">
6558
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
6559
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6560
+ </span>
6561
+ </span>
6562
+ </button>
6563
+ </div>
6564
+
6565
+ <div class="pf-v5-c-toolbar__item">
6566
+ <button
6567
+ class="pf-v5-c-menu-toggle"
6568
+ type="button"
6569
+ aria-expanded="false"
6570
+ >
6571
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
6572
+ <span class="pf-v5-c-menu-toggle__controls">
6573
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
6574
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6575
+ </span>
6576
+ </span>
6577
+ </button>
6578
+ </div>
6579
+
6160
6580
  <div
6161
- 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"
6581
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
6162
6582
  >
6163
6583
  <div
6164
6584
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -6170,7 +6590,9 @@ wrapperTag: div
6170
6590
  aria-expanded="false"
6171
6591
  aria-label="Application launcher"
6172
6592
  >
6173
- <i class="fas fa-th" aria-hidden="true"></i>
6593
+ <span class="pf-v5-c-menu-toggle__icon">
6594
+ <i class="fas fa-th" aria-hidden="true"></i>
6595
+ </span>
6174
6596
  </button>
6175
6597
  </div>
6176
6598
  <div class="pf-v5-c-toolbar__item">
@@ -6180,7 +6602,9 @@ wrapperTag: div
6180
6602
  aria-expanded="false"
6181
6603
  aria-label="Settings"
6182
6604
  >
6183
- <i class="fas fa-cog" aria-hidden="true"></i>
6605
+ <span class="pf-v5-c-menu-toggle__icon">
6606
+ <i class="fas fa-cog" aria-hidden="true"></i>
6607
+ </span>
6184
6608
  </button>
6185
6609
  </div>
6186
6610
  <div class="pf-v5-c-toolbar__item">
@@ -6190,7 +6614,9 @@ wrapperTag: div
6190
6614
  aria-expanded="false"
6191
6615
  aria-label="Help"
6192
6616
  >
6193
- <i class="fas fa-question-circle" aria-hidden="true"></i>
6617
+ <span class="pf-v5-c-menu-toggle__icon">
6618
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
6619
+ </span>
6194
6620
  </button>
6195
6621
  </div>
6196
6622
  </div>
@@ -6201,31 +6627,12 @@ wrapperTag: div
6201
6627
  aria-expanded="false"
6202
6628
  aria-label="Actions"
6203
6629
  >
6204
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6630
+ <span class="pf-v5-c-menu-toggle__icon">
6631
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6632
+ </span>
6205
6633
  </button>
6206
6634
  </div>
6207
6635
  </div>
6208
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
6209
- <button
6210
- class="pf-v5-c-menu-toggle pf-m-full-height"
6211
- type="button"
6212
- aria-expanded="false"
6213
- >
6214
- <span class="pf-v5-c-menu-toggle__icon">
6215
- <img
6216
- class="pf-v5-c-avatar"
6217
- alt="Avatar image"
6218
- src="/assets/images/img_avatar-light.svg"
6219
- />
6220
- </span>
6221
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
6222
- <span class="pf-v5-c-menu-toggle__controls">
6223
- <span class="pf-v5-c-menu-toggle__toggle-icon">
6224
- <i class="fas fa-angle-down" aria-hidden="true"></i>
6225
- </span>
6226
- </span>
6227
- </button>
6228
- </div>
6229
6636
  </div>
6230
6637
  </div>
6231
6638
  </div>
@@ -6451,55 +6858,59 @@ wrapperTag: div
6451
6858
 
6452
6859
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
6453
6860
  <div class="pf-v5-c-pagination pf-m-compact">
6454
- <div class="pf-v5-c-options-menu">
6455
- <button
6456
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6457
- type="button"
6458
- id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6459
- aria-haspopup="listbox"
6460
- aria-expanded="false"
6461
- >
6462
- <span class="pf-v5-c-options-menu__toggle-text">
6463
- <b>1 - 10</b>&nbsp;of&nbsp;
6464
- <b>36</b>
6465
- </span>
6466
- <div class="pf-v5-c-options-menu__toggle-icon">
6467
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6468
- </div>
6469
- </button>
6470
- <ul
6471
- class="pf-v5-c-options-menu__menu"
6472
- role="menu"
6473
- aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6474
- hidden
6475
- >
6476
- <li role="none">
6477
- <button
6478
- class="pf-v5-c-options-menu__menu-item"
6479
- type="button"
6480
- role="menuitem"
6481
- >5 per page</button>
6482
- </li>
6483
- <li role="none">
6484
- <button
6485
- class="pf-v5-c-options-menu__menu-item"
6486
- type="button"
6487
- role="menuitem"
6488
- >
6489
- 10 per page
6490
- <div class="pf-v5-c-options-menu__menu-item-icon">
6491
- <i class="fas fa-check" aria-hidden="true"></i>
6492
- </div>
6493
- </button>
6494
- </li>
6495
- <li role="none">
6496
- <button
6497
- class="pf-v5-c-options-menu__menu-item"
6498
- type="button"
6499
- role="menuitem"
6500
- >20 per page</button>
6501
- </li>
6502
- </ul>
6861
+ <div class="pf-v5-c-pagination__page-menu">
6862
+ <div class="pf-v5-c-options-menu">
6863
+ <button
6864
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6865
+ type="button"
6866
+ id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6867
+ aria-haspopup="listbox"
6868
+ aria-expanded="false"
6869
+ >
6870
+ <span class="pf-v5-c-options-menu__toggle-text">
6871
+ <b>1 - 10</b>&nbsp;of&nbsp;
6872
+ <b>36</b>
6873
+ </span>
6874
+ <div class="pf-v5-c-options-menu__toggle-icon">
6875
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6876
+ </div>
6877
+ </button>
6878
+ <ul
6879
+ class="pf-v5-c-options-menu__menu"
6880
+ role="menu"
6881
+ aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6882
+ hidden
6883
+ >
6884
+ <li role="none">
6885
+ <button
6886
+ class="pf-v5-c-options-menu__menu-item"
6887
+ type="button"
6888
+ role="menuitem"
6889
+ >5 per page</button>
6890
+ </li>
6891
+ <li role="none">
6892
+ <button
6893
+ class="pf-v5-c-options-menu__menu-item"
6894
+ type="button"
6895
+ role="menuitem"
6896
+ >
6897
+ 10 per page
6898
+ <div
6899
+ class="pf-v5-c-options-menu__menu-item-icon"
6900
+ >
6901
+ <i class="fas fa-check" aria-hidden="true"></i>
6902
+ </div>
6903
+ </button>
6904
+ </li>
6905
+ <li role="none">
6906
+ <button
6907
+ class="pf-v5-c-options-menu__menu-item"
6908
+ type="button"
6909
+ role="menuitem"
6910
+ >20 per page</button>
6911
+ </li>
6912
+ </ul>
6913
+ </div>
6503
6914
  </div>
6504
6915
  <nav
6505
6916
  class="pf-v5-c-pagination__nav"
@@ -6929,13 +7340,15 @@ wrapperTag: div
6929
7340
  role="region"
6930
7341
  id="primary-detail-inline-modifier-example-drawer-tabs"
6931
7342
  >
6932
- <button
6933
- class="pf-v5-c-tabs__scroll-button"
6934
- type="button"
6935
- aria-label="Scroll left"
6936
- >
6937
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6938
- </button>
7343
+ <div class="pf-v5-c-tabs__scroll-button">
7344
+ <button
7345
+ class="pf-v5-c-button pf-m-plain"
7346
+ type="button"
7347
+ aria-label="Scroll left"
7348
+ >
7349
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
7350
+ </button>
7351
+ </div>
6939
7352
  <ul class="pf-v5-c-tabs__list" role="tablist">
6940
7353
  <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
6941
7354
  <button
@@ -6960,13 +7373,15 @@ wrapperTag: div
6960
7373
  </button>
6961
7374
  </li>
6962
7375
  </ul>
6963
- <button
6964
- class="pf-v5-c-tabs__scroll-button"
6965
- type="button"
6966
- aria-label="Scroll right"
6967
- >
6968
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6969
- </button>
7376
+ <div class="pf-v5-c-tabs__scroll-button">
7377
+ <button
7378
+ class="pf-v5-c-button pf-m-plain"
7379
+ type="button"
7380
+ aria-label="Scroll right"
7381
+ >
7382
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
7383
+ </button>
7384
+ </div>
6970
7385
  </div>
6971
7386
  </div>
6972
7387