From 2ca94d4012b6c3b8705f1d2b657dd7f4b3769f37 Mon Sep 17 00:00:00 2001 From: Matthew Flaschen Date: Wed, 17 Sep 2014 16:13:27 -0400 Subject: [PATCH] Revert buggy MediaWiki UI change and dependent changes Reverts: * c0ec2d64c0ea79e840072627407aeb16131e0f88 ** mw-ui-button: Revamp the LESS to be simpler, and improve cross-browser support [This breaks buttons in IE6-8 which previously were styled correctly and without problems. This commit lacked rationale] Unfortunately, this also means reverting these two commits which were based off this one: * b8a15fb6282cd329faf7fee359edcb530061b949 ** Override vector anchor hover and visited styles on mw-ui-button * 645ba9f1d229fa50572ec58d3932059281b84aac ** Remove mw-ui-button min sizing for inline mode Change-Id: If5e55916795060fb3baadb75f997446527cbc27d --- .../src/mediawiki.ui/components/buttons.less | 444 +++++++----------- 1 file changed, 176 insertions(+), 268 deletions(-) diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less index 85d335f10d..7142d4d071 100644 --- a/resources/src/mediawiki.ui/components/buttons.less +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -2,321 +2,229 @@ @import "mediawiki.ui/variables"; @import "mediawiki.ui/mixins"; -/* -Buttons - -

Guidelines:

- -- .mw-ui-button can **only** be used on **A, INPUT, and BUTTON tags**. There is support for some input types, but this doesn't work in older browsers. -- .mw-ui-progressive, .mw-ui-constructive, and .mw-ui-destructive can be applied alone on A (see Styleguide 4.0), but can be applied in tandem with .mw-ui-button. *The class order is important:* **base type** (mw-ui-button) must come **first**, **mode** (mw-ui-quiet) **second**, and **context** (mw-ui-progressive) comes **last**. -- A .mw-ui-quiet button may **never** be the first or only button in a form. -- Semantically, the **first button in a form should always be the affirmative action** (eg. Submit). This is for accessibility purposes. Where it appears visually is not as important. - -

Notes:

- -- IE6 does not apply any .mw-ui-button styles at all on BUTTON. -- IE6 only applies the base .mw-ui-CONTEXT color on A, and doesn't care if you are combining it (ie. .mw-ui-destructive.mw-ui-quiet = always red text). -- IE7 and IE8 look slightly different from other browsers when rendering certain modes of these buttons. - -Markup: - - - - - -Default Anchor -Progressive Anchor -Constructive Anchor -Destructive Anchor - -.mw-ui-quiet - Quiet: A button that doesn't look like a button. -.mw-ui-inline - Inline: An even smaller button (zero padding) which also inherits font weight. -.mw-ui-big - Big: 1.3x font-size. - -Styleguide 2. -*/ - -// Helpers -// Individual Button Contexts -.mixin-mw-ui-button-context( @contextualColor ) { - @textShadowColor: spin( @colorTextLight, 180 ); - @borderColor: mix( @contextualColor, #000, 75% ); - @raisedColor: mix( @contextualColor, #fff, 92% ); - @depressedColor: darken( @contextualColor, 8% ); - @quietDepressedColor: darken( @contextualColor, 25% ); - - .mixin-mw-ui-button-disabled-state() { - &[disabled], - &[disabled]:hover, - &[disabled]:focus { - background: @colorGrayLight; - color: @colorWhite; - text-shadow: none; - .box-shadow( ~"none" ); - } - } - - .mixin-mw-ui-button-normal-mode() { - background: @contextualColor; - text-shadow: 0 1px fade( @textShadowColor, 10% ); - &, &:visited { - color: @colorWhite; - } - - .mixin-mw-ui-button-disabled-state(); - - &:hover, - &:focus { - background: @raisedColor; - text-shadow: 0 1px fade( @textShadowColor, 33% ); - } - - &:hover { - // Shadow under outer, 3D raising inner, edge shading inner - .box-shadow( ~"0 1px 0 0 rgba(0, 0, 0, .15), inset 0 -4px 0 0 @{borderColor}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05)" ); - } - - &:focus { - // 3D raising inner, edge shading inner - .box-shadow( ~"inset 0 -4px 0 0 @{borderColor}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05), inset 0 0 0 1px @{borderColor}" ); - } - - &:active { - background: @depressedColor; - // Slight 3D raising inner, deep edge shading inner - .box-shadow( ~"inset 0 -2px 0 0 @{depressedColor}, inset 0 2px 0 0 rgba(0, 0, 0, .25)" ); - } - } - - // Default mode (fully colored) - &:not(.mw-ui-quiet) { - .mixin-mw-ui-button-normal-mode(); - } - .lte-ie8 & { // IE7 & IE8 do not support :not() selector - .mixin-mw-ui-button-normal-mode(); - } - - // Quiet mode (transparent bg, no border; text color on activity) - .lte-ie8 &.mw-ui-quiet, - &.mw-ui-quiet { - background: transparent; - - &, &:visited { - color: @colorTextLight; - } - - &:hover { - color: @contextualColor; - } - - &:active { - color: @depressedColor; - } - - &:focus { - color: @quietDepressedColor; - } - - .mixin-mw-ui-button-disabled-state(); - } -} - -// Default button styles -.mixin-mw-ui-button-default() { - background: @colorGrayLightest; - - &, &:visited { - color: @colorTextLight; - } - - @textShadowColor: spin( @colorTextLight, 180 ); - @borderColor: mix( @colorGrayLightest, #000, 75% ); - @raisedColor: mix( @colorGrayLightest, #fff, 92% ); - @depressedColor: darken( @colorGrayLightest, 8% ); - @quietDepressedColor: darken( @colorGrayLightest, 25% ); - - .mixin-mw-ui-button-normal-mode() { - &:hover, - &:focus { - background: @raisedColor; - text-shadow: 0 1px fade( @textShadowColor, 33% ); - } - - &:hover { - // Shadow under outer, 3D raising inner, edge shading inner - .box-shadow( ~"0 1px 0 0 rgba(0, 0, 0, .15), inset 0 -4px 0 0 @{borderColor}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05)" ); - } - - &:focus { - // 3D raising inner, edge shading inner - .box-shadow( ~"inset 0 -4px 0 0 @{borderColor}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05), inset 0 0 0 1px @{borderColor}" ); - } - - &:active { - background: @depressedColor; - // Slight 3D raising inner, deep edge shading inner - .box-shadow( ~"inset 0 -2px 0 0 @{depressedColor}, inset 0 2px 0 0 rgba(0, 0, 0, .25)" ); - } - } - - // Default mode (fully colored) - &:not(.mw-ui-quiet) { - .mixin-mw-ui-button-normal-mode(); - } - .lte-ie8 & { // IE7 & IE8 do not support :not() selector - .mixin-mw-ui-button-normal-mode(); - } - - // Quiet mode (transparent bg, no border; text color on activity) - .lte-ie8 &.mw-ui-quiet, - &.mw-ui-quiet { - background: transparent; - - &:hover, - &:focus, - &:active { - color: @colorText; - } - } -} - -// Selector mixins, used for customization if needed -.mixin-mw-ui-button() { +// 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; + +// Neutral button styling +// +// Markup: +// +// +// +// Styleguide 2.1. +.mw-ui-button { + // Inherit the font rather than apply user agent stylesheet (bug 70072) + font-family: inherit; + font-size: 1em; // Container layout display: inline-block; padding: .5em 1em; margin: 0; - vertical-align: middle; .box-sizing(border-box); + // Disable weird iOS styling + -webkit-appearance: none; + // IE6/IE7 hack + // http://stackoverflow.com/a/5838575/365238 *display: inline; zoom: 1; - // Disable weird iOS styling - -webkit-appearance: none; + // Container styling + .button-colors(#FFF); + border-radius: @buttonBorderRadius; - // Typography - font-family: inherit; - font-size: 1em; + // Ensure that buttons and inputs are nicely aligned when they have differing heights + vertical-align: middle; + + // Content styling + text-align: center; font-weight: bold; - line-height: inherit; - &, &:hover { - text-decoration: none; - } - // Design - border: 0px solid transparent; - border-radius: 3px; + // Interaction styling cursor: pointer; - // Animation - .transition( ~"box-shadow .1s linear, background-color .1s linear, opacity .5s linear" ); - - // Disabled state (cursor fix) &:disabled { + text-shadow: none; cursor: default; } - // Focus/active state (outline fix) - &:focus, &:active { - outline: none; - } - /* - * Button modes (continued in .mw-ui-button-context()) - */ + .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;); - // Thin mode (no padding) - &.mw-ui-inline { - padding: 0; - font-weight: inherit; - vertical-align: inherit; - min-height: 0; - min-width: 0; - } + // Styling for specific button types + // ----------------------------------------- - // Big mode (1.3x font size) + // Big buttons + // + // Not all buttons are equal. You can emphasise certain actions over others + // using the mw-ui-big class. + // + // Markup: + // + // + // + // + // + // Styleguide 2.1.6. &.mw-ui-big { font-size: 1.3em; } - /* - * Default button styles - */ - - .mixin-mw-ui-button-default(); - - /* - * Contextual classes - */ - - // Progressive context - &.mw-ui-progressive { - .mixin-mw-ui-button-context( @colorProgressive ); + // Block buttons + // + // Some buttons might need to be stacked. + // + // Markup: + // + // + // + // + // + // Styleguide 2.1.5. + &.mw-ui-block { + display: block; + width: 100%; + } + + // Progressive buttons + // + // 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 { + .button-colors(@colorProgressive); + + &.mw-ui-quiet { + .button-colors-quiet(@colorProgressive); + } } - // Constructive context + // Constructive buttons + // + // 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 { - .mixin-mw-ui-button-context( @colorConstructive ); + .button-colors(@colorConstructive); + + &.mw-ui-quiet { + .button-colors-quiet(@colorConstructive); + } } - // Destructive context + // Destructive buttons + // + // Use destructive buttons for actions which result in the destruction of data. + // e.g. deleting a page. + // This should not be used for cancel buttons. + // + // Markup: + // + // + // + // Styleguide 2.1.3. &.mw-ui-destructive { - .mixin-mw-ui-button-context( @colorDestructive ); + .button-colors(@colorDestructive); + + &.mw-ui-quiet { + .button-colors-quiet(@colorDestructive); + } } -} -// Button selectors -.mw-ui-button { - .mixin-mw-ui-button; + // Quiet buttons + // + // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons. + // + // Markup: + // + // + // + // + // + // + // + // + // Styleguide 2.1.4. + &.mw-ui-quiet { + background: transparent; + border: none; + text-shadow: none; + .button-colors-quiet(@colorButtonText); - // Default mw-ui-button implementation forces min dimensions for improved touch access - min-width: 48px; - min-height: 33px; + &:hover, + &:focus { + box-shadow: none; + } - // When these buttons are children of mw-ui-button-group, adjust accordingly - .mw-ui-button-group > & { - .mw-ui-button-group-child; + &:active, + &:disabled { + background: transparent; + } } } -/* -Button groups - -Group of buttons. +a.mw-ui-button { + text-decoration: none; -Markup: -
- A - B - C - D -
- -Styleguide 2.1. -*/ -.mw-ui-button-group { - // Clearfix - zoom: 1; - &:after { - content: ""; - display: table; - clear: both; + // 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; } } -// To be used within .mw-ui-button selector -.mw-ui-button-group-child() { +// Button groups +// +// Group of buttons. Make sure you clear the floating after using a mw-ui-button-group. +// +// Markup: +//
+//
A
+//
B
+//
C
+//
D
+//
+// +// Styleguide 2.2. +.mw-ui-button-group > * { border-radius: 0; float: left; &:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; + border-top-left-radius: @buttonBorderRadius; + border-bottom-left-radius: @buttonBorderRadius; + } + + &:not(:first-child) { + border-left: none; } - &:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + &:last-child{ + border-top-right-radius: @buttonBorderRadius; + border-bottom-right-radius: @buttonBorderRadius; } } -- 2.20.1