@patternfly/patternfly 4.144.0 → 4.144.4

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 (13) hide show
  1. package/RELEASE-NOTES.md +40 -0
  2. package/components/DescriptionList/description-list.css +2 -6
  3. package/components/DescriptionList/description-list.scss +2 -5
  4. package/components/Masthead/masthead.css +8 -8
  5. package/components/Masthead/masthead.scss +2 -2
  6. package/components/Nav/nav.css +48 -8
  7. package/components/Nav/nav.scss +64 -13
  8. package/docs/components/Nav/examples/Navigation.css +0 -10
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +58 -22
  11. package/patternfly.css +58 -22
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md CHANGED
@@ -3,6 +3,46 @@ id: Release notes
3
3
  section: developer-resources
4
4
  releaseNoteTOC: true
5
5
  ---
6
+
7
+ ## 2021.13 release notes (2021-10-08)
8
+ Packages released:
9
+ - [@patternfly/patternfly@v4.144.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.144.2)
10
+
11
+ ### Components
12
+ - **Backdrop:** Added var for position to allow customization ([#4391](https://github.com/patternfly/patternfly/pull/4391))
13
+ - **Banner:** Added link style ([#4383](https://github.com/patternfly/patternfly/pull/4383))
14
+ - **Card:**
15
+ * Fixed demo image paths ([#4400](https://github.com/patternfly/patternfly/pull/4400))
16
+ * Updated log view and event view demos ([#4371](https://github.com/patternfly/patternfly/pull/4371))
17
+ - **Drag drop:**
18
+ * Added drag drop ([#4398](https://github.com/patternfly/patternfly/pull/4398))
19
+ * Moved drag drop styles into component ([#4404](https://github.com/patternfly/patternfly/pull/4404))
20
+ - **Dual list selector:** Added support for disabled items ([#4361](https://github.com/patternfly/patternfly/pull/4361))
21
+ - **Jump links:** Moved text into expandable toggle ([#4352](https://github.com/patternfly/patternfly/pull/4352))
22
+ - **Label:** Added compact variant ([#4386](https://github.com/patternfly/patternfly/pull/4386))
23
+ - **Log viewer:**
24
+ * Preserved white space in log viewer text ([#4397](https://github.com/patternfly/patternfly/pull/4397))
25
+ * Made text fill available space in container ([#4406](https://github.com/patternfly/patternfly/pull/4406))
26
+ - **Masthead:** Updated column-end ([#4418](https://github.com/patternfly/patternfly/pull/4418))
27
+ - **Masthead, description list**: Fixed undefined vars ([#4421](https://github.com/patternfly/patternfly/pull/4421))
28
+ - **Menu:** Added scrollable and plain modifiers ([#4392](https://github.com/patternfly/patternfly/pull/4392))
29
+ - **Nav:** Added support for menu component as flyout ([#4417](https://github.com/patternfly/patternfly/pull/4417))
30
+ - **Progress stepper:** Added help text for popover ([#4381](https://github.com/patternfly/patternfly/pull/4381))
31
+ - **Radio, checkbox, form:** Corrected label alignment ([#4375](https://github.com/patternfly/patternfly/pull/4375))
32
+ - **Select:**
33
+ * Added support for placeholder in toggle ([#4377](https://github.com/patternfly/patternfly/pull/4377))
34
+ * Removed double invalid icon on invalid typeahead ([#4385](https://github.com/patternfly/patternfly/pull/4385))
35
+ - **Table:**
36
+ * Added fixed columns ([#4326](https://github.com/patternfly/patternfly/pull/4326))
37
+ * Addressed followup compact tree issues ([#4389](https://github.com/patternfly/patternfly/pull/4389))
38
+ - **Text input group:** Added component ([#4408](https://github.com/patternfly/patternfly/pull/4408))
39
+ - **Toolbar:** Adjusted demo heights, removed dupe demo ([#4373](https://github.com/patternfly/patternfly/pull/4373))
40
+
41
+ ### Other
42
+ - **Deps:** Update dependency theme-patternfly-org to v0.7.3 ([#4275](https://github.com/patternfly/patternfly/pull/4275))
43
+ - **Utilities:** Added breakpoint options to docs ([#4409](https://github.com/patternfly/patternfly/pull/4409))
44
+
45
+
6
46
  ## 2021.12 release notes (2021-09-14)
7
47
  Packages released:
8
48
  - [@patternfly/patternfly@v4.135.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.135.2)
package/components/DescriptionList/description-list.css CHANGED
@@ -19,6 +19,8 @@
19
19
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
20
20
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
21
21
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
22
+ --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
23
+ --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
22
24
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
23
25
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
24
26
  --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
@@ -32,12 +34,6 @@
32
34
  column-gap: var(--pf-c-description-list--ColumnGap);
33
35
  grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
34
36
  }
35
- @media screen and (min-width: 768px) {
36
- .pf-c-description-list {
37
- --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
38
- --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
39
- }
40
- }
41
37
  .pf-c-description-list[class*=pf-m-horizontal] {
42
38
  --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
43
39
  }
package/components/DescriptionList/description-list.scss CHANGED
@@ -31,16 +31,13 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
31
31
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
32
32
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width); // use --pf-c-description-list__term--width here as it is re-defined on line 45
33
33
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
34
+ --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
35
+ --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
34
36
 
35
37
  // auto-fit
36
38
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: #{pf-size-prem(250px)};
37
39
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
38
40
 
39
- @media screen and (min-width: $pf-global--breakpoint--md) {
40
- --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
41
- --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
42
- }
43
-
44
41
  // help text
45
42
  --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
46
43
  --pf-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
package/components/Masthead/masthead.css CHANGED
@@ -130,7 +130,7 @@
130
130
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
131
131
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
132
132
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
133
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
133
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
134
134
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
135
135
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
136
136
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -207,7 +207,7 @@
207
207
  }
208
208
  .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
209
209
  --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
210
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
210
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
211
211
  }
212
212
  .pf-c-masthead .pf-c-context-selector {
213
213
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
@@ -311,7 +311,7 @@
311
311
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
312
312
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
313
313
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
314
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
314
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
315
315
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
316
316
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
317
317
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -368,7 +368,7 @@
368
368
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
369
369
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
370
370
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
371
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
371
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
372
372
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
373
373
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
374
374
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -428,7 +428,7 @@
428
428
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
429
429
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
430
430
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
431
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
431
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
432
432
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
433
433
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
434
434
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -488,7 +488,7 @@
488
488
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
489
489
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
490
490
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
491
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
491
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
492
492
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
493
493
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
494
494
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -548,7 +548,7 @@
548
548
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
549
549
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
550
550
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
551
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
551
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
552
552
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
553
553
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
554
554
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -608,7 +608,7 @@
608
608
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
609
609
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
610
610
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
611
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
611
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
612
612
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
613
613
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
614
614
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
package/components/Masthead/masthead.scss CHANGED
@@ -11,7 +11,7 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
11
11
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12
12
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
13
13
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
14
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15
15
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
16
16
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
17
17
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -214,7 +214,7 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
214
214
 
215
215
  &.pf-m-full-height {
216
216
  --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
217
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
217
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
218
218
  }
219
219
  }
220
220
 
package/components/Nav/nav.css CHANGED
@@ -219,11 +219,25 @@
219
219
  --pf-c-nav__list--ScrollSnapTypeStrictness: proximity;
220
220
  --pf-c-nav__list--ScrollSnapType: var(--pf-c-nav__list--ScrollSnapTypeAxis) var(--pf-c-nav__list--ScrollSnapTypeStrictness);
221
221
  --pf-c-nav__item--ScrollSnapAlign: end;
222
+ --pf-c-nav__item--m-flyout--c-menu--top-offset: 0px;
223
+ --pf-c-nav__item--m-flyout--c-menu--left-offset: 0.25rem;
224
+ --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
225
+ --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset: 0.25rem;
222
226
  --pf-c-nav__item--m-flyout--MarginTop: 0;
223
- --pf-c-nav__item--m-flyout--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
224
- --pf-c-nav__item--m-flyout--focus--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
225
- --pf-c-nav__item--m-flyout--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
227
+ --pf-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
228
+ --pf-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
229
+ --pf-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
230
+ --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
231
+ --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
232
+ --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
226
233
  --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
234
+ --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
235
+ --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
236
+ --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));
237
+ --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
238
+ --pf-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--left-offset));
239
+ --pf-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--m-left--right-offset));
240
+ --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));
227
241
  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
228
242
  --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
229
243
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
@@ -238,6 +252,8 @@
238
252
  --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-c-nav__item--before--BorderColor);
239
253
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
240
254
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
255
+ --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));
256
+ --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
241
257
  --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
242
258
  --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
243
259
  --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
@@ -468,11 +484,17 @@
468
484
  content: "";
469
485
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
470
486
  }
471
- .pf-c-nav__item.pf-m-flyout, .pf-c-nav__item.pf-m-drilldown {
472
- position: static;
487
+ .pf-c-nav__item.pf-m-flyout:hover {
488
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
489
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
473
490
  }
474
- .pf-c-nav__item.pf-m-flyout.pf-m-expanded .pf-c-nav__subnav, .pf-c-nav__item.pf-m-drilldown.pf-m-expanded .pf-c-nav__subnav {
475
- overflow: visible;
491
+ .pf-c-nav__item.pf-m-flyout:focus {
492
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
493
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
494
+ }
495
+ .pf-c-nav__item.pf-m-flyout:active {
496
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
497
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
476
498
  }
477
499
  .pf-c-nav__item.pf-m-flyout .pf-c-menu {
478
500
  --pf-c-menu--MinWidth: 100%;
@@ -488,6 +510,24 @@
488
510
  --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
489
511
  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
490
512
  --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
513
+ position: absolute;
514
+ top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
515
+ left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
516
+ }
517
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
518
+ top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
519
+ }
520
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
521
+ top: auto;
522
+ bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
523
+ }
524
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
525
+ right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
526
+ left: auto;
527
+ }
528
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
529
+ --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);
530
+ --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);
491
531
  }
492
532
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
493
533
  position: relative;
@@ -503,7 +543,7 @@
503
543
  }
504
544
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
505
545
  position: absolute;
506
- top: 0;
546
+ top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
507
547
  bottom: 0;
508
548
  left: 0;
509
549
  content: "";
package/components/Nav/nav.scss CHANGED
@@ -264,14 +264,32 @@
264
264
 
265
265
  // Flyout variant ====================================== //
266
266
 
267
+ // stylelint-disable length-zero-no-unit
268
+ // Needs a unit because of type checking for use in calc()
269
+ --pf-c-nav__item--m-flyout--c-menu--top-offset: 0px;
270
+ --pf-c-nav__item--m-flyout--c-menu--left-offset: #{pf-size-prem(4px)};
271
+ --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
272
+ --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset: #{pf-size-prem(4px)};
273
+ // stylelint-enable
274
+
267
275
  // Item
268
276
  --pf-c-nav__item--m-flyout--MarginTop: 0;
269
- --pf-c-nav__item--m-flyout--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
270
- --pf-c-nav__item--m-flyout--focus--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
271
- --pf-c-nav__item--m-flyout--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
277
+ --pf-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
278
+ --pf-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
279
+ --pf-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
280
+ --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
281
+ --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
282
+ --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
272
283
  --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
273
-
274
- // Subnav
284
+ --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
285
+
286
+ // Menu
287
+ --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
288
+ --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));
289
+ --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
290
+ --pf-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--left-offset));
291
+ --pf-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--m-left--right-offset));
292
+ --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));
275
293
  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
276
294
  --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
277
295
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
@@ -286,6 +304,8 @@
286
304
  --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-c-nav__item--before--BorderColor);
287
305
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
288
306
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
307
+ --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));
308
+ --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
289
309
 
290
310
  // end flyout variant ====================================== //
291
311
 
@@ -567,16 +587,24 @@
567
587
  }
568
588
  }
569
589
 
570
- &.pf-m-flyout,
571
- &.pf-m-drilldown {
572
- position: static;
590
+ &.pf-m-flyout {
591
+ &:hover {
592
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
593
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
594
+ }
573
595
 
574
- &.pf-m-expanded .pf-c-nav__subnav {
575
- overflow: visible;
596
+ &:focus {
597
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
598
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
576
599
  }
577
- }
578
600
 
579
- &.pf-m-flyout {
601
+ &:active {
602
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
603
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
604
+ }
605
+
606
+ // position: relative;
607
+
580
608
  .pf-c-menu {
581
609
  --pf-c-menu--MinWidth: 100%;
582
610
  --pf-c-menu--BoxShadow: var(--pf-c-nav__item--m-flyout--c-menu--BoxShadow);
@@ -592,6 +620,29 @@
592
620
  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
593
621
  --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
594
622
 
623
+ position: absolute;
624
+ top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
625
+ left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
626
+
627
+ .pf-c-menu {
628
+ top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
629
+ }
630
+
631
+ &.pf-m-top {
632
+ top: auto;
633
+ bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
634
+ }
635
+
636
+ &.pf-m-left {
637
+ right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
638
+ left: auto;
639
+ }
640
+
641
+ .pf-c-menu__list-item:first-child {
642
+ --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);
643
+ --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);
644
+ }
645
+
595
646
  // stylelint-disable max-nesting-depth, selector-max-class
596
647
  .pf-c-menu__item {
597
648
  position: relative;
@@ -609,7 +660,7 @@
609
660
  &:hover {
610
661
  &::after {
611
662
  position: absolute;
612
- top: 0;
663
+ top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
613
664
  bottom: 0;
614
665
  left: 0;
615
666
  content: "";
package/docs/components/Nav/examples/Navigation.css CHANGED
@@ -46,13 +46,3 @@
46
46
  #ws-core-c-navigation-level-3-drilldown {
47
47
  width: 260px;
48
48
  }
49
-
50
- #ws-core-c-navigation-flyout-with-menu-component .pf-c-nav__item.pf-m-flyout {
51
- position: relative;
52
- }
53
-
54
- #ws-core-c-navigation-flyout-with-menu-component .pf-c-menu.pf-m-flyout {
55
- position: absolute;
56
- top: 0;
57
- left: 100%;
58
- }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.144.0",
4
+ "version": "4.144.4",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -9207,6 +9207,8 @@ label.pf-c-check, .pf-c-check__label,
9207
9207
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
9208
9208
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
9209
9209
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
9210
+ --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
9211
+ --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
9210
9212
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
9211
9213
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
9212
9214
  --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
@@ -9220,12 +9222,6 @@ label.pf-c-check, .pf-c-check__label,
9220
9222
  column-gap: var(--pf-c-description-list--ColumnGap);
9221
9223
  grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
9222
9224
  }
9223
- @media screen and (min-width: 768px) {
9224
- .pf-c-description-list {
9225
- --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
9226
- --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
9227
- }
9228
- }
9229
9225
  .pf-c-description-list[class*=pf-m-horizontal] {
9230
9226
  --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
9231
9227
  }
@@ -14988,7 +14984,7 @@ ul.pf-c-list {
14988
14984
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14989
14985
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14990
14986
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14991
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
14987
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14992
14988
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14993
14989
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14994
14990
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15065,7 +15061,7 @@ ul.pf-c-list {
15065
15061
  }
15066
15062
  .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
15067
15063
  --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
15068
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
15064
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
15069
15065
  }
15070
15066
  .pf-c-masthead .pf-c-context-selector {
15071
15067
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
@@ -15169,7 +15165,7 @@ ul.pf-c-list {
15169
15165
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15170
15166
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15171
15167
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15172
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15168
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15173
15169
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15174
15170
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15175
15171
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15226,7 +15222,7 @@ ul.pf-c-list {
15226
15222
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15227
15223
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15228
15224
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15229
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15225
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15230
15226
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15231
15227
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15232
15228
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15286,7 +15282,7 @@ ul.pf-c-list {
15286
15282
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15287
15283
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15288
15284
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15289
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15285
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15290
15286
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15291
15287
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15292
15288
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15346,7 +15342,7 @@ ul.pf-c-list {
15346
15342
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15347
15343
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15348
15344
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15349
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15345
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15350
15346
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15351
15347
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15352
15348
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15406,7 +15402,7 @@ ul.pf-c-list {
15406
15402
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15407
15403
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15408
15404
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15409
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15405
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15410
15406
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15411
15407
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15412
15408
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15466,7 +15462,7 @@ ul.pf-c-list {
15466
15462
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15467
15463
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15468
15464
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15469
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15465
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15470
15466
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15471
15467
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15472
15468
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -16554,11 +16550,25 @@ ul.pf-c-list {
16554
16550
  --pf-c-nav__list--ScrollSnapTypeStrictness: proximity;
16555
16551
  --pf-c-nav__list--ScrollSnapType: var(--pf-c-nav__list--ScrollSnapTypeAxis) var(--pf-c-nav__list--ScrollSnapTypeStrictness);
16556
16552
  --pf-c-nav__item--ScrollSnapAlign: end;
16553
+ --pf-c-nav__item--m-flyout--c-menu--top-offset: 0px;
16554
+ --pf-c-nav__item--m-flyout--c-menu--left-offset: 0.25rem;
16555
+ --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
16556
+ --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset: 0.25rem;
16557
16557
  --pf-c-nav__item--m-flyout--MarginTop: 0;
16558
- --pf-c-nav__item--m-flyout--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
16559
- --pf-c-nav__item--m-flyout--focus--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
16560
- --pf-c-nav__item--m-flyout--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
16558
+ --pf-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16559
+ --pf-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16560
+ --pf-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
16561
+ --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
16562
+ --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
16563
+ --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
16561
16564
  --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
16565
+ --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
16566
+ --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
16567
+ --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));
16568
+ --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
16569
+ --pf-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--left-offset));
16570
+ --pf-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--m-left--right-offset));
16571
+ --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));
16562
16572
  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
16563
16573
  --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
16564
16574
  --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
@@ -16573,6 +16583,8 @@ ul.pf-c-list {
16573
16583
  --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-c-nav__item--before--BorderColor);
16574
16584
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
16575
16585
  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
16586
+ --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));
16587
+ --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
16576
16588
  --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
16577
16589
  --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
16578
16590
  --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
@@ -16803,11 +16815,17 @@ ul.pf-c-list {
16803
16815
  content: "";
16804
16816
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
16805
16817
  }
16806
- .pf-c-nav__item.pf-m-flyout, .pf-c-nav__item.pf-m-drilldown {
16807
- position: static;
16818
+ .pf-c-nav__item.pf-m-flyout:hover {
16819
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
16820
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
16808
16821
  }
16809
- .pf-c-nav__item.pf-m-flyout.pf-m-expanded .pf-c-nav__subnav, .pf-c-nav__item.pf-m-drilldown.pf-m-expanded .pf-c-nav__subnav {
16810
- overflow: visible;
16822
+ .pf-c-nav__item.pf-m-flyout:focus {
16823
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
16824
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
16825
+ }
16826
+ .pf-c-nav__item.pf-m-flyout:active {
16827
+ --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
16828
+ --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
16811
16829
  }
16812
16830
  .pf-c-nav__item.pf-m-flyout .pf-c-menu {
16813
16831
  --pf-c-menu--MinWidth: 100%;
@@ -16823,6 +16841,24 @@ ul.pf-c-list {
16823
16841
  --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
16824
16842
  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
16825
16843
  --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
16844
+ position: absolute;
16845
+ top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
16846
+ left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
16847
+ }
16848
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
16849
+ top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
16850
+ }
16851
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
16852
+ top: auto;
16853
+ bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
16854
+ }
16855
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
16856
+ right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
16857
+ left: auto;
16858
+ }
16859
+ .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
16860
+ --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);
16861
+ --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);
16826
16862
  }
16827
16863
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
16828
16864
  position: relative;
@@ -16838,7 +16874,7 @@ ul.pf-c-list {
16838
16874
  }
16839
16875
  .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
16840
16876
  position: absolute;
16841
- top: 0;
16877
+ top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
16842
16878
  bottom: 0;
16843
16879
  left: 0;
16844
16880
  content: "";