Update form validation states

* Once again no longer applies to single inputs (this is a bit simpler,
but I'm open to new ideas) but the entire set of inputs, labels, and
help text within a particular element. However, the styles are not too
dependent on markup or layout, so they're super flexible.
* Simplified the markup in the validation docs examples to match latest
changes.
* Renamed `.form-state-validation` mixin to `.form-control-validation`
to match naming of prev commit.

css.html

@@ -1496,51 +1496,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="forms-validation">Validation states</h3>
-    <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
-    <ul>
-      <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
-      <li>Add .input-with-feedback to the field(s) in question</li>
-    </ul>
-    <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
+    <p>Bootstrap includes validation styles for error, warning, and success states on from controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li>
 
-    <form class="bs-example form-horizontal">
-      <div class="has-warning">
+    <form class="bs-example">
+      <div class="form-group has-warning">
         <label class="control-label" for="inputWarning">Input with warning</label>
-        <div class="controls">
-          <input type="text" class="form-control input-with-feedback" id="inputWarning">
-        </div>
+        <input type="text" class="form-control" id="inputWarning">
       </div>
-      <div class="has-error">
+      <div class="form-group has-error">
         <label class="control-label" for="inputError">Input with error</label>
-        <div class="controls">
-          <input type="text" class="form-control input-with-feedback" id="inputError">
-        </div>
+        <input type="text" class="form-control" id="inputError">
       </div>
-      <div class="has-success">
+      <div class="form-group has-success">
         <label class="control-label" for="inputSuccess">Input with success</label>
-        <div class="controls">
-          <input type="text" class="form-control input-with-feedback" id="inputSuccess">
-        </div>
+        <input type="text" class="form-control" id="inputSuccess">
       </div>
     </form>
 {% highlight html %}
-<div class="has-warning">
+<div class="form-group has-warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
-  <div class="controls">
-    <input type="text" class="form-control input-with-feedback" id="inputWarning">
-  </div>
+  <input type="text" class="form-control" id="inputWarning">
 </div>
-<div class="has-error">
+<div class="form-group has-error">
   <label class="control-label" for="inputError">Input with error</label>
-  <div class="controls">
-    <input type="text" class="form-control input-with-feedback" id="inputError">
-  </div>
+  <input type="text" class="form-control" id="inputError">
 </div>
-<div class="has-success">
+<div class="form-group has-success">
   <label class="control-label" for="inputSuccess">Input with success</label>
-  <div class="controls">
-    <input type="text" class="form-control input-with-feedback" id="inputSuccess">
-  </div>
+  <input type="text" class="form-control" id="inputSuccess">
 </div>
 {% endhighlight %}
 

dist/css/bootstrap.css

@@ -1503,14 +1503,14 @@ select.input-small {
   color: #c09853;
 }
 
-.has-warning .input-with-feedback {
+.has-warning .form-control {
   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);
 }
 
-.has-warning .input-with-feedback:focus {
+.has-warning .form-control: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;
@@ -1527,14 +1527,14 @@ select.input-small {
   color: #b94a48;
 }
 
-.has-error .input-with-feedback {
+.has-error .form-control {
   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);
 }
 
-.has-error .input-with-feedback:focus {
+.has-error .form-control: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;
@@ -1551,14 +1551,14 @@ select.input-small {
   color: #468847;
 }
 
-.has-success .input-with-feedback {
+.has-success .form-control {
   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);
 }
 
-.has-success .input-with-feedback:focus {
+.has-success .form-control: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;

less/forms.less

@@ -264,15 +264,15 @@ select {
 
 // Warning
 .has-warning {
-  .form-field-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
+  .form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
 }
 // Error
 .has-error {
-  .form-field-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
+  .form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
 }
 // Success
 .has-success {
-  .form-field-validation(@state-success-text, @state-success-text, @state-success-bg);
+  .form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
 }
 
 

less/mixins.less

@@ -508,18 +508,20 @@
   }
 }
 
-// Framework mixins
-// --------------------------------------------------
 
-// Generate form validation states
-.form-field-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
-  // Color the label text
+// Form validation states
+//
+// Used in forms.less to generate the form validation CSS for warnings, errors,
+// and successes.
+
+.form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
+  // Color the label and help text
   .help-block,
   .control-label {
     color: @text-color;
   }
   // Set the border and box shadow on specific inputs to match
-  .input-with-feedback {
+  .form-control {
     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