Merge branch '26018-mini-pipeline-hover-cross-broswer' into 'master'

Resolve "Mini pipeline graph dropdown looks weird on Safari and hover does not work on firefox"

Closes #26018, #26004, and #26002

See merge request !8282

2 files changed, 71 insertions, 71 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 2a9880cc673..38667c7169b 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -197,7 +197,7 @@
           width: 8px;
           position: absolute;
           right: -7px;
-          bottom: 9px;
+          top: 10px;
           border-bottom: 2px solid $border-color;
         }
       }
@@ -737,11 +737,72 @@
 .mini-pipeline-graph {
   .builds-dropdown {
     background-color: transparent;
-    border: none;
     padding: 0;
     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: 6px;
+        left: 20px;
+        margin-right: -6px;
+        z-index: 2;
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0.1s, opacity 0.1s linear;
+      }
+    }
   }
 
   .builds-dropdown-loading {
@@ -798,81 +859,16 @@
   height: 20px;
   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;
   }
 }
 
-.builds-dropdown {
-  &:focus {
-    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: 28px;
-      padding: 0 8px 0 0;
-
-      + .dropdown-caret {
-        display: inline-block;
-      }
-    }
-
-    .dropdown-caret {
-      font-size: 11px;
-      position: relative;
-      top: 3px;
-      left: -11px;
-      margin-right: -6px;
-      display: none;
-      z-index: 2;
-    }
-  }
+.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg {
+  width: 22px;
+  height: 22px;
 }
 
 .terminal-icon {
diff --git a/changelogs/unreleased/26018-mini-pipeline-hover-cross-broswer.yml b/changelogs/unreleased/26018-mini-pipeline-hover-cross-broswer.yml
new file mode 100644
index 00000000000..501f0b25a21
--- /dev/null
+++ b/changelogs/unreleased/26018-mini-pipeline-hover-cross-broswer.yml
@@ -0,0 +1,4 @@
+---
+title: Fixes mini-pipeline-graph dropdown animation and stage position in chrome, firefox and safari
+merge_request: 8282
+author: