buttons: Update focus state

Currently the hover and focus state are exactly the same. The hover
state is subtle and making it hard to navigate using a keyboard.

Now the buttons have a border when focused.

Bug: 62924
Change-Id: Ibd75f7caaf5f34d8bcc53381335a048cede26950

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index ec9888f..d3220cc 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -36,16 +36,21 @@
 .button-colors(@bgColor) {
        background: @bgColor;
 
-       &:hover,
-       &:focus {
+       &:hover {
                // 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,