mediawiki.ui: Ensure that buttons and inputs are vertically aligned

Currently height of a mediawiki.ui button computes to 28px, but the
height of an input to 26px. Use vertical-align: middle; to make both
display at the center of line-height instead of at the top.

Followup to I7fdd9970.

Change-Id: Id4b45c57bae75bf1c5f56f5c43c714d91564dc15

diff --git a/resources/mediawiki.ui/components/default/buttons.less b/resources/mediawiki.ui/components/default/buttons.less
index 10d36ff..a931756 100644 (file)
--- a/resources/mediawiki.ui/components/default/buttons.less
+++ b/resources/mediawiki.ui/components/default/buttons.less
@@ -19,9 +19,10 @@
        .buttonColors();
        border-radius: @buttonBorderRadius;
 
-       // Content styling
+       // Ensure that buttons and inputs are nicely aligned when they have differing heights
        vertical-align: middle;
 
+       // Content styling
        text-align: center;
        text-decoration: none;
 

diff --git a/resources/mediawiki.ui/mixins/forms.less b/resources/mediawiki.ui/mixins/forms.less
index 4ed7261..1b177ee 100644 (file)
--- a/resources/mediawiki.ui/mixins/forms.less
+++ b/resources/mediawiki.ui/mixins/forms.less
@@ -19,6 +19,9 @@
 
        color: @agoraTextColor;
        padding: 0.35em 0.5em 0.35em 0.5em;
+
+       // Ensure that buttons and inputs are nicely aligned when they have differing heights
+       vertical-align: middle;
 }
 
 .agora-label-styling() {