Update dropdown menu style

5 files changed, 85 insertions, 37 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 949b8fc294a..28d29950fcf 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -70,6 +70,10 @@
 
   color: $gl-text-color;
 
+  &:focus:active {
+    outline: 0;
+  }
+
   &.btn-small,
   &.btn-sm {
     padding: 4px 10px;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index ea56d9e12a0..9ecb547b64f 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -56,6 +56,10 @@ hr {
   margin: $gl-padding 0;
 }
 
+.dropdown-menu {
+  margin: 6px 0 0;
+}
+
 .dropdown-menu > li > a {
   text-shadow: none;
 }
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 603d8be7823..bdc5a9cfab1 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -1,14 +1,19 @@
 /** Select2 selectbox style override **/
+.select2-container {
+  width: 100% !important;
+}
+
 .select2-container, .select2-container.select2-drop-above {
   .select2-choice {
-    background: #FFF;
+    background: #fff;
     border-color: $input-border;
+    border-color: $border-white-light;
     height: 35px;
     padding: $gl-vert-padding $gl-btn-padding;
     font-size: $gl-font-size;
     line-height: 1.42857143;
 
-    @include border-radius($input-border-radius);
+    @include border-radius($border-radius-default);
 
     .select2-arrow {
       width: auto;
@@ -39,14 +44,12 @@
 
 .select2-drop {
   @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
-  @include border-radius (0px);
-
-  padding: 16px;
-  border: none !important;
+  @include border-radius ($border-radius-default);
+  border: none;
 }
 
 .select2-results .select2-result-label {
-  padding: 9px;
+  padding: 10px 15px;
 }
 
 .select2-drop{
@@ -62,11 +65,27 @@
   color: #313236;
 }
 
+.select2-container-active {
+  .select2-choice, .select2-choices {
+    @include box-shadow(none);
+  }
+}
+
+.select2-dropdown-open {
+  .select2-choice {
+    border-color: $border-white-normal;
+    outline: 0;
+    background-image: none;
+    background-color: $white-dark;
+    @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
+  }
+}
+
 .select2-container-multi {
   .select2-choices {
-    @include border-radius($input-border-radius);
+    @include border-radius($border-radius-default);
     border-color: $input-border;
-    padding-left: $gl-padding / 2;
+    background: none;
 
     .select2-search-field input {
       padding: $gl-padding / 2;
@@ -82,9 +101,12 @@
       border-color: $input-border;
       color: $gl-text-color;
       line-height: 15px;
+      background-color: $background-color;
+      background-image: none;
 
       .select2-search-choice-close {
-        top: 5px;
+        top: 4px;
+        left: 3px;
       }
 
       &.select2-search-choice-focus {
@@ -92,28 +114,20 @@
       }
     }
   }
-}
 
-.select2-container-active {
-  .select2-choice, .select2-choices {
-    @include box-shadow(none);
+  &.select2-container-active .select2-choices,
+  &.select2-dropdown-open .select2-choices {
+    border-color: $border-white-normal;
+    @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
   }
 }
 
-.select2-dropdown-open {
-  .select2-choice, .select2-choices {
-    outline: 0;
-    background-image: none;
-    border-color: #d6dae2;
-    background-color: $white-dark;
-    @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
-  }
+.select2-container-multi .select2-choices .select2-search-choice {
 }
 
 .select2-drop-active {
-  border: 1px solid #BBB !important;
-  margin-top: 4px;
-  font-size: 13px;
+  margin-top: 6px;
+  font-size: 14px;
 
   &.select2-drop-above {
     margin-bottom: 8px;
@@ -127,16 +141,32 @@
   }
 }
 
-.select2-search input {
-  background: #fff image-url('select2.png') no-repeat 99% -22px;
+.select2-search {
+  padding: 15px 15px 5px;
+
+  .select2-drop-auto-width & {
+    padding: 15px 15px 5px;
+  }
 }
 
-.select2-search input.select2-active {
-  background: #fff image-url('select2-spinner.gif') no-repeat 99%;
+.select2-search input {
+  padding: 2px 25px 2px 5px;
+  background: #fff image-url('select2.png');
+  background-repeat: no-repeat;
+  background-position: calc(100% - 3px) -23px;
+  border: 1px solid $input-border;
+  @include border-radius($border-radius-default);
+  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
+
+  &:focus {
+    border-color: $input-border-focus;
+  }
 }
 
-.select2-container {
-  width: 100% !important;
+.select2-search input.select2-active {
+  background: #fff image-url('select2-spinner.gif');
+  background-repeat: no-repeat;
+  background-position: calc(100% - 5px) 4px;
 }
 
 /** Branch/tag selector **/
@@ -144,10 +174,19 @@
   width: 160px !important;
 }
 
-.ajax-users-dropdown, .ajax-project-users-dropdown {
-  .select2-search {
-    padding-top: 2px;
-  }
+.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;
 }
 
 .ajax-users-select {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 6673ec8dfa1..7ba97a4f007 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -31,7 +31,7 @@ $gl-padding-top:10px;
 $gl-avatar-size: 40px;
 $secondary-text: #7f8fa4;
 $error-exclamation-point: #E62958;
-$input-border-radius: 3px;
+$border-radius-default: 3px;
 
 /*
  * Color schema
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 2ac07209b02..a7a2b9bf293 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -32,6 +32,7 @@
   .cover-controls {
     .project-settings-dropdown {
       margin-left: 10px;
+      display: inline-block;
     }
   }
 
@@ -191,7 +192,7 @@
 
 .dropdown-menu {
   @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
-  @include border-radius ($input-border-radius);
+  @include border-radius ($border-radius-default);
 
   border: none;
   padding: 10px 0;