1 files changed, 126 insertions, 110 deletions

diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index e35558ad8e8..28c99d8e57c 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -6,26 +6,26 @@
 @keyframes blinking-dots {
   0% {
     background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
-                24px 0 0 0 rgba($white-light,0.2);
+    box-shadow: 12px 0 0 0 rgba($white-light, 0.2),
+                24px 0 0 0 rgba($white-light, 0.2);
   }
 
   25% {
     background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light,2),
-                24px 0 0 0 rgba($white-light,0.2);
+    box-shadow: 12px 0 0 0 rgba($white-light, 2),
+                24px 0 0 0 rgba($white-light, 0.2);
   }
 
   75% {
     background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
-                24px 0 0 0 rgba($white-light,1);
+    box-shadow: 12px 0 0 0 rgba($white-light, 0.2),
+                24px 0 0 0 rgba($white-light, 1);
   }
 
   100% {
     background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
-                24px 0 0 0 rgba($white-light,0.2);
+    box-shadow: 12px 0 0 0 rgba($white-light, 0.2),
+                24px 0 0 0 rgba($white-light, 0.2);
   }
 }
 
@@ -37,73 +37,88 @@
 }
 
 .build-page {
-  .sticky {
-    position: absolute;
-    left: 0;
-    right: 0;
+  .build-trace-container {
+    position: relative;
   }
 
-  .build-trace-container {
-    position: absolute;
-    top: 225px;
-    left: 15px;
-    bottom: 10px;
+  .build-trace {
     background: $black;
     color: $gray-darkest;
-    font-family: $monospace_font;
+    white-space: pre;
+    overflow-x: auto;
     font-size: 12px;
+    border-radius: 0;
+    border: none;
 
-    &.sidebar-expanded {
-      right: 305px;
+    .bash {
+      display: block;
     }
+  }
 
-    &.sidebar-collapsed {
-      right: 16px;
+  .top-bar {
+    height: 35px;
+    display: flex;
+    justify-content: flex-end;
+    background: $gray-light;
+    border: 1px solid $border-color;
+    color: $gl-text-color;
+    position: sticky;
+    position: -webkit-sticky;
+    top: $header-height;
+
+    &.affix {
+      top: $header-height;
     }
 
-    code {
-      background: $black;
-      color: $gray-darkest;
+    // with sidebar
+    &.affix.sidebar-expanded {
+      right: 306px;
+      left: 16px;
     }
 
-    .top-bar {
+    // without sidebar
+    &.affix.sidebar-collapsed {
+      right: 16px;
+      left: 16px;
+    }
+
+    &.affix-top {
+      position: absolute;
+      right: 0;
+      left: 0;
       top: 0;
-      height: 35px;
-      display: flex;
-      justify-content: flex-end;
-      border-bottom: 1px outset $white-light;
+    }
 
-      .truncated-info {
-        margin: 0 auto;
-        align-self: center;
+    .truncated-info {
+      margin: 0 auto;
+      align-self: center;
 
-        .truncated-info-size {
-          margin: 0 5px;
-        }
+      .truncated-info-size {
+        margin: 0 5px;
+      }
 
-        .raw-link {
-          color: inherit;
-          margin-left: 5px;
-          text-decoration: underline;
-        }
+      .raw-link {
+        color: $gl-text-color;
+        margin-left: 5px;
+        text-decoration: underline;
       }
     }
 
     .controllers {
       display: flex;
-      align-self: center;
       font-size: 15px;
+      justify-content: center;
+      align-items: center;
 
       svg {
         height: 15px;
         display: block;
-        fill: $white-light;
+        fill: $gl-text-color;
       }
 
-      a,
-      .btn-scroll {
-        margin: 0 8px;
-        color: $white-light;
+      .controllers-buttons {
+        color: $gl-text-color;
+        margin: 0 10px;
       }
 
       .btn-scroll.animate {
@@ -133,25 +148,17 @@
     }
   }
 
-  .bash {
-    top: 35px;
-    left: 10px;
-    bottom: 0;
-    overflow-y: hidden;
-    padding-bottom: 20px;
-    padding-right: 20px;
-  }
-
   .environment-information {
-    background-color: $gray-light;
     border: 1px solid $border-color;
-    padding: 12px $gl-padding;
+    padding: 8px $gl-padding 12px;
     border-radius: $border-radius-default;
 
     svg {
       position: relative;
-      top: 1px;
+      top: 5px;
       margin-right: 5px;
+      width: 22px;
+      height: 22px;
     }
   }
 
@@ -165,54 +172,41 @@
   }
 }
 
-.status-message {
-  display: inline-block;
-  color: $white-light;
+.with-performance-bar .build-page {
+  .top-bar {
+    top: $header-height + $performance-bar-height;
 
-  .status-icon {
-    display: inline-block;
-    width: 16px;
-    height: 33px;
-  }
-
-  .status-text {
-    float: left;
-    opacity: 0;
-    margin-right: 10px;
-    font-weight: normal;
-    line-height: 1.8;
-    transition: opacity 1s ease-out;
-
-    &.animate {
-      animation: fade-out-status 2s ease;
+    &.affix {
+      top: $header-height + $performance-bar-height;
     }
   }
-
-  &:hover .status-text {
-    opacity: 1;
-  }
 }
 
 .build-header {
-  position: relative;
-  padding: 0;
-  display: flex;
-  min-height: 58px;
-  align-items: center;
+  .ci-header-container,
+  .header-action-buttons {
+    display: flex;
+  }
 
-  @media (max-width: $screen-sm-max) {
-    padding-right: 40px;
-    margin-top: 6px;
+  .ci-header-container {
+    min-height: 54px;
+  }
+
+  .page-content-header {
+    padding: 10px 0 9px;
+  }
 
-    .btn-inverted {
-      display: none;
+  .header-action-buttons {
+    @media (max-width: $screen-xs-max) {
+      .sidebar-toggle-btn {
+        margin-top: 0;
+        margin-left: 10px;
+        max-height: 34px;
+      }
     }
   }
 
   .header-content {
-    flex: 1;
-    line-height: 1.8;
-
     a {
       color: $gl-text-color;
 
@@ -235,7 +229,7 @@
 }
 
 .right-sidebar.build-sidebar {
-  padding: $gl-padding 0;
+  padding: 0;
 
   &.right-sidebar-collapsed {
     display: none;
@@ -248,6 +242,10 @@
   .block {
     width: 100%;
 
+    &:last-child {
+      border-bottom: 1px solid $border-gray-normal;
+    }
+
     &.coverage {
       padding: 0 16px 11px;
     }
@@ -257,34 +255,43 @@
     }
   }
 
-  .js-build-variable {
+  .block-last {
+    padding: 16px 0;
+  }
+
+  .trigger-build-variable {
     color: $code-color;
   }
 
-  .js-build-value {
+  .trigger-build-value {
     padding: 2px 4px;
     color: $black;
     background-color: $white-light;
   }
 
-  .build-sidebar-header {
-    padding: 0 $gl-padding $gl-padding;
-
-    .gutter-toggle {
-      margin-top: 0;
-    }
+  .label {
+    margin-left: 2px;
   }
 
   .retry-link {
-    color: $gl-link-color;
     display: none;
 
-    &:hover {
-      text-decoration: underline;
+    .btn-inverted-secondary {
+      color: $blue-500;
+
+      &:hover {
+        color: $white-light;
+      }
     }
 
     @media (max-width: $screen-sm-max) {
       display: block;
+
+      .btn {
+        i {
+          margin-left: 5px;
+        }
+      }
     }
   }
 
@@ -304,9 +311,13 @@
     }
 
     .dropdown-menu {
-      right: $gl-padding;
-      left: $gl-padding;
-      width: auto;
+      margin-top: -$gl-padding;
+    }
+
+    svg {
+      position: relative;
+      top: 2px;
+      margin-right: 3px;
     }
   }
 
@@ -369,6 +380,10 @@
       }
     }
   }
+
+  .link-commit {
+    color: $blue-600;
+  }
 }
 
 .build-sidebar {
@@ -391,6 +406,7 @@
 
 .build-light-text {
   color: $gl-text-color-secondary;
+  word-wrap: break-word;
 }
 
 .build-gutter-toggle {