kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Fix that thing with disabled buttons changing color on hover

Browse source
This commit is contained in:
Vickash Mahabir 2013-01-18 11:55:17 -04:00
parent f068cdeb63
commit 27ff51dae6
1 changed files with 20 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
less/buttons.less
View file

@ -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 // Alternate buttons
// -------------------------------------------------- // --------------------------------------------------
@ -117,67 +128,37 @@ input[type="button"] {
.btn { .btn {
color: #fff; color: #fff;
background-color: @btn-background; background-color: @btn-background;
border-color: @btn-border; border-color: @btn-border;
&:hover, .darken-button-states(@btn-background, @btn-border)
&:focus,
&:active {
background-color: darken(@btn-background, 5%);
border-color: darken(@btn-border, 10%);
}
} }
.btn-primary { .btn-primary {
background-color: @btn-background-primary; background-color: @btn-background-primary;
border-color: @btn-border-primary; border-color: @btn-border-primary;
&:hover, .darken-button-states(@btn-background-primary, @btn-border-primary)
&:focus,
&:active {
background-color: darken(@btn-background-primary, 5%);
border-color: darken(@btn-border-primary, 10%);
}
} }
// Warning appears are orange // Warning appears as orange
.btn-warning { .btn-warning {
background-color: @btn-background-warning; background-color: @btn-background-warning;
border-color: @btn-border-warning; border-color: @btn-border-warning;
&:hover, .darken-button-states(@btn-background-warning, @btn-border-warning)
&:focus,
&:active {
background-color: darken(@btn-background-warning, 5%);
border-color: darken(@btn-border-warning, 10%);
}
} }
// Danger and error appear as red // Danger and error appear as red
.btn-danger { .btn-danger {
background-color: @btn-background-danger; background-color: @btn-background-danger;
border-color: @btn-border-danger; border-color: @btn-border-danger;
&:hover, .darken-button-states(@btn-background-danger, @btn-border-danger)
&:focus,
&:active {
background-color: darken(@btn-background-danger, 5%);
border-color: darken(@btn-border-danger, 10%);
}
} }
// Success appears as green // Success appears as green
.btn-success { .btn-success {
background-color: @btn-background-success; background-color: @btn-background-success;
border-color: @btn-border-success; border-color: @btn-border-success;
&:hover, .darken-button-states(@btn-background-success, @btn-border-success)
&:focus,
&:active {
background-color: darken(@btn-background-success, 5%);
border-color: darken(@btn-border-success, 10%);
}
} }
// Info appears as blue-green // Info appears as blue-green
.btn-info { .btn-info {
background-color: @btn-background-info; background-color: @btn-background-info;
border-color: @btn-border-info; border-color: @btn-border-info;
&:hover, .darken-button-states(@btn-background-info, @btn-border-info)
&:focus,
&:active {
background-color: darken(@btn-background-info, 5%);
border-color: darken(@btn-border-info, 10%);
}
} }