aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2012-12-19 23:18:02 -0800
committerMark Otto <[email protected]>2012-12-19 23:18:02 -0800
commit09dde5c84ab890404703c95f704978f5cf88fa2b (patch)
treef35ccc0da18b0b56230bd711f620aae1bc8b3592 /docs
parenta27952efd0f25e99030a9384f66bcd602d6a1b37 (diff)
parent8c8a14ab59553984d6bb2b1d080e9f3917d6e981 (diff)
downloadbootstrap-09dde5c84ab890404703c95f704978f5cf88fa2b.tar.xz
bootstrap-09dde5c84ab890404703c95f704978f5cf88fa2b.zip
Merge branch '3.0.0-wip' of https://github.com/cvrebert/bootstrap into cvrebert-3.0.0-wip
Conflicts: docs/assets/css/bootstrap.css less/mixins.less
Diffstat (limited to 'docs')
-rw-r--r--docs/assets/css/bootstrap.css18
-rw-r--r--docs/css.html38
-rw-r--r--docs/templates/pages/css.mustache38
3 files changed, 89 insertions, 5 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e8c2b1fc2..83fec25ae 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 fdf1fe595..3ad55d080 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1649,6 +1649,44 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</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">
+&lt;form class="form-inline"&gt;
+ &lt;fieldset disabled&gt;
+ &lt;input type="text" class="span4" placeholder="These controls are all disabled just"&gt;
+ &lt;select class="span4"&gt;
+ &lt;option&gt;by being under a disabled fieldset&lt;/option&gt;
+ &lt;/select&gt;
+ &lt;div class="checkbox"&gt;
+ &lt;label&gt;
+ &lt;input type="checkbox"&gt; Can't check this
+ &lt;/label&gt;
+ &lt;/div&gt;
+ &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
+ &lt;/fieldset&gt;
+&lt;/form&gt;
+</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>&lt;a&gt;</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 78bf7febf..0e39c80de 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1589,6 +1589,44 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</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">
+&lt;form class="form-inline"&gt;
+ &lt;fieldset disabled&gt;
+ &lt;input type="text" class="span4" placeholder="These controls are all disabled just"&gt;
+ &lt;select class="span4"&gt;
+ &lt;option&gt;by being under a disabled fieldset&lt;/option&gt;
+ &lt;/select&gt;
+ &lt;div class="checkbox"&gt;
+ &lt;label&gt;
+ &lt;input type="checkbox"&gt; Can't check this
+ &lt;/label&gt;
+ &lt;/div&gt;
+ &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
+ &lt;/fieldset&gt;
+&lt;/form&gt;
+</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>&lt;a&gt;</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>