-/*
-Buttons
-
-<h3>Guidelines:</h3>
-
-- .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.
-
-<h3>Notes:</h3>
-
-- 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:
-<button class="mw-ui-button {$modifiers}">Default</button>
-<button class="mw-ui-button mw-ui-progressive {$modifiers}">Progressive</button>
-<button class="mw-ui-button mw-ui-constructive {$modifiers}">Constructive</button>
-<button class="mw-ui-button mw-ui-destructive {$modifiers}">Destructive</button>
-<button class="mw-ui-button mw-ui-progressive {$modifiers}" disabled>Disabled Progressive</button>
-<a class="mw-ui-button {$modifiers}">Default Anchor</a>
-<a class="mw-ui-button mw-ui-progressive {$modifiers}">Progressive Anchor</a>
-<a class="mw-ui-button mw-ui-constructive {$modifiers}">Constructive Anchor</a>
-<a class="mw-ui-button mw-ui-destructive {$modifiers}">Destructive Anchor</a>
-
-.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() {