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

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 (file)
index 0000000..9ee92b2
--- /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 a85ecd7..e58cb1e 100644 (file)
--- 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.