diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss index d4057b6c644646e4b1824e0fe646f0cb93b55bb9..2906601423177179ef8f9866f2fe34c5f2344628 100644 --- a/resources/assets/stylesheets/scss/globalsearch.scss +++ b/resources/assets/stylesheets/scss/globalsearch.scss @@ -20,12 +20,9 @@ @include square(16px); margin-left: -22px; vertical-align: middle; - - opacity: 0; - transition: opacity $transition-duration; } - &.has-value #globalsearch-clear { - opacity: 1; + &:not(.has-value) #globalsearch-clear { + display: none; } // The actual search input @@ -284,10 +281,6 @@ html.responsive-display { top: calc($bar-bottom-container-height + $padding); width: calc(100vw - (2 * $padding)); } - - #globalsearch-clear { - opacity: 1; - } } } html:not(.size-large) { diff --git a/templates/globalsearch/searchbar.php b/templates/globalsearch/searchbar.php index beb4ba22baadea25f0d7e972e5b1cb441e35024a..93a8ab512247879ea2601880b65cbdee74e0a781 100644 --- a/templates/globalsearch/searchbar.php +++ b/templates/globalsearch/searchbar.php @@ -1,13 +1,14 @@ <div id="globalsearch-searchbar" role="search" aria-label="<?= _('Globale Suche') ?>"> <input class="hidden-small-down" type="text" name="globalsearchterm" id="globalsearch-input" placeholder="<?= _('Was suchen Sie?') ?>" role="searchbox"> - <?= Icon::create('decline', Icon::ROLE_INACTIVE)->asImg([ - 'id' => 'globalsearch-clear', - 'class' => 'hidden-small-down' + <?= Icon::create('decline', Icon::ROLE_INACTIVE)->asInput([ + 'id' => 'globalsearch-clear', + 'class' => 'hidden-small-down', + 'alt' => _('Suche zurücksetzen'), ]) ?> <?= Icon::create('search', Icon::ROLE_INFO_ALT)->asInput([ - 'id' => 'globalsearch-icon', - 'aria-label' => _('Suche starten') + 'id' => 'globalsearch-icon', + 'alt' => _('Suche starten') ]) ?> <div id="globalsearch-list"> <a href="#" id="globalsearch-togglehints" data-toggle-text="<?= _('Tipps ausblenden') ?>">