Update forms

* Overhaul the form control sizing section to only show sizing via grid columns as parents, not as classes on inputs
* Restore the inline-form option
* Restore the bottom margin on form controls and make them block level instead of inline-block
* More misc docs cleanup for forms

1 files changed, 23 insertions, 5 deletions

diff --git a/less/forms.less b/less/forms.less
index 2a1a4e90c..6162cd4f1 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -54,10 +54,10 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"] {
-  display: inline-block;
+  display: block;
   min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: 6px 9px;
-  // margin-bottom: (@line-height-base / 2);
+  margin-bottom: 10px;
   font-size: @font-size-base;
   line-height: @line-height-base;
   color: @gray;
@@ -174,6 +174,7 @@ textarea {
   min-height: @line-height-base; // clear the floating input if there is no label text
   margin-bottom: (@line-height-base / 2);
   padding-left: 20px;
+  vertical-align: middle;
   label {
     display: inline;
     margin-bottom: 0;
@@ -387,14 +388,16 @@ select:focus:invalid {
   display: table;
 
   // Undo padding and float of grid classes
-  &[class*="span"] {
+  &.col {
     float: none;
-    padding: 0;
+    padding-left: 0;
+    padding-right: 0;
   }
 
   input,
   select {
     width: 100%;
+    margin-bottom: 0;
   }
 }
 
@@ -404,7 +407,7 @@ select:focus:invalid {
 .input-group-btn,
 .input-group input {
   display: table-cell;
-  margin: 0;
+  /*margin: 0;*/
   border-radius: 0;
   &.input-small {
     border-radius: 0;
@@ -515,6 +518,21 @@ select:focus:invalid {
 
 
 
+// Inline forms
+// --------------------------------------------------
+
+.form-inline {
+  input,
+  select,
+  textarea,
+  .radio,
+  .checkbox {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}
+
+
 // Horizontal forms
 // --------------------------------------------------