mw.ui: button: Update focus state

The focus and hover states were the same. Updating it according to the
design specification - https://phabricator.wikimedia.org/M31

Bug: T88449
Change-Id: Ibdd5e1553174bfde82af3a23b746a3918b8f0416

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 92d0a76..2d68457 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -36,11 +36,16 @@
 .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 {
+               border-color: rgba(0,0,0,0.2);
+               box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
+
                outline: none;
                // remove outline in Firefox
                &::-moz-focus-inner {