@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.39

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 (76) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  3. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  4. package/assets/images/PF-IconLogo-color.svg +17 -0
  5. package/components/Backdrop/backdrop.css +6 -2
  6. package/components/Backdrop/backdrop.scss +5 -2
  7. package/components/Banner/banner.css +4 -0
  8. package/components/Banner/banner.scss +5 -0
  9. package/components/Card/card.css +3 -0
  10. package/components/Card/card.scss +8 -0
  11. package/components/Divider/divider.css +97 -177
  12. package/components/Divider/divider.scss +60 -79
  13. package/components/Form/form.css +6 -0
  14. package/components/Form/form.scss +4 -1
  15. package/components/Masthead/masthead.css +267 -435
  16. package/components/Masthead/masthead.scss +118 -233
  17. package/components/MenuToggle/menu-toggle.css +1 -0
  18. package/components/MenuToggle/menu-toggle.scss +2 -0
  19. package/components/Popover/popover.css +0 -2
  20. package/components/Popover/popover.scss +2 -2
  21. package/components/SimpleList/simple-list.css +35 -52
  22. package/components/SimpleList/simple-list.scss +41 -51
  23. package/components/Table/table.scss +1 -0
  24. package/components/Tooltip/tooltip.css +0 -2
  25. package/components/Tooltip/tooltip.scss +3 -3
  26. package/components/Truncate/truncate.css +4 -0
  27. package/components/Truncate/truncate.scss +3 -0
  28. package/docs/components/Accordion/examples/Accordion.md +6 -6
  29. package/docs/components/Alert/examples/Alert.md +2 -2
  30. package/docs/components/Brand/examples/Brand.md +9 -33
  31. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  32. package/docs/components/Card/examples/Card.md +18 -20
  33. package/docs/components/Check/examples/Check.md +1 -0
  34. package/docs/components/Content/examples/Content.md +5 -5
  35. package/docs/components/Divider/examples/Divider.css +3 -1
  36. package/docs/components/Divider/examples/Divider.md +4 -5
  37. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  38. package/docs/components/Label/examples/Label.md +11 -11
  39. package/docs/components/Masthead/examples/masthead.md +441 -16
  40. package/docs/components/Nav/examples/Navigation.css +18 -2
  41. package/docs/components/Nav/examples/Navigation.md +1 -1
  42. package/docs/components/Radio/examples/Radio.md +1 -1
  43. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  44. package/docs/components/Table/examples/Table.md +8 -8
  45. package/docs/components/Truncate/examples/Truncate.css +2 -2
  46. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  47. package/docs/demos/Alert/examples/Alert.md +120 -126
  48. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  49. package/docs/demos/Banner/examples/Banner.md +79 -80
  50. package/docs/demos/CardView/examples/CardView.md +40 -42
  51. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  52. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  53. package/docs/demos/DataList/examples/DataList.md +160 -279
  54. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  55. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  56. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  57. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  58. package/docs/demos/Modal/examples/Modal.md +240 -252
  59. package/docs/demos/Nav/examples/Nav.md +320 -336
  60. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  61. package/docs/demos/Page/examples/Page.md +360 -378
  62. package/docs/demos/Page/examples/Penta.md +8 -15
  63. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  64. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  65. package/docs/demos/Table/examples/Table.md +617 -647
  66. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  67. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  68. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  69. package/docs/layouts/Flex/examples/Flex.md +11 -11
  70. package/package.json +32 -32
  71. package/patternfly-no-globals.css +422 -673
  72. package/patternfly-theme-dark-unversioned.css +422 -673
  73. package/patternfly.css +422 -673
  74. package/patternfly.min.css +1 -1
  75. package/patternfly.min.css.map +1 -1
  76. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
@@ -25,20 +25,16 @@ wrapperTag: div
25
25
  </button>
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
- <a
29
- class="pf-v5-c-masthead__brand"
30
- href="#"
31
- style="--pf-v5-c-brand--Height: 36px;"
32
- >
33
- <svg height="36px" viewBox="0 0 679 158" role="img">
34
- <title>Patternfly logo</title>
28
+ <a class="pf-v5-c-masthead__brand" href="#">
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
35
31
  <defs>
36
32
  <linearGradient
37
33
  x1="68%"
38
34
  y1="2.25860997e-13%"
39
35
  x2="32%"
40
36
  y2="100%"
41
- id="linearGradient-1"
37
+ id="linearGradient-wizard-basic-example-masthead"
42
38
  >
43
39
  <stop stop-color="#2B9AF3" offset="0%" />
44
40
  <stop
@@ -48,13 +44,7 @@ wrapperTag: div
48
44
  />
49
45
  </linearGradient>
50
46
  </defs>
51
- <g
52
- id="PF-HorizontalLogo-Color"
53
- stroke="none"
54
- stroke-width="1"
55
- fill="none"
56
- fill-rule="evenodd"
57
- >
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
58
48
  <g
59
49
  transform="translate(206.000000, 45.750000)"
60
50
  fill="var(--pf-t--global--text--color--regular)"
@@ -89,19 +79,18 @@ wrapperTag: div
89
79
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
90
80
  />
91
81
  </g>
92
- <g id="Logo" transform="translate(0.000000, 0.000000)">
82
+ <g transform="translate(0.000000, 0.000000)">
93
83
  <path
94
84
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
95
- id="Rectangle-Copy-17"
96
- fill="var(--pf-t--global--color--brand--200)"
85
+ fill="#0066CC"
97
86
  />
98
87
  <path
99
88
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
100
- fill="url(#linearGradient-1)"
89
+ fill="url(#linearGradient-wizard-basic-example-masthead)"
101
90
  />
102
91
  <path
103
92
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
104
- fill="url(#linearGradient-1)"
93
+ fill="url(#linearGradient-wizard-basic-example-masthead)"
105
94
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
106
95
  />
107
96
  </g>
@@ -116,8 +105,38 @@ wrapperTag: div
116
105
  >
117
106
  <div class="pf-v5-c-toolbar__content">
118
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
119
138
  <div
120
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
139
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
121
140
  >
122
141
  <div
123
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -164,27 +183,6 @@ wrapperTag: div
164
183
  </button>
165
184
  </div>
166
185
  </div>
167
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
168
- <button
169
- class="pf-v5-c-menu-toggle pf-m-full-height"
170
- type="button"
171
- aria-expanded="false"
172
- >
173
- <span class="pf-v5-c-menu-toggle__icon">
174
- <img
175
- class="pf-v5-c-avatar"
176
- alt="Avatar image"
177
- src="/assets/images/img_avatar-light.svg"
178
- />
179
- </span>
180
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
181
- <span class="pf-v5-c-menu-toggle__controls">
182
- <span class="pf-v5-c-menu-toggle__toggle-icon">
183
- <i class="fas fa-angle-down" aria-hidden="true"></i>
184
- </span>
185
- </span>
186
- </button>
187
- </div>
188
186
  </div>
189
187
  </div>
190
188
  </div>
@@ -590,20 +588,16 @@ wrapperTag: div
590
588
  </button>
591
589
  </span>
592
590
  <div class="pf-v5-c-masthead__main">
593
- <a
594
- class="pf-v5-c-masthead__brand"
595
- href="#"
596
- style="--pf-v5-c-brand--Height: 36px;"
597
- >
598
- <svg height="36px" viewBox="0 0 679 158" role="img">
599
- <title>Patternfly logo</title>
591
+ <a class="pf-v5-c-masthead__brand" href="#">
592
+ <svg height="40px" viewBox="0 0 679 158">
593
+ <title>PF-HorizontalLogo-Color</title>
600
594
  <defs>
601
595
  <linearGradient
602
596
  x1="68%"
603
597
  y1="2.25860997e-13%"
604
598
  x2="32%"
605
599
  y2="100%"
606
- id="linearGradient-1"
600
+ id="linearGradient-wizard-nav-expanded-example-masthead"
607
601
  >
608
602
  <stop stop-color="#2B9AF3" offset="0%" />
609
603
  <stop
@@ -613,13 +607,7 @@ wrapperTag: div
613
607
  />
614
608
  </linearGradient>
615
609
  </defs>
616
- <g
617
- id="PF-HorizontalLogo-Color"
618
- stroke="none"
619
- stroke-width="1"
620
- fill="none"
621
- fill-rule="evenodd"
622
- >
610
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
623
611
  <g
624
612
  transform="translate(206.000000, 45.750000)"
625
613
  fill="var(--pf-t--global--text--color--regular)"
@@ -654,19 +642,18 @@ wrapperTag: div
654
642
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
655
643
  />
656
644
  </g>
657
- <g id="Logo" transform="translate(0.000000, 0.000000)">
645
+ <g transform="translate(0.000000, 0.000000)">
658
646
  <path
659
647
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
660
- id="Rectangle-Copy-17"
661
- fill="var(--pf-t--global--color--brand--200)"
648
+ fill="#0066CC"
662
649
  />
663
650
  <path
664
651
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
665
- fill="url(#linearGradient-1)"
652
+ fill="url(#linearGradient-wizard-nav-expanded-example-masthead)"
666
653
  />
667
654
  <path
668
655
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
669
- fill="url(#linearGradient-1)"
656
+ fill="url(#linearGradient-wizard-nav-expanded-example-masthead)"
670
657
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
671
658
  />
672
659
  </g>
@@ -681,8 +668,38 @@ wrapperTag: div
681
668
  >
682
669
  <div class="pf-v5-c-toolbar__content">
683
670
  <div class="pf-v5-c-toolbar__content-section">
671
+ <div class="pf-v5-c-toolbar__item">
672
+ <button
673
+ class="pf-v5-c-menu-toggle"
674
+ type="button"
675
+ aria-expanded="false"
676
+ >
677
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
678
+ <span class="pf-v5-c-menu-toggle__controls">
679
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
680
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
681
+ </span>
682
+ </span>
683
+ </button>
684
+ </div>
685
+
686
+ <div class="pf-v5-c-toolbar__item">
687
+ <button
688
+ class="pf-v5-c-menu-toggle"
689
+ type="button"
690
+ aria-expanded="false"
691
+ >
692
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
693
+ <span class="pf-v5-c-menu-toggle__controls">
694
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
695
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
696
+ </span>
697
+ </span>
698
+ </button>
699
+ </div>
700
+
684
701
  <div
685
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
702
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
686
703
  >
687
704
  <div
688
705
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -729,27 +746,6 @@ wrapperTag: div
729
746
  </button>
730
747
  </div>
731
748
  </div>
732
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
733
- <button
734
- class="pf-v5-c-menu-toggle pf-m-full-height"
735
- type="button"
736
- aria-expanded="false"
737
- >
738
- <span class="pf-v5-c-menu-toggle__icon">
739
- <img
740
- class="pf-v5-c-avatar"
741
- alt="Avatar image"
742
- src="/assets/images/img_avatar-light.svg"
743
- />
744
- </span>
745
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
746
- <span class="pf-v5-c-menu-toggle__controls">
747
- <span class="pf-v5-c-menu-toggle__toggle-icon">
748
- <i class="fas fa-angle-down" aria-hidden="true"></i>
749
- </span>
750
- </span>
751
- </button>
752
- </div>
753
749
  </div>
754
750
  </div>
755
751
  </div>
@@ -1137,20 +1133,16 @@ wrapperTag: div
1137
1133
  </button>
1138
1134
  </span>
1139
1135
  <div class="pf-v5-c-masthead__main">
1140
- <a
1141
- class="pf-v5-c-masthead__brand"
1142
- href="#"
1143
- style="--pf-v5-c-brand--Height: 36px;"
1144
- >
1145
- <svg height="36px" viewBox="0 0 679 158" role="img">
1146
- <title>Patternfly logo</title>
1136
+ <a class="pf-v5-c-masthead__brand" href="#">
1137
+ <svg height="40px" viewBox="0 0 679 158">
1138
+ <title>PF-HorizontalLogo-Color</title>
1147
1139
  <defs>
1148
1140
  <linearGradient
1149
1141
  x1="68%"
1150
1142
  y1="2.25860997e-13%"
1151
1143
  x2="32%"
1152
1144
  y2="100%"
1153
- id="linearGradient-1"
1145
+ id="linearGradient-wizard-with-drawer-closed-example-masthead"
1154
1146
  >
1155
1147
  <stop stop-color="#2B9AF3" offset="0%" />
1156
1148
  <stop
@@ -1160,13 +1152,7 @@ wrapperTag: div
1160
1152
  />
1161
1153
  </linearGradient>
1162
1154
  </defs>
1163
- <g
1164
- id="PF-HorizontalLogo-Color"
1165
- stroke="none"
1166
- stroke-width="1"
1167
- fill="none"
1168
- fill-rule="evenodd"
1169
- >
1155
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1170
1156
  <g
1171
1157
  transform="translate(206.000000, 45.750000)"
1172
1158
  fill="var(--pf-t--global--text--color--regular)"
@@ -1201,19 +1187,18 @@ wrapperTag: div
1201
1187
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1202
1188
  />
1203
1189
  </g>
1204
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1190
+ <g transform="translate(0.000000, 0.000000)">
1205
1191
  <path
1206
1192
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1207
- id="Rectangle-Copy-17"
1208
- fill="var(--pf-t--global--color--brand--200)"
1193
+ fill="#0066CC"
1209
1194
  />
1210
1195
  <path
1211
1196
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1212
- fill="url(#linearGradient-1)"
1197
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-masthead)"
1213
1198
  />
1214
1199
  <path
1215
1200
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1216
- fill="url(#linearGradient-1)"
1201
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-masthead)"
1217
1202
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1218
1203
  />
1219
1204
  </g>
@@ -1228,8 +1213,38 @@ wrapperTag: div
1228
1213
  >
1229
1214
  <div class="pf-v5-c-toolbar__content">
1230
1215
  <div class="pf-v5-c-toolbar__content-section">
1216
+ <div class="pf-v5-c-toolbar__item">
1217
+ <button
1218
+ class="pf-v5-c-menu-toggle"
1219
+ type="button"
1220
+ aria-expanded="false"
1221
+ >
1222
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1223
+ <span class="pf-v5-c-menu-toggle__controls">
1224
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1225
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1226
+ </span>
1227
+ </span>
1228
+ </button>
1229
+ </div>
1230
+
1231
+ <div class="pf-v5-c-toolbar__item">
1232
+ <button
1233
+ class="pf-v5-c-menu-toggle"
1234
+ type="button"
1235
+ aria-expanded="false"
1236
+ >
1237
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1238
+ <span class="pf-v5-c-menu-toggle__controls">
1239
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1240
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1241
+ </span>
1242
+ </span>
1243
+ </button>
1244
+ </div>
1245
+
1231
1246
  <div
1232
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1247
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1233
1248
  >
1234
1249
  <div
1235
1250
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1276,27 +1291,6 @@ wrapperTag: div
1276
1291
  </button>
1277
1292
  </div>
1278
1293
  </div>
1279
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1280
- <button
1281
- class="pf-v5-c-menu-toggle pf-m-full-height"
1282
- type="button"
1283
- aria-expanded="false"
1284
- >
1285
- <span class="pf-v5-c-menu-toggle__icon">
1286
- <img
1287
- class="pf-v5-c-avatar"
1288
- alt="Avatar image"
1289
- src="/assets/images/img_avatar-light.svg"
1290
- />
1291
- </span>
1292
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1293
- <span class="pf-v5-c-menu-toggle__controls">
1294
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1295
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1296
- </span>
1297
- </span>
1298
- </button>
1299
- </div>
1300
1294
  </div>
1301
1295
  </div>
1302
1296
  </div>
@@ -1768,20 +1762,16 @@ wrapperTag: div
1768
1762
  </button>
1769
1763
  </span>
1770
1764
  <div class="pf-v5-c-masthead__main">
1771
- <a
1772
- class="pf-v5-c-masthead__brand"
1773
- href="#"
1774
- style="--pf-v5-c-brand--Height: 36px;"
1775
- >
1776
- <svg height="36px" viewBox="0 0 679 158" role="img">
1777
- <title>Patternfly logo</title>
1765
+ <a class="pf-v5-c-masthead__brand" href="#">
1766
+ <svg height="40px" viewBox="0 0 679 158">
1767
+ <title>PF-HorizontalLogo-Color</title>
1778
1768
  <defs>
1779
1769
  <linearGradient
1780
1770
  x1="68%"
1781
1771
  y1="2.25860997e-13%"
1782
1772
  x2="32%"
1783
1773
  y2="100%"
1784
- id="linearGradient-1"
1774
+ id="linearGradient-wizard-with-drawer-expanded-example-masthead"
1785
1775
  >
1786
1776
  <stop stop-color="#2B9AF3" offset="0%" />
1787
1777
  <stop
@@ -1791,13 +1781,7 @@ wrapperTag: div
1791
1781
  />
1792
1782
  </linearGradient>
1793
1783
  </defs>
1794
- <g
1795
- id="PF-HorizontalLogo-Color"
1796
- stroke="none"
1797
- stroke-width="1"
1798
- fill="none"
1799
- fill-rule="evenodd"
1800
- >
1784
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1801
1785
  <g
1802
1786
  transform="translate(206.000000, 45.750000)"
1803
1787
  fill="var(--pf-t--global--text--color--regular)"
@@ -1832,19 +1816,18 @@ wrapperTag: div
1832
1816
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1833
1817
  />
1834
1818
  </g>
1835
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1819
+ <g transform="translate(0.000000, 0.000000)">
1836
1820
  <path
1837
1821
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1838
- id="Rectangle-Copy-17"
1839
- fill="var(--pf-t--global--color--brand--200)"
1822
+ fill="#0066CC"
1840
1823
  />
1841
1824
  <path
1842
1825
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1843
- fill="url(#linearGradient-1)"
1826
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-masthead)"
1844
1827
  />
1845
1828
  <path
1846
1829
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1847
- fill="url(#linearGradient-1)"
1830
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-masthead)"
1848
1831
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1849
1832
  />
1850
1833
  </g>
@@ -1859,8 +1842,38 @@ wrapperTag: div
1859
1842
  >
1860
1843
  <div class="pf-v5-c-toolbar__content">
1861
1844
  <div class="pf-v5-c-toolbar__content-section">
1845
+ <div class="pf-v5-c-toolbar__item">
1846
+ <button
1847
+ class="pf-v5-c-menu-toggle"
1848
+ type="button"
1849
+ aria-expanded="false"
1850
+ >
1851
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1852
+ <span class="pf-v5-c-menu-toggle__controls">
1853
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1854
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1855
+ </span>
1856
+ </span>
1857
+ </button>
1858
+ </div>
1859
+
1860
+ <div class="pf-v5-c-toolbar__item">
1861
+ <button
1862
+ class="pf-v5-c-menu-toggle"
1863
+ type="button"
1864
+ aria-expanded="false"
1865
+ >
1866
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1867
+ <span class="pf-v5-c-menu-toggle__controls">
1868
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1869
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1870
+ </span>
1871
+ </span>
1872
+ </button>
1873
+ </div>
1874
+
1862
1875
  <div
1863
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1876
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1864
1877
  >
1865
1878
  <div
1866
1879
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1907,27 +1920,6 @@ wrapperTag: div
1907
1920
  </button>
1908
1921
  </div>
1909
1922
  </div>
1910
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1911
- <button
1912
- class="pf-v5-c-menu-toggle pf-m-full-height"
1913
- type="button"
1914
- aria-expanded="false"
1915
- >
1916
- <span class="pf-v5-c-menu-toggle__icon">
1917
- <img
1918
- class="pf-v5-c-avatar"
1919
- alt="Avatar image"
1920
- src="/assets/images/img_avatar-light.svg"
1921
- />
1922
- </span>
1923
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1924
- <span class="pf-v5-c-menu-toggle__controls">
1925
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1926
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1927
- </span>
1928
- </span>
1929
- </button>
1930
- </div>
1931
1923
  </div>
1932
1924
  </div>
1933
1925
  </div>
@@ -2398,20 +2390,16 @@ wrapperTag: div
2398
2390
  </button>
2399
2391
  </span>
2400
2392
  <div class="pf-v5-c-masthead__main">
2401
- <a
2402
- class="pf-v5-c-masthead__brand"
2403
- href="#"
2404
- style="--pf-v5-c-brand--Height: 36px;"
2405
- >
2406
- <svg height="36px" viewBox="0 0 679 158" role="img">
2407
- <title>Patternfly logo</title>
2393
+ <a class="pf-v5-c-masthead__brand" href="#">
2394
+ <svg height="40px" viewBox="0 0 679 158">
2395
+ <title>PF-HorizontalLogo-Color</title>
2408
2396
  <defs>
2409
2397
  <linearGradient
2410
2398
  x1="68%"
2411
2399
  y1="2.25860997e-13%"
2412
2400
  x2="32%"
2413
2401
  y2="100%"
2414
- id="linearGradient-1"
2402
+ id="linearGradient-wizard-with-drawer-info-example-masthead"
2415
2403
  >
2416
2404
  <stop stop-color="#2B9AF3" offset="0%" />
2417
2405
  <stop
@@ -2421,13 +2409,7 @@ wrapperTag: div
2421
2409
  />
2422
2410
  </linearGradient>
2423
2411
  </defs>
2424
- <g
2425
- id="PF-HorizontalLogo-Color"
2426
- stroke="none"
2427
- stroke-width="1"
2428
- fill="none"
2429
- fill-rule="evenodd"
2430
- >
2412
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2431
2413
  <g
2432
2414
  transform="translate(206.000000, 45.750000)"
2433
2415
  fill="var(--pf-t--global--text--color--regular)"
@@ -2462,19 +2444,18 @@ wrapperTag: div
2462
2444
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2463
2445
  />
2464
2446
  </g>
2465
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2447
+ <g transform="translate(0.000000, 0.000000)">
2466
2448
  <path
2467
2449
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2468
- id="Rectangle-Copy-17"
2469
- fill="var(--pf-t--global--color--brand--200)"
2450
+ fill="#0066CC"
2470
2451
  />
2471
2452
  <path
2472
2453
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2473
- fill="url(#linearGradient-1)"
2454
+ fill="url(#linearGradient-wizard-with-drawer-info-example-masthead)"
2474
2455
  />
2475
2456
  <path
2476
2457
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2477
- fill="url(#linearGradient-1)"
2458
+ fill="url(#linearGradient-wizard-with-drawer-info-example-masthead)"
2478
2459
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2479
2460
  />
2480
2461
  </g>
@@ -2489,8 +2470,38 @@ wrapperTag: div
2489
2470
  >
2490
2471
  <div class="pf-v5-c-toolbar__content">
2491
2472
  <div class="pf-v5-c-toolbar__content-section">
2473
+ <div class="pf-v5-c-toolbar__item">
2474
+ <button
2475
+ class="pf-v5-c-menu-toggle"
2476
+ type="button"
2477
+ aria-expanded="false"
2478
+ >
2479
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2480
+ <span class="pf-v5-c-menu-toggle__controls">
2481
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2482
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2483
+ </span>
2484
+ </span>
2485
+ </button>
2486
+ </div>
2487
+
2488
+ <div class="pf-v5-c-toolbar__item">
2489
+ <button
2490
+ class="pf-v5-c-menu-toggle"
2491
+ type="button"
2492
+ aria-expanded="false"
2493
+ >
2494
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2495
+ <span class="pf-v5-c-menu-toggle__controls">
2496
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2497
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2498
+ </span>
2499
+ </span>
2500
+ </button>
2501
+ </div>
2502
+
2492
2503
  <div
2493
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2504
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2494
2505
  >
2495
2506
  <div
2496
2507
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2537,27 +2548,6 @@ wrapperTag: div
2537
2548
  </button>
2538
2549
  </div>
2539
2550
  </div>
2540
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2541
- <button
2542
- class="pf-v5-c-menu-toggle pf-m-full-height"
2543
- type="button"
2544
- aria-expanded="false"
2545
- >
2546
- <span class="pf-v5-c-menu-toggle__icon">
2547
- <img
2548
- class="pf-v5-c-avatar"
2549
- alt="Avatar image"
2550
- src="/assets/images/img_avatar-light.svg"
2551
- />
2552
- </span>
2553
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2554
- <span class="pf-v5-c-menu-toggle__controls">
2555
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2556
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2557
- </span>
2558
- </span>
2559
- </button>
2560
- </div>
2561
2551
  </div>
2562
2552
  </div>
2563
2553
  </div>
@@ -2896,20 +2886,16 @@ wrapperTag: div
2896
2886
  </button>
2897
2887
  </span>
2898
2888
  <div class="pf-v5-c-masthead__main">
2899
- <a
2900
- class="pf-v5-c-masthead__brand"
2901
- href="#"
2902
- style="--pf-v5-c-brand--Height: 36px;"
2903
- >
2904
- <svg height="36px" viewBox="0 0 679 158" role="img">
2905
- <title>Patternfly logo</title>
2889
+ <a class="pf-v5-c-masthead__brand" href="#">
2890
+ <svg height="40px" viewBox="0 0 679 158">
2891
+ <title>PF-HorizontalLogo-Color</title>
2906
2892
  <defs>
2907
2893
  <linearGradient
2908
2894
  x1="68%"
2909
2895
  y1="2.25860997e-13%"
2910
2896
  x2="32%"
2911
2897
  y2="100%"
2912
- id="linearGradient-1"
2898
+ id="linearGradient-wizard-in-page-example-masthead"
2913
2899
  >
2914
2900
  <stop stop-color="#2B9AF3" offset="0%" />
2915
2901
  <stop
@@ -2919,13 +2905,7 @@ wrapperTag: div
2919
2905
  />
2920
2906
  </linearGradient>
2921
2907
  </defs>
2922
- <g
2923
- id="PF-HorizontalLogo-Color"
2924
- stroke="none"
2925
- stroke-width="1"
2926
- fill="none"
2927
- fill-rule="evenodd"
2928
- >
2908
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2929
2909
  <g
2930
2910
  transform="translate(206.000000, 45.750000)"
2931
2911
  fill="var(--pf-t--global--text--color--regular)"
@@ -2960,19 +2940,18 @@ wrapperTag: div
2960
2940
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2961
2941
  />
2962
2942
  </g>
2963
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2943
+ <g transform="translate(0.000000, 0.000000)">
2964
2944
  <path
2965
2945
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2966
- id="Rectangle-Copy-17"
2967
- fill="var(--pf-t--global--color--brand--200)"
2946
+ fill="#0066CC"
2968
2947
  />
2969
2948
  <path
2970
2949
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2971
- fill="url(#linearGradient-1)"
2950
+ fill="url(#linearGradient-wizard-in-page-example-masthead)"
2972
2951
  />
2973
2952
  <path
2974
2953
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2975
- fill="url(#linearGradient-1)"
2954
+ fill="url(#linearGradient-wizard-in-page-example-masthead)"
2976
2955
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2977
2956
  />
2978
2957
  </g>
@@ -2987,8 +2966,38 @@ wrapperTag: div
2987
2966
  >
2988
2967
  <div class="pf-v5-c-toolbar__content">
2989
2968
  <div class="pf-v5-c-toolbar__content-section">
2969
+ <div class="pf-v5-c-toolbar__item">
2970
+ <button
2971
+ class="pf-v5-c-menu-toggle"
2972
+ type="button"
2973
+ aria-expanded="false"
2974
+ >
2975
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2976
+ <span class="pf-v5-c-menu-toggle__controls">
2977
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2978
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2979
+ </span>
2980
+ </span>
2981
+ </button>
2982
+ </div>
2983
+
2984
+ <div class="pf-v5-c-toolbar__item">
2985
+ <button
2986
+ class="pf-v5-c-menu-toggle"
2987
+ type="button"
2988
+ aria-expanded="false"
2989
+ >
2990
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2991
+ <span class="pf-v5-c-menu-toggle__controls">
2992
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2993
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2994
+ </span>
2995
+ </span>
2996
+ </button>
2997
+ </div>
2998
+
2990
2999
  <div
2991
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3000
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2992
3001
  >
2993
3002
  <div
2994
3003
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3035,27 +3044,6 @@ wrapperTag: div
3035
3044
  </button>
3036
3045
  </div>
3037
3046
  </div>
3038
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3039
- <button
3040
- class="pf-v5-c-menu-toggle pf-m-full-height"
3041
- type="button"
3042
- aria-expanded="false"
3043
- >
3044
- <span class="pf-v5-c-menu-toggle__icon">
3045
- <img
3046
- class="pf-v5-c-avatar"
3047
- alt="Avatar image"
3048
- src="/assets/images/img_avatar-light.svg"
3049
- />
3050
- </span>
3051
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3052
- <span class="pf-v5-c-menu-toggle__controls">
3053
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3054
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3055
- </span>
3056
- </span>
3057
- </button>
3058
- </div>
3059
3047
  </div>
3060
3048
  </div>
3061
3049
  </div>
@@ -3399,20 +3387,16 @@ wrapperTag: div
3399
3387
  </button>
3400
3388
  </span>
3401
3389
  <div class="pf-v5-c-masthead__main">
3402
- <a
3403
- class="pf-v5-c-masthead__brand"
3404
- href="#"
3405
- style="--pf-v5-c-brand--Height: 36px;"
3406
- >
3407
- <svg height="36px" viewBox="0 0 679 158" role="img">
3408
- <title>Patternfly logo</title>
3390
+ <a class="pf-v5-c-masthead__brand" href="#">
3391
+ <svg height="40px" viewBox="0 0 679 158">
3392
+ <title>PF-HorizontalLogo-Color</title>
3409
3393
  <defs>
3410
3394
  <linearGradient
3411
3395
  x1="68%"
3412
3396
  y1="2.25860997e-13%"
3413
3397
  x2="32%"
3414
3398
  y2="100%"
3415
- id="linearGradient-1"
3399
+ id="linearGradient-in-page-nav-expanded-example-masthead"
3416
3400
  >
3417
3401
  <stop stop-color="#2B9AF3" offset="0%" />
3418
3402
  <stop
@@ -3422,13 +3406,7 @@ wrapperTag: div
3422
3406
  />
3423
3407
  </linearGradient>
3424
3408
  </defs>
3425
- <g
3426
- id="PF-HorizontalLogo-Color"
3427
- stroke="none"
3428
- stroke-width="1"
3429
- fill="none"
3430
- fill-rule="evenodd"
3431
- >
3409
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3432
3410
  <g
3433
3411
  transform="translate(206.000000, 45.750000)"
3434
3412
  fill="var(--pf-t--global--text--color--regular)"
@@ -3463,19 +3441,18 @@ wrapperTag: div
3463
3441
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3464
3442
  />
3465
3443
  </g>
3466
- <g id="Logo" transform="translate(0.000000, 0.000000)">
3444
+ <g transform="translate(0.000000, 0.000000)">
3467
3445
  <path
3468
3446
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3469
- id="Rectangle-Copy-17"
3470
- fill="var(--pf-t--global--color--brand--200)"
3447
+ fill="#0066CC"
3471
3448
  />
3472
3449
  <path
3473
3450
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3474
- fill="url(#linearGradient-1)"
3451
+ fill="url(#linearGradient-in-page-nav-expanded-example-masthead)"
3475
3452
  />
3476
3453
  <path
3477
3454
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3478
- fill="url(#linearGradient-1)"
3455
+ fill="url(#linearGradient-in-page-nav-expanded-example-masthead)"
3479
3456
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3480
3457
  />
3481
3458
  </g>
@@ -3490,8 +3467,38 @@ wrapperTag: div
3490
3467
  >
3491
3468
  <div class="pf-v5-c-toolbar__content">
3492
3469
  <div class="pf-v5-c-toolbar__content-section">
3470
+ <div class="pf-v5-c-toolbar__item">
3471
+ <button
3472
+ class="pf-v5-c-menu-toggle"
3473
+ type="button"
3474
+ aria-expanded="false"
3475
+ >
3476
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3477
+ <span class="pf-v5-c-menu-toggle__controls">
3478
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3479
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3480
+ </span>
3481
+ </span>
3482
+ </button>
3483
+ </div>
3484
+
3485
+ <div class="pf-v5-c-toolbar__item">
3486
+ <button
3487
+ class="pf-v5-c-menu-toggle"
3488
+ type="button"
3489
+ aria-expanded="false"
3490
+ >
3491
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3492
+ <span class="pf-v5-c-menu-toggle__controls">
3493
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3494
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3495
+ </span>
3496
+ </span>
3497
+ </button>
3498
+ </div>
3499
+
3493
3500
  <div
3494
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3501
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3495
3502
  >
3496
3503
  <div
3497
3504
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3538,27 +3545,6 @@ wrapperTag: div
3538
3545
  </button>
3539
3546
  </div>
3540
3547
  </div>
3541
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3542
- <button
3543
- class="pf-v5-c-menu-toggle pf-m-full-height"
3544
- type="button"
3545
- aria-expanded="false"
3546
- >
3547
- <span class="pf-v5-c-menu-toggle__icon">
3548
- <img
3549
- class="pf-v5-c-avatar"
3550
- alt="Avatar image"
3551
- src="/assets/images/img_avatar-light.svg"
3552
- />
3553
- </span>
3554
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3555
- <span class="pf-v5-c-menu-toggle__controls">
3556
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3557
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3558
- </span>
3559
- </span>
3560
- </button>
3561
- </div>
3562
3548
  </div>
3563
3549
  </div>
3564
3550
  </div>
@@ -3884,20 +3870,16 @@ wrapperTag: div
3884
3870
  </button>
3885
3871
  </span>
3886
3872
  <div class="pf-v5-c-masthead__main">
3887
- <a
3888
- class="pf-v5-c-masthead__brand"
3889
- href="#"
3890
- style="--pf-v5-c-brand--Height: 36px;"
3891
- >
3892
- <svg height="36px" viewBox="0 0 679 158" role="img">
3893
- <title>Patternfly logo</title>
3873
+ <a class="pf-v5-c-masthead__brand" href="#">
3874
+ <svg height="40px" viewBox="0 0 679 158">
3875
+ <title>PF-HorizontalLogo-Color</title>
3894
3876
  <defs>
3895
3877
  <linearGradient
3896
3878
  x1="68%"
3897
3879
  y1="2.25860997e-13%"
3898
3880
  x2="32%"
3899
3881
  y2="100%"
3900
- id="linearGradient-1"
3882
+ id="linearGradient-wizard-with-drawer-in-page-example-masthead"
3901
3883
  >
3902
3884
  <stop stop-color="#2B9AF3" offset="0%" />
3903
3885
  <stop
@@ -3907,13 +3889,7 @@ wrapperTag: div
3907
3889
  />
3908
3890
  </linearGradient>
3909
3891
  </defs>
3910
- <g
3911
- id="PF-HorizontalLogo-Color"
3912
- stroke="none"
3913
- stroke-width="1"
3914
- fill="none"
3915
- fill-rule="evenodd"
3916
- >
3892
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3917
3893
  <g
3918
3894
  transform="translate(206.000000, 45.750000)"
3919
3895
  fill="var(--pf-t--global--text--color--regular)"
@@ -3948,19 +3924,18 @@ wrapperTag: div
3948
3924
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3949
3925
  />
3950
3926
  </g>
3951
- <g id="Logo" transform="translate(0.000000, 0.000000)">
3927
+ <g transform="translate(0.000000, 0.000000)">
3952
3928
  <path
3953
3929
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3954
- id="Rectangle-Copy-17"
3955
- fill="var(--pf-t--global--color--brand--200)"
3930
+ fill="#0066CC"
3956
3931
  />
3957
3932
  <path
3958
3933
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3959
- fill="url(#linearGradient-1)"
3934
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-masthead)"
3960
3935
  />
3961
3936
  <path
3962
3937
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3963
- fill="url(#linearGradient-1)"
3938
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-masthead)"
3964
3939
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3965
3940
  />
3966
3941
  </g>
@@ -3975,8 +3950,38 @@ wrapperTag: div
3975
3950
  >
3976
3951
  <div class="pf-v5-c-toolbar__content">
3977
3952
  <div class="pf-v5-c-toolbar__content-section">
3953
+ <div class="pf-v5-c-toolbar__item">
3954
+ <button
3955
+ class="pf-v5-c-menu-toggle"
3956
+ type="button"
3957
+ aria-expanded="false"
3958
+ >
3959
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3960
+ <span class="pf-v5-c-menu-toggle__controls">
3961
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3962
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3963
+ </span>
3964
+ </span>
3965
+ </button>
3966
+ </div>
3967
+
3968
+ <div class="pf-v5-c-toolbar__item">
3969
+ <button
3970
+ class="pf-v5-c-menu-toggle"
3971
+ type="button"
3972
+ aria-expanded="false"
3973
+ >
3974
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3975
+ <span class="pf-v5-c-menu-toggle__controls">
3976
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3977
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3978
+ </span>
3979
+ </span>
3980
+ </button>
3981
+ </div>
3982
+
3978
3983
  <div
3979
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3984
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3980
3985
  >
3981
3986
  <div
3982
3987
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -4023,27 +4028,6 @@ wrapperTag: div
4023
4028
  </button>
4024
4029
  </div>
4025
4030
  </div>
4026
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
4027
- <button
4028
- class="pf-v5-c-menu-toggle pf-m-full-height"
4029
- type="button"
4030
- aria-expanded="false"
4031
- >
4032
- <span class="pf-v5-c-menu-toggle__icon">
4033
- <img
4034
- class="pf-v5-c-avatar"
4035
- alt="Avatar image"
4036
- src="/assets/images/img_avatar-light.svg"
4037
- />
4038
- </span>
4039
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
4040
- <span class="pf-v5-c-menu-toggle__controls">
4041
- <span class="pf-v5-c-menu-toggle__toggle-icon">
4042
- <i class="fas fa-angle-down" aria-hidden="true"></i>
4043
- </span>
4044
- </span>
4045
- </button>
4046
- </div>
4047
4031
  </div>
4048
4032
  </div>
4049
4033
  </div>
@@ -4441,20 +4425,16 @@ wrapperTag: div
4441
4425
  </button>
4442
4426
  </span>
4443
4427
  <div class="pf-v5-c-masthead__main">
4444
- <a
4445
- class="pf-v5-c-masthead__brand"
4446
- href="#"
4447
- style="--pf-v5-c-brand--Height: 36px;"
4448
- >
4449
- <svg height="36px" viewBox="0 0 679 158" role="img">
4450
- <title>Patternfly logo</title>
4428
+ <a class="pf-v5-c-masthead__brand" href="#">
4429
+ <svg height="40px" viewBox="0 0 679 158">
4430
+ <title>PF-HorizontalLogo-Color</title>
4451
4431
  <defs>
4452
4432
  <linearGradient
4453
4433
  x1="68%"
4454
4434
  y1="2.25860997e-13%"
4455
4435
  x2="32%"
4456
4436
  y2="100%"
4457
- id="linearGradient-1"
4437
+ id="linearGradient-wizard-with-drawer-in-page-expanded-example-masthead"
4458
4438
  >
4459
4439
  <stop stop-color="#2B9AF3" offset="0%" />
4460
4440
  <stop
@@ -4464,13 +4444,7 @@ wrapperTag: div
4464
4444
  />
4465
4445
  </linearGradient>
4466
4446
  </defs>
4467
- <g
4468
- id="PF-HorizontalLogo-Color"
4469
- stroke="none"
4470
- stroke-width="1"
4471
- fill="none"
4472
- fill-rule="evenodd"
4473
- >
4447
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4474
4448
  <g
4475
4449
  transform="translate(206.000000, 45.750000)"
4476
4450
  fill="var(--pf-t--global--text--color--regular)"
@@ -4505,19 +4479,18 @@ wrapperTag: div
4505
4479
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
4506
4480
  />
4507
4481
  </g>
4508
- <g id="Logo" transform="translate(0.000000, 0.000000)">
4482
+ <g transform="translate(0.000000, 0.000000)">
4509
4483
  <path
4510
4484
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
4511
- id="Rectangle-Copy-17"
4512
- fill="var(--pf-t--global--color--brand--200)"
4485
+ fill="#0066CC"
4513
4486
  />
4514
4487
  <path
4515
4488
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4516
- fill="url(#linearGradient-1)"
4489
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-masthead)"
4517
4490
  />
4518
4491
  <path
4519
4492
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4520
- fill="url(#linearGradient-1)"
4493
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-masthead)"
4521
4494
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4522
4495
  />
4523
4496
  </g>
@@ -4532,8 +4505,38 @@ wrapperTag: div
4532
4505
  >
4533
4506
  <div class="pf-v5-c-toolbar__content">
4534
4507
  <div class="pf-v5-c-toolbar__content-section">
4508
+ <div class="pf-v5-c-toolbar__item">
4509
+ <button
4510
+ class="pf-v5-c-menu-toggle"
4511
+ type="button"
4512
+ aria-expanded="false"
4513
+ >
4514
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
4515
+ <span class="pf-v5-c-menu-toggle__controls">
4516
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4517
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4518
+ </span>
4519
+ </span>
4520
+ </button>
4521
+ </div>
4522
+
4523
+ <div class="pf-v5-c-toolbar__item">
4524
+ <button
4525
+ class="pf-v5-c-menu-toggle"
4526
+ type="button"
4527
+ aria-expanded="false"
4528
+ >
4529
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
4530
+ <span class="pf-v5-c-menu-toggle__controls">
4531
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4532
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4533
+ </span>
4534
+ </span>
4535
+ </button>
4536
+ </div>
4537
+
4535
4538
  <div
4536
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
4539
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
4537
4540
  >
4538
4541
  <div
4539
4542
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -4580,27 +4583,6 @@ wrapperTag: div
4580
4583
  </button>
4581
4584
  </div>
4582
4585
  </div>
4583
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
4584
- <button
4585
- class="pf-v5-c-menu-toggle pf-m-full-height"
4586
- type="button"
4587
- aria-expanded="false"
4588
- >
4589
- <span class="pf-v5-c-menu-toggle__icon">
4590
- <img
4591
- class="pf-v5-c-avatar"
4592
- alt="Avatar image"
4593
- src="/assets/images/img_avatar-light.svg"
4594
- />
4595
- </span>
4596
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
4597
- <span class="pf-v5-c-menu-toggle__controls">
4598
- <span class="pf-v5-c-menu-toggle__toggle-icon">
4599
- <i class="fas fa-angle-down" aria-hidden="true"></i>
4600
- </span>
4601
- </span>
4602
- </button>
4603
- </div>
4604
4586
  </div>
4605
4587
  </div>
4606
4588
  </div>