16 files changed, 307 insertions, 264 deletions

diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 6981f834d30..fab96404a6c 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -61,6 +61,11 @@
     margin-bottom: -$gl-padding;
   }
 
+  &.content-component-block {
+    padding: 11px 0;
+    background-color: $white-light;
+  }
+
   .title {
     color: $gl-text-color;
   }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 467f3b35d74..1e3083cce55 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -79,6 +79,23 @@
   @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
 }
 
+@mixin btn-with-margin {
+  margin-left: $btn-side-margin;
+  float: left;
+
+  &.inline {
+    float: none;
+  }
+
+  &.btn-sm {
+    margin-left: $btn-sm-side-margin;
+  }
+
+  &.btn-xs {
+    margin-left: $btn-xs-side-margin;
+  }
+}
+
 .btn {
   @include btn-default;
   @include btn-white;
@@ -142,15 +159,9 @@
   }
 
   &.btn-grouped {
-    margin-right: 7px;
-    float: left;
-    &:last-child {
-      margin-right: 0;
-    }
-    &.btn-xs {
-      margin-right: 3px;
-    }
+    @include btn-with-margin;
   }
+
   &.disabled {
     pointer-events: auto !important;
   }
@@ -192,11 +203,7 @@
 
 .btn-group {
   &.btn-grouped {
-    margin-right: 7px;
-    float: left;
-    &:last-child {
-      margin-right: 0;
-    }
+    @include btn-with-margin;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 93c63c69843..d4d579a083d 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -122,10 +122,9 @@
   a {
     display: block;
     position: relative;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding: 5px 10px;
     color: $dropdown-link-color;
-    line-height: 34px;
+    line-height: initial;
     text-overflow: ellipsis;
     border-radius: 2px;
     white-space: nowrap;
@@ -162,6 +161,16 @@
   }
 }
 
+.dropdown-menu-large {
+  width: 340px;
+}
+
+.dropdown-menu-no-wrap {
+  a {
+    white-space: normal;
+  }
+}
+
 .dropdown-menu-full-width {
   width: 100%;
 }
@@ -232,13 +241,11 @@
   a {
     padding-left: 25px;
 
-    &.is-active {
+    &.is-indeterminate, &.is-active {
       &::before {
-        content: "\f00c";
         position: absolute;
         left: 5px;
-        top: 50%;
-        margin-top: -7px;
+        top: 8px;
         font: normal normal normal 14px/1 FontAwesome;
         font-size: inherit;
         text-rendering: auto;
@@ -246,6 +253,14 @@
         -moz-osx-font-smoothing: grayscale;
       }
     }
+
+    &.is-indeterminate::before {
+      content: "\f068";
+    }
+
+    &.is-active::before {
+      content: "\f00c";
+    }
   }
 }
 
@@ -525,3 +540,14 @@
     background-color: $calendar-unselectable-bg;
   }
 }
+
+.dropdown-menu-inner-title {
+  display: block;
+  color: $gl-title-color;
+  font-weight: 600;
+}
+
+.dropdown-menu-inner-content {
+  display: block;
+  color: $gl-placeholder-color;
+}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 46acc3b772f..43d55661541 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -76,6 +76,7 @@ label {
 .form-control {
   @include box-shadow(none);
   border-radius: 3px;
+  padding: $gl-vert-padding $gl-input-padding;
 }
 
 .select-wrapper {
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 16cf394c426..408d4a68e1e 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -8,34 +8,16 @@
  */
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   .page-with-sidebar {
-    .header-logo {
-      background: $color-darker;
-
-      a {
-        color: $color-light;
 
-        h3 {
-          color: $color-light;
-        }
-      }
+    .collapse-nav a {
+      color: $color-light;
+      background: $color;
 
       &:hover {
-        background-color: $color-dark;
-        a {
-          color: #fff;
-
-          h3 {
-            color: #fff;
-          }
-        }
+        color: $white-light;
       }
     }
 
-    .collapse-nav a {
-      color: #fff;
-      background: $color;
-    }
-
     .sidebar-wrapper {
       background: $color-darker;
 
@@ -45,7 +27,7 @@
 
         &:hover {
           background-color: $color-dark;
-          color: #fff;
+          color: $white-light;
           text-decoration: none;
         }
       }
@@ -63,10 +45,20 @@
           color: $color-light;
         }
 
+        path,
+        polygon {
+          fill: $color-light;
+        }
+
         .count {
           color: $color-light;
           background: $color-dark;
         }
+
+        svg {
+          position: relative;
+          top: 3px;
+        }
       }
 
       &.separate-item {
@@ -74,7 +66,7 @@
       }
 
       &.active a {
-        color: #fff;
+        color: $white-light;
         background: $color-dark;
 
         &.no-highlight {
@@ -82,15 +74,23 @@
         }
 
         i {
-          color: #fff
+          color: $white-light
+        }
+
+        path,
+        polygon {
+          fill: $white-light;
         }
       }
     }
   }
 }
 
-$theme-blue: #2980b9;
 $theme-charcoal: #3d454d;
+$theme-charcoal-dark: #383f45;
+$theme-charcoal-text: #b9bbbe;
+
+$theme-blue: #2980b9;
 $theme-graphite: #666;
 $theme-gray: #373737;
 $theme-green: #019875;
@@ -102,7 +102,7 @@ body {
   }
 
   &.ui_charcoal {
-    @include gitlab-theme(#d6d7d9, #485157, $theme-charcoal, #353b41);
+    @include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark);
   }
 
   &.ui_graphite {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 0da96c4017d..63996ea44f6 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -79,6 +79,10 @@ header {
 
     &.header-collapsed {
       padding: 0 16px;
+
+      .side-nav-toggle {
+        display: block;
+      }
     }
 
     .side-nav-toggle {
@@ -86,6 +90,7 @@ header {
       position: absolute;
       left: -10px;
       margin: 6px 0;
+      font-size: 18px;
       padding: 6px 10px;
       border: none;
       background-color: $background-color;
@@ -97,10 +102,6 @@ header {
       &:focus {
         outline: none;
       }
-
-      @media (max-width: $screen-xs-min) {
-        display: block;
-      }
     }
   }
 
@@ -108,10 +109,8 @@ header {
     position: relative;
     height: $header-height;
     padding-right: 40px;
-
-    @media (max-width: $screen-xs-min) {
-      padding-left: 40px;
-    }
+    padding-left: 30px;
+    transition-duration: .3s;
 
     @media (min-width: $screen-sm-min) {
       padding-right: 0;
@@ -121,9 +120,29 @@ header {
       margin-top: -5px;
     }
 
+    .header-logo {
+      position: absolute;
+      left: 50%;
+      margin-left: -18px;
+      top: 7px;
+      transition-duration: .3s;
+      z-index: 999;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        right: 25px;
+        left: auto;
+      }
+    }
+
     .title {
       margin: 0;
       font-size: 19px;
+      max-width: 400px;
+      display: inline-block;
       line-height: $header-height;
       font-weight: normal;
       color: $gl-text-color;
@@ -132,6 +151,10 @@ header {
       vertical-align: top;
       white-space: nowrap;
 
+      @media (max-width: $screen-sm-max) {
+        max-width: 190px;
+      }
+
       a {
         color: $gl-text-color;
         &:hover {
@@ -159,6 +182,10 @@ header {
     .navbar-collapse {
       float: right;
       border-top: none;
+
+      @media (max-width: $screen-xs-max) {
+        float: none;
+      }
     }
   }
 
@@ -171,31 +198,24 @@ header {
   }
 }
 
-@mixin collapsed-header {
-  margin-left: $sidebar_collapsed_width;
-}
-
 .header-collapsed {
-  margin-left: $sidebar_collapsed_width;
+  margin-left: 0;
 
-  @media (min-width: $screen-md-min) {
-    @include collapsed-header;
-  }
+  .header-content {
 
-  @media (max-width: $screen-xs-min) {
-    margin-left: 0;
+    @media (min-width: $screen-sm-max) {
+      padding-left: 30px;
+      transition-duration: .3s;
+    }
   }
 }
 
-.header-expanded {
-  margin-left: $sidebar_collapsed_width;
-
-  @media (min-width: $screen-md-min) {
-    margin-left: $sidebar_width;
-  }
+.tanuki-shape {
+  transition: all 0.8s;
 
-  @media (max-width: $screen-xs-min) {
-    margin-left: 0;
+  &:hover, &.highlight {
+    fill: rgb(255, 255, 255);
+    transition: all 0.1s;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss
index 525ed81b059..30a5b837d69 100644
--- a/app/assets/stylesheets/framework/jquery.scss
+++ b/app/assets/stylesheets/framework/jquery.scss
@@ -2,6 +2,7 @@
   font-family: $regular_font;
   font-size: $font-size-base;
 
+  &.ui-datepicker,
   &.ui-datepicker-inline {
     border: 1px solid #ddd;
     padding: 10px;
@@ -10,6 +11,25 @@
     .ui-datepicker-header {
       background: #fff;
       border-color: #ddd;
+
+      .ui-datepicker-prev,
+      .ui-datepicker-next {
+        top: 4px;
+      }
+
+      .ui-datepicker-prev {
+        left: 2px;
+      }
+
+      .ui-datepicker-next {
+        right: 2px;
+      }
+
+      .ui-state-hover {
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+      }
     }
 
     .ui-datepicker-calendar td a {
@@ -36,21 +56,18 @@
   }
 
   .ui-state-highlight {
-    border: 1px solid #eee;
-    background: #eee;
+    border: 0;
+    background: transparent;
   }
 
-  .ui-state-active {
-    border: 1px solid $gl-primary;
-    background: $gl-primary;
-    color: #fff;
-  }
-
-  .ui-state-hover,
-  .ui-state-focus {
-    border: 1px solid $row-hover;
-    background: $row-hover;
-    color: #333;
+  .ui-datepicker-calendar {
+    .ui-state-active,
+    .ui-state-hover,
+    .ui-state-focus {
+      border: 1px solid $gl-primary;
+      background: $gl-primary;
+      color: #fff;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index b17c8bcbb1e..b34ec16cdba 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -137,10 +137,30 @@ ul.content-list {
       padding-top: 1px;
       float: right;
 
-      .btn {
-        padding: 10px 14px;
+      > .btn,
+      > .btn-group {
+        margin-right: $gl-padding-top;
+        display: inline-block;
+        margin-top: 4px;
+        margin-bottom: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
       }
     }
+
+    // When dragging a list item
+    &.ui-sortable-helper {
+      border-bottom: none;
+    }
+
+    &.list-placeholder {
+      background-color: $gray-light;
+      border: dotted 1px $gray-dark;
+      margin: 1px 0;
+      min-height: 30px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 250d6309291..828e7224231 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -2,18 +2,10 @@
  * Generic mixins
  */
 @mixin box-shadow($shadow) {
-  -webkit-box-shadow: $shadow;
-  -moz-box-shadow: $shadow;
-  -ms-box-shadow: $shadow;
-  -o-box-shadow: $shadow;
   box-shadow: $shadow;
 }
 
 @mixin border-radius($radius) {
-  -webkit-border-radius: $radius;
-  -moz-border-radius: $radius;
-  -ms-border-radius: $radius;
-  -o-border-radius: $radius;
   border-radius: $radius;
 }
 
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index bd531f8376b..d4e5cc819a4 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -66,10 +66,6 @@
     display: none;
   }
 
-  %ul.notes .note-role, .note-actions {
-    display: none;
-  }
-
   .nav-links, .nav-links {
     li a {
       font-size: 14px;
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 7eb7a8e4544..4de89daeb36 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,6 +1,7 @@
 @mixin fade($gradient-direction, $rgba, $gradient-color) {
   visibility: visible;
   opacity: 1;
+  z-index: 2;
   position: absolute;
   bottom: 12px;
   width: 43px;
@@ -41,8 +42,7 @@
 
     a {
       display: inline-block;
-      padding: 14px;
-      padding-top: $gl-padding;
+      padding: $gl-btn-padding;
       padding-bottom: 11px;
       margin-bottom: -1px;
       font-size: 15px;
@@ -67,6 +67,28 @@
       color: #78a;
     }
   }
+
+  &.sub-nav {
+    text-align: center;
+    background-color: $background-color;
+
+    .container-fluid {
+      background-color: $background-color;
+    }
+
+    li {
+
+      a {
+        margin: 0;
+        padding: 11px 10px 9px;
+      }
+
+      &.active a {
+        border-bottom: none;
+        color: $link-underline-blue;
+      }
+    }
+  }
 }
 
 .top-area {
@@ -81,6 +103,10 @@
     width: 50%;
     line-height: 28px;
 
+    &.wiki-page {
+      padding: 16px 10px 11px;
+    }
+
     /* Small devices (phones, tablets, 768px and lower) */
     @media (max-width: $screen-sm-min) {
       width: 100%;
@@ -104,6 +130,10 @@
     margin-bottom: 0;
     border-bottom: none;
 
+    li a {
+      padding: 16px 10px 11px;
+    }
+
     /* Small devices (phones, tablets, 768px and lower) */
     @media (max-width: $screen-sm-max) {
       width: 100%;
@@ -179,7 +209,7 @@
 
     @media (max-width: $screen-xs-max) {
       padding-bottom: 0;
-
+      width: 100%;
       .btn, form, .dropdown, .dropdown-menu-toggle, .form-control {
         margin: 0 0 10px;
         display: block;
@@ -210,16 +240,6 @@
         margin: 0;
       }
     }
-
-    /* Small devices (tablets, 768px and lower) */
-    @media (max-width: $screen-sm-max) {
-      width: 100%;
-      text-align: left;
-
-      input {
-        width: 300px;
-      }
-    }
   }
 }
 
@@ -231,6 +251,7 @@
   background: $background-color;
   border-bottom: 1px solid $border-color;
   transition-duration: .3s;
+  text-align: center;
 
   .container-fluid {
     position: relative;
@@ -276,6 +297,19 @@
     border-bottom: none;
     height: 51px;
 
+    svg {
+      position: relative;
+      top: 2px;
+      margin-right: 2px;
+      height: 15px;
+      width: auto;
+
+      path,
+      polygon {
+        fill: $layout-link-gray;
+      }
+    }
+
     .fade-right {
       @include fade(left, rgba(250, 250, 250, 0.4), $background-color);
       right: 0;
@@ -297,9 +331,17 @@
       }
 
       &.active {
+
         a, i {
           color: $black;
         }
+
+        svg {
+          path,
+          polygon {
+            fill: $black;
+          }
+        }
       }
 
       .badge {
@@ -309,10 +351,10 @@
   }
 
   .nav-control {
-    .fade-right {
 
+    .fade-right {
       @media (min-width: $screen-xs-max) {
-        right: 67px;
+        right: 68px;
       }
       @media (max-width: $screen-xs-min) {
         right: 0;
@@ -321,6 +363,24 @@
   }
 }
 
+.scrolling-tabs-container {
+  position: relative;
+
+  .nav-links {
+    @include scrolling-links();
+
+    .fade-right {
+      @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
+      right: 0;
+    }
+
+    .fade-left {
+      @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
+      left: 0;
+    }
+  }
+}
+
 .nav-block {
   position: relative;
 
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 6efc6ec1e4b..f242706ebe4 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -8,7 +8,7 @@
     background: #fff;
     border-color: $input-border;
     height: 35px;
-    padding: $gl-vert-padding $gl-btn-padding;
+    padding: $gl-vert-padding $gl-input-padding;
     font-size: $gl-font-size;
     line-height: 1.42857143;
     border-radius: $border-radius-base;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 67f491b6d9c..b7ec3f70bfb 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -1,11 +1,3 @@
-#logo {
-  z-index: 2;
-  position: absolute;
-  width: 58px;
-  cursor: pointer;
-  margin-top: 8px;
-}
-
 .page-with-sidebar {
   padding-top: $header-height;
   transition-duration: .3s;
@@ -20,12 +12,6 @@
     height: 100%;
     transition-duration: .3s;
   }
-
-  .gitlab-text-container-link {
-    z-index: 1;
-    position: absolute;
-    left: 0;
-  }
 }
 
 .sidebar-wrapper {
@@ -49,58 +35,11 @@
 }
 
 .sidebar-wrapper {
-  .header-logo {
-    border-bottom: 1px solid transparent;
-    float: left;
-    height: $header-height;
-    width: $sidebar_width;
-    position: fixed;
-    z-index: 999;
-    overflow: hidden;
-    transition-duration: .3s;
-
-    a {
-      float: left;
-      height: $header-height;
-      width: 100%;
-      padding-left: 22px;
-      overflow: hidden;
-      outline: none;
-      transition-duration: .3s;
-
-      img {
-        width: 36px;
-        height: 36px;
-      }
-
-      #tanuki-logo, img {
-        float: left;
-      }
-
-      .gitlab-text-container {
-        width: 230px;
-
-        h3 {
-          width: 158px;
-          float: left;
-          margin: 0;
-          margin-left: 50px;
-          font-size: 19px;
-          line-height: 50px;
-          font-weight: normal;
-        }
-      }
-    }
-
-    &:hover {
-      background-color: #eee;
-    }
-  }
 
   .sidebar-user {
-    padding: 7px 22px;
+    padding: 15px 22px;
     position: fixed;
-    bottom: 40px;
+    bottom: 0;
     width: $sidebar_width;
     overflow: hidden;
     transition-duration: .3s;
@@ -126,8 +65,8 @@
 
 
 .nav-sidebar {
-  margin-top: 14 + $header-height;
-  margin-bottom: 100px;
+  margin-top: 22 + $header-height;
+  margin-bottom: 116px;
   transition-duration: .3s;
   list-style: none;
   overflow: hidden;
@@ -145,13 +84,12 @@
     }
 
     a {
-      padding: 7px 15px;
+      width: $sidebar_width;
+      padding: 7px 15px 7px 23px;
       font-size: $gl-font-size;
       line-height: 24px;
-      color: $gray;
       display: block;
       text-decoration: none;
-      padding-left: 23px;
       font-weight: normal;
       outline: none;
 
@@ -164,16 +102,12 @@
       }
 
       i {
-        width: 16px;
-        color: $gray-light;
-        margin-right: 13px;
+        font-size: 16px;
       }
 
-      .count {
-        float: right;
-        background: #eee;
-        padding: 0 8px;
-        @include border-radius(6px);
+      i,
+      svg {
+        margin-right: 13px;
       }
 
       &.back-link i {
@@ -181,6 +115,12 @@
       }
     }
   }
+
+  .count {
+    float: right;
+    padding: 0 8px;
+    @include border-radius(6px);
+  }
 }
 
 .sidebar-subnav {
@@ -195,11 +135,12 @@
 .collapse-nav a {
   width: $sidebar_width;
   position: fixed;
-  bottom: 0;
+  top: 0;
   left: 0;
-  font-size: 13px;
+  padding: 5px 0;
+  font-size: 18px;
   background: transparent;
-  height: 40px;
+  height: 50px;
   text-align: center;
   line-height: 40px;
   transition-duration: .3s;
@@ -217,37 +158,13 @@
 }
 
 .page-sidebar-collapsed {
-  padding-left: $sidebar_collapsed_width;
-
-  @media (max-width: $screen-xs-min) {
-    padding-left: 0;
-  }
+  padding-left: 0;
 
   .sidebar-wrapper {
-    width: $sidebar_collapsed_width;
-
-    @media (max-width: $screen-xs-min) {
-      width: 0;
-    }
-
-    .header-logo {
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-      }
-
-      a {
-        padding-left: ($sidebar_collapsed_width - 36) / 2;
-
-        .gitlab-text-container {
-          display: none;
-        }
-      }
-    }
+    width: 0;
 
     .nav-sidebar {
-      width: $sidebar_collapsed_width;
+      width: 0;
 
       li {
         width: auto;
@@ -261,46 +178,28 @@
     }
 
     .collapse-nav a {
-      width: $sidebar_collapsed_width;
+      width: 0;
 
-      @media (max-width: $screen-xs-min) {
-        width: 0;
+      i {
+        display: none;
       }
     }
 
     .sidebar-user {
-      padding-left: ($sidebar_collapsed_width - 36) / 2;
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-        padding-left: 0;
-        padding-right: 0;
-      }
+      width: 0;
+      padding-left: 0;
+      padding-right: 0;
 
       .username {
         display: none;
       }
     }
   }
-
-  .layout-nav {
-    padding-right: $sidebar_collapsed_width;
-
-    @media (max-width: $screen-xs-min) {
-      padding-right: 0;;
-    }
-  }
 }
 
 .page-sidebar-expanded {
-  padding-left: $sidebar_collapsed_width;
 
-  @media (min-width: $screen-md-min) {
-    padding-left: $sidebar_width;
-  }
-
-  @media (max-width: $screen-xs-min) {
+  @media (max-width: $screen-sm-max) {
     padding-left: 0;
   }
 
@@ -321,20 +220,6 @@
       }
     }
   }
-
-  .layout-nav {
-    @media (max-width: $screen-xs-min) {
-      padding-right: 0;
-    }
-
-    @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
-      padding-right: 62px;
-    }
-
-    @media (min-width: $screen-md-min) {
-      padding-right: $sidebar_width;
-    }
-  }
 }
 
 .right-sidebar-collapsed {
@@ -353,7 +238,9 @@
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    padding-right: $sidebar_collapsed_width;
+    &:not(.build-sidebar) {
+      padding-right: $sidebar_collapsed_width;
+    }
   }
 
   @media (min-width: $screen-md-min) {
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 29501069d27..0b0bd80c326 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -5,7 +5,7 @@
   padding: 0;
 
   .timeline-entry {
-    padding: $gl-padding $gl-btn-padding;
+    padding: $gl-padding $gl-btn-padding 11px;
     border-color: $table-border-color;
     color: $gl-gray;
     border-bottom: 1px solid $border-white-light;
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 6a45c34ccbb..e3154657c54 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -192,3 +192,8 @@
 .text-info:hover {
   color: $brand-info;
 }
+
+// Prevent datetimes on tooltips to break into two lines
+.local-timeago {
+  white-space: nowrap;
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f253da814bc..752d8ec8788 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -57,6 +57,7 @@ $code_line_height: 1.5;
  */
 $gl-padding: 16px;
 $gl-btn-padding: 10px;
+$gl-input-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top: 10px;
 
@@ -79,6 +80,9 @@ $provider-btn-not-active-color: #4688f1;
 $link-underline-blue: #4a8bee;
 $layout-link-gray: #7e7c7c;
 $todo-alert-blue: #428bca;
+$btn-side-margin: 10px;
+$btn-sm-side-margin: 7px;
+$btn-xs-side-margin: 5px;
 
 /*
  * Color schema
@@ -121,7 +125,7 @@ $border-white-normal: #d6dae2;
 $border-white-dark: #c6cacf;
 
 $border-gray-light: #dcdcdc;
-$border-gray-normal: rgba(0, 0, 0, 0.10);
+$border-gray-normal: #d7d7d7;
 $border-gray-dark: #c6cacf;
 
 $border-green-light: #2faa60;
@@ -256,3 +260,6 @@ $calendar-header-color: #b8b8b8;
 $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
 $calendar-unselectable-bg: #faf9f9;
+
+$ci-output-bg: #1d1f21;
+$ci-text-color: #c5c8c6;