From: Prateek Saxena <prtksxna@gmail.com>
Date: Tue, 23 Sep 2014 23:20:42 +0000 (-0700)
Subject: buttons: Update focus state
X-Git-Tag: 1.31.0-rc.0~13695^2~2
X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/operations/?a=commitdiff_plain;h=3f4c39e6a945d95c6b47aa1f81dad73d1aad0fc6;p=lhc%2Fweb%2Fwiklou.git

buttons: Update focus state

Currently the hover and focus state are exactly the same. The hover
state is subtle and making it hard to navigate using a keyboard.

Now the buttons have a border when focused.

Bug: 62924
Change-Id: Ibd75f7caaf5f34d8bcc53381335a048cede26950
---

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index ec9888f27e..d3220cc06b 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -36,16 +36,21 @@
 .button-colors(@bgColor) {
 	background: @bgColor;
 
-	&:hover,
-	&:focus {
+	&:hover {
 		// The inner bottom bevel should match the active background color.
 		box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
 		border-bottom-color: mix(#000, @bgColor, 20%);
+	}
+
+	&:focus {
+		box-shadow:inset 0px 0px 0px 3px rgba(0, 0, 0, 20%);
+//		box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
 		outline: none;
 		// remove outline in Firefox
 		&::-moz-focus-inner {
 			border-color: transparent;
 		}
+
 	}
 
 	&:active,