@import "mediawiki.mixins";
@import "../../settings/typography";
@import "../../mixins/effects";
+@import "../../mixins/utilities";
// Buttons
//
display: inline-block;
padding: .5em 1em;
margin: 0;
+ .box-sizing(border-box);
// IE6/IE7 hack
// http://stackoverflow.com/a/5838575/365238
&: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 {
.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,