// Button styling
// ----------------------------------------------------------------------------
-.button-colors(@bgColor, @highlightColor) {
+.button-colors(@bgColor, @highlightColor, @activeColor) {
background: @bgColor;
&:hover {
&:active,
&.mw-ui-checked {
- background: @highlightColor;
+ background: @activeColor;
box-shadow: none;
}
}
-.button-colors(@bgColor, @highlightColor) when (lightness(@bgColor) >= 70%) {
+.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) >= 70%) {
color: @colorButtonText;
border: 1px solid @colorGray12;
}
}
-.button-colors(@bgColor, @highlightColor) 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) {
+.button-colors-quiet(@textColor, @highlightColor, @activeColor) {
// Quiet buttons all start gray, and reveal
// constructive/progressive/destructive color on hover and active.
color: @colorButtonText;
&:active,
&.mw-ui-checked {
- color: @highlightColor;
+ color: @activeColor;
}
&:disabled {
// Blue; for contextual use of a continuing action
@colorProgressive: #347bff;
@colorProgressiveHighlight: #2962CC;
+@colorProgressiveActive: #2962CC;
// Green; for contextual use of a positive finalizing action
@colorConstructive: #00af89;
@colorConstructiveHighlight: #008C6D;
+@colorConstructiveActive: #008C6D;
// Orange; for contextual use of returning to a past action
@colorRegressive: #FF5D00;
// Red; for contextual use of a negative action of high severity
@colorDestructive: #d11d13;
@colorDestructiveHighlight: #A7170F;
+@colorDestructiveActive: #A7170F;
// Orange; for contextual use of a potentially negative action of medium severity
@colorMediumSevere: #FF5D00;
// Yellow; for contextual use of a potentially negative action of low severity
@colorTextLight: @colorGray6;
@colorButtonText: @colorGray5;
@colorButtonTextHighlight: @colorGray7;
+@colorButtonTextActive: @colorGray7;
@colorDisabledText: @colorGray12;
@colorErrorText: #CC0000;
zoom: 1;
// Container styling
- .button-colors(#FFF, #CCC);
+ .button-colors(#FFF, #CCC, #777);
border-radius: @borderRadius;
min-width: 4em;
// Styleguide 2.1.1.
&.mw-ui-progressive,
&.mw-ui-primary {
- .button-colors(@colorProgressive, @colorProgressiveHighlight);
+ .button-colors(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
&.mw-ui-quiet {
- .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight);
+ .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
}
}
//
// Styleguide 2.1.2.
&.mw-ui-constructive {
- .button-colors(@colorConstructive, @colorConstructiveHighlight);
+ .button-colors(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
&.mw-ui-quiet {
- .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight);
+ .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
}
}
//
// Styleguide 2.1.3.
&.mw-ui-destructive {
- .button-colors(@colorDestructive, @colorDestructiveHighlight);
+ .button-colors(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
&.mw-ui-quiet {
- .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight);
+ .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
}
}
background: transparent;
border: none;
text-shadow: none;
- .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight);
+ .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive);
&:hover,
&:focus {