Merge "HTML escape parameter 'text' of hook 'SkinEditSectionLinks'"

[lhc/web/wiklou.git] / resources / src / mediawiki.ui / components / buttons.less

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index b7175d0..e58cb1e 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -1,47 +1,8 @@
 @import 'mediawiki.mixins';
+@import 'mediawiki.ui/mixins.buttons';
 @import 'mediawiki.ui/variables';
 
-// 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;
-               }
-       }
-}
+/* stylelint-disable selector-class-pattern */
 
 // 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
@@ -73,14 +34,14 @@
        min-width: 4em;
        max-width: 28.75em; // equivalent to 460px, @see T95367
        margin: 0;
-       padding: 0.546875em 1em;
+       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.286;
+       line-height: 1;
        text-align: center;
        // Disable weird iOS styling
        -webkit-appearance: none;
@@ -127,9 +88,7 @@
                box-shadow: none;
        }
 
-       &:disabled,
-       &.mw-ui-quiet.mw-ui-progressive,
-       &.mw-ui-quiet.mw-ui-destructive {
+       &:disabled {
                background-color: @colorGray12;
                color: @colorBaseInverted;
                border-color: @colorGray12;
@@ -176,7 +135,9 @@
        // </div>
        //
        // Styleguide 2.1.1.
-       &.mw-ui-quiet {
+       &.mw-ui-quiet,
+       &.mw-ui-quiet.mw-ui-progressive,
+       &.mw-ui-quiet.mw-ui-destructive {
                background-color: transparent;
                // Quiet buttons all start gray, and reveal
                // progressive/destructive color on hover and active.
@@ -203,7 +164,9 @@
                        box-shadow: none;
                }
 
-               &:disabled {
+               &:disabled,
+               &:disabled:hover,
+               &:disabled:active {
                        background-color: transparent;
                        color: @colorDisabledText;
                        border-color: transparent;