Merge branch 'leipert-move-ee-specific-pipeline-scss-backport' into 'master'

Backport changes of gitlab-ee!5852

See merge request gitlab-org/gitlab-ce!19145

app/assets/stylesheets/pages/pipelines.scss

+@mixin flat-connector-before($length: 44px) {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 48%;
+    left: -$length;
+    border-top: 2px solid $border-color;
+    width: $length;
+    height: 1px;
+  }
+}
+
+@mixin build-content($border-radius: 30px) {
+  display: inline-block;
+  padding: 8px 10px 9px;
+  width: 100%;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background-color: $white-light;
+
+  &:hover {
+    background-color: $stage-hover-bg;
+    border: 1px solid $dropdown-toggle-active-border-color;
+    color: $gl-text-color;
+  }
+}
+
 .pipelines {
   .stage {
     max-width: 90px;
@@ -357,14 +384,8 @@
       &:not(:first-child) {
         margin-left: 44px;
 
-        .left-connector::before {
-          content: '';
-          position: absolute;
-          top: 48%;
-          left: -44px;
-          border-top: 2px solid $border-color;
-          width: 44px;
-          height: 1px;
+        .left-connector {
+          @include flat-connector-before;
         }
       }
     }
@@ -479,12 +500,7 @@
     }
 
     .build-content {
-      display: inline-block;
-      padding: 8px 10px 9px;
-      width: 100%;
-      border: 1px solid $border-color;
-      border-radius: 30px;
-      background-color: $white-light;
+      @include build-content();
     }
 
     a.build-content:hover,
@@ -622,8 +638,7 @@
   }
 }
 
-// Dropdown button in mini pipeline graph
-button.mini-pipeline-graph-dropdown-toggle {
+@mixin mini-pipeline-item() {
   border-radius: 100px;
   background-color: $white-light;
   border-width: 1px;
@@ -636,30 +651,6 @@ button.mini-pipeline-graph-dropdown-toggle {
   position: relative;
   vertical-align: middle;
 
-  > .fa.fa-caret-down {
-    position: absolute;
-    left: 20px;
-    top: 5px;
-    display: inline-block;
-    visibility: hidden;
-    opacity: 0;
-    color: inherit;
-    font-size: 12px;
-    transition: visibility 0.1s, opacity 0.1s linear;
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    outline: none;
-    width: 35px;
-
-    .fa.fa-caret-down {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
     @include mini-pipeline-graph-color($green-100, $green-500, $green-600);
@@ -691,6 +682,35 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 }
 
+// Dropdown button in mini pipeline graph
+button.mini-pipeline-graph-dropdown-toggle {
+  @include mini-pipeline-item();
+
+  > .fa.fa-caret-down {
+    position: absolute;
+    left: 20px;
+    top: 5px;
+    display: inline-block;
+    visibility: hidden;
+    opacity: 0;
+    color: inherit;
+    font-size: 12px;
+    transition: visibility 0.1s, opacity 0.1s linear;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+    width: 35px;
+
+    .fa.fa-caret-down {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}
+
 /**
  Action icons inside dropdowns:
  - mini graph in pipelines table