From af8dfbc7ee22d1745f82cd59f34d1c1718306b71 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Fri, 23 Nov 2018 11:24:53 -0800
Subject: [PATCH] mediawiki.ui: Move remaining mixin to buttons.less; remove
 mixins.less

mediawiki.ui mixins are arbitrarily increasing code complexity.
Moving the remaining primary button mixin to the corresponding
buttons.less file and removing mixins.less as logical consequence.

Change-Id: I1299e210a7c8a403e859915bfed3ebecbf1f2f14
---
 .../mediawiki.less/mediawiki.ui/mixins.less   | 44 -----------------
 .../src/mediawiki.ui/components/anchors.less  |  1 -
 .../src/mediawiki.ui/components/buttons.less  | 47 +++++++++++++++++--
 .../src/mediawiki.ui/components/forms.less    |  1 -
 .../src/mediawiki.ui/components/inputs.less   |  1 -
 .../src/mediawiki.ui/components/text.less     |  1 -
 6 files changed, 44 insertions(+), 51 deletions(-)
 delete mode 100644 resources/src/mediawiki.less/mediawiki.ui/mixins.less

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
deleted file mode 100644
index 44fd1ee37c..0000000000
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ /dev/null
@@ -1,44 +0,0 @@
-// ----------------------------------------------------------------------------
-// Button styling
-// ----------------------------------------------------------------------------
-
-.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,
-	&.mw-ui-checked {
-		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,
-		&.mw-ui-checked {
-			background-color: @colorGray12;
-			color: #fff;
-			border-color: @colorGray12;
-			box-shadow: none;
-		}
-	}
-}
diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less
index 8e97c3edbe..4de2451124 100644
--- a/resources/src/mediawiki.ui/components/anchors.less
+++ b/resources/src/mediawiki.ui/components/anchors.less
@@ -1,6 +1,5 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 // Helpers
 .mixin-mw-ui-anchor-styles( @mainColor ) {
diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 4a0adbc572..ecdcc467de 100644
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -1,10 +1,51 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 // Buttons
-//
-// All buttons start with mw-ui-button class, modified by other classes.
+// 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,
+	&.mw-ui-checked {
+		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,
+		&.mw-ui-checked {
+			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.
 // There are two kinds of buttons, the default is a "Call to Action" with an obvious border
diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less
index a018d4e3ab..18ac318878 100644
--- a/resources/src/mediawiki.ui/components/forms.less
+++ b/resources/src/mediawiki.ui/components/forms.less
@@ -2,7 +2,6 @@
 
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 // --------------------------------------------------------------------------
 // Layouts
diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 4b8b1ee2ac..55d15b167f 100644
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -2,7 +2,6 @@
 
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 // Text inputs
 //
diff --git a/resources/src/mediawiki.ui/components/text.less b/resources/src/mediawiki.ui/components/text.less
index a07aa684ce..e2264c6749 100644
--- a/resources/src/mediawiki.ui/components/text.less
+++ b/resources/src/mediawiki.ui/components/text.less
@@ -1,6 +1,5 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 /*
 Text & Anchors
-- 
2.20.1