Improves dropdown item in Chrome, Firefox and Safari

1 files changed, 20 insertions, 9 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index b3c9a641a39..b2d9712f09d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -177,7 +177,7 @@
   .stage-cell {
     font-size: 0;
 
-    svg {
+    > .stage-container > button > svg {
       height: 18px;
       width: 18px;
       position: relative;
@@ -706,6 +706,10 @@
   width: 195px;
   max-width: 195px;
 
+  li {
+    padding: 2px 3px;
+  }
+
   .scrollable-menu {
     max-height: 245px;
     overflow: auto;
@@ -724,24 +728,24 @@
     border-radius: 20px;
     width: 22px;
     height: 22px;
-    padding: 2px 0px 0px 5px;
+    padding: 2px 0 0 5px;
     cursor: pointer;
     float: right;
-    margin: -28px 10px 0px 0px;
+    margin: -25px 14px 0 0;
     font-size: 12px;
+    background-color: #fff;
 
     &:hover,
     &:focus {
       text-decoration: none;
       color: #333;
       background-color: #EAF3FC;
-      border: none;
+      border: 1px solid transparent;
     }
   }
 
   // link to the build
   .mini-pipeline-graph-dropdown-item {
-    display: block;
     padding: 3px 10px;
     clear: both;
     font-weight: normal;
@@ -752,20 +756,27 @@
 
     // build name
     .ci-build-text {
+      font-weight: 200;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      width: 95px;
-      display: inline-block;
+      width: 90px;
       color: #8C8C8C;
       margin-left: 2px;
+      display: inline-block;
+      top: 2px;
       vertical-align: text-bottom;
+      position: relative;
     }
 
     // status icon on the left
     .ci-status-icon {
-      margin-top: 5px;
-      display: inline-block;
+      top: 1px;
+      position: relative;
+
+      > svg {
+        overflow: visible;
+      }
     }
 
     &:hover,