Fix animation glitch in the caret

1 files changed, 63 insertions, 71 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 00ddfc16b29..d75a5f42c2f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -789,6 +789,68 @@
     color: $gl-text-color-light;
     border: none;
     margin: 0;
+
+    &:focus,
+    &:hover {
+      outline: none;
+      margin-right: -8px;
+
+      .ci-status-icon {
+        width: 32px;
+        padding: 0 8px 0 0;
+        transition: width 0.1s cubic-bezier(0.25, 0, 1, 1);
+
+        + .dropdown-caret {
+          visibility: visible;
+          opacity: 1
+        }
+      }
+    }
+
+    &:focus,
+    &:active {
+      .ci-status-icon-success {
+        background-color: rgba($gl-success, .1);
+      }
+
+      .ci-status-icon-failed {
+        background-color: rgba($gl-danger, .1);
+      }
+
+      .ci-status-icon-pending,
+      .ci-status-icon-success_with_warnings {
+        background-color: rgba($gl-warning, .1);
+      }
+
+      .ci-status-icon-running {
+        background-color: rgba($blue-normal, .1);
+      }
+
+      .ci-status-icon-canceled,
+      .ci-status-icon-disabled,
+      .ci-status-icon-not-found {
+        background-color: rgba($gl-gray, .1);
+      }
+
+      .ci-status-icon-created,
+      .ci-status-icon-skipped {
+        background-color: rgba($gray-darkest, .1);
+      }
+    }
+
+    .mini-pipeline-graph-icon-container {
+      .dropdown-caret {
+        font-size: 11px;
+        position: absolute;
+        top: 5px;
+        left: 20px;
+        margin-right: -6px;
+        z-index: 2;
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0.1s, opacity 0.3s linear
+      }
+    }
   }
 
   .dropdown-build .build-content {
@@ -849,7 +911,7 @@
   height: 22px;
   position: relative;
   z-index: 2;
-  transition: all 0.2s cubic-bezier(0.25, 0, 1, 1);
+  transition: all 0.1s cubic-bezier(0.25, 0, 1, 1);
 
   svg {
     top: -1px;
@@ -862,76 +924,6 @@
   height: 22px;
 }
 
-.builds-dropdown {
-  &:focus,
-  &:hover {
-    outline: none;
-    margin-right: -8px;
-
-    .ci-status-icon {
-      width: 32px;
-      padding: 0 8px 0 0;
-      transition: width 0.2s cubic-bezier(0.25, 0, 1, 1);
-
-      + .dropdown-caret {
-        display: inline-block;
-      }
-    }
-  }
-
-  &:focus,
-  &:active {
-    .ci-status-icon-success {
-      background-color: rgba($gl-success, .1);
-    }
-
-    .ci-status-icon-failed {
-      background-color: rgba($gl-danger, .1);
-    }
-
-    .ci-status-icon-pending,
-    .ci-status-icon-success_with_warnings {
-      background-color: rgba($gl-warning, .1);
-    }
-
-    .ci-status-icon-running {
-      background-color: rgba($blue-normal, .1);
-    }
-
-    .ci-status-icon-canceled,
-    .ci-status-icon-disabled,
-    .ci-status-icon-not-found {
-      background-color: rgba($gl-gray, .1);
-    }
-
-    .ci-status-icon-created,
-    .ci-status-icon-skipped {
-      background-color: rgba($gray-darkest, .1);
-    }
-  }
-
-  .mini-pipeline-graph-icon-container {
-    .ci-status-icon:hover,
-    .ci-status-icon:focus {
-      width: 32px;
-      padding: 0 8px 0 0;
-
-      + .dropdown-caret {
-        display: inline-block;
-      }
-    }
-
-    .dropdown-caret {
-      font-size: 11px;
-      position: absolute;;
-      top: 5px;
-      left: 20px;
-      margin-right: -6px;
-      display: none;
-      z-index: 2;
-    }
-  }
-}
 
 .terminal-icon {
   margin-left: 3px;