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
  ...

19 files changed, 389 insertions, 423 deletions

diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 1409503d8e7..3683afa07de 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -72,7 +72,7 @@
 }
 
 .boards-list {
-  height: calc(100vh - 152px);
+  height: calc(100vh - 105px);
   width: 100%;
   padding-top: 25px;
   padding-bottom: 25px;
@@ -81,8 +81,12 @@
   overflow-x: scroll;
   white-space: nowrap;
 
-  @media (min-width: $screen-sm-min) {
-    height: calc(100vh - 222px);
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    height: calc(100vh - 90px);
+  }
+
+  @media (min-width: $screen-md-min) {
+    height: calc(100vh - 160px);
     min-height: 475px;
   }
 }
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index e87ffe4f374..46978be8ba0 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -68,18 +68,18 @@
 
     &.affix {
       top: $header-height;
-    }
 
-    // with sidebar
-    &.affix.sidebar-expanded {
-      right: 306px;
-      left: 16px;
-    }
+      // with sidebar
+      &.sidebar-expanded {
+        right: 306px;
+        left: 16px;
+      }
 
-    // without sidebar
-    &.affix.sidebar-collapsed {
-      right: 16px;
-      left: 16px;
+      // without sidebar
+      &.sidebar-collapsed {
+        right: 16px;
+        left: 16px;
+      }
     }
 
     &.affix-top {
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 2a92673d9fa..82d9be29201 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -22,6 +22,11 @@
         }
       }
     }
+
+    svg {
+      width: 136px;
+      height: 136px;
+    }
   }
 
   .col-headers {
@@ -155,11 +160,6 @@
     }
   }
 
-  .landing svg {
-    width: 136px;
-    height: 136px;
-  }
-
   .fa-spinner {
     font-size: 28px;
     position: relative;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 09f831dcb29..faa3d1fb4d5 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -380,6 +380,10 @@
       }
     }
   }
+
+  .line_content {
+    white-space: pre-wrap;
+  }
 }
 
 .file-content .diff-file {
@@ -387,10 +391,6 @@
   border: none;
 }
 
-.diff-file .line_content {
-  white-space: pre-wrap;
-}
-
 .diff-wrap-lines .line_content {
   white-space: pre-wrap;
 }
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 6c1d32bed2f..b5b0f3d9dfa 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -255,23 +255,6 @@
   width: 100%;
   padding: 0;
   padding-bottom: 100%;
-}
-
-.prometheus-svg-container > svg {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
-
-  text {
-    fill: $gl-text-color;
-    stroke-width: 0;
-  }
-
-  .text-metric-bold {
-    font-weight: $gl-font-weight-bold;
-  }
 
   .label-axis-text {
     fill: $black;
@@ -286,42 +269,51 @@
     font-size: 12px;
   }
 
-  .legend-axis-text {
-    fill: $black;
-  }
+  > svg {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
 
-  .tick {
-    > line {
-      stroke: $gray-darker;
+    .label-axis-text,
+    .text-metric-usage {
+      fill: $black;
+      font-weight: $gl-font-weight-normal;
+      font-size: 12px;
     }
 
-    > text {
-      font-size: 12px;
+    .legend-axis-text {
+      fill: $black;
     }
-  }
 
-  .text-metric-title {
-    font-size: 12px;
-  }
+    .tick > text {
+      font-size: 12px;
+    }
 
-  .y-label-text,
-  .x-label-text {
-    fill: $gray-darkest;
-  }
+    .text-metric-title {
+      font-size: 12px;
+    }
 
-  .axis-tick {
-    stroke: $gray-darker;
-  }
+    .y-label-text,
+    .x-label-text {
+      fill: $gray-darkest;
+    }
 
-  @media (max-width: $screen-sm-max) {
-    .label-axis-text,
-    .text-metric-usage,
-    .legend-axis-text {
-      font-size: 8px;
+    .axis-tick {
+      stroke: $gray-darker;
     }
 
-    .tick > text {
-      font-size: 8px;
+    @media (max-width: $screen-sm-max) {
+      .label-axis-text,
+      .text-metric-usage,
+      .legend-axis-text {
+        font-size: 8px;
+      }
+
+      .tick > text {
+        font-size: 8px;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 88600a0e6d3..7059a4cfe85 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -127,7 +127,16 @@
 }
 
 .right-sidebar {
-  a:not(.btn-retry),
+  position: absolute;
+  top: $header-height;
+  bottom: 0;
+  right: 0;
+  transition: width .3s;
+  background: $gray-light;
+  z-index: 200;
+  overflow: hidden;
+
+  a,
   .btn-link {
     color: inherit;
   }
@@ -228,17 +237,6 @@
   .btn-clipboard:hover {
     color: $gl-text-color;
   }
-}
-
-.right-sidebar {
-  position: absolute;
-  top: $header-height;
-  bottom: 0;
-  right: 0;
-  transition: width $right-sidebar-transition-duration;
-  background: $gray-light;
-  z-index: 200;
-  overflow: hidden;
 
   .issuable-sidebar {
     width: calc(100% + 100px);
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index cf5f933a762..92d49bd864a 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -109,6 +109,30 @@
     border-top-right-radius: $border-radius-default;
     border-top-left-radius: $border-radius-default;
 
+    // Ldap configurations may need more tabs & the tab labels are user generated (arbitrarily long).
+    // These styles prevent this from breaking the layout, and only applied when providers are configured.
+    &.custom-provider-tabs {
+      flex-wrap: wrap;
+
+      li {
+        min-width: 85px;
+        flex-basis: auto;
+
+        // This styles tab elements that have wrapped to a second line. We cannot easily predict when this will happen.
+        // We are making somewhat of an assumption about the configuration here: that users do not have more than
+        // 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any
+        // of them. If either condition is false, this will work as expected. If both are true, there may be a missing border
+        // above one of the bottom row elements. If you know a better way, please implement it!
+        &:nth-child(n+5) {
+          border-top: 1px solid $border-color;
+        }
+      }
+
+      a {
+        font-size: 16px;
+      }
+    }
+
     li {
       flex: 1;
       text-align: center;
@@ -154,32 +178,6 @@
     }
   }
 
-  // Ldap configurations may need more tabs & the tab labels are user generated (arbitrarily long).
-  // These styles prevent this from breaking the layout, and only applied when providers are configured.
-
-  .new-session-tabs.custom-provider-tabs {
-    flex-wrap: wrap;
-
-    li {
-      min-width: 85px;
-      flex-basis: auto;
-
-      // This styles tab elements that have wrapped to a second line. We cannot easily predict when this will happen.
-      // We are making somewhat of an assumption about the configuration here: that users do not have more than
-      // 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any
-      // of them. If either condition is false, this will work as expected. If both are true, there may be a missing border
-      // above one of the bottom row elements. If you know a better way, please implement it!
-      &:nth-child(n+5) {
-        border-top: 1px solid $border-color;
-      }
-    }
-
-    a {
-      font-size: 16px;
-    }
-  }
-
-
   .form-control {
     &:active,
     &:focus {
@@ -231,35 +229,35 @@
   margin: 0;
   padding: 0;
   height: 100%;
-}
 
-// Fixes footer container to bottom of viewport
-.devise-layout-html body {
-  // offset height of fixed header + 1 to avoid scroll
-  height: calc(100% - 51px);
-  margin: 0;
-  padding: 0;
+  // Fixes footer container to bottom of viewport
+  body {
+    // offset height of fixed header + 1 to avoid scroll
+    height: calc(100% - 51px);
+    margin: 0;
+    padding: 0;
 
-  .page-wrap {
-    min-height: 100%;
-    position: relative;
-  }
+    .page-wrap {
+      min-height: 100%;
+      position: relative;
+    }
 
-  .footer-container,
-  hr.footer-fixed {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 40px;
-    background: $white-light;
-  }
+    .footer-container,
+    hr.footer-fixed {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 40px;
+      background: $white-light;
+    }
 
-  .navless-container {
-    padding: 65px 15px; // height of footer + bottom padding of email confirmation link
+    .navless-container {
+      padding: 65px 15px; // height of footer + bottom padding of email confirmation link
 
-    @media (max-width: $screen-xs-max) {
-      padding: 0 15px 65px;
+      @media (max-width: $screen-xs-max) {
+        padding: 0 15px 65px;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 692acf74a58..18c48405ecd 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -49,9 +49,17 @@
       width: auto;
     }
   }
+
+  &.existing-title {
+    @media (min-width: $screen-sm-min) {
+      float: left;
+    }
+  }
 }
 
 .member-form-control {
+  @include new-style-dropdown;
+
   @media (max-width: $screen-xs-max) {
     padding-bottom: 5px;
     margin-left: 0;
@@ -64,12 +72,6 @@
   line-height: 43px;
 }
 
-.member.existing-title {
-  @media (min-width: $screen-sm-min) {
-    float: left;
-  }
-}
-
 .member-search-form {
   @include new-style-dropdown;
 
@@ -281,7 +283,3 @@
     }
   }
 }
-
-.member-form-control {
-  @include new-style-dropdown;
-}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 645fc1f3ebb..6e485ebad1b 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -156,6 +156,10 @@
     &.media > *:first-child {
       margin-right: 10px;
     }
+
+    .approve-btn {
+      margin-right: 5px;
+    }
   }
 
   .mr-widget-pipeline-graph {
@@ -191,6 +195,10 @@
     overflow: hidden;
     word-break: break-all;
 
+    &.media > *:first-child {
+      margin-right: 10px;
+    }
+
     &.label-truncated {
       position: relative;
       display: inline-block;
@@ -208,14 +216,7 @@
         background-color: $gray-light;
       }
     }
-  }
 
-  .mr-widget-help {
-    padding: 10px 16px 10px 48px;
-    font-style: italic;
-  }
-
-  .mr-widget-body {
     h4 {
       float: left;
       font-weight: $gl-font-weight-bold;
@@ -238,6 +239,10 @@
       margin-right: 7px;
     }
 
+    .approve-btn {
+      margin-right: 5px;
+    }
+
     label {
       font-weight: $gl-font-weight-normal;
     }
@@ -337,6 +342,22 @@
     }
   }
 
+  .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;
+  }
+
   .ci-coverage {
     float: right;
   }
@@ -351,12 +372,6 @@
   }
 }
 
-.mr-state-widget .mr-widget-body {
-  .approve-btn {
-    margin-right: 5px;
-  }
-}
-
 .mr-widget-body-controls {
   flex-wrap: wrap;
 }
@@ -470,16 +485,16 @@
       padding-bottom: 0;
     }
   }
-}
 
-.mr-info-list.mr-memory-usage {
-  p {
-    float: left;
-  }
+  &.mr-memory-usage {
+    p {
+      float: left;
+    }
 
-  .memory-graph-container {
-    float: left;
-    margin-left: 5px;
+    .memory-graph-container {
+      float: left;
+      margin-left: 5px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 32039936be7..ae8fa45a2d7 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -66,6 +66,15 @@
       height: 6px;
       margin: 0;
     }
+
+    .sidebar-collapsed-icon {
+      clear: both;
+      padding: 15px 5px 5px;
+
+      .progress {
+        margin: 5px 0;
+      }
+    }
   }
 
   .collapsed-milestone-date {
@@ -93,17 +102,6 @@
     margin-right: 0;
   }
 
-  .milestone-progress {
-    .sidebar-collapsed-icon {
-      clear: both;
-      padding: 15px 5px 5px;
-
-      .progress {
-        margin: 5px 0;
-      }
-    }
-  }
-
   .right-sidebar-collapsed & {
     .reference {
       border-top: 1px solid $border-gray-normal;
@@ -156,18 +154,16 @@
 
   .status-box {
     margin-top: 0;
-  }
-
-  .milestone-buttons {
-    margin-left: auto;
-  }
-
-  .status-box {
     order: 1;
   }
 
   .milestone-buttons {
+    margin-left: auto;
     order: 2;
+
+    .verbose {
+      display: none;
+    }
   }
 
   .header-text-content {
@@ -175,10 +171,6 @@
     width: 100%;
   }
 
-  .milestone-buttons .verbose {
-    display: none;
-  }
-
   @media (min-width: $screen-xs-min) {
     .milestone-buttons .verbose {
       display: inline;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index f0cad30f4f3..5127307c5e7 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -111,24 +111,9 @@
   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;
+  + .md-area {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 }
 
@@ -155,11 +140,6 @@
   }
 }
 
-.issuable-note-warning + .md-area {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .discussion-form {
   background-color: $white-light;
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index f2d3e3d5cb6..ca363c6eac4 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -312,57 +312,72 @@ ul.notes {
   }
 }
 
-.diff-file .notes_holder {
-  font-family: $regular_font;
+.diff-file {
+  .is-over {
+    .add-diff-note {
+      display: inline-block;
+    }
+  }
 
-  td {
-    border: 1px solid $white-normal;
-    border-left: none;
+  // Merge request notes in diffs
+  // Diff is inline
+  .notes_content .note-header .note-headline-light {
+    display: inline-block;
+    position: relative;
+  }
 
-    &.notes_line {
-      vertical-align: middle;
-      text-align: center;
-      padding: 10px 0;
-      background: $gray-light;
-      color: $text-color;
-    }
+  .notes_holder {
+    font-family: $regular_font;
 
-    &.notes_line2 {
-      text-align: center;
-      padding: 10px 0;
-      border-left: 1px solid $note-line2-border !important;
-    }
+    td {
+      border: 1px solid $white-normal;
+      border-left: none;
 
-    &.notes_content {
-      background-color: $gray-light;
-      border-width: 1px 0;
-      padding: 0;
-      vertical-align: top;
-      white-space: normal;
+      &.notes_line {
+        vertical-align: middle;
+        text-align: center;
+        padding: 10px 0;
+        background: $gray-light;
+        color: $text-color;
+      }
 
-      &.parallel {
-        border-width: 1px;
+      &.notes_line2 {
+        text-align: center;
+        padding: 10px 0;
+        border-left: 1px solid $note-line2-border !important;
       }
 
-      .discussion-notes {
-        &:not(:first-child) {
-          border-top: 1px solid $white-normal;
-          margin-top: 20px;
+      &.notes_content {
+        background-color: $gray-light;
+        border-width: 1px 0;
+        padding: 0;
+        vertical-align: top;
+        white-space: normal;
+
+        &.parallel {
+          border-width: 1px;
         }
 
-        &:not(:last-child) {
-          border-bottom: 1px solid $white-normal;
-          margin-bottom: 20px;
+        .discussion-notes {
+          &:not(:first-child) {
+            border-top: 1px solid $white-normal;
+            margin-top: 20px;
+          }
+
+          &:not(:last-child) {
+            border-bottom: 1px solid $white-normal;
+            margin-bottom: 20px;
+          }
         }
-      }
 
-      .notes {
-        background-color: $white-light;
-      }
+        .notes {
+          background-color: $white-light;
+        }
 
-      a code {
-        top: 0;
-        margin-right: 0;
+        a code {
+          top: 0;
+          margin-right: 0;
+        }
       }
     }
   }
@@ -457,8 +472,9 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
-  .btn-group > .discussion-next-btn {
-    margin-left: -1px;
+  @include notes-media('max', $screen-md-max) {
+    float: none;
+    margin-left: 0;
   }
 }
 
@@ -499,13 +515,6 @@ ul.notes {
   min-width: 180px;
 }
 
-.discussion-actions {
-  @include notes-media('max', $screen-md-max) {
-    float: none;
-    margin-left: 0;
-  }
-}
-
 .note-actions-item {
   margin-left: 12px;
   display: flex;
@@ -662,14 +671,6 @@ ul.notes {
   }
 }
 
-.diff-file {
-  .is-over {
-    .add-diff-note {
-      display: inline-block;
-    }
-  }
-}
-
 .disabled-comment {
   background-color: $gray-light;
   border-radius: $border-radius-base;
@@ -711,20 +712,20 @@ ul.notes {
     svg path {
       fill: $gray-darkest;
     }
-  }
 
-  .btn.discussion-create-issue-btn {
-    margin-left: -4px;
-    border-radius: 0;
-    border-right: 0;
+    &.discussion-create-issue-btn {
+      margin-left: -4px;
+      border-radius: 0;
+      border-right: 0;
 
-    a {
-      padding: 0;
-      line-height: 0;
+      a {
+        padding: 0;
+        line-height: 0;
 
-      &:hover {
-        text-decoration: none;
-        border: 0;
+        &:hover {
+          text-decoration: none;
+          border: 0;
+        }
       }
     }
   }
@@ -798,12 +799,3 @@ ul.notes {
 .line-resolve-text {
   vertical-align: middle;
 }
-
-// Merge request notes in diffs
-.diff-file {
-  // Diff is inline
-  .notes_content .note-header .note-headline-light {
-    display: inline-block;
-    position: relative;
-  }
-}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 6604b471560..2a8cbc61af7 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -175,6 +175,25 @@
     }
   }
 
+  /**
+   * Play button with icon in dropdowns
+   */
+  .no-btn {
+    border: none;
+    background: none;
+    outline: none;
+    width: 100%;
+    text-align: left;
+
+    .icon-play {
+      position: relative;
+      top: 2px;
+      margin-right: 5px;
+      height: 13px;
+      width: 12px;
+    }
+  }
+
   .duration,
   .finished-at {
     color: $gl-text-color-secondary;
@@ -450,48 +469,48 @@
       @extend .build-content:hover;
     }
 
-    // Action Icons in big pipeline-graph nodes
-    .ci-action-icon-container.ci-action-icon-wrapper {
-      height: 30px;
-      width: 30px;
-      background: $white-light;
-      border: 1px solid $border-color;
-      border-radius: 100%;
-      display: block;
+    .ci-action-icon-container {
+      position: absolute;
+      right: 5px;
+      top: 5px;
 
-      &:hover {
-        background-color: $stage-hover-bg;
-        border: 1px solid $dropdown-toggle-active-border-color;
-      }
+      // Action Icons in big pipeline-graph nodes
+      &.ci-action-icon-wrapper {
+        height: 30px;
+        width: 30px;
+        background: $white-light;
+        border: 1px solid $border-color;
+        border-radius: 100%;
+        display: block;
 
-      svg {
-        fill: $gl-text-color-secondary;
-        position: relative;
-        left: 5px;
-        top: 2px;
-        width: 18px;
-        height: 18px;
-      }
+        &:hover {
+          background-color: $stage-hover-bg;
+          border: 1px solid $dropdown-toggle-active-border-color;
+
+          svg {
+            fill: $gl-text-color;
+          }
+        }
 
-      &.play {
         svg {
-          width: #{$ci-action-icon-size - 8};
-          height: #{$ci-action-icon-size - 8};
-          left: 8px;
+          fill: $gl-text-color-secondary;
+          position: relative;
+          left: 5px;
+          top: 2px;
+          width: 18px;
+          height: 18px;
         }
-      }
 
-      &:hover svg {
-        fill: $gl-text-color;
+        &.play {
+          svg {
+            width: #{$ci-action-icon-size - 8};
+            height: #{$ci-action-icon-size - 8};
+            left: 8px;
+          }
+        }
       }
     }
 
-    .ci-action-icon-container {
-      position: absolute;
-      right: 5px;
-      top: 5px;
-    }
-
     .ci-status-icon svg {
       height: 20px;
       width: 20px;
@@ -735,6 +754,28 @@ button.mini-pipeline-graph-dropdown-toggle {
         left: -3px;
         position: relative;
         top: -2px;
+
+        &.icon-action-stop,
+        &.icon-action-cancel {
+          width: 12px;
+          height: 12px;
+          top: 1px;
+          left: -1px;
+        }
+
+        &.icon-action-play {
+          width: 11px;
+          height: 11px;
+          top: 1px;
+          left: 1px;
+        }
+
+        &.icon-action-retry {
+          width: 16px;
+          height: 16px;
+          top: 0;
+          left: -3px;
+        }
       }
 
       &:hover svg,
@@ -751,27 +792,6 @@ button.mini-pipeline-graph-dropdown-toggle {
         }
       }
 
-      svg.icon-action-stop,
-      svg.icon-action-cancel {
-        width: 12px;
-        height: 12px;
-        top: 1px;
-        left: -1px;
-      }
-
-      svg.icon-action-play {
-        width: 11px;
-        height: 11px;
-        top: 1px;
-        left: 1px;
-      }
-
-      svg.icon-action-retry {
-        width: 16px;
-        height: 16px;
-        top: 0;
-        left: -3px;
-      }
 
     }
 
@@ -840,13 +860,10 @@ button.mini-pipeline-graph-dropdown-toggle {
   left: 100%;
   top: -10px;
   box-shadow: 0 1px 5px $black-transparent;
-}
-
-/**
- * Top arrow in the dropdown in the big pipeline graph
- */
-.big-pipeline-graph-dropdown-menu {
 
+  /**
+   * Top arrow in the dropdown in the big pipeline graph
+   */
   &::before,
   &::after {
     content: '';
@@ -908,22 +925,23 @@ button.mini-pipeline-graph-dropdown-toggle {
     margin-top: 1px;
     border-bottom-color: $white-light;
   }
-}
 
-/**
- * Center dropdown menu in mini graph
- */
-.mini-pipeline-graph-dropdown-menu.dropdown-menu {
-  transform: translate(-80%, 0);
-  min-width: 150px;
+  /**
+   * Center dropdown menu in mini graph
+   */
+  &.dropdown-menu {
+    transform: translate(-80%, 0);
+    min-width: 150px;
 
-  @media(min-width: $screen-md-min) {
-    transform: translate(-50%, 0);
-    right: auto;
-    left: 50%;
-    min-width: 240px;
+    @media(min-width: $screen-md-min) {
+      transform: translate(-50%, 0);
+      right: auto;
+      left: 50%;
+      min-width: 240px;
+    }
   }
 }
+
 /**
  * Terminal
  */
@@ -947,25 +965,6 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 }
 
-/**
- * Play button with icon in dropdowns
- */
-.ci-table .no-btn {
-  border: none;
-  background: none;
-  outline: none;
-  width: 100%;
-  text-align: left;
-
-  .icon-play {
-    position: relative;
-    top: 2px;
-    margin-right: 5px;
-    height: 13px;
-    width: 12px;
-  }
-}
-
 .ci-header-container {
   min-height: 55px;
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index bd385db9692..b0c3474e3d5 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -88,7 +88,8 @@
   transition: background 2s ease-out;
 
   &:disabled {
-    opacity: 0.75;
+    opacity: 0.5;
+    pointer-events: none;
   }
 
   .highlight-changes & {
@@ -778,35 +779,35 @@ a.deploy-project-label {
   .nav {
     padding-top: 12px;
     padding-bottom: 12px;
-  }
 
-  .nav > li {
-    display: inline-block;
+    > li {
+      display: inline-block;
 
-    &:not(:last-child) {
-      margin-right: $gl-padding;
-    }
+      &:not(:last-child) {
+        margin-right: $gl-padding;
+      }
 
-    &.right {
-      vertical-align: top;
-      margin-top: 0;
+      &.right {
+        vertical-align: top;
+        margin-top: 0;
 
-      @media (min-width: $screen-lg-min) {
-        float: right;
+        @media (min-width: $screen-lg-min) {
+          float: right;
+        }
       }
-    }
-  }
 
-  .nav > li > a {
-    padding: 0;
-    background-color: transparent;
-    font-size: 14px;
-    line-height: 29px;
-    color: $notes-light-color;
+      > a {
+        padding: 0;
+        background-color: transparent;
+        font-size: 14px;
+        line-height: 29px;
+        color: $notes-light-color;
 
-    &:hover,
-    &:focus {
-      color: $gl-text-color;
+        &:hover,
+        &:focus {
+          color: $gl-text-color;
+        }
+      }
     }
   }
 
@@ -1160,13 +1161,6 @@ pre.light-well {
   }
 }
 
-.project-repo-select {
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
 .variables-table {
   table-layout: fixed;
 
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index db0a04a5eb3..eed711b1b66 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -78,6 +78,10 @@ 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/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 968a94c68cf..8b9b47a41bc 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -241,11 +241,11 @@
         margin-left: 5px;
         background: $badge-bg;
       }
-    }
 
-    /* Ensure we don't add border if there's only single li */
-    li + li {
-      border-top: 1px solid $border-color;
+      /* Ensure we don't add border if there's only single li */
+      + li {
+        border-top: 1px solid $border-color;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/sherlock.scss b/app/assets/stylesheets/pages/sherlock.scss
index bfe065dbbaf..2bf0bedb1f5 100644
--- a/app/assets/stylesheets/pages/sherlock.scss
+++ b/app/assets/stylesheets/pages/sherlock.scss
@@ -5,10 +5,10 @@ table .sherlock-code {
 .sherlock-code {
   pre {
     word-wrap: normal;
-  }
 
-  pre code {
-    white-space: pre;
+    code {
+      white-space: pre;
+    }
   }
 }
 
@@ -21,13 +21,13 @@ table .sherlock-code {
     text-align: right;
     padding: 0 10px !important;
   }
+
+  .slow {
+    color: $red-500;
+    font-weight: $gl-font-weight-bold;
+  }
 }
 
 .sherlock-file-sample pre {
   padding-top: 28px !important;
 }
-
-.sherlock-line-samples-table .slow {
-  color: $red-500;
-  font-weight: $gl-font-weight-bold;
-}
diff --git a/app/assets/stylesheets/pages/stat_graph.scss b/app/assets/stylesheets/pages/stat_graph.scss
index dfa4d033fb8..cede147d559 100644
--- a/app/assets/stylesheets/pages/stat_graph.scss
+++ b/app/assets/stylesheets/pages/stat_graph.scss
@@ -40,16 +40,16 @@
     @media (max-width: $screen-xs-max) {
       width: 100%;
     }
-  }
 
-  .person .spark {
-    display: block;
-    background: $stat-graph-common-bg;
-    width: 100%;
-  }
+    .spark {
+      display: block;
+      background: $stat-graph-common-bg;
+      width: 100%;
+    }
 
-  .person .area-contributor {
-    fill: $stat-graph-orange-fill;
+    .area-contributor {
+      fill: $stat-graph-orange-fill;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index b7d4e7bf582..e150f96f3fa 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -161,10 +161,10 @@ ul.wiki-pages-list.content-list {
     list-style: none;
     margin-left: 0;
     padding-left: 15px;
-  }
 
-  ul li {
-    padding: 5px 0;
+    li {
+      padding: 5px 0;
+    }
   }
 }