From 1c2a354a781dfdd9aa5bab5e3feb84c156f82341 Mon Sep 17 00:00:00 2001 From: Volker E Date: Tue, 2 Apr 2019 18:44:26 -0700 Subject: [PATCH] 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 --- resources/skins.minerva.base.styles/ui.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less index 2353c9739..b65b9269d 100644 --- a/resources/skins.minerva.base.styles/ui.less +++ b/resources/skins.minerva.base.styles/ui.less @@ -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 ); }