From 53dfff81e22c1708843f9767c6ce7a1e30f0dbda Mon Sep 17 00:00:00 2001 From: Volker E Date: Wed, 21 Nov 2018 11:44:49 -0800 Subject: [PATCH] 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 --- resources/src/mediawiki.less/mediawiki.ui/mixins.less | 2 +- .../src/mediawiki.less/mediawiki.ui/variables.less | 3 +++ resources/src/mediawiki.ui/components/buttons.less | 10 +++++++--- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less index 1e078bd6f2..5119e4990d 100644 --- 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 731bd2d352..5affcb8656 100644 --- 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 cef36d755f..9b4835d93e 100644 --- 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; } } } -- 2.20.1