jquery-ui: fix autocomplete menu styling (#3671).

* Wrap menu items in a div.
* Replace ui-state-focus with ui-state-active.
* Make active items have a grey background.

ref: http://jqueryui.com/upgrade-guide/1.12/#require-wrappers-for-each-menu-item
ref: http://jqueryui.com/upgrade-guide/1.12/#use-consistent-styling-for-focused-and-active-items

app/assets/stylesheets/common/autocomplete.scss

@@ -1,6 +1,13 @@
 .ui-autocomplete {
   font-size: 0.9em;
-  z-index: 1000;
+
+  .ui-state-active {
+    border: none;
+    margin: 0 -1px;
+    background-color: #F0F0F0;
+    border-left: 1px solid #C5C5C5;
+    border-right: 1px solid #C5C5C5;
+  }
 
   .ui-menu-item a {
     padding: 1px .2em;
@@ -9,4 +16,4 @@
   .autocomplete-arrow {
     color: black;
   }
-}
+}

app/assets/stylesheets/common/erb/tags.scss.erb

@@ -1,5 +1,5 @@
 <% TagCategory.css_mapping.each do |category,cssmap| %>
-  .category-<%= category %> a, a.tag-type-<%= category %>, .ui-state-focus a.tag-type-<%= category %> {
+  .category-<%= category %> a, a.tag-type-<%= category %>, .ui-state-active a.tag-type-<%= category %> {
     color: <%= cssmap["color"] %>;
 
     &:hover {
@@ -8,7 +8,7 @@
   }
 <% end %>
 
-.category-banned a, a.tag-type-banned, .ui-state-focus a.tag-type-banned {
+.category-banned a, a.tag-type-banned, .ui-state-active a.tag-type-banned {
   color: black;
   background-color: red;
 }

app/assets/stylesheets/common/jquery_ui_custom.scss

@@ -57,3 +57,7 @@ div.ui-dialog {
     background: linear-gradient(#fefefe, #f0f0f0);
   }
 }
+
+.ui-front {
+  z-index: 1000;
+}