// ----------------------------------------------------------------------------
.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;
}
}
.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 {
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;
// 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:
//
// 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:
- // <div>
- // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
- // </div>
- // <div>
- // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
- // </div>
- //
- // 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 );
// <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
// </div>
//
- // 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 );
// <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
// </div>
//
- // Styleguide 2.1.4.
+ // Styleguide 2.1.3.
&.mw-ui-quiet {
background: transparent;
border: 0;