Provide focus styles only in overlay

Preventing double transition in search input focus by limiting styles
only to non-JS or when JavaScript enabled to the overlay.
Also introducing standard transition to smoothen it further.

Bug: T218154
Change-Id: I2344bfc7c4edc1941119565d7b113788e8713624
This commit is contained in:
Volker E 2019-04-02 18:44:26 -07:00
parent 23a0f5f78c
commit 1c2a354a78
1 changed files with 4 additions and 1 deletions

View File

@ -163,9 +163,12 @@ main {
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
// Keyboard focus is taken care of below at `.search-box .search:focus`.
outline: 0;
.transition( ~'border-color 250ms, box-shadow 250ms' );
}
.search-box .search:focus {
// Provide focus styles only in non-JS and overlay to prevent double transition.
.client-nojs .search-box .search:focus,
.search-overlay .search-box .search:focus {
border-color: @colorProgressive;
box-shadow: inset 0 0 0 1px @colorProgressive, 0 1px 1px rgba( 0, 0, 0, 0.05 );
}