diff --git a/assets/css/full-screen-morphing-search.css b/assets/css/full-screen-morphing-search.css index bc087ea..1fc2d6d 100644 --- a/assets/css/full-screen-morphing-search.css +++ b/assets/css/full-screen-morphing-search.css @@ -73,6 +73,7 @@ height: 100%; font-style: italic; color: #ec5a62; + outline: none; /* Using ID '#morphsearch' to avoid using !important */ } @@ -158,6 +159,17 @@ input[type="search"] { .morphsearch-submit:hover { background-color: transparent; box-shadow: none; + background-image: none; + border: none; + padding: 0; +} + +.morphsearch-submit:active { + background-color: transparent; + box-shadow: none; + background-image: none; + border: none; + padding: 0; } /* 3- Hidding the Morphing Search Page once the .close class is added to the main div */ @@ -219,6 +231,10 @@ input[type="search"] { color: #333; margin-top: 4.5em; width: 100%; + /* Firefox: old themes */ + width: -moz-available; + /* Chrome: old themes */ + width: -webkit-fill-available; height: 0; overflow: hidden; padding: 0 10.5%; diff --git a/assets/js/full-screen-morphing-search.js b/assets/js/full-screen-morphing-search.js index 1e81894..d8434a8 100644 --- a/assets/js/full-screen-morphing-search.js +++ b/assets/js/full-screen-morphing-search.js @@ -2,7 +2,7 @@ ( function( $ ) { // Display the Full Screen search when The user focuses on a search field. - $( 'form[role=search] input' ).on( 'focus', function( event ) { + $( 'form[role=search] input, form input[id=s]' ).on( 'focus', function( event ) { // Prevent the default action. event.preventDefault(); @@ -13,7 +13,7 @@ * 1- Focus on the Full Screen Morphing Search Input Field, but not if the site is being previewed in the Customizer. * This first decision was taken because of weird behaviour in Chrome and Edge... * 2- Focusing on the input of Full Screen Morphing Search Input Field by a setTimeout() to avoid a recursive function. - * The main function is called upon 'focus' on any $('form[role=search] input'), + * The main function is called upon 'focus' on any $( 'form[role=search] input, form input[id=s]' ), * so if we focus directly on the .morphsearch-input it will be a recursive function * since the two inputs are in a 'form[role=search]' ! * Recursive function :@see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Too_much_recursion @@ -22,8 +22,8 @@ * */ if (!fsmsp_vars.fsmsp_is_customize_preview) { - setTimeout(function () { - $('#morphsearch > form > input.morphsearch-input').focus(); + setTimeout( function() { + $( '#morphsearch > form > input.morphsearch-input' ).focus(); }, 500); } } ); @@ -34,6 +34,7 @@ event.preventDefault(); // Hide the Morphing Search Page. + $( 'form input[id=s]' ).blur(); $( '.morphsearch' ).removeClass( 'open' ); } ); @@ -44,20 +45,21 @@ * when we press the Esc button .morphsearch will close then reopen. * Since it's focus(), pressing on Esc will close it but send another focus() after 500ms ! * To prevent this behaviour when the Esc button is pressed, - * we blur() all $('form[role=search] input') including $('.morphsearch input.morphsearch-input'), + * we blur() all $( 'form[role=search] input, form input[id=s]' ) including $('.morphsearch input.morphsearch-input'), * then we removeClass('open') from $('.morphsearch'). * */ - $('.morphsearch').on('keydown', function (event) { - if (event.keyCode === 27 && !fsmsp_vars.fsmsp_is_customize_preview) { - $('form[role=search] input').blur(); - $('.morphsearch').removeClass('open'); + $( '.morphsearch' ).on( 'keydown' , function( event ) { + if ( event.keyCode === 27 && !fsmsp_vars.fsmsp_is_customize_preview ) { + $( 'form[role=search] input, form input[id=s]' ).blur(); + $( '.morphsearch' ).removeClass( 'open' ); } }); // Reset Morphing Search Input Value to Search... - $('input.search-field').val(''); + $( 'input.search-field' ).val(''); + // Output default options' values ! if ( fsmsp_vars.fsmsp_options_does_not_exists ) { // Output fsmsp_main_backgroung_color.