Add latest changes from gitlab-org/gitlab@master

1 files changed, 54 insertions, 19 deletions

diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 75031cac416..a4ad8635c3e 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -158,23 +158,6 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     }
   }
 
-  .nav-item-link {
-    button.show-on-focus-or-hover--target {
-      transition: opacity $gl-transition-duration-fast;
-    }
-
-    &:hover,
-    &:focus-within {
-      .nav-item-badge {
-        opacity: 0;
-      }
-
-      button.show-on-focus-or-hover--target {
-        transition-delay: $gl-transition-duration-slow;
-      }
-    }
-  }
-
   #trial-status-sidebar-widget:hover {
     text-decoration: none;
     @include gl-text-contrast-light;
@@ -320,19 +303,71 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   }
 }
 
+.transition-opacity-on-hover--context {
+  .transition-opacity-on-hover--target {
+    transition: opacity $gl-transition-duration-fast linear;
+
+    &:hover {
+      transition-delay: $gl-transition-duration-slow;
+    }
+  }
+
+  &:hover {
+    .transition-opacity-on-hover--target {
+      transition-delay: $gl-transition-duration-slow;
+    }
+  }
+}
+
 .show-on-focus-or-hover--context {
   .show-on-focus-or-hover--target {
     opacity: 0;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
   }
 
   &:hover,
-  &:focus {
+  &:focus-within {
+    .show-on-focus-or-hover--control {
+      @include gl-bg-t-gray-a-08;
+    }
+
     .show-on-focus-or-hover--target {
       opacity: 1;
     }
   }
 
-  .show-on-focus-or-hover--target:focus {
+  .show-on-focus-or-hover--control {
+    &:hover,
+    &:focus {
+      + .show-on-focus-or-hover--target {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.hide-on-focus-or-hover--context {
+  .hide-on-focus-or-hover--target {
     opacity: 1;
   }
+
+  &:hover,
+  &:focus-within {
+    .hide-on-focus-or-hover--target {
+      opacity: 0;
+    }
+  }
+
+  .hide-on-focus-or-hover--control {
+    &:hover,
+    &:focus {
+      .hide-on-focus-or-hover--target {
+        opacity: 0;
+      }
+    }
+  }
 }