Enable MergeableSelector in scss-lint

.scss-lint.yml

@@ -112,7 +112,7 @@ linters:
 
   # Reports when you define the same selector twice in a single sheet.
   MergeableSelector:
-    enabled: false
+    enabled: true
 
   # Functions, mixins, variables, and placeholders should be declared
   # with all lowercase letters and hyphens instead of underscores.

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 {

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 {
+  h4 {
     margin-top: 0;
     margin-bottom: 5px;
-}
+  }
 
-.bs-callout p:last-child {
+  p:last-child {
     margin-bottom: 0;
+  }
 }
 
 /* Variations */

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 {
+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 {
+  .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;

app/assets/stylesheets/framework/contextual-sidebar.scss

@@ -141,17 +141,17 @@
     svg {
       fill: $gl-text-color-secondary;
     }
-  }
 
     .nav-item-name {
       flex: 1;
     }
 
-  li.active {
+    &.active {
       > a {
         font-weight: $gl-font-weight-bold;
       }
     }
+  }
 
   @media (max-width: $screen-xs-max) {
     left: (-$contextual-sidebar-width);

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 {
+  &.is-hidden {
     @include set-invisible;
     overflow: hidden;
+  }
 }
 
 @mixin dropdown-item-hover {

app/assets/stylesheets/framework/files.scss

@@ -165,9 +165,8 @@
         &:last-child {
           border-right: none;
         }
-      }
 
-      td.blame-commit {
+        &.blame-commit {
           padding: 5px 10px;
           min-width: 400px;
           max-width: 400px;
@@ -184,19 +183,7 @@
           }
         }
 
-      @for $i from 0 through 5 {
-        td.blame-commit-age-#{$i} {
-          border-left-color: mix($blame-cyan, $blame-blue, $i / 5.0 * 100%);
-        }
-      }
-
-      @for $i from 1 through 4 {
-        td.blame-commit-age-#{$i + 5} {
-          border-left-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%);
-        }
-      }
-
-      td.line-numbers {
+        &.line-numbers {
           float: none;
           border-left: 1px solid $blame-line-numbers-border;
 
@@ -206,11 +193,24 @@
           }
         }
 
-      td.lines {
+        &.lines {
           padding: 0;
         }
       }
 
+      @for $i from 0 through 5 {
+        td.blame-commit-age-#{$i} {
+          border-left-color: mix($blame-cyan, $blame-blue, $i / 5.0 * 100%);
+        }
+      }
+
+      @for $i from 1 through 4 {
+        td.blame-commit-age-#{$i + 5} {
+          border-left-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%);
+        }
+      }
+    }
+
     &.logs {
       background: $logs-bg;
       max-height: 700px;

app/assets/stylesheets/framework/filters.scss

@@ -469,10 +469,10 @@
       word-break: break-all;
     }
   }
-}
 
-.filter-dropdown-item.droplab-item-active .btn {
+  &.droplab-item-active .btn {
     @extend %filter-dropdown-item-btn-hover;
+  }
 }
 
 .filter-dropdown-loading {

app/assets/stylesheets/framework/header.scss

@@ -352,7 +352,81 @@
 
 .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-active form {
+    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;
+      }
+    }
+  }
+
+  .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;
+    }
+
+    .location-badge {
+      background-color: $nav-badge-bg;
+      border-color: $border-color;
+    }
+
+    .search-input-wrap {
+      .clear-icon {
+        color: $white-light;
+      }
+    }
+  }
 }
 
 .breadcrumbs {

app/assets/stylesheets/framework/layout.scss

@@ -30,10 +30,10 @@ body {
 .container {
   padding-top: 0;
   z-index: 5;
-}
 
-.container .content {
+  .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;
+
+    &:only-of-type {
+      background-color: $orange-500;
+      border-color: $orange-500;
     }
 
-  .alert-warning + .alert-warning {
+    + .alert-warning {
       background-color: $orange-600;
       border-color: $orange-600;
-  }
 
-  .alert-warning + .alert-warning + .alert-warning {
+      + .alert-warning {
         background-color: $orange-700;
         border-color: $orange-700;
-  }
 
-  .alert-warning + .alert-warning + .alert-warning + .alert-warning {
+        + .alert-warning {
           background-color: $orange-800;
           border-color: $orange-800;
         }
-
-  .alert-warning:only-of-type {
-    background-color: $orange-500;
-    border-color: $orange-500;
+      }
+    }
   }
 }
 

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;
+  }
+}

app/assets/stylesheets/framework/secondary-navigation-elements.scss

@@ -340,11 +340,64 @@
   }
 }
 
-.project-item-select-holder.btn-group {
+.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;
-  max-width: 350px;
-  overflow: hidden;
-  float: right;
+        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;

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;
-}
-
-.select2-drop-mask {
-  z-index: 998;
+  color: $gl-grayish-blue;
 }
 
-.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,9 +134,8 @@
   .select2-drop-auto-width & {
     padding: 15px 15px 5px;
   }
-}
 
-.select2-search input {
+  input {
     padding: 2px 25px 2px 5px;
     background: $white-light image-url('select2.png');
     background-repeat: no-repeat;
@@ -158,44 +147,33 @@
     &:focus {
       border-color: $input-border-focus;
     }
-}
 
-.select2-search input.select2-active {
+    &.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;
-  }
+  padding: 10px 0;
 
-  .select2-result-label,
-  .select2-more-results {
-    padding: #{$gl-padding / 2} $gl-padding;
-  }
-
-  .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;

app/assets/stylesheets/highlight/white.scss

@@ -217,13 +217,31 @@ $white-gc-bg: #eaf2f5;
   .cp { color: $white-cp; font-weight: $gl-font-weight-bold; }
   .c1 { color: $white-c1; font-style: italic; }
   .cs { color: $white-cs; font-weight: $gl-font-weight-bold; font-style: italic; }
-  .gd { color: $white-gd; background-color: $white-gd-bg; }
-  .gd .x { color: $white-gd-x; background-color: $white-gd-x-bg; }
+
+  .gd {
+    color: $white-gd;
+    background-color: $white-gd-bg;
+
+    .x {
+      color: $white-gd-x;
+      background-color: $white-gd-x-bg;
+    }
+  }
+
   .ge { font-style: italic; }
   .gr { color: $white-gr; }
   .gh { color: $white-gh; }
-  .gi { color: $white-gi; background-color: $white-gi-bg; }
-  .gi .x { color: $white-gi-x; background-color: $white-gi-x-bg; }
+
+  .gi {
+    color: $white-gi;
+    background-color: $white-gi-bg;
+
+    .x {
+      color: $white-gi-x;
+      background-color: $white-gi-x-bg;
+    }
+  }
+
   .go { color: $white-go; }
   .gp { color: $white-gp; }
   .gs { font-weight: $gl-font-weight-bold; }

app/assets/stylesheets/mailers/highlighted_diff_email.scss

@@ -158,13 +158,31 @@ span.highlight_word {
 .cp { color: $highlighted-cp; font-weight: $gl-font-weight-bold; }
 .c1 { color: $highlighted-c1; font-style: italic; }
 .cs { color: $highlighted-cs; font-weight: $gl-font-weight-bold; font-style: italic; }
-.gd { color: $highlighted-gd; background-color: $highlighted-gd-bg; }
-.gd .x { color: $highlighted-gd; background-color: $highlighted-gd-x-bg; }
+
+.gd {
+  color: $highlighted-gd;
+  background-color: $highlighted-gd-bg;
+
+  .x {
+    color: $highlighted-gd;
+    background-color: $highlighted-gd-x-bg;
+  }
+}
+
 .ge { font-style: italic; }
 .gr { color: $highlighted-gr; }
 .gh { color: $highlighted-gh; }
-.gi { color: $highlighted-gi; background-color: $highlighted-gi-bg; }
-.gi .x { color: $highlighted-gi; background-color: $highlighted-gi-x-bg; }
+
+.gi {
+  color: $highlighted-gi;
+  background-color: $highlighted-gi-bg;
+
+  .x {
+    color: $highlighted-gi;
+    background-color: $highlighted-gi-x-bg;
+  }
+}
+
 .go { color: $highlighted-go; }
 .gp { color: $highlighted-gp; }
 .gs { font-weight: $gl-font-weight-bold; }

app/assets/stylesheets/pages/builds.scss

@@ -68,19 +68,19 @@
 
     &.affix {
       top: $header-height;
-    }
 
       // with sidebar
-    &.affix.sidebar-expanded {
+      &.sidebar-expanded {
         right: 306px;
         left: 16px;
       }
 
       // without sidebar
-    &.affix.sidebar-collapsed {
+      &.sidebar-collapsed {
         right: 16px;
         left: 16px;
       }
+    }
 
     &.affix-top {
       position: absolute;

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;

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;
 }

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,19 +269,27 @@
     font-size: 12px;
   }
 
-  .legend-axis-text {
+  > svg {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+
+    .label-axis-text,
+    .text-metric-usage {
       fill: $black;
+      font-weight: $gl-font-weight-normal;
+      font-size: 12px;
     }
 
-  .tick {
-    > line {
-      stroke: $gray-darker;
+    .legend-axis-text {
+      fill: $black;
     }
 
-    > text {
+    .tick > text {
       font-size: 12px;
     }
-  }
 
     .text-metric-title {
       font-size: 12px;
@@ -324,4 +315,5 @@
         font-size: 8px;
       }
     }
+  }
 }

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);

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,10 +229,9 @@
   margin: 0;
   padding: 0;
   height: 100%;
-}
 
-// Fixes footer container to bottom of viewport
-.devise-layout-html body {
+  // Fixes footer container to bottom of viewport
+  body {
     // offset height of fixed header + 1 to avoid scroll
     height: calc(100% - 51px);
     margin: 0;
@@ -262,4 +259,5 @@
         padding: 0 15px 65px;
       }
     }
+  }
 }

app/assets/stylesheets/pages/members.scss

@@ -49,6 +49,12 @@
       width: auto;
     }
   }
+
+  &.existing-title {
+    @media (min-width: $screen-sm-min) {
+      float: left;
+    }
+  }
 }
 
 .member-form-control {
@@ -64,12 +70,6 @@
   line-height: 43px;
 }
 
-.member.existing-title {
-  @media (min-width: $screen-sm-min) {
-    float: left;
-  }
-}
-
 .member-search-form {
   @include new-style-dropdown;
 

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,9 +485,8 @@
       padding-bottom: 0;
     }
   }
-}
 
-.mr-info-list.mr-memory-usage {
+  &.mr-memory-usage {
     p {
       float: left;
     }
@@ -481,6 +495,7 @@
       float: left;
       margin-left: 5px;
     }
+  }
 }
 
 .mr-source-target {

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;
+    order: 1;
   }
 
   .milestone-buttons {
     margin-left: auto;
-  }
+    order: 2;
 
-  .status-box {
-    order: 1;
+    .verbose {
+      display: none;
     }
-
-  .milestone-buttons {
-    order: 2;
   }
 
   .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;

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;
 }

app/assets/stylesheets/pages/notes.scss

@@ -312,7 +312,21 @@ ul.notes {
   }
 }
 
-.diff-file .notes_holder {
+.diff-file {
+  .is-over {
+    .add-diff-note {
+      display: inline-block;
+    }
+  }
+
+  // Merge request notes in diffs
+  // Diff is inline
+  .notes_content .note-header .note-headline-light {
+    display: inline-block;
+    position: relative;
+  }
+
+  .notes_holder {
     font-family: $regular_font;
 
     td {
@@ -366,6 +380,7 @@ ul.notes {
         }
       }
     }
+  }
 }
 
 .discussion-header,
@@ -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;
   }
 }
 
@@ -502,13 +518,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;
@@ -665,14 +674,6 @@ ul.notes {
   }
 }
 
-.diff-file {
-  .is-over {
-    .add-diff-note {
-      display: inline-block;
-    }
-  }
-}
-
 .disabled-comment {
   background-color: $gray-light;
   border-radius: $border-radius-base;
@@ -801,12 +802,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;
-  }
-}

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,8 +469,13 @@
       @extend .build-content:hover;
     }
 
+    .ci-action-icon-container {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+
       // Action Icons in big pipeline-graph nodes
-    .ci-action-icon-container.ci-action-icon-wrapper {
+      .ci-action-icon-wrapper {
         height: 30px;
         width: 30px;
         background: $white-light;
@@ -462,6 +486,10 @@
         &:hover {
           background-color: $stage-hover-bg;
           border: 1px solid $dropdown-toggle-active-border-color;
+
+          svg {
+            fill: $gl-text-color;
+          }
         }
 
         svg {
@@ -472,26 +500,9 @@
           width: 18px;
           height: 18px;
         }
-
-      &.play {
-        svg {
-          width: #{$ci-action-icon-size - 8};
-          height: #{$ci-action-icon-size - 8};
-          left: 8px;
-        }
-      }
-
-      &:hover svg {
-        fill: $gl-text-color;
       }
     }
 
-    .ci-action-icon-container {
-      position: absolute;
-      right: 5px;
-      top: 5px;
-    }
-
     .ci-status-icon svg {
       height: 20px;
       width: 20px;
@@ -840,13 +851,16 @@ button.mini-pipeline-graph-dropdown-toggle {
   left: 100%;
   top: -10px;
   box-shadow: 0 1px 5px $black-transparent;
-}
 
-/**
+  .mini-pipeline-graph-dropdown-item {
+    .ci-status-icon {
+      top: -1px;
+    }
+  }
+
+  /**
    * Top arrow in the dropdown in the big pipeline graph
    */
-.big-pipeline-graph-dropdown-menu {
-
   &::before,
   &::after {
     content: '';
@@ -908,12 +922,11 @@ 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 {
+  &.dropdown-menu {
     transform: translate(-80%, 0);
     min-width: 150px;
 
@@ -923,7 +936,9 @@ button.mini-pipeline-graph-dropdown-toggle {
       left: 50%;
       min-width: 240px;
     }
+  }
 }
+
 /**
  * Terminal
  */
@@ -947,25 +962,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;
 

app/assets/stylesheets/pages/projects.scss

@@ -778,9 +778,8 @@ a.deploy-project-label {
   .nav {
     padding-top: 12px;
     padding-bottom: 12px;
-  }
 
-  .nav > li {
+    > li {
       display: inline-block;
 
       &:not(:last-child) {
@@ -795,9 +794,8 @@ a.deploy-project-label {
           float: right;
         }
       }
-  }
 
-  .nav > li > a {
+      > a {
         padding: 0;
         background-color: transparent;
         font-size: 14px;
@@ -809,6 +807,8 @@ a.deploy-project-label {
           color: $gl-text-color;
         }
       }
+    }
+  }
 
   li.missing {
     border: 1px dashed $border-gray-normal-dashed;

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;

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 {
+      + li {
         border-top: 1px solid $border-color;
       }
     }
+  }
 }

app/assets/stylesheets/pages/sherlock.scss

@@ -5,11 +5,11 @@ table .sherlock-code {
 .sherlock-code {
   pre {
     word-wrap: normal;
-  }
 
-  pre code {
+    code {
       white-space: pre;
     }
+  }
 }
 
 .sherlock-line-samples-table {
@@ -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;
-}

app/assets/stylesheets/pages/stat_graph.scss

@@ -40,17 +40,17 @@
     @media (max-width: $screen-xs-max) {
       width: 100%;
     }
-  }
 
-  .person .spark {
+    .spark {
       display: block;
       background: $stat-graph-common-bg;
       width: 100%;
     }
 
-  .person .area-contributor {
+    .area-contributor {
       fill: $stat-graph-orange-fill;
     }
+  }
 }
 
 .selection rect {

app/assets/stylesheets/pages/wiki.scss

@@ -161,11 +161,11 @@ ul.wiki-pages-list.content-list {
     list-style: none;
     margin-left: 0;
     padding-left: 15px;
-  }
 
-  ul li {
+    li {
       padding: 5px 0;
     }
+  }
 }
 
 .wiki {

changelogs/unreleased/enable-scss-lint-mergeable-selector.yml

+---
+title: Enable MergeableSelector in scss-lint
+merge_request: 12810
+author: Takuya Noguchi