From 27ff51dae6b46b121080c892e07aa76a8eb18280 Mon Sep 17 00:00:00 2001 From: Vickash Mahabir Date: Fri, 18 Jan 2013 11:55:17 -0400 Subject: [PATCH 1/4] Fix that thing with disabled buttons changing color on hover --- less/buttons.less | 59 ++++++++++++++++------------------------------- 1 file changed, 20 insertions(+), 39 deletions(-) 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) } From 6e96cd1a7c503289bd7dfd41fccaa7eefcc5c91e Mon Sep 17 00:00:00 2001 From: Vickash Mahabir Date: Fri, 18 Jan 2013 11:58:12 -0400 Subject: [PATCH 2/4] Forgot to add built docs css file --- docs/assets/css/bootstrap.css | 54 +++++++++++++++++++++++------------ 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 46cd2bc4bc..771df6bff9 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1661,9 +1661,12 @@ input[type="button"].btn-block { border-color: #a7a9aa; } -.btn:hover, -.btn:focus, -.btn:active { +.btn:not([disabled]):not(.disabled):hover, +fieldset:not([disabled]) .btn:hover, +.btn:not([disabled]):not(.disabled):focus, +fieldset:not([disabled]) .btn:focus, +.btn:not([disabled]):not(.disabled):active, +fieldset:not([disabled]) .btn:active { background-color: #9a9c9d; border-color: #8d9091; } @@ -1673,9 +1676,12 @@ input[type="button"].btn-block { border-color: #428bca; } -.btn-primary:hover, -.btn-primary:focus, -.btn-primary:active { +.btn-primary:not([disabled]):not(.disabled):hover, +fieldset:not([disabled]) .btn-primary:hover, +.btn-primary:not([disabled]):not(.disabled):focus, +fieldset:not([disabled]) .btn-primary:focus, +.btn-primary:not([disabled]):not(.disabled):active, +fieldset:not([disabled]) .btn-primary:active { background-color: #357ebd; border-color: #3071a9; } @@ -1685,9 +1691,12 @@ input[type="button"].btn-block { border-color: #f0ad4e; } -.btn-warning:hover, -.btn-warning:focus, -.btn-warning:active { +.btn-warning:not([disabled]):not(.disabled):hover, +fieldset:not([disabled]) .btn-warning:hover, +.btn-warning:not([disabled]):not(.disabled):focus, +fieldset:not([disabled]) .btn-warning:focus, +.btn-warning:not([disabled]):not(.disabled):active, +fieldset:not([disabled]) .btn-warning:active { background-color: #eea236; border-color: #ec971f; } @@ -1697,9 +1706,12 @@ input[type="button"].btn-block { border-color: #d9534f; } -.btn-danger:hover, -.btn-danger:focus, -.btn-danger:active { +.btn-danger:not([disabled]):not(.disabled):hover, +fieldset:not([disabled]) .btn-danger:hover, +.btn-danger:not([disabled]):not(.disabled):focus, +fieldset:not([disabled]) .btn-danger:focus, +.btn-danger:not([disabled]):not(.disabled):active, +fieldset:not([disabled]) .btn-danger:active { background-color: #d43f3a; border-color: #c9302c; } @@ -1709,9 +1721,12 @@ input[type="button"].btn-block { border-color: #5cb85c; } -.btn-success:hover, -.btn-success:focus, -.btn-success:active { +.btn-success:not([disabled]):not(.disabled):hover, +fieldset:not([disabled]) .btn-success:hover, +.btn-success:not([disabled]):not(.disabled):focus, +fieldset:not([disabled]) .btn-success:focus, +.btn-success:not([disabled]):not(.disabled):active, +fieldset:not([disabled]) .btn-success:active { background-color: #4cae4c; border-color: #449d44; } @@ -1721,9 +1736,12 @@ input[type="button"].btn-block { border-color: #5bc0de; } -.btn-info:hover, -.btn-info:focus, -.btn-info:active { +.btn-info:not([disabled]):not(.disabled):hover, +fieldset:not([disabled]) .btn-info:hover, +.btn-info:not([disabled]):not(.disabled):focus, +fieldset:not([disabled]) .btn-info:focus, +.btn-info:not([disabled]):not(.disabled):active, +fieldset:not([disabled]) .btn-info:active { background-color: #46b8da; border-color: #31b0d5; } From b741c731a2ce3aaf0d891770705b3feb5b09c853 Mon Sep 17 00:00:00 2001 From: Vickash Mahabir Date: Fri, 18 Jan 2013 12:12:30 -0400 Subject: [PATCH 3/4] Fix logic error where a disabled button would change color in an enabled fieldset --- docs/assets/css/bootstrap.css | 48 +++++++++++++++++------------------ less/buttons.less | 4 +-- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 771df6bff9..5028c913ab 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1661,12 +1661,12 @@ input[type="button"].btn-block { border-color: #a7a9aa; } +fieldset:not([disabled]) .btn:not([disabled]):not(.disabled):hover, .btn:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn:hover, +fieldset:not([disabled]) .btn:not([disabled]):not(.disabled):focus, .btn:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn:focus, -.btn:not([disabled]):not(.disabled):active, -fieldset:not([disabled]) .btn:active { +fieldset:not([disabled]) .btn:not([disabled]):not(.disabled):active, +.btn:not([disabled]):not(.disabled):active { background-color: #9a9c9d; border-color: #8d9091; } @@ -1676,12 +1676,12 @@ fieldset:not([disabled]) .btn:active { border-color: #428bca; } +fieldset:not([disabled]) .btn-primary:not([disabled]):not(.disabled):hover, .btn-primary:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-primary:hover, +fieldset:not([disabled]) .btn-primary:not([disabled]):not(.disabled):focus, .btn-primary:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-primary:focus, -.btn-primary:not([disabled]):not(.disabled):active, -fieldset:not([disabled]) .btn-primary:active { +fieldset:not([disabled]) .btn-primary:not([disabled]):not(.disabled):active, +.btn-primary:not([disabled]):not(.disabled):active { background-color: #357ebd; border-color: #3071a9; } @@ -1691,12 +1691,12 @@ fieldset:not([disabled]) .btn-primary:active { border-color: #f0ad4e; } +fieldset:not([disabled]) .btn-warning:not([disabled]):not(.disabled):hover, .btn-warning:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-warning:hover, +fieldset:not([disabled]) .btn-warning:not([disabled]):not(.disabled):focus, .btn-warning:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-warning:focus, -.btn-warning:not([disabled]):not(.disabled):active, -fieldset:not([disabled]) .btn-warning:active { +fieldset:not([disabled]) .btn-warning:not([disabled]):not(.disabled):active, +.btn-warning:not([disabled]):not(.disabled):active { background-color: #eea236; border-color: #ec971f; } @@ -1706,12 +1706,12 @@ fieldset:not([disabled]) .btn-warning:active { border-color: #d9534f; } +fieldset:not([disabled]) .btn-danger:not([disabled]):not(.disabled):hover, .btn-danger:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-danger:hover, +fieldset:not([disabled]) .btn-danger:not([disabled]):not(.disabled):focus, .btn-danger:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-danger:focus, -.btn-danger:not([disabled]):not(.disabled):active, -fieldset:not([disabled]) .btn-danger:active { +fieldset:not([disabled]) .btn-danger:not([disabled]):not(.disabled):active, +.btn-danger:not([disabled]):not(.disabled):active { background-color: #d43f3a; border-color: #c9302c; } @@ -1721,12 +1721,12 @@ fieldset:not([disabled]) .btn-danger:active { border-color: #5cb85c; } +fieldset:not([disabled]) .btn-success:not([disabled]):not(.disabled):hover, .btn-success:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-success:hover, +fieldset:not([disabled]) .btn-success:not([disabled]):not(.disabled):focus, .btn-success:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-success:focus, -.btn-success:not([disabled]):not(.disabled):active, -fieldset:not([disabled]) .btn-success:active { +fieldset:not([disabled]) .btn-success:not([disabled]):not(.disabled):active, +.btn-success:not([disabled]):not(.disabled):active { background-color: #4cae4c; border-color: #449d44; } @@ -1736,12 +1736,12 @@ fieldset:not([disabled]) .btn-success:active { border-color: #5bc0de; } +fieldset:not([disabled]) .btn-info:not([disabled]):not(.disabled):hover, .btn-info:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-info:hover, +fieldset:not([disabled]) .btn-info:not([disabled]):not(.disabled):focus, .btn-info:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-info:focus, -.btn-info:not([disabled]):not(.disabled):active, -fieldset:not([disabled]) .btn-info:active { +fieldset:not([disabled]) .btn-info:not([disabled]):not(.disabled):active, +.btn-info:not([disabled]):not(.disabled):active { background-color: #46b8da; border-color: #31b0d5; } diff --git a/less/buttons.less b/less/buttons.less index 0e23f17301..16ddbad2d5 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -111,8 +111,8 @@ input[type="button"] { // Mixin for darkening only enabled buttons for link states .darken-button-states (@background, @border) { - &:not([disabled]):not(.disabled), - fieldset:not([disabled]) & { + fieldset:not([disabled]) &:not([disabled]):not(.disabled), + &:not([disabled]):not(.disabled) { &:hover, &:focus, &:active { From c77a459b3520a8ee14bebad887427c3cb540f76b Mon Sep 17 00:00:00 2001 From: Vickash Mahabir Date: Sat, 19 Jan 2013 19:32:55 -0400 Subject: [PATCH 4/4] IE8 compatible fix for disabled button hover --- docs/assets/css/bootstrap.css | 132 ++++++++++++++++++++++++---------- less/buttons.less | 16 +++-- 2 files changed, 108 insertions(+), 40 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 5028c913ab..c1357a79c1 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1661,91 +1661,151 @@ input[type="button"].btn-block { border-color: #a7a9aa; } -fieldset:not([disabled]) .btn:not([disabled]):not(.disabled):hover, -.btn:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn:not([disabled]):not(.disabled):focus, -.btn:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn:not([disabled]):not(.disabled):active, -.btn:not([disabled]):not(.disabled):active { +.btn:hover, +.btn:focus, +.btn:active { background-color: #9a9c9d; border-color: #8d9091; } +.btn.disabled:hover, +.btn[disabled]:hover, +fieldset[disabled] .btn:hover, +.btn.disabled:focus, +.btn[disabled]:focus, +fieldset[disabled] .btn:focus, +.btn.disabled:active, +.btn[disabled]:active, +fieldset[disabled] .btn:active { + background-color: #a7a9aa; + border-color: #a7a9aa; +} + .btn-primary { background-color: #428bca; border-color: #428bca; } -fieldset:not([disabled]) .btn-primary:not([disabled]):not(.disabled):hover, -.btn-primary:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-primary:not([disabled]):not(.disabled):focus, -.btn-primary:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-primary:not([disabled]):not(.disabled):active, -.btn-primary:not([disabled]):not(.disabled):active { +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active { background-color: #357ebd; border-color: #3071a9; } +.btn-primary.disabled:hover, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary:hover, +.btn-primary.disabled:focus, +.btn-primary[disabled]:focus, +fieldset[disabled] .btn-primary:focus, +.btn-primary.disabled:active, +.btn-primary[disabled]:active, +fieldset[disabled] .btn-primary:active { + background-color: #428bca; + border-color: #428bca; +} + .btn-warning { background-color: #f0ad4e; border-color: #f0ad4e; } -fieldset:not([disabled]) .btn-warning:not([disabled]):not(.disabled):hover, -.btn-warning:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-warning:not([disabled]):not(.disabled):focus, -.btn-warning:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-warning:not([disabled]):not(.disabled):active, -.btn-warning:not([disabled]):not(.disabled):active { +.btn-warning:hover, +.btn-warning:focus, +.btn-warning:active { background-color: #eea236; border-color: #ec971f; } +.btn-warning.disabled:hover, +.btn-warning[disabled]:hover, +fieldset[disabled] .btn-warning:hover, +.btn-warning.disabled:focus, +.btn-warning[disabled]:focus, +fieldset[disabled] .btn-warning:focus, +.btn-warning.disabled:active, +.btn-warning[disabled]:active, +fieldset[disabled] .btn-warning:active { + background-color: #f0ad4e; + border-color: #f0ad4e; +} + .btn-danger { background-color: #d9534f; border-color: #d9534f; } -fieldset:not([disabled]) .btn-danger:not([disabled]):not(.disabled):hover, -.btn-danger:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-danger:not([disabled]):not(.disabled):focus, -.btn-danger:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-danger:not([disabled]):not(.disabled):active, -.btn-danger:not([disabled]):not(.disabled):active { +.btn-danger:hover, +.btn-danger:focus, +.btn-danger:active { background-color: #d43f3a; border-color: #c9302c; } +.btn-danger.disabled:hover, +.btn-danger[disabled]:hover, +fieldset[disabled] .btn-danger:hover, +.btn-danger.disabled:focus, +.btn-danger[disabled]:focus, +fieldset[disabled] .btn-danger:focus, +.btn-danger.disabled:active, +.btn-danger[disabled]:active, +fieldset[disabled] .btn-danger:active { + background-color: #d9534f; + border-color: #d9534f; +} + .btn-success { background-color: #5cb85c; border-color: #5cb85c; } -fieldset:not([disabled]) .btn-success:not([disabled]):not(.disabled):hover, -.btn-success:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-success:not([disabled]):not(.disabled):focus, -.btn-success:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-success:not([disabled]):not(.disabled):active, -.btn-success:not([disabled]):not(.disabled):active { +.btn-success:hover, +.btn-success:focus, +.btn-success:active { background-color: #4cae4c; border-color: #449d44; } +.btn-success.disabled:hover, +.btn-success[disabled]:hover, +fieldset[disabled] .btn-success:hover, +.btn-success.disabled:focus, +.btn-success[disabled]:focus, +fieldset[disabled] .btn-success:focus, +.btn-success.disabled:active, +.btn-success[disabled]:active, +fieldset[disabled] .btn-success:active { + background-color: #5cb85c; + border-color: #5cb85c; +} + .btn-info { background-color: #5bc0de; border-color: #5bc0de; } -fieldset:not([disabled]) .btn-info:not([disabled]):not(.disabled):hover, -.btn-info:not([disabled]):not(.disabled):hover, -fieldset:not([disabled]) .btn-info:not([disabled]):not(.disabled):focus, -.btn-info:not([disabled]):not(.disabled):focus, -fieldset:not([disabled]) .btn-info:not([disabled]):not(.disabled):active, -.btn-info:not([disabled]):not(.disabled):active { +.btn-info:hover, +.btn-info:focus, +.btn-info:active { background-color: #46b8da; border-color: #31b0d5; } +.btn-info.disabled:hover, +.btn-info[disabled]:hover, +fieldset[disabled] .btn-info:hover, +.btn-info.disabled:focus, +.btn-info[disabled]:focus, +fieldset[disabled] .btn-info:focus, +.btn-info.disabled:active, +.btn-info[disabled]:active, +fieldset[disabled] .btn-info:active { + background-color: #5bc0de; + border-color: #5bc0de; +} + .btn-link, .btn-link:active, .btn-link[disabled], diff --git a/less/buttons.less b/less/buttons.less index 16ddbad2d5..5f5955bc16 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -111,13 +111,21 @@ input[type="button"] { // Mixin for darkening only enabled buttons for link states .darken-button-states (@background, @border) { - fieldset:not([disabled]) &:not([disabled]):not(.disabled), - &:not([disabled]):not(.disabled) { + &:hover, + &:focus, + &:active { + background-color: darken(@background, 5%); + border-color: darken(@border, 10%); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { &:hover, &:focus, &:active { - background-color: darken(@background, 5%); - border-color: darken(@border, 10%); + background-color: @background; + border-color: @border } } }