Merge branch 'master' into bvl-group-trees

31 files changed, 836 insertions, 962 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 74b846217bb..c7be94e2c8e 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -30,16 +30,16 @@
 @import "framework/media_object";
 @import "framework/mobile";
 @import "framework/modal";
-@import "framework/nav";
-@import "framework/new-nav";
 @import "framework/pagination";
 @import "framework/panels";
+@import "framework/secondary-navigation-elements";
 @import "framework/selects";
 @import "framework/sidebar";
 @import "framework/new-sidebar";
 @import "framework/tables";
 @import "framework/notes";
 @import "framework/timeline";
+@import "framework/tooltips";
 @import "framework/typography";
 @import "framework/zen";
 @import "framework/blank";
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 667b73e150d..f0e6b23757f 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -115,8 +115,7 @@
   @return $unfoldedTransition;
 }
 
-.btn,
-.global-dropdown-toggle {
+.btn {
   @include transition(background-color, border-color, color, box-shadow);
 }
 
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 1d72a70f0f5..dbd990f84c1 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -207,6 +207,16 @@
 
   &.user-cover-block {
     padding: 24px 0 0;
+
+    .nav-links {
+      justify-content: center;
+      width: 100%;
+      float: none;
+
+      &.scrolling-tabs {
+        float: none;
+      }
+    }
   }
 
   .group-info {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index d178bc17462..b131e2d57ee 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -1,3 +1,25 @@
+@mixin btn-comment-icon {
+  border-radius: 50%;
+  background: $white-light;
+  padding: 1px 5px;
+  font-size: 12px;
+  color: $blue-500;
+  width: 23px;
+  height: 23px;
+  border: 1px solid $blue-500;
+
+  &:hover,
+  &.inverted {
+    background: $blue-500;
+    border-color: $blue-600;
+    color: $white-light;
+  }
+
+  &:active {
+    outline: 0;
+  }
+}
+
 @mixin btn-default {
   border-radius: 3px;
   font-size: $gl-font-size;
@@ -381,7 +403,11 @@
   background: transparent;
   border: 0;
 
+  &:hover,
+  &:active,
   &:focus {
     outline: 0;
+    background: transparent;
+    box-shadow: none;
   }
 }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index fa92d4ccf4f..5b950ae0ba0 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -749,7 +749,7 @@
       margin-bottom: $dropdown-vertical-offset;
     }
 
-    li {
+    li:not(.dropdown-bold-header) {
       display: block;
       padding: 0 1px;
 
@@ -889,7 +889,7 @@
 @include new-style-dropdown('.breadcrumbs-list .dropdown ');
 @include new-style-dropdown('.js-namespace-select + ');
 
-header.navbar-gitlab-new .header-content .dropdown-menu.projects-dropdown-menu {
+header.header-content .dropdown-menu.projects-dropdown-menu {
   padding: 0;
 }
 
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 6b69e8018be..52b87de7a3d 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -5,7 +5,7 @@
 @mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900, $color-alternate) {
   // Header
 
-  header.navbar-gitlab-new {
+  .navbar-gitlab {
     background-color: $color-900;
 
     .navbar-collapse {
@@ -95,7 +95,7 @@
     }
   }
 
-  .title {
+  .navbar .title {
     > a {
       &:hover,
       &:focus {
@@ -200,9 +200,9 @@ body {
   &.ui_light {
     @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700);
 
-    header.navbar-gitlab-new {
+    .navbar-gitlab {
       background-color: $theme-gray-100;
-      box-shadow: 0 2px 0 0 $border-color;
+      box-shadow: 0 1px 0 0 $border-color;
 
       .logo-text svg {
         fill: $theme-gray-900;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index d932ea8794f..22945e935ef 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -1,112 +1,37 @@
-/*
- *  Application Header
- *
- */
+.content-wrapper.page-with-new-nav {
+  margin-top: $header-height;
+}
 
-header {
+.navbar-gitlab {
   @include new-style-dropdown;
 
-  transition: padding $sidebar-transition-duration;
-
-  &.navbar-empty {
-    height: $header-height;
-    background: $white-light;
-    border-bottom: 1px solid $white-normal;
-
-    .center-logo {
-      margin: 8px 0;
-      text-align: center;
-
-      .tanuki-logo,
-      img {
-        height: 36px;
-      }
-    }
-  }
-
   &.navbar-gitlab {
     padding: 0 16px;
     z-index: 1000;
     margin-bottom: 0;
     min-height: $header-height;
-    background-color: $gray-light;
     border: none;
     border-bottom: 1px solid $border-color;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    color: $gl-text-color-secondary;
     border-radius: 0;
 
-    @media (max-width: $screen-xs-min) {
-      padding: 0 16px;
-    }
-
-    &.with-horizontal-nav {
-      border-bottom: 0;
+    .logo-text {
+      line-height: initial;
 
-      .navbar-border {
-        height: 1px;
-        position: absolute;
-        right: 0;
-        left: 0;
-        bottom: -1px;
-        background-color: $border-color;
-        opacity: 0;
+      svg {
+        width: 55px;
+        height: 14px;
+        margin: 0;
+        fill: $white-light;
       }
     }
 
     .container-fluid {
-      width: 100% !important;
-      filter: none;
       padding: 0;
 
-      .nav > li > a {
-        color: currentColor;
-        font-size: 18px;
-        padding: 0;
-        margin: (($header-height - 28) / 2) 3px;
-        margin-left: 8px;
-        height: 28px;
-        min-width: 32px;
-        line-height: 28px;
-        text-align: center;
-
-        &.header-user-dropdown-toggle {
-          margin-left: 14px;
-
-          &:hover,
-          &:focus,
-          &:active {
-            .header-user-avatar {
-              border-color: rgba($avatar-border, .2);
-            }
-          }
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: transparent;
-          color: $gl-text-color;
-
-          svg {
-            fill: $gl-text-color;
-          }
-        }
-
-        .fa-caret-down {
-          font-size: 14px;
-        }
-
-        .fa-chevron-down {
-          position: relative;
-          top: -3px;
-          font-size: 10px;
-        }
-      }
-
       .user-counter {
         svg {
           margin-right: 3px;
@@ -114,81 +39,117 @@ header {
       }
 
       .navbar-toggle {
-        color: $nav-toggle-gray;
-        margin: 5px 0;
-        border-radius: 0;
         right: -10px;
-        padding: 6px 10px;
+        border-radius: 0;
+        min-width: 45px;
+        padding: 0;
+        margin-right: -7px;
+        font-size: 14px;
+        text-align: center;
+        color: currentColor;
 
-        &:hover {
-          background-color: $white-normal;
+        &:hover,
+        &:focus,
+        &.active {
+          color: currentColor;
+          background-color: transparent;
         }
 
-        &.active {
-          color: $gl-text-color-secondary;
+        .more-icon,
+        .close-icon {
+          fill: $white-light;
+          margin: auto;
         }
       }
     }
   }
 
-  &.navbar-gitlab-new {
-    .close-icon {
+  .close-icon {
+    display: none;
+  }
+
+  .menu-expanded {
+    .more-icon {
       display: none;
     }
 
-    .menu-expanded {
-      .more-icon {
-        display: none;
-      }
-
-      .close-icon {
-        display: block;
-      }
+    .close-icon {
+      display: block;
     }
   }
 
-  .global-dropdown {
-    position: absolute;
-    left: -10px;
+  .header-content {
+    display: -webkit-flex;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    min-height: $header-height;
+    padding-left: 0;
 
-    .badge {
-      font-size: 11px;
+    .title-container {
+      display: -webkit-flex;
+      display: flex;
+      -webkit-align-items: stretch;
+      align-items: stretch;
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+      padding-top: 0;
+      overflow: visible;
     }
 
-    li {
-      &.active a {
-        font-weight: $gl-font-weight-bold;
+    .title {
+      padding-right: 0;
+      color: currentColor;
+      display: -webkit-flex;
+      display: flex;
+      position: relative;
+      margin: 0;
+      font-size: 18px;
+      vertical-align: top;
+      white-space: nowrap;
+
+      img {
+        height: 28px;
+        margin-right: 8px;
       }
-    }
-  }
 
-  .global-dropdown-toggle {
-    margin: 7px 0;
-    font-size: 18px;
-    padding: 6px 10px;
-    border: none;
-    background-color: $gray-light;
+      &.wrap {
+        white-space: normal;
+      }
 
-    &:hover {
-      background-color: $white-normal;
-    }
+      &.initializing {
+        opacity: 0;
+      }
+
+      a {
+        display: -webkit-flex;
+        display: flex;
+        align-items: center;
+        padding: 2px 8px;
+        margin: 5px 2px 5px -8px;
+        border-radius: $border-radius-default;
 
-    &:focus {
-      outline: none;
-      background-color: $white-normal;
+        svg {
+          @media (min-width: $screen-sm-min) {
+            margin-right: 8px;
+          }
+        }
+      }
+
+      .project-item-select {
+        right: auto;
+        left: 0;
+      }
     }
-  }
 
-  .header-content {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    min-height: $header-height;
-    padding-left: 30px;
+    .dropdown.open {
+      > a {
+        border-bottom-color: $white-light;
+      }
+    }
 
     &.menu-expanded {
       @media (max-width: $screen-xs-max) {
-        .header-logo,
         .title-container {
           display: none;
         }
@@ -198,111 +159,180 @@ header {
         }
       }
     }
+  }
 
-    .dropdown-menu {
-      margin-top: -5px;
-    }
+  .dropdown-bold-header {
+    color: $gl-text-color-secondary;
+    font-size: 12px;
+  }
 
-    .header-logo {
-      display: inline-block;
-      margin: 0 12px 0 2px;
-      position: relative;
-      top: 10px;
-      transition-duration: .3s;
+  .navbar-collapse {
+    flex: 0 0 auto;
+    border-top: none;
+    padding: 0;
 
-      svg,
-      img {
-        height: 28px;
-      }
+    @media (max-width: $screen-xs-max) {
+      flex: 1 1 auto;
+    }
 
-      &:hover {
-        cursor: pointer;
+    .nav {
+      > li:not(.hidden-xs) a {
+        @media (max-width: $screen-xs-max) {
+          margin-left: 0;
+          min-width: 100%;
+        }
       }
     }
+  }
 
-    .group-name-toggle {
-      margin: 3px 5px;
-    }
+  .container-fluid {
 
-    .group-title {
-      &.is-hidden {
-        .hidable:not(:last-of-type) {
-          display: none;
+    .navbar-nav {
+      @media (max-width: $screen-xs-max) {
+        display: -webkit-flex;
+        display: flex;
+        padding-right: 10px;
+      }
+
+      li {
+        .badge {
+          box-shadow: none;
+          font-weight: $gl-font-weight-bold;
         }
       }
     }
 
-    .title-container {
-      display: flex;
-      align-items: flex-start;
-      flex: 1 1 auto;
-      padding-top: 14px;
-      overflow: hidden;
-    }
+    .nav > li {
+      &.header-user {
+        @media (max-width: $screen-xs-max) {
+          padding-left: 10px;
+        }
+      }
 
-    .title {
-      position: relative;
-      padding-right: 20px;
-      margin: 0;
-      font-size: 18px;
-      line-height: 22px;
-      display: inline-block;
-      font-weight: $gl-font-weight-normal;
-      color: $gl-text-color;
-      vertical-align: top;
-      white-space: nowrap;
+      > a {
+        will-change: color;
+        margin: 4px 2px;
+        padding: 6px 8px;
+        height: 32px;
 
-      &.wrap {
-        white-space: normal;
+        @media (max-width: $screen-xs-max) {
+          padding: 0;
+        }
+
+        &.header-user-dropdown-toggle {
+          margin-left: 2px;
+
+          .header-user-avatar {
+            margin-right: 0;
+          }
+        }
+
+        &:hover,
+        &:focus {
+          text-decoration: none;
+          outline: 0;
+          opacity: 1;
+          color: $white-light;
+
+          svg {
+            fill: currentColor;
+          }
+
+          &.header-user-dropdown-toggle {
+            .header-user-avatar {
+              border-color: $white-light;
+            }
+          }
+        }
       }
 
-      &.initializing {
-        opacity: 0;
+      .header-new-dropdown-toggle {
+        margin-right: 0;
       }
 
-      a {
-        color: currentColor;
+      .impersonated-user,
+      .impersonated-user:hover {
+        margin-right: 1px;
+        background-color: $white-light;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
 
-        &:hover {
-          text-decoration: underline;
-          color: $gl-header-nav-hover-color;
+      .impersonation-btn,
+      .impersonation-btn:hover {
+        background-color: $white-light;
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        i {
+          color: $orange-500;
+          font-size: 20px;
         }
       }
 
-      .dropdown-toggle-caret {
-        color: $gl-text-color;
-        border: transparent;
-        background: transparent;
-        position: absolute;
-        top: 2px;
-        right: 3px;
-        width: 12px;
-        line-height: 19px;
-        padding: 0;
-        font-size: 10px;
-        text-align: center;
-        cursor: pointer;
+      &.active > a,
+      &.dropdown.open > a {
 
-        &:hover {
-          color: $gl-header-nav-hover-color;
+        svg {
+          fill: currentColor;
         }
       }
+    }
+  }
+}
 
-      .project-item-select {
-        right: auto;
-        left: 0;
+.navbar-sub-nav,
+.navbar-nav {
+  > li {
+    > a:hover,
+    > a:focus {
+      text-decoration: none;
+      outline: 0;
+      color: $white-light;
+
+      svg {
+        fill: currentColor;
       }
     }
 
-    .navbar-collapse {
-      flex: 0 0 auto;
-      border-top: none;
-      padding: 0;
-
-      @media (max-width: $screen-xs-max) {
-        flex: 1 1 auto;
+    > a {
+      display: -webkit-flex;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 6px 8px;
+      margin: 4px 2px;
+      font-size: 12px;
+      color: currentColor;
+      border-radius: $border-radius-default;
+      height: 32px;
+      font-weight: $gl-font-weight-bold;
+
+      svg {
+        fill: currentColor;
       }
     }
+
+    &.line-separator {
+      margin: 8px;
+    }
+  }
+}
+
+.navbar-sub-nav {
+  display: -webkit-flex;
+  display: flex;
+  margin: 0 0 0 6px;
+
+  .projects-dropdown-menu {
+    padding: 0;
+  }
+
+  .dropdown-chevron {
+    position: relative;
+    top: -1px;
+    font-size: 10px;
   }
 
   .project-item-select-holder {
@@ -314,8 +344,123 @@ header {
   }
 }
 
-.with-performance-bar header.navbar-gitlab {
-  top: $performance-bar-height;
+.caret-down {
+  height: 11px;
+  width: 11px;
+  margin-left: 4px;
+  fill: currentColor;
+}
+
+.header-user .dropdown-menu-nav,
+.header-new .dropdown-menu-nav {
+  margin-top: $dropdown-vertical-offset;
+}
+
+.breadcrumbs {
+  display: -webkit-flex;
+  display: flex;
+  min-height: 48px;
+  color: $gl-text-color;
+}
+
+.breadcrumbs-container {
+  display: -webkit-flex;
+  display: flex;
+  width: 100%;
+  position: relative;
+  padding-top: $gl-padding / 2;
+  padding-bottom: $gl-padding / 2;
+  align-items: center;
+  border-bottom: 1px solid $border-color;
+}
+
+.breadcrumbs-links {
+  -webkit-flex: 1;
+  flex: 1;
+  min-width: 0;
+  align-self: center;
+  color: $gl-text-color-secondary;
+
+  .avatar-tile {
+    margin-right: 4px;
+    border: 1px solid $border-color;
+    border-radius: 50%;
+    vertical-align: sub;
+  }
+
+  .text-expander {
+    margin-left: 0;
+    margin-right: 2px;
+
+    > i {
+      position: relative;
+      top: 1px;
+    }
+  }
+}
+
+.breadcrumbs-list {
+  display: -webkit-flex;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 0;
+  line-height: 16px;
+
+  > li {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 2px 0;
+
+    &:not(:last-child) {
+      margin-right: 20px;
+    }
+
+    > a {
+      font-size: 12px;
+      color: currentColor;
+    }
+  }
+}
+
+.breadcrumb-item-text {
+  @include str-truncated(128px);
+  text-decoration: inherit;
+}
+
+.breadcrumbs-list-angle {
+  position: absolute;
+  right: -12px;
+  top: 50%;
+  color: $gl-text-color-tertiary;
+  transform: translateY(-50%);
+}
+
+.breadcrumbs-extra {
+  display: -webkit-flex;
+  display: flex;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.breadcrumbs-sub-title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+
+  a {
+    color: $gl-text-color;
+  }
+}
+
+.btn-sign-in {
+  margin-top: 3px;
+  font-weight: $gl-font-weight-bold;
+
+  &:hover {
+    background-color: $white-light;
+  }
 }
 
 .navbar-nav {
@@ -347,11 +492,10 @@ header {
 }
 
 @media (max-width: $screen-xs-max) {
-  header .container-fluid {
+  .navbar-gitlab .container-fluid {
     font-size: 18px;
 
     .navbar-nav {
-      display: table;
       table-layout: fixed;
       width: 100%;
       margin: 0;
@@ -359,7 +503,8 @@ header {
     }
 
     .navbar-collapse {
-      padding-left: 5px;
+      margin-left: -8px;
+      margin-right: -10px;
 
       .nav > li:not(.hidden-xs) {
         display: table-cell !important;
@@ -385,11 +530,11 @@ header {
   .dropdown-menu-nav {
     width: auto;
     min-width: 140px;
-    margin-top: -5px;
+    margin-top: 4px;
     color: $gl-text-color;
     left: auto;
 
-    .current-user {
+    li.current-user {
       padding: 5px 18px;
 
       .user-name {
@@ -405,3 +550,23 @@ header {
   border-radius: 50%;
   border: 1px solid $avatar-border;
 }
+
+.with-performance-bar .navbar-gitlab {
+  top: $performance-bar-height;
+}
+
+.navbar-empty {
+  height: $header-height;
+  background: $white-light;
+  border-bottom: 1px solid $white-normal;
+
+  .center-logo {
+    margin: 8px 0;
+    text-align: center;
+
+    .tanuki-logo,
+    img {
+      height: 36px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 59bfc5a8d77..6819fd88b7f 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -28,6 +28,7 @@
 
 svg {
   &.s8 { @include svg-size(8px); }
+  &.s12 { @include svg-size(12px); }
   &.s16 { @include svg-size(16px); }
   &.s18 { @include svg-size(18px); }
   &.s24 { @include svg-size(24px); }
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index bd521028c44..69d19ea2962 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -25,10 +25,6 @@ body {
 
 .content-wrapper {
   padding-bottom: 100px;
-
-  &:not(.page-with-layout-nav) {
-    margin-top: $header-height;
-  }
 }
 
 .container {
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 5b581780447..1cebd02df48 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -1,10 +1,17 @@
+.modal-header {
+  padding: #{3 * $grid-size} #{2 * $grid-size};
+
+  .page-title {
+    margin-top: 0;
+  }
+}
+
 .modal-body {
   position: relative;
-  padding: 15px;
+  padding: #{3 * $grid-size} #{2 * $grid-size};
 
   .form-actions {
-    margin: -$gl-padding + 1;
-    margin-top: 15px;
+    margin: #{2 * $grid-size} #{-2 * $grid-size} #{-2 * $grid-size};
   }
 
   .text-danger {
diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss
index 7899be2c2d3..e69de29bb2d 100644
--- a/app/assets/stylesheets/framework/new-nav.scss
+++ b/app/assets/stylesheets/framework/new-nav.scss
@@ -1,404 +0,0 @@
-@import "framework/variables";
-@import 'framework/tw_bootstrap_variables';
-@import "bootstrap/variables";
-@import "framework/mixins";
-
-.content-wrapper.page-with-new-nav {
-  margin-top: $new-navbar-height;
-}
-
-header.navbar-gitlab-new {
-  color: $white-light;
-  border-bottom: 0;
-  min-height: $new-navbar-height;
-
-  .logo-text {
-    line-height: initial;
-
-    svg {
-      width: 55px;
-      height: 14px;
-      margin: 0;
-      fill: $white-light;
-    }
-  }
-
-  .header-content {
-    display: -webkit-flex;
-    display: flex;
-    padding-left: 0;
-    min-height: $new-navbar-height;
-
-    .title-container {
-      display: -webkit-flex;
-      display: flex;
-      -webkit-align-items: stretch;
-      align-items: stretch;
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-      padding-top: 0;
-      overflow: visible;
-    }
-
-    .title {
-      display: -webkit-flex;
-      display: flex;
-      padding-right: 0;
-      color: currentColor;
-
-      img {
-        height: 28px;
-        margin-right: 8px;
-      }
-
-      a {
-        display: -webkit-flex;
-        display: flex;
-        align-items: center;
-        padding: 2px 8px;
-        margin: 5px 2px 5px -8px;
-        border-radius: $border-radius-default;
-
-        svg {
-          @media (min-width: $screen-sm-min) {
-            margin-right: 8px;
-          }
-        }
-      }
-    }
-
-    .dropdown.open {
-      > a {
-        border-bottom-color: $white-light;
-      }
-    }
-
-    .dropdown-menu {
-      margin-top: 4px;
-      min-width: 130px;
-
-      @media (max-width: $screen-xs-max) {
-        left: auto;
-        right: 0;
-      }
-    }
-
-    &.menu-expanded {
-      @media (max-width: $screen-xs-max) {
-        .title-container,
-        .header-logo, {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .dropdown-bold-header {
-    color: $gl-text-color-secondary;
-    font-size: 12px;
-  }
-
-  .navbar-collapse {
-    padding-left: 0;
-    box-shadow: 0;
-
-    @media (max-width: $screen-xs-max) {
-      margin-left: -8px;
-      margin-right: -10px;
-    }
-
-    .nav {
-      > li:not(.hidden-xs) a {
-        @media (max-width: $screen-xs-max) {
-          margin-left: 0;
-          min-width: 100%;
-        }
-      }
-    }
-  }
-
-  .container-fluid {
-    .navbar-toggle {
-      min-width: 45px;
-      padding: 0 $gl-padding;
-      margin-right: -7px;
-      text-align: center;
-      color: currentColor;
-
-      svg {
-        fill: currentColor;
-      }
-
-      &:hover,
-      &:focus,
-      &.active {
-        color: currentColor;
-        background-color: transparent;
-
-        svg {
-          fill: currentColor;
-        }
-      }
-    }
-
-    .navbar-nav {
-      @media (max-width: $screen-xs-max) {
-        display: flex;
-        padding-right: 10px;
-      }
-
-      li {
-        .badge {
-          box-shadow: none;
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-    }
-
-    .nav > li {
-      &.header-user {
-        @media (max-width: $screen-xs-max) {
-          padding-left: 10px;
-        }
-      }
-
-      > a {
-        will-change: color;
-        margin: 4px 2px;
-        padding: 6px 8px;
-        height: 32px;
-
-        @media (max-width: $screen-xs-max) {
-          padding: 0;
-        }
-
-        &.header-user-dropdown-toggle {
-          margin-left: 2px;
-
-          .header-user-avatar {
-            margin-right: 0;
-          }
-        }
-
-        &:hover,
-        &:focus {
-          text-decoration: none;
-          outline: 0;
-          opacity: 1;
-          color: $white-light;
-
-          svg {
-            fill: currentColor;
-          }
-
-          &.header-user-dropdown-toggle {
-            .header-user-avatar {
-              border-color: $white-light;
-            }
-          }
-        }
-      }
-
-      .header-new-dropdown-toggle {
-        margin-right: 0;
-      }
-
-      .impersonated-user,
-      .impersonated-user:hover {
-        margin-right: 1px;
-        background-color: $white-light;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      .impersonation-btn,
-      .impersonation-btn:hover {
-        background-color: $white-light;
-        margin-left: 0;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-
-        i {
-          color: $orange-500;
-          font-size: 20px;
-        }
-      }
-
-      &.active > a,
-      &.dropdown.open > a {
-
-        svg {
-          fill: currentColor;
-        }
-      }
-    }
-  }
-}
-
-.navbar-sub-nav {
-  display: -webkit-flex;
-  display: flex;
-  margin: 0 0 0 6px;
-
-  .dropdown-chevron {
-    position: relative;
-    top: -1px;
-    font-size: 10px;
-  }
-}
-
-.navbar-gitlab-new {
-  .navbar-sub-nav,
-  .navbar-nav {
-    > li {
-      > a:hover,
-      > a:focus {
-        text-decoration: none;
-        outline: 0;
-        color: $white-light;
-
-        svg {
-          fill: currentColor;
-        }
-      }
-
-      > a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 6px 8px;
-        margin: 4px 2px;
-        font-size: 12px;
-        color: currentColor;
-        border-radius: $border-radius-default;
-        height: 32px;
-        font-weight: $gl-font-weight-bold;
-
-        svg {
-          fill: currentColor;
-        }
-      }
-
-      &.line-separator {
-        margin: 8px;
-      }
-    }
-  }
-}
-
-.caret-down {
-  height: 11px;
-  width: 11px;
-  margin-left: 4px;
-  fill: currentColor;
-}
-
-.header-user .dropdown-menu-nav,
-.header-new .dropdown-menu-nav {
-  margin-top: $dropdown-vertical-offset;
-}
-
-.breadcrumbs {
-  display: flex;
-  min-height: 48px;
-  color: $gl-text-color;
-}
-
-.breadcrumbs-container {
-  display: -webkit-flex;
-  display: flex;
-  width: 100%;
-  position: relative;
-  padding-top: $gl-padding / 2;
-  padding-bottom: $gl-padding / 2;
-  align-items: center;
-  border-bottom: 1px solid $border-color;
-}
-
-.breadcrumbs-links {
-  -webkit-flex: 1;
-  flex: 1;
-  min-width: 0;
-  align-self: center;
-  color: $gl-text-color-secondary;
-
-  .avatar-tile {
-    margin-right: 4px;
-    border: 1px solid $border-color;
-    border-radius: 50%;
-    vertical-align: sub;
-  }
-
-  .text-expander {
-    margin-left: 0;
-    margin-right: 2px;
-
-    > i {
-      position: relative;
-      top: 1px;
-    }
-  }
-}
-
-.breadcrumbs-list {
-  display: -webkit-flex;
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 0;
-  line-height: 16px;
-
-  > li {
-    display: flex;
-    align-items: center;
-    position: relative;
-    padding: 2px 0;
-
-    &:not(:last-child) {
-      margin-right: 20px;
-    }
-
-    > a {
-      font-size: 12px;
-      color: currentColor;
-    }
-  }
-}
-
-.breadcrumb-item-text {
-  @include str-truncated(128px);
-  text-decoration: inherit;
-}
-
-.breadcrumbs-list-angle {
-  position: absolute;
-  right: -12px;
-  top: 50%;
-  color: $gl-text-color-tertiary;
-  transform: translateY(-50%);
-}
-
-.breadcrumbs-extra {
-  display: flex;
-  flex: 0 0 auto;
-  margin-left: auto;
-}
-
-.breadcrumbs-sub-title {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16px;
-
-  a {
-    color: $gl-text-color;
-  }
-}
-
-.btn-sign-in {
-  margin-top: 3px;
-  font-weight: $gl-font-weight-bold;
-
-  &:hover {
-    background-color: $white-light;
-  }
-}
diff --git a/app/assets/stylesheets/framework/new-sidebar.scss b/app/assets/stylesheets/framework/new-sidebar.scss
index 8332cec2962..caf4c7a40b1 100644
--- a/app/assets/stylesheets/framework/new-sidebar.scss
+++ b/app/assets/stylesheets/framework/new-sidebar.scss
@@ -24,7 +24,7 @@ $new-sidebar-collapsed-width: 50px;
   // Override position: absolute
   .right-sidebar {
     position: fixed;
-    height: calc(100% - #{$new-navbar-height});
+    height: calc(100% - #{$header-height});
   }
 
   .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
@@ -87,7 +87,7 @@ $new-sidebar-collapsed-width: 50px;
   z-index: 400;
   width: $new-sidebar-width;
   transition: left $sidebar-transition-duration;
-  top: $new-navbar-height;
+  top: $header-height;
   bottom: 0;
   left: 0;
   background-color: $gray-normal;
@@ -197,7 +197,7 @@ $new-sidebar-collapsed-width: 50px;
 }
 
 .with-performance-bar .nav-sidebar {
-  top: $new-navbar-height + $performance-bar-height;
+  top: $header-height + $performance-bar-height;
 }
 
 .sidebar-sub-level-items {
@@ -495,7 +495,7 @@ $new-sidebar-collapsed-width: 50px;
 // Make issue boards full-height now that sub-nav is gone
 
 .boards-list {
-  height: calc(100vh - #{$new-navbar-height});
+  height: calc(100vh - #{$header-height});
 
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
@@ -506,5 +506,5 @@ $new-sidebar-collapsed-width: 50px;
 }
 
 .with-performance-bar .boards-list {
-  height: calc(100vh - #{$new-navbar-height} - #{$performance-bar-height});
+  height: calc(100vh - #{$header-height} - #{$performance-bar-height});
 }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/secondary-navigation-elements.scss
index f8777d1fd9d..5c96b3b78e7 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss
@@ -1,12 +1,11 @@
-
-
+// For tabbed navigation links, scrolling tabs, etc. For all top/main navigation,
+// please check nav.scss
 .nav-links {
   display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
   height: auto;
-  border-bottom: 1px solid $border-color;
 
   li {
     display: flex;
@@ -24,7 +23,6 @@
       &:active,
       &:focus {
         text-decoration: none;
-        border-bottom: 2px solid $gray-darkest;
         color: $black;
 
         .badge {
@@ -34,7 +32,6 @@
     }
 
     &.active a {
-      border-bottom: 2px solid $link-underline-blue;
       color: $black;
       font-weight: $gl-font-weight-bold;
 
@@ -43,35 +40,6 @@
       }
     }
   }
-
-  &.sub-nav {
-    text-align: center;
-    background-color: $gray-normal;
-
-    .container-fluid {
-      background-color: $gray-normal;
-      margin-bottom: 0;
-      display: flex;
-    }
-
-    li {
-      &.active a {
-        border-bottom: none;
-        color: $link-underline-blue;
-      }
-
-      a {
-        margin: 0;
-        padding: 11px 10px 9px;
-
-        &:hover,
-        &:active,
-        &:focus {
-          border-color: transparent;
-        }
-      }
-    }
-  }
 }
 
 .top-area {
@@ -91,17 +59,6 @@
     }
   }
 
-  .nav-search {
-    display: inline-block;
-    width: 100%;
-    padding: 11px 0;
-
-    /* Small devices (phones, tablets, 768px and lower) */
-    @media (min-width: $screen-sm-min) {
-      width: 50%;
-    }
-  }
-
   .nav-links {
     margin-bottom: 0;
     border-bottom: none;
@@ -150,12 +107,6 @@
       }
     }
 
-    &.nav-controls-new-nav {
-      > .dropdown {
-        margin-right: 0;
-      }
-    }
-
     > .btn-grouped {
       float: none;
     }
@@ -248,114 +199,43 @@
   pre {
     width: 100%;
   }
-}
-
-.project-item-select-holder.btn-group {
-  display: flex;
-  max-width: 350px;
-  overflow: hidden;
-  float: right;
-
-  .new-project-item-link {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .new-project-item-select-button {
-    width: 32px;
-  }
-}
-
-.empty-state .project-item-select-holder.btn-group {
-  float: none;
-  display: inline-block;
-
-  .btn {
-    // overrides styles applied to plain `.empty-state .btn`
-    margin: 10px 0;
-    max-width: 300px;
-    width: auto;
-
-    @media(max-width: $screen-xs-max) {
-      max-width: 250px;
-    }
-
-  }
-}
 
-.new-project-item-select-button .fa-caret-down {
-  margin-left: 2px;
-}
-
-.layout-nav {
-  width: 100%;
-  background: $gray-light;
-  border-bottom: 1px solid $border-color;
-  transition: padding $sidebar-transition-duration;
-  text-align: center;
-  margin-top: $new-navbar-height;
+  @media (max-width: $screen-xs-max) {
+    flex-flow: row wrap;
 
-  .container-fluid {
-    position: relative;
+    .nav-controls {
+      $controls-margin: $btn-xs-side-margin - 2px;
+      flex: 0 0 100%;
 
-    .nav-control {
-      @media (max-width: $screen-sm-max) {
-        margin-right: 2px;
+      &.controls-flex {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0 $gl-padding-top;
       }
-    }
-  }
-
-  .controls {
-    float: right;
-    padding: 7px 0 0;
-
-    i {
-      color: $layout-link-gray;
-    }
-
-    .fa-rss,
-    .fa-cog {
-      font-size: 16px;
-    }
 
-    .fa-caret-down {
-      margin-left: 5px;
-      color: $gl-text-color-secondary;
-    }
-
-    .dropdown {
-      position: absolute;
-      top: 7px;
-      right: 15px;
-      z-index: 300;
+      .controls-item,
+      .controls-item-full,
+      .controls-item:last-child {
+        flex: 1 1 35%;
+        display: block;
+        width: 100%;
+        margin: $controls-margin;
 
-      li.active {
-        font-weight: $gl-font-weight-bold;
+        .btn,
+        .dropdown {
+          margin: 0;
+        }
       }
-    }
-  }
 
-  .nav-links {
-    border-bottom: none;
-    height: 51px;
-
-    @media (min-width: $screen-sm-min) {
-      justify-content: center;
-    }
-
-    li {
-      a {
-        padding-top: 10px;
+      .controls-item-full {
+        flex: 1 1 100%;
       }
     }
   }
 }
 
-.with-performance-bar .layout-nav {
-  margin-top: $header-height + $performance-bar-height;
-}
-
 .scrolling-tabs-container {
   position: relative;
 
@@ -385,25 +265,41 @@
       left: -7px;
     }
   }
+}
 
-  &.sub-nav-scroll {
+.inner-page-scroll-tabs {
+  position: relative;
 
-    .fade-right {
-      @include fade(left, $gray-normal);
-      right: 0;
+  .fade-right {
+    @include fade(left, $white-light);
+    right: 0;
+    text-align: right;
 
-      .fa {
-        right: -23px;
-      }
+    .fa {
+      right: 5px;
     }
+  }
 
-    .fade-left {
-      @include fade(right, $gray-normal);
-      left: 0;
+  .fade-left {
+    @include fade(right, $white-light);
+    left: 0;
+    text-align: left;
 
-      .fa {
-        left: 10px;
-      }
+    .fa {
+      left: 5px;
+    }
+  }
+
+  .fade-right,
+  .fade-left {
+    top: 16px;
+    bottom: auto;
+  }
+
+  &.is-smaller {
+    .fade-right,
+    .fade-left {
+      top: 11px;
     }
   }
 }
@@ -432,41 +328,7 @@
       }
     }
   }
-}
-
-.page-with-layout-nav {
-  .right-sidebar {
-    top: ($header-height + 1) * 2;
-  }
-
-  &.page-with-sub-nav {
-    .right-sidebar {
-      top: ($header-height + 1) * 3;
-
-      &.affix {
-        top: $header-height;
-      }
-    }
-  }
-}
-
-.with-performance-bar .page-with-layout-nav {
-  .right-sidebar {
-    top: ($header-height + 1) * 2 + $performance-bar-height;
-  }
-
-  &.page-with-sub-nav {
-    .right-sidebar {
-      top: ($header-height + 1) * 3 + $performance-bar-height;
-
-      &.affix {
-        top: $header-height + $performance-bar-height;
-      }
-    }
-  }
-}
 
-.nav-block {
   &.activities {
     border-bottom: 1px solid $border-color;
 
@@ -476,76 +338,39 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
-  .top-area {
-    flex-flow: row wrap;
-
-    .nav-controls {
-      $controls-margin: $btn-xs-side-margin - 2px;
-      flex: 0 0 100%;
-
-      &.controls-flex {
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        justify-content: center;
-        padding: 0 0 $gl-padding-top;
-      }
-
-      .controls-item,
-      .controls-item-full,
-      .controls-item:last-child {
-        flex: 1 1 35%;
-        display: block;
-        width: 100%;
-        margin: $controls-margin;
+.project-item-select-holder.btn-group {
+  display: flex;
+  max-width: 350px;
+  overflow: hidden;
+  float: right;
 
-        .btn,
-        .dropdown {
-          margin: 0;
-        }
-      }
+  .new-project-item-link {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-      .controls-item-full {
-        flex: 1 1 100%;
-      }
-    }
+  .new-project-item-select-button {
+    width: 32px;
   }
 }
 
-.inner-page-scroll-tabs {
-  position: relative;
-
-  .fade-right {
-    @include fade(left, $white-light);
-    right: 0;
-    text-align: right;
-
-    .fa {
-      right: 5px;
-    }
-  }
+.empty-state .project-item-select-holder.btn-group {
+  float: none;
+  display: inline-block;
 
-  .fade-left {
-    @include fade(right, $white-light);
-    left: 0;
-    text-align: left;
+  .btn {
+    // overrides styles applied to plain `.empty-state .btn`
+    margin: 10px 0;
+    max-width: 300px;
+    width: auto;
 
-    .fa {
-      left: 5px;
+    @media(max-width: $screen-xs-max) {
+      max-width: 250px;
     }
   }
+}
 
-  .fade-right,
-  .fade-left {
-    top: 16px;
-    bottom: auto;
-  }
-
-  &.is-smaller {
-    .fade-right,
-    .fade-left {
-      top: 11px;
-    }
-  }
+.new-project-item-select-button .fa-caret-down {
+  margin-left: 2px;
 }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 48dc25d343b..ef58382ba41 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -78,16 +78,16 @@
 
 .right-sidebar {
   border-left: 1px solid $border-color;
-  height: calc(100% - #{$new-navbar-height});
+  height: calc(100% - #{$header-height});
 
   &.affix {
     position: fixed;
-    top: $new-navbar-height;
+    top: $header-height;
   }
 }
 
 .with-performance-bar .right-sidebar.affix {
-  top: $new-navbar-height + $performance-bar-height;
+  top: $header-height + $performance-bar-height;
 }
 
 @mixin maintain-sidebar-dimensions {
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 3d68a50f91f..f718ec4bcad 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -17,15 +17,19 @@
 
   .diff-file {
     border: 1px solid $border-color;
-    border-bottom: none;
     margin: 0;
   }
+
+  &.text-file .diff-file {
+    border-bottom: none;
+  }
 }
 
 .timeline-entry {
   border-color: $white-normal;
   color: $gl-text-color;
   border-bottom: 1px solid $border-white-light;
+  background: $white-light;
 
   .timeline-entry-inner {
     position: relative;
diff --git a/app/assets/stylesheets/framework/tooltips.scss b/app/assets/stylesheets/framework/tooltips.scss
new file mode 100644
index 00000000000..93baf73cb78
--- /dev/null
+++ b/app/assets/stylesheets/framework/tooltips.scss
@@ -0,0 +1,7 @@
+.tooltip-inner {
+  font-size: $tooltip-font-size;
+  border-radius: $border-radius-default;
+  line-height: 16px;
+  font-weight: $gl-font-weight-normal;
+  padding: $gl-btn-padding;
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 60260355765..bbbd16322eb 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -1,6 +1,7 @@
 /*
  * Layout
  */
+$grid-size: 8px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 250px;
@@ -203,6 +204,11 @@ $code_font_size: 12px;
 $code_line_height: 1.6;
 
 /*
+ * Tooltips
+ */
+$tooltip-font-size: 12px;
+
+/*
  * Padding
  */
 $gl-padding: 16px;
@@ -219,8 +225,7 @@ $gl-sidebar-padding: 22px;
 $row-hover: $blue-50;
 $row-hover-border: $blue-200;
 $progress-color: #c0392b;
-$header-height: 50px;
-$new-navbar-height: 40px;
+$header-height: 40px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $limited-layout-width-sm: 790px;
@@ -317,6 +322,7 @@ $diff-image-info-color: grey;
 $diff-swipe-border: #999;
 $diff-view-modes-color: grey;
 $diff-view-modes-border: #c1c1c1;
+$diff-jagged-border-gradient-color: darken($white-normal, 8%);
 
 /*
  * Fonts
@@ -700,3 +706,15 @@ Project Templates Icons
 $rails: #c00;
 $node: #353535;
 $java: #70ad51;
+
+/*
+Issuable warning
+*/
+$issuable-warning-size: 24px;
+$issuable-warning-icon-margin: 4px;
+
+/*
+Image Commenting cursor
+*/
+$image-comment-cursor-left-offset: 12;
+$image-comment-cursor-top-offset: 30;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 3305a482a0d..ca61f7a30c3 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -414,7 +414,6 @@
   margin: 5px;
 }
 
-.page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar,
 .page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar {
   .issuable-sidebar-header {
     position: relative;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 359dd388d05..50ec5110bf1 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -64,10 +64,10 @@
     color: $gl-text-color;
     position: sticky;
     position: -webkit-sticky;
-    top: $new-navbar-height;
+    top: $header-height;
 
     &.affix {
-      top: $new-navbar-height;
+      top: $header-height;
     }
 
     // with sidebar
@@ -174,10 +174,10 @@
 
 .with-performance-bar .build-page {
   .top-bar {
-    top: $new-navbar-height + $performance-bar-height;
+    top: $header-height + $performance-bar-height;
 
     &.affix {
-      top: $new-navbar-height + $performance-bar-height;
+      top: $header-height + $performance-bar-height;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
new file mode 100644
index 00000000000..5538e46a6c4
--- /dev/null
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -0,0 +1,9 @@
+.edit-cluster-form {
+  .clipboard-addon {
+    background-color: $white-light;
+  }
+
+  .alert-block {
+    margin-bottom: 20px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 994707422bb..ee3ca246374 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -54,12 +54,15 @@
   .mr-widget-pipeline-graph {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 4px;
 
     .stage-cell .stage-container {
       margin: 3px 3px 3px 0;
     }
 
+    .stage-container:last-child {
+      margin-right: 0;
+    }
+
     .dropdown-menu {
       margin-top: 11px;
     }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index fb23343b966..ffb5fc94475 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -297,6 +297,7 @@
         .drag-track {
           display: block;
           position: absolute;
+          top: 0;
           left: 12px;
           height: 10px;
           width: 276px;
@@ -547,16 +548,23 @@
 }
 
 .diff-notes-collapse {
-  width: 19px;
-  height: 19px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
   padding: 0;
   transition: transform .1s ease-out;
   z-index: 100;
 
+  .collapse-icon {
+    height: 50%;
+    width: 100%;
+  }
+
   svg {
-    vertical-align: text-top;
+    vertical-align: middle;
   }
 
+  .collapse-icon,
   path {
     fill: $white-light;
   }
@@ -644,3 +652,157 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.note-container {
+  background-color: $gray-light;
+  border-top: 1px solid $white-normal;
+
+  // double jagged line divider
+  .discussion-notes + .discussion-notes::before,
+  .discussion-notes + .discussion-form::before {
+    content: '';
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 10px;
+    background-color: $white-light;
+    background-image: linear-gradient(45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
+      linear-gradient(225deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
+      linear-gradient(135deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
+      linear-gradient(-45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%);
+    background-position: 5px 5px,0 5px,0 5px,5px 5px;
+    background-size: 10px 10px;
+    background-repeat: repeat;
+  }
+
+  .notes {
+    position: relative;
+  }
+
+  .diff-notes-collapse {
+    position: absolute;
+    left: -12px;
+  }
+}
+
+.diff-file .note-container > .new-note,
+.note-container .discussion-notes {
+  margin-left: 100px;
+  border-left: 1px solid $white-normal;
+}
+
+.notes.active {
+  .diff-file .note-container > .new-note,
+  .note-container .discussion-notes {
+    // Override our margin and border (set for diff tab)
+    // when user is on the discussion tab for MR
+    margin-left: inherit;
+    border-left: inherit;
+  }
+}
+
+.files:not([data-can-create-note]) .frame {
+  cursor: auto;
+}
+
+.frame.click-to-comment {
+  position: relative;
+  cursor: url(icon_image_comment.svg)
+    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+
+  // Retina cursor
+  cursor: -webkit-image-set(url(icon_image_comment.svg) 1x, url(icon_image_comment@2x.svg) 2x)
+    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+
+  .comment-indicator {
+    position: absolute;
+    padding: 0;
+    width: (2px * $image-comment-cursor-left-offset);
+    height: (1px * $image-comment-cursor-top-offset);
+    // center the indicator to match the top left click region
+    margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
+    margin-left: (-1px * $image-comment-cursor-left-offset) + 1;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.frame .badge,
+.image-diff-avatar-link .badge,
+.notes > .badge {
+  position: absolute;
+  background-color: $blue-400;
+  color: $white-light;
+  border: $white-light 1px solid;
+  min-height: $gl-padding;
+  padding: 5px 8px;
+  border-radius: 12px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.frame .badge,
+.frame .image-comment-badge {
+  // Center align badges on the frame
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.image-comment-badge {
+  @include btn-comment-icon;
+  position: absolute;
+
+  &.inverted {
+    border-color: $white-light;
+  }
+}
+
+.image-diff-avatar-link {
+  position: relative;
+
+  .badge,
+  .image-comment-badge {
+    top: 25px;
+    right: 8px;
+  }
+}
+
+.notes > .badge {
+  display: none;
+  left: -13px;
+}
+
+.discussion-notes {
+  min-height: 35px;
+
+  &:first-child {
+    // First child does not have the jagged borders
+    min-height: 25px;
+  }
+
+  &.collapsed {
+    background-color: $white-light;
+
+    .diff-notes-collapse,
+    .note,
+    .discussion-reply-holder, {
+      display: none;
+    }
+
+    .notes > .badge {
+      display: block;
+    }
+  }
+}
+
+.discussion-body .image .frame {
+  position: relative;
+}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 9362d80d4e6..3b5e411e2c5 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -207,10 +207,13 @@
 }
 
 .prometheus-state {
-  margin-top: 10px;
+  max-width: 430px;
+  margin: 10px auto;
+  text-align: center;
 
-  .state-button-section {
-    margin-top: 10px;
+  .state-svg {
+    max-width: 80vw;
+    margin: 0 auto;
   }
 }
 
@@ -288,8 +291,14 @@
     fill: $black;
   }
 
-  .tick > text {
-    font-size: 12px;
+  .tick {
+    > line {
+      stroke: $gray-darker;
+    }
+
+    > text {
+      font-size: 12px;
+    }
   }
 
   .text-metric-title {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7eb28354e6d..dae3ec7ac42 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -5,27 +5,29 @@
   margin-right: auto;
 }
 
-.is-confidential {
+.issuable-warning-icon {
   color: $orange-600;
   background-color: $orange-100;
   border-radius: $border-radius-default;
   padding: 5px;
-  margin: 0 3px 0 -4px;
+  margin: 0 $btn-side-margin 0 0;
+  width: $issuable-warning-size;
+  height: $issuable-warning-size;
+  text-align: center;
+
+  &:first-of-type {
+    margin-right: $issuable-warning-icon-margin;
+  }
 }
 
-.is-not-confidential {
+.sidebar-item-icon {
   border-radius: $border-radius-default;
   padding: 5px;
   margin: 0 3px 0 -4px;
-}
-
-.confidentiality {
-  .is-not-confidential {
-    margin: auto;
-  }
 
-  .is-confidential {
-    margin: auto;
+  &.is-active {
+    color: $orange-600;
+    background-color: $orange-50;
   }
 }
 
@@ -220,7 +222,7 @@
 
 .right-sidebar {
   position: absolute;
-  top: $new-navbar-height;
+  top: $header-height;
   bottom: 0;
   right: 0;
   transition: width $right-sidebar-transition-duration;
@@ -485,10 +487,10 @@
 }
 
 .with-performance-bar .right-sidebar {
-  top: $new-navbar-height + $performance-bar-height;
+  top: $header-height + $performance-bar-height;
 
   .issuable-sidebar {
-    height: calc(100% - #{$new-navbar-height} - #{$performance-bar-height});
+    height: calc(100% - #{$header-height} - #{$performance-bar-height});
   }
 }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 09a14578dd3..d9fb3b44d29 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -649,7 +649,7 @@
 }
 
 .merge-request-tabs-holder {
-  top: $new-navbar-height;
+  top: $header-height;
   z-index: 200;
   background-color: $white-light;
   border-bottom: 1px solid $border-color;
@@ -679,7 +679,7 @@
 }
 
 .with-performance-bar .merge-request-tabs-holder {
-  top: $new-navbar-height + $performance-bar-height;
+  top: $header-height + $performance-bar-height;
 }
 
 .merge-request-tabs {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 74d9acb5490..04b132415eb 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -101,7 +101,7 @@
   }
 }
 
-.confidential-issue-warning {
+.issuable-note-warning {
   color: $orange-600;
   background-color: $orange-100;
   border-radius: $border-radius-default $border-radius-default 0 0;
@@ -110,37 +110,64 @@
   padding: 3px 12px;
   margin: auto;
   align-items: center;
+
+  .icon {
+    margin-right: $issuable-warning-icon-margin;
+  }
+}
+
+.disabled-comment .issuable-note-warning {
+  border: none;
+  border-radius: $label-border-radius;
+  padding-top: $gl-vert-padding;
+  padding-bottom: $gl-vert-padding;
+
+  .icon svg {
+    position: relative;
+    top: 2px;
+    margin-right: $btn-xs-side-margin;
+    width: $gl-font-size;
+    height: $gl-font-size;
+    fill: $orange-600;
+  }
 }
 
-.confidential-value {
+.sidebar-item-value {
   .fa {
     background-color: inherit;
   }
 }
 
-.confidential-warning-message {
+.sidebar-item-warning-message {
   line-height: 1.5;
   padding: 16px;
 
-  .confidential-warning-message-actions {
+  .text {
+    color: $text-color;
+  }
+
+  .sidebar-item-warning-message-actions {
     display: flex;
 
-    button {
+    .btn {
       flex-grow: 1;
     }
   }
 }
 
-.confidential-issue-warning + .md-area {
+.issuable-note-warning + .md-area {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
 .discussion-form {
-  padding: $gl-padding-top $gl-padding $gl-padding;
   background-color: $white-light;
 }
 
+.discussion-form-container {
+  padding: $gl-padding-top $gl-padding $gl-padding;
+}
+
 .discussion-notes .disabled-comment {
   padding: 6px 0;
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 46d31e41ada..96b7db3b85d 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -650,29 +650,12 @@ ul.notes {
 }
 
 .add-diff-note {
+  @include btn-comment-icon;
   opacity: 0;
   margin-top: -2px;
-  border-radius: 50%;
-  background: $white-light;
-  padding: 1px 5px;
-  font-size: 12px;
-  color: $blue-500;
   margin-left: -55px;
   position: absolute;
   z-index: 10;
-  width: 23px;
-  height: 23px;
-  border: 1px solid $blue-500;
-
-  &:hover {
-    background: $blue-500;
-    border-color: $blue-600;
-    color: $white-light;
-  }
-
-  &:active {
-    outline: 0;
-  }
 }
 
 .discussion-body,
@@ -703,6 +686,12 @@ ul.notes {
   color: $note-disabled-comment-color;
   padding: 90px 0;
 
+  &.discussion-locked {
+    border: none;
+    background-color: $white-light;
+  }
+
+
   a {
     color: $gl-link-color;
   }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 086dd528579..8fc7a5eec9b 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -209,9 +209,11 @@
 }
 
 .stage-cell {
-  @media (min-width: $screen-md-min) {
-    min-width: 148px;
-    margin-right: -4px;
+  &.table-section {
+    @media (min-width: $screen-md-min) {
+      min-width: 148px;
+      margin-right: -4px;
+    }
   }
 
   .mini-pipeline-graph-dropdown-toggle svg {
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 67abe6e88ed..eab39f698c3 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -108,6 +108,15 @@
   }
 }
 
+.subkeys-list {
+  @include basic-list;
+
+  li {
+    padding: 3px 0;
+    border: none;
+  }
+}
+
 .key-list-item {
   .key-list-item-info {
     @media (min-width: $screen-sm-min) {
@@ -392,11 +401,11 @@ table.u2f-registrations {
   }
 }
 
-.gpg-email-badge {
+.email-badge {
   display: inline;
   margin-right: $gl-padding / 2;
 
-  .gpg-email-badge-email {
+  .email-badge-email {
     display: inline;
     margin-right: $gl-padding / 4;
   }
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 89ebe3f9917..db0a04a5eb3 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -47,6 +47,7 @@ input[type="checkbox"]:hover {
   }
 
   .location-badge {
+    height: 32px;
     font-size: 12px;
     margin: -4px 4px -4px -4px;
     line-height: 25px;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 224eee90a3f..e2f6e511c86 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -169,6 +169,14 @@
       }
     }
 
+    .tree-item-file-external-link {
+      margin-right: 4px;
+
+      span {
+        text-decoration: inherit;
+      }
+    }
+
     .tree_commit {
       max-width: 320px;