@patternfly/patternfly 4.144.0 → 4.144.4

package/patternfly.css

@@ -9343,6 +9343,8 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
   --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
   --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
+  --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
+  --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
   --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
   --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
   --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
@@ -9356,12 +9358,6 @@ label.pf-c-check, .pf-c-check__label,
   column-gap: var(--pf-c-description-list--ColumnGap);
   grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
 }
-@media screen and (min-width: 768px) {
-  .pf-c-description-list {
-    --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
-    --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
-  }
-}
 .pf-c-description-list[class*=pf-m-horizontal] {
   --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
 }
@@ -15124,7 +15120,7 @@ ul.pf-c-list {
   --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
   --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
   --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
   --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
   --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
   --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15201,7 +15197,7 @@ ul.pf-c-list {
 }
 .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
   --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
-  --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
+  --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
 }
 .pf-c-masthead .pf-c-context-selector {
   --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
@@ -15305,7 +15301,7 @@ ul.pf-c-list {
   --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
   --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
   --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
   --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
   --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
   --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15362,7 +15358,7 @@ ul.pf-c-list {
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15422,7 +15418,7 @@ ul.pf-c-list {
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15482,7 +15478,7 @@ ul.pf-c-list {
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15542,7 +15538,7 @@ ul.pf-c-list {
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15602,7 +15598,7 @@ ul.pf-c-list {
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -16690,11 +16686,25 @@ ul.pf-c-list {
   --pf-c-nav__list--ScrollSnapTypeStrictness: proximity;
   --pf-c-nav__list--ScrollSnapType: var(--pf-c-nav__list--ScrollSnapTypeAxis) var(--pf-c-nav__list--ScrollSnapTypeStrictness);
   --pf-c-nav__item--ScrollSnapAlign: end;
+  --pf-c-nav__item--m-flyout--c-menu--top-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--left-offset: 0.25rem;
+  --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset: 0.25rem;
   --pf-c-nav__item--m-flyout--MarginTop: 0;
-  --pf-c-nav__item--m-flyout--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
-  --pf-c-nav__item--m-flyout--focus--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
-  --pf-c-nav__item--m-flyout--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
+  --pf-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
   --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
+  --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
+  --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));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
+  --pf-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--left-offset));
+  --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));
+  --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));
   --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
   --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
@@ -16709,6 +16719,8 @@ ul.pf-c-list {
   --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-c-nav__item--before--BorderColor);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --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));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
@@ -16939,11 +16951,17 @@ ul.pf-c-list {
   content: "";
   border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
 }
-.pf-c-nav__item.pf-m-flyout, .pf-c-nav__item.pf-m-drilldown {
-  position: static;
+.pf-c-nav__item.pf-m-flyout:hover {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
 }
-.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 {
-  overflow: visible;
+.pf-c-nav__item.pf-m-flyout:focus {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
+}
+.pf-c-nav__item.pf-m-flyout:active {
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu {
   --pf-c-menu--MinWidth: 100%;
@@ -16959,6 +16977,24 @@ ul.pf-c-list {
   --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
   --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
   --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
+  position: absolute;
+  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
+  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
+  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
+  top: auto;
+  bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
+  right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
+  left: auto;
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
+  --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);
+  --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);
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
   position: relative;
@@ -16974,7 +17010,7 @@ ul.pf-c-list {
 }
 .pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
   position: absolute;
-  top: 0;
+  top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
   bottom: 0;
   left: 0;
   content: "";