@patternfly/patternfly 4.156.2 → 4.158.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/components/Dropdown/dropdown.css +89 -12
  2. package/components/Dropdown/dropdown.scss +122 -12
  3. package/components/DualListSelector/dual-list-selector.css +3 -5
  4. package/components/DualListSelector/dual-list-selector.scss +4 -6
  5. package/components/Menu/menu.css +21 -19
  6. package/components/Menu/menu.scss +29 -24
  7. package/components/MenuToggle/menu-toggle.css +48 -1
  8. package/components/MenuToggle/menu-toggle.scss +62 -1
  9. package/components/Nav/nav.css +129 -41
  10. package/components/Nav/nav.scss +164 -51
  11. package/docs/components/Dropdown/examples/Dropdown.css +4 -1
  12. package/docs/components/Dropdown/examples/Dropdown.md +251 -2
  13. package/docs/components/DualListSelector/examples/DualListSelector.md +359 -182
  14. package/docs/components/Menu/examples/Menu.css +2 -1
  15. package/docs/components/Menu/examples/Menu.md +123 -0
  16. package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
  17. package/docs/components/Nav/examples/Navigation.css +7 -6
  18. package/docs/components/Nav/examples/Navigation.md +1368 -12
  19. package/package.json +1 -1
  20. package/patternfly-no-reset.css +290 -78
  21. package/patternfly.css +290 -78
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
package/components/Menu/menu.scss CHANGED
@@ -10,6 +10,8 @@
10
10
 
11
11
  // Flyout
12
12
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
13
+ --pf-c-menu--m-flyout__menu--Right: auto;
14
+ --pf-c-menu--m-flyout__menu--Bottom: auto;
13
15
  --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
14
16
  --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
15
17
  --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
@@ -54,7 +56,6 @@
54
56
  --pf-c-menu__header--c-menu__item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
55
57
  --pf-c-menu__header--c-menu__item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
56
58
 
57
-
58
59
  // Search
59
60
  --pf-c-menu__search--PaddingTop: var(--pf-global--spacer--md);
60
61
  --pf-c-menu__search--PaddingRight: var(--pf-global--spacer--md);
@@ -190,8 +191,6 @@
190
191
  box-shadow: var(--pf-c-menu--BoxShadow);
191
192
 
192
193
  .pf-c-menu__content {
193
- overflow-y: auto;
194
-
195
194
  & & {
196
195
  overflow: visible;
197
196
  }
@@ -202,33 +201,29 @@
202
201
  margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
203
202
  }
204
203
 
205
- &.pf-m-flyout {
206
- overflow: visible;
207
-
208
- .pf-c-menu {
209
- position: absolute;
210
- top: var(--pf-c-menu--m-flyout__menu--Top);
211
- right: auto;
212
- left: var(--pf-c-menu--m-flyout__menu--Left);
213
-
214
- &.pf-m-top {
215
- top: auto;
216
- bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
217
- }
204
+ // nested flyout menu
205
+ & &.pf-m-flyout,
206
+ &.pf-m-flyout & {
207
+ position: absolute;
208
+ top: var(--pf-c-menu--m-flyout__menu--Top);
209
+ right: var(--pf-c-menu--m-flyout__menu--Right);
210
+ bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
211
+ left: var(--pf-c-menu--m-flyout__menu--Left);
218
212
 
219
- &.pf-m-left {
220
- right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
221
- left: auto;
222
- }
223
- }
224
213
 
225
214
  .pf-c-menu__content {
226
215
  overflow-y: visible;
227
216
  }
217
+ }
228
218
 
229
- .pf-c-menu__list-item {
230
- position: relative;
231
- }
219
+ &.pf-m-top {
220
+ --pf-c-menu--m-flyout__menu--Top: auto;
221
+ --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
222
+ }
223
+
224
+ &.pf-m-left {
225
+ --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
226
+ --pf-c-menu--m-flyout__menu--Left: auto;
232
227
  }
233
228
 
234
229
  &.pf-m-drilldown {
@@ -276,6 +271,11 @@
276
271
  position: relative;
277
272
  overflow: hidden;
278
273
  transition: var(--pf-c-menu--m-drilldown__list--Transition);
274
+
275
+ & .pf-c-menu__list {
276
+ --pf-c-menu__list--PaddingTop: 0;
277
+ --pf-c-menu__list--PaddingBottom: 0;
278
+ }
279
279
  }
280
280
 
281
281
  // stylelint-disable selector-max-class, max-nesting-depth
@@ -329,6 +329,10 @@
329
329
  --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
330
330
  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
331
331
  --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
332
+
333
+ .pf-c-menu__content {
334
+ overflow-y: auto;
335
+ }
332
336
  }
333
337
  }
334
338
 
@@ -414,6 +418,7 @@
414
418
  .pf-c-menu__list-item {
415
419
  @include pf-hidden-visible(var(--pf-c-menu__list-item--Display));
416
420
 
421
+ position: relative;
417
422
  color: var(--pf-c-menu__list-item--Color);
418
423
  background-color: var(--pf-c-menu__list-item--BackgroundColor);
419
424
 
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -33,14 +33,28 @@
33
33
  --pf-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
34
34
  --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
35
35
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
36
- --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
37
36
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
37
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
38
38
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
39
39
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
40
40
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
41
41
  --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
42
42
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
43
43
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
44
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
45
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
46
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
47
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
48
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
49
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
50
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
51
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
52
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
53
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
54
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
55
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
56
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
57
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
44
58
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
45
59
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
46
60
  --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -100,6 +114,39 @@
100
114
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
101
115
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
102
116
  }
117
+ .pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
118
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
119
+ }
120
+ .pf-c-menu-toggle.pf-m-secondary {
121
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
122
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
123
+ }
124
+ .pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
125
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
126
+ }
127
+ .pf-c-menu-toggle.pf-m-secondary::before {
128
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
129
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
130
+ }
131
+ .pf-c-menu-toggle.pf-m-secondary::after {
132
+ border: 0;
133
+ }
134
+ .pf-c-menu-toggle.pf-m-secondary:hover {
135
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
136
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
137
+ }
138
+ .pf-c-menu-toggle.pf-m-secondary:focus {
139
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
140
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
141
+ }
142
+ .pf-c-menu-toggle.pf-m-secondary:active {
143
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
144
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
145
+ }
146
+ .pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
147
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
148
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
149
+ }
103
150
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
104
151
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
105
152
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -49,8 +49,8 @@
49
49
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
50
50
 
51
51
  // Primary
52
- --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
53
52
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
53
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
54
54
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
55
55
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
56
56
  --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -58,6 +58,22 @@
58
58
  --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
59
59
  --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
60
60
 
61
+ // Secondary
62
+ --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
63
+ --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
64
+ --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
65
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
66
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
67
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
68
+ --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
69
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
70
+ --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
71
+ --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
72
+ --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
73
+ --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
74
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
75
+ --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
76
+
61
77
  // Plain
62
78
  --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
63
79
  --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
@@ -134,6 +150,51 @@
134
150
  --pf-c-menu-toggle--active--BackgroundColor: var(--pf-c-menu-toggle--m-primary--active--BackgroundColor);
135
151
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
136
152
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
153
+
154
+
155
+ &,
156
+ &::before {
157
+ border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
158
+ }
159
+ }
160
+
161
+ &.pf-m-secondary {
162
+ --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
163
+ --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
164
+
165
+ &,
166
+ &::before {
167
+ border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
168
+ }
169
+
170
+ &::before {
171
+ border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
172
+ border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
173
+ }
174
+
175
+ &::after {
176
+ border: 0;
177
+ }
178
+
179
+ &:hover {
180
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
181
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
182
+ }
183
+
184
+ &:focus {
185
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
186
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
187
+ }
188
+
189
+ &:active {
190
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
191
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
192
+ }
193
+
194
+ &.pf-m-expanded {
195
+ --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
196
+ --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
197
+ }
137
198
  }
138
199
 
139
200
  &.pf-m-plain:not(.pf-m-text) {
package/components/Nav/nav.css CHANGED
@@ -237,7 +237,6 @@
237
237
  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
238
238
  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
239
239
  --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
240
- --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
241
240
  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
242
241
  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
243
242
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
@@ -246,11 +245,10 @@
246
245
  --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
247
246
  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
248
247
  --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
248
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
249
249
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
250
+ --pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
250
251
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-global--spacer--lg);
251
- --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
252
- --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
253
- --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
254
252
  --pf-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-global--Color--light-200);
255
253
  --pf-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
256
254
  --pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-c-nav__link--OutlineOffset);
@@ -259,17 +257,52 @@
259
257
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
260
258
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
261
259
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
260
+ --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
261
+ --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
262
+ --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
262
263
  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
263
- --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
264
- --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
265
- --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
266
- --pf-c-nav__item--m-drilldown__subnav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
267
- --pf-c-nav__item--m-drilldown__subnav--ZIndex: var(--pf-global--ZIndex--xs);
268
- --pf-c-nav__item--m-drilldown__link--PaddingTop: var(--pf-global--spacer--md);
269
- --pf-c-nav__item--m-drilldown__link--PaddingBottom: var(--pf-global--spacer--md);
270
- --pf-c-nav__item--m-drilldown__link--FontSize: var(--pf-global--FontSize--md);
271
- --pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate: 0;
272
- --pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex: var(--pf-global--ZIndex--xs);
264
+ --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
265
+ --pf-c-nav--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
266
+ --pf-c-nav--c-menu__list--PaddingTop: 0;
267
+ --pf-c-nav--c-menu__list--PaddingBottom: 0;
268
+ --pf-c-nav--c-menu__list-item--Color: var(--pf-global--Color--light-100);
269
+ --pf-c-nav--c-menu__list-item--hover--Color: var(--pf-global--Color--light-100);
270
+ --pf-c-nav--c-menu__list-item--active--Color: var(--pf-global--Color--light-100);
271
+ --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
272
+ --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
273
+ --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
274
+ --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
275
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
276
+ --pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
277
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
278
+ --pf-c-nav--c-menu__item--xl--PaddingRight: var(--pf-global--spacer--lg);
279
+ --pf-c-nav--c-menu__item--xl--PaddingLeft: var(--pf-global--spacer--lg);
280
+ --pf-c-nav--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
281
+ --pf-c-nav--c-menu__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
282
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
283
+ --pf-c-nav--c-menu__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
284
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: 0;
285
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: transparent;
286
+ --pf-c-nav--c-menu__item--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
287
+ --pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth: var(--pf-global--BorderWidth--xl);
288
+ --pf-c-nav--c-menu__item--m-current--after--BorderColor: var(--pf-global--active-color--400);
289
+ --pf-c-nav--c-menu__item-description--Color: var(--pf-global--Color--400);
290
+ --pf-c-nav--c-menu--m-flyout--left-offset: 0.25rem;
291
+ --pf-c-nav--c-menu--m-flyout--m-left--right-offset: 0.25rem;
292
+ --pf-c-nav--c-menu--m-flyout--Top: 0;
293
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: calc(var(--pf-c-nav--c-menu--m-flyout--Top) * -1);
294
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: auto;
295
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: auto;
296
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav--c-menu--m-flyout--left-offset));
297
+ --pf-c-nav--c-menu--m-flyout--m-left--Right: calc(100% - var(--pf-c-nav--c-menu--m-flyout--m-left--right-offset));
298
+ --pf-c-nav--c-menu--m-flyout--m-top--Bottom: 0;
299
+ --pf-c-nav--c-menu--m-flyout--BoxShadow: var(--pf-global--BoxShadow--lg);
300
+ --pf-c-nav--c-menu--m-flyout__item--PaddingTop: var(--pf-global--spacer--sm);
301
+ --pf-c-nav--c-menu--m-flyout__item--PaddingRight: var(--pf-global--spacer--lg);
302
+ --pf-c-nav--c-menu--m-flyout__item--PaddingBottom: var(--pf-global--spacer--sm);
303
+ --pf-c-nav--c-menu--m-flyout__item--PaddingLeft: var(--pf-global--spacer--lg);
304
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
305
+ --pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
273
306
  --pf-c-nav__toggle--m-start--MarginRight: var(--pf-global--spacer--sm);
274
307
  position: relative;
275
308
  }
@@ -286,8 +319,86 @@
286
319
  --pf-c-nav__section-title--PaddingRight: var(--pf-c-nav__section-title--xl--PaddingRight);
287
320
  --pf-c-nav__section-title--PaddingLeft: var(--pf-c-nav__section-title--xl--PaddingLeft);
288
321
  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav--xl--PaddingLeft);
322
+ --pf-c-nav--c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--xl--PaddingRight);
323
+ --pf-c-nav--c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--xl--PaddingLeft);
289
324
  }
290
325
  }
326
+ .pf-c-nav .pf-c-menu {
327
+ --pf-c-menu--MinWidth: 100%;
328
+ --pf-c-menu--BackgroundColor: var(--pf-c-nav--c-menu--BackgroundColor);
329
+ --pf-c-menu__list--PaddingTop: var(--pf-c-nav--c-menu__list--PaddingTop);
330
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-nav--c-menu__list--PaddingBottom);
331
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu__item--PaddingTop);
332
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu__item--PaddingRight);
333
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu__item--PaddingBottom);
334
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu__item--PaddingLeft);
335
+ --pf-c-menu__list-item--Color: var(--pf-c-nav--c-menu__list-item--Color);
336
+ --pf-c-menu__list-item--hover--Color: var(--pf-c-nav--c-menu__list-item--hover--Color);
337
+ --pf-c-menu__list-item--active--Color: var(--pf-c-nav--c-menu__list-item--active--Color);
338
+ --pf-c-menu__list-item--focus-within--Color: var(--pf-c-nav--c-menu__list-item--focus-within--Color);
339
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav--c-menu__list-item--hover--BackgroundColor);
340
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor);
341
+ --pf-c-menu__item-description--Color: var(--pf-c-nav--c-menu__item-description--Color);
342
+ }
343
+ .pf-c-nav .pf-c-menu:first-child > .pf-c-menu__content {
344
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
345
+ }
346
+ .pf-c-nav .pf-c-menu.pf-m-flyout, .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu {
347
+ --pf-c-menu--BoxShadow: var(--pf-c-nav--c-menu--m-flyout--BoxShadow);
348
+ --pf-c-menu__list--PaddingTop: 0;
349
+ --pf-c-menu__list--PaddingBottom: 0;
350
+ --pf-c-menu__item--FontSize: var(--pf-c-nav--c-menu__item--FontSize);
351
+ --pf-c-menu__item--Color: var(--pf-c-nav--c-menu__item--Color);
352
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav--c-menu--m-flyout__item--PaddingTop);
353
+ --pf-c-menu__item--PaddingRight: var(--pf-c-nav--c-menu--m-flyout__item--PaddingRight);
354
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav--c-menu--m-flyout__item--PaddingBottom);
355
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-nav--c-menu--m-flyout__item--PaddingLeft);
356
+ top: var(--pf-c-nav--c-menu--m-flyout--c-menu--Top);
357
+ right: var(--pf-c-nav--c-menu--m-flyout--c-menu--Right);
358
+ bottom: var(--pf-c-nav--c-menu--m-flyout--c-menu--Bottom);
359
+ left: var(--pf-c-nav--c-menu--m-flyout--c-menu--Left);
360
+ }
361
+ .pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover {
362
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
363
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor);
364
+ }
365
+ .pf-c-nav .pf-c-menu.pf-m-top {
366
+ --pf-c-nav--c-menu--m-flyout--c-menu--Top: auto;
367
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav--c-menu--m-flyout--m-top--Bottom);
368
+ }
369
+ .pf-c-nav .pf-c-menu.pf-m-left {
370
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav--c-menu--m-flyout--m-left--Right);
371
+ --pf-c-nav--c-menu--m-flyout--c-menu--Left: auto;
372
+ }
373
+ .pf-c-nav .pf-c-menu .pf-c-divider {
374
+ margin-top: 0;
375
+ margin-bottom: 0;
376
+ }
377
+ .pf-c-nav .pf-c-menu__item {
378
+ position: relative;
379
+ outline-offset: var(--pf-c-nav--c-menu__item--OutlineOffset);
380
+ }
381
+ .pf-c-nav .pf-c-menu__item::before, .pf-c-nav .pf-c-menu__item::after {
382
+ position: absolute;
383
+ top: 0;
384
+ content: "";
385
+ }
386
+ .pf-c-nav .pf-c-menu__item::before {
387
+ right: 0;
388
+ bottom: calc(var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
389
+ left: 0;
390
+ border-bottom: var(--pf-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav--c-menu__item--before--BorderBottomColor);
391
+ }
392
+ .pf-c-nav .pf-c-menu__item::after {
393
+ bottom: 0;
394
+ left: 0;
395
+ border-left: var(--pf-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-c-nav--c-menu__item--after--BorderLeftColor);
396
+ }
397
+ .pf-c-nav .pf-c-menu__item.pf-m-current {
398
+ --pf-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
399
+ --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
400
+ background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
401
+ }
291
402
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
292
403
  content: none;
293
404
  }
@@ -539,9 +650,13 @@
539
650
  --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
540
651
  --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
541
652
  --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
653
+ --pf-c-menu__item--PaddingTop: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop);
542
654
  --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
655
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom);
543
656
  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
544
657
  --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
658
+ --pf-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
659
+ --pf-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
545
660
  position: absolute;
546
661
  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
547
662
  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
@@ -549,14 +664,6 @@
549
664
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
550
665
  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
551
666
  }
552
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
553
- top: auto;
554
- bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
555
- }
556
- .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
557
- right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
558
- left: auto;
559
- }
560
667
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
561
668
  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
562
669
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
@@ -581,25 +688,6 @@
581
688
  content: "";
582
689
  border-left: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
583
690
  }
584
- .pf-c-nav__item.pf-m-drilldown {
585
- --pf-c-nav__subnav--PaddingTop: var(--pf-c-nav__item--m-drilldown__subnav--PaddingTop);
586
- --pf-c-nav__subnav--PaddingBottom: var(--pf-c-nav__item--m-drilldown__subnav--PaddingBottom);
587
- --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__item--m-drilldown__subnav--PaddingLeft);
588
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: var(--pf-c-nav__item--m-drilldown--m-expanded__toggle-icon--Rotate);
589
- }
590
- .pf-c-nav__item.pf-m-drilldown > .pf-c-nav__subnav {
591
- --pf-c-nav__link--PaddingTop: var(--pf-c-nav__item--m-drilldown__link--PaddingTop);
592
- --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__item--m-drilldown__link--PaddingBottom);
593
- --pf-c-nav__link--FontSize: var(--pf-c-nav__item--m-drilldown__link--FontSize);
594
- --pf-c-nav__subnav--MaxHeight: 100%;
595
- position: absolute;
596
- top: 0;
597
- left: 100%;
598
- z-index: var(--pf-c-nav__item--m-drilldown__subnav--ZIndex);
599
- width: 100%;
600
- height: 100%;
601
- background-color: var(--pf-c-nav__item--m-drilldown__subnav--BackgroundColor);
602
- }
603
691
  .pf-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-c-nav__subnav {
604
692
  left: 0;
605
693
  z-index: var(--pf-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);