More forms overhaul

* Refactor the .forms-horizontal code--much simpler now and built on the Bootstrap grid system instead
* Remove all the margins on form controls for simpler styling everywhere else--was overriding that way too often
* Drop .help-inline, but keep .help-block
* Drop the unused input grid class overrides

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 03a26d13d3dab3406634384f02cc665791d1bb48..236256f641f7e381a8e0d143db3db424b6464d87 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1252,7 +1252,6 @@ input[type="color"] {
   display: block;
   min-height: 34px;
   padding: 6px 9px;
-  margin-bottom: 10px;
   font-size: 14px;
   line-height: 20px;
   color: #555555;
@@ -1374,6 +1373,7 @@ textarea::-webkit-input-placeholder {
   display: block;
   min-height: 20px;
   padding-left: 20px;
+  margin-top: 10px;
   margin-bottom: 10px;
   vertical-align: middle;
 }
@@ -1466,25 +1466,6 @@ input[type="color"].input-small {
   border-radius: 3px;
 }
 
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"] {
-  float: none;
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.input-append input[class*="span"],
-.input-prepend input[class*="span"] {
-  display: inline-block;
-}
-
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"] {
-  height: 34px;
-}
-
 input[disabled],
 select[disabled],
 textarea[disabled],
@@ -1601,20 +1582,11 @@ select:focus:invalid:focus {
   clear: both;
 }
 
-.help-block,
-.help-inline {
-  color: #737373;
-}
-
 .help-block {
   display: block;
+  margin-top: 5px;
   margin-bottom: 10px;
-}
-
-.help-inline {
-  display: inline-block;
-  padding-left: 5px;
-  vertical-align: middle;
+  color: #737373;
 }
 
 .input-group {
@@ -1790,47 +1762,21 @@ select:focus:invalid:focus {
 .form-inline .radio,
 .form-inline .checkbox {
   display: inline-block;
+}
+
+.form-inline .radio,
+.form-inline .checkbox {
+  margin-top: 0;
   margin-bottom: 0;
 }
 
-@media screen and (min-width: 768px) {
-  .form-horizontal .control-group {
-    position: relative;
-    margin-bottom: 20px;
-  }
-  .form-horizontal .control-group:before,
-  .form-horizontal .control-group:after {
-    display: table;
-    content: " ";
-  }
-  .form-horizontal .control-group:after {
-    clear: both;
-  }
-  .form-horizontal .control-group:before,
-  .form-horizontal .control-group:after {
-    display: table;
-    content: " ";
-  }
-  .form-horizontal .control-group:after {
-    clear: both;
-  }
-  .form-horizontal .control-group input,
-  .form-horizontal .control-group select,
-  .form-horizontal .control-group textarea {
-    margin-bottom: 0;
-  }
-  .form-horizontal .control-group > .control-label {
-    float: left;
-    width: 160px;
-    padding-top: 6px;
-    text-align: right;
-  }
-  .form-horizontal .control-group > .controls {
-    margin-left: 180px;
-  }
-  .form-horizontal .form-actions {
-    padding-left: 180px;
-  }
+.form-horizontal .row + .row {
+  margin-top: 15px;
+}
+
+.form-horizontal .row-label {
+  padding-top: 6px;
+  text-align: right;
 }
 
 .btn {

diff --git a/docs/css.html b/docs/css.html
index 2473576e29b70b45565cd3b512dd06425bd1a861..6d29f6ff2a2f4e1c81a5403d24fe2cc88a9b455f 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -1008,7 +1008,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <h2 id="forms-example">Basic example</h2>
-    <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
+    <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements are set to <code>width: 100%;</code> by default.</p>
     <form class="bs-example">
       <fieldset>
         <legend>Legend</legend>
@@ -1074,23 +1074,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="forms-horizontal">Horizontal form</h3>
-    <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
-    <ul>
-      <li>Add <code>.form-horizontal</code> to the form</li>
-      <li>Wrap labels and controls in <code>.control-group</code></li>
-      <li>Add <code>.control-label</code> to the label</li>
-      <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
-    </ul>
+    <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
     <form class="bs-example form-horizontal">
-      <div class="control-group">
-        <label class="control-label" for="inputEmail">Email</label>
-        <div class="controls">
+      <div class="row">
+        <label for="inputEmail" class="col col-lg-2 row-label">Email</label>
+        <div class="col col-lg-10">
           <input type="text" id="inputEmail" placeholder="Email">
         </div>
       </div>
-      <div class="control-group">
-        <label class="control-label" for="inputPassword">Password</label>
-        <div class="controls">
+      <div class="row">
+        <label for="" class="col col-lg-2 row-label">Password</label>
+        <div class="col col-lg-10">
           <input type="password" id="inputPassword" placeholder="Password">
           <div class="checkbox">
             <label>
@@ -1098,24 +1092,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </label>
           </div>
         </div>
-      </div>
-      <div class="control-group">
-        <div class="controls">
+        <div class="col col-lg-10 col-offset-2">
           <button type="submit" class="btn btn-default">Sign in</button>
         </div>
       </div>
     </form>
 {% highlight html %}
 <form class="form-horizontal">
-  <div class="control-group">
-    <label class="control-label" for="inputEmail">Email</label>
-    <div class="controls">
+  <div class="row">
+    <label for="inputEmail" class="col col-lg-2 row-label">Email</label>
+    <div class="col col-lg-10">
       <input type="text" id="inputEmail" placeholder="Email">
     </div>
   </div>
-  <div class="control-group">
-    <label class="control-label" for="inputPassword">Password</label>
-    <div class="controls">
+  <div class="row">
+    <label for="" class="col col-lg-2 row-label">Password</label>
+    <div class="col col-lg-10">
       <input type="password" id="inputPassword" placeholder="Password">
       <div class="checkbox">
         <label>
@@ -1123,9 +1115,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </label>
       </div>
     </div>
-  </div>
-  <div class="control-group">
-    <div class="controls">
+    <div class="col col-lg-10 col-offset-2">
       <button type="submit" class="btn btn-default">Sign in</button>
     </div>
   </div>
@@ -1693,18 +1683,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h3 id="forms-help-text">Help text</h3>
-    <p>Inline and block level support for help text that appears around form controls.</p>
-    <h4>Inline help</h4>
-    <form class="bs-example form-inline">
-      <input type="text"> <span class="help-inline">Inline help text</span>
-    </form>
-{% highlight html %}
-<input type="text">
-<span class="help-inline">Inline help text</span>
-{% endhighlight %}
-
-    <h4>Block help</h4>
-    <form class="bs-example form-inline">
+    <p>Block level help text for form controls.</p>
+    <form class="bs-example">
       <input type="text">
       <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
     </form>

diff --git a/less/forms.less b/less/forms.less
index 6162cd4f1357df21b7cb3b4b045840647a14e0d0..6b3bff728089cb34bde14d41c477ea5ceffeacad 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -57,7 +57,6 @@ input[type="color"] {
   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: 10px;
   font-size: @font-size-base;
   line-height: @line-height-base;
   color: @gray;
@@ -172,7 +171,8 @@ 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);
+  margin-top: 10px;
+  margin-bottom: 10px;
   padding-left: 20px;
   vertical-align: middle;
   label {
@@ -182,7 +182,6 @@ textarea {
     cursor: pointer;
   }
 }
-
 .radio input[type="radio"],
 .radio-inline input[type="radio"],
 .checkbox input[type="checkbox"],
@@ -192,7 +191,7 @@ textarea {
 }
 .radio + .radio,
 .checkbox + .checkbox {
-  margin-top: ((@line-height-base / 4) * -1);
+  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
 }
 
 /*
@@ -255,33 +254,6 @@ input[type="color"] {
 }
 
 
-
-// GRID SIZING FOR INPUTS
-// ----------------------
-
-// Grid style input sizes
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"] {
-  float: none;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-// Ensure input-prepend/append never wraps
-.input-append input[class*="span"],
-.input-prepend input[class*="span"] {
-  display: inline-block;
-}
-
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"] {
-  height: @input-height-base;
-}
-
-
-
 // DISABLED STATE
 // --------------
 
@@ -361,20 +333,11 @@ select:focus:invalid {
 // HELP TEXT
 // ---------
 
-.help-block,
-.help-inline {
-  color: lighten(@text-color, 25%); // lighten the text some for contrast
-}
-
 .help-block {
   display: block; // account for any element using help-block
-  margin-bottom: (@line-height-base / 2);
-}
-
-.help-inline {
-  display: inline-block;
-  vertical-align: middle;
-  padding-left: 5px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: lighten(@text-color, 25%); // lighten the text some for contrast
 }
 
 
@@ -436,14 +399,14 @@ select:focus:invalid {
   background-color: @gray-lighter;
   border: 1px solid #ccc;
 
-       &.input-small {
-         padding: @padding-small;
-         font-size: @font-size-small;
+  &.input-small {
+    padding: @padding-small;
+    font-size: @font-size-small;
+  }
+  &.input-large {
+    padding: @padding-large;
+    font-size: @font-size-large;
   }
-       &.input-large {
-               padding: @padding-large;
-               font-size: @font-size-large;
-       }
 }
 
 // Reset rounded corners
@@ -528,6 +491,10 @@ select:focus:invalid {
   .radio,
   .checkbox {
     display: inline-block;
+  }
+  .radio,
+  .checkbox {
+    margin-top: 0;
     margin-bottom: 0;
   }
 }
@@ -535,41 +502,14 @@ select:focus:invalid {
 
 // Horizontal forms
 // --------------------------------------------------
+// Horizontal forms are built on grid classes.
 
-@media screen and (min-width: @screen-tablet) {
-
-  .form-horizontal {
-
-    // Increase spacing between groups
-    .control-group {
-      position: relative;
-      margin-bottom: @line-height-base;
-      .clearfix();
-
-      input,
-      select,
-      textarea {
-        margin-bottom: 0;
-      }
-    }
-
-    // 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;
-    }
-
-    // Make sure form actions buttons are aligned with controls
-    .form-actions {
-      padding-left: @component-offset-horizontal;
-    }
-
+.form-horizontal {
+  .row + .row {
+    margin-top: 15px;
+  }
+  .row-label {
+    padding-top: 6px;
+    text-align: right;
   }
 }