From 673f6f2e9d3d1a357a67e921b2be45190285de70 Mon Sep 17 00:00:00 2001 From: Volker E Date: Fri, 23 Sep 2016 20:08:55 -0700 Subject: [PATCH] mediawiki.UI: Align buttons to design guidelines and OOjs UI Aligning buttons to design guidelines in https://phabricator.wikimedia.org/M101 and to OOjs UI, similar to https://phabricator.wikimedia.org/rGOJUed9fef533bea Additionally: - aligning CSS code to MediaWiki Coding Guidelines, - adding `transition`s equivalent to OOjs UI, - replacing deprecated `@colorWhite` variable, - replacing counter-intuitive `.button-colors()` Less mixin guard, given our updated widget guidelines has only two primary button types (`progressive` & `destructive`) left, with separate mixins and - removing deprecated `constructive` CSS standalone selector and corresponding KSS styleguide comments. Bug: T146823 Change-Id: I6b9faefabc62689eabf6f4bccaa3d3756b5b662a --- .../mediawiki.less/mediawiki.ui/mixins.less | 87 +++++++++++-------- .../src/mediawiki.ui/components/buttons.less | 50 +++++------ 2 files changed, 74 insertions(+), 63 deletions(-) diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less index 780b372b18..1bfa3a3582 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less @@ -33,74 +33,91 @@ // ---------------------------------------------------------------------------- .button-colors( @bgColor, @highlightColor, @activeColor ) { - background: @bgColor; + background-color: @bgColor; + color: @colorButtonText; + border: 1px solid @colorFieldBorder; + + // Make sure that `color` isn't inheriting from user-agent styles + &:visited { + color: @colorButtonText; + } &:hover { background-color: @highlightColor; + color: @colorGray4; + border-color: @colorGray10; } &:focus { - border-color: @colorWhite; - box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px @colorWhite; - outline-width: 0; - - // Remove the inner border and padding in Firefox. - &::-moz-focus-inner { - border-color: transparent; - padding: 0; - } + background-color: @highlightColor; + // Make sure that `color` isn't inheriting from user-agent styles + color: @colorButtonText; + border-color: @colorProgressive; + box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px #fff; } &:active, &.is-on, &.mw-ui-checked { background-color: @activeColor; + color: @colorGray1; + border-color: @colorGray7; box-shadow: none; } -} - -.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) >= 70% ) { - color: @colorButtonText; - border: 1px solid @colorFieldBorder; - - &:hover, - &:active, - &:visited { - // make sure that is isn't inheriting from a general rule - color: @colorButtonText; - } - - &:focus { - background-color: @highlightColor; - } &:disabled { - color: @colorDisabledText; + background-color: @colorGray12; + color: #fff; + border-color: @colorGray12; - // make sure disabled buttons don't have hover and active states + // Make sure disabled buttons don't have hover and active states &:hover, &:active { - background: @bgColor; + background-color: @colorGray12; + color: #fff; box-shadow: none; + border-color: @colorGray12; } } } -.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) < 70% ) { +.button-colors-primary( @bgColor, @highlightColor, @activeColor ) { + background-color: @bgColor; color: #fff; // border of the same color as background so that light background and // dark background buttons are the same height and width border: 1px solid @bgColor; - text-shadow: 0 1px rgba(0, 0, 0, .1); + text-shadow: 0 1px rgba( 0, 0, 0, 0.1 ); + + &:hover { + background-color: @highlightColor; + border-color: @highlightColor; + } + + &:focus { + box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff; + } + + &:active, + &.is-on, + &.mw-ui-checked { + background-color: @activeColor; + border-color: @activeColor; + box-shadow: none; + } &:disabled { - background-color: @colorGray13; - border-color: @colorGray13; + background-color: @colorGray12; + color: #fff; + border-color: @colorGray12; - // make sure disabled buttons don't have hover and active states + // Make sure disabled buttons don't have hover and active states &:hover, &:active, &.mw-ui-checked { + background-color: @colorGray12; + color: #fff; + border-color: @colorGray12; box-shadow: none; } } @@ -108,7 +125,7 @@ .button-colors-quiet( @textColor, @highlightColor, @activeColor ) { // Quiet buttons all start gray, and reveal - // constructive/progressive/destructive color on hover and active. + // progressive/destructive color on hover and active. color: @colorButtonText; &:hover { diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less index 5931efbec3..18fdb2f8ed 100644 --- a/resources/src/mediawiki.ui/components/buttons.less +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -50,13 +50,28 @@ vertical-align: middle; // Content styling - .button-colors( #fff, @colorGray12, @colorGray7 ); + .button-colors( @colorGray15, #fff, #d9d9d9 ); text-align: center; font-weight: bold; // Interaction styling cursor: pointer; + &:focus { + outline-width: 0; + + // Remove the inner border and padding in Firefox. + &::-moz-focus-inner { + border-color: transparent; + padding: 0; + } + } + + // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9 + &:not( :disabled ) { + .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' ); + } + &:disabled { text-shadow: none; cursor: default; @@ -118,6 +133,7 @@ // Progressive buttons // // Use progressive buttons for actions which lead to a next step in the process. + // .mw-ui-constructive is deprecated; consolidated with `progressive`, see T110555 // .mw-ui-primary is deprecated, kept for compatibility. // // Markup: @@ -130,31 +146,9 @@ // // Styleguide 2.1.1. &.mw-ui-progressive, + &.mw-ui-constructive, &.mw-ui-primary { - .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); - - &.mw-ui-quiet { - .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); - } - } - - // Constructive buttons (deprecated, consolidated with `progressive` – see T110555) - // - // Use constructive buttons for actions which result in a final action in the process that results - // in a change of state. - // e.g. save changes button - // - // Markup: - //
- // - //
- //
- // - //
- // - // Styleguide 2.1.2. - &.mw-ui-constructive { - .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); + .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); &.mw-ui-quiet { .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); @@ -174,9 +168,9 @@ // // // - // Styleguide 2.1.3. + // Styleguide 2.1.2. &.mw-ui-destructive { - .button-colors( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive ); + .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive ); &.mw-ui-quiet { .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive ); @@ -211,7 +205,7 @@ // // // - // Styleguide 2.1.4. + // Styleguide 2.1.3. &.mw-ui-quiet { background: transparent; border: 0; -- 2.20.1