Merge remote-tracking branch 'origin/master' into 35616-move-gke-form-1st-iteration

40 files changed, 224 insertions, 298 deletions

diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index f1aedc227f3..50c100d398f 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -59,7 +59,7 @@
 
   &.avatar-tile {
     border-radius: 0;
-    border: none;
+    border: 0;
   }
 
   &:not([href]):hover {
@@ -96,7 +96,7 @@
 
   .avatar {
     border-radius: 0;
-    border: none;
+    border: 0;
     height: auto;
     width: 100%;
     margin: 0;
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index def986180fc..9c1439dfad5 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -39,7 +39,7 @@
   }
 
   &.top-block {
-    border-top: none;
+    border-top: 0;
 
     .container-fluid {
       background-color: inherit;
@@ -63,7 +63,7 @@
 
   &.footer-block {
     margin-top: 0;
-    border-bottom: none;
+    border-bottom: 0;
     margin-bottom: -$gl-padding;
   }
 
@@ -100,7 +100,7 @@
 
   &.build-content {
     background-color: $white-light;
-    border-top: none;
+    border-top: 0;
   }
 }
 
@@ -287,12 +287,12 @@
     cursor: pointer;
     color: $blue-300;
     z-index: 1;
-    border: none;
+    border: 0;
     background-color: transparent;
 
     &:hover,
     &:focus {
-      border: none;
+      border: 0;
       color: $blue-400;
     }
   }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 00a0e9cef67..c4a95afc4d2 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -304,7 +304,7 @@
 }
 
 .btn-clipboard {
-  border: none;
+  border: 0;
   padding: 0 5px;
 }
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index ea3007f5e08..393a0052114 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -28,7 +28,7 @@
 pre {
   &.clean {
     background: none;
-    border: none;
+    border: 0;
     margin: 0;
     padding: 0;
   }
@@ -142,7 +142,7 @@ li.note {
   img { max-width: 100%; }
   .note-title {
     li {
-      border-bottom: none !important;
+      border-bottom: 0 !important;
     }
   }
 }
@@ -187,7 +187,7 @@ li.note {
 
   pre {
     background: $white-light;
-    border: none;
+    border: 0;
     font-size: 12px;
   }
 }
@@ -386,7 +386,7 @@ img.emoji {
 }
 
 .hide-bottom-border {
-  border-bottom: none !important;
+  border-bottom: 0 !important;
 }
 
 .gl-accessibility {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 6382551fcc9..1247e5e4876 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -142,7 +142,7 @@
      */
     &.blame {
       table {
-        border: none;
+        border: 0;
         margin: 0;
       }
 
@@ -150,20 +150,20 @@
         border-bottom: 1px solid $blame-border;
 
         &:last-child {
-          border-bottom: none;
+          border-bottom: 0;
         }
       }
 
       td {
-        border-top: none;
-        border-bottom: none;
+        border-top: 0;
+        border-bottom: 0;
 
         &:first-child {
-          border-left: none;
+          border-left: 0;
         }
 
         &:last-child {
-          border-right: none;
+          border-right: 0;
         }
 
         &.blame-commit {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index a7333925f80..74b6b31b07e 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -255,7 +255,7 @@
   .clear-search {
     width: 35px;
     background-color: $white-light;
-    border: none;
+    border: 0;
     outline: none;
     z-index: 1;
 
@@ -418,7 +418,7 @@
 
 .droplab-dropdown .dropdown-menu .filter-dropdown-item {
   .btn {
-    border: none;
+    border: 0;
     width: 100%;
     text-align: left;
     padding: 8px 16px;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 5d777f0d468..1cdfa904374 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -10,7 +10,7 @@
     z-index: 1000;
     margin-bottom: 0;
     min-height: $header-height;
-    border: none;
+    border: 0;
     border-bottom: 1px solid $border-color;
     position: fixed;
     top: 0;
@@ -169,7 +169,7 @@
 
   .navbar-collapse {
     flex: 0 0 auto;
-    border-top: none;
+    border-top: 0;
     padding: 0;
 
     @media (max-width: $screen-xs-max) {
@@ -352,77 +352,7 @@
 
 .header-user .dropdown-menu-nav,
 .header-new .dropdown-menu-nav {
-  margin-top: 4px;
-}
-
-.search {
-  margin: 4px 8px 0;
-
-  form {
-    height: 32px;
-    border: 0;
-    border-radius: $border-radius-default;
-    transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
-
-    &:hover {
-      box-shadow: none;
-    }
-  }
-
-  .search-input {
-    color: $white-light;
-    background: none;
-    transition: color ease-in-out 0.15s;
-  }
-
-  .search-input::placeholder {
-    transition: color ease-in-out 0.15s;
-  }
-
-  .location-badge {
-    font-size: 12px;
-    margin: -4px 4px -4px -4px;
-    line-height: 25px;
-    padding: 4px 8px;
-    border-radius: 2px 0 0 2px;
-    height: 32px;
-    transition: border-color ease-in-out 0.15s;
-  }
-
-  &.search-active {
-    form {
-      background-color: rgba($indigo-200, .3);
-      box-shadow: none;
-
-      .search-input {
-        color: $gl-text-color;
-        transition: color ease-in-out 0.15s;
-      }
-
-      .search-input::placeholder {
-        color: $gl-text-color-tertiary;
-      }
-
-      .search-input-wrap {
-        .search-icon,
-        .clear-icon {
-          color: $gl-text-color-tertiary;
-          transition: color ease-in-out 0.15s;
-        }
-      }
-    }
-
-    .location-badge {
-      background-color: $nav-badge-bg;
-      border-color: $border-color;
-    }
-
-    .search-input-wrap {
-      .clear-icon {
-        color: $white-light;
-      }
-    }
-  }
+  margin-top: $dropdown-vertical-offset;
 }
 
 .breadcrumbs {
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index c63114f85b4..813a1711ea2 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -1,5 +1,5 @@
 .file-content.code {
-  border: none;
+  border: 0;
   box-shadow: none;
   margin: 0;
   padding: 0;
@@ -7,7 +7,7 @@
 
   pre {
     padding: 10px 0;
-    border: none;
+    border: 0;
     border-radius: 0;
     font-family: $monospace_font;
     font-size: $code_font_size;
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 511608c618c..ad3bb0e35d1 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -42,7 +42,7 @@
     }
 
     &:last-child {
-      border-bottom: none;
+      border-bottom: 0;
 
       &.bottom {
         background: $gray-light;
@@ -92,7 +92,7 @@ ul.unstyled-list {
 }
 
 ul.unstyled-list > li {
-  border-bottom: none;
+  border-bottom: 0;
 }
 
 // Generic content list
@@ -178,7 +178,7 @@ ul.content-list {
 
     // When dragging a list item
     &.ui-sortable-helper {
-      border-bottom: none;
+      border-bottom: 0;
     }
 
     &.list-placeholder {
@@ -295,7 +295,7 @@ ul.indent-list {
   }
 
   > .group-list-tree > .group-row.has-children:first-child {
-    border-top: none;
+    border-top: 0;
   }
 }
 
@@ -413,7 +413,7 @@ ul.indent-list {
     padding: 0;
 
     &.has-children {
-      border-top: none;
+      border-top: 0;
     }
 
     &:first-child {
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 0a5a16c09b0..cd6f94fb354 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -138,15 +138,23 @@
 
 .toolbar-btn {
   float: left;
-  padding: 0 5px;
-  color: $gl-text-color-secondary;
+  padding: 0 7px;
   background: transparent;
   border: 0;
   outline: 0;
 
+  svg {
+    width: 14px;
+    height: 14px;
+    margin-top: 3px;
+    fill: $gl-text-color-secondary;
+  }
+
   &:hover,
   &:focus {
-    color: $gl-link-color;
+    svg {
+      fill: $gl-link-color;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 2fee2164190..16d5edde61e 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -36,7 +36,7 @@
     margin: 0;
 
     &:last-child {
-      border-bottom: none;
+      border-bottom: 0;
     }
 
     &.active {
diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index 8b7afdbe1a5..7829d722560 100644
--- a/app/assets/stylesheets/framework/responsive_tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -24,7 +24,7 @@
   @media (min-width: $screen-md-min) {
     margin: 0;
     padding: $gl-padding 0;
-    border: none;
+    border: 0;
 
     &:not(:last-child) {
       border-bottom: 1px solid $white-normal;
diff --git a/app/assets/stylesheets/framework/secondary-navigation-elements.scss b/app/assets/stylesheets/framework/secondary-navigation-elements.scss
index 9e1f77e5726..8498b37abe4 100644
--- a/app/assets/stylesheets/framework/secondary-navigation-elements.scss
+++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss
@@ -63,7 +63,7 @@
 
   .nav-links {
     margin-bottom: 0;
-    border-bottom: none;
+    border-bottom: 0;
     float: left;
 
     &.wide {
@@ -335,69 +335,16 @@
     border-bottom: 1px solid $border-color;
 
     .nav-links {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 }
 
-.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;
-      }
-    }
-  }
-}
-
-@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;
 
   .new-project-item-link {
     white-space: nowrap;
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index aa35cd9bea4..bb70b270299 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -17,7 +17,7 @@
     .select2-arrow {
       background-image: none;
       background-color: transparent;
-      border: none;
+      border: 0;
       padding-top: 12px;
       padding-right: 20px;
       font-size: 10px;
@@ -60,12 +60,17 @@
   border-radius: $border-radius-base;
   border: 1px solid $dropdown-border-color;
   min-width: 175px;
-  color: $gl-grayish-blue;
+  color: $gl-text-color;
+  z-index: 999;
 }
 
-.select2-results .select2-result-label,
-.select2-more-results {
-  padding: 10px 15px;
+.select2-drop-mask {
+  z-index: 998;
+}
+
+.select2-drop.select2-drop-above.select2-drop-active {
+  border-top: 1px solid $dropdown-border-color;
+  margin-top: -6px;
 }
 
 .select2-container-active {
@@ -158,18 +163,35 @@
   }
 }
 
-.select2-results .select2-no-results,
-.select2-results .select2-searching,
-.select2-results .select2-ajax-error,
-.select2-results .select2-selection-limit {
-  background: $gray-light;
-  display: list-item;
-  padding: 10px 15px;
-}
-
 .select2-results {
   margin: 0;
-  padding: 10px 0;
+  padding: #{$gl-padding / 2} 0;
+
+  .select2-no-results,
+  .select2-searching,
+  .select2-ajax-error,
+  .select2-selection-limit {
+    background: transparent;
+    padding: #{$gl-padding / 2} $gl-padding;
+  }
+
+  .select2-result-label,
+  .select2-more-results {
+    padding: #{$gl-padding / 2} $gl-padding;
+  }
+
+  .select2-highlighted {
+    background: transparent;
+    color: $gl-text-color;
+
+    .select2-result-label {
+      background: $dropdown-item-hover-bg;
+    }
+  }
+
+  .select2-result {
+    padding: 0 1px;
+  }
 
   li.select2-result-with-children > .select2-result-label {
     font-weight: $gl-font-weight-bold;
@@ -190,8 +212,6 @@
 }
 
 .select2-highlighted {
-  background: $gl-link-color !important;
-
   .group-result {
     .group-path {
       color: $white-light;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index ef58382ba41..1a19b7320a0 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -9,7 +9,7 @@
     &.container-blank {
       background: none;
       padding: 0;
-      border: none;
+      border: 0;
     }
   }
 }
@@ -111,7 +111,7 @@
     }
 
     .block:last-of-type {
-      border: none;
+      border: 0;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 4dd31bf28cd..5bde96caf42 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -33,7 +33,7 @@ table {
       th {
         background-color: $gray-light;
         font-weight: $gl-font-weight-normal;
-        border-bottom: none;
+        border-bottom: 0;
 
         &.wide {
           width: 55%;
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index f718ec4bcad..373f35e71d8 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -21,7 +21,7 @@
   }
 
   &.text-file .diff-file {
-    border-bottom: none;
+    border-bottom: 0;
   }
 }
 
@@ -66,5 +66,5 @@
 
 .discussion .timeline-entry {
   margin: 0;
-  border-right: none;
+  border-right: 0;
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 3c0b4c82d19..0817cce114c 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -167,7 +167,7 @@
 
     &.plain-readme {
       background: none;
-      border: none;
+      border: 0;
       padding: 0;
       margin: 0;
       font-size: 14px;
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 0c226ff7598..5a4d3ba0ee9 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -9,7 +9,7 @@
     z-index: 1031;
 
     textarea {
-      border: none;
+      border: 0;
       box-shadow: none;
       border-radius: 0;
       color: $black;
@@ -57,7 +57,15 @@
   padding: 5px;
   font-size: 36px;
 
+  svg {
+    fill: $gl-text-color;
+  }
+
   &:hover {
     color: $black;
+
+    svg {
+      fill: $black;
+    }
   }
 }
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 46978be8ba0..27b10b536a2 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -48,7 +48,7 @@
     overflow-x: auto;
     font-size: 12px;
     border-radius: 0;
-    border: none;
+    border: 0;
 
     .bash {
       display: block;
diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss
index bf6a48889bf..fbe1f3081a0 100644
--- a/app/assets/stylesheets/pages/ci_projects.scss
+++ b/app/assets/stylesheets/pages/ci_projects.scss
@@ -36,7 +36,7 @@
     pre.commit-message {
       background: none;
       padding: 0;
-      border: none;
+      border: 0;
       margin: 20px 0;
       border-radius: 0;
     }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index ee3ca246374..b1850be8a5f 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -1,6 +1,6 @@
 .commit-description {
   background: none;
-  border: none;
+  border: 0;
   padding: 0;
   margin-top: 10px;
   word-break: normal;
@@ -247,7 +247,7 @@
     word-break: normal;
 
     pre {
-      border: none;
+      border: 0;
       background: inherit;
       padding: 0;
       margin: 0;
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 82d9be29201..292e0ad394b 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -80,7 +80,7 @@
   .panel {
     .content-block {
       padding: 24px 0;
-      border-bottom: none;
+      border-bottom: 0;
       position: relative;
 
       @media (max-width: $screen-xs-max) {
@@ -222,11 +222,11 @@
       }
 
       &:first-child {
-        border-top: none;
+        border-top: 0;
       }
 
       &:last-child {
-        border-bottom: none;
+        border-bottom: 0;
       }
 
       .stage-nav-item-cell {
@@ -290,7 +290,7 @@
     border-bottom: 1px solid $gray-darker;
 
     &:last-child {
-      border-bottom: none;
+      border-bottom: 0;
       margin-bottom: 0;
     }
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index faa3d1fb4d5..bce94e09367 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -47,7 +47,7 @@
     table {
       width: 100%;
       font-family: $monospace_font;
-      border: none;
+      border: 0;
       border-collapse: separate;
       margin: 0;
       padding: 0;
@@ -105,7 +105,7 @@
     .new_line {
       @include user-select(none);
       margin: 0;
-      border: none;
+      border: 0;
       padding: 0 5px;
       border-right: 1px solid;
       text-align: right;
@@ -133,7 +133,7 @@
       display: block;
       margin: 0;
       padding: 0 1.5em;
-      border: none;
+      border: 0;
       position: relative;
 
       &.parallel {
@@ -359,7 +359,7 @@
       cursor: pointer;
 
       &:first-child {
-        border-left: none;
+        border-left: 0;
       }
 
       &:hover {
@@ -388,7 +388,7 @@
 
 .file-content .diff-file {
   margin: 0;
-  border: none;
+  border: 0;
 }
 
 .diff-wrap-lines .line_content {
@@ -400,7 +400,7 @@
 }
 
 .files-changed {
-  border-bottom: none;
+  border-bottom: 0;
 }
 
 .diff-stats-summary-toggler {
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index edfafa79c44..c586dab4cf2 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -3,13 +3,13 @@
     border-top: 1px solid $border-color;
     border-right: 1px solid $border-color;
     border-left: 1px solid $border-color;
-    border-bottom: none;
+    border-bottom: 0;
     border-radius: $border-radius-small $border-radius-small 0 0;
     background: $gray-normal;
   }
 
   #editor {
-    border: none;
+    border: 0;
     border-radius: 0;
     height: 500px;
     margin: 0;
@@ -171,7 +171,7 @@
     width: 100%;
     margin: 5px 0;
     padding: 0;
-    border-left: none;
+    border-left: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index b5b0f3d9dfa..26c5f093c6b 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -117,7 +117,7 @@
     }
 
     .no-btn {
-      border: none;
+      border: 0;
       background: none;
       outline: none;
       width: 100%;
@@ -133,11 +133,11 @@
 }
 
 .folder-row {
-  border-left: none;
-  border-right: none;
+  border-left: 0;
+  border-right: 0;
 
   @media (min-width: $screen-sm-max) {
-    border-top: none;
+    border-top: 0;
   }
 }
 
@@ -256,12 +256,6 @@
   padding: 0;
   padding-bottom: 100%;
 
-  .label-axis-text {
-    fill: $black;
-    font-weight: $gl-font-weight-normal;
-    font-size: 10px;
-  }
-
   .text-metric-usage,
   .legend-metric-title {
     fill: $black;
@@ -276,19 +270,33 @@
     left: 0;
     top: 0;
 
-    .label-axis-text,
-    .text-metric-usage {
+    text {
+      fill: $gl-text-color;
+      stroke-width: 0;
+    }
+
+    .text-metric-bold {
+      font-weight: $gl-font-weight-bold;
+    }
+
+    .label-axis-text {
       fill: $black;
       font-weight: $gl-font-weight-normal;
-      font-size: 12px;
+      font-size: 10px;
     }
 
     .legend-axis-text {
       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/events.scss b/app/assets/stylesheets/pages/events.scss
index 1723d716805..eea8b7dd193 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -85,7 +85,7 @@
       }
 
       pre {
-        border: none;
+        border: 0;
         background: $gray-light;
         border-radius: 0;
         color: $events-pre-color;
@@ -128,14 +128,14 @@
     }
   }
 
-  &:last-child { border: none; }
+  &:last-child { border: 0; }
 
   .event_commits {
     li {
       &.commit {
         background: transparent;
         padding: 0;
-        border: none;
+        border: 0;
 
         .commit-row-title {
           font-size: $gl-font-size;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7059a4cfe85..43520c72725 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -79,7 +79,7 @@
   .title {
     padding: 0;
     margin-bottom: 16px;
-    border-bottom: none;
+    border-bottom: 0;
   }
 
   .btn-edit {
@@ -131,12 +131,12 @@
   top: $header-height;
   bottom: 0;
   right: 0;
-  transition: width .3s;
+  transition: width $right-sidebar-transition-duration;
   background: $gray-light;
   z-index: 200;
   overflow: hidden;
 
-  a,
+  a:not(.btn-retry),
   .btn-link {
     color: inherit;
   }
@@ -164,7 +164,7 @@
     }
 
     &:last-child {
-      border: none;
+      border: 0;
     }
 
     span {
@@ -338,7 +338,7 @@
     .block {
       width: $gutter_collapsed_width - 2px;
       padding: 15px 0 0;
-      border-bottom: none;
+      border-bottom: 0;
       overflow: hidden;
     }
 
@@ -399,7 +399,7 @@
       }
 
       .btn-clipboard {
-        border: none;
+        border: 0;
         color: $issuable-sidebar-color;
 
         &:hover {
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 92d49bd864a..b7985c4dea5 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -139,7 +139,7 @@
       border-left: 1px solid $border-color;
 
       &:first-of-type {
-        border-left: none;
+        border-left: 0;
         border-top-left-radius: $border-radius-default;
       }
 
@@ -165,7 +165,7 @@
         border-bottom: 1px solid $border-color;
 
         a {
-          border: none;
+          border: 0;
           border-bottom: 2px solid $link-underline-blue;
           margin-right: 0;
           color: $black;
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index dbf3e2b763c..04bde64c752 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -262,7 +262,7 @@ $colors: (
     .editor {
       pre {
         height: 350px;
-        border: none;
+        border: 0;
         border-radius: 0;
         margin-bottom: 0;
       }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 6e485ebad1b..5832cf4637f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -150,18 +150,6 @@
     display: block;
   }
 
-  .mr-widget-body {
-    @include clearfix;
-
-    &.media > *:first-child {
-      margin-right: 10px;
-    }
-
-    .approve-btn {
-      margin-right: 5px;
-    }
-  }
-
   .mr-widget-pipeline-graph {
     padding: 0 4px;
 
@@ -169,9 +157,8 @@
       z-index: 300;
     }
 
-    .ci-action-icon-wrapper svg {
-      width: 16px;
-      height: 16px;
+    .ci-action-icon-wrapper {
+      line-height: 16px;
     }
   }
 
@@ -195,10 +182,6 @@
     overflow: hidden;
     word-break: break-all;
 
-    &.media > *:first-child {
-      margin-right: 10px;
-    }
-
     &.label-truncated {
       position: relative;
       display: inline-block;
@@ -216,6 +199,18 @@
         background-color: $gray-light;
       }
     }
+  }
+
+  .mr-widget-body {
+    @include clearfix;
+
+    &.media > *:first-child {
+      margin-right: 10px;
+    }
+
+    .approve-btn {
+      margin-right: 5px;
+    }
 
     h4 {
       float: left;
@@ -239,10 +234,6 @@
       margin-right: 7px;
     }
 
-    .approve-btn {
-      margin-right: 5px;
-    }
-
     label {
       font-weight: $gl-font-weight-normal;
     }
@@ -342,17 +333,6 @@
     }
   }
 
-  .mini-pipeline-graph-dropdown-menu .mini-pipeline-graph-dropdown-item {
-    display: flex;
-    align-items: center;
-
-    .ci-status-text,
-    .ci-status-icon {
-      top: 0;
-      margin-right: 10px;
-    }
-  }
-
   .mr-widget-help {
     padding: 10px 16px 10px 48px;
     font-style: italic;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 5127307c5e7..237c71b71f0 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -16,7 +16,7 @@
 .discussion {
   .new-note {
     margin: 0;
-    border: none;
+    border: 0;
   }
 }
 
@@ -106,15 +106,35 @@
   background-color: $orange-100;
   border-radius: $border-radius-default $border-radius-default 0 0;
   border: 1px solid $border-gray-normal;
-  border-bottom: none;
+  border-bottom: 0;
   padding: 3px 12px;
   margin: auto;
   align-items: center;
 
+  .icon {
+    margin-right: $issuable-warning-icon-margin;
+  }
+
   + .md-area {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
+
+  .disabled-comment {
+    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;
+    }
+  }
 }
 
 .sidebar-item-value {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index ca363c6eac4..9537eeeee97 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -331,7 +331,7 @@ ul.notes {
 
     td {
       border: 1px solid $white-normal;
-      border-left: none;
+      border-left: 0;
 
       &.notes_line {
         vertical-align: middle;
@@ -476,6 +476,10 @@ ul.notes {
     float: none;
     margin-left: 0;
   }
+
+  .btn-group > .discussion-next-btn {
+    margin-left: -1px;
+  }
 }
 
 .note-actions {
@@ -666,7 +670,7 @@ ul.notes {
     .timeline-entry-inner {
       padding-left: $gl-padding;
       padding-right: $gl-padding;
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 }
@@ -679,7 +683,7 @@ ul.notes {
   padding: 90px 0;
 
   &.discussion-locked {
-    border: none;
+    border: 0;
     background-color: $white-light;
   }
 
@@ -759,7 +763,7 @@ ul.notes {
   top: 0;
   padding: 0;
   background-color: transparent;
-  border: none;
+  border: 0;
   outline: 0;
   color: $gray-darkest;
   transition: color $general-hover-transition-duration $general-hover-transition-curve;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 2a8cbc61af7..cb24274c612 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -179,7 +179,7 @@
    * Play button with icon in dropdowns
    */
   .no-btn {
-    border: none;
+    border: 0;
     background: none;
     outline: none;
     width: 100%;
@@ -288,7 +288,7 @@
 .pipeline-actions {
   @include new-style-dropdown;
 
-  border-bottom: none;
+  border-bottom: 0;
 }
 
 .tab-pane {
@@ -318,7 +318,7 @@
   }
 
   .build-log {
-    border: none;
+    border: 0;
     line-height: initial;
   }
 }
@@ -386,13 +386,13 @@
         // Remove right connecting horizontal line from first build in last stage
         &:first-child {
           &::after {
-            border: none;
+            border: 0;
           }
         }
         // Remove right curved connectors from all builds in last stage
         &:not(:first-child) {
           &::after {
-            border: none;
+            border: 0;
           }
         }
         // Remove opposite curve
@@ -409,7 +409,7 @@
         // Remove left curved connectors from all builds in first stage
         &:not(:first-child) {
           &::before {
-            border: none;
+            border: 0;
           }
         }
         // Remove opposite curve
@@ -518,7 +518,7 @@
 
     .dropdown-menu-toggle {
       background-color: transparent;
-      border: none;
+      border: 0;
       padding: 0;
 
       &:focus {
@@ -823,6 +823,11 @@ button.mini-pipeline-graph-dropdown-toggle {
         margin-left: 2px;
         display: inline-block;
 
+        &::after {
+          content: '';
+          display: block;
+        }
+
         @media (max-width: $screen-xs-max) {
           max-width: 60%;
         }
@@ -951,7 +956,7 @@ button.mini-pipeline-graph-dropdown-toggle {
 
 .terminal-container {
   .content-block {
-    border-bottom: none;
+    border-bottom: 0;
   }
 
   #terminal {
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index eab39f698c3..28dc71dc641 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -113,7 +113,7 @@
 
   li {
     padding: 3px 0;
-    border: none;
+    border: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index b0c3474e3d5..aaad6dbba8e 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -80,7 +80,7 @@
 
 .project-feature-settings {
   background: $gray-lighter;
-  border-top: none;
+  border-top: 0;
   margin-bottom: 16px;
 }
 
@@ -128,7 +128,7 @@
 
 .project-feature-toggle {
   position: relative;
-  border: none;
+  border: 0;
   outline: 0;
   display: block;
   width: 100px;
@@ -483,7 +483,7 @@ a.deploy-project-label {
   flex: 1;
   padding: 0;
   background: transparent;
-  border: none;
+  border: 0;
   line-height: 34px;
   margin: 0;
 
@@ -1012,7 +1012,7 @@ pre.light-well {
     margin: 0;
     border-radius: 0 0 1px 1px;
     padding: 20px 0;
-    border: none;
+    border: 0;
   }
 
   .table-bordered {
@@ -1165,7 +1165,7 @@ pre.light-well {
   table-layout: fixed;
 
   &.table-responsive {
-    border: none;
+    border: 0;
   }
 
   .variable-key {
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 1bb4e3cc345..fee4638e20f 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -64,7 +64,7 @@
 
     .monaco-editor.vs {
       .current-line {
-        border: none;
+        border: 0;
         background: $well-light-border;
       }
 
@@ -139,7 +139,7 @@
 
         &.active {
           background: $white-light;
-          border-bottom: none;
+          border-bottom: 0;
         }
 
         a {
@@ -181,7 +181,7 @@
         &.tabs-divider {
           width: 100%;
           background-color: $white-light;
-          border-right: none;
+          border-right: 0;
           border-top-right-radius: 2px;
         }
       }
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index eed711b1b66..fe455a04960 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -5,7 +5,7 @@
     margin-bottom: $gl-padding;
 
     &:last-child {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 
@@ -57,7 +57,7 @@ input[type="checkbox"]:hover {
   }
 
   .search-input {
-    border: none;
+    border: 0;
     font-size: 14px;
     padding: 0 20px 0 0;
     margin-left: 5px;
@@ -78,10 +78,6 @@ input[type="checkbox"]:hover {
   }
 
   .search-input-wrap {
-    // Fallback if flexbox is not supported
-    display: inline-block;
-    width: 100%;
-
     .search-icon,
     .clear-icon {
       position: absolute;
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 6c8d87185e9..2139a029fc7 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -141,7 +141,7 @@
       }
 
       pre {
-        border: none;
+        border: 0;
         background: $gray-light;
         border-radius: 0;
         color: $todo-body-pre-color;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index e2f6e511c86..50f0ef4414a 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -252,7 +252,7 @@
     margin-top: 20px;
     padding: 0;
     border-top: 1px solid $white-dark;
-    border-bottom: none;
+    border-bottom: 0;
   }
 
   .commit-stats li {