Merge branch 'master' into sh-headless-chrome-support

* master: (33 commits)
  Ignore SQL CACHE hits in Sherlock
  Fix SQL timings for the performance bar
  Find the LFS-objects for a fork within a the fork network
  Remove bottom-border from last responsive table row
  Add system hooks user_rename and group_rename
  Unlink a project from a fork network when it's source was deleted.
  Make sure the settings page renders when root of a fork is deleted
  Remove Peek's original keyboard shortcut (numpad 0, keycode 96)
  Add application setting to Auto DevOps docs
  Enable MergeableSelector in scss-lint (for !14567)
  Enable MergeableSelector in scss-lint (for !14055)
  Enable MergeableSelector in scss-lint (for !14062)
  Enable MergeableSelector in scss-lint (for !14398)
  Enable MergeableSelector in scss-lint (for !13480)
  Enable MergeableSelector in scss-lint (for !13473)
  Enable MergeableSelector in scss-lint (for !13600)
  Enable MergeableSelector in scss-lint
  Resolve ""To do" should be "Todos" on Todos list page"
  Avoid regenerating the ref path for the environment
  Remove white space at bottom of issue boards
  ...

14 files changed, 300 insertions, 204 deletions

diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 8819a0c20f4..def986180fc 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -40,6 +40,10 @@
 
   &.top-block {
     border-top: none;
+
+    .container-fluid {
+      background-color: inherit;
+    }
   }
 
   &.middle-block {
@@ -98,10 +102,6 @@
     background-color: $white-light;
     border-top: none;
   }
-
-  &.top-block .container-fluid {
-    background-color: inherit;
-  }
 }
 
 .sub-header-block {
diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss
index e0e46dd73af..1bd94c0acba 100644
--- a/app/assets/stylesheets/framework/callout.scss
+++ b/app/assets/stylesheets/framework/callout.scss
@@ -12,15 +12,15 @@
   border-left: 3px solid $border-color;
   color: $text-color;
   background: $gray-light;
-}
 
-.bs-callout h4 {
-  margin-top: 0;
-  margin-bottom: 5px;
-}
+  h4 {
+    margin-top: 0;
+    margin-bottom: 5px;
+  }
 
-.bs-callout p:last-child {
-  margin-bottom: 0;
+  p:last-child {
+    margin-bottom: 0;
+  }
 }
 
 /* Variations */
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index ed84b17af6a..ea3007f5e08 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -53,6 +53,14 @@ hr {
 
 .str-truncated {
   @include str-truncated;
+
+  &-60 {
+    @include str-truncated(60%);
+  }
+
+  &-100 {
+    @include str-truncated(100%);
+  }
 }
 
 .block-truncated {
@@ -78,10 +86,17 @@ hr {
   font-size: 14px;
 }
 
-table a code {
-  position: relative;
-  top: -2px;
-  margin-right: 3px;
+table {
+  a code {
+    position: relative;
+    top: -2px;
+    margin-right: 3px;
+  }
+
+  td.permission-x {
+    background: $table-permission-x-bg !important;
+    text-align: center;
+  }
 }
 
 .loading {
@@ -266,13 +281,6 @@ img.emoji {
   margin-bottom: 10px;
 }
 
-table {
-  td.permission-x {
-    background: $table-permission-x-bg !important;
-    text-align: center;
-  }
-}
-
 .btn-sign-in {
   text-shadow: none;
 
@@ -338,10 +346,11 @@ table {
 
 .dropzone .dz-preview .dz-progress {
   border-color: $border-color !important;
-}
 
-.dropzone .dz-preview .dz-progress .dz-upload {
-  background: $gl-success !important;
+  .dz-upload {
+    background: $gl-success !important;
+  }
+
 }
 
 .dz-message {
@@ -402,16 +411,6 @@ table {
   border-radius: $border-radius-default;
 }
 
-.str-truncated {
-  &-60 {
-    @include str-truncated(60%);
-  }
-
-  &-100 {
-    @include str-truncated(100%);
-  }
-}
-
 .tooltip {
   .tooltip-inner {
     word-wrap: break-word;
diff --git a/app/assets/stylesheets/framework/contextual-sidebar.scss b/app/assets/stylesheets/framework/contextual-sidebar.scss
index 2905cfe643f..320f458630a 100644
--- a/app/assets/stylesheets/framework/contextual-sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual-sidebar.scss
@@ -141,15 +141,15 @@
     svg {
       fill: $gl-text-color-secondary;
     }
-  }
 
-  .nav-item-name {
-    flex: 1;
-  }
+    .nav-item-name {
+      flex: 1;
+    }
 
-  li.active {
-    > a {
-      font-weight: $gl-font-weight-bold;
+    &.active {
+      > a {
+        font-weight: $gl-font-weight-bold;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 1aa53b8f8cf..08c603edd23 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -727,11 +727,11 @@
 
 .pika-single.animate-picker.is-bound {
   @include set-visible;
-}
 
-.pika-single.animate-picker.is-bound.is-hidden {
-  @include set-invisible;
-  overflow: hidden;
+  &.is-hidden {
+    @include set-invisible;
+    overflow: hidden;
+  }
 }
 
 @mixin dropdown-item-hover {
@@ -938,9 +938,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
       border-right: 0;
     }
   }
-}
 
-.projects-dropdown-container {
   .projects-list-frequent-container,
   .projects-list-search-container, {
     padding: 8px 0;
@@ -951,11 +949,6 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
   .projects-list-frequent-container li.section-empty,
   .projects-list-search-container li.section-empty {
     padding: 0 15px;
-  }
-
-  .section-header,
-  .projects-list-frequent-container li.section-empty,
-  .projects-list-search-container li.section-empty {
     color: $gl-text-color-secondary;
     font-size: $gl-font-size;
   }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 5833ef939e9..6382551fcc9 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -165,22 +165,36 @@
         &:last-child {
           border-right: none;
         }
-      }
 
-      td.blame-commit {
-        padding: 5px 10px;
-        min-width: 400px;
-        max-width: 400px;
-        background: $gray-light;
-        border-left: 3px solid;
+        &.blame-commit {
+          padding: 5px 10px;
+          min-width: 400px;
+          max-width: 400px;
+          background: $gray-light;
+          border-left: 3px solid;
+
+          .commit-row-title {
+            display: flex;
+          }
+
+          .item-title {
+            flex: 1;
+            margin-right: 0.5em;
+          }
+        }
+
+        &.line-numbers {
+          float: none;
+          border-left: 1px solid $blame-line-numbers-border;
 
-        .commit-row-title {
-          display: flex;
+          i {
+            float: none;
+            margin-right: 0;
+          }
         }
 
-        .item-title {
-          flex: 1;
-          margin-right: 0.5em;
+        &.lines {
+          padding: 0;
         }
       }
 
@@ -195,20 +209,6 @@
           border-left-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%);
         }
       }
-
-      td.line-numbers {
-        float: none;
-        border-left: 1px solid $blame-line-numbers-border;
-
-        i {
-          float: none;
-          margin-right: 0;
-        }
-      }
-
-      td.lines {
-        padding: 0;
-      }
     }
 
     &.logs {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index e5e85daf1e8..a7333925f80 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -463,10 +463,10 @@
       word-break: break-all;
     }
   }
-}
 
-.filter-dropdown-item.droplab-item-active .btn {
-  @extend %filter-dropdown-item-btn-hover;
+  &.droplab-item-active .btn {
+    @extend %filter-dropdown-item-btn-hover;
+  }
 }
 
 .filter-dropdown-loading {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 62ba74ff582..5d777f0d468 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -352,7 +352,77 @@
 
 .header-user .dropdown-menu-nav,
 .header-new .dropdown-menu-nav {
-  margin-top: $dropdown-vertical-offset;
+  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;
+      }
+    }
+  }
 }
 
 .breadcrumbs {
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 69d19ea2962..cb324ccc440 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -30,10 +30,10 @@ body {
 .container {
   padding-top: 0;
   z-index: 5;
-}
 
-.container .content {
-  margin: 0;
+  .content {
+    margin: 0;
+  }
 }
 
 .navless-container {
@@ -82,26 +82,26 @@ body {
     transition: background-color 0.15s, border-color 0.15s;
     background-color: $orange-500;
     border-color: $orange-500;
-  }
 
-  .alert-warning + .alert-warning {
-    background-color: $orange-600;
-    border-color: $orange-600;
-  }
+    &:only-of-type {
+      background-color: $orange-500;
+      border-color: $orange-500;
+    }
 
-  .alert-warning + .alert-warning + .alert-warning {
-    background-color: $orange-700;
-    border-color: $orange-700;
-  }
+    + .alert-warning {
+      background-color: $orange-600;
+      border-color: $orange-600;
 
-  .alert-warning + .alert-warning + .alert-warning + .alert-warning {
-    background-color: $orange-800;
-    border-color: $orange-800;
-  }
+      + .alert-warning {
+        background-color: $orange-700;
+        border-color: $orange-700;
 
-  .alert-warning:only-of-type {
-    background-color: $orange-500;
-    border-color: $orange-500;
+        + .alert-warning {
+          background-color: $orange-800;
+          border-color: $orange-800;
+        }
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index d43f998cb82..511608c618c 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -299,40 +299,40 @@ ul.indent-list {
   }
 }
 
-.group-list-tree .avatar-container.content-loading {
-  position: relative;
+.group-list-tree {
+  .avatar-container.content-loading {
+    position: relative;
 
-  > a,
-  > a .avatar {
-    height: 100%;
-    border-radius: 50%;
-  }
+    > a,
+    > a .avatar {
+      height: 100%;
+      border-radius: 50%;
+    }
 
-  > a {
-    padding: 2px;
-  }
+    > a {
+      padding: 2px;
 
-  > a .avatar {
-    border: 2px solid $white-normal;
+      .avatar {
+        border: 2px solid $white-normal;
 
-    &.identicon {
-      line-height: 30px;
+        &.identicon {
+          line-height: 30px;
+        }
+      }
     }
-  }
 
-  &::after {
-    content: "";
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    background-color: transparent;
-    border: 2px outset $kdb-border;
-    border-radius: 50%;
-    animation: spin-avatar 3s infinite linear;
+    &::after {
+      content: "";
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      background-color: transparent;
+      border: 2px outset $kdb-border;
+      border-radius: 50%;
+      animation: spin-avatar 3s infinite linear;
+    }
   }
-}
 
-.group-list-tree {
   .folder-toggle-wrap {
     float: left;
     line-height: $list-text-height;
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index e3920b5d3d9..0a5a16c09b0 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -173,21 +173,8 @@
   ul > li {
     white-space: nowrap;
   }
-}
-
-@media(max-width: $screen-xs-max) {
-  .atwho-view-ul {
-    width: 350px;
-  }
-
-  .atwho-view ul li {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
 
-// TODO: fallback to global style
-.atwho-view {
+  // TODO: fallback to global style
   .atwho-view-ul {
     padding: 8px 1px;
 
@@ -220,3 +207,14 @@
     }
   }
 }
+
+@media(max-width: $screen-xs-max) {
+  .atwho-view-ul {
+    width: 350px;
+  }
+
+  .atwho-view ul li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index 7adb2f113bb..8b7afdbe1a5 100644
--- a/app/assets/stylesheets/framework/responsive_tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -25,7 +25,10 @@
     margin: 0;
     padding: $gl-padding 0;
     border: none;
-    border-bottom: 1px solid $white-normal;
+
+    &: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 3fd2549b143..9e1f77e5726 100644
--- a/app/assets/stylesheets/framework/secondary-navigation-elements.scss
+++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss
@@ -340,11 +340,64 @@
   }
 }
 
-.project-item-select-holder.btn-group {
-  display: flex;
-  max-width: 350px;
-  overflow: hidden;
-  float: right;
+.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;
+      }
+    }
+  }
 
   .new-project-item-link {
     white-space: nowrap;
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 621eec4f158..aa35cd9bea4 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -60,22 +60,12 @@
   border-radius: $border-radius-base;
   border: 1px solid $dropdown-border-color;
   min-width: 175px;
-  color: $gl-text-color;
-  z-index: 999;
+  color: $gl-grayish-blue;
 }
 
-.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-results li.select2-result-with-children > .select2-result-label {
-  font-weight: $gl-font-weight-bold;
-  color: $gl-text-color;
+.select2-results .select2-result-label,
+.select2-more-results {
+  padding: 10px 15px;
 }
 
 .select2-container-active {
@@ -144,58 +134,46 @@
   .select2-drop-auto-width & {
     padding: 15px 15px 5px;
   }
-}
 
-.select2-search input {
-  padding: 2px 25px 2px 5px;
-  background: $white-light image-url('select2.png');
-  background-repeat: no-repeat;
-  background-position: right 0 bottom 6px;
-  border: 1px solid $input-border;
-  border-radius: $border-radius-default;
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-
-  &:focus {
-    border-color: $input-border-focus;
+  input {
+    padding: 2px 25px 2px 5px;
+    background: $white-light image-url('select2.png');
+    background-repeat: no-repeat;
+    background-position: right 0 bottom 6px;
+    border: 1px solid $input-border;
+    border-radius: $border-radius-default;
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+
+    &:focus {
+      border-color: $input-border-focus;
+    }
+
+    &.select2-active {
+      background-color: $white-light;
+      background-image: image-url('select2-spinner.gif') !important;
+      background-repeat: no-repeat;
+      background-position: right 5px center !important;
+      background-size: 16px 16px !important;
+    }
   }
 }
 
-.select2-search input.select2-active {
-  background-color: $white-light;
-  background-image: image-url('select2-spinner.gif') !important;
-  background-repeat: no-repeat;
-  background-position: right 5px center !important;
-  background-size: 16px 16px !important;
+.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: #{$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;
-  }
+  padding: 10px 0;
 
-  .select2-highlighted {
-    background: transparent;
+  li.select2-result-with-children > .select2-result-label {
+    font-weight: $gl-font-weight-bold;
     color: $gl-text-color;
-
-    .select2-result-label {
-      background: $dropdown-item-hover-bg;
-    }
-  }
-
-  .select2-result {
-    padding: 0 1px;
   }
 }
 
@@ -212,6 +190,8 @@
 }
 
 .select2-highlighted {
+  background: $gl-link-color !important;
+
   .group-result {
     .group-path {
       color: $white-light;