// Button styling
// ----------------------------------------------------------------------------
-.button-colors( @bgColor, @highlightColor, @activeColor ) {
- background-color: @bgColor;
- color: @colorButtonText;
- border-color: @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 {
- 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;
- }
-
- &:disabled {
- background-color: @colorGray12;
- color: #fff;
- border-color: @colorGray12;
-
- // Make sure disabled buttons don't have hover and active states
- &:hover,
- &:active {
- background-color: @colorGray12;
- color: #fff;
- box-shadow: none;
- border-color: @colorGray12;
- }
- }
-}
-
.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
background-color: @bgColor;
color: #fff;
}
}
}
-
-.button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
- // Quiet buttons all start gray, and reveal
- // progressive/destructive color on hover and active.
- color: @colorButtonText;
-
- &:hover {
- background-color: transparent;
- color: @highlightColor;
- }
-
- &:active,
- &.mw-ui-checked {
- color: @activeColor;
- }
-
- &:focus {
- background-color: transparent;
- color: @textColor;
- }
-
- &:disabled {
- color: @colorDisabledText;
- }
-}