Skip to content

B
bootstrap
Commit dc5c6d6b authored by Mark Otto's avatar Mark Otto
Browse files
Options

Simplify form validation states while enabling them to be applied to one field at a time.

parent d0baa99a
Hide whitespace changes
Inline Side-by-side
Showing with 64 additions and 138 deletions
docs/assets/css/bootstrap.css
View file @ dc5c6d6b
...@@ -1116,117 +1116,57 @@ fieldset[disabled] input[type="checkbox"] { ...@@ -1116,117 +1116,57 @@ fieldset[disabled] input[type="checkbox"] {
background-color: transparent; background-color: transparent;
} }
.control-group.warning .control-label, .has-warning .control-label {
.control-group.warning .help-block,
.control-group.warning .help-inline {
color: #c09853; color: #c09853;
} }
.control-group.warning .checkbox, .has-warning .input-with-feedback {
.control-group.warning .radio, padding-right: 32px;
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
color: #c09853;
}
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
border-color: #c09853; border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
} }
.control-group.warning input:focus, .has-warning .input-with-feedback:focus {
.control-group.warning select:focus,
.control-group.warning textarea:focus {
border-color: #a47e3c; border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
} }
.control-group.warning .input-prepend .add-on, .has-error .control-label {
.control-group.warning .input-append .add-on {
color: #c09853;
background-color: #fcf8e3;
border-color: #c09853;
}
.control-group.error .control-label,
.control-group.error .help-block,
.control-group.error .help-inline {
color: #b94a48; color: #b94a48;
} }
.control-group.error .checkbox, .has-error .input-with-feedback {
.control-group.error .radio, padding-right: 32px;
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
color: #b94a48;
}
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
border-color: #b94a48; border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
} }
.control-group.error input:focus, .has-error .input-with-feedback:focus {
.control-group.error select:focus,
.control-group.error textarea:focus {
border-color: #953b39; border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
} }
.control-group.error .input-prepend .add-on, .has-success .control-label {
.control-group.error .input-append .add-on {
color: #b94a48;
background-color: #f2dede;
border-color: #b94a48;
}
.control-group.success .control-label,
.control-group.success .help-block,
.control-group.success .help-inline {
color: #468847; color: #468847;
} }
.control-group.success .checkbox, .has-success .input-with-feedback {
.control-group.success .radio, padding-right: 32px;
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
color: #468847;
}
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
border-color: #468847; border-color: #468847;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
} }
.control-group.success input:focus, .has-success .input-with-feedback:focus {
.control-group.success select:focus,
.control-group.success textarea:focus {
border-color: #356635; border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
} }
.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
color: #468847;
background-color: #dff0d8;
border-color: #468847;
}
input:focus:invalid, input:focus:invalid,
textarea:focus:invalid, textarea:focus:invalid,
select:focus:invalid { select:focus:invalid {
...@@ -1381,7 +1321,8 @@ select:focus:invalid:focus { ...@@ -1381,7 +1321,8 @@ select:focus:invalid:focus {
} }
.form-horizontal .control-group { .form-horizontal .control-group {
margin-bottom: 10px; position: relative;
margin-bottom: 20px;
} }
.form-horizontal .control-group:before, .form-horizontal .control-group:before,
...@@ -1394,10 +1335,17 @@ select:focus:invalid:focus { ...@@ -1394,10 +1335,17 @@ select:focus:invalid:focus {
clear: both; clear: both;
} }
.form-horizontal .control-group input,
.form-horizontal .control-group select,
.form-horizontal .control-group textarea,
.form-horizontal .control-group .uneditable-input {
margin-bottom: 0;
}
.form-horizontal .control-group > .control-label { .form-horizontal .control-group > .control-label {
float: left; float: left;
width: 160px; width: 160px;
padding-top: 5px; padding-top: 6px;
text-align: right; text-align: right;
} }
......
docs/css.html
View file @ dc5c6d6b
...@@ -1671,48 +1671,42 @@ For example, <code><section></code> should be wrapped ...@@ -1671,48 +1671,42 @@ For example, <code><section></code> should be wrapped
<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> <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>
<form class="bs-docs-example form-horizontal"> <form class="bs-docs-example form-horizontal">
<div class="control-group warning"> <div class="control-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label> <label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls"> <div class="controls">
<input type="text" id="inputWarning"> <input type="text" class="input-with-feedback" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div> </div>
</div> </div>
<div class="control-group error"> <div class="control-group has-error">
<label class="control-label" for="inputError">Input with error</label> <label class="control-label" for="inputError">Input with error</label>
<div class="controls"> <div class="controls">
<input type="text" id="inputError"> <input type="text" class="input-with-feedback" id="inputError">
<span class="help-inline">Please correct the error</span>
</div> </div>
</div> </div>
<div class="control-group success"> <div class="control-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label> <label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls"> <div class="controls">
<input type="text" id="inputSuccess"> <input type="text" class="input-with-feedback" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div> </div>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="control-group warning"&gt; &lt;div class="control-group has-warning"&gt;
&lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt; &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
&lt;div class="controls"&gt; &lt;div class="controls"&gt;
&lt;input type="text" id="inputWarning"&gt; &lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
&lt;span class="help-inline"&gt;Something may have gone wrong&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="control-group error"&gt; &lt;div class="control-group has-error"&gt;
&lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt; &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
&lt;div class="controls"&gt; &lt;div class="controls"&gt;
&lt;input type="text" id="inputError"&gt; &lt;input type="text" class="input-with-feedback" id="inputError"&gt;
&lt;span class="help-inline"&gt;Please correct the error&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="control-group success"&gt; &lt;div class="control-group has-success"&gt;
&lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt; &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
&lt;div class="controls"&gt; &lt;div class="controls"&gt;
&lt;input type="text" id="inputSuccess"&gt; &lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
&lt;span class="help-inline"&gt;Woohoo!&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
......
docs/templates/pages/css.mustache
View file @ dc5c6d6b
...@@ -1611,48 +1611,42 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped ...@@ -1611,48 +1611,42 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<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> <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>
<form class="bs-docs-example form-horizontal"> <form class="bs-docs-example form-horizontal">
<div class="control-group warning"> <div class="control-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label> <label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls"> <div class="controls">
<input type="text" id="inputWarning"> <input type="text" class="input-with-feedback" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div> </div>
</div> </div>
<div class="control-group error"> <div class="control-group has-error">
<label class="control-label" for="inputError">Input with error</label> <label class="control-label" for="inputError">Input with error</label>
<div class="controls"> <div class="controls">
<input type="text" id="inputError"> <input type="text" class="input-with-feedback" id="inputError">
<span class="help-inline">Please correct the error</span>
</div> </div>
</div> </div>
<div class="control-group success"> <div class="control-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label> <label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls"> <div class="controls">
<input type="text" id="inputSuccess"> <input type="text" class="input-with-feedback" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div> </div>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="control-group warning"&gt; &lt;div class="control-group has-warning"&gt;
&lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt; &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
&lt;div class="controls"&gt; &lt;div class="controls"&gt;
&lt;input type="text" id="inputWarning"&gt; &lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
&lt;span class="help-inline"&gt;Something may have gone wrong&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="control-group error"&gt; &lt;div class="control-group has-error"&gt;
&lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt; &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
&lt;div class="controls"&gt; &lt;div class="controls"&gt;
&lt;input type="text" id="inputError"&gt; &lt;input type="text" class="input-with-feedback" id="inputError"&gt;
&lt;span class="help-inline"&gt;Please correct the error&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="control-group success"&gt; &lt;div class="control-group has-success"&gt;
&lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt; &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
&lt;div class="controls"&gt; &lt;div class="controls"&gt;
&lt;input type="text" id="inputSuccess"&gt; &lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
&lt;span class="help-inline"&gt;Woohoo!&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
......
less/forms.less
View file @ dc5c6d6b
...@@ -342,15 +342,15 @@ input[type="checkbox"] { ...@@ -342,15 +342,15 @@ input[type="checkbox"] {
// -------------------------- // --------------------------
// Warning // Warning
.control-group.warning { .has-warning {
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-background); .formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
} }
// Error // Error
.control-group.error { .has-error {
.formFieldState(@state-error-text, @state-error-text, @state-error-background); .formFieldState(@state-error-text, @state-error-text, @state-error-background);
} }
// Success // Success
.control-group.success { .has-success {
.formFieldState(@state-success-text, @state-success-text, @state-success-background); .formFieldState(@state-success-text, @state-success-text, @state-success-background);
} }
...@@ -523,15 +523,23 @@ select:focus:invalid { ...@@ -523,15 +523,23 @@ select:focus:invalid {
// Increase spacing between groups // Increase spacing between groups
.control-group { .control-group {
margin-bottom: @line-height-base / 2; position: relative;
margin-bottom: @line-height-base;
.clearfix(); .clearfix();
input,
select,
textarea,
.uneditable-input {
margin-bottom: 0;
}
} }
// Float the labels left // Float the labels left
.control-group > .control-label { .control-group > .control-label {
float: left; float: left;
width: @component-offset-horizontal - 20; width: @component-offset-horizontal - 20;
padding-top: 5px; padding-top: 6px;
text-align: right; text-align: right;
} }
......
less/mixins.less
View file @ dc5c6d6b
...@@ -122,25 +122,14 @@ ...@@ -122,25 +122,14 @@
// FORMS // FORMS
// -------------------------------------------------- // --------------------------------------------------
// Mixin for form field states
.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { .formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
// Set the text color // Color the label text
.control-label, .control-label {
.help-block,
.help-inline {
color: @text-color; color: @text-color;
} }
// Style inputs accordingly // Set the border and box shadow on specific inputs to match
.checkbox, .input-with-feedback {
.radio, padding-right: 32px; // to account for the feedback icon
input,
select,
textarea {
color: @text-color;
}
input,
select,
textarea {
border-color: @border-color; border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus { &:focus {
...@@ -149,13 +138,6 @@ ...@@ -149,13 +138,6 @@
.box-shadow(@shadow); .box-shadow(@shadow);
} }
} }
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
color: @text-color;
background-color: @background-color;
border-color: @text-color;
}
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment