From 3b5d4f52a3c2a11ec732fd9ca3b58e83290cd03c Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 9 Dec 2012 23:42:05 -0800 Subject: [PATCH 1/3] 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; } From 48759eee941729a2e21a89215123b2e05c0b8549 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 10 Dec 2012 01:33:02 -0800 Subject: [PATCH 2/3] document fieldset[disabled] styling added in #6199; per @mdo --- docs/css.html | 37 +++++++++++++++++++++++++++++++ docs/templates/pages/css.mustache | 37 +++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+) diff --git a/docs/css.html b/docs/css.html index 728dac389f..f2f54a3fc1 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1725,6 +1725,43 @@ For example, <code><section></code> should be wrapped as inlin <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> +

Disabled fieldsets

+

Add the disabled attribute on a fieldset to disable all the controls within the fieldset at once.

+
+
+ + +
+ +
+ +
+
+
+<form class="form-inline">
+  <fieldset disabled>
+    <input type="text" class="span4" placeholder="These controls are all disabled just">
+    <select class="span4">
+      <option>by being under a disabled fieldset</option>
+    </select>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>
+
+

+ Heads up! + <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. +

+

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index cf99025196..790c0442bc 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1665,6 +1665,43 @@ For example, <code><section></code> should be wrapped as inlin <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> +

Disabled fieldsets

+

Add the disabled attribute on a fieldset to disable all the controls within the fieldset at once.

+
+
+ + +
+ +
+ +
+
+
+<form class="form-inline">
+  <fieldset disabled>
+    <input type="text" class="span4" placeholder="These controls are all disabled just">
+    <select class="span4">
+      <option>by being under a disabled fieldset</option>
+    </select>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>
+
+

+ Heads up! + <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. +

+

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

From 8c8a14ab59553984d6bb2b1d080e9f3917d6e981 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 10 Dec 2012 01:46:16 -0800 Subject: [PATCH 3/3] document caveat regarding fieldset legend and #6199 --- docs/css.html | 3 ++- docs/templates/pages/css.mustache | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/css.html b/docs/css.html index f2f54a3fc1..7f67fa2947 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1759,7 +1759,8 @@ For example, <code><section></code> should be wrapped as inlin

Heads up! - <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. + Contrary to the HTML5 spec, form controls within a fieldset's legend will also be disabled.
+ Also, <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.

Validation states

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 790c0442bc..cdaf5a847c 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1699,7 +1699,8 @@ For example, <code><section></code> should be wrapped as inlin

Heads up! - <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. + Contrary to the HTML5 spec, form controls within a fieldset's legend will also be disabled.
+ Also, <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.

Validation states