mediawiki.ui: Improve focus states of primary buttons

Follow-up to T137658 in OOjs UI. Improving `:focus` states of primary
buttons to be more harmonious with normal buttons. Also normalizing
`padding` in Firefox, removing obsolete comment and minor clean-up.

Change-Id: I584644c47be73a9770ac487b2b738d0f8bdf69d1

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index 12825de..f29897c 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -15,7 +15,6 @@
        cursor: pointer;
        vertical-align: bottom;
        line-height: normal;
-
        font-weight: normal;
 
        & > input[type="checkbox"],
@@ -37,25 +36,25 @@
        background: @bgColor;
 
        &:hover {
-               // The inner bottom bevel should match the active background color.
                background-color: @highlightColor;
        }
 
        &:focus {
                border-color: @colorWhite;
-               box-shadow: 0 0 0 1px @highlightColor;
+               box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px @colorWhite;
+               outline-width: 0;
 
-               outline: none;
-               // remove outline in Firefox
+               // Remove the inner border and padding in Firefox.
                &::-moz-focus-inner {
                        border-color: transparent;
+                       padding: 0;
                }
        }
 
        &:active,
        &.is-on,
        &.mw-ui-checked {
-               background: @activeColor;
+               background-color: @activeColor;
                box-shadow: none;
        }
 }
@@ -95,7 +94,7 @@
        text-shadow: 0 1px rgba(0, 0, 0, .1);
 
        &:disabled {
-               background: @colorGray13;
+               background-color: @colorGray13;
                border-color: @colorGray13;
 
                // make sure disabled buttons don't have hover and active states
@@ -114,7 +113,7 @@
 
        &:hover,
        &:focus {
-               background: transparent;
+               background-color: transparent;
                color: @textColor;
        }