From f529ff10c39b3a6e33e5ba4079ee4695f13c2349 Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Tue, 7 May 2019 00:39:48 +0200
Subject: [PATCH] Making mediawiki.ui button mixin available for importing
 globally.

Moves the button color mixin into a separate file in the
mediawiki.less/mediawiki.ui folder, making it globally available
to other extensions and skins.

Initially created to make this mixin available to the Minerva skin
for use on the AMC history page on mobile.

Bug: T219895
Change-Id: I2bcf98fcd8d1b126e6d6c8746909e9921658a2b0
---
 .../mediawiki.ui/mixins.buttons.less          | 46 +++++++++++++++++++
 .../src/mediawiki.ui/components/buttons.less  | 43 +----------------
 2 files changed, 47 insertions(+), 42 deletions(-)
 create mode 100644 resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less
new file mode 100644
index 0000000000..9ee92b2654
--- /dev/null
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less
@@ -0,0 +1,46 @@
+// Common button mixins for MediaWiki
+//
+// Helper mixins used to create button styles. this file is importable
+// by all less files via `@import 'mediawiki.mixins.buttons';`.
+
+/* stylelint-disable selector-class-pattern */
+
+// Primary buttons mixin
+.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
+	background-color: @bgColor;
+	color: #fff;
+	// border of the same color as background so that light background and
+	// dark background buttons are the same height and width
+	border: 1px solid @bgColor;
+
+	&:hover {
+		background-color: @highlightColor;
+		border-color: @highlightColor;
+	}
+
+	&:focus {
+		box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
+	}
+
+	&:active,
+	&.is-on {
+		background-color: @activeColor;
+		border-color: @activeColor;
+		box-shadow: none;
+	}
+
+	&:disabled {
+		background-color: @colorGray12;
+		color: #fff;
+		border-color: @colorGray12;
+
+		// Make sure disabled buttons don't have hover and active states
+		&:hover,
+		&:active {
+			background-color: @colorGray12;
+			color: #fff;
+			border-color: @colorGray12;
+			box-shadow: none;
+		}
+	}
+}
diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index a85ecd7e23..e58cb1e4e1 100644
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -1,50 +1,9 @@
 @import 'mediawiki.mixins';
+@import 'mediawiki.ui/mixins.buttons';
 @import 'mediawiki.ui/variables';
 
 /* stylelint-disable selector-class-pattern */
 
-// Buttons
-// Helper mixins
-// Primary buttons mixin
-.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
-	background-color: @bgColor;
-	color: #fff;
-	// border of the same color as background so that light background and
-	// dark background buttons are the same height and width
-	border: 1px solid @bgColor;
-
-	&:hover {
-		background-color: @highlightColor;
-		border-color: @highlightColor;
-	}
-
-	&:focus {
-		box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
-	}
-
-	&:active,
-	&.is-on {
-		background-color: @activeColor;
-		border-color: @activeColor;
-		box-shadow: none;
-	}
-
-	&:disabled {
-		background-color: @colorGray12;
-		color: #fff;
-		border-color: @colorGray12;
-
-		// Make sure disabled buttons don't have hover and active states
-		&:hover,
-		&:active {
-			background-color: @colorGray12;
-			color: #fff;
-			border-color: @colorGray12;
-			box-shadow: none;
-		}
-	}
-}
-
 // All buttons start with `.mw-ui-button` class, modified by other classes.
 // It can be any element.  Due to a lack of a CSS reset, the exact styling of
 // the button depends on what type of element is used.
-- 
2.20.1