Update button focus and hover state according to spec

Design spec at https://phabricator.wikimedia.org/M31

Change-Id: I270e2fcf863265a51ed62f790dff1ee9cf31a8b6

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 56b6811..16fd7ec 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -38,13 +38,12 @@
 
        &: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: @highlightColor;
+               background-color: @highlightColor;
        }
 
        &:focus {
-               border-color: rgba(0,0,0,0.2);
-               box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
+               border-color: @colorWhite;
+               box-shadow: 0 0 0 1px @highlightColor;
 
                outline: none;
                // remove outline in Firefox
@@ -71,6 +70,10 @@
                color: @colorButtonText;
        }
 
+       &:focus {
+               background-color: @highlightColor;
+       }
+
        &:disabled {
                color: @colorDisabledText;