rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Add info state to form validation

Browse Source
This commit is contained in:
Andreas Cederström 2012-08-22 11:24:02 +02:00
parent 361889def9
commit a9764c34a7
4 changed files with 59 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
docs/assets/css/bootstrap.css vendored
View File

@ -1406,6 +1406,45 @@ input[type="checkbox"][readonly] {
border-color: #468847;
}
.control-group.info > label,
.control-group.info .help-block,
.control-group.info .help-inline {
color: #3a87ad;
}
.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
color: #3a87ad;
}
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
border-color: #3a87ad;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-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.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
border-color: #2d6987;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
}
.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
color: #3a87ad;
background-color: #d9edf7;
border-color: #3a87ad;
}
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {

9
docs/base-css.html
View File

@ -1367,7 +1367,7 @@ For example, <code><section></code> should be wrapped as inlin
</pre>
<h3>Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, 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">
<div class="control-group warning">
@ -1384,6 +1384,13 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputError">Input with info</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Username is taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">

9
docs/templates/pages/base-css.mustache vendored
View File

@ -1304,7 +1304,7 @@
</pre>
<h3>{{_i}}Validation states{{/i}}</h3>
<p>{{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p>
<p>{{_i}}Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p>
<form class="bs-docs-example form-horizontal">
<div class="control-group warning">
@ -1321,6 +1321,13 @@
<span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputError">{{_i}}Input with info{{/i}}</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">{{_i}}Username is taken{{/i}}</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
<div class="controls">

4
less/forms.less
View File

@ -349,6 +349,10 @@ input[type="checkbox"][readonly] {
.control-group.success {
.formFieldState(@successText, @successText, @successBackground);
}
// Success
.control-group.info {
.formFieldState(@infoText, @infoText, @infoBackground);
}
// HTML5 invalid states
// Shares styles with the .control-group.error above