Merge branch 'winh-cleanup-select2-dropdowns' into 'master'

Cleanup Select2 dropdown styles

Closes #37279

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

1 files changed, 46 insertions, 99 deletions

diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 6c14e8b97e0..50f1445bc2e 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -48,31 +48,24 @@
     }
 
     &:hover {
-      background-color: $white-normal;
-      border-color: $border-white-normal;
+      border-color: $gray-darkest;
       color: $gl-text-color;
     }
   }
 }
 
-.select2-drop {
-  box-shadow: $select2-drop-shadow1 0 0 1px 0, $select2-drop-shadow2 0 2px 18px 0;
-  border-radius: $border-radius-default;
-  border: none;
+.select2-drop,
+.select2-drop.select2-drop-above {
+  box-shadow: 0 2px 4px $dropdown-shadow-color;
+  border-radius: $border-radius-base;
+  border: 1px solid $dropdown-border-color;
   min-width: 175px;
+  color: $gl-text-color;
 }
 
-.select2-results .select2-result-label,
-.select2-more-results {
-  padding: 10px 15px;
-}
-
-.select2-drop {
-  color: $gl-grayish-blue;
-}
-
-.select2-highlighted {
-  background: $gl-link-color !important;
+.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 {
@@ -87,13 +80,11 @@
   }
 }
 
-.select2-dropdown-open {
+.select2-dropdown-open,
+.select2-dropdown-open.select2-drop-above {
   .select2-choice {
-    border-color: $border-white-normal;
+    border-color: $gray-darkest;
     outline: 0;
-    background-image: none;
-    background-color: $white-dark;
-    box-shadow: $gl-btn-active-gradient;
   }
 }
 
@@ -131,28 +122,14 @@
       }
     }
   }
-
-  &.select2-container-active .select2-choices,
-  &.select2-dropdown-open .select2-choices {
-    border-color: $border-white-normal;
-    box-shadow: $gl-btn-active-gradient;
-  }
 }
 
 .select2-drop-active {
-  margin-top: 6px;
+  margin-top: $dropdown-vertical-offset;
   font-size: 14px;
 
-  &.select2-drop-above {
-    margin-bottom: 8px;
-  }
-
   .select2-results {
     max-height: 350px;
-
-    .select2-highlighted {
-      background: $gl-primary;
-    }
   }
 }
 
@@ -186,19 +163,35 @@
   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: 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;
+  }
 }
 
 .ajax-users-select {
@@ -265,56 +258,10 @@
   min-width: 250px !important;
 }
 
-// TODO: change global style
-.ajax-project-dropdown,
-.ajax-users-dropdown,
-body[data-page="projects:edit"] #select2-drop,
-body[data-page="projects:new"] #select2-drop,
-body[data-page="projects:merge_requests:edit"] #select2-drop,
-body[data-page="projects:blob:new"] #select2-drop,
-body[data-page="profiles:show"] #select2-drop,
-body[data-page="admin:groups:show"] #select2-drop,
-body[data-page="projects:issues:show"] #select2-drop,
-body[data-page="projects:blob:edit"] #select2-drop {
-  &.select2-drop {
-    border: 1px solid $dropdown-border-color;
-    border-radius: $border-radius-base;
-    color: $gl-text-color;
-  }
-
-  &.select2-drop-above {
-    border-top: none;
-    margin-top: -4px;
-  }
-
-  .select2-results {
-    .select2-no-results,
-    .select2-searching,
-    .select2-ajax-error,
-    .select2-selection-limit {
-      background: transparent;
-    }
-
-    .select2-result {
-      padding: 0 1px;
-
-      .select2-match {
-        font-weight: $gl-font-weight-bold;
-        text-decoration: none;
-      }
-
-      .select2-result-label {
-        padding: #{$gl-padding / 2} $gl-padding;
-      }
-
-      &.select2-highlighted {
-        background-color: transparent !important;
-        color: $gl-text-color;
-
-        .select2-result-label {
-          background-color: $dropdown-item-hover-bg;
-        }
-      }
-    }
+.select2-result-selectable,
+.select2-result-unselectable {
+  .select2-match {
+    font-weight: $gl-font-weight-bold;
+    text-decoration: none;
   }
 }