Make .mw-ui-button height the same for all buttons

Regardless of their background color.

Change-Id: I00f905690e2934e972cc4ffc26631ead7c2d7567

diff --git a/resources/src/mediawiki.ui/components/default/buttons.less b/resources/src/mediawiki.ui/components/default/buttons.less
index 54d1608..f7a7eae 100644 (file)
--- a/resources/src/mediawiki.ui/components/default/buttons.less
+++ b/resources/src/mediawiki.ui/components/default/buttons.less
@@ -1,6 +1,7 @@
 @import "mediawiki.mixins";
 @import "../../settings/typography";
 @import "../../mixins/effects";
+@import "../../mixins/utilities";
 
 // Buttons
 //
@@ -28,6 +29,7 @@
        display: inline-block;
        padding: .5em 1em;
        margin: 0;
+       .box-sizing(border-box);
 
        // IE6/IE7 hack
        // http://stackoverflow.com/a/5838575/365238

diff --git a/resources/src/mediawiki.ui/mixins/effects.less b/resources/src/mediawiki.ui/mixins/effects.less
index 9daad74..52dbb05 100644 (file)
--- a/resources/src/mediawiki.ui/mixins/effects.less
+++ b/resources/src/mediawiki.ui/mixins/effects.less
@@ -10,6 +10,7 @@
        &:focus {
                // The inner bottom bevel should match the active background color.
                box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
+               border-bottom-color: mix(#000, @bgColor, 20%);
                outline: none;
                // remove outline in Firefox
                &::-moz-focus-inner {
@@ -45,10 +46,16 @@
 
 .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
        color: @colorWhite;
-       border: none;
+       // border of the same color as background so that light background and
+       // dark background buttons are the same height (only top and bottom to
+       // make box shadow on hover cover the corners too)
+       border: 1px solid @bgColor;
+       border-left: none;
+       border-right: none;
 
        &:disabled {
                background: @colorGrayLight;
+               border-color: @colorGrayLight;
 
                // make sure disabled buttons don't have hover and active states
                &:hover,