From 054b8e0fb5478c812e0cc572b797d5170077f312 Mon Sep 17 00:00:00 2001 From: Juliusz Gonera Date: Wed, 5 Mar 2014 15:27:51 -0800 Subject: [PATCH] Make .mw-ui-button height the same for all buttons Regardless of their background color. Change-Id: I00f905690e2934e972cc4ffc26631ead7c2d7567 --- .../src/mediawiki.ui/components/default/buttons.less | 2 ++ resources/src/mediawiki.ui/mixins/effects.less | 9 ++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/resources/src/mediawiki.ui/components/default/buttons.less b/resources/src/mediawiki.ui/components/default/buttons.less index 54d160833c..f7a7eae522 100644 --- 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 9daad749c7..52dbb05eb1 100644 --- 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, -- 2.20.1