Merge branch 'revert-unintentional-changes-in-mr-12810' into 'master'

Revert unintentional changes in !12810

Closes #39816

See merge request gitlab-org/gitlab-ce!15198

app/assets/stylesheets/framework/header.scss

@@ -352,77 +352,7 @@
 
 .header-user .dropdown-menu-nav,
 .header-new .dropdown-menu-nav {
-  margin-top: 4px;
-}
-
-.search {
-  margin: 4px 8px 0;
-
-  form {
-    height: 32px;
-    border: 0;
-    border-radius: $border-radius-default;
-    transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
-
-    &:hover {
-      box-shadow: none;
-    }
-  }
-
-  .search-input {
-    color: $white-light;
-    background: none;
-    transition: color ease-in-out 0.15s;
-  }
-
-  .search-input::placeholder {
-    transition: color ease-in-out 0.15s;
-  }
-
-  .location-badge {
-    font-size: 12px;
-    margin: -4px 4px -4px -4px;
-    line-height: 25px;
-    padding: 4px 8px;
-    border-radius: 2px 0 0 2px;
-    height: 32px;
-    transition: border-color ease-in-out 0.15s;
-  }
-
-  &.search-active {
-    form {
-      background-color: rgba($indigo-200, .3);
-      box-shadow: none;
-
-      .search-input {
-        color: $gl-text-color;
-        transition: color ease-in-out 0.15s;
-      }
-
-      .search-input::placeholder {
-        color: $gl-text-color-tertiary;
-      }
-
-      .search-input-wrap {
-        .search-icon,
-        .clear-icon {
-          color: $gl-text-color-tertiary;
-          transition: color ease-in-out 0.15s;
-        }
-      }
-    }
-
-    .location-badge {
-      background-color: $nav-badge-bg;
-      border-color: $border-color;
-    }
-
-    .search-input-wrap {
-      .clear-icon {
-        color: $white-light;
-      }
-    }
-  }
+  margin-top: $dropdown-vertical-offset;
 }
 
 .breadcrumbs {

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

@@ -340,64 +340,11 @@
   }
 }
 
-.page-with-layout-nav {
-  .right-sidebar {
-    top: ($header-height + 1) * 2;
-  }
-
-  &.page-with-sub-nav {
-    .right-sidebar {
-      top: ($header-height + 1) * 3;
-
-      &.affix {
-        top: $header-height;
-      }
-    }
-  }
-}
-
-.with-performance-bar .page-with-layout-nav {
-  .right-sidebar {
-    top: ($header-height + 1) * 2 + $performance-bar-height;
-  }
-
-  &.page-with-sub-nav {
-    .right-sidebar {
-      top: ($header-height + 1) * 3 + $performance-bar-height;
-
-      &.affix {
-        top: $header-height + $performance-bar-height;
-      }
-    }
-  }
-}
-
-@media (max-width: $screen-xs-max) {
-  .top-area {
-    flex-flow: row wrap;
-
-    .nav-controls {
-      $controls-margin: $btn-xs-side-margin - 2px;
-      flex: 0 0 100%;
-
-      &.controls-flex {
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        justify-content: center;
-        padding: 0 0 $gl-padding-top;
-      }
-
-      .controls-item,
-      .controls-item-full,
-      .controls-item:last-child {
-        flex: 1 1 35%;
-        display: block;
-        width: 100%;
-        margin: $controls-margin;
-      }
-    }
-  }
+.project-item-select-holder.btn-group {
+  display: flex;
+  max-width: 350px;
+  overflow: hidden;
+  float: right;
 
   .new-project-item-link {
     white-space: nowrap;

app/assets/stylesheets/framework/selects.scss

@@ -60,12 +60,17 @@
   border-radius: $border-radius-base;
   border: 1px solid $dropdown-border-color;
   min-width: 175px;
-  color: $gl-grayish-blue;
+  color: $gl-text-color;
+  z-index: 999;
 }
 
-.select2-results .select2-result-label,
-.select2-more-results {
-  padding: 10px 15px;
+.select2-drop-mask {
+  z-index: 998;
+}
+
+.select2-drop.select2-drop-above.select2-drop-active {
+  border-top: 1px solid $dropdown-border-color;
+  margin-top: -6px;
 }
 
 .select2-container-active {
@@ -158,18 +163,35 @@
   }
 }
 
-.select2-results .select2-no-results,
-.select2-results .select2-searching,
-.select2-results .select2-ajax-error,
-.select2-results .select2-selection-limit {
-  background: $gray-light;
-  display: list-item;
-  padding: 10px 15px;
-}
-
 .select2-results {
   margin: 0;
-  padding: 10px 0;
+  padding: #{$gl-padding / 2} 0;
+
+  .select2-no-results,
+  .select2-searching,
+  .select2-ajax-error,
+  .select2-selection-limit {
+    background: transparent;
+    padding: #{$gl-padding / 2} $gl-padding;
+  }
+
+  .select2-result-label,
+  .select2-more-results {
+    padding: #{$gl-padding / 2} $gl-padding;
+  }
+
+  .select2-highlighted {
+    background: transparent;
+    color: $gl-text-color;
+
+    .select2-result-label {
+      background: $dropdown-item-hover-bg;
+    }
+  }
+
+  .select2-result {
+    padding: 0 1px;
+  }
 
   li.select2-result-with-children > .select2-result-label {
     font-weight: $gl-font-weight-bold;
@@ -190,8 +212,6 @@
 }
 
 .select2-highlighted {
-  background: $gl-link-color !important;
-
   .group-result {
     .group-path {
       color: $white-light;

app/assets/stylesheets/pages/environments.scss

@@ -256,12 +256,6 @@
   padding: 0;
   padding-bottom: 100%;
 
-  .label-axis-text {
-    fill: $black;
-    font-weight: $gl-font-weight-normal;
-    font-size: 10px;
-  }
-
   .text-metric-usage,
   .legend-metric-title {
     fill: $black;
@@ -276,19 +270,33 @@
     left: 0;
     top: 0;
 
-    .label-axis-text,
-    .text-metric-usage {
+    text {
+      fill: $gl-text-color;
+      stroke-width: 0;
+    }
+
+    .text-metric-bold {
+      font-weight: $gl-font-weight-bold;
+    }
+
+    .label-axis-text {
       fill: $black;
       font-weight: $gl-font-weight-normal;
-      font-size: 12px;
+      font-size: 10px;
     }
 
     .legend-axis-text {
       fill: $black;
     }
 
-    .tick > text {
-      font-size: 12px;
+    .tick {
+      > line {
+        stroke: $gray-darker;
+      }
+
+      > text {
+        font-size: 12px;
+      }
     }
 
     .text-metric-title {

app/assets/stylesheets/pages/issuable.scss

@@ -131,12 +131,12 @@
   top: $header-height;
   bottom: 0;
   right: 0;
-  transition: width .3s;
+  transition: width $right-sidebar-transition-duration;
   background: $gray-light;
   z-index: 200;
   overflow: hidden;
 
-  a,
+  a:not(.btn-retry),
   .btn-link {
     color: inherit;
   }

app/assets/stylesheets/pages/merge_requests.scss

@@ -150,18 +150,6 @@
     display: block;
   }
 
-  .mr-widget-body {
-    @include clearfix;
-
-    &.media > *:first-child {
-      margin-right: 10px;
-    }
-
-    .approve-btn {
-      margin-right: 5px;
-    }
-  }
-
   .mr-widget-pipeline-graph {
     padding: 0 4px;
 
@@ -169,9 +157,8 @@
       z-index: 300;
     }
 
-    .ci-action-icon-wrapper svg {
-      width: 16px;
-      height: 16px;
+    .ci-action-icon-wrapper {
+      line-height: 16px;
     }
   }
 
@@ -195,10 +182,6 @@
     overflow: hidden;
     word-break: break-all;
 
-    &.media > *:first-child {
-      margin-right: 10px;
-    }
-
     &.label-truncated {
       position: relative;
       display: inline-block;
@@ -216,6 +199,18 @@
         background-color: $gray-light;
       }
     }
+  }
+
+  .mr-widget-body {
+    @include clearfix;
+
+    &.media > *:first-child {
+      margin-right: 10px;
+    }
+
+    .approve-btn {
+      margin-right: 5px;
+    }
 
     h4 {
       float: left;
@@ -239,10 +234,6 @@
       margin-right: 7px;
     }
 
-    .approve-btn {
-      margin-right: 5px;
-    }
-
     label {
       font-weight: $gl-font-weight-normal;
     }
@@ -342,17 +333,6 @@
     }
   }
 
-  .mini-pipeline-graph-dropdown-menu .mini-pipeline-graph-dropdown-item {
-    display: flex;
-    align-items: center;
-
-    .ci-status-text,
-    .ci-status-icon {
-      top: 0;
-      margin-right: 10px;
-    }
-  }
-
   .mr-widget-help {
     padding: 10px 16px 10px 48px;
     font-style: italic;

app/assets/stylesheets/pages/note_form.scss

@@ -111,10 +111,30 @@
   margin: auto;
   align-items: center;
 
+  .icon {
+    margin-right: $issuable-warning-icon-margin;
+  }
+
   + .md-area {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
+
+  .disabled-comment {
+    border: none;
+    border-radius: $label-border-radius;
+    padding-top: $gl-vert-padding;
+    padding-bottom: $gl-vert-padding;
+
+    .icon svg {
+      position: relative;
+      top: 2px;
+      margin-right: $btn-xs-side-margin;
+      width: $gl-font-size;
+      height: $gl-font-size;
+      fill: $orange-600;
+    }
+  }
 }
 
 .sidebar-item-value {

app/assets/stylesheets/pages/notes.scss

@@ -476,6 +476,10 @@ ul.notes {
     float: none;
     margin-left: 0;
   }
+
+  .btn-group > .discussion-next-btn {
+    margin-left: -1px;
+  }
 }
 
 .note-actions {

app/assets/stylesheets/pages/search.scss

@@ -78,10 +78,6 @@ input[type="checkbox"]:hover {
   }
 
   .search-input-wrap {
-    // Fallback if flexbox is not supported
-    display: inline-block;
-    width: 100%;
-
     .search-icon,
     .clear-icon {
       position: absolute;