Styling and RTL style fixes for user/site autocomplete. Props ocean90, helenyhou. fixes #20584

git-svn-id: http://core.svn.wordpress.org/trunk@20705 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors-classic.dev.css

@@ -48,6 +48,22 @@ select {
 	color: #000;
 }
 
+textarea:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="file"]:focus,
+input[type="button"]:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+select:focus {
+	border-color: #d1e5ee;
+}
+
 kbd,
 code {
 	background: #eaeaea;
@@ -76,7 +92,8 @@ a.page-numbers:hover {
 
 body,
 #wpbody,
-.form-table .pre {
+.form-table .pre,
+.ui-autocomplete li a {
 	color: #333;
 }
 
@@ -315,6 +332,15 @@ td.help {
 	color: #9a9a9a;
 }
 
+.ui-autocomplete {
+	background-color: #eff8ff;
+	border-color: #d1e5ee;
+}
+
+.ui-autocomplete li a.ui-state-hover {
+	background-color: #def1ff;
+}
+
 .post-com-count {
 	background-image: url(../images/bubble_bg.gif);
 	color: #fff;

wp-admin/css/colors-fresh.dev.css

@@ -87,7 +87,8 @@ a.page-numbers:hover {
 
 body,
 #wpbody,
-.form-table .pre {
+.form-table .pre,
+.ui-autocomplete li a {
 	color: #333;
 }
 
@@ -322,6 +323,15 @@ td.help {
 	color: #9a9a9a;
 }
 
+.ui-autocomplete {
+	background-color: #efefef;
+	border-color: #bbb;
+}
+
+.ui-autocomplete li a.ui-state-hover {
+	background-color: #ddd;
+}
+
 .post-com-count {
 	background-image: url(../images/bubble_bg.gif);
 	color: #fff;

wp-admin/css/wp-admin-rtl.dev.css

@@ -117,6 +117,18 @@ input[type=password] {
 	direction: ltr;
 }
 
+input[type="text"].ui-autocomplete-loading {
+	background: transparent url('../images/loading.gif') no-repeat left center;
+}
+
+ul#add-to-blog-users {
+	margin: 0 14px 0 0;
+}
+
+.ui-autocomplete li {
+	text-align: right;
+}
+
 /*------------------------------------------------------------------------------
   3.0 - Actions
 ------------------------------------------------------------------------------*/

wp-admin/css/wp-admin.dev.css

@@ -874,21 +874,29 @@ ul#add-to-blog-users {
 	margin: 0 0 0 14px;
 }
 
+.ui-autocomplete-input.open {
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
 .ui-autocomplete {
 	padding: 0;
 	margin: 0;
 	list-style: none;
 	position: absolute;
 	z-index: 10000;
+	border-bottom-right-radius: 3px;
+	border-bottom-left-radius: 3px;
 	border-width: 1px;
 	border-style: solid;
+	border-top: none;
 
-	background-color: #ececec;
+	background-color: #efefef;
-	border-color: gray;
+	border-color: #bbb;
 }
 
 .ui-autocomplete li {
-	padding: 2px 5px;
+	margin-bottom: 0;
 	white-space: nowrap;
 	text-align: left;
 	color: #101010;
@@ -897,12 +905,12 @@ ul#add-to-blog-users {
 .ui-autocomplete li a {
 	display: block;
 	height: 100%;
-	padding: 2px 5px;
+	padding: 4px 10px;
 	color: #333;
 }
 
 .ui-autocomplete li a.ui-state-hover {
-	background-color: #f0f0b8;
+	background-color: #ddd;
 	cursor: pointer;
 }
 

wp-admin/js/site-search.dev.js

@@ -2,6 +2,8 @@ jQuery( function($) {
 	$( '#site-search-input' ).autocomplete({
 		source:   ajaxurl + '?action=autocomplete-site',
 		delay:    500,
-		minLength: 2
+		minLength: 2,
+		open: function(e, ui) { $(this).addClass('open'); },
+		close: function(e, ui) { $(this).removeClass('open'); }
 	});
 });

wp-admin/js/user-search.dev.js

@@ -4,18 +4,24 @@ jQuery( function($) {
 	$( '#adduser-email, #newuser' ).autocomplete({
 		source:   ajaxurl + '?action=autocomplete-user&autocomplete_type=add' + id,
 		delay:    500,
-		minLength: 2
+		minLength: 2,
+		open: function(e, ui) { $(this).addClass('open'); },
+		close: function(e, ui) { $(this).removeClass('open'); }
 	});
 
 	$( '#user-search-input' ).autocomplete({
 		source:   ajaxurl + '?action=autocomplete-user&autocomplete_type=search' + id,
 		delay:    500,
-		minLength: 2
+		minLength: 2,
+		open: function(e, ui) { $(this).addClass('open'); },
+		close: function(e, ui) { $(this).removeClass('open'); }
 	});
 
 	$( '#all-user-search-input' ).autocomplete({
 		source:   ajaxurl + '?action=autocomplete-user&autocomplete_type=search-all' + id,
 		delay:    500,
-		minLength: 2
+		minLength: 2,
+		open: function(e, ui) { $(this).addClass('open'); },
+		close: function(e, ui) { $(this).removeClass('open'); }
 	});
 });