1 files changed, 189 insertions, 189 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 20eabc83142..9637d26e56d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,9 +1,4 @@
 .pipelines {
-  .realtime-loading {
-    font-size: 40px;
-    text-align: center;
-  }
-
   .stage {
     max-width: 90px;
     width: 90px;
@@ -15,14 +10,13 @@
 
   .table-holder {
     width: 100%;
-    overflow: auto;
   }
 
   .commit-title {
     margin: 0;
   }
 
-  .table.ci-table {
+  .ci-table {
 
     .label {
       margin-bottom: 3px;
@@ -32,11 +26,6 @@
       color: $black;
     }
 
-    .stage-cell {
-      min-width: 130px; // Guarantees we show at least 4 stages in line
-      width: 20%;
-    }
-
     .pipelines-time-ago {
       text-align: right;
     }
@@ -72,11 +61,6 @@
           color: $gl-text-color-secondary;
           font-size: 14px;
         }
-
-        svg,
-        .fa {
-          margin-right: 0;
-        }
       }
 
       .btn-group {
@@ -95,6 +79,10 @@
         }
       }
 
+      .btn .text-center {
+        display: inline;
+      }
+
       .tooltip {
         white-space: nowrap;
       }
@@ -104,8 +92,6 @@
 
 @media (max-width: $screen-md-max) {
   .content-list {
-    &.pipelines,
-    &.environments-container,
     &.builds-content-list {
       width: 100%;
       overflow: auto;
@@ -113,39 +99,7 @@
   }
 }
 
-.table.ci-table {
-
-  &.builds-page tbody tr {
-    height: 71px;
-  }
-
-  tr {
-    th {
-      padding: 16px 8px;
-      border: none;
-    }
-
-    td {
-      padding: 10px 8px;
-    }
-
-    td.environments-actions {
-      padding-right: 0;
-    }
-
-    td.stage-cell {
-      padding: 10px 0;
-    }
-
-    .commit-link {
-      padding: 9px 8px 10px 2px;
-    }
-  }
-
-  tbody {
-    border-top-width: 1px;
-  }
-
+.ci-table {
   .build.retried {
     background-color: $gray-lightest;
   }
@@ -167,15 +121,19 @@
     float: none;
   }
 
+  .api {
+    @extend .monospace;
+  }
+
   .branch-commit {
 
-    .branch-name {
+    .ref-name {
       font-weight: bold;
       max-width: 120px;
       overflow: hidden;
       display: inline-block;
       white-space: nowrap;
-      vertical-align: top;
+      vertical-align: middle;
       text-overflow: ellipsis;
     }
 
@@ -191,18 +149,10 @@
       color: $gl-text-color;
     }
 
-    .commit-id {
+    .commit-sha {
       color: $gl-link-color;
     }
 
-    .commit-title {
-      margin-top: 4px;
-      max-width: 225px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
     .label {
       margin-right: 4px;
     }
@@ -229,7 +179,7 @@
   .duration,
   .finished-at {
     color: $gl-text-color-secondary;
-    margin: 4px 0;
+    margin: 0;
     white-space: nowrap;
 
     .fa {
@@ -255,11 +205,7 @@
 }
 
 .stage-cell {
-  font-size: 0;
-  padding: 10px 4px;
-
-  > .stage-container > div > button > span > svg,
-  > .stage-container > button > svg {
+  .mini-pipeline-graph-dropdown-toggle svg {
     height: 22px;
     width: 22px;
     position: absolute;
@@ -272,6 +218,7 @@
   .stage-container {
     display: inline-block;
     position: relative;
+    vertical-align: middle;
     height: 22px;
     margin: 3px 6px 3px 0;
 
@@ -315,6 +262,32 @@
   }
 }
 
+.build-failures {
+  .build-state {
+    padding: 20px 2px;
+
+    .build-name {
+      float: right;
+      font-weight: 500;
+    }
+
+    .ci-status-icon-failed svg {
+      vertical-align: middle;
+    }
+
+    .stage {
+      color: $gl-text-color-secondary;
+      font-weight: 500;
+      vertical-align: middle;
+    }
+  }
+
+  .build-log {
+    border: none;
+    line-height: initial;
+  }
+}
+
 // Pipeline graph
 .pipeline-graph {
   width: 100%;
@@ -356,9 +329,9 @@
             content: '';
             position: absolute;
             top: 48%;
-            left: -48px;
+            left: -44px;
             border-top: 2px solid $border-color;
-            width: 48px;
+            width: 44px;
             height: 1px;
           }
         }
@@ -458,7 +431,7 @@
     color: $gl-text-color-secondary;
 
     // Action Icons in big pipeline-graph nodes
-    > .ci-action-icon-container .ci-action-icon-wrapper {
+    .ci-action-icon-container .ci-action-icon-wrapper {
       height: 30px;
       width: 30px;
       background: $white-light;
@@ -483,7 +456,7 @@
       }
     }
 
-    > .ci-action-icon-container {
+    .ci-action-icon-container {
       position: absolute;
       right: 5px;
       top: 5px;
@@ -513,50 +486,23 @@
       }
     }
 
-    > .build-content {
+    .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;
-      }
     }
 
-
-    .arrow {
-      &::before,
-      &::after {
-        content: '';
-        display: inline-block;
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        border-style: solid;
-        top: 18px;
-      }
-
-      &::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;
-      }
+    a.build-content:hover,
+    button.build-content:hover {
+      background-color: $stage-hover-bg;
+      border: 1px solid $stage-hover-border;
+      color: $gl-text-color;
     }
 
+
     // Connect first build in each stage with right horizontal line
     &:first-child {
       &::after {
@@ -633,6 +579,23 @@
   font-weight: normal;
 }
 
+@mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) {
+  border-color: $color-main;
+  color: $color-main;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $color-light;
+    border-color: $color-dark;
+    color: $color-dark;
+
+    svg {
+      fill: $color-dark;
+    }
+  }
+}
+
 // Dropdown button in mini pipeline graph
 .mini-pipeline-graph-dropdown-toggle {
   border-radius: 100px;
@@ -672,80 +635,32 @@
 
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    border-color: $gl-success;
-    color: $gl-success;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: rgba($gl-success, 0.1);
-      border-color: $gl-success;
-    }
+    @include mini-pipeline-graph-color($green-50, $green-500, $green-600);
   }
 
   &.ci-status-icon-failed {
-    border-color: $gl-danger;
-    color: $gl-danger;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: rgba($gl-danger, 0.1);
-      border-color: $gl-danger;
-    }
+    @include mini-pipeline-graph-color($red-50, $red-500, $red-600);
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-success_with_warnings {
-    border-color: $gl-warning;
-    color: $gl-warning;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: rgba($gl-warning, 0.1);
-      border-color: $gl-warning;
-    }
+    @include mini-pipeline-graph-color($orange-50, $orange-500, $orange-600);
   }
 
   &.ci-status-icon-running {
-    border-color: $blue-normal;
-    color: $blue-normal;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: rgba($blue-normal, 0.1);
-      border-color: $blue-normal;
-    }
+    @include mini-pipeline-graph-color($blue-50, $blue-400, $blue-600);
   }
 
   &.ci-status-icon-canceled,
   &.ci-status-icon-disabled,
   &.ci-status-icon-not-found,
   &.ci-status-icon-manual {
-    border-color: $gl-text-color;
-    color: $gl-text-color;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: rgba($gl-text-color, 0.1);
-      border-color: $gl-text-color;
-    }
+    @include mini-pipeline-graph-color(rgba($gl-text-color, 0.1), $gl-text-color, $gl-text-color);
   }
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    border-color: $gray-darkest;
-    color: $gray-darkest;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: rgba($gray-darkest, 0.1);
-      border-color: $gray-darkest;
-    }
+    @include mini-pipeline-graph-color(rgba($gray-darkest, 0.1), $gray-darkest, $gray-darkest);
   }
 }
 
@@ -760,16 +675,11 @@
   }
 
   .scrollable-menu {
+    padding: 0;
     max-height: 245px;
     overflow: auto;
   }
 
-  // Loading icon
-  .builds-dropdown-loading {
-    margin: 0 auto;
-    width: 20px;
-  }
-
   // Action icon on the right
   a.ci-action-icon-wrapper {
     color: $action-icon-color;
@@ -816,7 +726,8 @@
     border-radius: 3px;
 
     // build name
-    .ci-build-text {
+    .ci-build-text,
+    .ci-status-text {
       font-weight: 200;
       overflow: hidden;
       white-space: nowrap;
@@ -828,6 +739,10 @@
       top: 1px;
       vertical-align: text-bottom;
       position: relative;
+
+      @media (max-width: $screen-xs-max) {
+        max-width: 60%;
+      }
     }
 
     // status icon on the left
@@ -869,37 +784,88 @@
 }
 
 /**
+ * Top arrow in the dropdown in the big pipeline graph
+ */
+.big-pipeline-graph-dropdown-menu {
+
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    top: 18px;
+  }
+
+  &::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;
+  }
+}
+
+/**
  * Top arrow in the dropdown in the mini pipeline graph
  */
 .mini-pipeline-graph-dropdown-menu {
-  .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;
-    }
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    top: -6px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    border-width: 0 5px 6px;
 
-    &::after {
-      margin-top: 1px;
-      border-bottom-color: $white-light;
+    @media (max-width: $screen-sm-max) {
+      left: 100%;
+      margin-left: -12px;
     }
   }
+
+  &::before {
+    border-width: 0 5px 5px;
+    border-bottom-color: $border-color;
+  }
+
+  &::after {
+    margin-top: 1px;
+    border-bottom-color: $white-light;
+  }
 }
 
 /**
+ * Center dropdown menu in mini graph
+ */
+.mini-pipeline-graph-dropdown-menu.dropdown-menu {
+  transform: translate(-80%, 0);
+  min-width: 150px;
+
+  @media(min-width: $screen-md-min) {
+    transform: translate(-50%, 0);
+    right: auto;
+    left: 50%;
+    min-width: 240px;
+  }
+}
+/**
  * Terminal
  */
 .terminal-icon {
@@ -921,3 +887,37 @@
     }
   }
 }
+
+/**
+ * Play button with icon in dropdowns
+ */
+.ci-table .no-btn {
+  border: none;
+  background: none;
+  outline: none;
+  width: 100%;
+  text-align: left;
+
+  .icon-play {
+    position: relative;
+    top: 2px;
+    margin-right: 5px;
+    height: 13px;
+    width: 12px;
+  }
+}
+
+.ci-header-container {
+  min-height: 55px;
+
+  .text-center {
+    padding-top: 12px;
+  }
+
+  .header-action-buttons {
+    .btn,
+    a {
+      margin-left: 10px;
+    }
+  }
+}