diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index cc6725e9a5..d51f908e59 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -607,13 +607,17 @@ #available-menu-items-search .clear-results { position: absolute; - top: 20px; + top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( 4 is ( 28 input height - 20 button height ) / 2 ) */ right: 20px; width: 20px; height: 20px; + padding: 0; + border: 0; cursor: pointer; + background: none; color: #a00; text-decoration: none; + outline: 0; } #available-menu-items-search .clear-results, @@ -625,9 +629,14 @@ display: block; } +.ie8 #available-menu-items-search.loading .clear-results:before { + content: ""; /* help IE8 redraw the pseudo element */ +} + #available-menu-items-search .clear-results:before { content: "\f335"; font: normal 20px/1 dashicons; + vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -639,9 +648,9 @@ #available-menu-items-search .spinner { position: absolute; - top: 20px; - margin: 0 !important; + top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( ( 28 input height - 20 button height ) / 2 ) */ right: 20px; + margin: 0 !important; } /* search results list */ @@ -840,10 +849,19 @@ li.assigned-to-menu-location .add-new-menu-item { #available-menu-items #available-menu-items-search .accordion-section-content { top: 63px; } + + #available-menu-items-search .spinner, + #available-menu-items-search .clear-results { + top: 20px; /* 12 container padding +1 input margin +1 input border +5.5 ( 5.5 rounded to 6 is ( 31 input height - 20 button height ) / 2 ) */ + } } @media screen and ( max-width: 640px ) { #available-menu-items #available-menu-items-search .accordion-section-content { top: 133px; } + + #available-menu-items-search .clear-results { + top: 90px; /* 70 section title height + 12 container padding +1 input margin +1 input border +5.5 ( 5.5 rounded to 6 is ( 31 input height - 20 button height ) / 2 ) */ + } } diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js index d27f57c4cf..db931cd60c 100644 --- a/src/wp-admin/js/customize-nav-menus.js +++ b/src/wp-admin/js/customize-nav-menus.js @@ -142,16 +142,8 @@ } ); // Clear the search results. - $( '.clear-results' ).on( 'click keydown', function( event ) { - if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only - return; - } - - event.preventDefault(); - - $( '#menu-items-search' ).val( '' ).focus(); - event.target.value = ''; - self.search( event ); + $( '.clear-results' ).on( 'click', function() { + self.$search.val( '' ).focus().trigger( 'keyup' ); } ); this.$el.on( 'input', '#custom-menu-item-name.invalid, #custom-menu-item-url.invalid', function() { @@ -208,15 +200,11 @@ $otherSections.fadeOut( 100 ); $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' ); $searchSection.addClass( 'open' ); - $searchSection.find( '.clear-results' ) - .prop( 'tabIndex', 0 ) - .addClass( 'is-visible' ); + $searchSection.find( '.clear-results' ).addClass( 'is-visible' ); } else if ( '' === event.target.value ) { $searchSection.removeClass( 'open' ); $otherSections.show(); - $searchSection.find( '.clear-results' ) - .prop( 'tabIndex', -1 ) - .removeClass( 'is-visible' ); + $searchSection.find( '.clear-results' ).removeClass( 'is-visible' ); } this.searchTerm = event.target.value; diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php index 4bb112b320..d84ee9e936 100644 --- a/src/wp-includes/class-wp-customize-nav-menus.php +++ b/src/wp-includes/class-wp-customize-nav-menus.php @@ -761,8 +761,8 @@ final class WP_Customize_Nav_Menus { - +