use stylesheet from master

1 files changed, 708 insertions, 714 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 619f79ee3c5..d9ae3b4a95f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,614 +1,651 @@
-.pipelines {
-  .realtime-loading {
-    font-size: 40px;
-    text-align: center;
-  }
-
-  .stage {
-    max-width: 90px;
-    width: 90px;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .commit-title {
-    margin: 0;
-  }
-
-  .controls {
-    white-space: nowrap;
-  }
-
-  .btn {
-    margin: 4px;
-  }
-
-  .table.ci-table {
-    min-width: 1200px;
-    table-layout: fixed;
-
-    .pipeline-id {
-      color: $black;
+  .pipelines {
+    .realtime-loading {
+      font-size: 40px;
+      text-align: center;
     }
 
-    .branch-commit {
-      .branch-name {
-        max-width: 195px;
-      }
+    .stage {
+      max-width: 90px;
+      width: 90px;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .pipeline-date,
-    .pipeline-status {
-      width: 10%;
+    .commit-title {
+      margin: 0;
     }
 
-    .pipeline-info,
-    .pipeline-commit,
-    .pipeline-actions,
-    .pipeline-stages {
-      width: 20%;
+    .controls {
+      white-space: nowrap;
     }
-  }
-}
 
-@media (max-width: $screen-md-max) {
-  .content-list {
-    &.pipelines,
-    &.builds-content-list {
-      width: 100%;
-      overflow: auto;
+    .btn {
+      margin: 4px;
     }
-  }
-}
 
-.content-list.pipelines .table-holder {
-  min-height: 300px;
-}
+    .table.ci-table {
+      min-width: 1200px;
+      table-layout: fixed;
 
-.pipeline-holder {
-  width: 100%;
-  overflow: auto;
-}
-
-.table.ci-table {
-  min-width: 900px;
-
-  &.pipeline {
-    min-width: 650px;
-  }
+      .pipeline-id {
+        color: $black;
+      }
 
-  &.builds-page {
+      .pipeline-date,
+      .pipeline-status {
+        width: 10%;
+      }
 
-    tr {
-      height: 71px;
+      .pipeline-info,
+      .pipeline-commit,
+      .pipeline-actions,
+      .pipeline-stages {
+        width: 20%;
+      }
     }
   }
 
-  tr {
-    th {
-      padding: 16px 8px;
-      border: none;
-    }
-
-    td {
-      padding: 10px 8px;
-    }
-
-    .commit-link {
-      padding: 9px 8px 10px;
+  @media (max-width: $screen-md-max) {
+    .content-list {
+      &.pipelines,
+      &.builds-content-list {
+        width: 100%;
+        overflow: auto;
+      }
     }
   }
 
-  tbody {
-    border-top-width: 1px;
+  .content-list.pipelines .table-holder {
+    min-height: 300px;
   }
 
-  .build.retried {
-    background-color: $gray-lightest;
+  .pipeline-holder {
+    width: 100%;
+    overflow: auto;
   }
 
-  .commit-link {
-    a {
-      &:focus {
-        text-decoration: none;
-      }
-    }
+  .table.ci-table {
+    min-width: 900px;
 
-    a:hover {
-      text-decoration: none;
+    &.pipeline {
+      min-width: 650px;
     }
-  }
 
-  .avatar {
-    margin-left: 0;
-    float: none;
-  }
+    &.builds-page {
 
-  .branch-commit {
-    .branch-name {
-      font-weight: bold;
-      max-width: 120px;
-      overflow: hidden;
-      display: inline-block;
-      white-space: nowrap;
-      vertical-align: top;
-      text-overflow: ellipsis;
+      tr {
+        height: 71px;
+      }
     }
 
-    svg {
-      height: 14px;
-      width: 14px;
-      vertical-align: middle;
-      fill: $gl-gray-light;
-    }
+    tr {
+      th {
+        padding: 16px 8px;
+        border: none;
+      }
 
-    .fa {
-      font-size: 12px;
-      color: $gl-text-color;
-    }
+      td {
+        padding: 10px 8px;
+      }
 
-    .commit-id {
-      color: $gl-link-color;
+      .commit-link {
+        padding: 9px 8px 10px;
+      }
     }
 
-    .commit-title {
-      margin-top: 4px;
-      max-width: 225px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    tbody {
+      border-top-width: 1px;
     }
 
-    .label {
-      margin-right: 4px;
+    .build.retried {
+      background-color: $gray-lightest;
     }
 
-    .label-container {
-      font-size: 0;
+    .commit-link {
+      a {
+        &:focus {
+          text-decoration: none;
+        }
+      }
 
-      .label {
-        margin-top: 5px;
+      a:hover {
+        text-decoration: none;
       }
     }
-  }
 
-  .icon-container {
-    display: inline-block;
-    width: 10px;
-
-    &.commit-icon {
-      width: 15px;
-      text-align: center;
+    .avatar {
+      margin-left: 0;
+      float: none;
     }
-  }
 
-  .stage-cell {
-    font-size: 0;
+    .branch-commit {
 
-    svg {
-      height: 18px;
-      width: 18px;
-      position: relative;
-      z-index: 2;
-      vertical-align: middle;
-      overflow: visible;
-    }
+      .branch-name {
+        font-weight: bold;
+        max-width: 120px;
+        overflow: hidden;
+        display: inline-block;
+        white-space: nowrap;
+        vertical-align: top;
+        text-overflow: ellipsis;
+      }
 
-    .stage-container {
-      display: inline-block;
-      position: relative;
-      margin-right: 6px;
+      svg {
+        height: 14px;
+        width: 14px;
+        vertical-align: middle;
+        fill: $gl-gray-light;
+      }
+
+      .fa {
+        font-size: 12px;
+        color: $gl-text-color;
+      }
+
+      .commit-id {
+        color: $gl-link-color;
+      }
 
-      .tooltip {
+      .commit-title {
+        margin-top: 4px;
+        max-width: 225px;
+        overflow: hidden;
         white-space: nowrap;
+        text-overflow: ellipsis;
       }
 
-      &:not(:last-child) {
-        &::after {
-          content: '';
-          width: 8px;
-          position: absolute;
-          right: -7px;
-          top: 10px;
-          border-bottom: 2px solid $border-color;
+      .label {
+        margin-right: 4px;
+      }
+
+      .label-container {
+        font-size: 0;
+
+        .label {
+          margin-top: 5px;
         }
       }
     }
-  }
 
-  .duration,
-  .finished-at {
-    color: $gl-gray-light;
-    margin: 4px 0;
+    .icon-container {
+      display: inline-block;
+      width: 10px;
 
-    .fa {
-      font-size: 12px;
-      margin-right: 4px;
+      &.commit-icon {
+        width: 15px;
+        text-align: center;
+      }
     }
 
-    svg {
-      width: 12px;
-      height: 12px;
-      vertical-align: middle;
-      margin-right: 4px;
-    }
-  }
+    .stage-cell {
+      font-size: 0;
 
-  .pipeline-actions {
-    min-width: 140px;
+      svg {
+        height: 18px;
+        width: 18px;
+        position: relative;
+        z-index: 2;
+        vertical-align: middle;
+        overflow: visible;
+      }
 
-    .btn {
-      margin: 0;
-      color: $gl-gray-light;
-    }
+      .stage-container {
+        display: inline-block;
+        position: relative;
+        margin-right: 6px;
 
-    .cancel-retry-btns {
-      vertical-align: middle;
+        .tooltip {
+          white-space: nowrap;
+        }
 
-      .btn:not(:first-child) {
-        margin-left: 8px;
+        &:not(:last-child) {
+          &::after {
+            content: '';
+            width: 8px;
+            position: absolute;
+            right: -7px;
+            top: 10px;
+            border-bottom: 2px solid $border-color;
+          }
+        }
       }
     }
 
-    .dropdown-toggle,
-    .dropdown-menu {
+    .duration,
+    .finished-at {
       color: $gl-gray-light;
+      margin: 4px 0;
 
       .fa {
-        color: $gl-gray-light;
-        font-size: 14px;
+        font-size: 12px;
+        margin-right: 4px;
       }
 
-      svg,
-      .fa {
-        margin-right: 0;
+      svg {
+        width: 12px;
+        height: 12px;
+        vertical-align: middle;
+        margin-right: 4px;
       }
     }
 
-    .btn-remove {
-      color: $white-light;
-    }
+    .pipeline-actions {
+      min-width: 140px;
 
-    .btn-group {
-      &.open {
-        .btn-default {
-          background-color: $white-normal;
-          border-color: $border-white-normal;
-        }
+      .btn {
+        margin: 0;
+        color: $gl-gray-light;
       }
 
-      .btn {
-        .icon-play {
-          height: 13px;
-          width: 12px;
+      .cancel-retry-btns {
+        vertical-align: middle;
+
+        .btn:not(:first-child) {
+          margin-left: 8px;
         }
       }
-    }
-  }
 
-  .build-link {
+      .dropdown-toggle,
+      .dropdown-menu {
+        color: $gl-gray-light;
 
-    a {
-      color: $gl-dark-link-color;
-    }
-  }
+        .fa {
+          color: $gl-gray-light;
+          font-size: 14px;
+        }
 
-  .btn-group.open .dropdown-toggle {
-    box-shadow: none;
-  }
-}
+        svg,
+        .fa {
+          margin-right: 0;
+        }
+      }
 
-.admin-builds-table {
-  .ci-table td:last-child {
-    min-width: 120px;
-  }
-}
+      .btn-remove {
+        color: $white-light;
+      }
 
-// Pipeline visualization
-.pipeline-actions {
-  border-bottom: none;
-}
+      .btn-group {
+        &.open {
+          .btn-default {
+            background-color: $white-normal;
+            border-color: $border-white-normal;
+          }
+        }
 
-.tab-pane {
-  &.pipelines {
-    .ci-table {
-      min-width: 900px;
+        .btn {
+          .icon-play {
+            height: 13px;
+            width: 12px;
+          }
+        }
+      }
     }
 
-    .content-list.pipelines {
-      overflow: auto;
-    }
+    .build-link {
 
-    .stage {
-      max-width: 100px;
-      width: 100px;
+      a {
+        color: $gl-dark-link-color;
+      }
     }
 
-    .pipeline-actions {
-      min-width: initial;
+    .btn-group.open .dropdown-toggle {
+      box-shadow: none;
     }
   }
 
-  &.builds {
-    .ci-table {
-      tr {
-        height: 71px;
-      }
+  .admin-builds-table {
+    .ci-table td:last-child {
+      min-width: 120px;
     }
   }
-}
-
-// Pipeline graph
-.pipeline-graph {
-  width: 100%;
-  background-color: $gray-light;
-  padding: $gl-padding;
-  overflow: auto;
-  white-space: nowrap;
-  transition: max-height 0.3s, padding 0.3s;
-
-  ul {
-    padding: 0;
-  }
 
-  a {
-    text-decoration: none;
-    color: $gl-text-color-light;
+  // Pipeline visualization
+  .pipeline-actions {
+    border-bottom: none;
   }
 
-  svg {
-    vertical-align: middle;
-    margin-right: 3px;
-  }
+  .tab-pane {
+    &.pipelines {
+      .ci-table {
+        min-width: 900px;
+      }
 
-  .stage-column {
-    display: inline-block;
-    vertical-align: top;
+      .content-list.pipelines {
+        overflow: auto;
+      }
 
-    &:not(:last-child) {
-      margin-right: 44px;
-    }
+      .stage {
+        max-width: 100px;
+        width: 100px;
+      }
 
-    &.left-margin {
-      &:not(:first-child) {
-        margin-left: 44px;
+      .pipeline-actions {
+        min-width: initial;
+      }
+    }
 
-        .left-connector {
-          &::before {
-            content: '';
-            position: absolute;
-            top: 48%;
-            left: -48px;
-            border-top: 2px solid $border-color;
-            width: 48px;
-            height: 1px;
-          }
+    &.builds {
+      .ci-table {
+        tr {
+          height: 71px;
         }
       }
     }
+  }
 
-    &.no-margin {
-      margin: 0;
+  // Pipeline graph
+  .pipeline-graph {
+    width: 100%;
+    background-color: $gray-light;
+    padding: $gl-padding;
+    white-space: nowrap;
+    transition: max-height 0.3s, padding 0.3s;
+
+    ul {
+      padding: 0;
     }
 
-    li {
-      list-style: none;
+    a {
+      text-decoration: none;
+      color: $gl-text-color-light;
     }
 
-    &:last-child {
-      .build {
-        // Remove right connecting horizontal line from first build in last stage
-        &:first-child {
-          &::after {
-            border: none;
-          }
-        }
-        // Remove right curved connectors from all builds in last stage
+    svg {
+      vertical-align: middle;
+      margin-right: 3px;
+    }
+
+    .stage-column {
+      display: inline-block;
+      vertical-align: top;
+
+      &:not(:last-child) {
+        margin-right: 44px;
+      }
+
+      &.left-margin {
         &:not(:first-child) {
-          &::after {
-            border: none;
+          margin-left: 44px;
+
+          .left-connector {
+            &::before {
+              content: '';
+              position: absolute;
+              top: 48%;
+              left: -48px;
+              border-top: 2px solid $border-color;
+              width: 48px;
+              height: 1px;
+            }
           }
         }
-        // Remove opposite curve
-        .curve {
-          &::before {
-            display: none;
+      }
+
+      &.no-margin {
+        margin: 0;
+      }
+
+      li {
+        list-style: none;
+      }
+
+      &:last-child {
+        .build {
+          // Remove right connecting horizontal line from first build in last stage
+          &:first-child {
+            &::after {
+              border: none;
+            }
+          }
+          // Remove right curved connectors from all builds in last stage
+          &:not(:first-child) {
+            &::after {
+              border: none;
+            }
+          }
+          // Remove opposite curve
+          .curve {
+            &::before {
+              display: none;
+            }
           }
         }
       }
-    }
 
-    &:first-child {
-      .build {
-        // Remove left curved connectors from all builds in first stage
-        &:not(:first-child) {
-          &::before {
-            border: none;
+      &:first-child {
+        .build {
+          // Remove left curved connectors from all builds in first stage
+          &:not(:first-child) {
+            &::before {
+              border: none;
+            }
           }
-        }
-        // Remove opposite curve
-        .curve {
-          &::after {
-            display: none;
+          // Remove opposite curve
+          .curve {
+            &::after {
+              display: none;
+            }
           }
         }
       }
-    }
 
-    // Curve first child connecting lines in opposite direction
-    .curve {
-      display: none;
+      // Curve first child connecting lines in opposite direction
+      .curve {
+        display: none;
 
-      &::before,
-      &::after {
-        content: '';
-        width: 21px;
-        height: 25px;
-        position: absolute;
-        top: -31px;
-        border-top: 2px solid $border-color;
-      }
+        &::before,
+        &::after {
+          content: '';
+          width: 21px;
+          height: 25px;
+          position: absolute;
+          top: -31px;
+          border-top: 2px solid $border-color;
+        }
 
-      &::after {
-        left: -44px;
-        border-right: 2px solid $border-color;
-        border-radius: 0 20px;
-      }
+        &::after {
+          left: -44px;
+          border-right: 2px solid $border-color;
+          border-radius: 0 20px;
+        }
 
-      &::before {
-        right: -44px;
-        border-left: 2px solid $border-color;
-        border-radius: 20px 0 0;
+        &::before {
+          right: -44px;
+          border-left: 2px solid $border-color;
+          border-radius: 20px 0 0;
+        }
       }
     }
-  }
-
-  .stage-name {
-    margin: 0 0 15px 10px;
-    font-weight: bold;
-    width: 176px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
 
-  .build {
-    position: relative;
-    width: 186px;
-    margin-bottom: 10px;
-    white-space: normal;
-    color: $gl-text-color-light;
+    .stage-name {
+      margin: 0 0 15px 10px;
+      font-weight: bold;
+      width: 176px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-    .dropdown-menu-toggle {
-      background-color: transparent;
-      border: none;
-      padding: 0;
+    .build {
+      position: relative;
+      width: 186px;
+      margin-bottom: 10px;
+      white-space: normal;
       color: $gl-text-color-light;
 
-      &:focus {
-        outline: none;
-      }
+      .dropdown-menu-toggle {
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        color: $gl-text-color-light;
 
-      &:hover {
-        color: $gl-text-color;
+        &:focus {
+          outline: none;
+        }
 
-        .dropdown-counter-badge {
+        &:hover {
           color: $gl-text-color;
+
+          .dropdown-counter-badge {
+            color: $gl-text-color;
+          }
         }
       }
-    }
 
-    > .build-content {
-      display: inline-block;
-      padding: 8px 10px 9px;
-      width: 100%;
-      border: 1px solid $border-color;
-      border-radius: 30px;
-      background-color: $white-light;
+      > .build-content {
+        display: inline-block;
+        padding: 8px 10px 9px;
+        width: 100%;
+        border: 1px solid $border-color;
+        border-radius: 30px;
+        background-color: $white-light;
 
-      &:hover {
-        background-color: $stage-hover-bg;
-        border: 1px solid $stage-hover-border;
-        color: $gl-text-color;
+        &:hover {
+          background-color: $stage-hover-bg;
+          border: 1px solid $stage-hover-border;
+          color: $gl-text-color;
+        }
       }
-    }
-
-    > .ci-action-icon-container {
-      position: absolute;
-      right: 5px;
-      top: 5px;
-    }
 
-    .ci-status-icon svg {
-      height: 20px;
-      width: 20px;
-    }
-
-    .arrow {
-      &::before,
-      &::after {
-        content: '';
-        display: inline-block;
+      > .ci-action-icon-container {
         position: absolute;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        border-style: solid;
-        top: 18px;
+        right: 5px;
+        top: 5px;
       }
 
-      &::before {
-        left: -5px;
-        margin-top: -6px;
-        border-width: 7px 5px 7px 0;
-        border-right-color: $border-color;
+      .ci-status-icon svg {
+        height: 20px;
+        width: 20px;
       }
 
-      &::after {
-        left: -4px;
-        margin-top: -9px;
-        border-width: 10px 7px 10px 0;
-        border-right-color: $white-light;
-      }
-    }
+      .arrow {
+        &::before,
+        &::after {
+          content: '';
+          display: inline-block;
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-color: transparent;
+          border-style: solid;
+          top: 18px;
+        }
 
-    // Connect first build in each stage with right horizontal line
-    &:first-child {
-      &::after {
-        content: '';
-        position: absolute;
-        top: 48%;
-        right: -48px;
-        border-top: 2px solid $border-color;
-        width: 48px;
-        height: 1px;
+        &::before {
+          left: -5px;
+          margin-top: -6px;
+          border-width: 7px 5px 7px 0;
+          border-right-color: $border-color;
+        }
+
+        &::after {
+          left: -4px;
+          margin-top: -9px;
+          border-width: 10px 7px 10px 0;
+          border-right-color: $white-light;
+        }
       }
-    }
 
-    // Connect each build (except for first) with curved lines
-    &:not(:first-child) {
-      &::after,
-      &::before {
-        content: '';
-        top: -49px;
-        position: absolute;
-        border-bottom: 2px solid $border-color;
-        width: 25px;
-        height: 69px;
+      // Connect first build in each stage with right horizontal line
+      &:first-child {
+        &::after {
+          content: '';
+          position: absolute;
+          top: 48%;
+          right: -48px;
+          border-top: 2px solid $border-color;
+          width: 48px;
+          height: 1px;
+        }
       }
 
-      // Right connecting curves
-      &::after {
-        right: -25px;
-        border-right: 2px solid $border-color;
-        border-radius: 0 0 20px;
+      // Connect each build (except for first) with curved lines
+      &:not(:first-child) {
+        &::after,
+        &::before {
+          content: '';
+          top: -49px;
+          position: absolute;
+          border-bottom: 2px solid $border-color;
+          width: 25px;
+          height: 69px;
+        }
+
+        // Right connecting curves
+        &::after {
+          right: -25px;
+          border-right: 2px solid $border-color;
+          border-radius: 0 0 20px;
+        }
+
+        // Left connecting curves
+        &::before {
+          left: -25px;
+          border-left: 2px solid $border-color;
+          border-radius: 0 0 0 20px;
+        }
       }
 
-      // Left connecting curves
-      &::before {
-        left: -25px;
-        border-left: 2px solid $border-color;
-        border-radius: 0 0 0 20px;
+      // Connect second build to first build with smaller curved line
+      &:nth-child(2) {
+        &::after,
+        &::before {
+          height: 29px;
+          top: -9px;
+        }
+
+        .curve {
+          display: block;
+        }
       }
     }
 
-    // Connect second build to first build with smaller curved line
-    &:nth-child(2) {
-      &::after,
-      &::before {
-        height: 29px;
-        top: -9px;
-      }
+    .grouped-pipeline-dropdown {
+      .dropdown-build {
+        .build-content {
+          width: 100%;
 
-      .curve {
-        display: block;
+          &:hover {
+            background-color: $stage-hover-bg;
+            color: $gl-text-color;
+          }
+        }
+
+        .ci-action-icon-container {
+          padding: 0;
+          font-size: 11px;
+          position: absolute;
+          top: 1px;
+          right: 8px;
+        }
       }
     }
   }
 
+  .dropdown-counter-badge {
+    color: $border-color;
+    font-weight: 100;
+    font-size: 15px;
+    position: absolute;
+    right: 5px;
+    top: 8px;
+  }
+
   .grouped-pipeline-dropdown {
+    padding: 0;
+    width: 191px;
+    min-width: 191px;
+    left: auto;
+    right: -195px;
+    top: -4px;
+    box-shadow: 0 1px 5px $black-transparent;
+
+    a {
+      display: inline-block;
+    }
+
     .dropdown-build {
       .build-content {
         width: 100%;
@@ -623,333 +660,290 @@
         padding: 0;
         font-size: 11px;
         position: absolute;
-        top: 1px;
-        right: 8px;
+        margin-top: 3px;
+        right: 7px;
       }
     }
+
+    ul {
+      max-height: 245px;
+      overflow: auto;
+      margin: 3px 0;
+
+      li {
+        margin: 4px 8px 4px 9px;
+        padding: 0;
+        line-height: 1.1;
+        position: relative;
+
+        .ci-action-icon-container:hover {
+          background-color: transparent;
+        }
+
+        .ci-status-icon {
+          position: relative;
+          top: 2px;
+        }
+      }
+    }
+  }
+
+  .pipeline-graph .dropdown-build .ci-status-icon svg {
+    width: 18px;
+    height: 18px;
   }
-}
-
-.dropdown-counter-badge {
-  float: right;
-  color: $border-color;
-  font-weight: 100;
-  font-size: 15px;
-  margin-right: 2px;
-}
-
-
-.grouped-pipeline-dropdown {
-  padding: 0;
-  width: 191px;
-  min-width: 191px;
-  left: auto;
-  right: -195px;
-  top: -4px;
-  box-shadow: 0 1px 5px $black-transparent;
-
-  a {
+
+  .ci-status-text {
+    max-width: 110px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
     display: inline-block;
+    position: relative;
+    font-weight: 200;
   }
 
-  .dropdown-build {
-    .build-content {
-      width: 100%;
+  // Action Icons
+  .ci-action-icon-container .ci-action-icon-wrapper {
+    i {
+      color: $border-color;
+      border-radius: 100%;
+      border: 1px solid $border-color;
+      padding: 5px 6px;
+      font-size: 13px;
+      background: $white-light;
+      height: 30px;
+      width: 30px;
+
+      &::before {
+        position: relative;
+        top: 3px;
+        left: 3px;
+      }
 
       &:hover {
-        background-color: $stage-hover-bg;
         color: $gl-text-color;
+        background-color: $stage-hover-bg;
+        border: 1px solid $stage-hover-bg;
       }
     }
 
-    .ci-action-icon-container {
-      padding: 0;
-      font-size: 11px;
-      position: absolute;
-      margin-top: 3px;
-      right: 7px;
+    .ci-play-icon {
+      padding: 5px 5px 5px 7px;
     }
   }
 
-  ul {
-    max-height: 245px;
-    overflow: auto;
-    margin: 3px 0;
+  .dropdown-build {
+    color: $gl-text-color-light;
+
+    .build-content {
+      padding: 4px 7px 8px;
+    }
 
-    li {
-      margin: 4px 8px 4px 9px;
+    .ci-action-icon-container {
       padding: 0;
-      line-height: 1.1;
+      font-size: 11px;
+      float: right;
+      margin-top: 3px;
+      display: inline-block;
       position: relative;
 
-      .ci-action-icon-container:hover {
-        background-color: transparent;
+      i {
+        font-size: 11px;
+        margin-top: 0;
       }
+    }
 
-      .ci-status-icon {
-        position: relative;
-        top: 2px;
+    .ci-action-icon-container {
+      i {
+        width: 24px;
+        height: 24px;
+
+        &::before {
+          top: 1px;
+          left: 1px;
+        }
       }
     }
-  }
-}
-
-.pipeline-graph .dropdown-build .ci-status-icon svg {
-  width: 18px;
-  height: 18px;
-}
-
-.ci-status-text {
-  max-width: 110px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: bottom;
-  display: inline-block;
-  position: relative;
-  font-weight: 200;
-}
-
-// Action Icons
-.ci-action-icon-container .ci-action-icon-wrapper {
-  i {
-    color: $border-color;
-    border-radius: 100%;
-    border: 1px solid $border-color;
-    padding: 5px 6px;
-    font-size: 13px;
-    background: $white-light;
-    height: 30px;
-    width: 30px;
-
-    &::before {
-      position: relative;
-      top: 3px;
-      left: 3px;
-    }
 
-    &:hover {
-      color: $gl-text-color;
-      background-color: $stage-hover-bg;
-      border: 1px solid $stage-hover-bg;
+    .stage {
+      max-width: 100px;
+      width: 100px;
     }
-  }
 
-  .ci-play-icon {
-    padding: 5px 5px 5px 7px;
-  }
-}
-
-.dropdown-build {
-  color: $gl-text-color-light;
+    .ci-status-icon svg {
+      height: 18px;
+      width: 18px;
+    }
 
-  .build-content {
-    padding: 4px 7px 8px;
+    .ci-status-text {
+      max-width: 95px;
+    }
   }
 
-  .ci-action-icon-container {
-    padding: 0;
-    font-size: 11px;
-    float: right;
-    margin-top: 3px;
-    display: inline-block;
-    position: relative;
+  /**
+   * Builds dropdown in mini pipeline
+   */
+  .mini-pipeline-graph {
+    .builds-dropdown {
+      background-color: transparent;
+      padding: 0;
+      color: $gl-text-color-light;
+      border: none;
+      margin: 0;
 
-    i {
-      font-size: 11px;
-      margin-top: 0;
-    }
-  }
+      &:focus,
+      &:hover {
+        outline: none;
+        margin-right: -8px;
 
-  .ci-action-icon-container {
-    i {
-      width: 24px;
-      height: 24px;
+        .ci-status-icon {
+          width: 32px;
+          padding: 0 8px 0 0;
+          transition: width 0.1s cubic-bezier(0.25, 0, 1, 1);
 
-      &::before {
-        top: 1px;
-        left: 1px;
+          + .dropdown-caret {
+            visibility: visible;
+            opacity: 1;
+          }
+        }
       }
-    }
-  }
 
-  .stage {
-    max-width: 100px;
-    width: 100px;
-  }
-
-  .ci-status-icon svg {
-    height: 18px;
-    width: 18px;
-  }
+      &:focus,
+      &:active {
+        .ci-status-icon-success {
+          background-color: rgba($gl-success, .1);
+        }
 
-  .ci-status-text {
-    max-width: 95px;
-  }
-}
-
-/**
- * Builds dropdown in mini pipeline
- */
-.mini-pipeline-graph {
-  .builds-dropdown {
-    background-color: transparent;
-    padding: 0;
-    color: $gl-text-color-light;
-    border: none;
-    margin: 0;
+        .ci-status-icon-failed {
+          background-color: rgba($gl-danger, .1);
+        }
 
-    &:focus,
-    &:hover {
-      outline: none;
-      margin-right: -8px;
+        .ci-status-icon-pending,
+        .ci-status-icon-success_with_warnings {
+          background-color: rgba($gl-warning, .1);
+        }
 
-      .ci-status-icon {
-        width: 32px;
-        padding: 0 8px 0 0;
-        transition: width 0.1s cubic-bezier(0.25, 0, 1, 1);
+        .ci-status-icon-running {
+          background-color: rgba($blue-normal, .1);
+        }
 
-        + .dropdown-caret {
-          visibility: visible;
-          opacity: 1;
+        .ci-status-icon-canceled,
+        .ci-status-icon-disabled,
+        .ci-status-icon-not-found {
+          background-color: rgba($gl-gray, .1);
         }
-      }
-    }
 
-    &:focus,
-    &:active {
-      .ci-status-icon-success {
-        background-color: rgba($gl-success, .1);
+        .ci-status-icon-created,
+        .ci-status-icon-skipped {
+          background-color: rgba($gray-darkest, .1);
+        }
       }
 
-      .ci-status-icon-failed {
-        background-color: rgba($gl-danger, .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;
+        }
       }
+    }
 
-      .ci-status-icon-pending,
-      .ci-status-icon-success_with_warnings {
-        background-color: rgba($gl-warning, .1);
-      }
+    .dropdown-build .build-content {
+      padding: 3px 7px 7px;
+    }
 
-      .ci-status-icon-running {
-        background-color: rgba($blue-normal, .1);
-      }
+    .builds-dropdown-loading {
+      margin: 10px auto;
+      width: 18px;
+    }
 
-      .ci-status-icon-canceled,
-      .ci-status-icon-disabled,
-      .ci-status-icon-not-found {
-        background-color: rgba($gl-gray, .1);
-      }
+    .grouped-pipeline-dropdown {
+      right: -172px;
+      top: 23px;
+      min-height: 50px;
 
-      .ci-status-icon-created,
-      .ci-status-icon-skipped {
-        background-color: rgba($gray-darkest, .1);
+      a {
+        color: $gl-text-color-light;
       }
     }
 
-    .mini-pipeline-graph-icon-container {
-      .dropdown-caret {
-        font-size: 11px;
+    .arrow-up {
+      &::before,
+      &::after {
+        content: '';
+        display: inline-block;
         position: absolute;
-        top: 6px;
-        left: 20px;
-        margin-right: -6px;
-        z-index: 2;
-        visibility: hidden;
-        opacity: 0;
-        transition: visibility 0.1s, opacity 0.1s linear;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+        top: -6px;
+        left: 2px;
+        border-width: 0 5px 6px;
       }
-    }
-  }
-
-  .dropdown-build .build-content {
-    padding: 3px 7px 7px;
-  }
-
-  .builds-dropdown-loading {
-    margin: 10px auto;
-    width: 18px;
-  }
 
-  .grouped-pipeline-dropdown {
-    right: -172px;
-    top: 23px;
-    min-height: 50px;
+      &::before {
+        border-width: 0 5px 5px;
+        border-bottom-color: $border-color;
+      }
 
-    a {
-      color: $gl-text-color-light;
+      &::after {
+        margin-top: 1px;
+        border-bottom-color: $white-light;
+      }
     }
   }
 
-  .arrow-up {
-    &::before,
-    &::after {
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-      top: -6px;
-      left: 2px;
-      border-width: 0 5px 6px;
-    }
-
-    &::before {
-      border-width: 0 5px 5px;
-      border-bottom-color: $border-color;
-    }
+  /**
+   * Icons in mini pipeline graph
+   */
+  .mini-pipeline-graph-icon-container .ci-status-icon {
+    display: inline-block;
+    border: 1px solid;
+    border-radius: 22px;
+    margin-right: 1px;
+    width: 22px;
+    height: 22px;
+    position: relative;
+    z-index: 2;
+    transition: all 0.1s cubic-bezier(0.25, 0, 1, 1);
 
-    &::after {
-      margin-top: 1px;
-      border-bottom-color: $white-light;
+    svg {
+      top: -1px;
+      left: -1px;
     }
   }
-}
-
-/**
- * Icons in mini pipeline graph
- */
-.mini-pipeline-graph-icon-container .ci-status-icon {
-  display: inline-block;
-  border: 1px solid;
-  border-radius: 22px;
-  margin-right: 1px;
-  width: 22px;
-  height: 22px;
-  position: relative;
-  z-index: 2;
-  transition: all 0.1s cubic-bezier(0.25, 0, 1, 1);
-
-  svg {
-    top: -1px;
-    left: -1px;
-  }
-}
-
-.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg {
-  width: 22px;
-  height: 22px;
-}
 
+  .stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg {
+    width: 22px;
+    height: 22px;
+  }
 
-.terminal-icon {
-  margin-left: 3px;
-}
 
-.terminal-container {
-  .content-block {
-    border-bottom: none;
+  .terminal-icon {
+    margin-left: 3px;
   }
 
-  #terminal {
-    margin-top: 10px;
-    min-height: 450px;
-    box-sizing: border-box;
+  .terminal-container {
+    .content-block {
+      border-bottom: none;
+    }
 
-    > div {
+    #terminal {
+      margin-top: 10px;
       min-height: 450px;
+      box-sizing: border-box;
+
+      > div {
+        min-height: 450px;
+      }
     }
   }
-}