Re-add and update form styles:

* Restore forms.less file
* Overhaul .radio.inline .checkbox.inline to be .radio-inline or .checkbox-inline
* Update docs to reflect changes

1 files changed, 52 insertions, 37 deletions

diff --git a/less/forms.less b/less/forms.less
index cc7cc8a6a..781218b44 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -7,7 +7,7 @@
 // -------------------------
 
 form {
-  margin: 0 0 @line-height-base;
+  margin: 0;
 }
 
 fieldset {
@@ -55,7 +55,7 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  display: inline-block;
+  display: block;
   .box-sizing(border-box); // Makes inputs behave like true block-level elements
   min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: 6px 9px;
@@ -67,7 +67,7 @@ input[type="color"],
   background-color: @input-background;
   border: 1px solid @input-border;
   border-radius: @input-border-radius;
-  // .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   .transition(~"border linear .2s, box-shadow linear .2s");
 }
 
@@ -203,18 +203,26 @@ textarea {
 .checkbox {
   display: block;
   min-height: @line-height-base; // clear the floating input if there is no label text
+  margin-bottom: @line-height-base / 2;
   padding-left: 20px;
+  label {
+    display: inline;
+    margin-bottom: 0;
+    font-weight: normal;
+  }
 }
-.radio label,
-.checkbox label {
-  margin-bottom: 0;
-  font-weight: normal;
-}
+
 .radio input[type="radio"],
-.checkbox input[type="checkbox"] {
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
   float: left;
   margin-left: -20px;
 }
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: (@line-height-base / 4) * -1;
+}
 
 // Move the options list down to align with labels
 .controls > .radio:first-child,
@@ -224,15 +232,18 @@ textarea {
 
 // Radios and checkboxes on same line
 // TODO v3: Convert .inline to .control-inline
-.radio.inline,
-.checkbox.inline {
+.radio-inline,
+.checkbox-inline {
   display: inline-block;
   padding-top: 5px;
+  padding-left: 20px;
   margin-bottom: 0;
   vertical-align: middle;
+  font-weight: normal;
 }
-.radio.inline + .radio.inline,
-.checkbox.inline + .checkbox.inline {
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
   margin-left: 10px; // space out consecutive inline controls
 }
 
@@ -380,7 +391,7 @@ select:focus:invalid {
   margin-bottom: @line-height-base;
   background-color: @form-actions-background;
   border-top: 1px solid #e5e5e5;
-  .clearfix(); // Adding clearfix to allow for .pull-right button containers
+  .clear_float(); // Adding clearfix to allow for .pull-right button containers
 }
 
 
@@ -520,33 +531,37 @@ select:focus:invalid {
 // Horizontal forms
 // --------------------------------------------------
 
-.form-horizontal {
 
-  // Increase spacing between groups
-  .control-group {
-    position: relative;
-    margin-bottom: @line-height-base;
-    .clearfix();
+@media screen and (min-width: 768px) {
+
+  .form-horizontal {
 
-    input,
-    select,
-    textarea,
-    .uneditable-input {
-      margin-bottom: 0;
+    // Increase spacing between groups
+    .control-group {
+      position: relative;
+      margin-bottom: @line-height-base;
+      .clear_float();
+
+      input,
+      select,
+      textarea,
+      .uneditable-input {
+        margin-bottom: 0;
+      }
     }
-  }
 
-  // Float the labels left
-  .control-group > .control-label {
-    float: left;
-    width: @component-offset-horizontal - 20;
-    padding-top: 6px;
-    text-align: right;
-  }
+    // Float the labels left
+    .control-group > .control-label {
+      float: left;
+      width: @component-offset-horizontal - 20;
+      padding-top: 6px;
+      text-align: right;
+    }
 
-  // Move over all input controls and content over
-  .control-group > .controls {
-    margin-left: @component-offset-horizontal;
-  }
+    // Move over all input controls and content over
+    .control-group > .controls {
+      margin-left: @component-offset-horizontal;
+    }
 
+  }
 }