@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/demos/ContextSelector/examples/ContextSelector.md DELETED
@@ -1,1712 +0,0 @@
1
- ---
2
- id: 'Context selector'
3
- section: components
4
- subsection: menus
5
- deprecated: true
6
- ---## Examples
7
-
8
- ### Context selector in masthead
9
-
10
- ```html isFullscreen
11
- <div class="pf-v6-c-page" id="context-selector-in-masthead">
12
- <div class="pf-v6-c-skip-to-content">
13
- <a
14
- class="pf-v6-c-button pf-m-primary"
15
- href="#main-content-context-selector-in-masthead"
16
- >Skip to content</a>
17
- </div>
18
- <header class="pf-v6-c-masthead" id="context-selector-in-masthead-masthead">
19
- <span class="pf-v6-c-masthead__toggle">
20
- <button
21
- class="pf-v6-c-button pf-m-plain"
22
- type="button"
23
- aria-label="Global navigation"
24
- >
25
- <i class="fas fa-bars" aria-hidden="true"></i>
26
- </button>
27
- </span>
28
- <div class="pf-v6-c-masthead__main">
29
- <a class="pf-v6-c-masthead__brand" href="#">
30
- <svg height="40px" viewBox="0 0 679 158">
31
- <title>PF-HorizontalLogo-Color</title>
32
- <defs>
33
- <linearGradient
34
- x1="68%"
35
- y1="2.25860997e-13%"
36
- x2="32%"
37
- y2="100%"
38
- id="linearGradient-context-selector-in-masthead-masthead"
39
- >
40
- <stop stop-color="#2B9AF3" offset="0%" />
41
- <stop
42
- stop-color="#73BCF7"
43
- stop-opacity="0.502212631"
44
- offset="100%"
45
- />
46
- </linearGradient>
47
- </defs>
48
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
49
- <g
50
- transform="translate(206.000000, 45.750000)"
51
- fill="var(--pf-t--global--text--color--regular)"
52
- fill-rule="nonzero"
53
- >
54
- <path
55
- 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"
56
- />
57
- <path
58
- 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"
59
- />
60
- <path
61
- 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"
62
- />
63
- <path
64
- 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"
65
- />
66
- <path
67
- 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"
68
- />
69
- <path
70
- 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"
71
- />
72
- <path
73
- 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"
74
- />
75
- <polygon
76
- 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"
77
- />
78
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
79
- <path
80
- 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"
81
- />
82
- </g>
83
- <g transform="translate(0.000000, 0.000000)">
84
- <path
85
- 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"
86
- fill="#0066CC"
87
- />
88
- <path
89
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
90
- fill="url(#linearGradient-context-selector-in-masthead-masthead)"
91
- />
92
- <path
93
- 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"
94
- fill="url(#linearGradient-context-selector-in-masthead-masthead)"
95
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
96
- />
97
- </g>
98
- </g>
99
- </svg>
100
- </a>
101
- </div>
102
- <div class="pf-v6-c-masthead__content">
103
- <div
104
- class="pf-v6-c-toolbar pf-m-static"
105
- id="context-selector-in-masthead-masthead-toolbar"
106
- >
107
- <div class="pf-v6-c-toolbar__content">
108
- <div class="pf-v6-c-toolbar__content-section">
109
- <div class="pf-v6-c-toolbar__item">
110
- <button
111
- class="pf-v6-c-menu-toggle pf-m-full-height"
112
- type="button"
113
- aria-expanded="false"
114
- >
115
- <span class="pf-v6-c-menu-toggle__text">Context selector</span>
116
- <span class="pf-v6-c-menu-toggle__controls">
117
- <span class="pf-v6-c-menu-toggle__toggle-icon">
118
- <i class="fas fa-caret-down" aria-hidden="true"></i>
119
- </span>
120
- </span>
121
- </button>
122
- </div>
123
- </div>
124
- </div>
125
- </div>
126
- </div>
127
- </header>
128
- <div class="pf-v6-c-page__sidebar">
129
- <div class="pf-v6-c-page__sidebar-body">
130
- <nav
131
- class="pf-v6-c-nav"
132
- id="context-selector-in-masthead-primary-nav"
133
- aria-label="Global"
134
- >
135
- <ul class="pf-v6-c-nav__list" role="list">
136
- <li class="pf-v6-c-nav__item">
137
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
138
- </li>
139
- <li class="pf-v6-c-nav__item">
140
- <a
141
- href="#"
142
- class="pf-v6-c-nav__link pf-m-current"
143
- aria-current="page"
144
- >Policy</a>
145
- </li>
146
- <li class="pf-v6-c-nav__item">
147
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
148
- </li>
149
- <li class="pf-v6-c-nav__item">
150
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
151
- </li>
152
- <li class="pf-v6-c-nav__item">
153
- <a href="#" class="pf-v6-c-nav__link">Server</a>
154
- </li>
155
- </ul>
156
- </nav>
157
- </div>
158
- </div>
159
- <main
160
- class="pf-v6-c-page__main"
161
- tabindex="-1"
162
- id="main-content-context-selector-in-masthead"
163
- >
164
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
165
- <div class="pf-v6-c-page__main-body">
166
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
167
- <ol class="pf-v6-c-breadcrumb__list" role="list">
168
- <li class="pf-v6-c-breadcrumb__item">
169
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
170
- </li>
171
- <li class="pf-v6-c-breadcrumb__item">
172
- <span class="pf-v6-c-breadcrumb__item-divider">
173
- <i class="fas fa-angle-right" aria-hidden="true"></i>
174
- </span>
175
-
176
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
177
- </li>
178
- <li class="pf-v6-c-breadcrumb__item">
179
- <span class="pf-v6-c-breadcrumb__item-divider">
180
- <i class="fas fa-angle-right" aria-hidden="true"></i>
181
- </span>
182
-
183
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
184
- </li>
185
- <li class="pf-v6-c-breadcrumb__item">
186
- <span class="pf-v6-c-breadcrumb__item-divider">
187
- <i class="fas fa-angle-right" aria-hidden="true"></i>
188
- </span>
189
-
190
- <a
191
- href="#"
192
- class="pf-v6-c-breadcrumb__link pf-m-current"
193
- aria-current="page"
194
- >Section landing</a>
195
- </li>
196
- </ol>
197
- </nav>
198
- </div>
199
- </section>
200
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
201
- <div class="pf-v6-c-page__main-body">
202
- <div class="pf-v6-c-content">
203
- <h1>Main title</h1>
204
- <p>This is a full page demo.</p>
205
- </div>
206
- </div>
207
- </section>
208
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
209
- <div class="pf-v6-c-page__main-body">
210
- <div class="pf-v6-l-gallery pf-m-gutter">
211
- <div class="pf-v6-c-card">
212
- <div class="pf-v6-c-card__body">This is a card</div>
213
- </div>
214
- <div class="pf-v6-c-card">
215
- <div class="pf-v6-c-card__body">This is a card</div>
216
- </div>
217
- <div class="pf-v6-c-card">
218
- <div class="pf-v6-c-card__body">This is a card</div>
219
- </div>
220
- <div class="pf-v6-c-card">
221
- <div class="pf-v6-c-card__body">This is a card</div>
222
- </div>
223
- <div class="pf-v6-c-card">
224
- <div class="pf-v6-c-card__body">This is a card</div>
225
- </div>
226
- <div class="pf-v6-c-card">
227
- <div class="pf-v6-c-card__body">This is a card</div>
228
- </div>
229
- <div class="pf-v6-c-card">
230
- <div class="pf-v6-c-card__body">This is a card</div>
231
- </div>
232
- <div class="pf-v6-c-card">
233
- <div class="pf-v6-c-card__body">This is a card</div>
234
- </div>
235
- <div class="pf-v6-c-card">
236
- <div class="pf-v6-c-card__body">This is a card</div>
237
- </div>
238
- <div class="pf-v6-c-card">
239
- <div class="pf-v6-c-card__body">This is a card</div>
240
- </div>
241
- </div>
242
- </div>
243
- </section>
244
- </main>
245
- </div>
246
-
247
- ```
248
-
249
- ### Context selector in sidebar
250
-
251
- ```html isFullscreen
252
- <div class="pf-v6-c-page" id="context-selector-in-sidebar-example">
253
- <div class="pf-v6-c-skip-to-content">
254
- <a
255
- class="pf-v6-c-button pf-m-primary"
256
- href="#main-content-context-selector-in-sidebar-example"
257
- >Skip to content</a>
258
- </div>
259
- <header
260
- class="pf-v6-c-masthead"
261
- id="context-selector-in-sidebar-example-masthead"
262
- >
263
- <span class="pf-v6-c-masthead__toggle">
264
- <button
265
- class="pf-v6-c-button pf-m-plain"
266
- type="button"
267
- aria-label="Global navigation"
268
- >
269
- <i class="fas fa-bars" aria-hidden="true"></i>
270
- </button>
271
- </span>
272
- <div class="pf-v6-c-masthead__main">
273
- <a class="pf-v6-c-masthead__brand" href="#">
274
- <svg height="40px" viewBox="0 0 679 158">
275
- <title>PF-HorizontalLogo-Color</title>
276
- <defs>
277
- <linearGradient
278
- x1="68%"
279
- y1="2.25860997e-13%"
280
- x2="32%"
281
- y2="100%"
282
- id="linearGradient-context-selector-in-sidebar-example-masthead"
283
- >
284
- <stop stop-color="#2B9AF3" offset="0%" />
285
- <stop
286
- stop-color="#73BCF7"
287
- stop-opacity="0.502212631"
288
- offset="100%"
289
- />
290
- </linearGradient>
291
- </defs>
292
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
293
- <g
294
- transform="translate(206.000000, 45.750000)"
295
- fill="var(--pf-t--global--text--color--regular)"
296
- fill-rule="nonzero"
297
- >
298
- <path
299
- 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"
300
- />
301
- <path
302
- 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"
303
- />
304
- <path
305
- 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"
306
- />
307
- <path
308
- 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"
309
- />
310
- <path
311
- 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"
312
- />
313
- <path
314
- 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"
315
- />
316
- <path
317
- 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"
318
- />
319
- <polygon
320
- 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"
321
- />
322
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
323
- <path
324
- 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"
325
- />
326
- </g>
327
- <g transform="translate(0.000000, 0.000000)">
328
- <path
329
- 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"
330
- fill="#0066CC"
331
- />
332
- <path
333
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
334
- fill="url(#linearGradient-context-selector-in-sidebar-example-masthead)"
335
- />
336
- <path
337
- 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"
338
- fill="url(#linearGradient-context-selector-in-sidebar-example-masthead)"
339
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
340
- />
341
- </g>
342
- </g>
343
- </svg>
344
- </a>
345
- </div>
346
- <div class="pf-v6-c-masthead__content">
347
- <div
348
- class="pf-v6-c-toolbar pf-m-static"
349
- id="context-selector-in-sidebar-example-masthead-toolbar"
350
- >
351
- <div class="pf-v6-c-toolbar__content">
352
- <div class="pf-v6-c-toolbar__content-section">
353
- <div class="pf-v6-c-toolbar__item">
354
- <button
355
- class="pf-v6-c-menu-toggle"
356
- type="button"
357
- aria-expanded="false"
358
- >
359
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
360
- <span class="pf-v6-c-menu-toggle__controls">
361
- <span class="pf-v6-c-menu-toggle__toggle-icon">
362
- <i class="fas fa-caret-down" aria-hidden="true"></i>
363
- </span>
364
- </span>
365
- </button>
366
- </div>
367
-
368
- <div class="pf-v6-c-toolbar__item">
369
- <button
370
- class="pf-v6-c-menu-toggle"
371
- type="button"
372
- aria-expanded="false"
373
- >
374
- <span class="pf-v6-c-menu-toggle__text">Services</span>
375
- <span class="pf-v6-c-menu-toggle__controls">
376
- <span class="pf-v6-c-menu-toggle__toggle-icon">
377
- <i class="fas fa-caret-down" aria-hidden="true"></i>
378
- </span>
379
- </span>
380
- </button>
381
- </div>
382
-
383
- <div
384
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
385
- >
386
- <div
387
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
388
- >
389
- <div class="pf-v6-c-toolbar__item">
390
- <button
391
- class="pf-v6-c-menu-toggle pf-m-plain"
392
- type="button"
393
- aria-expanded="false"
394
- aria-label="Application launcher"
395
- >
396
- <span class="pf-v6-c-menu-toggle__icon">
397
- <i class="fas fa-th" aria-hidden="true"></i>
398
- </span>
399
- </button>
400
- </div>
401
- <div class="pf-v6-c-toolbar__item">
402
- <button
403
- class="pf-v6-c-menu-toggle pf-m-plain"
404
- type="button"
405
- aria-expanded="false"
406
- aria-label="Settings"
407
- >
408
- <span class="pf-v6-c-menu-toggle__icon">
409
- <i class="fas fa-cog" aria-hidden="true"></i>
410
- </span>
411
- </button>
412
- </div>
413
- <div class="pf-v6-c-toolbar__item">
414
- <button
415
- class="pf-v6-c-menu-toggle pf-m-plain"
416
- type="button"
417
- aria-expanded="false"
418
- aria-label="Help"
419
- >
420
- <span class="pf-v6-c-menu-toggle__icon">
421
- <i class="fas fa-question-circle" aria-hidden="true"></i>
422
- </span>
423
- </button>
424
- </div>
425
- </div>
426
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
427
- <button
428
- class="pf-v6-c-menu-toggle pf-m-plain"
429
- type="button"
430
- aria-expanded="false"
431
- aria-label="Actions"
432
- >
433
- <span class="pf-v6-c-menu-toggle__icon">
434
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
435
- </span>
436
- </button>
437
- </div>
438
- </div>
439
- </div>
440
- </div>
441
- </div>
442
- </div>
443
- </header>
444
- <div class="pf-v6-c-page__sidebar">
445
- <div class="pf-v6-c-page__sidebar-body pf-m-menu">
446
- <div class="pf-v6-c-context-selector pf-m-page-insets pf-m-large">
447
- <span
448
- id="context-selector-collapsed-example-label"
449
- hidden
450
- >Selected project:</span>
451
- <button
452
- class="pf-v6-c-context-selector__toggle"
453
- aria-expanded="false"
454
- id="context-selector-collapsed-example-toggle"
455
- aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
456
- >
457
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
458
- <span class="pf-v6-c-context-selector__toggle-icon">
459
- <i class="fas fa-caret-down" aria-hidden="true"></i>
460
- </span>
461
- </button>
462
- <div class="pf-v6-c-context-selector__menu" hidden>
463
- <div class="pf-v6-c-context-selector__menu-search">
464
- <div class="pf-v6-c-text-input-group">
465
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
466
- <span class="pf-v6-c-text-input-group__text">
467
- <span class="pf-v6-c-text-input-group__icon">
468
- <i class="fas fa-fw fa-search"></i>
469
- </span>
470
- <input
471
- class="pf-v6-c-text-input-group__text-input"
472
- type="text"
473
- placeholder="Search"
474
- value
475
- aria-label="Search input"
476
- />
477
- </span>
478
- </div>
479
- </div>
480
- </div>
481
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
482
- <li role="none">
483
- <a
484
- class="pf-v6-c-context-selector__menu-list-item"
485
- href="#"
486
- role="menuitem"
487
- >Link</a>
488
- </li>
489
- <li role="none">
490
- <button
491
- class="pf-v6-c-context-selector__menu-list-item"
492
- type="button"
493
- role="menuitem"
494
- >Action</button>
495
- </li>
496
- <li role="none">
497
- <a
498
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
499
- href="#"
500
- aria-disabled="true"
501
- tabindex="-1"
502
- role="menuitem"
503
- >Disabled link</a>
504
- </li>
505
- <li role="none">
506
- <button
507
- class="pf-v6-c-context-selector__menu-list-item"
508
- type="button"
509
- disabled
510
- role="menuitem"
511
- >Disabled action</button>
512
- </li>
513
- <li role="none">
514
- <button
515
- class="pf-v6-c-context-selector__menu-list-item"
516
- type="button"
517
- role="menuitem"
518
- >My project</button>
519
- </li>
520
- <li role="none">
521
- <button
522
- class="pf-v6-c-context-selector__menu-list-item"
523
- type="button"
524
- role="menuitem"
525
- >OpenShift cluster</button>
526
- </li>
527
- <li role="none">
528
- <button
529
- class="pf-v6-c-context-selector__menu-list-item"
530
- type="button"
531
- role="menuitem"
532
- >Production Ansible</button>
533
- </li>
534
- <li role="none">
535
- <button
536
- class="pf-v6-c-context-selector__menu-list-item"
537
- type="button"
538
- role="menuitem"
539
- >AWS</button>
540
- </li>
541
- <li role="none">
542
- <button
543
- class="pf-v6-c-context-selector__menu-list-item"
544
- type="button"
545
- role="menuitem"
546
- >Azure</button>
547
- </li>
548
- <li role="none">
549
- <button
550
- class="pf-v6-c-context-selector__menu-list-item"
551
- type="button"
552
- role="menuitem"
553
- >My project</button>
554
- </li>
555
- <li role="none">
556
- <button
557
- class="pf-v6-c-context-selector__menu-list-item"
558
- type="button"
559
- role="menuitem"
560
- >OpenShift cluster</button>
561
- </li>
562
- <li role="none">
563
- <button
564
- class="pf-v6-c-context-selector__menu-list-item"
565
- type="button"
566
- role="menuitem"
567
- >Production Ansible</button>
568
- </li>
569
- <li role="none">
570
- <button
571
- class="pf-v6-c-context-selector__menu-list-item"
572
- type="button"
573
- role="menuitem"
574
- >AWS</button>
575
- </li>
576
- <li role="none">
577
- <button
578
- class="pf-v6-c-context-selector__menu-list-item"
579
- type="button"
580
- role="menuitem"
581
- >Azure</button>
582
- </li>
583
- </ul>
584
- </div>
585
- </div>
586
- </div>
587
- <div class="pf-v6-c-page__sidebar-body">
588
- <nav
589
- class="pf-v6-c-nav"
590
- id="context-selector-in-sidebar-example-primary-nav"
591
- aria-label="Global"
592
- >
593
- <ul class="pf-v6-c-nav__list" role="list">
594
- <li class="pf-v6-c-nav__item">
595
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
596
- </li>
597
- <li class="pf-v6-c-nav__item">
598
- <a
599
- href="#"
600
- class="pf-v6-c-nav__link pf-m-current"
601
- aria-current="page"
602
- >Policy</a>
603
- </li>
604
- <li class="pf-v6-c-nav__item">
605
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
606
- </li>
607
- <li class="pf-v6-c-nav__item">
608
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
609
- </li>
610
- <li class="pf-v6-c-nav__item">
611
- <a href="#" class="pf-v6-c-nav__link">Server</a>
612
- </li>
613
- </ul>
614
- </nav>
615
- </div>
616
- </div>
617
- <main
618
- class="pf-v6-c-page__main"
619
- tabindex="-1"
620
- id="main-content-context-selector-in-sidebar-example"
621
- >
622
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
623
- <div class="pf-v6-c-page__main-body">
624
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
625
- <ol class="pf-v6-c-breadcrumb__list" role="list">
626
- <li class="pf-v6-c-breadcrumb__item">
627
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
628
- </li>
629
- <li class="pf-v6-c-breadcrumb__item">
630
- <span class="pf-v6-c-breadcrumb__item-divider">
631
- <i class="fas fa-angle-right" aria-hidden="true"></i>
632
- </span>
633
-
634
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
635
- </li>
636
- <li class="pf-v6-c-breadcrumb__item">
637
- <span class="pf-v6-c-breadcrumb__item-divider">
638
- <i class="fas fa-angle-right" aria-hidden="true"></i>
639
- </span>
640
-
641
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
642
- </li>
643
- <li class="pf-v6-c-breadcrumb__item">
644
- <span class="pf-v6-c-breadcrumb__item-divider">
645
- <i class="fas fa-angle-right" aria-hidden="true"></i>
646
- </span>
647
-
648
- <a
649
- href="#"
650
- class="pf-v6-c-breadcrumb__link pf-m-current"
651
- aria-current="page"
652
- >Section landing</a>
653
- </li>
654
- </ol>
655
- </nav>
656
- </div>
657
- </section>
658
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
659
- <div class="pf-v6-c-page__main-body">
660
- <div class="pf-v6-c-content">
661
- <h1>Main title</h1>
662
- <p>This is a full page demo.</p>
663
- </div>
664
- </div>
665
- </section>
666
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
667
- <div class="pf-v6-c-page__main-body">
668
- <div class="pf-v6-l-gallery pf-m-gutter">
669
- <div class="pf-v6-c-card">
670
- <div class="pf-v6-c-card__body">This is a card</div>
671
- </div>
672
- <div class="pf-v6-c-card">
673
- <div class="pf-v6-c-card__body">This is a card</div>
674
- </div>
675
- <div class="pf-v6-c-card">
676
- <div class="pf-v6-c-card__body">This is a card</div>
677
- </div>
678
- <div class="pf-v6-c-card">
679
- <div class="pf-v6-c-card__body">This is a card</div>
680
- </div>
681
- <div class="pf-v6-c-card">
682
- <div class="pf-v6-c-card__body">This is a card</div>
683
- </div>
684
- <div class="pf-v6-c-card">
685
- <div class="pf-v6-c-card__body">This is a card</div>
686
- </div>
687
- <div class="pf-v6-c-card">
688
- <div class="pf-v6-c-card__body">This is a card</div>
689
- </div>
690
- <div class="pf-v6-c-card">
691
- <div class="pf-v6-c-card__body">This is a card</div>
692
- </div>
693
- <div class="pf-v6-c-card">
694
- <div class="pf-v6-c-card__body">This is a card</div>
695
- </div>
696
- <div class="pf-v6-c-card">
697
- <div class="pf-v6-c-card__body">This is a card</div>
698
- </div>
699
- </div>
700
- </div>
701
- </section>
702
- </main>
703
- </div>
704
-
705
- ```
706
-
707
- ### Context selector in sidebar expanded
708
-
709
- ```html isFullscreen
710
- <div class="pf-v6-c-page" id="context-selector-in-sidebar-expanded-example">
711
- <div class="pf-v6-c-skip-to-content">
712
- <a
713
- class="pf-v6-c-button pf-m-primary"
714
- href="#main-content-context-selector-in-sidebar-expanded-example"
715
- >Skip to content</a>
716
- </div>
717
- <header
718
- class="pf-v6-c-masthead"
719
- id="context-selector-in-sidebar-expanded-example-masthead"
720
- >
721
- <span class="pf-v6-c-masthead__toggle">
722
- <button
723
- class="pf-v6-c-button pf-m-plain"
724
- type="button"
725
- aria-label="Global navigation"
726
- >
727
- <i class="fas fa-bars" aria-hidden="true"></i>
728
- </button>
729
- </span>
730
- <div class="pf-v6-c-masthead__main">
731
- <a class="pf-v6-c-masthead__brand" href="#">
732
- <svg height="40px" viewBox="0 0 679 158">
733
- <title>PF-HorizontalLogo-Color</title>
734
- <defs>
735
- <linearGradient
736
- x1="68%"
737
- y1="2.25860997e-13%"
738
- x2="32%"
739
- y2="100%"
740
- id="linearGradient-context-selector-in-sidebar-expanded-example-masthead"
741
- >
742
- <stop stop-color="#2B9AF3" offset="0%" />
743
- <stop
744
- stop-color="#73BCF7"
745
- stop-opacity="0.502212631"
746
- offset="100%"
747
- />
748
- </linearGradient>
749
- </defs>
750
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
751
- <g
752
- transform="translate(206.000000, 45.750000)"
753
- fill="var(--pf-t--global--text--color--regular)"
754
- fill-rule="nonzero"
755
- >
756
- <path
757
- 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"
758
- />
759
- <path
760
- 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"
761
- />
762
- <path
763
- 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"
764
- />
765
- <path
766
- 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"
767
- />
768
- <path
769
- 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"
770
- />
771
- <path
772
- 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"
773
- />
774
- <path
775
- 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"
776
- />
777
- <polygon
778
- 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"
779
- />
780
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
781
- <path
782
- 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"
783
- />
784
- </g>
785
- <g transform="translate(0.000000, 0.000000)">
786
- <path
787
- 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"
788
- fill="#0066CC"
789
- />
790
- <path
791
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
792
- fill="url(#linearGradient-context-selector-in-sidebar-expanded-example-masthead)"
793
- />
794
- <path
795
- 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"
796
- fill="url(#linearGradient-context-selector-in-sidebar-expanded-example-masthead)"
797
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
798
- />
799
- </g>
800
- </g>
801
- </svg>
802
- </a>
803
- </div>
804
- <div class="pf-v6-c-masthead__content">
805
- <div
806
- class="pf-v6-c-toolbar pf-m-static"
807
- id="context-selector-in-sidebar-expanded-example-masthead-toolbar"
808
- >
809
- <div class="pf-v6-c-toolbar__content">
810
- <div class="pf-v6-c-toolbar__content-section">
811
- <div class="pf-v6-c-toolbar__item">
812
- <button
813
- class="pf-v6-c-menu-toggle"
814
- type="button"
815
- aria-expanded="false"
816
- >
817
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
818
- <span class="pf-v6-c-menu-toggle__controls">
819
- <span class="pf-v6-c-menu-toggle__toggle-icon">
820
- <i class="fas fa-caret-down" aria-hidden="true"></i>
821
- </span>
822
- </span>
823
- </button>
824
- </div>
825
-
826
- <div class="pf-v6-c-toolbar__item">
827
- <button
828
- class="pf-v6-c-menu-toggle"
829
- type="button"
830
- aria-expanded="false"
831
- >
832
- <span class="pf-v6-c-menu-toggle__text">Services</span>
833
- <span class="pf-v6-c-menu-toggle__controls">
834
- <span class="pf-v6-c-menu-toggle__toggle-icon">
835
- <i class="fas fa-caret-down" aria-hidden="true"></i>
836
- </span>
837
- </span>
838
- </button>
839
- </div>
840
-
841
- <div
842
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
843
- >
844
- <div
845
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
846
- >
847
- <div class="pf-v6-c-toolbar__item">
848
- <button
849
- class="pf-v6-c-menu-toggle pf-m-plain"
850
- type="button"
851
- aria-expanded="false"
852
- aria-label="Application launcher"
853
- >
854
- <span class="pf-v6-c-menu-toggle__icon">
855
- <i class="fas fa-th" aria-hidden="true"></i>
856
- </span>
857
- </button>
858
- </div>
859
- <div class="pf-v6-c-toolbar__item">
860
- <button
861
- class="pf-v6-c-menu-toggle pf-m-plain"
862
- type="button"
863
- aria-expanded="false"
864
- aria-label="Settings"
865
- >
866
- <span class="pf-v6-c-menu-toggle__icon">
867
- <i class="fas fa-cog" aria-hidden="true"></i>
868
- </span>
869
- </button>
870
- </div>
871
- <div class="pf-v6-c-toolbar__item">
872
- <button
873
- class="pf-v6-c-menu-toggle pf-m-plain"
874
- type="button"
875
- aria-expanded="false"
876
- aria-label="Help"
877
- >
878
- <span class="pf-v6-c-menu-toggle__icon">
879
- <i class="fas fa-question-circle" aria-hidden="true"></i>
880
- </span>
881
- </button>
882
- </div>
883
- </div>
884
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
885
- <button
886
- class="pf-v6-c-menu-toggle pf-m-plain"
887
- type="button"
888
- aria-expanded="false"
889
- aria-label="Actions"
890
- >
891
- <span class="pf-v6-c-menu-toggle__icon">
892
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
893
- </span>
894
- </button>
895
- </div>
896
- </div>
897
- </div>
898
- </div>
899
- </div>
900
- </div>
901
- </header>
902
- <div class="pf-v6-c-page__sidebar">
903
- <div class="pf-v6-c-page__sidebar-body pf-m-menu">
904
- <div
905
- class="pf-v6-c-context-selector pf-m-expanded pf-m-page-insets pf-m-large"
906
- >
907
- <span
908
- id="context-selector-collapsed-example-label"
909
- hidden
910
- >Selected project:</span>
911
- <button
912
- class="pf-v6-c-context-selector__toggle"
913
- aria-expanded="true"
914
- id="context-selector-collapsed-example-toggle"
915
- aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
916
- >
917
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
918
- <span class="pf-v6-c-context-selector__toggle-icon">
919
- <i class="fas fa-caret-down" aria-hidden="true"></i>
920
- </span>
921
- </button>
922
- <div class="pf-v6-c-context-selector__menu">
923
- <div class="pf-v6-c-context-selector__menu-search">
924
- <div class="pf-v6-c-text-input-group">
925
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
926
- <span class="pf-v6-c-text-input-group__text">
927
- <span class="pf-v6-c-text-input-group__icon">
928
- <i class="fas fa-fw fa-search"></i>
929
- </span>
930
- <input
931
- class="pf-v6-c-text-input-group__text-input"
932
- type="text"
933
- placeholder="Search"
934
- value
935
- aria-label="Search input"
936
- />
937
- </span>
938
- </div>
939
- </div>
940
- </div>
941
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
942
- <li role="none">
943
- <a
944
- class="pf-v6-c-context-selector__menu-list-item"
945
- href="#"
946
- role="menuitem"
947
- >Link</a>
948
- </li>
949
- <li role="none">
950
- <button
951
- class="pf-v6-c-context-selector__menu-list-item"
952
- type="button"
953
- role="menuitem"
954
- >Action</button>
955
- </li>
956
- <li role="none">
957
- <a
958
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
959
- href="#"
960
- aria-disabled="true"
961
- tabindex="-1"
962
- role="menuitem"
963
- >Disabled link</a>
964
- </li>
965
- <li role="none">
966
- <button
967
- class="pf-v6-c-context-selector__menu-list-item"
968
- type="button"
969
- disabled
970
- role="menuitem"
971
- >Disabled action</button>
972
- </li>
973
- <li role="none">
974
- <button
975
- class="pf-v6-c-context-selector__menu-list-item"
976
- type="button"
977
- role="menuitem"
978
- >My project</button>
979
- </li>
980
- <li role="none">
981
- <button
982
- class="pf-v6-c-context-selector__menu-list-item"
983
- type="button"
984
- role="menuitem"
985
- >OpenShift cluster</button>
986
- </li>
987
- <li role="none">
988
- <button
989
- class="pf-v6-c-context-selector__menu-list-item"
990
- type="button"
991
- role="menuitem"
992
- >Production Ansible</button>
993
- </li>
994
- <li role="none">
995
- <button
996
- class="pf-v6-c-context-selector__menu-list-item"
997
- type="button"
998
- role="menuitem"
999
- >AWS</button>
1000
- </li>
1001
- <li role="none">
1002
- <button
1003
- class="pf-v6-c-context-selector__menu-list-item"
1004
- type="button"
1005
- role="menuitem"
1006
- >Azure</button>
1007
- </li>
1008
- <li role="none">
1009
- <button
1010
- class="pf-v6-c-context-selector__menu-list-item"
1011
- type="button"
1012
- role="menuitem"
1013
- >My project</button>
1014
- </li>
1015
- <li role="none">
1016
- <button
1017
- class="pf-v6-c-context-selector__menu-list-item"
1018
- type="button"
1019
- role="menuitem"
1020
- >OpenShift cluster</button>
1021
- </li>
1022
- <li role="none">
1023
- <button
1024
- class="pf-v6-c-context-selector__menu-list-item"
1025
- type="button"
1026
- role="menuitem"
1027
- >Production Ansible</button>
1028
- </li>
1029
- <li role="none">
1030
- <button
1031
- class="pf-v6-c-context-selector__menu-list-item"
1032
- type="button"
1033
- role="menuitem"
1034
- >AWS</button>
1035
- </li>
1036
- <li role="none">
1037
- <button
1038
- class="pf-v6-c-context-selector__menu-list-item"
1039
- type="button"
1040
- role="menuitem"
1041
- >Azure</button>
1042
- </li>
1043
- </ul>
1044
- </div>
1045
- </div>
1046
- </div>
1047
- <div class="pf-v6-c-page__sidebar-body">
1048
- <nav
1049
- class="pf-v6-c-nav"
1050
- id="context-selector-in-sidebar-expanded-example-primary-nav"
1051
- aria-label="Global"
1052
- >
1053
- <ul class="pf-v6-c-nav__list" role="list">
1054
- <li class="pf-v6-c-nav__item">
1055
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1056
- </li>
1057
- <li class="pf-v6-c-nav__item">
1058
- <a
1059
- href="#"
1060
- class="pf-v6-c-nav__link pf-m-current"
1061
- aria-current="page"
1062
- >Policy</a>
1063
- </li>
1064
- <li class="pf-v6-c-nav__item">
1065
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1066
- </li>
1067
- <li class="pf-v6-c-nav__item">
1068
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1069
- </li>
1070
- <li class="pf-v6-c-nav__item">
1071
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1072
- </li>
1073
- </ul>
1074
- </nav>
1075
- </div>
1076
- </div>
1077
- <main
1078
- class="pf-v6-c-page__main"
1079
- tabindex="-1"
1080
- id="main-content-context-selector-in-sidebar-expanded-example"
1081
- >
1082
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1083
- <div class="pf-v6-c-page__main-body">
1084
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1085
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1086
- <li class="pf-v6-c-breadcrumb__item">
1087
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1088
- </li>
1089
- <li class="pf-v6-c-breadcrumb__item">
1090
- <span class="pf-v6-c-breadcrumb__item-divider">
1091
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1092
- </span>
1093
-
1094
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1095
- </li>
1096
- <li class="pf-v6-c-breadcrumb__item">
1097
- <span class="pf-v6-c-breadcrumb__item-divider">
1098
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1099
- </span>
1100
-
1101
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1102
- </li>
1103
- <li class="pf-v6-c-breadcrumb__item">
1104
- <span class="pf-v6-c-breadcrumb__item-divider">
1105
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1106
- </span>
1107
-
1108
- <a
1109
- href="#"
1110
- class="pf-v6-c-breadcrumb__link pf-m-current"
1111
- aria-current="page"
1112
- >Section landing</a>
1113
- </li>
1114
- </ol>
1115
- </nav>
1116
- </div>
1117
- </section>
1118
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1119
- <div class="pf-v6-c-page__main-body">
1120
- <div class="pf-v6-c-content">
1121
- <h1>Main title</h1>
1122
- <p>This is a full page demo.</p>
1123
- </div>
1124
- </div>
1125
- </section>
1126
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1127
- <div class="pf-v6-c-page__main-body">
1128
- <div class="pf-v6-l-gallery pf-m-gutter">
1129
- <div class="pf-v6-c-card">
1130
- <div class="pf-v6-c-card__body">This is a card</div>
1131
- </div>
1132
- <div class="pf-v6-c-card">
1133
- <div class="pf-v6-c-card__body">This is a card</div>
1134
- </div>
1135
- <div class="pf-v6-c-card">
1136
- <div class="pf-v6-c-card__body">This is a card</div>
1137
- </div>
1138
- <div class="pf-v6-c-card">
1139
- <div class="pf-v6-c-card__body">This is a card</div>
1140
- </div>
1141
- <div class="pf-v6-c-card">
1142
- <div class="pf-v6-c-card__body">This is a card</div>
1143
- </div>
1144
- <div class="pf-v6-c-card">
1145
- <div class="pf-v6-c-card__body">This is a card</div>
1146
- </div>
1147
- <div class="pf-v6-c-card">
1148
- <div class="pf-v6-c-card__body">This is a card</div>
1149
- </div>
1150
- <div class="pf-v6-c-card">
1151
- <div class="pf-v6-c-card__body">This is a card</div>
1152
- </div>
1153
- <div class="pf-v6-c-card">
1154
- <div class="pf-v6-c-card__body">This is a card</div>
1155
- </div>
1156
- <div class="pf-v6-c-card">
1157
- <div class="pf-v6-c-card__body">This is a card</div>
1158
- </div>
1159
- </div>
1160
- </div>
1161
- </section>
1162
- </main>
1163
- </div>
1164
-
1165
- ```
1166
-
1167
- ### Context selector in page content
1168
-
1169
- ```html isFullscreen
1170
- <div class="pf-v6-c-page" id="context-selector-in-page-content-example">
1171
- <div class="pf-v6-c-skip-to-content">
1172
- <a
1173
- class="pf-v6-c-button pf-m-primary"
1174
- href="#main-content-context-selector-in-page-content-example"
1175
- >Skip to content</a>
1176
- </div>
1177
- <header
1178
- class="pf-v6-c-masthead"
1179
- id="context-selector-in-page-content-example-masthead"
1180
- >
1181
- <span class="pf-v6-c-masthead__toggle">
1182
- <button
1183
- class="pf-v6-c-button pf-m-plain"
1184
- type="button"
1185
- aria-label="Global navigation"
1186
- >
1187
- <i class="fas fa-bars" aria-hidden="true"></i>
1188
- </button>
1189
- </span>
1190
- <div class="pf-v6-c-masthead__main">
1191
- <a class="pf-v6-c-masthead__brand" href="#">
1192
- <svg height="40px" viewBox="0 0 679 158">
1193
- <title>PF-HorizontalLogo-Color</title>
1194
- <defs>
1195
- <linearGradient
1196
- x1="68%"
1197
- y1="2.25860997e-13%"
1198
- x2="32%"
1199
- y2="100%"
1200
- id="linearGradient-context-selector-in-page-content-example-masthead"
1201
- >
1202
- <stop stop-color="#2B9AF3" offset="0%" />
1203
- <stop
1204
- stop-color="#73BCF7"
1205
- stop-opacity="0.502212631"
1206
- offset="100%"
1207
- />
1208
- </linearGradient>
1209
- </defs>
1210
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1211
- <g
1212
- transform="translate(206.000000, 45.750000)"
1213
- fill="var(--pf-t--global--text--color--regular)"
1214
- fill-rule="nonzero"
1215
- >
1216
- <path
1217
- 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"
1218
- />
1219
- <path
1220
- 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"
1221
- />
1222
- <path
1223
- 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"
1224
- />
1225
- <path
1226
- 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"
1227
- />
1228
- <path
1229
- 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"
1230
- />
1231
- <path
1232
- 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"
1233
- />
1234
- <path
1235
- 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"
1236
- />
1237
- <polygon
1238
- 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"
1239
- />
1240
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1241
- <path
1242
- 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"
1243
- />
1244
- </g>
1245
- <g transform="translate(0.000000, 0.000000)">
1246
- <path
1247
- 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"
1248
- fill="#0066CC"
1249
- />
1250
- <path
1251
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1252
- fill="url(#linearGradient-context-selector-in-page-content-example-masthead)"
1253
- />
1254
- <path
1255
- 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"
1256
- fill="url(#linearGradient-context-selector-in-page-content-example-masthead)"
1257
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1258
- />
1259
- </g>
1260
- </g>
1261
- </svg>
1262
- </a>
1263
- </div>
1264
- <div class="pf-v6-c-masthead__content">
1265
- <div
1266
- class="pf-v6-c-toolbar pf-m-static"
1267
- id="context-selector-in-page-content-example-masthead-toolbar"
1268
- >
1269
- <div class="pf-v6-c-toolbar__content">
1270
- <div class="pf-v6-c-toolbar__content-section">
1271
- <div class="pf-v6-c-toolbar__item">
1272
- <button
1273
- class="pf-v6-c-menu-toggle"
1274
- type="button"
1275
- aria-expanded="false"
1276
- >
1277
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1278
- <span class="pf-v6-c-menu-toggle__controls">
1279
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1280
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1281
- </span>
1282
- </span>
1283
- </button>
1284
- </div>
1285
-
1286
- <div class="pf-v6-c-toolbar__item">
1287
- <button
1288
- class="pf-v6-c-menu-toggle"
1289
- type="button"
1290
- aria-expanded="false"
1291
- >
1292
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1293
- <span class="pf-v6-c-menu-toggle__controls">
1294
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1295
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1296
- </span>
1297
- </span>
1298
- </button>
1299
- </div>
1300
-
1301
- <div
1302
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1303
- >
1304
- <div
1305
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1306
- >
1307
- <div class="pf-v6-c-toolbar__item">
1308
- <button
1309
- class="pf-v6-c-menu-toggle pf-m-plain"
1310
- type="button"
1311
- aria-expanded="false"
1312
- aria-label="Application launcher"
1313
- >
1314
- <span class="pf-v6-c-menu-toggle__icon">
1315
- <i class="fas fa-th" aria-hidden="true"></i>
1316
- </span>
1317
- </button>
1318
- </div>
1319
- <div class="pf-v6-c-toolbar__item">
1320
- <button
1321
- class="pf-v6-c-menu-toggle pf-m-plain"
1322
- type="button"
1323
- aria-expanded="false"
1324
- aria-label="Settings"
1325
- >
1326
- <span class="pf-v6-c-menu-toggle__icon">
1327
- <i class="fas fa-cog" aria-hidden="true"></i>
1328
- </span>
1329
- </button>
1330
- </div>
1331
- <div class="pf-v6-c-toolbar__item">
1332
- <button
1333
- class="pf-v6-c-menu-toggle pf-m-plain"
1334
- type="button"
1335
- aria-expanded="false"
1336
- aria-label="Help"
1337
- >
1338
- <span class="pf-v6-c-menu-toggle__icon">
1339
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1340
- </span>
1341
- </button>
1342
- </div>
1343
- </div>
1344
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1345
- <button
1346
- class="pf-v6-c-menu-toggle pf-m-plain"
1347
- type="button"
1348
- aria-expanded="false"
1349
- aria-label="Actions"
1350
- >
1351
- <span class="pf-v6-c-menu-toggle__icon">
1352
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1353
- </span>
1354
- </button>
1355
- </div>
1356
- </div>
1357
- </div>
1358
- </div>
1359
- </div>
1360
- </div>
1361
- </header>
1362
- <div class="pf-v6-c-page__sidebar">
1363
- <div class="pf-v6-c-page__sidebar-body">
1364
- <nav
1365
- class="pf-v6-c-nav"
1366
- id="context-selector-in-page-content-example-primary-nav"
1367
- aria-label="Global"
1368
- >
1369
- <ul class="pf-v6-c-nav__list" role="list">
1370
- <li class="pf-v6-c-nav__item">
1371
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1372
- </li>
1373
- <li class="pf-v6-c-nav__item">
1374
- <a
1375
- href="#"
1376
- class="pf-v6-c-nav__link pf-m-current"
1377
- aria-current="page"
1378
- >Policy</a>
1379
- </li>
1380
- <li class="pf-v6-c-nav__item">
1381
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1382
- </li>
1383
- <li class="pf-v6-c-nav__item">
1384
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1385
- </li>
1386
- <li class="pf-v6-c-nav__item">
1387
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1388
- </li>
1389
- </ul>
1390
- </nav>
1391
- </div>
1392
- </div>
1393
- <main
1394
- class="pf-v6-c-page__main"
1395
- tabindex="-1"
1396
- id="main-content-context-selector-in-page-content-example"
1397
- >
1398
- <section
1399
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
1400
- >
1401
- <div class="pf-v6-c-page__main-body">
1402
- <div
1403
- class="pf-v6-c-toolbar pf-m-inset-none"
1404
- id="toolbar-simple-example"
1405
- >
1406
- <div class="pf-v6-c-toolbar__content">
1407
- <div class="pf-v6-c-toolbar__content-section">
1408
- <div class="pf-v6-c-toolbar__item">
1409
- <div
1410
- class="pf-v6-c-context-selector pf-m-page-insets pf-m-width-auto"
1411
- style="--pf-v5-c-context-selector--Width: 270px;"
1412
- >
1413
- <span
1414
- id="context-selector-in-page-content-example-context-selector-label"
1415
- hidden
1416
- >Selected project:</span>
1417
- <button
1418
- class="pf-v6-c-context-selector__toggle pf-m-text pf-m-plain"
1419
- aria-expanded="false"
1420
- id="context-selector-in-page-content-example-context-selector-toggle"
1421
- aria-labelledby="context-selector-in-page-content-example-context-selector-label context-selector-in-page-content-example-context-selector-toggle"
1422
- >
1423
- <span
1424
- class="pf-v6-c-context-selector__toggle-text"
1425
- >Project: openshift-apple1</span>
1426
- <span class="pf-v6-c-context-selector__toggle-icon">
1427
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1428
- </span>
1429
- </button>
1430
- <div class="pf-v6-c-context-selector__menu" hidden>
1431
- <div class="pf-v6-c-context-selector__menu-search">
1432
- <div class="pf-v6-c-text-input-group">
1433
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
1434
- <span class="pf-v6-c-text-input-group__text">
1435
- <span class="pf-v6-c-text-input-group__icon">
1436
- <i class="fas fa-fw fa-search"></i>
1437
- </span>
1438
- <input
1439
- class="pf-v6-c-text-input-group__text-input"
1440
- type="text"
1441
- placeholder="Search"
1442
- value
1443
- aria-label="Search input"
1444
- />
1445
- </span>
1446
- </div>
1447
- </div>
1448
- </div>
1449
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
1450
- <li role="none">
1451
- <a
1452
- class="pf-v6-c-context-selector__menu-list-item"
1453
- href="#"
1454
- role="menuitem"
1455
- >Link</a>
1456
- </li>
1457
- <li role="none">
1458
- <button
1459
- class="pf-v6-c-context-selector__menu-list-item"
1460
- type="button"
1461
- role="menuitem"
1462
- >Action</button>
1463
- </li>
1464
- <li role="none">
1465
- <a
1466
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
1467
- href="#"
1468
- aria-disabled="true"
1469
- tabindex="-1"
1470
- role="menuitem"
1471
- >Disabled link</a>
1472
- </li>
1473
- <li role="none">
1474
- <button
1475
- class="pf-v6-c-context-selector__menu-list-item"
1476
- type="button"
1477
- disabled
1478
- role="menuitem"
1479
- >Disabled action</button>
1480
- </li>
1481
- <li role="none">
1482
- <button
1483
- class="pf-v6-c-context-selector__menu-list-item"
1484
- type="button"
1485
- role="menuitem"
1486
- >My project</button>
1487
- </li>
1488
- <li role="none">
1489
- <button
1490
- class="pf-v6-c-context-selector__menu-list-item"
1491
- type="button"
1492
- role="menuitem"
1493
- >OpenShift cluster</button>
1494
- </li>
1495
- <li role="none">
1496
- <button
1497
- class="pf-v6-c-context-selector__menu-list-item"
1498
- type="button"
1499
- role="menuitem"
1500
- >Production Ansible</button>
1501
- </li>
1502
- <li role="none">
1503
- <button
1504
- class="pf-v6-c-context-selector__menu-list-item"
1505
- type="button"
1506
- role="menuitem"
1507
- >AWS</button>
1508
- </li>
1509
- <li role="none">
1510
- <button
1511
- class="pf-v6-c-context-selector__menu-list-item"
1512
- type="button"
1513
- role="menuitem"
1514
- >Azure</button>
1515
- </li>
1516
- <li role="none">
1517
- <button
1518
- class="pf-v6-c-context-selector__menu-list-item"
1519
- type="button"
1520
- role="menuitem"
1521
- >My project</button>
1522
- </li>
1523
- <li role="none">
1524
- <button
1525
- class="pf-v6-c-context-selector__menu-list-item"
1526
- type="button"
1527
- role="menuitem"
1528
- >OpenShift cluster</button>
1529
- </li>
1530
- <li role="none">
1531
- <button
1532
- class="pf-v6-c-context-selector__menu-list-item"
1533
- type="button"
1534
- role="menuitem"
1535
- >Production Ansible</button>
1536
- </li>
1537
- <li role="none">
1538
- <button
1539
- class="pf-v6-c-context-selector__menu-list-item"
1540
- type="button"
1541
- role="menuitem"
1542
- >AWS</button>
1543
- </li>
1544
- <li role="none">
1545
- <button
1546
- class="pf-v6-c-context-selector__menu-list-item"
1547
- type="button"
1548
- role="menuitem"
1549
- >Azure</button>
1550
- </li>
1551
- </ul>
1552
- </div>
1553
- </div>
1554
- </div>
1555
- <div class="pf-v6-c-toolbar__item">
1556
- <div class="pf-v6-c-select">
1557
- <span
1558
- id="context-selector-in-page-content-example-select-label"
1559
- hidden
1560
- >Choose one</span>
1561
-
1562
- <button
1563
- class="pf-v6-c-select__toggle pf-m-plain"
1564
- type="button"
1565
- id="context-selector-in-page-content-example-select-toggle"
1566
- aria-haspopup="true"
1567
- aria-expanded="false"
1568
- aria-labelledby="context-selector-in-page-content-example-select-label context-selector-in-page-content-example-select-toggle"
1569
- >
1570
- <div class="pf-v6-c-select__toggle-wrapper">
1571
- <span class="pf-v6-c-select__toggle-text">All applications</span>
1572
- </div>
1573
- <span class="pf-v6-c-select__toggle-arrow">
1574
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1575
- </span>
1576
- </button>
1577
-
1578
- <ul
1579
- class="pf-v6-c-select__menu"
1580
- role="listbox"
1581
- aria-labelledby="context-selector-in-page-content-example-select-label"
1582
- hidden
1583
- >
1584
- <li role="presentation">
1585
- <button
1586
- class="pf-v6-c-select__menu-item"
1587
- role="option"
1588
- >Running</button>
1589
- </li>
1590
- <li role="presentation">
1591
- <button
1592
- class="pf-v6-c-select__menu-item pf-m-selected"
1593
- role="option"
1594
- aria-selected="true"
1595
- >
1596
- Stopped
1597
- <span class="pf-v6-c-select__menu-item-icon">
1598
- <i class="fas fa-check" aria-hidden="true"></i>
1599
- </span>
1600
- </button>
1601
- </li>
1602
- <li role="presentation">
1603
- <button
1604
- class="pf-v6-c-select__menu-item"
1605
- role="option"
1606
- >Down</button>
1607
- </li>
1608
- <li role="presentation">
1609
- <button
1610
- class="pf-v6-c-select__menu-item"
1611
- role="option"
1612
- >Degraded</button>
1613
- </li>
1614
- <li role="presentation">
1615
- <button
1616
- class="pf-v6-c-select__menu-item"
1617
- role="option"
1618
- >Needs maintenance</button>
1619
- </li>
1620
- </ul>
1621
- </div>
1622
- </div>
1623
- </div>
1624
- </div>
1625
- </div>
1626
- </div>
1627
- </section>
1628
- <hr class="pf-v6-c-divider" />
1629
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1630
- <div class="pf-v6-c-page__main-body">
1631
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1632
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1633
- <li class="pf-v6-c-breadcrumb__item">
1634
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1635
- </li>
1636
- <li class="pf-v6-c-breadcrumb__item">
1637
- <span class="pf-v6-c-breadcrumb__item-divider">
1638
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1639
- </span>
1640
-
1641
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1642
- </li>
1643
- <li class="pf-v6-c-breadcrumb__item">
1644
- <span class="pf-v6-c-breadcrumb__item-divider">
1645
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1646
- </span>
1647
-
1648
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1649
- </li>
1650
- <li class="pf-v6-c-breadcrumb__item">
1651
- <span class="pf-v6-c-breadcrumb__item-divider">
1652
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1653
- </span>
1654
-
1655
- <a
1656
- href="#"
1657
- class="pf-v6-c-breadcrumb__link pf-m-current"
1658
- aria-current="page"
1659
- >Section landing</a>
1660
- </li>
1661
- </ol>
1662
- </nav>
1663
- </div>
1664
- </section>
1665
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1666
- <div class="pf-v6-c-page__main-body">
1667
- <div class="pf-v6-c-content">
1668
- <h1>Main title</h1>
1669
- <p>This is a full page demo.</p>
1670
- </div>
1671
- </div>
1672
- </section>
1673
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1674
- <div class="pf-v6-c-page__main-body">
1675
- <div class="pf-v6-l-gallery pf-m-gutter">
1676
- <div class="pf-v6-c-card">
1677
- <div class="pf-v6-c-card__body">This is a card</div>
1678
- </div>
1679
- <div class="pf-v6-c-card">
1680
- <div class="pf-v6-c-card__body">This is a card</div>
1681
- </div>
1682
- <div class="pf-v6-c-card">
1683
- <div class="pf-v6-c-card__body">This is a card</div>
1684
- </div>
1685
- <div class="pf-v6-c-card">
1686
- <div class="pf-v6-c-card__body">This is a card</div>
1687
- </div>
1688
- <div class="pf-v6-c-card">
1689
- <div class="pf-v6-c-card__body">This is a card</div>
1690
- </div>
1691
- <div class="pf-v6-c-card">
1692
- <div class="pf-v6-c-card__body">This is a card</div>
1693
- </div>
1694
- <div class="pf-v6-c-card">
1695
- <div class="pf-v6-c-card__body">This is a card</div>
1696
- </div>
1697
- <div class="pf-v6-c-card">
1698
- <div class="pf-v6-c-card__body">This is a card</div>
1699
- </div>
1700
- <div class="pf-v6-c-card">
1701
- <div class="pf-v6-c-card__body">This is a card</div>
1702
- </div>
1703
- <div class="pf-v6-c-card">
1704
- <div class="pf-v6-c-card__body">This is a card</div>
1705
- </div>
1706
- </div>
1707
- </div>
1708
- </section>
1709
- </main>
1710
- </div>
1711
-
1712
- ```