@patternfly/quickstarts 0.0.0

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 (304) hide show
  1. package/README.md +546 -0
  2. package/dist/ConsoleInternal/components/markdown-view.d.ts +19 -0
  3. package/dist/ConsoleInternal/components/utils/camel-case-wrap.d.ts +6 -0
  4. package/dist/ConsoleInternal/components/utils/index.d.ts +3 -0
  5. package/dist/ConsoleInternal/components/utils/router.d.ts +9 -0
  6. package/dist/ConsoleInternal/components/utils/status-box.d.ts +20 -0
  7. package/dist/ConsoleInternal/module/k8s/types.d.ts +42 -0
  8. package/dist/ConsoleShared/index.d.ts +1 -0
  9. package/dist/ConsoleShared/src/components/index.d.ts +7 -0
  10. package/dist/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.d.ts +13 -0
  11. package/dist/ConsoleShared/src/components/markdown-extensions/accordion-extension.d.ts +7 -0
  12. package/dist/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.d.ts +6 -0
  13. package/dist/ConsoleShared/src/components/markdown-extensions/admonition-extension.d.ts +7 -0
  14. package/dist/ConsoleShared/src/components/markdown-extensions/code-extension.d.ts +7 -0
  15. package/dist/ConsoleShared/src/components/markdown-extensions/const.d.ts +5 -0
  16. package/dist/ConsoleShared/src/components/markdown-extensions/index.d.ts +7 -0
  17. package/dist/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.d.ts +7 -0
  18. package/dist/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.d.ts +7 -0
  19. package/dist/ConsoleShared/src/components/markdown-extensions/utils.d.ts +1 -0
  20. package/dist/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.d.ts +7 -0
  21. package/dist/ConsoleShared/src/components/markdown-highlight-extension/highlight-consts.d.ts +4 -0
  22. package/dist/ConsoleShared/src/components/markdown-highlight-extension/index.d.ts +1 -0
  23. package/dist/ConsoleShared/src/components/modal/Modal.d.ts +9 -0
  24. package/dist/ConsoleShared/src/components/modal/index.d.ts +1 -0
  25. package/dist/ConsoleShared/src/components/popper/Portal.d.ts +8 -0
  26. package/dist/ConsoleShared/src/components/popper/SimplePopper.d.ts +6 -0
  27. package/dist/ConsoleShared/src/components/popper/index.d.ts +2 -0
  28. package/dist/ConsoleShared/src/components/spotlight/InteractiveSpotlight.d.ts +7 -0
  29. package/dist/ConsoleShared/src/components/spotlight/Spotlight.d.ts +7 -0
  30. package/dist/ConsoleShared/src/components/spotlight/StaticSpotlight.d.ts +7 -0
  31. package/dist/ConsoleShared/src/components/spotlight/index.d.ts +1 -0
  32. package/dist/ConsoleShared/src/components/status/GenericStatus.d.ts +12 -0
  33. package/dist/ConsoleShared/src/components/status/NotStartedIcon.d.ts +3 -0
  34. package/dist/ConsoleShared/src/components/status/PopoverStatus.d.ts +13 -0
  35. package/dist/ConsoleShared/src/components/status/Status.d.ts +11 -0
  36. package/dist/ConsoleShared/src/components/status/StatusIconAndText.d.ts +8 -0
  37. package/dist/ConsoleShared/src/components/status/icons.d.ts +9 -0
  38. package/dist/ConsoleShared/src/components/status/index.d.ts +1 -0
  39. package/dist/ConsoleShared/src/components/status/statuses.d.ts +5 -0
  40. package/dist/ConsoleShared/src/components/status/types.d.ts +9 -0
  41. package/dist/ConsoleShared/src/components/utils/FallbackImg.d.ts +9 -0
  42. package/dist/ConsoleShared/src/components/utils/index.d.ts +1 -0
  43. package/dist/ConsoleShared/src/constants/index.d.ts +1 -0
  44. package/dist/ConsoleShared/src/constants/ui.d.ts +1 -0
  45. package/dist/ConsoleShared/src/hooks/index.d.ts +6 -0
  46. package/dist/ConsoleShared/src/hooks/scroll.d.ts +8 -0
  47. package/dist/ConsoleShared/src/hooks/useBoundingClientRect.d.ts +3 -0
  48. package/dist/ConsoleShared/src/hooks/useEventListener.d.ts +1 -0
  49. package/dist/ConsoleShared/src/hooks/useForceRender.d.ts +4 -0
  50. package/dist/ConsoleShared/src/hooks/useResizeObserver.d.ts +1 -0
  51. package/dist/ConsoleShared/src/hooks/useScrollShadows.d.ts +7 -0
  52. package/dist/ConsoleShared/src/index.d.ts +4 -0
  53. package/dist/ConsoleShared/src/utils/index.d.ts +1 -0
  54. package/dist/ConsoleShared/src/utils/useCombineRefs.d.ts +2 -0
  55. package/dist/HelpTopicDrawer.d.ts +33 -0
  56. package/dist/HelpTopicPanelContent.d.ts +11 -0
  57. package/dist/QuickStartCatalogPage.d.ts +14 -0
  58. package/dist/QuickStartCloseModal.d.ts +8 -0
  59. package/dist/QuickStartController.d.ts +10 -0
  60. package/dist/QuickStartDrawer.d.ts +62 -0
  61. package/dist/QuickStartMarkdownView.d.ts +9 -0
  62. package/dist/QuickStartPanelContent.d.ts +15 -0
  63. package/dist/catalog/Catalog/QuickStartCatalogHeader.d.ts +6 -0
  64. package/dist/catalog/Catalog/QuickStartCatalogSection.d.ts +5 -0
  65. package/dist/catalog/Catalog/QuickStartCatalogToolbar.d.ts +5 -0
  66. package/dist/catalog/Catalog/index.d.ts +3 -0
  67. package/dist/catalog/QuickStartCatalog.d.ts +8 -0
  68. package/dist/catalog/QuickStartTile.d.ts +14 -0
  69. package/dist/catalog/QuickStartTileDescription.d.ts +8 -0
  70. package/dist/catalog/QuickStartTileFooter.d.ts +8 -0
  71. package/dist/catalog/QuickStartTileFooterExternal.d.ts +8 -0
  72. package/dist/catalog/QuickStartTileHeader.d.ts +24 -0
  73. package/dist/catalog/Toolbar/QuickStartCatalogFilter.d.ts +10 -0
  74. package/dist/catalog/Toolbar/QuickStartCatalogFilterItems.d.ts +31 -0
  75. package/dist/catalog/index.d.ts +9 -0
  76. package/dist/controller/QuickStartConclusion.d.ts +12 -0
  77. package/dist/controller/QuickStartContent.d.ts +14 -0
  78. package/dist/controller/QuickStartFooter.d.ts +14 -0
  79. package/dist/controller/QuickStartIntroduction.d.ts +12 -0
  80. package/dist/controller/QuickStartTaskHeader.d.ts +15 -0
  81. package/dist/controller/QuickStartTaskHeaderList.d.ts +10 -0
  82. package/dist/controller/QuickStartTaskReview.d.ts +10 -0
  83. package/dist/controller/QuickStartTasks.d.ts +12 -0
  84. package/dist/data/mocks/json/explore-pipeline-quickstart.d.ts +2 -0
  85. package/dist/data/mocks/json/explore-serverless-quickstart.d.ts +2 -0
  86. package/dist/data/mocks/json/monitor-sampleapp-quickstart.d.ts +2 -0
  87. package/dist/data/mocks/json/tour-icons.d.ts +2 -0
  88. package/dist/data/quick-start-test-data.d.ts +2 -0
  89. package/dist/data/test-utils.d.ts +8 -0
  90. package/dist/index.d.ts +16 -0
  91. package/dist/index.es.js +2593 -0
  92. package/dist/index.es.js.map +1 -0
  93. package/dist/index.js +2695 -0
  94. package/dist/index.js.map +1 -0
  95. package/dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines.md +105 -0
  96. package/dist/patternfly-docs/quick-starts/design-guidelines/img/card-elements copy.png +0 -0
  97. package/dist/patternfly-docs/quick-starts/design-guidelines/img/card-elements.png +0 -0
  98. package/dist/patternfly-docs/quick-starts/design-guidelines/img/catalog-elements.png +0 -0
  99. package/dist/patternfly-docs/quick-starts/design-guidelines/img/check-your-work.png +0 -0
  100. package/dist/patternfly-docs/quick-starts/design-guidelines/img/introduction-screen.png +0 -0
  101. package/dist/patternfly-docs/quick-starts/design-guidelines/img/mixed-catalog.png +0 -0
  102. package/dist/patternfly-docs/quick-starts/design-guidelines/img/prerequisites.png +0 -0
  103. package/dist/patternfly-docs/quick-starts/design-guidelines/img/qs-context.png +0 -0
  104. package/dist/patternfly-docs/quick-starts/design-guidelines/img/side-panel-elements.png +0 -0
  105. package/dist/patternfly-docs/quick-starts/design-guidelines/img/side-panel-resized.png +0 -0
  106. package/dist/patternfly-docs/quick-starts/design-guidelines/img/side-panel.png +0 -0
  107. package/dist/patternfly-docs/quick-starts/design-guidelines/img/task-no.png +0 -0
  108. package/dist/patternfly-docs/quick-starts/design-guidelines/img/task-yes.png +0 -0
  109. package/dist/patternfly-docs/quick-starts/design-guidelines/img/task.png +0 -0
  110. package/dist/patternfly-docs/quick-starts/examples/Basic.jsx +73 -0
  111. package/dist/patternfly-docs/quick-starts/examples/HelpTopic.jsx +51 -0
  112. package/dist/patternfly-docs/quick-starts/examples/about.md +84 -0
  113. package/dist/patternfly-docs/quick-starts/examples/basic.md +29 -0
  114. package/dist/patternfly-docs/quick-starts/examples/example-data/example-help-topics.js +173 -0
  115. package/dist/patternfly-docs/quick-starts/examples/example-data/example-quickstarts.js +215 -0
  116. package/dist/patternfly-docs/quick-starts/examples/example-data/index.js +15 -0
  117. package/dist/patternfly-docs/quick-starts/examples/help-topics.md +28 -0
  118. package/dist/patternfly-docs/quick-starts/examples/img/catalog.png +0 -0
  119. package/dist/patternfly-docs/quick-starts/examples/img/help-topic.png +0 -0
  120. package/dist/patternfly-docs/quick-starts/examples/img/side-panel.png +0 -0
  121. package/dist/patternfly-global.css +1302 -0
  122. package/dist/patternfly-nested.css +11812 -0
  123. package/dist/quickstarts-base.css +1219 -0
  124. package/dist/quickstarts-full.es.js +31861 -0
  125. package/dist/quickstarts-full.es.js.map +1 -0
  126. package/dist/quickstarts-standalone.css +868 -0
  127. package/dist/quickstarts-standalone.min.css +4 -0
  128. package/dist/quickstarts-vendor.css +165 -0
  129. package/dist/quickstarts.css +1383 -0
  130. package/dist/quickstarts.min.css +1 -0
  131. package/dist/styles/patternfly-global-entry.d.ts +1 -0
  132. package/dist/styles/patternfly-nested-entry.d.ts +1 -0
  133. package/dist/styles/quickstarts-standalone-entry.d.ts +1 -0
  134. package/dist/styles/vendor-entry.d.ts +1 -0
  135. package/dist/utils/PluralResolver.d.ts +16 -0
  136. package/dist/utils/asciidoc-procedure-parser.d.ts +12 -0
  137. package/dist/utils/const.d.ts +6 -0
  138. package/dist/utils/help-topic-context.d.ts +23 -0
  139. package/dist/utils/help-topic-types.d.ts +13 -0
  140. package/dist/utils/quick-start-context.d.ts +81 -0
  141. package/dist/utils/quick-start-types.d.ts +60 -0
  142. package/dist/utils/quick-start-utils.d.ts +10 -0
  143. package/dist/utils/useLocalStorage.d.ts +1 -0
  144. package/dist/vendor.js +2 -0
  145. package/dist/vendor.js.map +1 -0
  146. package/package.json +105 -0
  147. package/src/ConsoleInternal/components/_icon-and-text.scss +14 -0
  148. package/src/ConsoleInternal/components/_markdown-view.scss +19 -0
  149. package/src/ConsoleInternal/components/catalog/_catalog.scss +392 -0
  150. package/src/ConsoleInternal/components/markdown-view.tsx +276 -0
  151. package/src/ConsoleInternal/components/utils/_status-box.scss +58 -0
  152. package/src/ConsoleInternal/components/utils/camel-case-wrap.tsx +33 -0
  153. package/src/ConsoleInternal/components/utils/index.tsx +3 -0
  154. package/src/ConsoleInternal/components/utils/router.ts +45 -0
  155. package/src/ConsoleInternal/components/utils/status-box.tsx +56 -0
  156. package/src/ConsoleInternal/module/k8s/types.ts +53 -0
  157. package/src/ConsoleShared/index.ts +1 -0
  158. package/src/ConsoleShared/src/components/index.ts +7 -0
  159. package/src/ConsoleShared/src/components/layout/PageLayout.scss +29 -0
  160. package/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx +95 -0
  161. package/src/ConsoleShared/src/components/markdown-extensions/__tests__/MarkdownCopyClipboard.spec.tsx +25 -0
  162. package/src/ConsoleShared/src/components/markdown-extensions/__tests__/test-data.ts +5 -0
  163. package/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx +51 -0
  164. package/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx +60 -0
  165. package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx +67 -0
  166. package/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx +23 -0
  167. package/src/ConsoleShared/src/components/markdown-extensions/const.ts +5 -0
  168. package/src/ConsoleShared/src/components/markdown-extensions/index.ts +7 -0
  169. package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx +39 -0
  170. package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx +44 -0
  171. package/src/ConsoleShared/src/components/markdown-extensions/showdown-extension.scss +52 -0
  172. package/src/ConsoleShared/src/components/markdown-extensions/utils.ts +1 -0
  173. package/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx +65 -0
  174. package/src/ConsoleShared/src/components/markdown-highlight-extension/highlight-consts.ts +9 -0
  175. package/src/ConsoleShared/src/components/markdown-highlight-extension/index.ts +1 -0
  176. package/src/ConsoleShared/src/components/modal/Modal.scss +3 -0
  177. package/src/ConsoleShared/src/components/modal/Modal.tsx +19 -0
  178. package/src/ConsoleShared/src/components/modal/index.ts +1 -0
  179. package/src/ConsoleShared/src/components/popper/Portal.tsx +25 -0
  180. package/src/ConsoleShared/src/components/popper/SimplePopper.tsx +92 -0
  181. package/src/ConsoleShared/src/components/popper/index.ts +2 -0
  182. package/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx +58 -0
  183. package/src/ConsoleShared/src/components/spotlight/Spotlight.tsx +35 -0
  184. package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx +32 -0
  185. package/src/ConsoleShared/src/components/spotlight/index.ts +1 -0
  186. package/src/ConsoleShared/src/components/spotlight/spotlight.scss +63 -0
  187. package/src/ConsoleShared/src/components/status/GenericStatus.tsx +34 -0
  188. package/src/ConsoleShared/src/components/status/NotStartedIcon.tsx +27 -0
  189. package/src/ConsoleShared/src/components/status/PopoverStatus.tsx +39 -0
  190. package/src/ConsoleShared/src/components/status/Status.tsx +38 -0
  191. package/src/ConsoleShared/src/components/status/StatusIconAndText.tsx +42 -0
  192. package/src/ConsoleShared/src/components/status/icons.tsx +39 -0
  193. package/src/ConsoleShared/src/components/status/index.tsx +1 -0
  194. package/src/ConsoleShared/src/components/status/statuses.tsx +20 -0
  195. package/src/ConsoleShared/src/components/status/types.ts +8 -0
  196. package/src/ConsoleShared/src/components/utils/FallbackImg.tsx +20 -0
  197. package/src/ConsoleShared/src/components/utils/index.ts +1 -0
  198. package/src/ConsoleShared/src/constants/index.ts +1 -0
  199. package/src/ConsoleShared/src/constants/ui.ts +1 -0
  200. package/src/ConsoleShared/src/hooks/index.ts +6 -0
  201. package/src/ConsoleShared/src/hooks/scroll.ts +52 -0
  202. package/src/ConsoleShared/src/hooks/useBoundingClientRect.ts +18 -0
  203. package/src/ConsoleShared/src/hooks/useEventListener.ts +14 -0
  204. package/src/ConsoleShared/src/hooks/useForceRender.ts +6 -0
  205. package/src/ConsoleShared/src/hooks/useResizeObserver.ts +19 -0
  206. package/src/ConsoleShared/src/hooks/useScrollShadows.ts +45 -0
  207. package/src/ConsoleShared/src/index.ts +4 -0
  208. package/src/ConsoleShared/src/utils/index.ts +1 -0
  209. package/src/ConsoleShared/src/utils/useCombineRefs.ts +16 -0
  210. package/src/HelpTopicDrawer.tsx +116 -0
  211. package/src/HelpTopicPanelContent.tsx +160 -0
  212. package/src/QuickStartCatalogPage.tsx +195 -0
  213. package/src/QuickStartCloseModal.tsx +47 -0
  214. package/src/QuickStartController.tsx +111 -0
  215. package/src/QuickStartDrawer.scss +11 -0
  216. package/src/QuickStartDrawer.tsx +265 -0
  217. package/src/QuickStartMarkdownView.tsx +80 -0
  218. package/src/QuickStartPanelContent.scss +46 -0
  219. package/src/QuickStartPanelContent.tsx +165 -0
  220. package/src/__tests__/quick-start-utils.spec.tsx +16 -0
  221. package/src/catalog/Catalog/QuickStartCatalogHeader.tsx +18 -0
  222. package/src/catalog/Catalog/QuickStartCatalogSection.tsx +9 -0
  223. package/src/catalog/Catalog/QuickStartCatalogToolbar.tsx +12 -0
  224. package/src/catalog/Catalog/index.ts +3 -0
  225. package/src/catalog/QuickStartCatalog.scss +8 -0
  226. package/src/catalog/QuickStartCatalog.tsx +42 -0
  227. package/src/catalog/QuickStartTile.scss +11 -0
  228. package/src/catalog/QuickStartTile.tsx +129 -0
  229. package/src/catalog/QuickStartTileDescription.scss +29 -0
  230. package/src/catalog/QuickStartTileDescription.tsx +79 -0
  231. package/src/catalog/QuickStartTileFooter.tsx +101 -0
  232. package/src/catalog/QuickStartTileFooterExternal.tsx +40 -0
  233. package/src/catalog/QuickStartTileHeader.scss +16 -0
  234. package/src/catalog/QuickStartTileHeader.tsx +105 -0
  235. package/src/catalog/Toolbar/QuickStartCatalogFilter.scss +25 -0
  236. package/src/catalog/Toolbar/QuickStartCatalogFilter.tsx +32 -0
  237. package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx +218 -0
  238. package/src/catalog/__tests__/QuickStartCatalog.spec.tsx +35 -0
  239. package/src/catalog/__tests__/QuickStartTile.spec.tsx +38 -0
  240. package/src/catalog/__tests__/QuickStartTileDescription.spec.tsx +44 -0
  241. package/src/catalog/index.ts +9 -0
  242. package/src/controller/QuickStartConclusion.tsx +63 -0
  243. package/src/controller/QuickStartContent.scss +12 -0
  244. package/src/controller/QuickStartContent.tsx +72 -0
  245. package/src/controller/QuickStartFooter.scss +13 -0
  246. package/src/controller/QuickStartFooter.tsx +124 -0
  247. package/src/controller/QuickStartIntroduction.scss +35 -0
  248. package/src/controller/QuickStartIntroduction.tsx +64 -0
  249. package/src/controller/QuickStartTaskHeader.scss +58 -0
  250. package/src/controller/QuickStartTaskHeader.tsx +125 -0
  251. package/src/controller/QuickStartTaskHeaderList.scss +17 -0
  252. package/src/controller/QuickStartTaskHeaderList.tsx +33 -0
  253. package/src/controller/QuickStartTaskReview.scss +30 -0
  254. package/src/controller/QuickStartTaskReview.tsx +81 -0
  255. package/src/controller/QuickStartTasks.scss +89 -0
  256. package/src/controller/QuickStartTasks.tsx +75 -0
  257. package/src/controller/__tests__/QuickStartConclusion.spec.tsx +95 -0
  258. package/src/controller/__tests__/QuickStartContent.spec.tsx +52 -0
  259. package/src/controller/__tests__/QuickStartFooter.spec.tsx +148 -0
  260. package/src/controller/__tests__/QuickStartTaskHeader.spec.tsx +43 -0
  261. package/src/controller/__tests__/QuickStartTaskReview.spec.tsx +45 -0
  262. package/src/controller/__tests__/QuickStartTasks.spec.tsx +81 -0
  263. package/src/data/mocks/json/explore-pipeline-quickstart.ts +66 -0
  264. package/src/data/mocks/json/explore-serverless-quickstart.ts +90 -0
  265. package/src/data/mocks/json/monitor-sampleapp-quickstart.ts +77 -0
  266. package/src/data/mocks/json/tour-icons.ts +3 -0
  267. package/src/data/mocks/yamls/add-healthchecks-quickstart.yaml +67 -0
  268. package/src/data/mocks/yamls/explore-pipeline-quickstart.yaml +57 -0
  269. package/src/data/mocks/yamls/explore-serverless-quickstart.yaml +83 -0
  270. package/src/data/mocks/yamls/install-associate-pipeline-quickstart.yaml +74 -0
  271. package/src/data/mocks/yamls/monitor-sampleapp-quickstart.yaml +66 -0
  272. package/src/data/mocks/yamls/sample-application-quickstart.yaml +97 -0
  273. package/src/data/mocks/yamls/serverless-application-quickstart.yaml +141 -0
  274. package/src/data/quick-start-test-data.ts +10 -0
  275. package/src/data/test-utils.ts +11 -0
  276. package/src/declaration.d.ts +2 -0
  277. package/src/index.ts +17 -0
  278. package/src/locales/en/quickstart.json +46 -0
  279. package/src/styles/_base.scss +54 -0
  280. package/src/styles/_dark-custom-override.scss +62 -0
  281. package/src/styles/legacy-bootstrap/README.md +21 -0
  282. package/src/styles/legacy-bootstrap/_code.scss +46 -0
  283. package/src/styles/legacy-bootstrap/_tables.scss +38 -0
  284. package/src/styles/legacy-bootstrap/_type.scss +92 -0
  285. package/src/styles/legacy-bootstrap/_variables.scss +48 -0
  286. package/src/styles/legacy-bootstrap.scss +5 -0
  287. package/src/styles/patternfly-global-entry.ts +1 -0
  288. package/src/styles/patternfly-global.scss +28 -0
  289. package/src/styles/patternfly-nested-entry.ts +1 -0
  290. package/src/styles/patternfly-nested.scss +18 -0
  291. package/src/styles/quickstarts-standalone-entry.ts +1 -0
  292. package/src/styles/quickstarts-standalone.scss +7 -0
  293. package/src/styles/style.scss +12 -0
  294. package/src/styles/vendor-entry.ts +1 -0
  295. package/src/styles/vendor.scss +7 -0
  296. package/src/utils/PluralResolver.ts +362 -0
  297. package/src/utils/asciidoc-procedure-parser.ts +130 -0
  298. package/src/utils/const.ts +10 -0
  299. package/src/utils/help-topic-context.tsx +72 -0
  300. package/src/utils/help-topic-types.ts +16 -0
  301. package/src/utils/quick-start-context.tsx +473 -0
  302. package/src/utils/quick-start-types.ts +73 -0
  303. package/src/utils/quick-start-utils.ts +88 -0
  304. package/src/utils/useLocalStorage.ts +38 -0
@@ -0,0 +1,1302 @@
1
+ .pf-v5-c-drawer {
2
+ --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
3
+ --pf-v5-c-drawer__section--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
4
+ --pf-v5-c-drawer__content--FlexBasis: 100%;
5
+ --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
6
+ --pf-v5-c-drawer__content--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
7
+ --pf-v5-c-drawer__content--ZIndex: var(--pf-v5-global--ZIndex--xs);
8
+ --pf-v5-c-drawer__panel--MinWidth: 50%;
9
+ --pf-v5-c-drawer__panel--MaxHeight: auto;
10
+ --pf-v5-c-drawer__panel--ZIndex: var(--pf-v5-global--ZIndex--sm);
11
+ --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
12
+ --pf-v5-c-drawer__panel--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
13
+ --pf-v5-c-drawer__panel--TransitionDuration: var(--pf-v5-global--TransitionDuration);
14
+ --pf-v5-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
15
+ --pf-v5-c-drawer__panel--FlexBasis: 100%;
16
+ --pf-v5-c-drawer__panel--md--FlexBasis--min: 1.5rem;
17
+ --pf-v5-c-drawer__panel--md--FlexBasis: 50%;
18
+ --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;
19
+ --pf-v5-c-drawer__panel--xl--MinWidth: 28.125rem;
20
+ --pf-v5-c-drawer__panel--xl--FlexBasis: 28.125rem;
21
+ --pf-v5-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
22
+ --pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
23
+ --pf-v5-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
24
+ --pf-v5-c-drawer__panel--m-resizable--FlexDirection: row;
25
+ --pf-v5-c-drawer__panel--m-resizable--md--FlexBasis--min: var(--pf-v5-c-drawer__splitter--m-vertical--Width);
26
+ --pf-v5-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
27
+ --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
28
+ --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
29
+ --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
30
+ --pf-v5-c-drawer--child--PaddingTop: var(--pf-v5-global--spacer--md);
31
+ --pf-v5-c-drawer--child--PaddingRight: var(--pf-v5-global--spacer--md);
32
+ --pf-v5-c-drawer--child--PaddingBottom: var(--pf-v5-global--spacer--md);
33
+ --pf-v5-c-drawer--child--PaddingLeft: var(--pf-v5-global--spacer--md);
34
+ --pf-v5-c-drawer--child--md--PaddingTop: var(--pf-v5-global--spacer--lg);
35
+ --pf-v5-c-drawer--child--md--PaddingRight: var(--pf-v5-global--spacer--lg);
36
+ --pf-v5-c-drawer--child--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
37
+ --pf-v5-c-drawer--child--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
38
+ --pf-v5-c-drawer--child--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
39
+ --pf-v5-c-drawer--child--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
40
+ --pf-v5-c-drawer--child--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
41
+ --pf-v5-c-drawer--child--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
42
+ --pf-v5-c-drawer--child--m-padding--md--PaddingTop: var(--pf-v5-global--spacer--lg);
43
+ --pf-v5-c-drawer--child--m-padding--md--PaddingRight: var(--pf-v5-global--spacer--lg);
44
+ --pf-v5-c-drawer--child--m-padding--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
45
+ --pf-v5-c-drawer--child--m-padding--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
46
+ --pf-v5-c-drawer__content--child--PaddingTop: 0;
47
+ --pf-v5-c-drawer__content--child--PaddingRight: 0;
48
+ --pf-v5-c-drawer__content--child--PaddingBottom: 0;
49
+ --pf-v5-c-drawer__content--child--PaddingLeft: 0;
50
+ --pf-v5-c-drawer__splitter--Height: 0.5625rem;
51
+ --pf-v5-c-drawer__splitter--Width: 100%;
52
+ --pf-v5-c-drawer__splitter--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
53
+ --pf-v5-c-drawer__splitter--Cursor: row-resize;
54
+ --pf-v5-c-drawer__splitter--m-vertical--Height: 100%;
55
+ --pf-v5-c-drawer__splitter--m-vertical--Width: 0.5625rem;
56
+ --pf-v5-c-drawer__splitter--m-vertical--Cursor: col-resize;
57
+ --pf-v5-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
58
+ --pf-v5-c-drawer__splitter--after--BorderColor: var(--pf-v5-global--BorderColor--100);
59
+ --pf-v5-c-drawer__splitter--after--border-width--base: var(--pf-v5-global--BorderWidth--sm);
60
+ --pf-v5-c-drawer__splitter--after--BorderTopWidth: 0;
61
+ --pf-v5-c-drawer__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
62
+ --pf-v5-c-drawer__splitter--after--BorderBottomWidth: 0;
63
+ --pf-v5-c-drawer__splitter--after--BorderLeftWidth: 0;
64
+ --pf-v5-c-drawer--m-panel-left__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
65
+ --pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
66
+ --pf-v5-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
67
+ --pf-v5-c-drawer--m-inline__splitter-handle--Left: 50%;
68
+ --pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
69
+ --pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
70
+ --pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
71
+ --pf-v5-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
72
+ --pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
73
+ --pf-v5-c-drawer__splitter-handle--Top: 50%;
74
+ --pf-v5-c-drawer__splitter-handle--Left: calc(50% - var(--pf-v5-c-drawer__splitter--after--border-width--base));
75
+ --pf-v5-c-drawer--m-panel-left__splitter-handle--Left: 50%;
76
+ --pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top: calc(50% - var(--pf-v5-c-drawer__splitter--after--border-width--base));
77
+ --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--200);
78
+ --pf-v5-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
79
+ --pf-v5-c-drawer__splitter-handle--after--BorderRightWidth: 0;
80
+ --pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
81
+ --pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth: 0;
82
+ --pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--100);
83
+ --pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--100);
84
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
85
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
86
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
87
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
88
+ --pf-v5-c-drawer__splitter-handle--after--Width: 0.75rem;
89
+ --pf-v5-c-drawer__splitter-handle--after--Height: 0.25rem;
90
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
91
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
92
+ --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
93
+ --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
94
+ --pf-v5-c-drawer__panel--BoxShadow: none;
95
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
96
+ --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
97
+ --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
98
+ --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
99
+ --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
100
+ --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
101
+ --pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-v5-global--BorderColor--100);
102
+ --pf-v5-c-drawer--m-inline__panel--PaddingLeft: var(--pf-v5-c-drawer__panel--after--Width);
103
+ --pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight: var(--pf-v5-c-drawer__panel--after--Width);
104
+ --pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(--pf-v5-c-drawer__panel--after--Width);
105
+ display: flex;
106
+ flex-direction: column;
107
+ height: 100%;
108
+ overflow-x: hidden;
109
+ }
110
+ @media screen and (min-width: 768px) {
111
+ .pf-v5-c-drawer {
112
+ --pf-v5-c-drawer--child--PaddingTop: var(--pf-v5-c-drawer--child--md--PaddingTop);
113
+ --pf-v5-c-drawer--child--PaddingRight: var(--pf-v5-c-drawer--child--md--PaddingRight);
114
+ --pf-v5-c-drawer--child--PaddingBottom: var(--pf-v5-c-drawer--child--md--PaddingBottom);
115
+ --pf-v5-c-drawer--child--PaddingLeft: var(--pf-v5-c-drawer--child--md--PaddingLeft);
116
+ --pf-v5-c-drawer--child--m-padding--PaddingTop: var(--pf-v5-c-drawer--child--m-padding--md--PaddingTop);
117
+ --pf-v5-c-drawer--child--m-padding--PaddingRight: var(--pf-v5-c-drawer--child--m-padding--md--PaddingRight);
118
+ --pf-v5-c-drawer--child--m-padding--PaddingBottom: var(--pf-v5-c-drawer--child--m-padding--md--PaddingBottom);
119
+ --pf-v5-c-drawer--child--m-padding--PaddingLeft: var(--pf-v5-c-drawer--child--m-padding--md--PaddingLeft);
120
+ }
121
+ }
122
+ @media screen and (min-width: 1200px) {
123
+ .pf-v5-c-drawer {
124
+ --pf-v5-c-drawer__panel--MinWidth: var(--pf-v5-c-drawer__panel--xl--MinWidth);
125
+ }
126
+ .pf-v5-c-drawer.pf-m-panel-bottom {
127
+ --pf-v5-c-drawer__panel--MinWidth: auto;
128
+ --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
129
+ }
130
+ }
131
+ .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
132
+ padding-left: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
133
+ }
134
+ .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
135
+ order: 0;
136
+ margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
137
+ transform: translateX(-100%);
138
+ }
139
+ .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
140
+ order: 1;
141
+ }
142
+ .pf-v5-c-drawer.pf-m-panel-bottom > .pf-v5-c-drawer__main {
143
+ flex-direction: column;
144
+ }
145
+ .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
146
+ transform: translateX(-100%);
147
+ }
148
+ .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
149
+ transform: translateX(0);
150
+ }
151
+ .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
152
+ transform: translate(0, -100%);
153
+ }
154
+ .pf-v5-c-drawer.pf-m-resizing {
155
+ --pf-v5-c-drawer__panel--TransitionProperty: none;
156
+ pointer-events: none;
157
+ }
158
+ .pf-v5-c-drawer.pf-m-resizing .pf-v5-c-drawer__splitter {
159
+ pointer-events: auto;
160
+ }
161
+
162
+ .pf-v5-c-drawer__section {
163
+ flex-grow: 0;
164
+ background-color: var(--pf-v5-c-drawer__section--BackgroundColor);
165
+ }
166
+ .pf-v5-c-drawer__section.pf-m-no-background {
167
+ --pf-v5-c-drawer__section--BackgroundColor: transparent;
168
+ }
169
+ .pf-v5-c-drawer__section.pf-m-light-200 {
170
+ --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-c-drawer__section--m-light-200--BackgroundColor);
171
+ }
172
+
173
+ .pf-v5-c-drawer__main {
174
+ display: flex;
175
+ flex: 1;
176
+ overflow: hidden;
177
+ }
178
+
179
+ .pf-v5-c-drawer__content,
180
+ .pf-v5-c-drawer__panel,
181
+ .pf-v5-c-drawer__panel-main {
182
+ display: flex;
183
+ flex-direction: column;
184
+ flex-shrink: 0;
185
+ overflow: auto;
186
+ }
187
+
188
+ .pf-v5-c-drawer__content {
189
+ z-index: var(--pf-v5-c-drawer__content--ZIndex);
190
+ flex-basis: var(--pf-v5-c-drawer__content--FlexBasis);
191
+ order: 0;
192
+ background-color: var(--pf-v5-c-drawer__content--BackgroundColor);
193
+ }
194
+ .pf-v5-c-drawer__content.pf-m-no-background {
195
+ --pf-v5-c-drawer__content--BackgroundColor: transparent;
196
+ }
197
+ .pf-v5-c-drawer__content.pf-m-light-200 {
198
+ --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-c-drawer__content--m-light-200--BackgroundColor);
199
+ }
200
+ .pf-v5-c-drawer__content > .pf-v5-c-drawer__body {
201
+ padding: var(--pf-v5-c-drawer__content--child--PaddingTop) var(--pf-v5-c-drawer__content--child--PaddingRight) var(--pf-v5-c-drawer__content--child--PaddingBottom) var(--pf-v5-c-drawer__content--child--PaddingLeft);
202
+ }
203
+
204
+ .pf-v5-c-drawer__panel {
205
+ position: relative;
206
+ z-index: var(--pf-v5-c-drawer__panel--ZIndex);
207
+ flex-basis: var(--pf-v5-c-drawer__panel--FlexBasis);
208
+ order: 1;
209
+ max-height: var(--pf-v5-c-drawer__panel--MaxHeight);
210
+ overflow: auto;
211
+ background-color: var(--pf-v5-c-drawer__panel--BackgroundColor);
212
+ box-shadow: var(--pf-v5-c-drawer__panel--BoxShadow);
213
+ transition-duration: var(--pf-v5-c-drawer__panel--TransitionDuration);
214
+ transition-property: var(--pf-v5-c-drawer__panel--TransitionProperty);
215
+ -webkit-overflow-scrolling: touch;
216
+ }
217
+ .pf-v5-c-drawer__panel::after {
218
+ position: absolute;
219
+ top: 0;
220
+ left: 0;
221
+ width: var(--pf-v5-c-drawer__panel--after--Width);
222
+ height: 100%;
223
+ content: "";
224
+ background-color: var(--pf-v5-c-drawer__panel--after--BackgroundColor);
225
+ }
226
+ .pf-v5-c-drawer__panel.pf-m-no-background {
227
+ --pf-v5-c-drawer__panel--BackgroundColor: transparent;
228
+ }
229
+ .pf-v5-c-drawer__panel.pf-m-light-200 {
230
+ --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-c-drawer__panel--m-light-200--BackgroundColor);
231
+ }
232
+ @media screen and (min-width: 768px) {
233
+ .pf-v5-c-drawer__panel {
234
+ --pf-v5-c-drawer__panel--FlexBasis:
235
+ max(
236
+ var(--pf-v5-c-drawer__panel--md--FlexBasis--min),
237
+ min(var(--pf-v5-c-drawer__panel--md--FlexBasis), var(--pf-v5-c-drawer__panel--md--FlexBasis--max))
238
+ );
239
+ }
240
+ }
241
+ @media screen and (min-width: 1200px) {
242
+ .pf-v5-c-drawer__panel {
243
+ --pf-v5-c-drawer__panel--md--FlexBasis: var(--pf-v5-c-drawer__panel--xl--FlexBasis);
244
+ }
245
+ .pf-v5-c-drawer.pf-m-panel-bottom .pf-v5-c-drawer__panel {
246
+ --pf-v5-c-drawer__panel--md--FlexBasis: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--FlexBasis);
247
+ }
248
+ }
249
+
250
+ .pf-v5-c-drawer__panel-main {
251
+ flex-grow: 1;
252
+ }
253
+
254
+ @keyframes pf-remove-tab-focus {
255
+ to {
256
+ visibility: hidden;
257
+ }
258
+ }
259
+ .pf-v5-c-drawer__panel[hidden] {
260
+ animation-name: pf-remove-tab-focus;
261
+ animation-delay: var(--pf-v5-c-drawer__panel--TransitionDuration);
262
+ animation-fill-mode: forwards;
263
+ }
264
+
265
+ .pf-v5-c-drawer__head {
266
+ display: grid;
267
+ grid-template-columns: auto;
268
+ grid-auto-columns: max-content;
269
+ }
270
+ .pf-v5-c-drawer__head > * {
271
+ grid-column: 1;
272
+ }
273
+
274
+ .pf-v5-c-drawer__actions {
275
+ display: flex;
276
+ grid-row: 1;
277
+ grid-column: 2;
278
+ align-self: baseline;
279
+ margin-top: var(--pf-v5-c-drawer__actions--MarginTop);
280
+ margin-right: var(--pf-v5-c-drawer__actions--MarginRight);
281
+ }
282
+
283
+ .pf-v5-c-drawer__body {
284
+ padding: var(--pf-v5-c-drawer--child--PaddingTop) var(--pf-v5-c-drawer--child--PaddingRight) var(--pf-v5-c-drawer--child--PaddingBottom) var(--pf-v5-c-drawer--child--PaddingLeft);
285
+ }
286
+ .pf-v5-c-drawer__body.pf-m-no-padding {
287
+ padding: 0;
288
+ }
289
+ .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__actions,
290
+ .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__head > .pf-v5-c-drawer__actions {
291
+ margin-top: 0;
292
+ margin-right: 0;
293
+ }
294
+ .pf-v5-c-drawer__body.pf-m-padding {
295
+ padding: var(--pf-v5-c-drawer--child--m-padding--PaddingTop) var(--pf-v5-c-drawer--child--m-padding--PaddingRight) var(--pf-v5-c-drawer--child--m-padding--PaddingBottom) var(--pf-v5-c-drawer--child--m-padding--PaddingLeft);
296
+ }
297
+ .pf-v5-c-drawer__body:not(.pf-m-no-padding) + * {
298
+ padding-top: 0;
299
+ }
300
+ .pf-v5-c-drawer__body:last-child {
301
+ flex: 1 1;
302
+ }
303
+
304
+ .pf-v5-c-drawer__body > .pf-v5-c-page__main {
305
+ height: 100%;
306
+ }
307
+
308
+ .pf-v5-c-drawer__splitter {
309
+ position: relative;
310
+ display: none;
311
+ width: var(--pf-v5-c-drawer__splitter--Width);
312
+ height: var(--pf-v5-c-drawer__splitter--Height);
313
+ cursor: var(--pf-v5-c-drawer__splitter--Cursor);
314
+ background-color: var(--pf-v5-c-drawer__splitter--BackgroundColor);
315
+ }
316
+ .pf-v5-c-drawer__splitter.pf-m-vertical {
317
+ --pf-v5-c-drawer__splitter--Height: var(--pf-v5-c-drawer__splitter--m-vertical--Height);
318
+ --pf-v5-c-drawer__splitter--Width: var(--pf-v5-c-drawer__splitter--m-vertical--Width);
319
+ --pf-v5-c-drawer__splitter--Cursor: var(--pf-v5-c-drawer__splitter--m-vertical--Cursor);
320
+ --pf-v5-c-drawer__splitter-handle--after--Width: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Width);
321
+ --pf-v5-c-drawer__splitter-handle--after--Height: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Height);
322
+ --pf-v5-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth);
323
+ --pf-v5-c-drawer__splitter-handle--after--BorderRightWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth);
324
+ --pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth);
325
+ --pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth);
326
+ }
327
+ .pf-v5-c-drawer__splitter:hover {
328
+ --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
329
+ }
330
+ .pf-v5-c-drawer__splitter:focus {
331
+ --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor);
332
+ }
333
+ .pf-v5-c-drawer__splitter::after {
334
+ position: absolute;
335
+ top: 0;
336
+ right: 0;
337
+ bottom: 0;
338
+ left: 0;
339
+ content: "";
340
+ border: solid var(--pf-v5-c-drawer__splitter--after--BorderColor);
341
+ border-width: var(--pf-v5-c-drawer__splitter--after--BorderTopWidth) var(--pf-v5-c-drawer__splitter--after--BorderRightWidth) var(--pf-v5-c-drawer__splitter--after--BorderBottomWidth) var(--pf-v5-c-drawer__splitter--after--BorderLeftWidth);
342
+ }
343
+
344
+ .pf-v5-c-drawer__splitter-handle {
345
+ position: absolute;
346
+ top: var(--pf-v5-c-drawer__splitter-handle--Top);
347
+ left: var(--pf-v5-c-drawer__splitter-handle--Left);
348
+ transform: translate(-50%, -50%);
349
+ }
350
+ .pf-v5-c-drawer__splitter-handle::after {
351
+ display: block;
352
+ width: var(--pf-v5-c-drawer__splitter-handle--after--Width);
353
+ height: var(--pf-v5-c-drawer__splitter-handle--after--Height);
354
+ content: "";
355
+ border-color: var(--pf-v5-c-drawer__splitter-handle--after--BorderColor);
356
+ border-style: solid;
357
+ border-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth) var(--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth) var(--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth) var(--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth);
358
+ }
359
+
360
+ @media screen and (min-width: 768px) {
361
+ .pf-v5-c-drawer {
362
+ min-width: var(--pf-v5-c-drawer__panel--MinWidth);
363
+ }
364
+ .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
365
+ box-shadow: var(--pf-v5-c-drawer--m-expanded__panel--BoxShadow);
366
+ }
367
+ .pf-v5-c-drawer > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable {
368
+ --pf-v5-c-drawer__panel--md--FlexBasis--min: var(--pf-v5-c-drawer__panel--m-resizable--md--FlexBasis--min);
369
+ flex-direction: var(--pf-v5-c-drawer__panel--m-resizable--FlexDirection);
370
+ min-width: var(--pf-v5-c-drawer__panel--m-resizable--MinWidth);
371
+ }
372
+ .pf-v5-c-drawer > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable::after {
373
+ width: 0;
374
+ height: 0;
375
+ }
376
+ .pf-v5-c-drawer > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
377
+ flex-shrink: 0;
378
+ }
379
+ .pf-v5-c-drawer > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__panel-main {
380
+ flex-shrink: 1;
381
+ }
382
+
383
+ .pf-v5-c-drawer.pf-m-panel-left {
384
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
385
+ }
386
+ .pf-v5-c-drawer.pf-m-panel-left.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-panel-left.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
387
+ padding-right: var(--pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
388
+ padding-left: 0;
389
+ }
390
+ .pf-v5-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
391
+ transform: translateX(0);
392
+ }
393
+ .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel::after {
394
+ right: 0;
395
+ left: auto;
396
+ }
397
+ .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
398
+ --pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-panel-left__splitter-handle--Left);
399
+ --pf-v5-c-drawer__splitter--after--BorderRightWidth: 0;
400
+ --pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer--m-panel-left__splitter--after--BorderLeftWidth);
401
+ order: 1;
402
+ }
403
+
404
+ .pf-v5-c-drawer.pf-m-panel-bottom {
405
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow);
406
+ --pf-v5-c-drawer__panel--MaxHeight: 100%;
407
+ --pf-v5-c-drawer__panel--FlexBasis--min: var(--pf-v5-c-drawer--m-panel-bottom__panel--FlexBasis--min);
408
+ min-width: auto;
409
+ min-height: var(--pf-v5-c-drawer--m-panel-bottom__panel--md--MinHeight);
410
+ }
411
+ .pf-v5-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
412
+ padding-top: var(--pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop);
413
+ padding-left: 0;
414
+ }
415
+ .pf-v5-c-drawer.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel::after {
416
+ top: 0;
417
+ left: auto;
418
+ width: 100%;
419
+ height: var(--pf-v5-c-drawer--m-panel-bottom__panel--after--Height);
420
+ }
421
+ .pf-v5-c-drawer.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable {
422
+ --pf-v5-c-drawer__panel--md--FlexBasis--min: var(--pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min);
423
+ --pf-v5-c-drawer__panel--m-resizable--FlexDirection: var(--pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection);
424
+ --pf-v5-c-drawer__panel--m-resizable--MinWidth: 0;
425
+ min-height: var(--pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight);
426
+ }
427
+ .pf-v5-c-drawer.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
428
+ --pf-v5-c-drawer__splitter-handle--Top: var(--pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top);
429
+ --pf-v5-c-drawer__splitter--after--BorderRightWidth: 0;
430
+ --pf-v5-c-drawer__splitter--after--BorderBottomWidth: var(--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth);
431
+ }
432
+
433
+ .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
434
+ --pf-v5-c-drawer__splitter--m-vertical--Width: var(--pf-v5-c-drawer--m-inline__splitter--m-vertical--Width);
435
+ --pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-inline__splitter-handle--Left);
436
+ --pf-v5-c-drawer__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth);
437
+ --pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth);
438
+ outline-offset: var(--pf-v5-c-drawer--m-inline__splitter--focus--OutlineOffset);
439
+ }
440
+ .pf-v5-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
441
+ --pf-v5-c-drawer__splitter--Height: var(--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--Height);
442
+ --pf-v5-c-drawer__splitter-handle--Top: var(--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top);
443
+ --pf-v5-c-drawer__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth);
444
+ --pf-v5-c-drawer__splitter--after--BorderRightWidth: 0;
445
+ --pf-v5-c-drawer__splitter--after--BorderLeftWidth: 0;
446
+ }
447
+
448
+ .pf-v5-c-drawer > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-no-border,
449
+ .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-no-border {
450
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: none;
451
+ }
452
+
453
+ .pf-v5-c-drawer__splitter {
454
+ display: block;
455
+ }
456
+ }
457
+ @media (min-width: 768px) {
458
+ .pf-v5-c-drawer__panel.pf-m-width-25 {
459
+ --pf-v5-c-drawer__panel--md--FlexBasis: 25%;
460
+ }
461
+
462
+ .pf-v5-c-drawer__panel.pf-m-width-33 {
463
+ --pf-v5-c-drawer__panel--md--FlexBasis: 33%;
464
+ }
465
+
466
+ .pf-v5-c-drawer__panel.pf-m-width-50 {
467
+ --pf-v5-c-drawer__panel--md--FlexBasis: 50%;
468
+ }
469
+
470
+ .pf-v5-c-drawer__panel.pf-m-width-66 {
471
+ --pf-v5-c-drawer__panel--md--FlexBasis: 66%;
472
+ }
473
+
474
+ .pf-v5-c-drawer__panel.pf-m-width-75 {
475
+ --pf-v5-c-drawer__panel--md--FlexBasis: 75%;
476
+ }
477
+
478
+ .pf-v5-c-drawer__panel.pf-m-width-100 {
479
+ --pf-v5-c-drawer__panel--md--FlexBasis: 100%;
480
+ }
481
+ }
482
+ @media (min-width: 992px) {
483
+ .pf-v5-c-drawer__panel.pf-m-width-25-on-lg {
484
+ --pf-v5-c-drawer__panel--md--FlexBasis: 25%;
485
+ }
486
+
487
+ .pf-v5-c-drawer__panel.pf-m-width-33-on-lg {
488
+ --pf-v5-c-drawer__panel--md--FlexBasis: 33%;
489
+ }
490
+
491
+ .pf-v5-c-drawer__panel.pf-m-width-50-on-lg {
492
+ --pf-v5-c-drawer__panel--md--FlexBasis: 50%;
493
+ }
494
+
495
+ .pf-v5-c-drawer__panel.pf-m-width-66-on-lg {
496
+ --pf-v5-c-drawer__panel--md--FlexBasis: 66%;
497
+ }
498
+
499
+ .pf-v5-c-drawer__panel.pf-m-width-75-on-lg {
500
+ --pf-v5-c-drawer__panel--md--FlexBasis: 75%;
501
+ }
502
+
503
+ .pf-v5-c-drawer__panel.pf-m-width-100-on-lg {
504
+ --pf-v5-c-drawer__panel--md--FlexBasis: 100%;
505
+ }
506
+ }
507
+ @media (min-width: 1200px) {
508
+ .pf-v5-c-drawer__panel.pf-m-width-25-on-xl {
509
+ --pf-v5-c-drawer__panel--md--FlexBasis: 25%;
510
+ }
511
+
512
+ .pf-v5-c-drawer__panel.pf-m-width-33-on-xl {
513
+ --pf-v5-c-drawer__panel--md--FlexBasis: 33%;
514
+ }
515
+
516
+ .pf-v5-c-drawer__panel.pf-m-width-50-on-xl {
517
+ --pf-v5-c-drawer__panel--md--FlexBasis: 50%;
518
+ }
519
+
520
+ .pf-v5-c-drawer__panel.pf-m-width-66-on-xl {
521
+ --pf-v5-c-drawer__panel--md--FlexBasis: 66%;
522
+ }
523
+
524
+ .pf-v5-c-drawer__panel.pf-m-width-75-on-xl {
525
+ --pf-v5-c-drawer__panel--md--FlexBasis: 75%;
526
+ }
527
+
528
+ .pf-v5-c-drawer__panel.pf-m-width-100-on-xl {
529
+ --pf-v5-c-drawer__panel--md--FlexBasis: 100%;
530
+ }
531
+ }
532
+ @media (min-width: 1450px) {
533
+ .pf-v5-c-drawer__panel.pf-m-width-25-on-2xl {
534
+ --pf-v5-c-drawer__panel--md--FlexBasis: 25%;
535
+ }
536
+
537
+ .pf-v5-c-drawer__panel.pf-m-width-33-on-2xl {
538
+ --pf-v5-c-drawer__panel--md--FlexBasis: 33%;
539
+ }
540
+
541
+ .pf-v5-c-drawer__panel.pf-m-width-50-on-2xl {
542
+ --pf-v5-c-drawer__panel--md--FlexBasis: 50%;
543
+ }
544
+
545
+ .pf-v5-c-drawer__panel.pf-m-width-66-on-2xl {
546
+ --pf-v5-c-drawer__panel--md--FlexBasis: 66%;
547
+ }
548
+
549
+ .pf-v5-c-drawer__panel.pf-m-width-75-on-2xl {
550
+ --pf-v5-c-drawer__panel--md--FlexBasis: 75%;
551
+ }
552
+
553
+ .pf-v5-c-drawer__panel.pf-m-width-100-on-2xl {
554
+ --pf-v5-c-drawer__panel--md--FlexBasis: 100%;
555
+ }
556
+ }
557
+ @media (min-width: 768px) {
558
+ .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content,
559
+ .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
560
+ flex-shrink: 1;
561
+ }
562
+ .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel,
563
+ .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
564
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: none;
565
+ }
566
+ .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border)::after,
567
+ .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border)::after {
568
+ background-color: var(--pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
569
+ }
570
+
571
+ .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
572
+ overflow-x: auto;
573
+ }
574
+ .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
575
+ margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
576
+ transform: translateX(100%);
577
+ }
578
+ .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
579
+ margin-left: 0;
580
+ transform: translateX(0);
581
+ }
582
+ .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
583
+ display: unset;
584
+ }
585
+ .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
586
+ margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
587
+ margin-left: 0;
588
+ transform: translateX(-100%);
589
+ }
590
+ .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
591
+ margin-right: 0;
592
+ transform: translateX(0);
593
+ }
594
+ .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
595
+ display: unset;
596
+ }
597
+ .pf-v5-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
598
+ margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
599
+ transform: translateY(100%);
600
+ }
601
+ .pf-v5-c-drawer.pf-m-inline.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
602
+ margin-bottom: 0;
603
+ transform: translateY(0);
604
+ }
605
+
606
+ .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
607
+ transform: translateX(0);
608
+ }
609
+ .pf-v5-c-drawer.pf-m-static.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
610
+ margin-right: 0;
611
+ transform: translateX(0);
612
+ }
613
+ .pf-v5-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
614
+ transform: translateX(0);
615
+ }
616
+ .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
617
+ display: none;
618
+ }
619
+ }
620
+ @media (min-width: 992px) {
621
+ .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content,
622
+ .pf-v5-c-drawer.pf-m-static-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
623
+ flex-shrink: 1;
624
+ }
625
+ .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel,
626
+ .pf-v5-c-drawer.pf-m-static-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
627
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: none;
628
+ }
629
+ .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border)::after,
630
+ .pf-v5-c-drawer.pf-m-static-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border)::after {
631
+ background-color: var(--pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
632
+ }
633
+
634
+ .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
635
+ overflow-x: auto;
636
+ }
637
+ .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
638
+ margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
639
+ transform: translateX(100%);
640
+ }
641
+ .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
642
+ margin-left: 0;
643
+ transform: translateX(0);
644
+ }
645
+ .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
646
+ display: unset;
647
+ }
648
+ .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
649
+ margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
650
+ margin-left: 0;
651
+ transform: translateX(-100%);
652
+ }
653
+ .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
654
+ margin-right: 0;
655
+ transform: translateX(0);
656
+ }
657
+ .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
658
+ display: unset;
659
+ }
660
+ .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
661
+ margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
662
+ transform: translateY(100%);
663
+ }
664
+ .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
665
+ margin-bottom: 0;
666
+ transform: translateY(0);
667
+ }
668
+
669
+ .pf-v5-c-drawer.pf-m-static-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
670
+ transform: translateX(0);
671
+ }
672
+ .pf-v5-c-drawer.pf-m-static-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
673
+ margin-right: 0;
674
+ transform: translateX(0);
675
+ }
676
+ .pf-v5-c-drawer.pf-m-static-on-lg.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
677
+ transform: translateX(0);
678
+ }
679
+ .pf-v5-c-drawer.pf-m-static-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
680
+ display: none;
681
+ }
682
+ }
683
+ @media (min-width: 1200px) {
684
+ .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content,
685
+ .pf-v5-c-drawer.pf-m-static-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
686
+ flex-shrink: 1;
687
+ }
688
+ .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel,
689
+ .pf-v5-c-drawer.pf-m-static-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
690
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: none;
691
+ }
692
+ .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border)::after,
693
+ .pf-v5-c-drawer.pf-m-static-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border)::after {
694
+ background-color: var(--pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
695
+ }
696
+
697
+ .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
698
+ overflow-x: auto;
699
+ }
700
+ .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
701
+ margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
702
+ transform: translateX(100%);
703
+ }
704
+ .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
705
+ margin-left: 0;
706
+ transform: translateX(0);
707
+ }
708
+ .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
709
+ display: unset;
710
+ }
711
+ .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
712
+ margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
713
+ margin-left: 0;
714
+ transform: translateX(-100%);
715
+ }
716
+ .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
717
+ margin-right: 0;
718
+ transform: translateX(0);
719
+ }
720
+ .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
721
+ display: unset;
722
+ }
723
+ .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
724
+ margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
725
+ transform: translateY(100%);
726
+ }
727
+ .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
728
+ margin-bottom: 0;
729
+ transform: translateY(0);
730
+ }
731
+
732
+ .pf-v5-c-drawer.pf-m-static-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
733
+ transform: translateX(0);
734
+ }
735
+ .pf-v5-c-drawer.pf-m-static-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
736
+ margin-right: 0;
737
+ transform: translateX(0);
738
+ }
739
+ .pf-v5-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
740
+ transform: translateX(0);
741
+ }
742
+ .pf-v5-c-drawer.pf-m-static-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
743
+ display: none;
744
+ }
745
+ }
746
+ @media (min-width: 1450px) {
747
+ .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content,
748
+ .pf-v5-c-drawer.pf-m-static-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
749
+ flex-shrink: 1;
750
+ }
751
+ .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel,
752
+ .pf-v5-c-drawer.pf-m-static-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
753
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: none;
754
+ }
755
+ .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border)::after,
756
+ .pf-v5-c-drawer.pf-m-static-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border)::after {
757
+ background-color: var(--pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
758
+ }
759
+
760
+ .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
761
+ overflow-x: auto;
762
+ }
763
+ .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
764
+ margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
765
+ transform: translateX(100%);
766
+ }
767
+ .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
768
+ margin-left: 0;
769
+ transform: translateX(0);
770
+ }
771
+ .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
772
+ display: unset;
773
+ }
774
+ .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
775
+ margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
776
+ margin-left: 0;
777
+ transform: translateX(-100%);
778
+ }
779
+ .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
780
+ margin-right: 0;
781
+ transform: translateX(0);
782
+ }
783
+ .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
784
+ display: unset;
785
+ }
786
+ .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
787
+ margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
788
+ transform: translateY(100%);
789
+ }
790
+ .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
791
+ margin-bottom: 0;
792
+ transform: translateY(0);
793
+ }
794
+
795
+ .pf-v5-c-drawer.pf-m-static-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
796
+ transform: translateX(0);
797
+ }
798
+ .pf-v5-c-drawer.pf-m-static-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
799
+ margin-right: 0;
800
+ transform: translateX(0);
801
+ }
802
+ .pf-v5-c-drawer.pf-m-static-on-2xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
803
+ transform: translateX(0);
804
+ }
805
+ .pf-v5-c-drawer.pf-m-static-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
806
+ display: none;
807
+ }
808
+ }
809
+ :where(.pf-v5-theme-dark) .pf-v5-c-drawer {
810
+ --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
811
+ --pf-v5-c-drawer__splitter--BackgroundColor: transparent;
812
+ }
813
+ :where(.pf-v5-theme-dark) .pf-v5-c-drawer.pf-m-inline, :where(.pf-v5-theme-dark) .pf-v5-c-drawer.pf-m-static {
814
+ --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
815
+ }
816
+
817
+ .pf-v5-c-popover {
818
+ --pf-v5-c-popover--FontSize: var(--pf-v5-global--FontSize--sm);
819
+ --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
820
+ --pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
821
+ --pf-v5-c-popover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
822
+ --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
823
+ --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
824
+ --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
825
+ --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
826
+ --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
827
+ --pf-v5-c-popover--m-danger__title-text--Color: var(--pf-v5-global--danger-color--200);
828
+ --pf-v5-c-popover--m-warning__title-text--Color: var(--pf-v5-global--warning-color--200);
829
+ --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--200);
830
+ --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--200);
831
+ --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--300);
832
+ --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
833
+ --pf-v5-c-popover__content--PaddingTop: var(--pf-v5-global--spacer--md);
834
+ --pf-v5-c-popover__content--PaddingRight: var(--pf-v5-global--spacer--md);
835
+ --pf-v5-c-popover__content--PaddingBottom: var(--pf-v5-global--spacer--md);
836
+ --pf-v5-c-popover__content--PaddingLeft: var(--pf-v5-global--spacer--md);
837
+ --pf-v5-c-popover__arrow--Width: var(--pf-v5-global--arrow--width-lg);
838
+ --pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
839
+ --pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
840
+ --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
841
+ --pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
842
+ --pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
843
+ --pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
844
+ --pf-v5-c-popover__arrow--m-right--TranslateX: -50%;
845
+ --pf-v5-c-popover__arrow--m-right--TranslateY: -50%;
846
+ --pf-v5-c-popover__arrow--m-right--Rotate: 45deg;
847
+ --pf-v5-c-popover__arrow--m-bottom--TranslateX: -50%;
848
+ --pf-v5-c-popover__arrow--m-bottom--TranslateY: -50%;
849
+ --pf-v5-c-popover__arrow--m-bottom--Rotate: 45deg;
850
+ --pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
851
+ --pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
852
+ --pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
853
+ --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - var(--pf-v5-global--spacer--form-element));
854
+ --pf-v5-c-popover__close--Right: calc(var(--pf-v5-c-popover__content--PaddingRight) - var(--pf-v5-global--spacer--md));
855
+ --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
856
+ --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
857
+ --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
858
+ --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
859
+ --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
860
+ --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
861
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
862
+ --pf-v5-c-popover__title-icon--FontSize: var(--pf-v5-global--FontSize--md);
863
+ --pf-v5-c-popover__footer--MarginTop: var(--pf-v5-global--spacer--md);
864
+ position: relative;
865
+ min-width: var(--pf-v5-c-popover--MinWidth);
866
+ max-width: var(--pf-v5-c-popover--MaxWidth);
867
+ font-size: var(--pf-v5-c-popover--FontSize);
868
+ box-shadow: var(--pf-v5-c-popover--BoxShadow);
869
+ }
870
+ .pf-v5-c-popover.pf-m-no-padding {
871
+ --pf-v5-c-popover__content--PaddingTop: 0px;
872
+ --pf-v5-c-popover__content--PaddingRight: 0px;
873
+ --pf-v5-c-popover__content--PaddingBottom: 0px;
874
+ --pf-v5-c-popover__content--PaddingLeft: 0px;
875
+ }
876
+ .pf-v5-c-popover.pf-m-width-auto {
877
+ --pf-v5-c-popover--MinWidth: auto;
878
+ --pf-v5-c-popover--MaxWidth: none;
879
+ }
880
+ .pf-v5-c-popover.pf-m-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow {
881
+ bottom: 0;
882
+ left: 50%;
883
+ transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
884
+ }
885
+ .pf-v5-c-popover.pf-m-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
886
+ top: 0;
887
+ left: 50%;
888
+ transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
889
+ }
890
+ .pf-v5-c-popover.pf-m-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow {
891
+ top: 50%;
892
+ right: 0;
893
+ transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
894
+ }
895
+ .pf-v5-c-popover.pf-m-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
896
+ top: 50%;
897
+ left: 0;
898
+ transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
899
+ }
900
+ .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow {
901
+ top: var(--pf-v5-c-popover__arrow--Height);
902
+ }
903
+ .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
904
+ top: auto;
905
+ bottom: 0;
906
+ }
907
+ .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow {
908
+ left: var(--pf-v5-c-popover__arrow--Width);
909
+ }
910
+ .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
911
+ right: 0;
912
+ left: auto;
913
+ }
914
+ .pf-v5-c-popover.pf-m-danger {
915
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
916
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
917
+ }
918
+ .pf-v5-c-popover.pf-m-warning {
919
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
920
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
921
+ }
922
+ .pf-v5-c-popover.pf-m-success {
923
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
924
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
925
+ }
926
+ .pf-v5-c-popover.pf-m-custom {
927
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
928
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
929
+ }
930
+ .pf-v5-c-popover.pf-m-info {
931
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
932
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
933
+ }
934
+
935
+ .pf-v5-c-popover__content {
936
+ position: relative;
937
+ padding: var(--pf-v5-c-popover__content--PaddingTop) var(--pf-v5-c-popover__content--PaddingRight) var(--pf-v5-c-popover__content--PaddingBottom) var(--pf-v5-c-popover__content--PaddingLeft);
938
+ background-color: var(--pf-v5-c-popover__content--BackgroundColor);
939
+ }
940
+
941
+ .pf-v5-c-popover__close {
942
+ position: absolute;
943
+ top: var(--pf-v5-c-popover__close--Top);
944
+ right: var(--pf-v5-c-popover__close--Right);
945
+ }
946
+ .pf-v5-c-popover__close + * {
947
+ padding-right: var(--pf-v5-c-popover__close--sibling--PaddingRight);
948
+ }
949
+
950
+ .pf-v5-c-popover__arrow {
951
+ position: absolute;
952
+ width: var(--pf-v5-c-popover__arrow--Width);
953
+ height: var(--pf-v5-c-popover__arrow--Height);
954
+ pointer-events: none;
955
+ background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
956
+ box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
957
+ }
958
+
959
+ .pf-v5-c-popover__header {
960
+ margin-bottom: var(--pf-v5-c-popover__header--MarginBottom);
961
+ }
962
+
963
+ .pf-v5-c-popover__title {
964
+ display: flex;
965
+ flex: 0 0 auto;
966
+ }
967
+
968
+ .pf-v5-c-popover__title-icon {
969
+ margin-right: var(--pf-v5-c-popover__title-icon--MarginRight);
970
+ font-size: var(--pf-v5-c-popover__title-icon--FontSize);
971
+ color: var(--pf-v5-c-popover__title-icon--Color);
972
+ }
973
+
974
+ .pf-v5-c-popover__title-text {
975
+ font-family: var(--pf-v5-c-popover__title-text--FontFamily);
976
+ font-size: var(--pf-v5-c-popover__title-text--FontSize);
977
+ line-height: var(--pf-v5-c-popover__title-text--LineHeight);
978
+ color: var(--pf-v5-c-popover__title-text--Color, inherit);
979
+ }
980
+
981
+ .pf-v5-c-popover__body {
982
+ word-wrap: break-word;
983
+ }
984
+
985
+ .pf-v5-c-popover__footer {
986
+ margin-top: var(--pf-v5-c-popover__footer--MarginTop);
987
+ }
988
+
989
+ :where(.pf-v5-theme-dark) .pf-v5-c-popover {
990
+ --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
991
+ --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
992
+ --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
993
+ --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
994
+ --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
995
+ }
996
+
997
+ .pf-v5-c-modal-box {
998
+ --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
999
+ --pf-v5-c-modal-box--BoxShadow: var(--pf-v5-global--BoxShadow--xl);
1000
+ --pf-v5-c-modal-box--ZIndex: var(--pf-v5-global--ZIndex--xl);
1001
+ --pf-v5-c-modal-box--Width: 100%;
1002
+ --pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-v5-global--spacer--xl));
1003
+ --pf-v5-c-modal-box--m-sm--sm--MaxWidth: 35rem;
1004
+ --pf-v5-c-modal-box--m-md--Width: 52.5rem;
1005
+ --pf-v5-c-modal-box--m-lg--lg--MaxWidth: 70rem;
1006
+ --pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-v5-global--spacer--2xl));
1007
+ --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-global--spacer--sm);
1008
+ --pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-v5-global--spacer--xl);
1009
+ --pf-v5-c-modal-box--m-align-top--MarginTop: var(--pf-v5-c-modal-box--m-align-top--spacer);
1010
+ --pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-v5-global--spacer--2xl)) - var(--pf-v5-c-modal-box--m-align-top--spacer));
1011
+ --pf-v5-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer) * 2, var(--pf-v5-global--spacer--xl)));
1012
+ --pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
1013
+ --pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
1014
+ --pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
1015
+ --pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
1016
+ --pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
1017
+ --pf-v5-c-modal-box__header--PaddingTop: var(--pf-v5-global--spacer--lg);
1018
+ --pf-v5-c-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--lg);
1019
+ --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
1020
+ --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
1021
+ --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
1022
+ --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
1023
+ --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
1024
+ --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
1025
+ --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);
1026
+ --pf-v5-c-modal-box__description--PaddingTop: var(--pf-v5-global--spacer--xs);
1027
+ --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
1028
+ --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-global--spacer--lg);
1029
+ --pf-v5-c-modal-box__body--PaddingRight: var(--pf-v5-global--spacer--lg);
1030
+ --pf-v5-c-modal-box__body--PaddingLeft: var(--pf-v5-global--spacer--lg);
1031
+ --pf-v5-c-modal-box__body--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
1032
+ --pf-v5-c-modal-box__header--body--PaddingTop: var(--pf-v5-global--spacer--md);
1033
+ --pf-v5-c-modal-box__close--Top: calc(var(--pf-v5-global--spacer--lg));
1034
+ --pf-v5-c-modal-box__close--Right: var(--pf-v5-global--spacer--md);
1035
+ --pf-v5-c-modal-box__close--sibling--MarginRight: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-global--spacer--sm));
1036
+ --pf-v5-c-modal-box__footer--PaddingTop: var(--pf-v5-global--spacer--lg);
1037
+ --pf-v5-c-modal-box__footer--PaddingRight: var(--pf-v5-global--spacer--lg);
1038
+ --pf-v5-c-modal-box__footer--PaddingBottom: var(--pf-v5-global--spacer--lg);
1039
+ --pf-v5-c-modal-box__footer--PaddingLeft: var(--pf-v5-global--spacer--lg);
1040
+ --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-global--spacer--md);
1041
+ --pf-v5-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v5-c-modal-box__footer--c-button--MarginRight) / 2);
1042
+ position: relative;
1043
+ z-index: var(--pf-v5-c-modal-box--ZIndex);
1044
+ display: flex;
1045
+ flex-direction: column;
1046
+ width: var(--pf-v5-c-modal-box--Width);
1047
+ max-width: var(--pf-v5-c-modal-box--MaxWidth);
1048
+ max-height: var(--pf-v5-c-modal-box--MaxHeight);
1049
+ background-color: var(--pf-v5-c-modal-box--BackgroundColor);
1050
+ box-shadow: var(--pf-v5-c-modal-box--BoxShadow);
1051
+ }
1052
+ @media (min-width: 1200px) {
1053
+ .pf-v5-c-modal-box {
1054
+ --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
1055
+ }
1056
+ }
1057
+ .pf-v5-c-modal-box.pf-m-sm {
1058
+ --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-sm--sm--MaxWidth);
1059
+ }
1060
+ .pf-v5-c-modal-box.pf-m-md {
1061
+ --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-md--Width);
1062
+ }
1063
+ .pf-v5-c-modal-box.pf-m-lg {
1064
+ --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-lg--lg--MaxWidth);
1065
+ }
1066
+ .pf-v5-c-modal-box.pf-m-align-top {
1067
+ top: var(--pf-v5-c-modal-box--m-align-top--MarginTop);
1068
+ align-self: flex-start;
1069
+ max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
1070
+ max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
1071
+ }
1072
+ .pf-v5-c-modal-box.pf-m-danger {
1073
+ --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-danger__title-icon--Color);
1074
+ }
1075
+ .pf-v5-c-modal-box.pf-m-warning {
1076
+ --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-warning__title-icon--Color);
1077
+ }
1078
+ .pf-v5-c-modal-box.pf-m-success {
1079
+ --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-success__title-icon--Color);
1080
+ }
1081
+ .pf-v5-c-modal-box.pf-m-custom {
1082
+ --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-custom__title-icon--Color);
1083
+ }
1084
+ .pf-v5-c-modal-box.pf-m-info {
1085
+ --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-info__title-icon--Color);
1086
+ }
1087
+
1088
+ .pf-v5-c-modal-box__close {
1089
+ position: absolute;
1090
+ top: var(--pf-v5-c-modal-box__close--Top);
1091
+ right: var(--pf-v5-c-modal-box__close--Right);
1092
+ }
1093
+ .pf-v5-c-modal-box__close + * {
1094
+ margin-right: var(--pf-v5-c-modal-box__close--sibling--MarginRight);
1095
+ }
1096
+
1097
+ .pf-v5-c-modal-box__header {
1098
+ display: flex;
1099
+ flex-direction: column;
1100
+ flex-shrink: 0;
1101
+ padding-top: var(--pf-v5-c-modal-box__header--PaddingTop);
1102
+ padding-right: var(--pf-v5-c-modal-box__header--PaddingRight);
1103
+ padding-left: var(--pf-v5-c-modal-box__header--PaddingLeft);
1104
+ }
1105
+ .pf-v5-c-modal-box__header.pf-m-help {
1106
+ display: flex;
1107
+ flex-direction: row;
1108
+ }
1109
+ .pf-v5-c-modal-box__header:last-child {
1110
+ padding-bottom: var(--pf-v5-c-modal-box__header--last-child--PaddingBottom);
1111
+ }
1112
+ .pf-v5-c-modal-box__header + .pf-v5-c-modal-box__body {
1113
+ --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-c-modal-box__header--body--PaddingTop);
1114
+ }
1115
+
1116
+ .pf-v5-c-modal-box__header-main {
1117
+ flex-grow: 1;
1118
+ min-width: 0;
1119
+ }
1120
+
1121
+ .pf-v5-c-modal-box__title,
1122
+ .pf-v5-c-modal-box__title-text {
1123
+ overflow: hidden;
1124
+ text-overflow: ellipsis;
1125
+ white-space: nowrap;
1126
+ }
1127
+
1128
+ .pf-v5-c-modal-box__title {
1129
+ flex: 0 0 auto;
1130
+ font-family: var(--pf-v5-c-modal-box__title--FontFamily);
1131
+ font-size: var(--pf-v5-c-modal-box__title--FontSize);
1132
+ line-height: var(--pf-v5-c-modal-box__title--LineHeight);
1133
+ }
1134
+ .pf-v5-c-modal-box__title.pf-m-icon {
1135
+ display: flex;
1136
+ }
1137
+
1138
+ .pf-v5-c-modal-box__title-icon {
1139
+ margin-right: var(--pf-v5-c-modal-box__title-icon--MarginRight);
1140
+ color: var(--pf-v5-c-modal-box__title-icon--Color);
1141
+ }
1142
+
1143
+ .pf-v5-c-modal-box__description {
1144
+ padding-top: var(--pf-v5-c-modal-box__description--PaddingTop);
1145
+ }
1146
+
1147
+ .pf-v5-c-modal-box__body {
1148
+ flex: 1 1 auto;
1149
+ min-height: var(--pf-v5-c-modal-box__body--MinHeight);
1150
+ padding-top: var(--pf-v5-c-modal-box__body--PaddingTop);
1151
+ padding-right: var(--pf-v5-c-modal-box__body--PaddingRight);
1152
+ padding-left: var(--pf-v5-c-modal-box__body--PaddingLeft);
1153
+ overflow-x: hidden;
1154
+ overflow-y: auto;
1155
+ overscroll-behavior: contain;
1156
+ word-break: break-word;
1157
+ -webkit-overflow-scrolling: touch;
1158
+ }
1159
+ .pf-v5-c-modal-box__body:last-child {
1160
+ padding-bottom: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
1161
+ }
1162
+
1163
+ .pf-v5-c-modal-box__footer {
1164
+ display: flex;
1165
+ flex: 0 0 auto;
1166
+ align-items: center;
1167
+ padding-top: var(--pf-v5-c-modal-box__footer--PaddingTop);
1168
+ padding-right: var(--pf-v5-c-modal-box__footer--PaddingRight);
1169
+ padding-bottom: var(--pf-v5-c-modal-box__footer--PaddingBottom);
1170
+ padding-left: var(--pf-v5-c-modal-box__footer--PaddingLeft);
1171
+ }
1172
+ .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
1173
+ margin-right: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
1174
+ }
1175
+ @media screen and (min-width: 576px) {
1176
+ .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
1177
+ --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-c-modal-box__footer--c-button--sm--MarginRight);
1178
+ }
1179
+ }
1180
+
1181
+ :where(.pf-v5-theme-dark) .pf-v5-c-modal-box {
1182
+ --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1183
+ }
1184
+
1185
+ .pf-v5-c-backdrop {
1186
+ --pf-v5-c-backdrop--Position: fixed;
1187
+ --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
1188
+ --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
1189
+ position: var(--pf-v5-c-backdrop--Position);
1190
+ top: 0;
1191
+ left: 0;
1192
+ z-index: var(--pf-v5-c-backdrop--ZIndex);
1193
+ width: 100%;
1194
+ height: 100%;
1195
+ background-color: var(--pf-v5-c-backdrop--BackgroundColor);
1196
+ }
1197
+
1198
+ .pf-v5-c-backdrop__open {
1199
+ overflow: hidden;
1200
+ }
1201
+
1202
+ .pf-v5-l-bullseye {
1203
+ --pf-v5-l-bullseye--Padding: 0;
1204
+ display: flex;
1205
+ align-items: center;
1206
+ justify-content: center;
1207
+ height: 100%;
1208
+ padding: var(--pf-v5-l-bullseye--Padding);
1209
+ margin: 0;
1210
+ }
1211
+
1212
+ .pf-v5-c-tooltip {
1213
+ --pf-v5-c-tooltip--MaxWidth: 18.75rem;
1214
+ --pf-v5-c-tooltip--BoxShadow: var(--pf-v5-global--BoxShadow--md);
1215
+ --pf-v5-c-tooltip__content--PaddingTop: var(--pf-v5-global--spacer--sm);
1216
+ --pf-v5-c-tooltip__content--PaddingRight: var(--pf-v5-global--spacer--sm);
1217
+ --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-v5-global--spacer--sm);
1218
+ --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-v5-global--spacer--sm);
1219
+ --pf-v5-c-tooltip__content--Color: var(--pf-v5-global--Color--light-100);
1220
+ --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
1221
+ --pf-v5-c-tooltip__content--FontSize: var(--pf-v5-global--FontSize--sm);
1222
+ --pf-v5-c-tooltip__arrow--Width: 0.9375rem;
1223
+ --pf-v5-c-tooltip__arrow--Height: 0.9375rem;
1224
+ --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
1225
+ --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--md);
1226
+ --pf-v5-c-tooltip__arrow--m-top--TranslateX: -50%;
1227
+ --pf-v5-c-tooltip__arrow--m-top--TranslateY: 50%;
1228
+ --pf-v5-c-tooltip__arrow--m-top--Rotate: 45deg;
1229
+ --pf-v5-c-tooltip__arrow--m-right--TranslateX: -50%;
1230
+ --pf-v5-c-tooltip__arrow--m-right--TranslateY: -50%;
1231
+ --pf-v5-c-tooltip__arrow--m-right--Rotate: 45deg;
1232
+ --pf-v5-c-tooltip__arrow--m-bottom--TranslateX: -50%;
1233
+ --pf-v5-c-tooltip__arrow--m-bottom--TranslateY: -50%;
1234
+ --pf-v5-c-tooltip__arrow--m-bottom--Rotate: 45deg;
1235
+ --pf-v5-c-tooltip__arrow--m-left--TranslateX: 50%;
1236
+ --pf-v5-c-tooltip__arrow--m-left--TranslateY: -50%;
1237
+ --pf-v5-c-tooltip__arrow--m-left--Rotate: 45deg;
1238
+ position: relative;
1239
+ max-width: var(--pf-v5-c-tooltip--MaxWidth);
1240
+ box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
1241
+ }
1242
+ .pf-v5-c-tooltip.pf-m-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow {
1243
+ bottom: 0;
1244
+ left: 50%;
1245
+ transform: translateX(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
1246
+ }
1247
+ .pf-v5-c-tooltip.pf-m-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
1248
+ top: 0;
1249
+ left: 50%;
1250
+ transform: translateX(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
1251
+ }
1252
+ .pf-v5-c-tooltip.pf-m-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow {
1253
+ top: 50%;
1254
+ right: 0;
1255
+ transform: translateX(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
1256
+ }
1257
+ .pf-v5-c-tooltip.pf-m-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
1258
+ top: 50%;
1259
+ left: 0;
1260
+ transform: translateX(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
1261
+ }
1262
+ .pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow {
1263
+ top: var(--pf-v5-c-tooltip__arrow--Height);
1264
+ }
1265
+ .pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
1266
+ top: auto;
1267
+ bottom: 0;
1268
+ }
1269
+ .pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow {
1270
+ left: var(--pf-v5-c-tooltip__arrow--Width);
1271
+ }
1272
+ .pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
1273
+ right: 0;
1274
+ left: auto;
1275
+ }
1276
+
1277
+ .pf-v5-c-tooltip__content {
1278
+ position: relative;
1279
+ padding: var(--pf-v5-c-tooltip__content--PaddingTop) var(--pf-v5-c-tooltip__content--PaddingRight) var(--pf-v5-c-tooltip__content--PaddingBottom) var(--pf-v5-c-tooltip__content--PaddingLeft);
1280
+ font-size: var(--pf-v5-c-tooltip__content--FontSize);
1281
+ color: var(--pf-v5-c-tooltip__content--Color);
1282
+ text-align: center;
1283
+ word-break: break-word;
1284
+ background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
1285
+ }
1286
+ .pf-v5-c-tooltip__content.pf-m-text-align-left {
1287
+ text-align: left;
1288
+ }
1289
+
1290
+ .pf-v5-c-tooltip__arrow {
1291
+ position: absolute;
1292
+ width: var(--pf-v5-c-tooltip__arrow--Width);
1293
+ height: var(--pf-v5-c-tooltip__arrow--Height);
1294
+ pointer-events: none;
1295
+ background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
1296
+ box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
1297
+ }
1298
+
1299
+ :where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
1300
+ --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1301
+ --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1302
+ }