Makes autocomplete dropdown look the same as others

6 files changed, 62 insertions, 25 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 0d967552a74..1810779c40a 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -300,7 +300,7 @@ class GitLabDropdown
 
   noResults: ->
     html = "<li>"
-    html += "<a href='#' class='dropdown-menu-empty-link is-focused'>"
+    html += "<a class='dropdown-menu-empty-link is-focused'>"
     html += "No matching results."
     html += "</a>"
     html += "</li>"
diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
index 0f033245e09..e6a2990ab5b 100644
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ b/app/assets/javascripts/search_autocomplete.js.coffee
@@ -260,6 +260,6 @@ class @SearchAutocomplete
 
   restoreMenu: ->
     html = "<ul>
-              <li><a class='is-focused'>Loading...</a></li>
+              <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li>
             </ul>"
     @dropdownContent.html(html)
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 8caadda2852..182c06eba66 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -42,7 +42,7 @@
   font-size: 15px;
   text-align: left;
   border: 1px solid $dropdown-toggle-border-color;
-  border-radius: 2px;
+  border-radius: $dropdown-border-radius;
   outline: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -75,12 +75,12 @@
   width: 240px;
   margin-top: 2px;
   margin-bottom: 0;
-  padding: 10px;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: normal;
+  padding: 10px 0;
   background-color: $dropdown-bg;
   border: 1px solid $dropdown-border-color;
-  border-radius: $border-radius-base;
+  border-radius: $dropdown-border-radius;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
 
   &.is-loading {
@@ -101,9 +101,17 @@
   li {
     text-align: left;
     list-style: none;
+    padding: 0 10px;
   }
 
   .divider {
+    height: 1px;
+    margin: 8px 10px;
+    padding: 0;
+    background-color: $dropdown-divider-color;
+  }
+
+  .separator {
     width: 100%;
     height: 1px;
     margin-top: 8px;
@@ -137,6 +145,17 @@
       }
     }
   }
+
+  .dropdown-header {
+    color: $dropdown-header-color;
+    font-size: 13px;
+    line-height: 22px;
+    padding: 0 10px 10px;
+  }
+
+  .separator + .dropdown-header {
+    padding-top: 2px;
+  }
 }
 
 .dropdown-menu-paging {
@@ -154,6 +173,10 @@
     .dropdown-menu-back {
       display: block;
     }
+
+    .dropdown-content {
+      padding: 0 10px;
+    }
   }
 }
 
@@ -218,20 +241,11 @@
   }
 }
 
-.dropdown-header {
-  padding-left: 5px;
-  padding-right: 5px;
-  color: $dropdown-header-color;
-  font-size: 13px;
-  line-height: 22px;
-}
 
 .dropdown-title {
   position: relative;
-  margin-bottom: 10px;
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-bottom: 10px;
+  padding: 0 0 15px;
+  margin: 0 10px 10px;
   font-weight: 600;
   line-height: 1;
   text-align: center;
@@ -257,21 +271,26 @@
 }
 
 .dropdown-menu-close {
-  right: 0;
+  right: 7px;
+  width: 20px;
+  height: 20px;
+  top: -1px;
 }
 
 .dropdown-menu-back {
-  left: 0;
+  left: 7px;
+  top: 2px;
 }
 
 .dropdown-input {
   position: relative;
   margin-bottom: 10px;
+  padding: 0 10px;
 
   .fa {
     position: absolute;
     top: 10px;
-    right: 10px;
+    right: 20px;
     color: #c7c7c7;
     font-size: 12px;
     pointer-events: none;
@@ -281,6 +300,9 @@
     display: none;
     cursor: pointer;
     pointer-events: all;
+    right: 22px;
+    top: 9px;
+    font-size: 14px;
   }
 
   &.has-value {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 15c2d02f4ac..99307e7de02 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -66,7 +66,7 @@ $header-height: 58px;
 $fixed-layout-width: 1280px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: #e62958;
-$border-radius-default: 3px;
+$border-radius-default: 2px;
 $btn-transparent-color: #8f8f8f;
 $ssh-key-icon-color: #8f8f8f;
 $ssh-key-icon-size: 18px;
@@ -166,6 +166,7 @@ $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif
 /*
 * Dropdowns
 */
+$dropdown-border-radius: 2px;
 $dropdown-width: 300px;
 $dropdown-bg: #fff;
 $dropdown-link-color: #555;
@@ -178,7 +179,7 @@ $dropdown-header-color: #959494;
 $dropdown-title-btn-color: #bfbfbf;
 $dropdown-input-color: #555;
 $dropdown-input-focus-border: rgb(58, 171, 240);
-$dropdown-input-focus-shadow: rgba(#000, .2);
+$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
 $dropdown-loading-bg: rgba(#fff, .6);
 
 $dropdown-toggle-bg: #fff;
@@ -198,6 +199,8 @@ $award-emoji-new-btn-icon-color: #dcdcdc;
 /*
  * Search Box
  */
+$search-input-border-color: $dropdown-input-focus-border;
+$search-input-focus-shadow-color: $dropdown-input-focus-shadow;
 $search-input-width: $dropdown-width;
 $location-badge-color: #aaa;
 $location-badge-bg: $gray-normal;
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index e41be4d502a..7525db891fc 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -109,12 +109,23 @@
     .dropdown-menu {
       top: 30px;
       left: -5px;
+      padding: 0;
+
+      ul {
+        padding: 10px 0;
+      }
+    }
+
+    .dropdown-content {
+      max-height: 300px;
     }
   }
 
   &.search-active {
     form {
       @extend .form-control:focus;
+      border-color: $dropdown-input-focus-border;
+      box-shadow: 0 0 4px $search-input-focus-shadow-color;
     }
 
     .location-badge {
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index a7783365814..9d4ab9847a8 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -16,9 +16,10 @@
           = search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off',  data: { toggle: 'dropdown' }
           .dropdown-menu.dropdown-select
             = dropdown_content do
-              %li
-                %a.is-focused
-                  Loading...
+              %ul
+                %li
+                  %a.is-focused.dropdown-menu-empty-link
+                    Loading...
             = dropdown_loading
         %i.search-icon
         %i.clear-icon.js-clear-input