Tweak mw-ui padding to match oo-ui for buttons and text inputs

Change-Id: I594f42d1e13d1c5e9bf44363a137fc2fe9f937e7

diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 5dc025f..52c797b 100644 (file)
--- 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 21f5254..a9aa046 100644 (file)
--- 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;
 }