@patternfly/react-core 4.249.0 → 4.250.1

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 (190) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/esm/next/components/Select/Select.d.ts +28 -0
  3. package/dist/esm/next/components/Select/Select.d.ts.map +1 -0
  4. package/dist/esm/next/components/Select/Select.js +62 -0
  5. package/dist/esm/next/components/Select/Select.js.map +1 -0
  6. package/dist/esm/next/components/Select/SelectGroup.d.ts +12 -0
  7. package/dist/esm/next/components/Select/SelectGroup.d.ts.map +1 -0
  8. package/dist/esm/next/components/Select/SelectGroup.js +10 -0
  9. package/dist/esm/next/components/Select/SelectGroup.js.map +1 -0
  10. package/dist/esm/next/components/Select/SelectList.d.ts +10 -0
  11. package/dist/esm/next/components/Select/SelectList.d.ts.map +1 -0
  12. package/dist/esm/next/components/Select/SelectList.js +10 -0
  13. package/dist/esm/next/components/Select/SelectList.js.map +1 -0
  14. package/dist/esm/next/components/Select/SelectOption.d.ts +20 -0
  15. package/dist/esm/next/components/Select/SelectOption.d.ts.map +1 -0
  16. package/dist/esm/next/components/Select/SelectOption.js +10 -0
  17. package/dist/esm/next/components/Select/SelectOption.js.map +1 -0
  18. package/dist/esm/next/components/Select/index.d.ts +5 -0
  19. package/dist/esm/next/components/Select/index.d.ts.map +1 -0
  20. package/dist/esm/next/components/Select/index.js +5 -0
  21. package/dist/esm/next/components/Select/index.js.map +1 -0
  22. package/dist/esm/next/components/Wizard/Wizard.d.ts +9 -7
  23. package/dist/esm/next/components/Wizard/Wizard.d.ts.map +1 -1
  24. package/dist/esm/next/components/Wizard/Wizard.js +62 -48
  25. package/dist/esm/next/components/Wizard/Wizard.js.map +1 -1
  26. package/dist/esm/next/components/Wizard/WizardBody.d.ts +2 -2
  27. package/dist/esm/next/components/Wizard/WizardBody.d.ts.map +1 -1
  28. package/dist/esm/next/components/Wizard/WizardBody.js +1 -1
  29. package/dist/esm/next/components/Wizard/WizardBody.js.map +1 -1
  30. package/dist/esm/next/components/Wizard/WizardContext.d.ts +21 -20
  31. package/dist/esm/next/components/Wizard/WizardContext.d.ts.map +1 -1
  32. package/dist/esm/next/components/Wizard/WizardContext.js +63 -32
  33. package/dist/esm/next/components/Wizard/WizardContext.js.map +1 -1
  34. package/dist/esm/next/components/Wizard/WizardFooter.d.ts +20 -6
  35. package/dist/esm/next/components/Wizard/WizardFooter.d.ts.map +1 -1
  36. package/dist/esm/next/components/Wizard/WizardFooter.js +13 -4
  37. package/dist/esm/next/components/Wizard/WizardFooter.js.map +1 -1
  38. package/dist/esm/next/components/Wizard/WizardHeader.d.ts +1 -1
  39. package/dist/esm/next/components/Wizard/WizardHeader.d.ts.map +1 -1
  40. package/dist/esm/next/components/Wizard/WizardHeader.js +2 -2
  41. package/dist/esm/next/components/Wizard/WizardHeader.js.map +1 -1
  42. package/dist/esm/next/components/Wizard/WizardNav.d.ts +5 -5
  43. package/dist/esm/next/components/Wizard/WizardNav.d.ts.map +1 -1
  44. package/dist/esm/next/components/Wizard/WizardNav.js +3 -4
  45. package/dist/esm/next/components/Wizard/WizardNav.js.map +1 -1
  46. package/dist/esm/next/components/Wizard/WizardNavInternal.d.ts +14 -0
  47. package/dist/esm/next/components/Wizard/WizardNavInternal.d.ts.map +1 -0
  48. package/dist/esm/next/components/Wizard/WizardNavInternal.js +49 -0
  49. package/dist/esm/next/components/Wizard/WizardNavInternal.js.map +1 -0
  50. package/dist/esm/next/components/Wizard/WizardNavItem.d.ts +12 -8
  51. package/dist/esm/next/components/Wizard/WizardNavItem.d.ts.map +1 -1
  52. package/dist/esm/next/components/Wizard/WizardNavItem.js +23 -12
  53. package/dist/esm/next/components/Wizard/WizardNavItem.js.map +1 -1
  54. package/dist/esm/next/components/Wizard/WizardStep.d.ts +22 -6
  55. package/dist/esm/next/components/Wizard/WizardStep.d.ts.map +1 -1
  56. package/dist/esm/next/components/Wizard/WizardStep.js +20 -1
  57. package/dist/esm/next/components/Wizard/WizardStep.js.map +1 -1
  58. package/dist/esm/next/components/Wizard/WizardToggle.d.ts +9 -15
  59. package/dist/esm/next/components/Wizard/WizardToggle.d.ts.map +1 -1
  60. package/dist/esm/next/components/Wizard/WizardToggle.js +15 -50
  61. package/dist/esm/next/components/Wizard/WizardToggle.js.map +1 -1
  62. package/dist/esm/next/components/Wizard/hooks/useWizardFooter.d.ts +2 -2
  63. package/dist/esm/next/components/Wizard/hooks/useWizardFooter.d.ts.map +1 -1
  64. package/dist/esm/next/components/Wizard/hooks/useWizardFooter.js +3 -3
  65. package/dist/esm/next/components/Wizard/hooks/useWizardFooter.js.map +1 -1
  66. package/dist/esm/next/components/Wizard/types.d.ts +37 -46
  67. package/dist/esm/next/components/Wizard/types.d.ts.map +1 -1
  68. package/dist/esm/next/components/Wizard/types.js +10 -2
  69. package/dist/esm/next/components/Wizard/types.js.map +1 -1
  70. package/dist/esm/next/components/Wizard/utils.d.ts +4 -5
  71. package/dist/esm/next/components/Wizard/utils.d.ts.map +1 -1
  72. package/dist/esm/next/components/Wizard/utils.js +20 -13
  73. package/dist/esm/next/components/Wizard/utils.js.map +1 -1
  74. package/dist/esm/next/components/index.d.ts +2 -1
  75. package/dist/esm/next/components/index.d.ts.map +1 -1
  76. package/dist/esm/next/components/index.js +2 -1
  77. package/dist/esm/next/components/index.js.map +1 -1
  78. package/dist/js/next/components/Select/Select.d.ts +28 -0
  79. package/dist/js/next/components/Select/Select.d.ts.map +1 -0
  80. package/dist/js/next/components/Select/Select.js +65 -0
  81. package/dist/js/next/components/Select/Select.js.map +1 -0
  82. package/dist/js/next/components/Select/SelectGroup.d.ts +12 -0
  83. package/dist/js/next/components/Select/SelectGroup.d.ts.map +1 -0
  84. package/dist/js/next/components/Select/SelectGroup.js +14 -0
  85. package/dist/js/next/components/Select/SelectGroup.js.map +1 -0
  86. package/dist/js/next/components/Select/SelectList.d.ts +10 -0
  87. package/dist/js/next/components/Select/SelectList.d.ts.map +1 -0
  88. package/dist/js/next/components/Select/SelectList.js +14 -0
  89. package/dist/js/next/components/Select/SelectList.js.map +1 -0
  90. package/dist/js/next/components/Select/SelectOption.d.ts +20 -0
  91. package/dist/js/next/components/Select/SelectOption.d.ts.map +1 -0
  92. package/dist/js/next/components/Select/SelectOption.js +14 -0
  93. package/dist/js/next/components/Select/SelectOption.js.map +1 -0
  94. package/dist/js/next/components/Select/index.d.ts +5 -0
  95. package/dist/js/next/components/Select/index.d.ts.map +1 -0
  96. package/dist/js/next/components/Select/index.js +8 -0
  97. package/dist/js/next/components/Select/index.js.map +1 -0
  98. package/dist/js/next/components/Wizard/Wizard.d.ts +9 -7
  99. package/dist/js/next/components/Wizard/Wizard.d.ts.map +1 -1
  100. package/dist/js/next/components/Wizard/Wizard.js +59 -45
  101. package/dist/js/next/components/Wizard/Wizard.js.map +1 -1
  102. package/dist/js/next/components/Wizard/WizardBody.d.ts +2 -2
  103. package/dist/js/next/components/Wizard/WizardBody.d.ts.map +1 -1
  104. package/dist/js/next/components/Wizard/WizardBody.js +1 -1
  105. package/dist/js/next/components/Wizard/WizardBody.js.map +1 -1
  106. package/dist/js/next/components/Wizard/WizardContext.d.ts +21 -20
  107. package/dist/js/next/components/Wizard/WizardContext.d.ts.map +1 -1
  108. package/dist/js/next/components/Wizard/WizardContext.js +61 -30
  109. package/dist/js/next/components/Wizard/WizardContext.js.map +1 -1
  110. package/dist/js/next/components/Wizard/WizardFooter.d.ts +20 -6
  111. package/dist/js/next/components/Wizard/WizardFooter.d.ts.map +1 -1
  112. package/dist/js/next/components/Wizard/WizardFooter.js +15 -6
  113. package/dist/js/next/components/Wizard/WizardFooter.js.map +1 -1
  114. package/dist/js/next/components/Wizard/WizardHeader.d.ts +1 -1
  115. package/dist/js/next/components/Wizard/WizardHeader.d.ts.map +1 -1
  116. package/dist/js/next/components/Wizard/WizardHeader.js +2 -2
  117. package/dist/js/next/components/Wizard/WizardHeader.js.map +1 -1
  118. package/dist/js/next/components/Wizard/WizardNav.d.ts +5 -5
  119. package/dist/js/next/components/Wizard/WizardNav.d.ts.map +1 -1
  120. package/dist/js/next/components/Wizard/WizardNav.js +3 -4
  121. package/dist/js/next/components/Wizard/WizardNav.js.map +1 -1
  122. package/dist/js/next/components/Wizard/WizardNavInternal.d.ts +14 -0
  123. package/dist/js/next/components/Wizard/WizardNavInternal.d.ts.map +1 -0
  124. package/dist/js/next/components/Wizard/WizardNavInternal.js +54 -0
  125. package/dist/js/next/components/Wizard/WizardNavInternal.js.map +1 -0
  126. package/dist/js/next/components/Wizard/WizardNavItem.d.ts +12 -8
  127. package/dist/js/next/components/Wizard/WizardNavItem.d.ts.map +1 -1
  128. package/dist/js/next/components/Wizard/WizardNavItem.js +23 -12
  129. package/dist/js/next/components/Wizard/WizardNavItem.js.map +1 -1
  130. package/dist/js/next/components/Wizard/WizardStep.d.ts +22 -6
  131. package/dist/js/next/components/Wizard/WizardStep.d.ts.map +1 -1
  132. package/dist/js/next/components/Wizard/WizardStep.js +20 -1
  133. package/dist/js/next/components/Wizard/WizardStep.js.map +1 -1
  134. package/dist/js/next/components/Wizard/WizardToggle.d.ts +9 -15
  135. package/dist/js/next/components/Wizard/WizardToggle.d.ts.map +1 -1
  136. package/dist/js/next/components/Wizard/WizardToggle.js +15 -51
  137. package/dist/js/next/components/Wizard/WizardToggle.js.map +1 -1
  138. package/dist/js/next/components/Wizard/hooks/useWizardFooter.d.ts +2 -2
  139. package/dist/js/next/components/Wizard/hooks/useWizardFooter.d.ts.map +1 -1
  140. package/dist/js/next/components/Wizard/hooks/useWizardFooter.js +3 -3
  141. package/dist/js/next/components/Wizard/hooks/useWizardFooter.js.map +1 -1
  142. package/dist/js/next/components/Wizard/types.d.ts +37 -46
  143. package/dist/js/next/components/Wizard/types.d.ts.map +1 -1
  144. package/dist/js/next/components/Wizard/types.js +12 -3
  145. package/dist/js/next/components/Wizard/types.js.map +1 -1
  146. package/dist/js/next/components/Wizard/utils.d.ts +4 -5
  147. package/dist/js/next/components/Wizard/utils.d.ts.map +1 -1
  148. package/dist/js/next/components/Wizard/utils.js +24 -15
  149. package/dist/js/next/components/Wizard/utils.js.map +1 -1
  150. package/dist/js/next/components/index.d.ts +2 -1
  151. package/dist/js/next/components/index.d.ts.map +1 -1
  152. package/dist/js/next/components/index.js +2 -1
  153. package/dist/js/next/components/index.js.map +1 -1
  154. package/dist/umd/react-core.min.css +884 -884
  155. package/package.json +6 -6
  156. package/src/next/components/Select/Select.tsx +129 -0
  157. package/src/next/components/Select/SelectGroup.tsx +24 -0
  158. package/src/next/components/Select/SelectList.tsx +21 -0
  159. package/src/next/components/Select/SelectOption.tsx +31 -0
  160. package/src/next/components/Select/examples/Select.md +37 -0
  161. package/src/next/components/Select/examples/SelectBasic.tsx +54 -0
  162. package/src/next/components/Select/examples/SelectCheckbox.tsx +67 -0
  163. package/src/next/components/Select/examples/SelectGrouped.tsx +63 -0
  164. package/src/next/components/Select/examples/SelectMultiTypeahead.tsx +195 -0
  165. package/src/next/components/Select/examples/SelectTypeahead.tsx +191 -0
  166. package/src/next/components/Select/index.ts +4 -0
  167. package/src/next/components/Wizard/Wizard.tsx +107 -64
  168. package/src/next/components/Wizard/WizardBody.tsx +4 -4
  169. package/src/next/components/Wizard/WizardContext.tsx +117 -65
  170. package/src/next/components/Wizard/WizardFooter.tsx +39 -17
  171. package/src/next/components/Wizard/WizardHeader.tsx +6 -3
  172. package/src/next/components/Wizard/WizardNav.tsx +9 -10
  173. package/src/next/components/Wizard/WizardNavInternal.tsx +137 -0
  174. package/src/next/components/Wizard/WizardNavItem.tsx +47 -20
  175. package/src/next/components/Wizard/WizardStep.tsx +52 -7
  176. package/src/next/components/Wizard/WizardToggle.tsx +24 -142
  177. package/src/next/components/Wizard/__tests__/Wizard.test.tsx +10 -13
  178. package/src/next/components/Wizard/__tests__/WizardBody.test.tsx +3 -3
  179. package/src/next/components/Wizard/__tests__/WizardFooter.test.tsx +11 -14
  180. package/src/next/components/Wizard/__tests__/WizardStep.test.tsx +100 -0
  181. package/src/next/components/Wizard/__tests__/WizardToggle.test.tsx +4 -4
  182. package/src/next/components/Wizard/examples/Wizard.md +40 -15
  183. package/src/next/components/Wizard/examples/WizardBasic.tsx +2 -2
  184. package/src/next/components/Wizard/examples/WizardCustomNav.tsx +4 -4
  185. package/src/next/components/Wizard/examples/WizardKitchenSink.tsx +126 -60
  186. package/src/next/components/Wizard/hooks/__tests__/useWizardFooter.test.tsx +23 -34
  187. package/src/next/components/Wizard/hooks/useWizardFooter.tsx +5 -5
  188. package/src/next/components/Wizard/types.tsx +59 -53
  189. package/src/next/components/Wizard/utils.ts +25 -16
  190. package/src/next/components/index.ts +2 -1
@@ -11005,17 +11005,7 @@ ul.pf-c-list {
11005
11005
  --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
11006
11006
  }
11007
11007
 
11008
- .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11009
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
11010
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
11011
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11012
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11013
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
11014
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11015
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11016
- }
11017
-
11018
- .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
11008
+ .pf-c-login__footer, .pf-c-login__header {
11019
11009
  --pf-global--Color--100: var(--pf-global--Color--light-100);
11020
11010
  --pf-global--Color--200: var(--pf-global--Color--light-200);
11021
11011
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -11025,11 +11015,11 @@ ul.pf-c-list {
11025
11015
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11026
11016
  }
11027
11017
 
11028
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
11018
+ .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
11029
11019
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11030
11020
  }
11031
11021
 
11032
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11022
+ .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
11033
11023
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11034
11024
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11035
11025
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -11048,374 +11038,471 @@ ul.pf-c-list {
11048
11038
  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
11049
11039
  }
11050
11040
 
11051
- .pf-c-masthead {
11052
- --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
11053
- --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
11054
- --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
11055
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11056
- --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
11057
- --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
11058
- --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
11059
- --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
11060
- --pf-c-masthead--m-display-stack__main--Order: -1;
11061
- --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
11062
- --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
11063
- --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
11064
- --pf-c-masthead--m-display-stack__main--MarginRight: 0;
11065
- --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
11066
- --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
11067
- --pf-c-masthead--m-display-stack__content--GridColumn: 2;
11068
- --pf-c-masthead--m-display-stack__content--MinHeight: auto;
11069
- --pf-c-masthead--m-display-stack__content--Order: 1;
11070
- --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
11071
- --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
11072
- --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
11073
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
11074
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
11075
- --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
11076
- --pf-c-masthead--m-display-inline__main--GridColumn: 2;
11077
- --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
11078
- --pf-c-masthead--m-display-inline__main--Order: 0;
11079
- --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
11080
- --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
11081
- --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
11082
- --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
11083
- --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
11084
- --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
11085
- --pf-c-masthead--m-display-inline__content--GridColumn: 3;
11086
- --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
11087
- --pf-c-masthead--m-display-inline__content--Order: 0;
11088
- --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
11089
- --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
11090
- --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
11091
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
11092
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
11093
- --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
11094
- --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
11095
- --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11096
- --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
11097
- --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
11098
- --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
11099
- --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
11100
- --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
11101
- --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
11102
- --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
11103
- --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
11104
- --pf-c-masthead--c-toolbar__item--Display: flex;
11105
- --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
11106
- --pf-c-masthead--c-context-selector--Width: auto;
11107
- --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11108
- --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11109
- --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11110
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
11111
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
11112
- --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11113
- --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11114
- --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11115
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
11116
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
11117
- --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11118
- --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11119
- --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11120
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
11121
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
11122
- --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
11123
- --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
11124
- --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
11125
- --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
11126
- --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
11127
- --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
11128
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
11129
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11130
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11131
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11132
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11133
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11134
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11135
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11136
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11137
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11138
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11139
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11140
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11141
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11142
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11143
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11144
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11145
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11146
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11147
- color: var(--pf-global--Color--100);
11148
- position: relative;
11149
- display: grid;
11150
- grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
11151
- align-items: center;
11152
- min-width: 0;
11153
- padding-right: var(--pf-c-masthead--PaddingRight);
11154
- padding-left: var(--pf-c-masthead--PaddingLeft);
11155
- background-color: var(--pf-c-masthead--BackgroundColor);
11041
+ .pf-c-login {
11042
+ --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
11043
+ --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
11044
+ --pf-c-login--xl--BackgroundImage: none;
11045
+ --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
11046
+ --pf-c-login__container--MaxWidth: 31.25rem;
11047
+ --pf-c-login__container--xl--MaxWidth: none;
11048
+ --pf-c-login__container--PaddingLeft: 6.125rem;
11049
+ --pf-c-login__container--PaddingRight: 6.125rem;
11050
+ --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
11051
+ --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
11052
+ --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
11053
+ --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
11054
+ --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
11055
+ --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
11056
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
11057
+ --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
11058
+ --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11059
+ --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
11060
+ --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
11061
+ --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
11062
+ --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
11063
+ --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
11064
+ --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
11065
+ --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
11066
+ --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
11067
+ --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
11068
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
11069
+ --pf-c-login__main-header-desc--md--MarginBottom: 0;
11070
+ --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
11071
+ --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
11072
+ --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
11073
+ --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
11074
+ --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
11075
+ --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
11076
+ --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
11077
+ --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
11078
+ --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
11079
+ --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
11080
+ --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
11081
+ --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
11082
+ --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
11083
+ --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
11084
+ --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
11085
+ --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
11086
+ --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
11087
+ --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
11088
+ --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
11089
+ --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
11090
+ --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
11091
+ --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
11092
+ --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
11093
+ --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
11094
+ --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
11095
+ --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
11096
+ --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
11097
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
11098
+ --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
11099
+ display: flex;
11100
+ justify-content: center;
11101
+ min-height: 100vh;
11102
+ padding-top: var(--pf-c-login--PaddingTop);
11103
+ padding-bottom: var(--pf-c-login--PaddingBottom);
11156
11104
  }
11157
11105
 
11158
- @media screen and (min-width: 768px) {
11159
- .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
11160
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11161
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11162
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11163
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11164
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11165
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11166
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11167
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11168
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11169
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11170
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11171
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11172
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11173
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11174
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11175
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11176
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11106
+ @media (min-width: 1200px) {
11107
+ .pf-c-login {
11108
+ --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
11177
11109
  }
11178
11110
  }
11179
- @media screen and (min-width: 1200px) {
11180
- .pf-c-masthead {
11181
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
11111
+ @media (min-width: 576px) {
11112
+ .pf-c-login {
11113
+ --pf-c-login__header--PaddingRight: 0;
11114
+ --pf-c-login__header--PaddingLeft: 0;
11182
11115
  }
11183
11116
  }
11184
- .pf-c-masthead.pf-m-light {
11185
- color: var(--pf-global--Color--100);
11186
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
11187
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
11117
+ @media (min-width: 1200px) {
11118
+ .pf-c-login {
11119
+ --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
11120
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
11121
+ }
11188
11122
  }
11189
-
11190
- .pf-c-masthead.pf-m-light-200 {
11191
- color: var(--pf-global--Color--100);
11192
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
11193
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
11123
+ @media (min-width: 1200px) {
11124
+ .pf-c-login {
11125
+ --pf-c-login__main--MarginBottom: 0;
11126
+ }
11194
11127
  }
11195
-
11196
- .pf-c-masthead .pf-c-toolbar {
11197
- --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
11198
- --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
11199
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
11200
- --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
11201
- --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
11202
- --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
11203
- width: 100%;
11128
+ @media (min-width: 768px) {
11129
+ .pf-c-login {
11130
+ --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
11131
+ --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
11132
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
11133
+ }
11204
11134
  }
11205
-
11206
- .pf-c-masthead .pf-c-toolbar__content-section {
11207
- flex-wrap: nowrap;
11135
+ @media (min-width: 768px) {
11136
+ .pf-c-login {
11137
+ --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
11138
+ --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
11139
+ }
11208
11140
  }
11209
-
11210
- .pf-c-masthead .pf-c-toolbar__expandable-content {
11211
- border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
11141
+ @media (min-width: 576px) {
11142
+ .pf-c-login {
11143
+ --pf-c-login__footer--PaddingRight: 0;
11144
+ --pf-c-login__footer--PaddingLeft: 0;
11145
+ }
11212
11146
  }
11213
-
11214
- .pf-c-masthead .pf-c-menu-toggle {
11215
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
11216
- --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
11217
- --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
11147
+ @media (min-width: 1200px) {
11148
+ .pf-c-login {
11149
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
11150
+ }
11218
11151
  }
11219
-
11220
- .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
11221
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
11222
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
11152
+ @media (min-width: 1200px) {
11153
+ .pf-c-login {
11154
+ background-image: var(--pf-c-login--xl--BackgroundImage);
11155
+ }
11223
11156
  }
11224
-
11225
- .pf-c-masthead .pf-c-context-selector {
11226
- --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
11227
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
11228
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
11229
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
11157
+ @media (min-width: 576px) {
11158
+ .pf-c-login {
11159
+ align-items: center;
11160
+ }
11230
11161
  }
11231
-
11232
- .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
11233
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
11234
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
11162
+ .pf-c-login__container {
11163
+ width: 100%;
11164
+ max-width: var(--pf-c-login__container--MaxWidth);
11235
11165
  }
11236
11166
 
11237
- .pf-c-masthead .pf-c-dropdown {
11238
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
11239
- --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
11240
- --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
11167
+ @media (min-width: 1200px) {
11168
+ .pf-c-login__container {
11169
+ display: grid;
11170
+ justify-content: center;
11171
+ grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
11172
+ grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
11173
+ grid-template-areas: "main header" "main footer" "main .";
11174
+ padding-right: var(--pf-c-login__container--PaddingRight);
11175
+ padding-left: var(--pf-c-login__container--PaddingLeft);
11176
+ }
11241
11177
  }
11242
-
11243
- .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
11244
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
11245
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
11178
+ .pf-c-login__header {
11179
+ color: var(--pf-global--Color--100);
11180
+ grid-area: header;
11181
+ padding-right: var(--pf-c-login__header--PaddingRight);
11182
+ padding-left: var(--pf-c-login__header--PaddingLeft);
11246
11183
  }
11247
11184
 
11248
- .pf-c-masthead .pf-c-nav {
11249
- align-self: stretch;
11185
+ @media (min-width: 1200px) {
11186
+ .pf-c-login__header {
11187
+ margin-top: var(--pf-c-login__header--xl--MarginTop);
11188
+ }
11250
11189
  }
11251
-
11252
- .pf-c-masthead .pf-c-button.pf-m-plain {
11253
- color: var(--pf-c-button--m-plain--Color);
11190
+ .pf-c-login__header .pf-c-brand {
11191
+ margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
11254
11192
  }
11255
11193
 
11256
- .pf-c-masthead__main {
11257
- position: relative;
11258
- display: flex;
11259
- flex-basis: var(--pf-c-masthead__main--FlexBasis);
11260
- align-items: center;
11261
- align-self: stretch;
11262
- order: var(--pf-c-masthead__main--Order);
11263
- min-height: var(--pf-c-masthead__main--MinHeight);
11264
- padding-top: var(--pf-c-masthead__main--PaddingTop);
11265
- padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
11266
- margin-right: var(--pf-c-masthead__main--MarginRight);
11267
- grid-column: var(--pf-c-masthead__main--GridColumn);
11194
+ .pf-c-login__main {
11195
+ align-self: start;
11196
+ margin-bottom: var(--pf-c-login__main--MarginBottom);
11197
+ background-color: var(--pf-c-login__main--BackgroundColor);
11198
+ grid-area: main;
11268
11199
  }
11269
11200
 
11270
- .pf-c-masthead__main::before {
11271
- position: absolute;
11272
- right: var(--pf-c-masthead__main--before--Right);
11273
- bottom: 0;
11274
- left: var(--pf-c-masthead__main--before--Left);
11275
- content: "";
11276
- border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
11201
+ .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
11202
+ padding-top: var(--pf-c-login__main-header--PaddingTop);
11277
11203
  }
11278
11204
 
11279
- .pf-c-masthead__main:last-child {
11280
- --pf-c-masthead__main--MarginRight: 0;
11205
+ .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
11206
+ padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
11281
11207
  }
11282
11208
 
11283
- .pf-c-masthead__content {
11284
- display: flex;
11285
- flex-grow: 1;
11209
+ .pf-c-login__main-header {
11210
+ display: grid;
11211
+ grid-template-columns: 100%;
11212
+ column-gap: var(--pf-c-login__main-header--ColumnGap);
11213
+ row-gap: var(--pf-c-login__main-header--RowGap);
11286
11214
  align-items: center;
11287
- align-self: stretch;
11288
- order: var(--pf-c-masthead__content--Order);
11289
- min-height: var(--pf-c-masthead__content--MinHeight);
11290
- padding-top: var(--pf-c-masthead__content--PaddingTop);
11291
- padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
11292
- margin-left: var(--pf-c-masthead__content--MarginLeft);
11293
- grid-column: var(--pf-c-masthead__content--GridColumn);
11294
- grid-column-end: -1;
11295
- flex-shrink: 1;
11215
+ padding: var(--pf-c-login__main-header--PaddingTop) var(--pf-c-login__main-header--PaddingRight) var(--pf-c-login__main-header--PaddingBottom) var(--pf-c-login__main-header--PaddingLeft);
11296
11216
  }
11297
11217
 
11298
- .pf-c-masthead__content:only-child {
11299
- --pf-c-masthead__content--MarginLeft: 0;
11218
+ @media (min-width: 768px) {
11219
+ .pf-c-login__main-header {
11220
+ grid-template-columns: 1fr auto;
11221
+ }
11222
+ }
11223
+ .pf-c-login__main-header-utilities,
11224
+ .pf-c-login__main-header .pf-c-dropdown {
11225
+ grid-column: auto;
11226
+ grid-row: auto;
11300
11227
  }
11301
11228
 
11302
- .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
11303
- margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
11304
- margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
11229
+ @media (min-width: 768px) {
11230
+ .pf-c-login__main-header-utilities,
11231
+ .pf-c-login__main-header .pf-c-dropdown {
11232
+ grid-column: 2/3;
11233
+ grid-row: 1;
11234
+ }
11235
+ }
11236
+ .pf-c-login__main-header-utilities .pf-c-dropdown {
11237
+ grid-column: auto;
11238
+ grid-row: auto;
11305
11239
  }
11306
11240
 
11307
- .pf-c-masthead__toggle ~ .pf-c-masthead__content {
11308
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
11241
+ .pf-c-login__main-header-desc {
11242
+ margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
11243
+ font-size: var(--pf-c-login__main-header-desc--FontSize);
11244
+ grid-column: 1/-1;
11309
11245
  }
11310
11246
 
11311
- .pf-c-masthead__main,
11312
- .pf-c-masthead__brand,
11313
- .pf-c-masthead__content {
11314
- min-width: 0;
11247
+ .pf-c-login__main-body {
11248
+ padding-right: var(--pf-c-login__main-body--PaddingRight);
11249
+ padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
11250
+ padding-left: var(--pf-c-login__main-body--PaddingLeft);
11315
11251
  }
11316
11252
 
11317
- .pf-c-masthead__brand {
11318
- display: inline-flex;
11319
- align-self: center;
11253
+ .pf-c-login__main-footer {
11254
+ display: flex;
11255
+ flex-wrap: wrap;
11320
11256
  }
11321
11257
 
11322
- .pf-c-masthead__toggle {
11323
- grid-column: var(--pf-c-masthead__toggle--GridColumn);
11324
- align-self: center;
11325
- margin-right: var(--pf-c-masthead__toggle--MarginRight);
11326
- margin-left: var(--pf-c-masthead__toggle--MarginLeft);
11258
+ .pf-c-login__main-footer .pf-c-title {
11259
+ margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
11260
+ text-align: center;
11327
11261
  }
11328
11262
 
11329
- .pf-c-masthead__toggle .pf-c-button {
11330
- --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
11263
+ .pf-c-login__main-footer > * {
11264
+ flex-basis: 100%;
11331
11265
  }
11332
11266
 
11333
- .pf-c-masthead.pf-m-display-stack {
11334
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11335
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11336
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11337
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11338
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11339
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11340
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11341
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11342
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11343
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11344
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11345
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11346
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11347
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11348
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11349
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11350
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11267
+ .pf-c-login__main-footer-links {
11268
+ display: flex;
11269
+ flex-wrap: wrap;
11270
+ justify-content: center;
11271
+ padding: var(--pf-c-login__main-footer-links--PaddingTop) var(--pf-c-login__main-footer-links--PaddingRight) var(--pf-c-login__main-footer-links--PaddingBottom) var(--pf-c-login__main-footer-links--PaddingLeft);
11351
11272
  }
11352
11273
 
11353
- .pf-c-masthead.pf-m-display-inline {
11354
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11355
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11356
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11357
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11358
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11359
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11360
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11361
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11362
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11363
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11364
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11365
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11366
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11367
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11368
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11369
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11370
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11274
+ .pf-c-login__main-footer-links-item {
11275
+ padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
11276
+ padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
11277
+ margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
11371
11278
  }
11372
11279
 
11373
- .pf-c-masthead.pf-m-inset-none {
11374
- --pf-c-masthead--inset: 0;
11280
+ .pf-c-login__main-footer-links-item-link svg {
11281
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
11282
+ width: 100%;
11283
+ max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
11284
+ height: 100%;
11285
+ max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
11375
11286
  }
11376
11287
 
11377
- .pf-c-masthead.pf-m-inset-sm {
11378
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11288
+ .pf-c-login__main-footer-links-item-link:hover svg {
11289
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
11379
11290
  }
11380
11291
 
11381
- .pf-c-masthead.pf-m-inset-md {
11382
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11292
+ .pf-c-login__main-footer-band {
11293
+ padding: var(--pf-c-login__main-footer-band--PaddingTop) var(--pf-c-login__main-footer-band--PaddingRight) var(--pf-c-login__main-footer-band--PaddingBottom) var(--pf-c-login__main-footer-band--PaddingLeft);
11294
+ text-align: center;
11295
+ background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
11383
11296
  }
11384
11297
 
11385
- .pf-c-masthead.pf-m-inset-lg {
11386
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11298
+ .pf-c-login__main-footer-band > * + * {
11299
+ padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
11387
11300
  }
11388
11301
 
11389
- .pf-c-masthead.pf-m-inset-xl {
11390
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11302
+ .pf-c-login__footer {
11303
+ color: var(--pf-global--Color--100);
11304
+ grid-area: footer;
11305
+ padding-right: var(--pf-c-login__footer--PaddingRight);
11306
+ padding-left: var(--pf-c-login__footer--PaddingLeft);
11391
11307
  }
11392
11308
 
11393
- .pf-c-masthead.pf-m-inset-2xl {
11394
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11309
+ .pf-c-login__footer .pf-c-list a {
11310
+ color: unset;
11395
11311
  }
11396
11312
 
11397
- @media (min-width: 576px) {
11398
- .pf-c-masthead.pf-m-display-stack-on-sm {
11399
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11400
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11401
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11402
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11403
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11404
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11405
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11406
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11407
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11408
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11409
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11410
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11411
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11412
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11413
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11414
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11415
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11416
- }
11313
+ .pf-c-login__footer .pf-c-list:not(:only-child) {
11314
+ padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
11315
+ }
11417
11316
 
11418
- .pf-c-masthead.pf-m-display-inline-on-sm {
11317
+ :where(.pf-theme-dark) .pf-c-login__header,
11318
+ :where(.pf-theme-dark) .pf-c-login__footer {
11319
+ --pf-global--Color--100: #e0e0e0;
11320
+ --pf-global--Color--200: #aaabac;
11321
+ --pf-global--BorderColor--100: #444548;
11322
+ --pf-global--primary-color--100: #1fa7f8;
11323
+ --pf-global--link--Color: #1fa7f8;
11324
+ --pf-global--link--Color--hover: #73bcf7;
11325
+ --pf-global--BackgroundColor--100: #1b1d21;
11326
+ }
11327
+
11328
+ :where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
11329
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
11330
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11331
+ }
11332
+
11333
+ :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
11334
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
11335
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11336
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11337
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11338
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11339
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11340
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11341
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11342
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11343
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11344
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11345
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11346
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11347
+ }
11348
+
11349
+ :where(.pf-theme-dark) .pf-c-login__header,
11350
+ :where(.pf-theme-dark) .pf-c-login__footer {
11351
+ color: var(--pf-global--Color--100);
11352
+ }
11353
+
11354
+ .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11355
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
11356
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
11357
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11358
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11359
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
11360
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11361
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11362
+ }
11363
+
11364
+ .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
11365
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
11366
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
11367
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11368
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11369
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
11370
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11371
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11372
+ }
11373
+
11374
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
11375
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11376
+ }
11377
+
11378
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11379
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11380
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11381
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
11382
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
11383
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11384
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11385
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11386
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11387
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
11388
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
11389
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
11390
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
11391
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
11392
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
11393
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
11394
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
11395
+ }
11396
+
11397
+ .pf-c-masthead {
11398
+ --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
11399
+ --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
11400
+ --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
11401
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11402
+ --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
11403
+ --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
11404
+ --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
11405
+ --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
11406
+ --pf-c-masthead--m-display-stack__main--Order: -1;
11407
+ --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
11408
+ --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
11409
+ --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
11410
+ --pf-c-masthead--m-display-stack__main--MarginRight: 0;
11411
+ --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
11412
+ --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
11413
+ --pf-c-masthead--m-display-stack__content--GridColumn: 2;
11414
+ --pf-c-masthead--m-display-stack__content--MinHeight: auto;
11415
+ --pf-c-masthead--m-display-stack__content--Order: 1;
11416
+ --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
11417
+ --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
11418
+ --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
11419
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
11420
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
11421
+ --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
11422
+ --pf-c-masthead--m-display-inline__main--GridColumn: 2;
11423
+ --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
11424
+ --pf-c-masthead--m-display-inline__main--Order: 0;
11425
+ --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
11426
+ --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
11427
+ --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
11428
+ --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
11429
+ --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
11430
+ --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
11431
+ --pf-c-masthead--m-display-inline__content--GridColumn: 3;
11432
+ --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
11433
+ --pf-c-masthead--m-display-inline__content--Order: 0;
11434
+ --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
11435
+ --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
11436
+ --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
11437
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
11438
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
11439
+ --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
11440
+ --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
11441
+ --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11442
+ --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
11443
+ --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
11444
+ --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
11445
+ --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
11446
+ --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
11447
+ --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
11448
+ --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
11449
+ --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
11450
+ --pf-c-masthead--c-toolbar__item--Display: flex;
11451
+ --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
11452
+ --pf-c-masthead--c-context-selector--Width: auto;
11453
+ --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11454
+ --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11455
+ --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11456
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
11457
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
11458
+ --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11459
+ --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11460
+ --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11461
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
11462
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
11463
+ --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11464
+ --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11465
+ --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11466
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
11467
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
11468
+ --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
11469
+ --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
11470
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
11471
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
11472
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
11473
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
11474
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
11475
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11476
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11477
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11478
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11479
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11480
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11481
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11482
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11483
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11484
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11485
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11486
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11487
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11488
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11489
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11490
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11491
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11492
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11493
+ color: var(--pf-global--Color--100);
11494
+ position: relative;
11495
+ display: grid;
11496
+ grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
11497
+ align-items: center;
11498
+ min-width: 0;
11499
+ padding-right: var(--pf-c-masthead--PaddingRight);
11500
+ padding-left: var(--pf-c-masthead--PaddingLeft);
11501
+ background-color: var(--pf-c-masthead--BackgroundColor);
11502
+ }
11503
+
11504
+ @media screen and (min-width: 768px) {
11505
+ .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
11419
11506
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11420
11507
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11421
11508
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -11435,644 +11522,555 @@ ul.pf-c-list {
11435
11522
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11436
11523
  }
11437
11524
  }
11438
- @media (min-width: 576px) {
11439
- .pf-c-masthead.pf-m-inset-none-on-sm {
11440
- --pf-c-masthead--inset: 0;
11441
- }
11442
-
11443
- .pf-c-masthead.pf-m-inset-sm-on-sm {
11444
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11525
+ @media screen and (min-width: 1200px) {
11526
+ .pf-c-masthead {
11527
+ --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
11445
11528
  }
11529
+ }
11530
+ .pf-c-masthead.pf-m-light {
11531
+ color: var(--pf-global--Color--100);
11532
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
11533
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
11534
+ }
11446
11535
 
11447
- .pf-c-masthead.pf-m-inset-md-on-sm {
11448
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11449
- }
11536
+ .pf-c-masthead.pf-m-light-200 {
11537
+ color: var(--pf-global--Color--100);
11538
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
11539
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
11540
+ }
11450
11541
 
11451
- .pf-c-masthead.pf-m-inset-lg-on-sm {
11452
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11453
- }
11542
+ .pf-c-masthead .pf-c-toolbar {
11543
+ --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
11544
+ --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
11545
+ --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
11546
+ --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
11547
+ --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
11548
+ --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
11549
+ width: 100%;
11550
+ }
11454
11551
 
11455
- .pf-c-masthead.pf-m-inset-xl-on-sm {
11456
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11457
- }
11552
+ .pf-c-masthead .pf-c-toolbar__content-section {
11553
+ flex-wrap: nowrap;
11554
+ }
11458
11555
 
11459
- .pf-c-masthead.pf-m-inset-2xl-on-sm {
11460
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11461
- }
11556
+ .pf-c-masthead .pf-c-toolbar__expandable-content {
11557
+ border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
11462
11558
  }
11463
- @media (min-width: 768px) {
11464
- .pf-c-masthead.pf-m-display-stack-on-md {
11465
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11466
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11467
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11468
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11469
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11470
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11471
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11472
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11473
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11474
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11475
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11476
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11477
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11478
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11479
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11480
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11481
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11482
- }
11483
11559
 
11484
- .pf-c-masthead.pf-m-display-inline-on-md {
11485
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11486
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11487
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11488
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11489
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11490
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11491
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11492
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11493
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11494
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11495
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11496
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11497
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11498
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11499
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11500
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11501
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11502
- }
11560
+ .pf-c-masthead .pf-c-menu-toggle {
11561
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
11562
+ --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
11563
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
11503
11564
  }
11504
- @media (min-width: 768px) {
11505
- .pf-c-masthead.pf-m-inset-none-on-md {
11506
- --pf-c-masthead--inset: 0;
11507
- }
11508
-
11509
- .pf-c-masthead.pf-m-inset-sm-on-md {
11510
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11511
- }
11512
-
11513
- .pf-c-masthead.pf-m-inset-md-on-md {
11514
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11515
- }
11516
-
11517
- .pf-c-masthead.pf-m-inset-lg-on-md {
11518
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11519
- }
11520
-
11521
- .pf-c-masthead.pf-m-inset-xl-on-md {
11522
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11523
- }
11524
11565
 
11525
- .pf-c-masthead.pf-m-inset-2xl-on-md {
11526
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11527
- }
11566
+ .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
11567
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
11568
+ --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
11528
11569
  }
11529
- @media (min-width: 992px) {
11530
- .pf-c-masthead.pf-m-display-stack-on-lg {
11531
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11532
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11533
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11534
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11535
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11536
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11537
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11538
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11539
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11540
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11541
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11542
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11543
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11544
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11545
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11546
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11547
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11548
- }
11549
11570
 
11550
- .pf-c-masthead.pf-m-display-inline-on-lg {
11551
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11552
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11553
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11554
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11555
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11556
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11557
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11558
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11559
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11560
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11561
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11562
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11563
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11564
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11565
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11566
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11567
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11568
- }
11571
+ .pf-c-masthead .pf-c-context-selector {
11572
+ --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
11573
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
11574
+ --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
11575
+ --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
11569
11576
  }
11570
- @media (min-width: 992px) {
11571
- .pf-c-masthead.pf-m-inset-none-on-lg {
11572
- --pf-c-masthead--inset: 0;
11573
- }
11574
-
11575
- .pf-c-masthead.pf-m-inset-sm-on-lg {
11576
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11577
- }
11578
-
11579
- .pf-c-masthead.pf-m-inset-md-on-lg {
11580
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11581
- }
11582
-
11583
- .pf-c-masthead.pf-m-inset-lg-on-lg {
11584
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11585
- }
11586
-
11587
- .pf-c-masthead.pf-m-inset-xl-on-lg {
11588
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11589
- }
11590
11577
 
11591
- .pf-c-masthead.pf-m-inset-2xl-on-lg {
11592
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11593
- }
11578
+ .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
11579
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
11580
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
11594
11581
  }
11595
- @media (min-width: 1200px) {
11596
- .pf-c-masthead.pf-m-display-stack-on-xl {
11597
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11598
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11599
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11600
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11601
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11602
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11603
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11604
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11605
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11606
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11607
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11608
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11609
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11610
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11611
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11612
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11613
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11614
- }
11615
11582
 
11616
- .pf-c-masthead.pf-m-display-inline-on-xl {
11617
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11618
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11619
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11620
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11621
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11622
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11623
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11624
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11625
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11626
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11627
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11628
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11629
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11630
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11631
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11632
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11633
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11634
- }
11583
+ .pf-c-masthead .pf-c-dropdown {
11584
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
11585
+ --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
11586
+ --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
11635
11587
  }
11636
- @media (min-width: 1200px) {
11637
- .pf-c-masthead.pf-m-inset-none-on-xl {
11638
- --pf-c-masthead--inset: 0;
11639
- }
11640
-
11641
- .pf-c-masthead.pf-m-inset-sm-on-xl {
11642
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11643
- }
11644
-
11645
- .pf-c-masthead.pf-m-inset-md-on-xl {
11646
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11647
- }
11648
11588
 
11649
- .pf-c-masthead.pf-m-inset-lg-on-xl {
11650
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11651
- }
11652
-
11653
- .pf-c-masthead.pf-m-inset-xl-on-xl {
11654
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11655
- }
11656
-
11657
- .pf-c-masthead.pf-m-inset-2xl-on-xl {
11658
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11659
- }
11589
+ .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
11590
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
11591
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
11660
11592
  }
11661
- @media (min-width: 1450px) {
11662
- .pf-c-masthead.pf-m-display-stack-on-2xl {
11663
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11664
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11665
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11666
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11667
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11668
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11669
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11670
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11671
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11672
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11673
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11674
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11675
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11676
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11677
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11678
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11679
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11680
- }
11681
11593
 
11682
- .pf-c-masthead.pf-m-display-inline-on-2xl {
11683
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11684
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11685
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11686
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11687
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11688
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11689
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11690
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11691
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11692
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11693
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11694
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11695
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11696
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11697
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11698
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11699
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11700
- }
11594
+ .pf-c-masthead .pf-c-nav {
11595
+ align-self: stretch;
11701
11596
  }
11702
- @media (min-width: 1450px) {
11703
- .pf-c-masthead.pf-m-inset-none-on-2xl {
11704
- --pf-c-masthead--inset: 0;
11705
- }
11706
11597
 
11707
- .pf-c-masthead.pf-m-inset-sm-on-2xl {
11708
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11709
- }
11598
+ .pf-c-masthead .pf-c-button.pf-m-plain {
11599
+ color: var(--pf-c-button--m-plain--Color);
11600
+ }
11710
11601
 
11711
- .pf-c-masthead.pf-m-inset-md-on-2xl {
11712
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11713
- }
11602
+ .pf-c-masthead__main {
11603
+ position: relative;
11604
+ display: flex;
11605
+ flex-basis: var(--pf-c-masthead__main--FlexBasis);
11606
+ align-items: center;
11607
+ align-self: stretch;
11608
+ order: var(--pf-c-masthead__main--Order);
11609
+ min-height: var(--pf-c-masthead__main--MinHeight);
11610
+ padding-top: var(--pf-c-masthead__main--PaddingTop);
11611
+ padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
11612
+ margin-right: var(--pf-c-masthead__main--MarginRight);
11613
+ grid-column: var(--pf-c-masthead__main--GridColumn);
11614
+ }
11714
11615
 
11715
- .pf-c-masthead.pf-m-inset-lg-on-2xl {
11716
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11717
- }
11616
+ .pf-c-masthead__main::before {
11617
+ position: absolute;
11618
+ right: var(--pf-c-masthead__main--before--Right);
11619
+ bottom: 0;
11620
+ left: var(--pf-c-masthead__main--before--Left);
11621
+ content: "";
11622
+ border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
11623
+ }
11718
11624
 
11719
- .pf-c-masthead.pf-m-inset-xl-on-2xl {
11720
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11721
- }
11625
+ .pf-c-masthead__main:last-child {
11626
+ --pf-c-masthead__main--MarginRight: 0;
11627
+ }
11722
11628
 
11723
- .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11724
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11725
- }
11629
+ .pf-c-masthead__content {
11630
+ display: flex;
11631
+ flex-grow: 1;
11632
+ align-items: center;
11633
+ align-self: stretch;
11634
+ order: var(--pf-c-masthead__content--Order);
11635
+ min-height: var(--pf-c-masthead__content--MinHeight);
11636
+ padding-top: var(--pf-c-masthead__content--PaddingTop);
11637
+ padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
11638
+ margin-left: var(--pf-c-masthead__content--MarginLeft);
11639
+ grid-column: var(--pf-c-masthead__content--GridColumn);
11640
+ grid-column-end: -1;
11641
+ flex-shrink: 1;
11726
11642
  }
11727
- :where(.pf-theme-dark) .pf-c-masthead {
11728
- --pf-global--Color--100: #e0e0e0;
11729
- --pf-global--Color--200: #aaabac;
11730
- --pf-global--BorderColor--100: #444548;
11731
- --pf-global--primary-color--100: #1fa7f8;
11732
- --pf-global--link--Color: #1fa7f8;
11733
- --pf-global--link--Color--hover: #73bcf7;
11734
- --pf-global--BackgroundColor--100: #1b1d21;
11643
+
11644
+ .pf-c-masthead__content:only-child {
11645
+ --pf-c-masthead__content--MarginLeft: 0;
11735
11646
  }
11736
11647
 
11737
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
11738
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11648
+ .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
11649
+ margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
11650
+ margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
11739
11651
  }
11740
11652
 
11741
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
11742
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11743
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11744
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11745
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11746
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11747
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11748
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11749
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11750
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11751
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11752
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11753
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11653
+ .pf-c-masthead__toggle ~ .pf-c-masthead__content {
11654
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
11754
11655
  }
11755
11656
 
11756
- :where(.pf-theme-dark) .pf-c-masthead {
11757
- --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
11758
- color: var(--pf-global--Color--100);
11657
+ .pf-c-masthead__main,
11658
+ .pf-c-masthead__brand,
11659
+ .pf-c-masthead__content {
11660
+ min-width: 0;
11759
11661
  }
11760
11662
 
11761
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11762
- --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
11663
+ .pf-c-masthead__brand {
11664
+ display: inline-flex;
11665
+ align-self: center;
11763
11666
  }
11764
11667
 
11765
- .pf-c-login__footer, .pf-c-login__header {
11766
- --pf-global--Color--100: var(--pf-global--Color--light-100);
11767
- --pf-global--Color--200: var(--pf-global--Color--light-200);
11768
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11769
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11770
- --pf-global--link--Color: var(--pf-global--link--Color--light);
11771
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11772
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11668
+ .pf-c-masthead__toggle {
11669
+ grid-column: var(--pf-c-masthead__toggle--GridColumn);
11670
+ align-self: center;
11671
+ margin-right: var(--pf-c-masthead__toggle--MarginRight);
11672
+ margin-left: var(--pf-c-masthead__toggle--MarginLeft);
11773
11673
  }
11774
11674
 
11775
- .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
11776
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11675
+ .pf-c-masthead__toggle .pf-c-button {
11676
+ --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
11777
11677
  }
11778
11678
 
11779
- .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
11780
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11781
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11782
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
11783
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
11784
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11785
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11786
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11787
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11788
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
11789
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
11790
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
11791
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
11792
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
11793
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
11794
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
11795
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
11679
+ .pf-c-masthead.pf-m-display-stack {
11680
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11681
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11682
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11683
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11684
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11685
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11686
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11687
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11688
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11689
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11690
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11691
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11692
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11693
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11694
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11695
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11696
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11796
11697
  }
11797
11698
 
11798
- .pf-c-login {
11799
- --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
11800
- --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
11801
- --pf-c-login--xl--BackgroundImage: none;
11802
- --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
11803
- --pf-c-login__container--MaxWidth: 31.25rem;
11804
- --pf-c-login__container--xl--MaxWidth: none;
11805
- --pf-c-login__container--PaddingLeft: 6.125rem;
11806
- --pf-c-login__container--PaddingRight: 6.125rem;
11807
- --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
11808
- --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
11809
- --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
11810
- --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
11811
- --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
11812
- --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
11813
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
11814
- --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
11815
- --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11816
- --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
11817
- --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
11818
- --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
11819
- --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
11820
- --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
11821
- --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
11822
- --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
11823
- --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
11824
- --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
11825
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
11826
- --pf-c-login__main-header-desc--md--MarginBottom: 0;
11827
- --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
11828
- --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
11829
- --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
11830
- --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
11831
- --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
11832
- --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
11833
- --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
11834
- --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
11835
- --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
11836
- --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
11837
- --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
11838
- --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
11839
- --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
11840
- --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
11841
- --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
11842
- --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
11843
- --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
11844
- --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
11845
- --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
11846
- --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
11847
- --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
11848
- --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
11849
- --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
11850
- --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
11851
- --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
11852
- --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
11853
- --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
11854
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
11855
- --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
11856
- display: flex;
11857
- justify-content: center;
11858
- min-height: 100vh;
11859
- padding-top: var(--pf-c-login--PaddingTop);
11860
- padding-bottom: var(--pf-c-login--PaddingBottom);
11699
+ .pf-c-masthead.pf-m-display-inline {
11700
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11701
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11702
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11703
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11704
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11705
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11706
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11707
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11708
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11709
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11710
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11711
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11712
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11713
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11714
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11715
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11716
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11861
11717
  }
11862
11718
 
11863
- @media (min-width: 1200px) {
11864
- .pf-c-login {
11865
- --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
11866
- }
11719
+ .pf-c-masthead.pf-m-inset-none {
11720
+ --pf-c-masthead--inset: 0;
11867
11721
  }
11868
- @media (min-width: 576px) {
11869
- .pf-c-login {
11870
- --pf-c-login__header--PaddingRight: 0;
11871
- --pf-c-login__header--PaddingLeft: 0;
11872
- }
11722
+
11723
+ .pf-c-masthead.pf-m-inset-sm {
11724
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11873
11725
  }
11874
- @media (min-width: 1200px) {
11875
- .pf-c-login {
11876
- --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
11877
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
11878
- }
11726
+
11727
+ .pf-c-masthead.pf-m-inset-md {
11728
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11879
11729
  }
11880
- @media (min-width: 1200px) {
11881
- .pf-c-login {
11882
- --pf-c-login__main--MarginBottom: 0;
11883
- }
11730
+
11731
+ .pf-c-masthead.pf-m-inset-lg {
11732
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11884
11733
  }
11885
- @media (min-width: 768px) {
11886
- .pf-c-login {
11887
- --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
11888
- --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
11889
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
11890
- }
11734
+
11735
+ .pf-c-masthead.pf-m-inset-xl {
11736
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11891
11737
  }
11892
- @media (min-width: 768px) {
11893
- .pf-c-login {
11894
- --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
11895
- --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
11896
- }
11738
+
11739
+ .pf-c-masthead.pf-m-inset-2xl {
11740
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11897
11741
  }
11742
+
11898
11743
  @media (min-width: 576px) {
11899
- .pf-c-login {
11900
- --pf-c-login__footer--PaddingRight: 0;
11901
- --pf-c-login__footer--PaddingLeft: 0;
11902
- }
11903
- }
11904
- @media (min-width: 1200px) {
11905
- .pf-c-login {
11906
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
11744
+ .pf-c-masthead.pf-m-display-stack-on-sm {
11745
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11746
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11747
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11748
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11749
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11750
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11751
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11752
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11753
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11754
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11755
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11756
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11757
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11758
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11759
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11760
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11761
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11907
11762
  }
11908
- }
11909
- @media (min-width: 1200px) {
11910
- .pf-c-login {
11911
- background-image: var(--pf-c-login--xl--BackgroundImage);
11763
+
11764
+ .pf-c-masthead.pf-m-display-inline-on-sm {
11765
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11766
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11767
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11768
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11769
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11770
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11771
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11772
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11773
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11774
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11775
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11776
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11777
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11778
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11779
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11780
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11781
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11912
11782
  }
11913
11783
  }
11914
11784
  @media (min-width: 576px) {
11915
- .pf-c-login {
11916
- align-items: center;
11785
+ .pf-c-masthead.pf-m-inset-none-on-sm {
11786
+ --pf-c-masthead--inset: 0;
11917
11787
  }
11918
- }
11919
- .pf-c-login__container {
11920
- width: 100%;
11921
- max-width: var(--pf-c-login__container--MaxWidth);
11922
- }
11923
11788
 
11924
- @media (min-width: 1200px) {
11925
- .pf-c-login__container {
11926
- display: grid;
11927
- justify-content: center;
11928
- grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
11929
- grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
11930
- grid-template-areas: "main header" "main footer" "main .";
11931
- padding-right: var(--pf-c-login__container--PaddingRight);
11932
- padding-left: var(--pf-c-login__container--PaddingLeft);
11789
+ .pf-c-masthead.pf-m-inset-sm-on-sm {
11790
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11933
11791
  }
11934
- }
11935
- .pf-c-login__header {
11936
- color: var(--pf-global--Color--100);
11937
- grid-area: header;
11938
- padding-right: var(--pf-c-login__header--PaddingRight);
11939
- padding-left: var(--pf-c-login__header--PaddingLeft);
11940
- }
11941
11792
 
11942
- @media (min-width: 1200px) {
11943
- .pf-c-login__header {
11944
- margin-top: var(--pf-c-login__header--xl--MarginTop);
11793
+ .pf-c-masthead.pf-m-inset-md-on-sm {
11794
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11945
11795
  }
11946
- }
11947
- .pf-c-login__header .pf-c-brand {
11948
- margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
11949
- }
11950
11796
 
11951
- .pf-c-login__main {
11952
- align-self: start;
11953
- margin-bottom: var(--pf-c-login__main--MarginBottom);
11954
- background-color: var(--pf-c-login__main--BackgroundColor);
11955
- grid-area: main;
11797
+ .pf-c-masthead.pf-m-inset-lg-on-sm {
11798
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11799
+ }
11800
+
11801
+ .pf-c-masthead.pf-m-inset-xl-on-sm {
11802
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11803
+ }
11804
+
11805
+ .pf-c-masthead.pf-m-inset-2xl-on-sm {
11806
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11807
+ }
11956
11808
  }
11809
+ @media (min-width: 768px) {
11810
+ .pf-c-masthead.pf-m-display-stack-on-md {
11811
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11812
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11813
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11814
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11815
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11816
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11817
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11818
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11819
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11820
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11821
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11822
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11823
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11824
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11825
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11826
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11827
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11828
+ }
11957
11829
 
11958
- .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
11959
- padding-top: var(--pf-c-login__main-header--PaddingTop);
11830
+ .pf-c-masthead.pf-m-display-inline-on-md {
11831
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11832
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11833
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11834
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11835
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11836
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11837
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11838
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11839
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11840
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11841
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11842
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11843
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11844
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11845
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11846
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11847
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11848
+ }
11960
11849
  }
11850
+ @media (min-width: 768px) {
11851
+ .pf-c-masthead.pf-m-inset-none-on-md {
11852
+ --pf-c-masthead--inset: 0;
11853
+ }
11961
11854
 
11962
- .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
11963
- padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
11855
+ .pf-c-masthead.pf-m-inset-sm-on-md {
11856
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11857
+ }
11858
+
11859
+ .pf-c-masthead.pf-m-inset-md-on-md {
11860
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11861
+ }
11862
+
11863
+ .pf-c-masthead.pf-m-inset-lg-on-md {
11864
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11865
+ }
11866
+
11867
+ .pf-c-masthead.pf-m-inset-xl-on-md {
11868
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11869
+ }
11870
+
11871
+ .pf-c-masthead.pf-m-inset-2xl-on-md {
11872
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11873
+ }
11964
11874
  }
11875
+ @media (min-width: 992px) {
11876
+ .pf-c-masthead.pf-m-display-stack-on-lg {
11877
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11878
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11879
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11880
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11881
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11882
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11883
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11884
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11885
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11886
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11887
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11888
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11889
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11890
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11891
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11892
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11893
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11894
+ }
11965
11895
 
11966
- .pf-c-login__main-header {
11967
- display: grid;
11968
- grid-template-columns: 100%;
11969
- column-gap: var(--pf-c-login__main-header--ColumnGap);
11970
- row-gap: var(--pf-c-login__main-header--RowGap);
11971
- align-items: center;
11972
- padding: var(--pf-c-login__main-header--PaddingTop) var(--pf-c-login__main-header--PaddingRight) var(--pf-c-login__main-header--PaddingBottom) var(--pf-c-login__main-header--PaddingLeft);
11896
+ .pf-c-masthead.pf-m-display-inline-on-lg {
11897
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11898
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11899
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11900
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11901
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11902
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11903
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11904
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11905
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11906
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11907
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11908
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11909
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11910
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11911
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11912
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11913
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11914
+ }
11973
11915
  }
11916
+ @media (min-width: 992px) {
11917
+ .pf-c-masthead.pf-m-inset-none-on-lg {
11918
+ --pf-c-masthead--inset: 0;
11919
+ }
11974
11920
 
11975
- @media (min-width: 768px) {
11976
- .pf-c-login__main-header {
11977
- grid-template-columns: 1fr auto;
11921
+ .pf-c-masthead.pf-m-inset-sm-on-lg {
11922
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11978
11923
  }
11979
- }
11980
- .pf-c-login__main-header-utilities,
11981
- .pf-c-login__main-header .pf-c-dropdown {
11982
- grid-column: auto;
11983
- grid-row: auto;
11984
- }
11985
11924
 
11986
- @media (min-width: 768px) {
11987
- .pf-c-login__main-header-utilities,
11988
- .pf-c-login__main-header .pf-c-dropdown {
11989
- grid-column: 2/3;
11990
- grid-row: 1;
11925
+ .pf-c-masthead.pf-m-inset-md-on-lg {
11926
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11991
11927
  }
11992
- }
11993
- .pf-c-login__main-header-utilities .pf-c-dropdown {
11994
- grid-column: auto;
11995
- grid-row: auto;
11996
- }
11997
11928
 
11998
- .pf-c-login__main-header-desc {
11999
- margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
12000
- font-size: var(--pf-c-login__main-header-desc--FontSize);
12001
- grid-column: 1/-1;
12002
- }
11929
+ .pf-c-masthead.pf-m-inset-lg-on-lg {
11930
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11931
+ }
12003
11932
 
12004
- .pf-c-login__main-body {
12005
- padding-right: var(--pf-c-login__main-body--PaddingRight);
12006
- padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
12007
- padding-left: var(--pf-c-login__main-body--PaddingLeft);
12008
- }
11933
+ .pf-c-masthead.pf-m-inset-xl-on-lg {
11934
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11935
+ }
12009
11936
 
12010
- .pf-c-login__main-footer {
12011
- display: flex;
12012
- flex-wrap: wrap;
11937
+ .pf-c-masthead.pf-m-inset-2xl-on-lg {
11938
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11939
+ }
12013
11940
  }
11941
+ @media (min-width: 1200px) {
11942
+ .pf-c-masthead.pf-m-display-stack-on-xl {
11943
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11944
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11945
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11946
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11947
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11948
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11949
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11950
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11951
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11952
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11953
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11954
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11955
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11956
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11957
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11958
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11959
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11960
+ }
12014
11961
 
12015
- .pf-c-login__main-footer .pf-c-title {
12016
- margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
12017
- text-align: center;
11962
+ .pf-c-masthead.pf-m-display-inline-on-xl {
11963
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11964
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11965
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11966
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11967
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11968
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11969
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11970
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11971
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11972
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11973
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11974
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11975
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11976
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11977
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11978
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11979
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11980
+ }
12018
11981
  }
11982
+ @media (min-width: 1200px) {
11983
+ .pf-c-masthead.pf-m-inset-none-on-xl {
11984
+ --pf-c-masthead--inset: 0;
11985
+ }
12019
11986
 
12020
- .pf-c-login__main-footer > * {
12021
- flex-basis: 100%;
12022
- }
11987
+ .pf-c-masthead.pf-m-inset-sm-on-xl {
11988
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11989
+ }
12023
11990
 
12024
- .pf-c-login__main-footer-links {
12025
- display: flex;
12026
- flex-wrap: wrap;
12027
- justify-content: center;
12028
- padding: var(--pf-c-login__main-footer-links--PaddingTop) var(--pf-c-login__main-footer-links--PaddingRight) var(--pf-c-login__main-footer-links--PaddingBottom) var(--pf-c-login__main-footer-links--PaddingLeft);
12029
- }
11991
+ .pf-c-masthead.pf-m-inset-md-on-xl {
11992
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11993
+ }
12030
11994
 
12031
- .pf-c-login__main-footer-links-item {
12032
- padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
12033
- padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
12034
- margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
12035
- }
11995
+ .pf-c-masthead.pf-m-inset-lg-on-xl {
11996
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11997
+ }
12036
11998
 
12037
- .pf-c-login__main-footer-links-item-link svg {
12038
- fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
12039
- width: 100%;
12040
- max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
12041
- height: 100%;
12042
- max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
12043
- }
11999
+ .pf-c-masthead.pf-m-inset-xl-on-xl {
12000
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12001
+ }
12044
12002
 
12045
- .pf-c-login__main-footer-links-item-link:hover svg {
12046
- fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
12003
+ .pf-c-masthead.pf-m-inset-2xl-on-xl {
12004
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12005
+ }
12047
12006
  }
12007
+ @media (min-width: 1450px) {
12008
+ .pf-c-masthead.pf-m-display-stack-on-2xl {
12009
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12010
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12011
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12012
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12013
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12014
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12015
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12016
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12017
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12018
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12019
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12020
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12021
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12022
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12023
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12024
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12025
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12026
+ }
12048
12027
 
12049
- .pf-c-login__main-footer-band {
12050
- padding: var(--pf-c-login__main-footer-band--PaddingTop) var(--pf-c-login__main-footer-band--PaddingRight) var(--pf-c-login__main-footer-band--PaddingBottom) var(--pf-c-login__main-footer-band--PaddingLeft);
12051
- text-align: center;
12052
- background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
12028
+ .pf-c-masthead.pf-m-display-inline-on-2xl {
12029
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12030
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12031
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12032
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12033
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12034
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12035
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12036
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12037
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12038
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12039
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12040
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12041
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12042
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12043
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12044
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12045
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12046
+ }
12053
12047
  }
12048
+ @media (min-width: 1450px) {
12049
+ .pf-c-masthead.pf-m-inset-none-on-2xl {
12050
+ --pf-c-masthead--inset: 0;
12051
+ }
12054
12052
 
12055
- .pf-c-login__main-footer-band > * + * {
12056
- padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
12057
- }
12053
+ .pf-c-masthead.pf-m-inset-sm-on-2xl {
12054
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12055
+ }
12058
12056
 
12059
- .pf-c-login__footer {
12060
- color: var(--pf-global--Color--100);
12061
- grid-area: footer;
12062
- padding-right: var(--pf-c-login__footer--PaddingRight);
12063
- padding-left: var(--pf-c-login__footer--PaddingLeft);
12064
- }
12057
+ .pf-c-masthead.pf-m-inset-md-on-2xl {
12058
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
12059
+ }
12065
12060
 
12066
- .pf-c-login__footer .pf-c-list a {
12067
- color: unset;
12068
- }
12061
+ .pf-c-masthead.pf-m-inset-lg-on-2xl {
12062
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12063
+ }
12069
12064
 
12070
- .pf-c-login__footer .pf-c-list:not(:only-child) {
12071
- padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
12072
- }
12065
+ .pf-c-masthead.pf-m-inset-xl-on-2xl {
12066
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12067
+ }
12073
12068
 
12074
- :where(.pf-theme-dark) .pf-c-login__header,
12075
- :where(.pf-theme-dark) .pf-c-login__footer {
12069
+ .pf-c-masthead.pf-m-inset-2xl-on-2xl {
12070
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12071
+ }
12072
+ }
12073
+ :where(.pf-theme-dark) .pf-c-masthead {
12076
12074
  --pf-global--Color--100: #e0e0e0;
12077
12075
  --pf-global--Color--200: #aaabac;
12078
12076
  --pf-global--BorderColor--100: #444548;
@@ -12082,13 +12080,11 @@ ul.pf-c-list {
12082
12080
  --pf-global--BackgroundColor--100: #1b1d21;
12083
12081
  }
12084
12082
 
12085
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
12086
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
12083
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
12087
12084
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
12088
12085
  }
12089
12086
 
12090
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
12091
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
12087
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
12092
12088
  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
12093
12089
  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
12094
12090
  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
@@ -12103,11 +12099,15 @@ ul.pf-c-list {
12103
12099
  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
12104
12100
  }
12105
12101
 
12106
- :where(.pf-theme-dark) .pf-c-login__header,
12107
- :where(.pf-theme-dark) .pf-c-login__footer {
12102
+ :where(.pf-theme-dark) .pf-c-masthead {
12103
+ --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
12108
12104
  color: var(--pf-global--Color--100);
12109
12105
  }
12110
12106
 
12107
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
12108
+ --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
12109
+ }
12110
+
12111
12111
  .pf-c-menu {
12112
12112
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
12113
12113
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -27636,18 +27636,6 @@ label.pf-c-tree-view__node-text {
27636
27636
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27637
27637
  }
27638
27638
 
27639
- .pf-l-level {
27640
- --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27641
- display: flex;
27642
- flex-wrap: wrap;
27643
- align-items: center;
27644
- justify-content: space-between;
27645
- }
27646
-
27647
- .pf-l-level.pf-m-gutter > *:not(:last-child) {
27648
- margin-right: var(--pf-l-level--m-gutter--MarginRight);
27649
- }
27650
-
27651
27639
  .pf-l-split {
27652
27640
  --pf-l-split--m-gutter--MarginRight: var(--pf-global--gutter);
27653
27641
  display: flex;
@@ -27667,6 +27655,18 @@ label.pf-c-tree-view__node-text {
27667
27655
  margin-right: var(--pf-l-split--m-gutter--MarginRight);
27668
27656
  }
27669
27657
 
27658
+ .pf-l-level {
27659
+ --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27660
+ display: flex;
27661
+ flex-wrap: wrap;
27662
+ align-items: center;
27663
+ justify-content: space-between;
27664
+ }
27665
+
27666
+ .pf-l-level.pf-m-gutter > *:not(:last-child) {
27667
+ margin-right: var(--pf-l-level--m-gutter--MarginRight);
27668
+ }
27669
+
27670
27670
  .pf-l-stack {
27671
27671
  --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
27672
27672
  display: flex;