Changeset 32074

Timestamp:

04/08/2015 04:07:51 PM (10 years ago)

Author:

helen

Message:

Toolbar: Search item consistency for focus state and IE8.

props afercia.
fixes #31322.

Location:

trunk/src/wp-includes

Files:

• css/admin-bar.css (modified) (8 diffs)
• js/admin-bar.js (modified) (1 diff)

trunk/src/wp-includes/css/admin-bar.css

@@ -283 +283 @@
 #wpadminbar li.hover .ab-icon:before,
 #wpadminbar li.hover .ab-item:before,
-#wpadminbar li:hover #adminbarsearch:before {
+#wpadminbar li:hover #adminbarsearch:before,
+#wpadminbar li #adminbarsearch.adminbar-focused:before {
     color: #00b9eb;
 }
@@ -388 +389 @@
 }
 
+#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar .ab-item {
+    white-space: nowrap;
+}
+
 #wpadminbar #wp-admin-bar-user-actions > li {
     margin-left: 16px;
@@ -437 +442 @@
 }
 
-#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
-    width: 16px;
+#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
+    width: auto;
     height: 16px;
     padding: 0;
@@ -448 +453 @@
     float: none;
     display: inline;
+}
+
+#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > a img {
+    width: auto;
 }
 
@@ -553 +562 @@
  * Search
  */
+#wpadminbar.ie8 #wp-admin-bar-search {
+    display: block;
+    min-width: 32px;
+}
 #wpadminbar #wp-admin-bar-search .ab-item {
     padding: 0;
@@ -562 +575 @@
     height: 32px;
     padding: 0 2px;
+    z-index: 1;
 }
 
@@ -582 +596 @@
     height: 24px;
     width: 24px;
+    max-width: none;
     padding: 0 3px 0 24px;
     margin: 0;
@@ -617 +632 @@
 
 #wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
-    margin-top: 4px;
-    background-color: #464646;
+    /* IE8 z-index bug with transparent / empty elements - fill in with an encoded transparent GIF */
+    background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7");
+}
+
+/* IE8 doesn't redraw the pseudo elements unless you make a change to the content */
+#wpadminbar.ie8 #adminbarsearch.adminbar-focused:before {
+    content: '\f179 '; /* extra space */
 }
 
 #wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
-    background-color: #fff;
+    background: #fff;
+    z-index: -1;
 }
 

trunk/src/wp-includes/js/admin-bar.js

@@ -150 +150 @@
         });
 
+        $( '#adminbar-search' ).on({
+            focus: function() {
+                $( '#adminbarsearch' ).addClass( 'adminbar-focused' );
+            }, blur: function() {
+                $( '#adminbarsearch' ).removeClass( 'adminbar-focused' );
+            }
+        } );
+
         // Empty sessionStorage on logging out
         if ( 'sessionStorage' in window ) {