diff --git a/skins/elastic/styles/widgets/searchbar.less b/skins/elastic/styles/widgets/searchbar.less index 693b4201d..e87ee9556 100644 --- a/skins/elastic/styles/widgets/searchbar.less +++ b/skins/elastic/styles/widgets/searchbar.less @@ -67,14 +67,12 @@ } } -/* html.ie11 { - .searchbar, - .searchfilterbar { - a:before { + .searchbar { + a.button.filter:before, + a.button.search:before { line-height: 3.2; font-size: 1.25rem; } } } -*/ diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index 921433c81..f05a8eacf 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -914,7 +914,7 @@ function rcube_elastic_ui() return; } - if ($(this).is('.searchbar,.searchfilterbar')) { + if ($(this).is('.searchbar')) { padding += this.offsetWidth; } else { @@ -1214,8 +1214,7 @@ function rcube_elastic_ui() } form.hide(); // width:auto fixes search button position in Chrome - // reset padding set when the form is displayed - $(bar).css({width: 'auto', 'padding-left': 0})[is_search_pending() ? 'addClass' : 'removeClass']('active'); + $(bar).css('left', 'auto')[is_search_pending() ? 'addClass' : 'removeClass']('active'); button.css('display', 'block'); if (focus && rcube_event.is_keyboard(event)) { button.focus(); @@ -1233,12 +1232,11 @@ function rcube_elastic_ui() .prepend($('')) .append($('a.options').detach().removeClass('button').addClass('icon input-group-addon')) .append($('a.reset').detach().removeClass('button').addClass('icon input-group-addon')) - .append($('')); + .append($('')); // Display search form button.on('click', function() { - var margin = $(bar).css('right'); - $(bar).css({'padding-left': margin, width: '100%'}); + $(bar).css('left', 0); form.css('display', 'flex'); button.hide(); input.focus(); @@ -1284,11 +1282,12 @@ function rcube_elastic_ui() $('select', bar).wrap($('
')) .parent().prepend($('')) - .append($('').attr('title', rcmail.gettext('close'))); + .append($('') + .attr({title: rcmail.gettext('close'), href: '#'})); var select = $('select', bar), button = $('a.button.filter', bar), - all_elements = $('.input-group', bar), + form = $('.input-group', bar), is_filter_enabled = function() { var value = select.val(); return value && value != 'ALL'; @@ -1297,10 +1296,8 @@ function rcube_elastic_ui() if (button.is(':visible')) { return; } - all_elements.hide(); - // width:auto fixes search button position in Chrome - // reset padding set when the form is displayed - bar.css({width: 'auto', 'padding-left': 0})[is_filter_enabled() ? 'addClass' : 'removeClass']('active'); + form.hide(); + bar.css('left', 'auto')[is_filter_enabled() ? 'addClass' : 'removeClass']('active'); button.css('display', 'block'); if (focus && rcube_event.is_keyboard(event)) { button.focus(); @@ -1324,9 +1321,8 @@ function rcube_elastic_ui() // Display filter selection (with animation effect) button.on('click', function() { - var margin = $(bar).css('right'); - $(bar).css({'padding-left': margin, width: '100%'}); - all_elements.css('display', 'flex'); + $(bar).css('left', 0); + form.css('display', 'flex'); button.hide(); select.focus(); });