@patternfly/patternfly 6.0.0-alpha.38 → 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 (36) hide show
  1. package/components/Divider/divider.css +97 -177
  2. package/components/Divider/divider.scss +60 -79
  3. package/components/Masthead/masthead.css +267 -435
  4. package/components/Masthead/masthead.scss +118 -233
  5. package/docs/components/Divider/examples/Divider.css +3 -1
  6. package/docs/components/Divider/examples/Divider.md +4 -5
  7. package/docs/components/Masthead/examples/masthead.md +441 -16
  8. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  9. package/docs/demos/Alert/examples/Alert.md +120 -126
  10. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  11. package/docs/demos/Banner/examples/Banner.md +79 -80
  12. package/docs/demos/CardView/examples/CardView.md +40 -42
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  14. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  15. package/docs/demos/DataList/examples/DataList.md +160 -279
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  17. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  19. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  20. package/docs/demos/Modal/examples/Modal.md +240 -252
  21. package/docs/demos/Nav/examples/Nav.md +320 -336
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  23. package/docs/demos/Page/examples/Page.md +360 -378
  24. package/docs/demos/Page/examples/Penta.md +8 -15
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  26. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  27. package/docs/demos/Table/examples/Table.md +617 -647
  28. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  29. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  30. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +363 -611
  33. package/patternfly-theme-dark-unversioned.css +363 -611
  34. package/patternfly.css +363 -611
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -24,20 +24,16 @@ section: components
24
24
  </button>
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
- <a
28
- class="pf-v5-c-masthead__brand"
29
- href="#"
30
- style="--pf-v5-c-brand--Height: 36px;"
31
- >
32
- <svg height="36px" viewBox="0 0 679 158" role="img">
33
- <title>Patternfly logo</title>
27
+ <a class="pf-v5-c-masthead__brand" href="#">
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
34
30
  <defs>
35
31
  <linearGradient
36
32
  x1="68%"
37
33
  y1="2.25860997e-13%"
38
34
  x2="32%"
39
35
  y2="100%"
40
- id="linearGradient-1"
36
+ id="linearGradient-tabs-tables-and-tabs-example-masthead"
41
37
  >
42
38
  <stop stop-color="#2B9AF3" offset="0%" />
43
39
  <stop
@@ -47,13 +43,7 @@ section: components
47
43
  />
48
44
  </linearGradient>
49
45
  </defs>
50
- <g
51
- id="PF-HorizontalLogo-Color"
52
- stroke="none"
53
- stroke-width="1"
54
- fill="none"
55
- fill-rule="evenodd"
56
- >
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
57
47
  <g
58
48
  transform="translate(206.000000, 45.750000)"
59
49
  fill="var(--pf-t--global--text--color--regular)"
@@ -88,19 +78,18 @@ section: components
88
78
  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"
89
79
  />
90
80
  </g>
91
- <g id="Logo" transform="translate(0.000000, 0.000000)">
81
+ <g transform="translate(0.000000, 0.000000)">
92
82
  <path
93
83
  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"
94
- id="Rectangle-Copy-17"
95
- fill="var(--pf-t--global--color--brand--200)"
84
+ fill="#0066CC"
96
85
  />
97
86
  <path
98
87
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
99
- fill="url(#linearGradient-1)"
88
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
100
89
  />
101
90
  <path
102
91
  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"
103
- fill="url(#linearGradient-1)"
92
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
104
93
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
105
94
  />
106
95
  </g>
@@ -115,8 +104,38 @@ section: components
115
104
  >
116
105
  <div class="pf-v5-c-toolbar__content">
117
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
118
137
  <div
119
- 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"
138
+ 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"
120
139
  >
121
140
  <div
122
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -163,27 +182,6 @@ section: components
163
182
  </button>
164
183
  </div>
165
184
  </div>
166
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
167
- <button
168
- class="pf-v5-c-menu-toggle pf-m-full-height"
169
- type="button"
170
- aria-expanded="false"
171
- >
172
- <span class="pf-v5-c-menu-toggle__icon">
173
- <img
174
- class="pf-v5-c-avatar"
175
- alt="Avatar image"
176
- src="/assets/images/img_avatar-light.svg"
177
- />
178
- </span>
179
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
180
- <span class="pf-v5-c-menu-toggle__controls">
181
- <span class="pf-v5-c-menu-toggle__toggle-icon">
182
- <i class="fas fa-angle-down" aria-hidden="true"></i>
183
- </span>
184
- </span>
185
- </button>
186
- </div>
187
185
  </div>
188
186
  </div>
189
187
  </div>
@@ -591,20 +589,16 @@ section: components
591
589
  </button>
592
590
  </span>
593
591
  <div class="pf-v5-c-masthead__main">
594
- <a
595
- class="pf-v5-c-masthead__brand"
596
- href="#"
597
- style="--pf-v5-c-brand--Height: 36px;"
598
- >
599
- <svg height="36px" viewBox="0 0 679 158" role="img">
600
- <title>Patternfly logo</title>
592
+ <a class="pf-v5-c-masthead__brand" href="#">
593
+ <svg height="40px" viewBox="0 0 679 158">
594
+ <title>PF-HorizontalLogo-Color</title>
601
595
  <defs>
602
596
  <linearGradient
603
597
  x1="68%"
604
598
  y1="2.25860997e-13%"
605
599
  x2="32%"
606
600
  y2="100%"
607
- id="linearGradient-1"
601
+ id="linearGradient-tabs-tables-and-tabs-example-masthead"
608
602
  >
609
603
  <stop stop-color="#2B9AF3" offset="0%" />
610
604
  <stop
@@ -614,13 +608,7 @@ section: components
614
608
  />
615
609
  </linearGradient>
616
610
  </defs>
617
- <g
618
- id="PF-HorizontalLogo-Color"
619
- stroke="none"
620
- stroke-width="1"
621
- fill="none"
622
- fill-rule="evenodd"
623
- >
611
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
624
612
  <g
625
613
  transform="translate(206.000000, 45.750000)"
626
614
  fill="var(--pf-t--global--text--color--regular)"
@@ -655,19 +643,18 @@ section: components
655
643
  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"
656
644
  />
657
645
  </g>
658
- <g id="Logo" transform="translate(0.000000, 0.000000)">
646
+ <g transform="translate(0.000000, 0.000000)">
659
647
  <path
660
648
  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"
661
- id="Rectangle-Copy-17"
662
- fill="var(--pf-t--global--color--brand--200)"
649
+ fill="#0066CC"
663
650
  />
664
651
  <path
665
652
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
666
- fill="url(#linearGradient-1)"
653
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
667
654
  />
668
655
  <path
669
656
  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"
670
- fill="url(#linearGradient-1)"
657
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
671
658
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
672
659
  />
673
660
  </g>
@@ -682,8 +669,38 @@ section: components
682
669
  >
683
670
  <div class="pf-v5-c-toolbar__content">
684
671
  <div class="pf-v5-c-toolbar__content-section">
672
+ <div class="pf-v5-c-toolbar__item">
673
+ <button
674
+ class="pf-v5-c-menu-toggle"
675
+ type="button"
676
+ aria-expanded="false"
677
+ >
678
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
679
+ <span class="pf-v5-c-menu-toggle__controls">
680
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
681
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
682
+ </span>
683
+ </span>
684
+ </button>
685
+ </div>
686
+
687
+ <div class="pf-v5-c-toolbar__item">
688
+ <button
689
+ class="pf-v5-c-menu-toggle"
690
+ type="button"
691
+ aria-expanded="false"
692
+ >
693
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
694
+ <span class="pf-v5-c-menu-toggle__controls">
695
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
696
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
697
+ </span>
698
+ </span>
699
+ </button>
700
+ </div>
701
+
685
702
  <div
686
- 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"
703
+ 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"
687
704
  >
688
705
  <div
689
706
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -730,27 +747,6 @@ section: components
730
747
  </button>
731
748
  </div>
732
749
  </div>
733
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
734
- <button
735
- class="pf-v5-c-menu-toggle pf-m-full-height"
736
- type="button"
737
- aria-expanded="false"
738
- >
739
- <span class="pf-v5-c-menu-toggle__icon">
740
- <img
741
- class="pf-v5-c-avatar"
742
- alt="Avatar image"
743
- src="/assets/images/img_avatar-light.svg"
744
- />
745
- </span>
746
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
747
- <span class="pf-v5-c-menu-toggle__controls">
748
- <span class="pf-v5-c-menu-toggle__toggle-icon">
749
- <i class="fas fa-angle-down" aria-hidden="true"></i>
750
- </span>
751
- </span>
752
- </button>
753
- </div>
754
750
  </div>
755
751
  </div>
756
752
  </div>
@@ -1163,20 +1159,16 @@ section: components
1163
1159
  </button>
1164
1160
  </span>
1165
1161
  <div class="pf-v5-c-masthead__main">
1166
- <a
1167
- class="pf-v5-c-masthead__brand"
1168
- href="#"
1169
- style="--pf-v5-c-brand--Height: 36px;"
1170
- >
1171
- <svg height="36px" viewBox="0 0 679 158" role="img">
1172
- <title>Patternfly logo</title>
1162
+ <a class="pf-v5-c-masthead__brand" href="#">
1163
+ <svg height="40px" viewBox="0 0 679 158">
1164
+ <title>PF-HorizontalLogo-Color</title>
1173
1165
  <defs>
1174
1166
  <linearGradient
1175
1167
  x1="68%"
1176
1168
  y1="2.25860997e-13%"
1177
1169
  x2="32%"
1178
1170
  y2="100%"
1179
- id="linearGradient-1"
1171
+ id="linearGradient-nested-tabs-example-masthead"
1180
1172
  >
1181
1173
  <stop stop-color="#2B9AF3" offset="0%" />
1182
1174
  <stop
@@ -1186,13 +1178,7 @@ section: components
1186
1178
  />
1187
1179
  </linearGradient>
1188
1180
  </defs>
1189
- <g
1190
- id="PF-HorizontalLogo-Color"
1191
- stroke="none"
1192
- stroke-width="1"
1193
- fill="none"
1194
- fill-rule="evenodd"
1195
- >
1181
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1196
1182
  <g
1197
1183
  transform="translate(206.000000, 45.750000)"
1198
1184
  fill="var(--pf-t--global--text--color--regular)"
@@ -1227,19 +1213,18 @@ section: components
1227
1213
  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"
1228
1214
  />
1229
1215
  </g>
1230
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1216
+ <g transform="translate(0.000000, 0.000000)">
1231
1217
  <path
1232
1218
  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"
1233
- id="Rectangle-Copy-17"
1234
- fill="var(--pf-t--global--color--brand--200)"
1219
+ fill="#0066CC"
1235
1220
  />
1236
1221
  <path
1237
1222
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1238
- fill="url(#linearGradient-1)"
1223
+ fill="url(#linearGradient-nested-tabs-example-masthead)"
1239
1224
  />
1240
1225
  <path
1241
1226
  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"
1242
- fill="url(#linearGradient-1)"
1227
+ fill="url(#linearGradient-nested-tabs-example-masthead)"
1243
1228
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1244
1229
  />
1245
1230
  </g>
@@ -1254,8 +1239,38 @@ section: components
1254
1239
  >
1255
1240
  <div class="pf-v5-c-toolbar__content">
1256
1241
  <div class="pf-v5-c-toolbar__content-section">
1242
+ <div class="pf-v5-c-toolbar__item">
1243
+ <button
1244
+ class="pf-v5-c-menu-toggle"
1245
+ type="button"
1246
+ aria-expanded="false"
1247
+ >
1248
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1249
+ <span class="pf-v5-c-menu-toggle__controls">
1250
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1251
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1252
+ </span>
1253
+ </span>
1254
+ </button>
1255
+ </div>
1256
+
1257
+ <div class="pf-v5-c-toolbar__item">
1258
+ <button
1259
+ class="pf-v5-c-menu-toggle"
1260
+ type="button"
1261
+ aria-expanded="false"
1262
+ >
1263
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1264
+ <span class="pf-v5-c-menu-toggle__controls">
1265
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1266
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1267
+ </span>
1268
+ </span>
1269
+ </button>
1270
+ </div>
1271
+
1257
1272
  <div
1258
- 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"
1273
+ 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"
1259
1274
  >
1260
1275
  <div
1261
1276
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1302,27 +1317,6 @@ section: components
1302
1317
  </button>
1303
1318
  </div>
1304
1319
  </div>
1305
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1306
- <button
1307
- class="pf-v5-c-menu-toggle pf-m-full-height"
1308
- type="button"
1309
- aria-expanded="false"
1310
- >
1311
- <span class="pf-v5-c-menu-toggle__icon">
1312
- <img
1313
- class="pf-v5-c-avatar"
1314
- alt="Avatar image"
1315
- src="/assets/images/img_avatar-light.svg"
1316
- />
1317
- </span>
1318
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1319
- <span class="pf-v5-c-menu-toggle__controls">
1320
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1321
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1322
- </span>
1323
- </span>
1324
- </button>
1325
- </div>
1326
1320
  </div>
1327
1321
  </div>
1328
1322
  </div>
@@ -1639,20 +1633,16 @@ section: components
1639
1633
  </button>
1640
1634
  </span>
1641
1635
  <div class="pf-v5-c-masthead__main">
1642
- <a
1643
- class="pf-v5-c-masthead__brand"
1644
- href="#"
1645
- style="--pf-v5-c-brand--Height: 36px;"
1646
- >
1647
- <svg height="36px" viewBox="0 0 679 158" role="img">
1648
- <title>Patternfly logo</title>
1636
+ <a class="pf-v5-c-masthead__brand" href="#">
1637
+ <svg height="40px" viewBox="0 0 679 158">
1638
+ <title>PF-HorizontalLogo-Color</title>
1649
1639
  <defs>
1650
1640
  <linearGradient
1651
1641
  x1="68%"
1652
1642
  y1="2.25860997e-13%"
1653
1643
  x2="32%"
1654
1644
  y2="100%"
1655
- id="linearGradient-1"
1645
+ id="linearGradient-table-tabs-example-masthead"
1656
1646
  >
1657
1647
  <stop stop-color="#2B9AF3" offset="0%" />
1658
1648
  <stop
@@ -1662,13 +1652,7 @@ section: components
1662
1652
  />
1663
1653
  </linearGradient>
1664
1654
  </defs>
1665
- <g
1666
- id="PF-HorizontalLogo-Color"
1667
- stroke="none"
1668
- stroke-width="1"
1669
- fill="none"
1670
- fill-rule="evenodd"
1671
- >
1655
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1672
1656
  <g
1673
1657
  transform="translate(206.000000, 45.750000)"
1674
1658
  fill="var(--pf-t--global--text--color--regular)"
@@ -1703,19 +1687,18 @@ section: components
1703
1687
  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"
1704
1688
  />
1705
1689
  </g>
1706
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1690
+ <g transform="translate(0.000000, 0.000000)">
1707
1691
  <path
1708
1692
  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"
1709
- id="Rectangle-Copy-17"
1710
- fill="var(--pf-t--global--color--brand--200)"
1693
+ fill="#0066CC"
1711
1694
  />
1712
1695
  <path
1713
1696
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1714
- fill="url(#linearGradient-1)"
1697
+ fill="url(#linearGradient-table-tabs-example-masthead)"
1715
1698
  />
1716
1699
  <path
1717
1700
  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"
1718
- fill="url(#linearGradient-1)"
1701
+ fill="url(#linearGradient-table-tabs-example-masthead)"
1719
1702
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1720
1703
  />
1721
1704
  </g>
@@ -1730,8 +1713,38 @@ section: components
1730
1713
  >
1731
1714
  <div class="pf-v5-c-toolbar__content">
1732
1715
  <div class="pf-v5-c-toolbar__content-section">
1716
+ <div class="pf-v5-c-toolbar__item">
1717
+ <button
1718
+ class="pf-v5-c-menu-toggle"
1719
+ type="button"
1720
+ aria-expanded="false"
1721
+ >
1722
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1723
+ <span class="pf-v5-c-menu-toggle__controls">
1724
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1725
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1726
+ </span>
1727
+ </span>
1728
+ </button>
1729
+ </div>
1730
+
1731
+ <div class="pf-v5-c-toolbar__item">
1732
+ <button
1733
+ class="pf-v5-c-menu-toggle"
1734
+ type="button"
1735
+ aria-expanded="false"
1736
+ >
1737
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1738
+ <span class="pf-v5-c-menu-toggle__controls">
1739
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1740
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1741
+ </span>
1742
+ </span>
1743
+ </button>
1744
+ </div>
1745
+
1733
1746
  <div
1734
- 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"
1747
+ 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"
1735
1748
  >
1736
1749
  <div
1737
1750
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1778,27 +1791,6 @@ section: components
1778
1791
  </button>
1779
1792
  </div>
1780
1793
  </div>
1781
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1782
- <button
1783
- class="pf-v5-c-menu-toggle pf-m-full-height"
1784
- type="button"
1785
- aria-expanded="false"
1786
- >
1787
- <span class="pf-v5-c-menu-toggle__icon">
1788
- <img
1789
- class="pf-v5-c-avatar"
1790
- alt="Avatar image"
1791
- src="/assets/images/img_avatar-light.svg"
1792
- />
1793
- </span>
1794
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1795
- <span class="pf-v5-c-menu-toggle__controls">
1796
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1797
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1798
- </span>
1799
- </span>
1800
- </button>
1801
- </div>
1802
1794
  </div>
1803
1795
  </div>
1804
1796
  </div>
@@ -3006,20 +2998,16 @@ section: components
3006
2998
  </button>
3007
2999
  </span>
3008
3000
  <div class="pf-v5-c-masthead__main">
3009
- <a
3010
- class="pf-v5-c-masthead__brand"
3011
- href="#"
3012
- style="--pf-v5-c-brand--Height: 36px;"
3013
- >
3014
- <svg height="36px" viewBox="0 0 679 158" role="img">
3015
- <title>Patternfly logo</title>
3001
+ <a class="pf-v5-c-masthead__brand" href="#">
3002
+ <svg height="40px" viewBox="0 0 679 158">
3003
+ <title>PF-HorizontalLogo-Color</title>
3016
3004
  <defs>
3017
3005
  <linearGradient
3018
3006
  x1="68%"
3019
3007
  y1="2.25860997e-13%"
3020
3008
  x2="32%"
3021
3009
  y2="100%"
3022
- id="linearGradient-1"
3010
+ id="linearGradient-modal-tabs-example-masthead"
3023
3011
  >
3024
3012
  <stop stop-color="#2B9AF3" offset="0%" />
3025
3013
  <stop
@@ -3029,13 +3017,7 @@ section: components
3029
3017
  />
3030
3018
  </linearGradient>
3031
3019
  </defs>
3032
- <g
3033
- id="PF-HorizontalLogo-Color"
3034
- stroke="none"
3035
- stroke-width="1"
3036
- fill="none"
3037
- fill-rule="evenodd"
3038
- >
3020
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3039
3021
  <g
3040
3022
  transform="translate(206.000000, 45.750000)"
3041
3023
  fill="var(--pf-t--global--text--color--regular)"
@@ -3070,19 +3052,18 @@ section: components
3070
3052
  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"
3071
3053
  />
3072
3054
  </g>
3073
- <g id="Logo" transform="translate(0.000000, 0.000000)">
3055
+ <g transform="translate(0.000000, 0.000000)">
3074
3056
  <path
3075
3057
  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"
3076
- id="Rectangle-Copy-17"
3077
- fill="var(--pf-t--global--color--brand--200)"
3058
+ fill="#0066CC"
3078
3059
  />
3079
3060
  <path
3080
3061
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3081
- fill="url(#linearGradient-1)"
3062
+ fill="url(#linearGradient-modal-tabs-example-masthead)"
3082
3063
  />
3083
3064
  <path
3084
3065
  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"
3085
- fill="url(#linearGradient-1)"
3066
+ fill="url(#linearGradient-modal-tabs-example-masthead)"
3086
3067
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3087
3068
  />
3088
3069
  </g>
@@ -3097,8 +3078,38 @@ section: components
3097
3078
  >
3098
3079
  <div class="pf-v5-c-toolbar__content">
3099
3080
  <div class="pf-v5-c-toolbar__content-section">
3081
+ <div class="pf-v5-c-toolbar__item">
3082
+ <button
3083
+ class="pf-v5-c-menu-toggle"
3084
+ type="button"
3085
+ aria-expanded="false"
3086
+ >
3087
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3088
+ <span class="pf-v5-c-menu-toggle__controls">
3089
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3090
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3091
+ </span>
3092
+ </span>
3093
+ </button>
3094
+ </div>
3095
+
3096
+ <div class="pf-v5-c-toolbar__item">
3097
+ <button
3098
+ class="pf-v5-c-menu-toggle"
3099
+ type="button"
3100
+ aria-expanded="false"
3101
+ >
3102
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3103
+ <span class="pf-v5-c-menu-toggle__controls">
3104
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3105
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3106
+ </span>
3107
+ </span>
3108
+ </button>
3109
+ </div>
3110
+
3100
3111
  <div
3101
- 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"
3112
+ 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"
3102
3113
  >
3103
3114
  <div
3104
3115
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3145,27 +3156,6 @@ section: components
3145
3156
  </button>
3146
3157
  </div>
3147
3158
  </div>
3148
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3149
- <button
3150
- class="pf-v5-c-menu-toggle pf-m-full-height"
3151
- type="button"
3152
- aria-expanded="false"
3153
- >
3154
- <span class="pf-v5-c-menu-toggle__icon">
3155
- <img
3156
- class="pf-v5-c-avatar"
3157
- alt="Avatar image"
3158
- src="/assets/images/img_avatar-light.svg"
3159
- />
3160
- </span>
3161
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3162
- <span class="pf-v5-c-menu-toggle__controls">
3163
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3164
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3165
- </span>
3166
- </span>
3167
- </button>
3168
- </div>
3169
3159
  </div>
3170
3160
  </div>
3171
3161
  </div>
@@ -3314,20 +3304,16 @@ section: components
3314
3304
  </button>
3315
3305
  </span>
3316
3306
  <div class="pf-v5-c-masthead__main">
3317
- <a
3318
- class="pf-v5-c-masthead__brand"
3319
- href="#"
3320
- style="--pf-v5-c-brand--Height: 36px;"
3321
- >
3322
- <svg height="36px" viewBox="0 0 679 158" role="img">
3323
- <title>Patternfly logo</title>
3307
+ <a class="pf-v5-c-masthead__brand" href="#">
3308
+ <svg height="40px" viewBox="0 0 679 158">
3309
+ <title>PF-HorizontalLogo-Color</title>
3324
3310
  <defs>
3325
3311
  <linearGradient
3326
3312
  x1="68%"
3327
3313
  y1="2.25860997e-13%"
3328
3314
  x2="32%"
3329
3315
  y2="100%"
3330
- id="linearGradient-1"
3316
+ id="linearGradient-gray-tabs-example-masthead"
3331
3317
  >
3332
3318
  <stop stop-color="#2B9AF3" offset="0%" />
3333
3319
  <stop
@@ -3337,13 +3323,7 @@ section: components
3337
3323
  />
3338
3324
  </linearGradient>
3339
3325
  </defs>
3340
- <g
3341
- id="PF-HorizontalLogo-Color"
3342
- stroke="none"
3343
- stroke-width="1"
3344
- fill="none"
3345
- fill-rule="evenodd"
3346
- >
3326
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3347
3327
  <g
3348
3328
  transform="translate(206.000000, 45.750000)"
3349
3329
  fill="var(--pf-t--global--text--color--regular)"
@@ -3378,19 +3358,18 @@ section: components
3378
3358
  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"
3379
3359
  />
3380
3360
  </g>
3381
- <g id="Logo" transform="translate(0.000000, 0.000000)">
3361
+ <g transform="translate(0.000000, 0.000000)">
3382
3362
  <path
3383
3363
  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"
3384
- id="Rectangle-Copy-17"
3385
- fill="var(--pf-t--global--color--brand--200)"
3364
+ fill="#0066CC"
3386
3365
  />
3387
3366
  <path
3388
3367
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3389
- fill="url(#linearGradient-1)"
3368
+ fill="url(#linearGradient-gray-tabs-example-masthead)"
3390
3369
  />
3391
3370
  <path
3392
3371
  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"
3393
- fill="url(#linearGradient-1)"
3372
+ fill="url(#linearGradient-gray-tabs-example-masthead)"
3394
3373
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3395
3374
  />
3396
3375
  </g>
@@ -3405,8 +3384,38 @@ section: components
3405
3384
  >
3406
3385
  <div class="pf-v5-c-toolbar__content">
3407
3386
  <div class="pf-v5-c-toolbar__content-section">
3387
+ <div class="pf-v5-c-toolbar__item">
3388
+ <button
3389
+ class="pf-v5-c-menu-toggle"
3390
+ type="button"
3391
+ aria-expanded="false"
3392
+ >
3393
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3394
+ <span class="pf-v5-c-menu-toggle__controls">
3395
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3396
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3397
+ </span>
3398
+ </span>
3399
+ </button>
3400
+ </div>
3401
+
3402
+ <div class="pf-v5-c-toolbar__item">
3403
+ <button
3404
+ class="pf-v5-c-menu-toggle"
3405
+ type="button"
3406
+ aria-expanded="false"
3407
+ >
3408
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3409
+ <span class="pf-v5-c-menu-toggle__controls">
3410
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3411
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3412
+ </span>
3413
+ </span>
3414
+ </button>
3415
+ </div>
3416
+
3408
3417
  <div
3409
- 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"
3418
+ 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"
3410
3419
  >
3411
3420
  <div
3412
3421
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3453,27 +3462,6 @@ section: components
3453
3462
  </button>
3454
3463
  </div>
3455
3464
  </div>
3456
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3457
- <button
3458
- class="pf-v5-c-menu-toggle pf-m-full-height"
3459
- type="button"
3460
- aria-expanded="false"
3461
- >
3462
- <span class="pf-v5-c-menu-toggle__icon">
3463
- <img
3464
- class="pf-v5-c-avatar"
3465
- alt="Avatar image"
3466
- src="/assets/images/img_avatar-light.svg"
3467
- />
3468
- </span>
3469
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3470
- <span class="pf-v5-c-menu-toggle__controls">
3471
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3472
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3473
- </span>
3474
- </span>
3475
- </button>
3476
- </div>
3477
3465
  </div>
3478
3466
  </div>
3479
3467
  </div>