mediawiki.ui: Improve focus states of primary buttons

[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 1b31956..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"],
@@ -33,33 +32,34 @@
 // Button styling
 // ----------------------------------------------------------------------------
 
-.button-colors(@bgColor, @highlightColor, @activeColor) {
+.button-colors( @bgColor, @highlightColor, @activeColor ) {
        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;
        }
 }
 
-.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) >= 70%) {
+.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) >= 70% ) {
        color: @colorButtonText;
        border: 1px solid @colorGray12;
 
@@ -86,7 +86,7 @@
        }
 }
 
-.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) < 70%) {
+.button-colors( @bgColor, @highlightColor, @activeColor ) 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 and width
@@ -94,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
@@ -106,14 +106,14 @@
        }
 }
 
-.button-colors-quiet(@textColor, @highlightColor, @activeColor) {
+.button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
        // Quiet buttons all start gray, and reveal
        // constructive/progressive/destructive color on hover and active.
        color: @colorButtonText;
 
        &:hover,
        &:focus {
-               background: transparent;
+               background-color: transparent;
                color: @textColor;
        }