Keep buttons from changing size when they change state

[lhc/web/wiklou.git] / resources / src / mediawiki.less / mediawiki.ui / mixins.less

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index d3220cc..5d0fefb 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -36,21 +36,16 @@
 .button-colors(@bgColor) {
        background: @bgColor;
 
-       &:hover {
+       &:hover,
+       &: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%);
-       }
-
-       &:focus {
-               box-shadow:inset 0px 0px 0px 3px rgba(0, 0, 0, 20%);
-//             box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
                outline: none;
                // remove outline in Firefox
                &::-moz-focus-inner {
                        border-color: transparent;
                }
-
        }
 
        &:active,
@@ -82,11 +77,8 @@
 .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
        color: #fff;
        // 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)
+       // dark background buttons are the same height and width
        border: 1px solid @bgColor;
-       border-left: none;
-       border-right: none;
        text-shadow: 0 1px rgba(0, 0, 0, .1);
 
        &:disabled {