From ae9b9ab570b2585d1c9e96ce206169c9c121ff14 Mon Sep 17 00:00:00 2001 From: Juliusz Gonera Date: Mon, 23 Dec 2013 22:55:41 +0100 Subject: [PATCH] Update mediawiki.ui button styles Based on: * https://www.mediawiki.org/wiki/File:Agora_specs_Buttons_annotated.png * https://www.mediawiki.org/wiki/File:Guide_Color.png * http://33cc77.com/wikipedia/ by Daniel Zarick This has quiet buttons that all start gray, and only reveal constructive/progressive/destructive color on hover and active. Also: * Update KSS docs to reflect disabled state. * Remove unnecessary text-decoration: none rules (the one in a.mw-ui-button should be enough). Bug: 58297 Bug: 54360 Change-Id: I1dd9bfac65092ad80bb8cd410031c22da0a18305 --- .../components/default/buttons.less | 99 ++++++++++++++----- resources/mediawiki.ui/mixins/effects.less | 99 ++++++++++++------- resources/mediawiki.ui/mixins/forms.less | 12 +-- resources/mediawiki.ui/settings/colors.less | 27 ++--- .../mediawiki.ui/settings/typography.less | 2 +- 5 files changed, 158 insertions(+), 81 deletions(-) diff --git a/resources/mediawiki.ui/components/default/buttons.less b/resources/mediawiki.ui/components/default/buttons.less index 8276b1c8b6..b3b77480e7 100644 --- a/resources/mediawiki.ui/components/default/buttons.less +++ b/resources/mediawiki.ui/components/default/buttons.less @@ -1,25 +1,34 @@ +@import "mediawiki.mixins"; @import "../../settings/typography"; @import "../../mixins/effects"; // Buttons // +// All buttons start with mw-ui-button class, modified by other classes. +// It can be any element. Due to a lack of a CSS reset, the exact styling of +// the button depends on what type of element is used. +// There are two kinds of buttons, the default is a "Call to Action" with an obvious border +// and there is a quiet kind without a border. +// // Styleguide 2. @buttonBorderRadius: 3px; +@transitionDuration: .1s; +@transitionFunction: ease-in-out; -// Button styling -// -// Basic button styling to be used on desktop skins. Can be any element. -// Due to a lack of a CSS reset, the exact styling of the button depends on what type of element is used. +// Neutral button styling // // Markup: -//
button.mw-ui-button
+// +// +// +// // // Styleguide 2.1. .mw-ui-button { // Container layout display: inline-block; - padding: 0.4em 1em 0.4em 1em; + padding: .5em 1em; margin: 0; // IE6/IE7 hack @@ -28,7 +37,7 @@ zoom: 1; // Container styling - .buttonColors(); + .button-colors(@colorWhite); border-radius: @buttonBorderRadius; // Ensure that buttons and inputs are nicely aligned when they have differing heights @@ -36,18 +45,20 @@ // Content styling text-align: center; - text-decoration: none; - font-weight: bold; + white-space: nowrap; + text-shadow: 0 1px rgba(0, 0, 0, .1); // Interaction styling cursor: pointer; - &:disabled, - &.mw-ui-disabled { + &:disabled { + text-shadow: none; cursor: default; } + .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;); + // Styling for specific button types // ----------------------------------------- &.mw-ui-big { @@ -59,17 +70,25 @@ width: 100%; } - // Primary buttons + // Progressive buttons // - // Do not use the mw-ui-primary class use mw-ui-constructive instead. For blue buttons - // use mw-ui-progressive (coming soon) + // Use progressive buttons for actions which lead to a next step in the process. + // .mw-ui-primary is deprecated, kept for compatibility. // // Markup: - // + // + // + // + // // // Styleguide 2.1.1. + &.mw-ui-progressive, &.mw-ui-primary { - .buttonColors(@agoraBlue); + .button-colors(@colorProgressive); + + &.mw-ui-quiet { + .button-colors-quiet(@colorProgressive); + } } // Constructive buttons @@ -79,11 +98,18 @@ // e.g. save changes button // // Markup: - // + // + // + // + // // // Styleguide 2.1.2. &.mw-ui-constructive { - .buttonColors(@agoraGreen); + .button-colors(@colorConstructive); + + &.mw-ui-quiet { + .button-colors-quiet(@colorConstructive); + } } // Destructive buttons @@ -93,18 +119,47 @@ // This should not be used for cancel buttons. // // Markup: - // + // + // + // + // // // Styleguide 2.1.3. &.mw-ui-destructive { - .buttonColors(@agoraRed); + .button-colors(@colorDestructive); + + &.mw-ui-quiet { + .button-colors-quiet(@colorDestructive); + } + } + + &.mw-ui-quiet { + background: transparent; + border: none; + text-shadow: none; + .button-colors-quiet(@colorGrayDark); + + &:hover, + &:focus { + box-shadow: none; + } + + &:active, + &:disabled { + background: transparent; + } } } -// This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the -// class alone isn't specific enough to do a.mw-ui-button { text-decoration: none; + + // This overrides an underline declaration on a:hover and a:focus in + // commonElements.css, which the class alone isn't specific enough to do. + &:hover, + &:focus { + text-decoration: none; + } } // Button groups diff --git a/resources/mediawiki.ui/mixins/effects.less b/resources/mediawiki.ui/mixins/effects.less index d168e5f5ff..eb8c203358 100644 --- a/resources/mediawiki.ui/mixins/effects.less +++ b/resources/mediawiki.ui/mixins/effects.less @@ -1,52 +1,81 @@ -/* Mixins for visual effects in CSS3 */ - @import "../settings/colors"; - -// ---------------------------------------------------------------------------- -// Gradients -// ---------------------------------------------------------------------------- -.vertical-gradient(@startColor: lighten(@agoraGray, 95%), @endColor: @agoraGray, @startPos: 0, @endPos: 100%) { - background-color: @endColor; - background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+ - background-image: -webkit-gradient( linear, left top, left bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Safari 5.1+, Chrome 10+ - background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard -} - // ---------------------------------------------------------------------------- // Button styling // ---------------------------------------------------------------------------- -.buttonColors(@baseColor: @agoraGray) { - // Background color - .vertical-gradient(lighten(@baseColor, 7.5%), @baseColor); - - border: 1px solid darken(@baseColor, 2%); +.button-colors(@bgColor) { + background: @bgColor; &:hover, - &.mw-ui-hover { - .vertical-gradient(lighten(@baseColor, 12.5%), lighten(@baseColor, 7.5%)); - text-decoration: none; + &:focus { + // 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%); + outline: none; + // remove outline in Firefox + &::-moz-focus-inner { + border-color: transparent; + } } - &:active, - &.mw-ui-active { - background-image: none; - background-color: darken(@baseColor, 3%); + &:active { + // 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%); + box-shadow: none; } +} + +.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) { + color: @colorGrayDark; + border: 1px solid @colorGrayLight; + + &:disabled { + color: @colorGrayLight; - &:disabled, - &.mw-ui-disabled { - background-image: none; - background-color: @baseColor; - opacity: 0.5; + // make sure disabled buttons don't have hover and active states + &:hover, + &:active { + background: @bgColor; + box-shadow: none; + } } } -.buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) >= 50%) { - color: #000; +.button-colors(@bgColor) when (lightness(@bgColor) < 70%) { + color: @colorWhite; + border: none; + + &:disabled { + background: @colorGrayLight; + + // make sure disabled buttons don't have hover and active states + &:hover, + &:active { + box-shadow: none; + } + } } -.buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) < 50%) { - color: #fff; +.button-colors-quiet(@textColor) { + // Quiet buttons all start gray, and reveal + // constructive/progressive/destructive color on hover and active. + color: @colorGrayDark; + + &:hover, + &:focus { + // lessphp doesn't implement tint, see above + // color: tint(@textColor, 20%); + color: mix(#fff, @textColor, 20%); + } + + &:active { + // lessphp doesn't implement shade, see above + // color: shade(@textColor, 20%); + color: mix(#000, @textColor, 20%); + } + + &:disabled { + color: @colorGrayLight; + } } diff --git a/resources/mediawiki.ui/mixins/forms.less b/resources/mediawiki.ui/mixins/forms.less index 1b177ee330..b32e4e79ff 100644 --- a/resources/mediawiki.ui/mixins/forms.less +++ b/resources/mediawiki.ui/mixins/forms.less @@ -4,7 +4,7 @@ // For Vector, that should be layered on top with vector-type .agora-field-styling() { - border: 1px solid @agoraGray; + border: 1px solid @colorGrayLight; &:focus { // Styling focus of native checkboxes etc on Mac is almost impossible. @@ -12,12 +12,12 @@ outline: 0; // Removes OS field focus } - box-shadow: @agoraBlueShadow 0px 0px 5px; + box-shadow: @colorProgressiveShadow 0px 0px 5px; - border-color: @agoraBlueShadow; + border-color: @colorProgressiveShadow; } - color: @agoraTextColor; + color: @colorText; padding: 0.35em 0.5em 0.35em 0.5em; // Ensure that buttons and inputs are nicely aligned when they have differing heights @@ -27,7 +27,7 @@ .agora-label-styling() { //font-weight: bold; font-size: 0.9em; - color: darken(@agoraGray, 50%); + color: darken(@colorGrayLight, 50%); * { font-weight: normal; @@ -48,7 +48,7 @@ height: auto; margin: 0 0.1em 0em 0; padding: 0; - border: 1px solid @agoraGray; + border: 1px solid @colorGrayLight; cursor: pointer; } } diff --git a/resources/mediawiki.ui/settings/colors.less b/resources/mediawiki.ui/settings/colors.less index 208d6f61b5..18661de684 100644 --- a/resources/mediawiki.ui/settings/colors.less +++ b/resources/mediawiki.ui/settings/colors.less @@ -1,17 +1,10 @@ -// Grays -// ----------------------------------------- -@agoraGray: #c9c9c9; -@agoraTextColor: #252525; - -// Blues -// ----------------------------------------- -@agoraBlue: #3366bb; -@agoraBlueShadow: #4091ed; - -// Greens -// ----------------------------------------- -@agoraGreen: #27aa65; - -// Reds -// ----------------------------------------- -@agoraRed: #cc0000; +@colorWhite: #fff; +@colorGrayLight: #ccc; +@colorGrayDark: #898989; +@colorText: #252525; +@colorProgressive: #347bff; +// FIXME: remove @colorProgressiveShadow (shadows should be generated +// in LESS by dimming the original colors) +@colorProgressiveShadow: #4091ed; +@colorConstructive: #00af89; +@colorDestructive: #d11d13; diff --git a/resources/mediawiki.ui/settings/typography.less b/resources/mediawiki.ui/settings/typography.less index 76c398cf85..83651edb70 100644 --- a/resources/mediawiki.ui/settings/typography.less +++ b/resources/mediawiki.ui/settings/typography.less @@ -1,5 +1,5 @@ @baseFontSize: 1em; @baseLineHeight: 1.4 * @baseFontSize; -@baseFontColor: @agoraTextColor; +@baseFontColor: @colorText; @smallFontSize: 0.75em; -- 2.20.1