mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Simplify form validation states while enabling them to be applied to one field at a time.
This commit is contained in:
Mark Otto
parent
d0baa99aed
commit
dc5c6d6be8
5 changed files with 64 additions and 138 deletions
96
docs/assets/css/bootstrap.css
vendored
96
docs/assets/css/bootstrap.css
vendored
|
|
@ -1116,117 +1116,57 @@ fieldset[disabled] input[type="checkbox"] {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.control-group.warning .control-label,
|
||||
.control-group.warning .help-block,
|
||||
.control-group.warning .help-inline {
|
||||
.has-warning .control-label {
|
||||
color: #c09853;
|
||||
}
|
||||
|
||||
.control-group.warning .checkbox,
|
||||
.control-group.warning .radio,
|
||||
.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 {
|
||||
.has-warning .input-with-feedback {
|
||||
padding-right: 32px;
|
||||
border-color: #c09853;
|
||||
-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);
|
||||
}
|
||||
|
||||
.control-group.warning input:focus,
|
||||
.control-group.warning select:focus,
|
||||
.control-group.warning textarea:focus {
|
||||
.has-warning .input-with-feedback:focus {
|
||||
border-color: #a47e3c;
|
||||
-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;
|
||||
}
|
||||
|
||||
.control-group.warning .input-prepend .add-on,
|
||||
.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 {
|
||||
.has-error .control-label {
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
.control-group.error .checkbox,
|
||||
.control-group.error .radio,
|
||||
.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 {
|
||||
.has-error .input-with-feedback {
|
||||
padding-right: 32px;
|
||||
border-color: #b94a48;
|
||||
-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);
|
||||
}
|
||||
|
||||
.control-group.error input:focus,
|
||||
.control-group.error select:focus,
|
||||
.control-group.error textarea:focus {
|
||||
.has-error .input-with-feedback:focus {
|
||||
border-color: #953b39;
|
||||
-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;
|
||||
}
|
||||
|
||||
.control-group.error .input-prepend .add-on,
|
||||
.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 {
|
||||
.has-success .control-label {
|
||||
color: #468847;
|
||||
}
|
||||
|
||||
.control-group.success .checkbox,
|
||||
.control-group.success .radio,
|
||||
.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 {
|
||||
.has-success .input-with-feedback {
|
||||
padding-right: 32px;
|
||||
border-color: #468847;
|
||||
-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);
|
||||
}
|
||||
|
||||
.control-group.success input:focus,
|
||||
.control-group.success select:focus,
|
||||
.control-group.success textarea:focus {
|
||||
.has-success .input-with-feedback:focus {
|
||||
border-color: #356635;
|
||||
-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;
|
||||
}
|
||||
|
||||
.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,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
|
|
@ -1381,7 +1321,8 @@ select:focus:invalid:focus {
|
|||
}
|
||||
|
||||
.form-horizontal .control-group {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group:before,
|
||||
|
|
@ -1394,10 +1335,17 @@ select:focus:invalid:focus {
|
|||
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 {
|
||||
float: left;
|
||||
width: 160px;
|
||||
padding-top: 5px;
|
||||
padding-top: 6px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1671,48 +1671,42 @@ For example, <code>&lt;section&gt;</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>
|
||||
|
||||
<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>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback" id="inputSuccess">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="control-group warning">
|
||||
<div class="control-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback id="inputSuccess"">
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
|
|
|||
30
docs/templates/pages/css.mustache
vendored
30
docs/templates/pages/css.mustache
vendored
|
|
@ -1611,48 +1611,42 @@ For example, <code>&lt;section&gt;</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>
|
||||
|
||||
<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>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback" id="inputSuccess">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="control-group warning">
|
||||
<div class="control-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback id="inputSuccess"">
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
|
|
|||
|
|
@ -342,15 +342,15 @@ input[type="checkbox"] {
|
|||
// --------------------------
|
||||
|
||||
// Warning
|
||||
.control-group.warning {
|
||||
.has-warning {
|
||||
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
|
||||
}
|
||||
// Error
|
||||
.control-group.error {
|
||||
.has-error {
|
||||
.formFieldState(@state-error-text, @state-error-text, @state-error-background);
|
||||
}
|
||||
// Success
|
||||
.control-group.success {
|
||||
.has-success {
|
||||
.formFieldState(@state-success-text, @state-success-text, @state-success-background);
|
||||
}
|
||||
|
||||
|
|
@ -523,15 +523,23 @@ select:focus:invalid {
|
|||
|
||||
// Increase spacing between groups
|
||||
.control-group {
|
||||
margin-bottom: @line-height-base / 2;
|
||||
position: relative;
|
||||
margin-bottom: @line-height-base;
|
||||
.clearfix();
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Float the labels left
|
||||
.control-group > .control-label {
|
||||
float: left;
|
||||
width: @component-offset-horizontal - 20;
|
||||
padding-top: 5px;
|
||||
padding-top: 6px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -122,25 +122,14 @@
|
|||
// FORMS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Mixin for form field states
|
||||
.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
|
||||
// Set the text color
|
||||
.control-label,
|
||||
.help-block,
|
||||
.help-inline {
|
||||
// Color the label text
|
||||
.control-label {
|
||||
color: @text-color;
|
||||
}
|
||||
// Style inputs accordingly
|
||||
.checkbox,
|
||||
.radio,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: @text-color;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.input-with-feedback {
|
||||
padding-right: 32px; // to account for the feedback icon
|
||||
border-color: @border-color;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
|
|
@ -149,13 +138,6 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue