Merge "Localisation updates from https://translatewiki.net."

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index ddf847d..44fd1ee 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -2,55 +2,6 @@
 // Button styling
 // ----------------------------------------------------------------------------
 
-.button-colors( @bgColor, @highlightColor, @activeColor ) {
-       background-color: @bgColor;
-       color: @colorButtonText;
-       border-color: @colorFieldBorder;
-
-       // Make sure that `color` isn't inheriting from user-agent styles
-       &:visited {
-               color: @colorButtonText;
-       }
-
-       &:hover {
-               background-color: @highlightColor;
-               color: @colorGray4;
-               border-color: @colorGray10;
-       }
-
-       &:focus {
-               background-color: @highlightColor;
-               // 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 #fff;
-       }
-
-       &:active,
-       &.is-on,
-       &.mw-ui-checked {
-               background-color: @activeColor;
-               color: @colorGray1;
-               border-color: @colorGray7;
-               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;
-                       box-shadow: none;
-                       border-color: @colorGray12;
-               }
-       }
-}
-
 .button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
        background-color: @bgColor;
        color: #fff;
@@ -91,28 +42,3 @@
                }
        }
 }
-
-.button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
-       // Quiet buttons all start gray, and reveal
-       // progressive/destructive color on hover and active.
-       color: @colorButtonText;
-
-       &:hover {
-               background-color: transparent;
-               color: @highlightColor;
-       }
-
-       &:active,
-       &.mw-ui-checked {
-               color: @activeColor;
-       }
-
-       &:focus {
-               background-color: transparent;
-               color: @textColor;
-       }
-
-       &:disabled {
-               color: @colorDisabledText;
-       }
-}

diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index bbb8abe..0d1a657 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -36,6 +36,7 @@
 @colorBaseInverted: #fff;
 
 // Semantic colors
+@background-color-base: #fff;
 // Blue; for contextual use of a continuing action
 @colorProgressive: #36c;
 @colorProgressiveHighlight: #447ff5;
@@ -75,9 +76,13 @@
 @colorNeutral: @colorGray7;
 
 // Border colors
+@border-color-base: #a2a9b1;
 @borderColorInputBinaryChecked: @colorProgressive;
 @borderColorInputBinaryActive: @colorProgressiveActive;
 
+// Border styles
+@border-style-base: solid;
+
 // Border widths
 @border-width-base: 1px;
 

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 9b4835d..4a0adbc 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -26,41 +26,51 @@
 //
 // Styleguide 2.1.
 .mw-ui-button {
-       // Inherit the font rather than apply user agent stylesheet (T72072)
-       font-family: inherit;
-       font-size: 1em;
+       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
-       padding: 0.546875em 1em;
-       line-height: 1.286;
        margin: 0;
-       border-style: solid;
+       padding: 0.546875em 1em;
+       border: @border-width-base @border-style-base @border-color-base;
        border-radius: @borderRadius;
-       border-width: @border-width-base;
-       .box-sizing( border-box );
-
+       // Inherit the font rather than apply user agent stylesheet (T72072)
+       font-family: inherit;
+       font-size: 1em;
+       font-weight: bold;
+       line-height: 1.286;
+       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;
-
-       // Content styling
-       .button-colors( @colorGray15, #fff, #d9d9d9 );
-       text-align: center;
-       font-weight: bold;
-
        // 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.
@@ -70,60 +80,97 @@
                }
        }
 
-       // `: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' );
+       &:active,
+       &.is-on,
+       &.mw-ui-checked {
+               background-color: @colorGray12;
+               color: @colorGray1;
+               border-color: @colorGray7;
+               box-shadow: none;
        }
 
-       &:disabled {
+       &:disabled,
+       &.mw-ui-quiet.mw-ui-progressive,
+       &.mw-ui-quiet.mw-ui-destructive {
+               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' );
        }
 
        // Styling for specific button types
        // -----------------------------------------
 
-       // Big buttons
+       // Quiet buttons
        //
-       // Not all buttons are equal. You can emphasise certain actions over others
-       // using the mw-ui-big class.
+       // Use quiet buttons when they are less important and alongside other progressive or destructive buttons. It should be used for an action that exits the user from the current view/workflow.
+       // Its use is  not recommended on mobile/tablet due to lack of hover state.
        //
        // Markup:
        // <div>
-       //   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
-       // </div>
-       // <div>
-       //   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
+       //   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
        // </div>
        // <div>
-       //   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
+       //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
        // </div>
-       //
-       // Styleguide 2.1.6.
-       &.mw-ui-big {
-               font-size: 1.3em;
-       }
-
-       // Block buttons
-       //
-       // Some buttons might need to be stacked.
-       //
-       // Markup:
        // <div>
-       //   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
+       //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
        // </div>
        // <div>
-       //   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
+       //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
        // </div>
        // <div>
-       //   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
+       //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
        // </div>
        //
-       // Styleguide 2.1.5.
-       &.mw-ui-block {
-               display: block;
-               width: 100%;
-               margin-left: auto;
-               margin-right: auto;
+       // Styleguide 2.1.1.
+       &.mw-ui-quiet {
+               background-color: transparent;
+               // Quiet buttons all start gray, and reveal
+               // progressive/destructive color on hover and active.
+               color: @colorButtonText;
+               border-color: transparent;
+
+               &:hover {
+                       background-color: transparent;
+                       color: @colorButtonTextHighlight;
+                       border-color: transparent;
+                       box-shadow: none;
+               }
+
+               &:active,
+               &.mw-ui-checked {
+                       background-color: transparent;
+                       color: @colorButtonTextActive;
+                       border-color: transparent;
+               }
+
+               &:focus {
+                       background-color: transparent;
+                       color: @colorButtonText;
+                       border-color: transparent;
+                       box-shadow: none;
+               }
+
+               &:disabled {
+                       background-color: transparent;
+                       color: @colorDisabledText;
+                       border-color: transparent;
+               }
        }
 
        // Progressive buttons
@@ -138,12 +185,27 @@
        //   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
        // </div>
        //
-       // Styleguide 2.1.1.
+       // Styleguide 2.1.2.
        &.mw-ui-progressive {
                .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 
                &.mw-ui-quiet {
-                       .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
+                       color: @colorProgressive;
+
+                       &:hover {
+                               background-color: transparent;
+                               color: @colorProgressiveHighlight;
+                       }
+
+                       &:active,
+                       &.mw-ui-checked {
+                               color: @colorProgressiveActive;
+                       }
+
+                       &:focus {
+                               background-color: transparent;
+                               color: @colorProgressive;
+                       }
                }
        }
 
@@ -160,54 +222,72 @@
        //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
        // </div>
        //
-       // Styleguide 2.1.2.
+       // Styleguide 2.1.3.
        &.mw-ui-destructive {
                .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 
                &.mw-ui-quiet {
-                       .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
+                       color: @colorDestructive;
+
+                       &:hover {
+                               background-color: transparent;
+                               color: @colorDestructiveHighlight;
+                       }
+
+                       &:active,
+                       &.mw-ui-checked {
+                               color: @colorDestructiveActive;
+                       }
+
+                       &:focus {
+                               background-color: transparent;
+                               color: @colorDestructive;
+                       }
                }
        }
 
-       // Quiet buttons
+       // Big buttons
        //
-       // Use quiet buttons when they are less important and alongside other progressive or destructive buttons. It should be used for an action that exits the user from the current view/workflow.
-       // Its use is  not recommended on mobile/tablet due to lack of hover state.
+       // Not all buttons are equal. You can emphasise certain actions over others
+       // using the mw-ui-big class.
        //
        // Markup:
        // <div>
-       //   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
+       //   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
        // </div>
        // <div>
-       //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
+       //   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
        // </div>
        // <div>
-       //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
+       //   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
        // </div>
+       //
+       // Styleguide 2.1.4.
+       &.mw-ui-big {
+               font-size: 1.3em;
+       }
+
+       // Block buttons
+       //
+       // Some buttons might need to be stacked.
+       //
+       // Markup:
        // <div>
-       //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
+       //   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
        // </div>
        // <div>
-       //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
+       //   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
+       // </div>
+       // <div>
+       //   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
        // </div>
        //
-       // Styleguide 2.1.3.
-       &.mw-ui-quiet {
-               background-color: transparent;
-               .button-colors-quiet( @colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive );
-               border-color: transparent;
-
-               &:hover,
-               &:focus {
-                       border-color: transparent;
-                       box-shadow: none;
-               }
-
-               &:active,
-               &:disabled {
-                       background-color: transparent;
-                       border-color: transparent;
-               }
+       // Styleguide 2.1.5.
+       &.mw-ui-block {
+               display: block;
+               width: 100%;
+               margin-left: auto;
+               margin-right: auto;
        }
 }