From 8b73bc2df9b94a692528cf692c5e111fc5d34b53 Mon Sep 17 00:00:00 2001 From: Prateek Saxena Date: Mon, 22 Sep 2014 14:44:57 -0700 Subject: [PATCH] inputs.less: Change focus state - Make focus state consistent across UI controls (analogous update for buttons is already merged and checkboxes coming soon). - Support for browsers that don't support box-shadow by making the border the same color. - Use a sine-out curve for the transition Bug: T73150 Change-Id: I24f33a40cd0126ae95698c2a46858a15f502ca5b --- resources/src/mediawiki.ui/components/inputs.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less index 9f3a77d9e4..72e66df81b 100644 --- a/resources/src/mediawiki.ui/components/inputs.less +++ b/resources/src/mediawiki.ui/components/inputs.less @@ -42,7 +42,7 @@ font-family: inherit; font-size: inherit; line-height: inherit; - .transition(~"border linear .2s, box-shadow linear .2s"); + .transition(~"border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)"); // Placeholder text styling must be set individually for each browser @winter &::-webkit-input-placeholder { // webkit @@ -67,8 +67,9 @@ } &:focus { - box-shadow: inset .45em 0 0 @colorProgressive; - border-color: @colorGrayDark; + box-shadow: inset 0 0 0 2px @colorProgressive; + // Color being used to match inset shadow, not semantic reasons + border-color: @colorProgressive; // Remove focus glow on input[type="search"] outline: 0; } -- 2.20.1