From 3b5d4f52a3c2a11ec732fd9ca3b58e83290cd03c Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 9 Dec 2012 23:42:05 -0800 Subject: [PATCH] fixes #5605: style as disabled all form controls & btns under a disabled fieldset this is a resubmission of #5875, but now against branch 3.0.0-wip does not exclude elements under a fieldset's legend issue #6058 is a duplicate of #5605 --- docs/assets/css/bootstrap.css | 45 ++++++++++++++++++++++++----------- less/buttons.less | 17 +++++++++---- less/forms.less | 29 ++++++++++++---------- less/mixins.less | 2 +- 4 files changed, 60 insertions(+), 33 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d4495a2704..06384d3649 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1130,7 +1130,10 @@ select[disabled], textarea[disabled], input[readonly], select[readonly], -textarea[readonly] { +textarea[readonly], +fieldset[disabled] input, +fieldset[disabled] select, +fieldset[disabled] textarea { cursor: not-allowed; background-color: #eeeeee; } @@ -1138,7 +1141,9 @@ textarea[readonly] { input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], -input[type="checkbox"][readonly] { +input[type="checkbox"][readonly], +fieldset[disabled] input[type="radio"], +fieldset[disabled] input[type="checkbox"] { background-color: transparent; } @@ -2777,7 +2782,8 @@ button.close { .btn:active, .btn.active, .btn.disabled, -.btn[disabled] { +.btn[disabled], +fieldset[disabled] .btn { color: #333333; background-color: #e6e6e6; } @@ -2812,7 +2818,8 @@ button.close { } .btn.disabled, -.btn[disabled] { +.btn[disabled], +fieldset[disabled] .btn { cursor: default; background-image: none; opacity: 0.65; @@ -2907,7 +2914,8 @@ input[type="button"].btn-block { .btn-primary:active, .btn-primary.active, .btn-primary.disabled, -.btn-primary[disabled] { +.btn-primary[disabled], +fieldset[disabled] .btn-primary { color: #ffffff; background-color: #0044cc; } @@ -2937,7 +2945,8 @@ input[type="button"].btn-block { .btn-warning:active, .btn-warning.active, .btn-warning.disabled, -.btn-warning[disabled] { +.btn-warning[disabled], +fieldset[disabled] .btn-warning { color: #ffffff; background-color: #f89406; } @@ -2967,7 +2976,8 @@ input[type="button"].btn-block { .btn-danger:active, .btn-danger.active, .btn-danger.disabled, -.btn-danger[disabled] { +.btn-danger[disabled], +fieldset[disabled] .btn-danger { color: #ffffff; background-color: #bd362f; } @@ -2997,7 +3007,8 @@ input[type="button"].btn-block { .btn-success:active, .btn-success.active, .btn-success.disabled, -.btn-success[disabled] { +.btn-success[disabled], +fieldset[disabled] .btn-success { color: #ffffff; background-color: #51a351; } @@ -3027,7 +3038,8 @@ input[type="button"].btn-block { .btn-info:active, .btn-info.active, .btn-info.disabled, -.btn-info[disabled] { +.btn-info[disabled], +fieldset[disabled] .btn-info { color: #ffffff; background-color: #2f96b4; } @@ -3057,7 +3069,8 @@ input[type="button"].btn-block { .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, -.btn-inverse[disabled] { +.btn-inverse[disabled], +fieldset[disabled] .btn-inverse { color: #ffffff; background-color: #222222; } @@ -3069,7 +3082,8 @@ input[type="button"].btn-block { .btn-link, .btn-link:active, -.btn-link[disabled] { +.btn-link[disabled], +fieldset[disabled] .btn-link { background-color: transparent; background-image: none; -webkit-box-shadow: none; @@ -3089,7 +3103,8 @@ input[type="button"].btn-block { background-color: transparent; } -.btn-link[disabled]:hover { +.btn-link[disabled]:hover, +fieldset[disabled] .btn-link:hover { color: #333333; text-decoration: none; } @@ -3883,7 +3898,8 @@ input[type="button"].btn-block { .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, -.navbar .btn-navbar[disabled] { +.navbar .btn-navbar[disabled], +fieldset[disabled] .navbar .btn-navbar { color: #ffffff; background-color: #e5e5e5; } @@ -4133,7 +4149,8 @@ input[type="button"].btn-block { .navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active, .navbar-inverse .btn-navbar.disabled, -.navbar-inverse .btn-navbar[disabled] { +.navbar-inverse .btn-navbar[disabled], +fieldset[disabled] .navbar-inverse .btn-navbar { color: #ffffff; background-color: #040404; } diff --git a/less/buttons.less b/less/buttons.less index 92c9477aad..4af87c5798 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -48,7 +48,8 @@ // Disabled state &.disabled, - &[disabled] { + &[disabled], + fieldset[disabled] & { cursor: default; background-image: none; .opacity(65); @@ -174,7 +175,8 @@ input[type="button"] { // Make a button look and behave like a link .btn-link, .btn-link:active, -.btn-link[disabled] { +.btn-link[disabled], +fieldset[disabled] .btn-link { background-color: transparent; background-image: none; .box-shadow(none); @@ -190,7 +192,12 @@ input[type="button"] { text-decoration: underline; background-color: transparent; } -.btn-link[disabled]:hover { - color: @grayDark; - text-decoration: none; +.btn-link { + &[disabled], + fieldset[disabled] & { + &:hover { + color: @grayDark; + text-decoration: none; + } + } } diff --git a/less/forms.less b/less/forms.less index fe1bb9d408..0eca554c3d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -330,21 +330,24 @@ textarea[class*="span"], // -------------- // Disabled and read-only inputs -input[disabled], -select[disabled], -textarea[disabled], -input[readonly], -select[readonly], -textarea[readonly] { - cursor: not-allowed; - background-color: @input-background-disabled; +input, +select, +textarea { + &[disabled], + &[readonly], + fieldset[disabled] & { + cursor: not-allowed; + background-color: @input-background-disabled; + } } // Explicitly reset the colors here -input[type="radio"][disabled], -input[type="checkbox"][disabled], -input[type="radio"][readonly], -input[type="checkbox"][readonly] { - background-color: transparent; +input[type="radio"], +input[type="checkbox"] { + &[disabled], + &[readonly], + fieldset[disabled] & { + background-color: transparent; + } } diff --git a/less/mixins.less b/less/mixins.less index 63be2318ca..5e323cc3ea 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -416,7 +416,7 @@ .reset-filter(); // in these cases the gradient won't cover the background, so we override - &:hover, &:active, &.active, &.disabled, &[disabled] { + &:hover, &:active, &.active, &.disabled, &[disabled], fieldset[disabled] & { color: @text-color; background-color: @endColor; }