cursor: pointer;
vertical-align: bottom;
line-height: normal;
-
font-weight: normal;
& > input[type="checkbox"],
// Button styling
// ----------------------------------------------------------------------------
-.button-colors(@bgColor) {
+.button-colors( @bgColor, @highlightColor, @activeColor ) {
background: @bgColor;
- &:hover,
+ &:hover {
+ background-color: @highlightColor;
+ }
+
&:focus {
- // The inner bottom bevel should match the active background color.
- box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
- border-bottom-color: mix(#000, @bgColor, 20%);
- outline: none;
- // remove outline in Firefox
+ 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;
}
}
&:active,
+ &.is-on,
&.mw-ui-checked {
- // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
- // it passes it through, then ResourceLoader drops it.
- // background: shade(@bgColor, 20%);
- background: mix(#000, @bgColor, 20%);
+ background-color: @activeColor;
box-shadow: none;
}
}
-.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
+.button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) >= 70% ) {
color: @colorButtonText;
border: 1px solid @colorGray12;
color: @colorButtonText;
}
+ &:focus {
+ background-color: @highlightColor;
+ }
+
&:disabled {
color: @colorDisabledText;
}
}
-.button-colors(@bgColor) 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
text-shadow: 0 1px rgba(0, 0, 0, .1);
&:disabled {
- background: @colorGray13;
+ background-color: @colorGray13;
border-color: @colorGray13;
// make sure disabled buttons don't have hover and active states
}
}
-.button-colors-quiet(@textColor) {
+.button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
// Quiet buttons all start gray, and reveal
// constructive/progressive/destructive color on hover and active.
color: @colorButtonText;
&:hover,
&:focus {
+ background-color: transparent;
color: @textColor;
}
&:active,
&.mw-ui-checked {
- // lessphp doesn't implement shade, see above
- // color: shade(@textColor, 20%);
- color: mix(#000, @textColor, 20%);
+ color: @activeColor;
}
&:disabled {