@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
@@ -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-drawer-collapsed-example-page-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-drawer-collapsed-example-page-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-drawer-collapsed-example-page-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 class="pf-v5-c-toolbar__item">
122
141
  <button
@@ -174,27 +193,6 @@ section: components
174
193
  </button>
175
194
  </div>
176
195
  </div>
177
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
178
- <button
179
- class="pf-v5-c-menu-toggle pf-m-full-height"
180
- type="button"
181
- aria-expanded="false"
182
- >
183
- <span class="pf-v5-c-menu-toggle__icon">
184
- <img
185
- class="pf-v5-c-avatar"
186
- alt="Avatar image"
187
- src="/assets/images/img_avatar-light.svg"
188
- />
189
- </span>
190
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
191
- <span class="pf-v5-c-menu-toggle__controls">
192
- <span class="pf-v5-c-menu-toggle__toggle-icon">
193
- <i class="fas fa-angle-down" aria-hidden="true"></i>
194
- </span>
195
- </span>
196
- </button>
197
- </div>
198
196
  </div>
199
197
  </div>
200
198
  </div>
@@ -1023,20 +1021,16 @@ section: components
1023
1021
  </button>
1024
1022
  </span>
1025
1023
  <div class="pf-v5-c-masthead__main">
1026
- <a
1027
- class="pf-v5-c-masthead__brand"
1028
- href="#"
1029
- style="--pf-v5-c-brand--Height: 36px;"
1030
- >
1031
- <svg height="36px" viewBox="0 0 679 158" role="img">
1032
- <title>Patternfly logo</title>
1024
+ <a class="pf-v5-c-masthead__brand" href="#">
1025
+ <svg height="40px" viewBox="0 0 679 158">
1026
+ <title>PF-HorizontalLogo-Color</title>
1033
1027
  <defs>
1034
1028
  <linearGradient
1035
1029
  x1="68%"
1036
1030
  y1="2.25860997e-13%"
1037
1031
  x2="32%"
1038
1032
  y2="100%"
1039
- id="linearGradient-1"
1033
+ id="linearGradient-drawer-expanded-read-example-page-masthead"
1040
1034
  >
1041
1035
  <stop stop-color="#2B9AF3" offset="0%" />
1042
1036
  <stop
@@ -1046,13 +1040,7 @@ section: components
1046
1040
  />
1047
1041
  </linearGradient>
1048
1042
  </defs>
1049
- <g
1050
- id="PF-HorizontalLogo-Color"
1051
- stroke="none"
1052
- stroke-width="1"
1053
- fill="none"
1054
- fill-rule="evenodd"
1055
- >
1043
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1056
1044
  <g
1057
1045
  transform="translate(206.000000, 45.750000)"
1058
1046
  fill="var(--pf-t--global--text--color--regular)"
@@ -1087,19 +1075,18 @@ section: components
1087
1075
  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"
1088
1076
  />
1089
1077
  </g>
1090
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1078
+ <g transform="translate(0.000000, 0.000000)">
1091
1079
  <path
1092
1080
  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"
1093
- id="Rectangle-Copy-17"
1094
- fill="var(--pf-t--global--color--brand--200)"
1081
+ fill="#0066CC"
1095
1082
  />
1096
1083
  <path
1097
1084
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1098
- fill="url(#linearGradient-1)"
1085
+ fill="url(#linearGradient-drawer-expanded-read-example-page-masthead)"
1099
1086
  />
1100
1087
  <path
1101
1088
  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"
1102
- fill="url(#linearGradient-1)"
1089
+ fill="url(#linearGradient-drawer-expanded-read-example-page-masthead)"
1103
1090
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1104
1091
  />
1105
1092
  </g>
@@ -1114,8 +1101,38 @@ section: components
1114
1101
  >
1115
1102
  <div class="pf-v5-c-toolbar__content">
1116
1103
  <div class="pf-v5-c-toolbar__content-section">
1104
+ <div class="pf-v5-c-toolbar__item">
1105
+ <button
1106
+ class="pf-v5-c-menu-toggle"
1107
+ type="button"
1108
+ aria-expanded="false"
1109
+ >
1110
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1111
+ <span class="pf-v5-c-menu-toggle__controls">
1112
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1113
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1114
+ </span>
1115
+ </span>
1116
+ </button>
1117
+ </div>
1118
+
1119
+ <div class="pf-v5-c-toolbar__item">
1120
+ <button
1121
+ class="pf-v5-c-menu-toggle"
1122
+ type="button"
1123
+ aria-expanded="false"
1124
+ >
1125
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1126
+ <span class="pf-v5-c-menu-toggle__controls">
1127
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1128
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1129
+ </span>
1130
+ </span>
1131
+ </button>
1132
+ </div>
1133
+
1117
1134
  <div
1118
- 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"
1135
+ 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"
1119
1136
  >
1120
1137
  <div class="pf-v5-c-toolbar__item">
1121
1138
  <button
@@ -1176,27 +1193,6 @@ section: components
1176
1193
  </button>
1177
1194
  </div>
1178
1195
  </div>
1179
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1180
- <button
1181
- class="pf-v5-c-menu-toggle pf-m-full-height"
1182
- type="button"
1183
- aria-expanded="false"
1184
- >
1185
- <span class="pf-v5-c-menu-toggle__icon">
1186
- <img
1187
- class="pf-v5-c-avatar"
1188
- alt="Avatar image"
1189
- src="/assets/images/img_avatar-light.svg"
1190
- />
1191
- </span>
1192
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1193
- <span class="pf-v5-c-menu-toggle__controls">
1194
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1195
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1196
- </span>
1197
- </span>
1198
- </button>
1199
- </div>
1200
1196
  </div>
1201
1197
  </div>
1202
1198
  </div>
@@ -2025,20 +2021,16 @@ section: components
2025
2021
  </button>
2026
2022
  </span>
2027
2023
  <div class="pf-v5-c-masthead__main">
2028
- <a
2029
- class="pf-v5-c-masthead__brand"
2030
- href="#"
2031
- style="--pf-v5-c-brand--Height: 36px;"
2032
- >
2033
- <svg height="36px" viewBox="0 0 679 158" role="img">
2034
- <title>Patternfly logo</title>
2024
+ <a class="pf-v5-c-masthead__brand" href="#">
2025
+ <svg height="40px" viewBox="0 0 679 158">
2026
+ <title>PF-HorizontalLogo-Color</title>
2035
2027
  <defs>
2036
2028
  <linearGradient
2037
2029
  x1="68%"
2038
2030
  y1="2.25860997e-13%"
2039
2031
  x2="32%"
2040
2032
  y2="100%"
2041
- id="linearGradient-1"
2033
+ id="linearGradient-drawer-expanded-unread-example-page-masthead"
2042
2034
  >
2043
2035
  <stop stop-color="#2B9AF3" offset="0%" />
2044
2036
  <stop
@@ -2048,13 +2040,7 @@ section: components
2048
2040
  />
2049
2041
  </linearGradient>
2050
2042
  </defs>
2051
- <g
2052
- id="PF-HorizontalLogo-Color"
2053
- stroke="none"
2054
- stroke-width="1"
2055
- fill="none"
2056
- fill-rule="evenodd"
2057
- >
2043
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2058
2044
  <g
2059
2045
  transform="translate(206.000000, 45.750000)"
2060
2046
  fill="var(--pf-t--global--text--color--regular)"
@@ -2089,19 +2075,18 @@ section: components
2089
2075
  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"
2090
2076
  />
2091
2077
  </g>
2092
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2078
+ <g transform="translate(0.000000, 0.000000)">
2093
2079
  <path
2094
2080
  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"
2095
- id="Rectangle-Copy-17"
2096
- fill="var(--pf-t--global--color--brand--200)"
2081
+ fill="#0066CC"
2097
2082
  />
2098
2083
  <path
2099
2084
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2100
- fill="url(#linearGradient-1)"
2085
+ fill="url(#linearGradient-drawer-expanded-unread-example-page-masthead)"
2101
2086
  />
2102
2087
  <path
2103
2088
  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"
2104
- fill="url(#linearGradient-1)"
2089
+ fill="url(#linearGradient-drawer-expanded-unread-example-page-masthead)"
2105
2090
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2106
2091
  />
2107
2092
  </g>
@@ -2116,8 +2101,38 @@ section: components
2116
2101
  >
2117
2102
  <div class="pf-v5-c-toolbar__content">
2118
2103
  <div class="pf-v5-c-toolbar__content-section">
2104
+ <div class="pf-v5-c-toolbar__item">
2105
+ <button
2106
+ class="pf-v5-c-menu-toggle"
2107
+ type="button"
2108
+ aria-expanded="false"
2109
+ >
2110
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2111
+ <span class="pf-v5-c-menu-toggle__controls">
2112
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2113
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2114
+ </span>
2115
+ </span>
2116
+ </button>
2117
+ </div>
2118
+
2119
+ <div class="pf-v5-c-toolbar__item">
2120
+ <button
2121
+ class="pf-v5-c-menu-toggle"
2122
+ type="button"
2123
+ aria-expanded="false"
2124
+ >
2125
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2126
+ <span class="pf-v5-c-menu-toggle__controls">
2127
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2128
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2129
+ </span>
2130
+ </span>
2131
+ </button>
2132
+ </div>
2133
+
2119
2134
  <div
2120
- 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"
2135
+ 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"
2121
2136
  >
2122
2137
  <div class="pf-v5-c-toolbar__item">
2123
2138
  <button
@@ -2178,27 +2193,6 @@ section: components
2178
2193
  </button>
2179
2194
  </div>
2180
2195
  </div>
2181
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2182
- <button
2183
- class="pf-v5-c-menu-toggle pf-m-full-height"
2184
- type="button"
2185
- aria-expanded="false"
2186
- >
2187
- <span class="pf-v5-c-menu-toggle__icon">
2188
- <img
2189
- class="pf-v5-c-avatar"
2190
- alt="Avatar image"
2191
- src="/assets/images/img_avatar-light.svg"
2192
- />
2193
- </span>
2194
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2195
- <span class="pf-v5-c-menu-toggle__controls">
2196
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2197
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2198
- </span>
2199
- </span>
2200
- </button>
2201
- </div>
2202
2196
  </div>
2203
2197
  </div>
2204
2198
  </div>
@@ -3030,20 +3024,16 @@ section: components
3030
3024
  </button>
3031
3025
  </span>
3032
3026
  <div class="pf-v5-c-masthead__main">
3033
- <a
3034
- class="pf-v5-c-masthead__brand"
3035
- href="#"
3036
- style="--pf-v5-c-brand--Height: 36px;"
3037
- >
3038
- <svg height="36px" viewBox="0 0 679 158" role="img">
3039
- <title>Patternfly logo</title>
3027
+ <a class="pf-v5-c-masthead__brand" href="#">
3028
+ <svg height="40px" viewBox="0 0 679 158">
3029
+ <title>PF-HorizontalLogo-Color</title>
3040
3030
  <defs>
3041
3031
  <linearGradient
3042
3032
  x1="68%"
3043
3033
  y1="2.25860997e-13%"
3044
3034
  x2="32%"
3045
3035
  y2="100%"
3046
- id="linearGradient-1"
3036
+ id="linearGradient-drawer-expanded-attention-example-page-masthead"
3047
3037
  >
3048
3038
  <stop stop-color="#2B9AF3" offset="0%" />
3049
3039
  <stop
@@ -3053,13 +3043,7 @@ section: components
3053
3043
  />
3054
3044
  </linearGradient>
3055
3045
  </defs>
3056
- <g
3057
- id="PF-HorizontalLogo-Color"
3058
- stroke="none"
3059
- stroke-width="1"
3060
- fill="none"
3061
- fill-rule="evenodd"
3062
- >
3046
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3063
3047
  <g
3064
3048
  transform="translate(206.000000, 45.750000)"
3065
3049
  fill="var(--pf-t--global--text--color--regular)"
@@ -3094,19 +3078,18 @@ section: components
3094
3078
  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"
3095
3079
  />
3096
3080
  </g>
3097
- <g id="Logo" transform="translate(0.000000, 0.000000)">
3081
+ <g transform="translate(0.000000, 0.000000)">
3098
3082
  <path
3099
3083
  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"
3100
- id="Rectangle-Copy-17"
3101
- fill="var(--pf-t--global--color--brand--200)"
3084
+ fill="#0066CC"
3102
3085
  />
3103
3086
  <path
3104
3087
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3105
- fill="url(#linearGradient-1)"
3088
+ fill="url(#linearGradient-drawer-expanded-attention-example-page-masthead)"
3106
3089
  />
3107
3090
  <path
3108
3091
  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"
3109
- fill="url(#linearGradient-1)"
3092
+ fill="url(#linearGradient-drawer-expanded-attention-example-page-masthead)"
3110
3093
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3111
3094
  />
3112
3095
  </g>
@@ -3121,8 +3104,38 @@ section: components
3121
3104
  >
3122
3105
  <div class="pf-v5-c-toolbar__content">
3123
3106
  <div class="pf-v5-c-toolbar__content-section">
3107
+ <div class="pf-v5-c-toolbar__item">
3108
+ <button
3109
+ class="pf-v5-c-menu-toggle"
3110
+ type="button"
3111
+ aria-expanded="false"
3112
+ >
3113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3114
+ <span class="pf-v5-c-menu-toggle__controls">
3115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3116
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3117
+ </span>
3118
+ </span>
3119
+ </button>
3120
+ </div>
3121
+
3122
+ <div class="pf-v5-c-toolbar__item">
3123
+ <button
3124
+ class="pf-v5-c-menu-toggle"
3125
+ type="button"
3126
+ aria-expanded="false"
3127
+ >
3128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3129
+ <span class="pf-v5-c-menu-toggle__controls">
3130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3131
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3132
+ </span>
3133
+ </span>
3134
+ </button>
3135
+ </div>
3136
+
3124
3137
  <div
3125
- 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"
3138
+ 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"
3126
3139
  >
3127
3140
  <div class="pf-v5-c-toolbar__item">
3128
3141
  <button
@@ -3183,27 +3196,6 @@ section: components
3183
3196
  </button>
3184
3197
  </div>
3185
3198
  </div>
3186
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3187
- <button
3188
- class="pf-v5-c-menu-toggle pf-m-full-height"
3189
- type="button"
3190
- aria-expanded="false"
3191
- >
3192
- <span class="pf-v5-c-menu-toggle__icon">
3193
- <img
3194
- class="pf-v5-c-avatar"
3195
- alt="Avatar image"
3196
- src="/assets/images/img_avatar-light.svg"
3197
- />
3198
- </span>
3199
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3200
- <span class="pf-v5-c-menu-toggle__controls">
3201
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3202
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3203
- </span>
3204
- </span>
3205
- </button>
3206
- </div>
3207
3199
  </div>
3208
3200
  </div>
3209
3201
  </div>
@@ -4034,20 +4026,16 @@ section: components
4034
4026
  </button>
4035
4027
  </span>
4036
4028
  <div class="pf-v5-c-masthead__main">
4037
- <a
4038
- class="pf-v5-c-masthead__brand"
4039
- href="#"
4040
- style="--pf-v5-c-brand--Height: 36px;"
4041
- >
4042
- <svg height="36px" viewBox="0 0 679 158" role="img">
4043
- <title>Patternfly logo</title>
4029
+ <a class="pf-v5-c-masthead__brand" href="#">
4030
+ <svg height="40px" viewBox="0 0 679 158">
4031
+ <title>PF-HorizontalLogo-Color</title>
4044
4032
  <defs>
4045
4033
  <linearGradient
4046
4034
  x1="68%"
4047
4035
  y1="2.25860997e-13%"
4048
4036
  x2="32%"
4049
4037
  y2="100%"
4050
- id="linearGradient-1"
4038
+ id="linearGradient-drawer-expanded-with-groups-example-page-masthead"
4051
4039
  >
4052
4040
  <stop stop-color="#2B9AF3" offset="0%" />
4053
4041
  <stop
@@ -4057,13 +4045,7 @@ section: components
4057
4045
  />
4058
4046
  </linearGradient>
4059
4047
  </defs>
4060
- <g
4061
- id="PF-HorizontalLogo-Color"
4062
- stroke="none"
4063
- stroke-width="1"
4064
- fill="none"
4065
- fill-rule="evenodd"
4066
- >
4048
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4067
4049
  <g
4068
4050
  transform="translate(206.000000, 45.750000)"
4069
4051
  fill="var(--pf-t--global--text--color--regular)"
@@ -4098,19 +4080,18 @@ section: components
4098
4080
  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"
4099
4081
  />
4100
4082
  </g>
4101
- <g id="Logo" transform="translate(0.000000, 0.000000)">
4083
+ <g transform="translate(0.000000, 0.000000)">
4102
4084
  <path
4103
4085
  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"
4104
- id="Rectangle-Copy-17"
4105
- fill="var(--pf-t--global--color--brand--200)"
4086
+ fill="#0066CC"
4106
4087
  />
4107
4088
  <path
4108
4089
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4109
- fill="url(#linearGradient-1)"
4090
+ fill="url(#linearGradient-drawer-expanded-with-groups-example-page-masthead)"
4110
4091
  />
4111
4092
  <path
4112
4093
  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"
4113
- fill="url(#linearGradient-1)"
4094
+ fill="url(#linearGradient-drawer-expanded-with-groups-example-page-masthead)"
4114
4095
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4115
4096
  />
4116
4097
  </g>
@@ -4125,8 +4106,38 @@ section: components
4125
4106
  >
4126
4107
  <div class="pf-v5-c-toolbar__content">
4127
4108
  <div class="pf-v5-c-toolbar__content-section">
4109
+ <div class="pf-v5-c-toolbar__item">
4110
+ <button
4111
+ class="pf-v5-c-menu-toggle"
4112
+ type="button"
4113
+ aria-expanded="false"
4114
+ >
4115
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
4116
+ <span class="pf-v5-c-menu-toggle__controls">
4117
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4118
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4119
+ </span>
4120
+ </span>
4121
+ </button>
4122
+ </div>
4123
+
4124
+ <div class="pf-v5-c-toolbar__item">
4125
+ <button
4126
+ class="pf-v5-c-menu-toggle"
4127
+ type="button"
4128
+ aria-expanded="false"
4129
+ >
4130
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
4131
+ <span class="pf-v5-c-menu-toggle__controls">
4132
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4133
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4134
+ </span>
4135
+ </span>
4136
+ </button>
4137
+ </div>
4138
+
4128
4139
  <div
4129
- 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"
4140
+ 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"
4130
4141
  >
4131
4142
  <div class="pf-v5-c-toolbar__item">
4132
4143
  <button
@@ -4187,27 +4198,6 @@ section: components
4187
4198
  </button>
4188
4199
  </div>
4189
4200
  </div>
4190
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
4191
- <button
4192
- class="pf-v5-c-menu-toggle pf-m-full-height"
4193
- type="button"
4194
- aria-expanded="false"
4195
- >
4196
- <span class="pf-v5-c-menu-toggle__icon">
4197
- <img
4198
- class="pf-v5-c-avatar"
4199
- alt="Avatar image"
4200
- src="/assets/images/img_avatar-light.svg"
4201
- />
4202
- </span>
4203
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
4204
- <span class="pf-v5-c-menu-toggle__controls">
4205
- <span class="pf-v5-c-menu-toggle__toggle-icon">
4206
- <i class="fas fa-angle-down" aria-hidden="true"></i>
4207
- </span>
4208
- </span>
4209
- </button>
4210
- </div>
4211
4201
  </div>
4212
4202
  </div>
4213
4203
  </div>