diff options
| -rw-r--r-- | docs/assets/css/bootstrap.css | 18 | ||||
| -rw-r--r-- | docs/css.html | 38 | ||||
| -rw-r--r-- | docs/templates/pages/css.mustache | 38 | ||||
| -rw-r--r-- | less/buttons.less | 17 | ||||
| -rw-r--r-- | less/forms.less | 29 | ||||
| -rw-r--r-- | less/mixins.less | 2 |
6 files changed, 118 insertions, 24 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e8c2b1fc20..83fec25aeb 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1127,7 +1127,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; } @@ -1135,7 +1138,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; } @@ -2583,7 +2588,8 @@ button.close { } .btn.disabled, -.btn[disabled] { +.btn[disabled], +fieldset[disabled] .btn { cursor: default; opacity: 0.65; filter: alpha(opacity=65); @@ -2753,7 +2759,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; @@ -2773,7 +2780,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; } diff --git a/docs/css.html b/docs/css.html index fdf1fe5958..3ad55d0803 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1649,6 +1649,44 @@ For example, <code><section></code> should be wrapped as inlin <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> </pre> + <h3>Disabled fieldsets</h3> + <p>Add the <code>disabled</code> attribute on a <code>fieldset</code> to disable all the controls within the fieldset at once.</p> + <form class="bs-docs-example 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> +<pre class="prettyprint linenums"> +<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> +</pre> + <p> + <span class="label label-info">Heads up!</span> + Contrary to the HTML5 spec, form controls within a <code>fieldset</code>'s <code>legend</code> will also be disabled.<br> + Also, <code><a></code> buttons within a <code>fieldset[disabled]</code> will be styled like they each had the <code>.disabled</code> class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. + </p> + <h3>Validation states</h3> <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p> diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 78bf7febf2..0e39c80de0 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1589,6 +1589,44 @@ For example, <code><section></code> should be wrapped as inlin <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> </pre> + <h3>Disabled fieldsets</h3> + <p>Add the <code>disabled</code> attribute on a <code>fieldset</code> to disable all the controls within the fieldset at once.</p> + <form class="bs-docs-example 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> +<pre class="prettyprint linenums"> +<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> +</pre> + <p> + <span class="label label-info">Heads up!</span> + Contrary to the HTML5 spec, form controls within a <code>fieldset</code>'s <code>legend</code> will also be disabled.<br> + Also, <code><a></code> buttons within a <code>fieldset[disabled]</code> will be styled like they each had the <code>.disabled</code> class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. + </p> + <h3>Validation states</h3> <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p> diff --git a/less/buttons.less b/less/buttons.less index d35b7f9011..14de3529ca 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -39,7 +39,8 @@ } &.disabled, - &[disabled] { + &[disabled], + fieldset[disabled] & { cursor: default; .opacity(65); .box-shadow(none); @@ -138,7 +139,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); @@ -154,7 +156,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 3c44278ccc..8fa9854151 100644 --- a/less/forms.less +++ b/less/forms.less @@ -331,21 +331,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 bdd8cf1e04..ebfce5f912 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -415,8 +415,8 @@ &:active, &.active { color: @text-color; - background-position: 0 -15px; background-color: @background-end; + background-position: 0 -15px; } &:active, &.active { |