fix(menu): removed pf-m-drilldown transition, fixed content height tr…

…ansition (#4090)
patternfly · May 25, 2021 · 182cd50 · 182cd50
1 parent cb22de1
commit 182cd50
Showing 1 changed file with 11 additions and 10 deletions.
diff --git a/src/patternfly/components/Menu/menu.scss b/src/patternfly/components/Menu/menu.scss
@@ -13,6 +13,9 @@
   --pf-c-menu--m-flyout__list-item--m-menu-top__menu--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
   --pf-c-menu--m-flyout__list-item--m-menu-left__menu--Right: 100%;
 
+  // Content
+  --pf-c-menu__content--Height: auto;
+
   // Divider
   --pf-c-menu__list--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-menu__list--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -106,24 +109,22 @@
   --pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize: var(--pf-global--FontSize--md);
   --pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--md);
 
-  // Drilldown
-  --pf-c-menu__content--Height: auto;
-  --pf-c-menu--m-drilldown--TransitionDuration--transform: var(--pf-global--TransitionDuration);
-  --pf-c-menu--m-drilldown--TransitionDuration--height: var(--pf-global--TransitionDuration);
-  --pf-c-menu--m-drilldown--Transition: transform var(--pf-c-menu--m-drilldown--TransitionDuration--transform), height var(--pf-c-menu--m-drilldown--TransitionDuration--height);
-
   // Nested menu
   --pf-c-menu--m-drilldown--c-menu--Top: 0;
   --pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-global--TransitionDuration);
-  --pf-c-menu--m-drilldown--c-menu--TransitionDuration--visibility: var(--pf-global--TransitionDuration);
-  --pf-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform), visibility var(--pf-c-menu--m-drilldown--c-menu--TransitionDuration--visibility);
+  --pf-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
+
+  // Drilldown content
+  --pf-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-global--TransitionDuration);
+  --pf-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-global--TransitionDuration);
+  --pf-c-menu--m-drilldown__content--Transition: transform var(--pf-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-c-menu--m-drilldown__content--TransitionDuration--height);
 
   // Drilldown list
   --pf-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-global--TransitionDuration);
   --pf-c-menu--m-drilldown__list--Transition: transform var(--pf-c-menu--m-drilldown__list--TransitionDuration--transform);
 
   // Drilled in
-  --pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-global--ZIndex--2xl);
+  --pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-global--ZIndex--xs);
 
   // Footer
   --pf-c-menu__footer--PaddingTop: var(--pf-global--spacer--md);
@@ -173,7 +174,6 @@
   &.pf-m-drilldown {
     display: flex;
     flex-direction: column;
-    transition: var(--pf-c-menu--m-drilldown--Transition);
 
     &[hidden] {
       display: none;
@@ -182,6 +182,7 @@
     > .pf-c-menu__content {
       flex-grow: 1;
       overflow: hidden;
+      transition: var(--pf-c-menu--m-drilldown__content--Transition);
     }
 
     &.pf-m-drilled-in {