diff --git a/less/buttons.less b/less/buttons.less index f825bd4295..0e23f17301 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -109,7 +109,18 @@ input[type="button"] { } } - +// Mixin for darkening only enabled buttons for link states +.darken-button-states (@background, @border) { + &:not([disabled]):not(.disabled), + fieldset:not([disabled]) & { + &:hover, + &:focus, + &:active { + background-color: darken(@background, 5%); + border-color: darken(@border, 10%); + } + } +} // Alternate buttons // -------------------------------------------------- @@ -117,67 +128,37 @@ input[type="button"] { .btn { color: #fff; background-color: @btn-background; - border-color: @btn-border; - &:hover, - &:focus, - &:active { - background-color: darken(@btn-background, 5%); - border-color: darken(@btn-border, 10%); - } + border-color: @btn-border; + .darken-button-states(@btn-background, @btn-border) } .btn-primary { background-color: @btn-background-primary; border-color: @btn-border-primary; - &:hover, - &:focus, - &:active { - background-color: darken(@btn-background-primary, 5%); - border-color: darken(@btn-border-primary, 10%); - } + .darken-button-states(@btn-background-primary, @btn-border-primary) } -// Warning appears are orange +// Warning appears as orange .btn-warning { background-color: @btn-background-warning; border-color: @btn-border-warning; - &:hover, - &:focus, - &:active { - background-color: darken(@btn-background-warning, 5%); - border-color: darken(@btn-border-warning, 10%); - } + .darken-button-states(@btn-background-warning, @btn-border-warning) } // Danger and error appear as red .btn-danger { background-color: @btn-background-danger; border-color: @btn-border-danger; - &:hover, - &:focus, - &:active { - background-color: darken(@btn-background-danger, 5%); - border-color: darken(@btn-border-danger, 10%); - } + .darken-button-states(@btn-background-danger, @btn-border-danger) } // Success appears as green .btn-success { background-color: @btn-background-success; border-color: @btn-border-success; - &:hover, - &:focus, - &:active { - background-color: darken(@btn-background-success, 5%); - border-color: darken(@btn-border-success, 10%); - } + .darken-button-states(@btn-background-success, @btn-border-success) } // Info appears as blue-green .btn-info { background-color: @btn-background-info; border-color: @btn-border-info; - &:hover, - &:focus, - &:active { - background-color: darken(@btn-background-info, 5%); - border-color: darken(@btn-border-info, 10%); - } + .darken-button-states(@btn-background-info, @btn-border-info) }