mediawiki.ui: Let quiet button border remain

It's a better approach to let quiet button `border-width` remain for layout
predictability, only changing `border-color`.
Similar approach is taken in OOUI.
Also add `@border-width-base` variable similar to WikimediaUI so it
is easily replacible in in future.

Change-Id: I68d6bde72181004fcd8a0d3e0dee7d9d8e892eeb

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 1e078bd..5119e49 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -35,7 +35,7 @@
 .button-colors( @bgColor, @highlightColor, @activeColor ) {
        background-color: @bgColor;
        color: @colorButtonText;
-       border: 1px solid @colorFieldBorder;
+       border-color: @colorFieldBorder;
 
        // Make sure that `color` isn't inheriting from user-agent styles
        &:visited {

diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index 731bd2d..5affcb8 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -78,6 +78,9 @@
 @borderColorInputBinaryChecked: @colorProgressive;
 @borderColorInputBinaryActive: @colorProgressiveActive;
 
+// Border widths
+@border-width-base: 1px;
+
 // Checked radio input border-width, equal to OOUI at 14px base font-size
 @borderWidthRadioChecked: 0.4285em;
 

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index cef36d7..9b4835d 100644 (file)
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -36,7 +36,9 @@
        padding: 0.546875em 1em;
        line-height: 1.286;
        margin: 0;
+       border-style: solid;
        border-radius: @borderRadius;
+       border-width: @border-width-base;
        .box-sizing( border-box );
 
        // Disable weird iOS styling
@@ -191,18 +193,20 @@
        //
        // Styleguide 2.1.3.
        &.mw-ui-quiet {
-               background: transparent;
-               border: 0;
+               background-color: transparent;
                .button-colors-quiet( @colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive );
+               border-color: transparent;
 
                &:hover,
                &:focus {
+                       border-color: transparent;
                        box-shadow: none;
                }
 
                &:active,
                &:disabled {
-                       background: transparent;
+                       background-color: transparent;
+                       border-color: transparent;
                }
        }
 }