// Button styling
// ----------------------------------------------------------------------------
-.button-colors( @bgColor, @highlightColor, @activeColor ) {
+.button-colors(@bgColor, @highlightColor, @activeColor) {
background: @bgColor;
&:hover {
}
}
-.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) >= 70% ) {
+.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) >= 70%) {
color: @colorButtonText;
border: 1px solid @colorGray12;
}
}
-.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) < 70% ) {
+.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) < 70%) {
color: #fff;
// border of the same color as background so that light background and
// dark background buttons are the same height and width
}
}
-.button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
+.button-colors-quiet(@textColor, @highlightColor, @activeColor) {
// Quiet buttons all start gray, and reveal
// constructive/progressive/destructive color on hover and active.
color: @colorButtonText;
}
}
- // Constructive buttons (deprecated, consolidated with `progressive` – see T110555)
+ // Constructive buttons
//
// Use constructive buttons for actions which result in a final action in the process that results
// in a change of state.
//
// Styleguide 2.1.2.
&.mw-ui-constructive {
- .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
+ .button-colors( @colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive );
&.mw-ui-quiet {
- .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
+ .button-colors-quiet( @colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive );
}
}