diff options
Diffstat (limited to 'resources/src/mediawiki.less/mediawiki.ui/mixins.less')
| -rw-r--r-- | resources/src/mediawiki.less/mediawiki.ui/mixins.less | 29 |
1 files changed, 14 insertions, 15 deletions
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less index 2d684572..1b31956d 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less @@ -33,18 +33,17 @@ // Button styling // ---------------------------------------------------------------------------- -.button-colors(@bgColor) { +.button-colors(@bgColor, @highlightColor, @activeColor) { background: @bgColor; &: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%); + 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 @@ -55,15 +54,12 @@ &:active, &.mw-ui-checked { - // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528); - // it passes it through, then ResourceLoader drops it. - // background: shade(@bgColor, 20%); - background: mix(#000, @bgColor, 20%); + background: @activeColor; box-shadow: none; } } -.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) { +.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) >= 70%) { color: @colorButtonText; border: 1px solid @colorGray12; @@ -74,6 +70,10 @@ color: @colorButtonText; } + &:focus { + background-color: @highlightColor; + } + &:disabled { color: @colorDisabledText; @@ -86,7 +86,7 @@ } } -.button-colors(@bgColor) 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 @@ -106,21 +106,20 @@ } } -.button-colors-quiet(@textColor) { +.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; color: @textColor; } &:active, &.mw-ui-checked { - // lessphp doesn't implement shade, see above - // color: shade(@textColor, 20%); - color: mix(#000, @textColor, 20%); + color: @activeColor; } &:disabled { |