Add info state to form validation

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d6b4fc38dae06c8d8f05c223c5a9d08fef13d58a..cbc25bddb7c2f08b16e20f64a8f44d18a887db73 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -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 {

diff --git a/docs/base-css.html b/docs/base-css.html
index 9874bcfbb4b577b3c29794c5d43a9cffdcb7823f..576a5cfb1aeada3dbc1d1833b99e6814879cc4e9 100644 (file)
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -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">

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index e6970fbc7b909e24c59e1e9b1cf4b2142792bb31..7d2fd8d55d812b460947efe23b554ada1bb30906 100644 (file)
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -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">

diff --git a/less/forms.less b/less/forms.less
index c766f5d9c271e37ec7980e3661fb9340d1644868..2bac862062c097b5f93d286a3d14b024b825cc6a 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -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