Extract default mediawiki.ui button styles into mixins

Move the default mediawiki.ui button styles into two mixins:
.mw-ui-button() and .mw-ui-button-states().

Change name of .button-colors-primary() mixin to .mw-ui-button-colors-primary().

These mixins are globally available and originally intended for use
on special pages in the MinervaNeue skin.

Bug: T219895
Change-Id: Ibeed271e143c062c6bfc48a6c4db74635dbc40e2

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less
index 9ee92b2..360ae79 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less
@@ -1,12 +1,98 @@
-// Common button mixins for MediaWiki
+// Mediawiki.ui button mixins for MediaWiki (deprecated)
 //
-// Helper mixins used to create button styles. this file is importable
-// by all less files via `@import 'mediawiki.mixins.buttons';`.
+// Helper mixins used to create button styles. This file is importable
+// by all LESS files via `@import 'mediawiki.ui/mixins.buttons';`.
 
 /* stylelint-disable selector-class-pattern */
 
-// Primary buttons mixin
-.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
+// Default button mixin.
+.mw-ui-button() {
+       // Container layout
+       display: inline-block;
+       .box-sizing( border-box );
+       min-width: 4em;
+       max-width: 28.75em; // equivalent to 460px, @see T95367
+       margin: 0;
+       padding: 0.57142857em 0.9375em; // equivalent to `8px 12px`
+       border: @border-width-base @border-style-base @border-color-base;
+       border-radius: @borderRadius;
+       cursor: pointer;
+       // Ensure that buttons and inputs are nicely aligned when they have differing heights
+       vertical-align: middle;
+       // Inherit the font rather than apply user agent stylesheet (T72072)
+       font-family: inherit;
+       font-size: 1em;
+       font-weight: bold;
+       line-height: 1;
+       text-align: center;
+       // Disable weird iOS styling
+       -webkit-appearance: none;
+       // IE 6 & 7 hack
+       // https://stackoverflow.com/a/5838575/365238
+       *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+       zoom: 1;
+}
+
+// Mixin for button interaction states.
+.mw-ui-button-states() {
+       // Make sure that `color` isn't inheriting from user-agent styles
+       &:visited {
+               color: @colorButtonText;
+       }
+
+       &:hover {
+               background-color: @background-color-base;
+               color: @colorGray4;
+               border-color: @colorGray10;
+       }
+
+       &:focus {
+               background-color: @background-color-base;
+               // Make sure that `color` isn't inheriting from user-agent styles
+               color: @colorButtonText;
+               border-color: @colorProgressive;
+               box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @background-color-base;
+               outline-width: 0;
+
+               // Remove the inner border and padding in Firefox.
+               &::-moz-focus-inner {
+                       border-color: transparent;
+                       padding: 0;
+               }
+       }
+
+       &:active,
+       &.is-on {
+               background-color: @colorGray12;
+               color: @colorGray1;
+               border-color: @colorGray7;
+               box-shadow: none;
+       }
+
+       &:disabled {
+               background-color: @colorGray12;
+               color: @colorBaseInverted;
+               border-color: @colorGray12;
+               cursor: default;
+
+               // Make sure disabled buttons don't have hover and active states
+               &:hover,
+               &:active {
+                       background-color: @colorGray12;
+                       color: @colorBaseInverted;
+                       box-shadow: none;
+                       border-color: @colorGray12;
+               }
+       }
+
+       // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
+       &:not( :disabled ) {
+               .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
+       }
+}
+
+// Primary buttons mixin.
+.mw-ui-button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
        background-color: @bgColor;
        color: #fff;
        // border of the same color as background so that light background and

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index e58cb1e..e105f4d 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -28,86 +28,8 @@
 .mw-ui-button {
        background-color: @colorGray15;
        color: @colorButtonText;
-       // Container layout
-       display: inline-block;
-       .box-sizing( border-box );
-       min-width: 4em;
-       max-width: 28.75em; // equivalent to 460px, @see T95367
-       margin: 0;
-       padding: 0.57142857em 0.9375em; // equivalent to `8px 12px`
-       border: @border-width-base @border-style-base @border-color-base;
-       border-radius: @borderRadius;
-       // Inherit the font rather than apply user agent stylesheet (T72072)
-       font-family: inherit;
-       font-size: 1em;
-       font-weight: bold;
-       line-height: 1;
-       text-align: center;
-       // Disable weird iOS styling
-       -webkit-appearance: none;
-       // IE 6 & 7 hack
-       // https://stackoverflow.com/a/5838575/365238
-       *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
-       zoom: 1;
-       // Ensure that buttons and inputs are nicely aligned when they have differing heights
-       vertical-align: middle;
-       // Interaction styling
-       cursor: pointer;
-
-       // Make sure that `color` isn't inheriting from user-agent styles
-       &:visited {
-               color: @colorButtonText;
-       }
-
-       &:hover {
-               background-color: @background-color-base;
-               color: @colorGray4;
-               border-color: @colorGray10;
-       }
-
-       &:focus {
-               background-color: @background-color-base;
-               // Make sure that `color` isn't inheriting from user-agent styles
-               color: @colorButtonText;
-               border-color: @colorProgressive;
-               box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @background-color-base;
-               outline-width: 0;
-
-               // Remove the inner border and padding in Firefox.
-               &::-moz-focus-inner {
-                       border-color: transparent;
-                       padding: 0;
-               }
-       }
-
-       &:active,
-       &.is-on {
-               background-color: @colorGray12;
-               color: @colorGray1;
-               border-color: @colorGray7;
-               box-shadow: none;
-       }
-
-       &:disabled {
-               background-color: @colorGray12;
-               color: @colorBaseInverted;
-               border-color: @colorGray12;
-               cursor: default;
-
-               // Make sure disabled buttons don't have hover and active states
-               &:hover,
-               &:active {
-                       background-color: @colorGray12;
-                       color: @colorBaseInverted;
-                       box-shadow: none;
-                       border-color: @colorGray12;
-               }
-       }
-
-       // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
-       &:not( :disabled ) {
-               .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
-       }
+       .mw-ui-button();
+       .mw-ui-button-states();
 
        // Styling for specific button types
        // -----------------------------------------
@@ -187,7 +109,7 @@
        //
        // Styleguide 2.1.2.
        &.mw-ui-progressive {
-               .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
+               .mw-ui-button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 
                &.mw-ui-quiet {
                        color: @colorProgressive;
@@ -223,7 +145,7 @@
        //
        // Styleguide 2.1.3.
        &.mw-ui-destructive {
-               .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
+               .mw-ui-button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 
                &.mw-ui-quiet {
                        color: @colorDestructive;