diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss index 9b0494ef40..bc2538d6b6 100644 --- a/src/bundle/Resources/public/scss/_global-search.scss +++ b/src/bundle/Resources/public/scss/_global-search.scss @@ -8,7 +8,7 @@ width: auto; .ibexa-icon { - fill: $ibexa-color-light; + fill: $ibexa-color-white; } } @@ -20,30 +20,46 @@ } &--search { - background: $ibexa-color-info-600; width: calculateRem(40px); height: calculateRem(40px); transform: translateX(calculateRem(8px)); &:hover { + background: $ibexa-color-info-600; box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 rgba($ibexa-color-info, 0.2); .ibexa-icon { fill: $ibexa-color-white; } } + + &:focus { + color: $ibexa-color-white; + background: $ibexa-color-info-600; + border-color: $ibexa-color-info-600; + box-shadow: 0 0 0 calculateRem(4px) rgba($ibexa-color-white, 0.2); + + .ibexa-icon { + fill: $ibexa-color-white; + } + } } - } - } - .ibexa-input--text:not(:focus):placeholder-shown + .ibexa-input-text-wrapper__actions .ibexa-input-text-wrapper__action-btn--search { - background-color: transparent; + &--clear { + &:focus { + border: none; + box-shadow: 0 0 0 calculateRem(4px) rgba($ibexa-color-white, 0.2); - &:hover { - box-shadow: none; + .ibexa-icon { + fill: $ibexa-color-white; + } + } + } + } - .ibexa-icon { - fill: $ibexa-color-info; + &:hover { + .ibexa-input { + border-color: $ibexa-color-info-600; } } } @@ -52,18 +68,51 @@ height: calculateRem(40px); padding: calculateRem(4px) calculateRem(56px) calculateRem(4px) calculateRem(16px); color: $ibexa-color-white; - border-color: $ibexa-color-info; background: rgba($ibexa-color-white, 0.1); - - &.ibexa-input--text:not(:focus):placeholder-shown { - border-color: transparent; - } + border-color: transparent; &.ibexa-input--text { &:not(:disabled) { - &:focus, &:hover { + box-shadow: none; border-color: $ibexa-color-info-600; + + & + .ibexa-input-text-wrapper__actions { + .ibexa-input-text-wrapper__action-btn--search { + background: transparent; + } + } + } + &:focus { + border-color: $ibexa-color-info-600; + background: rgba($ibexa-color-white, 0.1); + box-shadow: 0 0 0 calculateRem(4px) rgba($ibexa-color-white, 0.2); + + & + .ibexa-input-text-wrapper__actions { + .ibexa-input-text-wrapper__action-btn--search { + background: $ibexa-color-info-600; + } + } + } + + &:active, + &:not(:placeholder-shown) { + box-shadow: none; + border-color: $ibexa-color-info-600; + + & + .ibexa-input-text-wrapper__actions { + .ibexa-input-text-wrapper__action-btn--search { + background: $ibexa-color-info-600; + } + } + } + + &:not(:placeholder-shown):hover { + & + .ibexa-input-text-wrapper__actions { + .ibexa-input-text-wrapper__action-btn--search { + background: $ibexa-color-info-600; + } + } } } } diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig index a6bb7ec7cf..85caff913f 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig @@ -33,7 +33,7 @@ tabindex="-1" {% if should_clear_button_send_form %}data-send-form-after-clearing{% endif %} > - +