From: Volker E <volker.e@wikimedia.org>
Date: Wed, 29 Jun 2016 13:01:32 +0000 (+0200)
Subject: mediawiki.ui: Improve focus states of primary buttons
X-Git-Tag: 1.31.0-rc.0~6494^2
X-Git-Url: https://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/banques/ajouter.php?a=commitdiff_plain;h=23b64f871a21ca362695eff1c69a62581aa56e44;p=lhc%2Fweb%2Fwiklou.git

mediawiki.ui: Improve focus states of primary buttons

Follow-up to T137658 in OOjs UI. Improving `:focus` states of primary
buttons to be more harmonious with normal buttons. Also normalizing
`padding` in Firefox, removing obsolete comment and minor clean-up.

Change-Id: I584644c47be73a9770ac487b2b738d0f8bdf69d1
---

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 12825dee72..f29897c598 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -15,7 +15,6 @@
 	cursor: pointer;
 	vertical-align: bottom;
 	line-height: normal;
-
 	font-weight: normal;
 
 	& > input[type="checkbox"],
@@ -37,25 +36,25 @@
 	background: @bgColor;
 
 	&:hover {
-		// The inner bottom bevel should match the active background color.
 		background-color: @highlightColor;
 	}
 
 	&:focus {
 		border-color: @colorWhite;
-		box-shadow: 0 0 0 1px @highlightColor;
+		box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px @colorWhite;
+		outline-width: 0;
 
-		outline: none;
-		// remove outline in Firefox
+		// Remove the inner border and padding in Firefox.
 		&::-moz-focus-inner {
 			border-color: transparent;
+			padding: 0;
 		}
 	}
 
 	&:active,
 	&.is-on,
 	&.mw-ui-checked {
-		background: @activeColor;
+		background-color: @activeColor;
 		box-shadow: none;
 	}
 }
@@ -95,7 +94,7 @@
 	text-shadow: 0 1px rgba(0, 0, 0, .1);
 
 	&:disabled {
-		background: @colorGray13;
+		background-color: @colorGray13;
 		border-color: @colorGray13;
 
 		// make sure disabled buttons don't have hover and active states
@@ -114,7 +113,7 @@
 
 	&:hover,
 	&:focus {
-		background: transparent;
+		background-color: transparent;
 		color: @textColor;
 	}