Add new form feedback states, clean up existing form styles

New stuff:

* Adds `.has-feedback` and `.form-control-feedback` to show icon-based
form feedback to users. Fixes #11836.
* Removes the `width: 1em` on `.glyphicon` because it makes it
impractical to resize the width of all icons, even if they’re not
“empty” (e.g., a simple `.glyphicon { width: 30px; }` wouldn’t work,
nor would a class preceeded by a parent class.

Clean up:

* Sets `width: auto;` on all `.form-control`s within inline forms.
* Removes all the inline `select` menu `width` styles because all
inputs are now `auto`.
* Update form states docs to separate out sections better.

1 files changed, 43 insertions, 13 deletions

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 8f7aff52a5..40f22ae8a7 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -1783,6 +1783,22 @@ select.input-lg {
 textarea.input-lg {
   height: auto;
 }
+.has-feedback {
+  position: relative;
+}
+.has-feedback .form-control {
+  padding-right: 42.5px;
+}
+.has-feedback .form-control-feedback {
+  position: absolute;
+  top: 25px;
+  right: 0;
+  display: block;
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+}
 .has-warning .help-block,
 .has-warning .control-label,
 .has-warning .radio,
@@ -1806,6 +1822,9 @@ textarea.input-lg {
   background-color: #fcf8e3;
   border-color: #8a6d3b;
 }
+.has-warning .form-control-feedback {
+  color: #8a6d3b;
+}
 .has-error .help-block,
 .has-error .control-label,
 .has-error .radio,
@@ -1829,6 +1848,9 @@ textarea.input-lg {
   background-color: #f2dede;
   border-color: #a94442;
 }
+.has-error .form-control-feedback {
+  color: #a94442;
+}
 .has-success .help-block,
 .has-success .control-label,
 .has-success .radio,
@@ -1852,6 +1874,9 @@ textarea.input-lg {
   background-color: #dff0d8;
   border-color: #3c763d;
 }
+.has-success .form-control-feedback {
+  color: #3c763d;
+}
 .form-control-static {
   margin-bottom: 0;
 }
@@ -1869,13 +1894,12 @@ textarea.input-lg {
   }
   .form-inline .form-control {
     display: inline-block;
-    vertical-align: middle;
-  }
-  .form-inline select.form-control {
     width: auto;
+    vertical-align: middle;
   }
-  .form-inline > select.form-control {
-    width: auto;
+  .form-inline .control-label {
+    margin-bottom: 0;
+    vertical-align: middle;
   }
   .form-inline .radio,
   .form-inline .checkbox {
@@ -1890,6 +1914,9 @@ textarea.input-lg {
     float: none;
     margin-left: 0;
   }
+  .form-inline .has-feedback .form-control-feedback {
+    top: 0;
+  }
 }
 .form-horizontal .control-label,
 .form-horizontal .radio,
@@ -1916,6 +1943,10 @@ textarea.input-lg {
     text-align: right;
   }
 }
+.form-horizontal .has-feedback .form-control-feedback {
+  top: 0;
+  right: 15px;
+}
 .btn {
   display: inline-block;
   padding: 6px 12px;
@@ -2311,9 +2342,6 @@ input[type="button"].btn-block {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.glyphicon:empty {
-  width: 1em;
-}
 .glyphicon-asterisk:before {
   content: "\2a";
 }
@@ -3783,13 +3811,12 @@ textarea.input-group-sm > .input-group-btn > .btn {
   }
   .navbar-form .form-control {
     display: inline-block;
-    vertical-align: middle;
-  }
-  .navbar-form select.form-control {
     width: auto;
+    vertical-align: middle;
   }
-  .navbar-form > select.form-control {
-    width: auto;
+  .navbar-form .control-label {
+    margin-bottom: 0;
+    vertical-align: middle;
   }
   .navbar-form .radio,
   .navbar-form .checkbox {
@@ -3804,6 +3831,9 @@ textarea.input-group-sm > .input-group-btn > .btn {
     float: none;
     margin-left: 0;
   }
+  .navbar-form .has-feedback .form-control-feedback {
+    top: 0;
+  }
 }
 @media (max-width: 767px) {
   .navbar-form .form-group {