From: Prateek Saxena <prtksxna@gmail.com>
Date: Mon, 22 Sep 2014 21:44:57 +0000 (-0700)
Subject: inputs.less: Change focus state
X-Git-Tag: 1.31.0-rc.0~12164^2
X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/exercices/modifier.php?a=commitdiff_plain;h=8b73bc2df9b94a692528cf692c5e111fc5d34b53;p=lhc%2Fweb%2Fwiklou.git

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
---

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;
 	}