Apply mediawiki.ui.button colors to all skins

Specific skins can still add overrides using skinStyles.  However,
before this change, there was no custom style for any other skin.  They
just looked like Vector without the colors and type.  That grey could
be confused with a 'disabled' state.

Vector still has an override just for the font size and height.

Bug: 55554
Change-Id: I5ed8f6ca7d756731639fa4b62fbb4e4d74972100

diff --git a/resources/mediawiki.ui/components/default/buttons.less b/resources/mediawiki.ui/components/default/buttons.less
index 3dc13c5..8276b1c 100644 (file)
--- a/resources/mediawiki.ui/components/default/buttons.less
+++ b/resources/mediawiki.ui/components/default/buttons.less
@@ -48,15 +48,57 @@
                cursor: default;
        }
 
-       // Button sizes and displays
+       // Styling for specific button types
        // -----------------------------------------
        &.mw-ui-big {
                font-size: @baseFontSize * 1.3;
        }
+
        &.mw-ui-block {
                display: block;
                width: 100%;
        }
+
+       // Primary buttons
+       //
+       // Do not use the mw-ui-primary class use mw-ui-constructive instead. For blue buttons
+       // use mw-ui-progressive (coming soon)
+       //
+       // Markup:
+       // <button class="mw-ui-button mw-ui-primary">mw-ui-primary</button>
+       //
+       // Styleguide 2.1.1.
+       &.mw-ui-primary {
+               .buttonColors(@agoraBlue);
+       }
+
+       // Constructive buttons
+       //
+       // Use constructive buttons for actions which result in a final action in the process that results
+       // in a change of state.
+       // e.g. save changes button
+       //
+       // Markup:
+       // <button class="mw-ui-button mw-ui-constructive">mw-ui-constructive</button>
+       //
+       // Styleguide 2.1.2.
+       &.mw-ui-constructive {
+               .buttonColors(@agoraGreen);
+       }
+
+       // Destructive buttons
+       //
+       // Use destructive buttons for actions which result in the destruction of data.
+       // e.g. deleting a page.
+       // This should not be used for cancel buttons.
+       //
+       // Markup:
+       // <button class="mw-ui-button mw-ui-destructive">mw-ui-destructive</button>
+       //
+       // Styleguide 2.1.3.
+       &.mw-ui-destructive {
+               .buttonColors(@agoraRed);
+       }
 }
 
 // This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the

diff --git a/resources/mediawiki.ui/components/vector/buttons.less b/resources/mediawiki.ui/components/vector/buttons.less
index 2c215f6..1536338 100644 (file)
--- a/resources/mediawiki.ui/components/vector/buttons.less
+++ b/resources/mediawiki.ui/components/vector/buttons.less
@@ -2,47 +2,5 @@
 @import "../../mixins/type";
 
 .mw-ui-button {
-       // Primary buttons
-       //
-       // Do not use the mw-ui-primary class use mw-ui-constructive instead. For blue buttons
-       // use mw-ui-progressive (coming soon)
-       //
-       // Markup:
-       // <button class="mw-ui-button mw-ui-primary">mw-ui-primary</button>
-       //
-       // Styleguide 2.1.1.
-       &.mw-ui-primary {
-               .buttonColors(@agoraBlue);
-       }
-
-       // Constructive buttons
-       //
-       // Use constructive buttons for actions which result in a final action in the process that results
-       // in a change of state.
-       // e.g. save changes button
-       //
-       // Markup:
-       // <button class="mw-ui-button mw-ui-constructive">mw-ui-constructive</button>
-       //
-       // Styleguide 2.1.2.
-       &.mw-ui-constructive {
-               .buttonColors(@agoraGreen);
-       }
-
-
-       // Destructive buttons
-       //
-       // Use destructive buttons for actions which result in the destruction of data.
-       // e.g. deleting a page.
-       // This should not be used for cancel buttons.
-       //
-       // Markup:
-       // <button class="mw-ui-button mw-ui-destructive">mw-ui-destructive</button>
-       //
-       // Styleguide 2.1.3.
-       &.mw-ui-destructive {
-               .buttonColors(@agoraRed);
-       }
-
        .vector-type();
 }