From 8776dcf5f97de97a57e3ac1c21a9754635edbe07 Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Sun, 26 Feb 2017 15:04:01 +0000 Subject: [PATCH] Tweak mw-ui padding to match oo-ui for buttons and text inputs Change-Id: I594f42d1e13d1c5e9bf44363a137fc2fe9f937e7 --- .../src/mediawiki.ui/components/buttons.less | 18 +++++++++++------- .../src/mediawiki.ui/components/inputs.less | 5 +++-- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less index 5dc025fb59..52c797b4b6 100644 --- a/resources/src/mediawiki.ui/components/buttons.less +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -33,7 +33,8 @@ display: inline-block; min-width: 4em; max-width: 28.75em; // equivalent to 460px, @see T95367 - padding: 0.5em 1em; + padding: 0.546875em 1em; + line-height: 1.286; margin: 0; border-radius: @borderRadius; .box-sizing( border-box ); @@ -210,6 +211,15 @@ } } +input.mw-ui-button, +button.mw-ui-button { + // Buttons in Firefox have extra height + &::-moz-focus-inner { + margin-top: -1px; + margin-bottom: -1px; + } +} + a.mw-ui-button { text-decoration: none; @@ -219,12 +229,6 @@ a.mw-ui-button { &:focus { text-decoration: none; } - - // a-tags behave different to inputs if the line-height attribute is inherited - // from another element (e.g. mw-body-content). They appear bigger as input - // tags. See Bug T116427. To fix that, apply the correct line-height (used - // for inputs) to a-tags, too. - line-height: normal; } // Button groups diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less index 21f52546b7..a9aa0468dc 100644 --- a/resources/src/mediawiki.ui/components/inputs.less +++ b/resources/src/mediawiki.ui/components/inputs.less @@ -29,12 +29,12 @@ width: 100%; border: 1px solid @colorFieldBorder; border-radius: @borderRadius; - padding: 0.3em 0.3em 0.3em 0.6em; + padding: 0.625em 0.546875em 0.546875em; // necessary for smooth transition box-shadow: inset 0 0 0 0.1em #fff; font-family: inherit; font-size: inherit; - line-height: inherit; + line-height: 1.172em; vertical-align: middle; // Normalize & style placeholder text, see T139034 @@ -143,4 +143,5 @@ input.mw-ui-input-large { font-size: 1.75em; font-weight: bold; line-height: 1.25em; + padding: 0.3673em 0.3265em 0.3265em; } -- 2.20.1