Make project selection dropdown consistentwinh-projects-select-dropdown

3 files changed, 40 insertions, 2 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 5e768df972f..5f270e288ae 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -761,7 +761,7 @@
         &:hover,
         &:active,
         &:focus {
-          background-color: $gray-darker;
+          background-color: $dropdown-item-hover-bg;
           color: $gl-text-color;
         }
 
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 40e654f4838..f7a0b355bf1 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -264,3 +264,41 @@
 .ajax-users-dropdown {
   min-width: 250px !important;
 }
+
+// TODO: change global style
+.ajax-project-dropdown {
+  &.select2-drop {
+    color: $gl-text-color;
+  }
+
+  .select2-results {
+    .select2-no-results,
+    .select2-searching,
+    .select2-ajax-error,
+    .select2-selection-limit {
+      background: transparent;
+    }
+
+    .select2-result {
+      padding: 0 1px;
+
+      .select2-match {
+        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;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 3c109a5a929..225d116e9c7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -294,7 +294,7 @@ $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
 $dropdown-loading-bg: rgba(#fff, .6);
 $dropdown-chevron-size: 10px;
 $dropdown-toggle-active-border-color: darken($border-color, 14%);
-
+$dropdown-item-hover-bg: $gray-darker;
 
 /*
 * Filtered Search