Merge branch 'issue_11874' into 'master'

Fixes dropdown appearance and makes it look accordingly to current design

Fixes #11874

See merge request !2920

6 files changed, 127 insertions, 56 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 5f193fa7434..50aa170d24c 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -7,7 +7,7 @@
   &:focus,
   &:active {
     outline: none;
-    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    @include box-shadow($gl-btn-active-background);
   }
 }
 
@@ -28,7 +28,7 @@
   }
 
   &:active {
-    @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
+    @include box-shadow ($gl-btn-active-background);
 
     background-color: $dark;
     border-color: $border-dark;
@@ -68,6 +68,12 @@
   @include btn-default;
   @include btn-white;
 
+  color: $gl-text-color;
+
+  &:focus:active {
+    outline: 0;
+  }
+
   &.btn-small,
   &.btn-sm {
     padding: 4px 10px;
@@ -130,6 +136,11 @@
   &.disabled {
     pointer-events: auto !important;
   }
+
+  .caret {
+    margin-left: 5px;
+    color: $gray-darkest;
+  }
 }
 
 .btn-block {
@@ -179,7 +190,7 @@
   }
 
   .active {
-    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    @include box-shadow($gl-btn-active-background);
 
     border: 1px solid #c6cacf !important;
     background-color: #e4e7ed !important;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 0ddbf612543..8f753f581bb 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/filters.scss b/app/assets/stylesheets/framework/filters.scss
index b7638c86bfa..eab41628677 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -21,10 +21,3 @@
     }
   }
 }
-
-.issues-filters,
-.issues_bulk_update {
-  .select2-container .select2-choice {
-    color: #444 !important;
-  }
-}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 3ee3443e349..7bf04e4ad74 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -1,49 +1,53 @@
 /** Select2 selectbox style override **/
+.select2-container {
+  width: 100% !important;
+}
+
 .select2-container, .select2-container.select2-drop-above {
   .select2-choice {
-    background: #FFF;
-    border-color: #DDD;
-    height: 36px;
-    padding: 6px $gl-padding;
+    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(2px);
+    @include border-radius($border-radius-default);
 
     .select2-arrow {
-      background: #FFF;
-      border-left: none;
-      padding-top: 5px;
+      background-image: none;
+      background-color: transparent;
+      border: none;
+      padding-top: 6px;
+      padding-right: 10px;
+
+      b {
+        @extend .caret;
+        color: $gray-darkest;
+      }
     }
 
     .select2-chosen {
-      color: $gl-text-color;
+      margin-right: 15px;
     }
 
-    &.select2-default {
-      .select2-chosen {
-        color: #999;
-      }
+    &:hover {
+      background-color: $gray-dark;
+      border-color: $border-white-normal;
+      color: $gl-text-color;
     }
   }
 }
 
-.select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice{
-  color: #7f8fa4;
-  border: 1px solid #e7e9ed;
-}
-
-
 .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{
@@ -56,15 +60,30 @@
 
 .select2-results li.select2-result-with-children > .select2-result-label {
   font-weight: 600;
-  color: #313236;
+  color: $gl-text-color;
+}
+
+.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($gl-btn-active-gradient);
+  }
 }
 
 .select2-container-multi {
   .select2-choices {
-    @include border-radius(2px);
+    @include border-radius($border-radius-default);
     border-color: $input-border;
-    background: white;
-    padding-left: $gl-padding / 2;
+    background: none;
 
     .select2-search-field input {
       padding: $gl-padding / 2;
@@ -76,14 +95,16 @@
 
     .select2-search-choice {
       margin: 8px 0 0 8px;
-      background: white;
       box-shadow: none;
       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 {
@@ -91,22 +112,25 @@
       }
     }
   }
+
+  &.select2-container-active .select2-choices,
+  &.select2-dropdown-open .select2-choices {
+    border-color: $border-white-normal;
+    @include box-shadow($gl-btn-active-gradient);
+  }
+}
+
+.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;
   }
 
-  .select2-search input {
-    background: #fafafa;
-    border-color: #DDD;
-  }
-
   .select2-results {
     max-height: 350px;
     .select2-highlighted {
@@ -115,8 +139,34 @@
   }
 }
 
-.select2-container {
-  width: 100% !important;
+.select2-search {
+  padding: 15px 15px 5px;
+
+  .select2-drop-auto-width & {
+    padding: 15px 15px 5px;
+  }
+}
+
+.select2-search input {
+  padding: 2px 25px 2px 5px;
+  background: #fff image-url('select2.png');
+  background-repeat: no-repeat;
+  background-position: right 0px bottom 6px;
+  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-search input.select2-active {
+  background-color: #fff;
+  background-image: image-url('select2-spinner.gif') !important;
+  background-repeat: no-repeat;
+  background-position: right 5px center !important;
+  background-size: 16px 16px !important;
 }
 
 /** Branch/tag selector **/
@@ -124,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 b8386362637..04db0da73d1 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -31,6 +31,7 @@ $gl-padding-top:10px;
 $gl-avatar-size: 40px;
 $secondary-text: #7f8fa4;
 $error-exclamation-point: #E62958;
+$border-radius-default: 3px;
 
 /*
  * Color schema
@@ -100,6 +101,8 @@ $gl-success: $green-normal;
 $gl-info: $blue-normal;
 $gl-warning: $orange-normal;
 $gl-danger: $red-normal;
+$gl-btn-active-background: rgba(0, 0, 0, 0.12);
+$gl-btn-active-gradient: inset 0 0 4px $gl-btn-active-background;
 
 /*
  * Commit Diff Colors
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 542ac896f6b..b86d1a98723 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;
     }
   }
 
@@ -186,10 +187,10 @@
 
 .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 (0px);
+  @include border-radius ($border-radius-default);
 
   border: none;
-  padding: 16px 0;
+  padding: 10px 0;
   font-size: 14px;
   font-weight: 100;