From: Volker E <volker.e@wikimedia.org>
Date: Wed, 21 Nov 2018 19:44:49 +0000 (-0800)
Subject: mediawiki.ui: Let quiet button border remain
X-Git-Tag: 1.34.0-rc.0~3463^2
X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=commitdiff_plain;h=53dfff81e22c1708843f9767c6ce7a1e30f0dbda

mediawiki.ui: Let quiet button border remain

It's a better approach to let quiet button `border-width` remain for layout
predictability, only changing `border-color`.
Similar approach is taken in OOUI.
Also add `@border-width-base` variable similar to WikimediaUI so it
is easily replacible in in future.

Change-Id: I68d6bde72181004fcd8a0d3e0dee7d9d8e892eeb
---

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 1e078bd6f2..5119e4990d 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -35,7 +35,7 @@
 .button-colors( @bgColor, @highlightColor, @activeColor ) {
 	background-color: @bgColor;
 	color: @colorButtonText;
-	border: 1px solid @colorFieldBorder;
+	border-color: @colorFieldBorder;
 
 	// Make sure that `color` isn't inheriting from user-agent styles
 	&:visited {
diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index 731bd2d352..5affcb8656 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -78,6 +78,9 @@
 @borderColorInputBinaryChecked: @colorProgressive;
 @borderColorInputBinaryActive: @colorProgressiveActive;
 
+// Border widths
+@border-width-base: 1px;
+
 // Checked radio input border-width, equal to OOUI at 14px base font-size
 @borderWidthRadioChecked: 0.4285em;
 
diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index cef36d755f..9b4835d93e 100644
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -36,7 +36,9 @@
 	padding: 0.546875em 1em;
 	line-height: 1.286;
 	margin: 0;
+	border-style: solid;
 	border-radius: @borderRadius;
+	border-width: @border-width-base;
 	.box-sizing( border-box );
 
 	// Disable weird iOS styling
@@ -191,18 +193,20 @@
 	//
 	// Styleguide 2.1.3.
 	&.mw-ui-quiet {
-		background: transparent;
-		border: 0;
+		background-color: transparent;
 		.button-colors-quiet( @colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive );
+		border-color: transparent;
 
 		&:hover,
 		&:focus {
+			border-color: transparent;
 			box-shadow: none;
 		}
 
 		&:active,
 		&:disabled {
-			background: transparent;
+			background-color: transparent;
+			border-color: transparent;
 		}
 	}
 }