Merge remote-tracking branch 'upstream/master' into no-ivar-in-modules

* upstream/master: (168 commits)
  Update CHANGELOG.md for 10.0.1
  Remove Grit settings from default settings
  Fix duplicate key errors in PostDeployMigrateUserExternalMailData migration
  Workaround for #38259
  Workaround for n+1 in Projects::TreeController#show
  Removed old icons from project page
  Make branches page translatable
  fix typo in icons section
  Don't show it if there's no project.
  Update CHANGELOG.md for 10.0.0
  Inform user that current shared projects will remain shared
  Allow the git circuit breaker to correctly handle missing repository storages
  Reserve refs/replace cos `git-replace` is using it
  Resolve "Better SVG Usage in the Frontend"
  Replace the 'project/service.feature' spinach test with an rspec analog
  Replace the 'project/shortcuts.feature' spinach test with an rspec analog
  Removed two legacy config options
  Fix rendering double note issue.
  IssueNotes: Switch back to Write pane when note cancel or submit.
  Upgrade Nokogiri because of CVE-2017-9050
  ...

14 files changed, 86 insertions, 141 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 35e7a10379f..923d14f2c3d 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -52,4 +52,3 @@
 @import "framework/snippets";
 @import "framework/memory_graph";
 @import "framework/responsive-tables";
-@import "framework/feature_highlight";
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index bb30da4f4b2..e0d2ed80de5 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -9,6 +9,7 @@
 }
 
 .emoji-menu {
+  display: none;
   position: absolute;
   top: 0;
   margin-top: 3px;
@@ -27,6 +28,10 @@
   transition: .3s cubic-bezier(.67, .06, .19, 1.44);
   transition-property: transform, opacity;
 
+  &.is-rendered {
+    display: block;
+  }
+
   &.is-aligned-right {
     transform-origin: 100% -45px;
   }
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index b575ec9de18..5c68059f485 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -319,16 +319,6 @@
     padding: $gl-padding;
   }
 
-  .svg-content {
-    text-align: center;
-
-    svg {
-      max-width: 425px;
-      width: 100%;
-      padding: $gl-padding;
-    }
-  }
-
   .emoji-icon {
     display: inline-block;
   }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 82350c36df0..d178bc17462 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -46,15 +46,6 @@
   }
 }
 
-@mixin btn-svg {
-  svg {
-    height: 15px;
-    width: 15px;
-    position: relative;
-    top: 2px;
-  }
-}
-
 @mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
   background-color: $light;
   border-color: $border-light;
@@ -132,7 +123,6 @@
 .btn {
   @include btn-default;
   @include btn-white;
-  @include btn-svg;
 
   color: $gl-text-color;
 
@@ -140,7 +130,6 @@
     outline: 0;
   }
 
-  &.btn-small,
   &.btn-sm {
     padding: 4px 10px;
     font-size: 13px;
@@ -232,6 +221,13 @@
     }
   }
 
+  svg {
+    height: 15px;
+    width: 15px;
+    position: relative;
+    top: 2px;
+  }
+
   svg,
   .fa {
     &:not(:last-child) {
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
deleted file mode 100644
index ebae473df50..00000000000
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-.feature-highlight {
-  position: relative;
-  margin-left: $gl-padding;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 6px;
-    left: 6px;
-    width: 8px;
-    height: 8px;
-    background-color: $blue-500;
-    border-radius: 50%;
-    box-shadow: 0 0 0 rgba($blue-500, 0.4);
-    animation: pulse-highlight 2s infinite;
-  }
-
-  &:hover::before,
-  &.disable-animation::before {
-    animation: none;
-  }
-
-  &[disabled]::before {
-    display: none;
-  }
-}
-
-.is-showing-fly-out {
-  .feature-highlight {
-    display: none;
-  }
-}
-
-.feature-highlight-popover-content {
-  display: none;
-
-  hr {
-    margin: $gl-padding * 0.5 0;
-  }
-
-  .btn-link {
-    @include btn-svg;
-
-    svg path {
-      fill: currentColor;
-    }
-  }
-
-  .dismiss-feature-highlight {
-    padding: 0;
-  }
-
-  svg:first-child {
-    width: 100%;
-    background-color: $indigo-50;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    border-bottom: 1px solid darken($gray-normal, 8%);
-  }
-}
-
-.popover .feature-highlight-popover-content {
-  display: block;
-}
-
-.feature-highlight-popover {
-  padding: 0;
-
-  .popover-content {
-    padding: 0;
-  }
-}
-
-.feature-highlight-popover-sub-content {
-  padding: 9px 14px;
-}
-
-@include keyframes(pulse-highlight) {
-  0% {
-    box-shadow: 0 0 0 0 rgba($blue-200, 0.4);
-  }
-
-  70% {
-    box-shadow: 0 0 0 10px transparent;
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-}
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 09a569ad415..60d61c68d63 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -9,3 +9,27 @@
   padding: 10px;
   margin-bottom: 10px;
 }
+
+.svg-content {
+  text-align: center;
+  padding: $gl-padding;
+
+  svg,
+  img {
+    max-width: 425px;
+    width: 100%;
+  }
+}
+
+@mixin svg-size($size) {
+  width: $size;
+  height: $size;
+}
+
+svg {
+  &.s16 { @include svg-size(16px); }
+  &.s24 { @include svg-size(24px); }
+  &.s32 { @include svg-size(32px); }
+  &.s48 { @include svg-size(48px); }
+  &.s72 { @include svg-size(72px); }
+}
diff --git a/app/assets/stylesheets/framework/media_object.scss b/app/assets/stylesheets/framework/media_object.scss
index b573052c14a..89c561479cc 100644
--- a/app/assets/stylesheets/framework/media_object.scss
+++ b/app/assets/stylesheets/framework/media_object.scss
@@ -6,3 +6,7 @@
 .media-body {
   flex: 1;
 }
+
+.media-body-wrap {
+  flex-grow: 1;
+}
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 58e205537ef..8c5bafac637 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -375,8 +375,6 @@ header.navbar-gitlab-new {
   display: flex;
   width: 100%;
   position: relative;
-  padding-top: $gl-padding;
-  padding-bottom: $gl-padding;
   align-items: center;
   border-bottom: 1px solid $border-color;
 }
@@ -388,6 +386,11 @@ header.navbar-gitlab-new {
   align-self: center;
   color: $gl-text-color-secondary;
 
+  @media (max-width: $screen-xs-max) {
+    padding-left: 17px;
+    border-left: 1px solid $gl-text-color-quaternary;
+  }
+
   .avatar-tile {
     margin-right: 4px;
     border: 1px solid $border-color;
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 8030854e527..9c404b7e542 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -192,7 +192,11 @@ $new-sidebar-collapsed-width: 50px;
 .nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
-  overflow: scroll;
+  overflow: auto;
+
+  @media (min-width: $screen-sm-min) {
+    overflow: hidden;
+  }
 }
 
 .with-performance-bar .nav-sidebar {
@@ -441,9 +445,8 @@ $new-sidebar-collapsed-width: 50px;
   background-color: transparent;
   border: 0;
   padding: 6px 16px;
-  margin: 0 16px 0 -15px;
+  margin: 0 0 0 -15px;
   height: 46px;
-  border-right: 1px solid $gl-text-color-quaternary;
 
   i {
     font-size: 20px;
@@ -451,7 +454,12 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   @media (max-width: $screen-xs-max) {
-    display: inline-block;
+    display: flex;
+    align-items: center;
+
+    i {
+      font-size: 18px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss
new file mode 100644
index 00000000000..6c555aee20a
--- /dev/null
+++ b/app/assets/stylesheets/pages/admin.scss
@@ -0,0 +1,6 @@
+.info-well {
+  .admin-well-statistics,
+  .admin-well-features {
+    padding-bottom: 46px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 439636fe026..09a14578dd3 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -356,6 +356,10 @@
   }
 }
 
+.mr-widget-body-controls {
+  flex-wrap: wrap;
+}
+
 .mr_source_commit,
 .mr_target_commit {
   margin-bottom: 0;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e437bad4912..46d31e41ada 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -727,6 +727,12 @@ ul.notes {
     border-bottom-left-radius: 0;
   }
 
+  .btn {
+    svg path {
+      fill: $gray-darkest;
+    }
+  }
+
   .btn.discussion-create-issue-btn {
     margin-left: -4px;
     border-radius: 0;
@@ -741,10 +747,6 @@ ul.notes {
         border: 0;
       }
     }
-
-    .new-issue-for-discussion path {
-      fill: $gray-darkest;
-    }
   }
 }
 
@@ -778,6 +780,7 @@ ul.notes {
   background-color: transparent;
   border: none;
   outline: 0;
+  color: $gray-darkest;
   transition: color $general-hover-transition-duration $general-hover-transition-curve;
 
   &.is-disabled {
@@ -801,7 +804,7 @@ ul.notes {
   }
 
   svg {
-    fill: $gray-darkest;
+    fill: currentColor;
     height: 16px;
     width: 16px;
   }
@@ -816,16 +819,6 @@ ul.notes {
   vertical-align: middle;
 }
 
-.discussion-next-btn {
-  svg {
-    margin: 0;
-
-    path {
-      fill: $gray-darkest;
-    }
-  }
-}
-
 // Merge request notes in diffs
 .diff-file {
   // Diff is inline
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 296b6310552..9d03a042aa3 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -209,6 +209,11 @@
 }
 
 .stage-cell {
+  @media (min-width: $screen-md-min) {
+    min-width: 148px;
+    margin-right: -4px;
+  }
+
   .mini-pipeline-graph-dropdown-toggle svg {
     height: $ci-action-icon-size;
     width: $ci-action-icon-size;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 7dfcf7b7d9c..4d4d92f9494 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -56,7 +56,6 @@
 
   .tree-content-holder {
     display: flex;
-    max-height: 100vh;
     min-height: 300px;
   }
 
@@ -156,7 +155,7 @@
         list-style-type: none;
         background: $gray-normal;
         display: inline-block;
-        padding: 10px 18px;
+        padding: #{$gl-padding / 2} $gl-padding;
         border-right: 1px solid $white-dark;
         border-bottom: 1px solid $white-dark;
         white-space: nowrap;
@@ -180,10 +179,9 @@
         a {
           @include str-truncated(100px);
           color: $black;
-          width: 100px;
-          text-align: center;
           vertical-align: middle;
           text-decoration: none;
+          margin-right: 12px;
 
           &.close {
             width: auto;
@@ -193,6 +191,10 @@
           }
         }
 
+        .close-icon:hover {
+          color: $hint-color;
+        }
+
         .close-icon,
         .unsaved-icon {
           float: right;