From dd1bce2611a83365c0b2fd14b14512180ec09ec1 Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Sat, 8 Sep 2012 12:50:37 -0700
Subject: [PATCH] latest tweaks to grid classes for forms

---
 docs/assets/css/bootstrap-responsive.css |  94 ++++++++++++++++++++
 docs/assets/css/bootstrap.css            | 108 +++++++++++++++++++++++
 less/forms.less                          |   4 +
 less/mixins.less                         |  34 +++++++
 less/responsive-1200px-min.less          |   1 +
 less/tests/grid.html                     |  25 ++++--
 6 files changed, 257 insertions(+), 9 deletions(-)

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 16ea44aa2f..5abdc180d6 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -192,6 +192,100 @@
   .offset1 {
     margin-left: 8.333333333333332%;
   }
+  input[class*="span"]:first-child,
+  textarea[class*="span"]:first-child,
+  .uneditable-input[class*="span"]:first-child {
+    margin-left: 0;
+  }
+  input[class*="span"]:last-child,
+  textarea[class*="span"]:last-child,
+  .uneditable-input[class*="span"]:last-child {
+    margin-right: 0;
+  }
+  input.span12,
+  textarea.span12,
+  .uneditable-input.span12 {
+    width: 97.43589743589743%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span11,
+  textarea.span11,
+  .uneditable-input.span11 {
+    width: 89.10256410256409%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span10,
+  textarea.span10,
+  .uneditable-input.span10 {
+    width: 80.76923076923077%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span9,
+  textarea.span9,
+  .uneditable-input.span9 {
+    width: 72.43589743589743%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span8,
+  textarea.span8,
+  .uneditable-input.span8 {
+    width: 64.10256410256409%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span7,
+  textarea.span7,
+  .uneditable-input.span7 {
+    width: 55.769230769230774%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span6,
+  textarea.span6,
+  .uneditable-input.span6 {
+    width: 47.43589743589744%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span5,
+  textarea.span5,
+  .uneditable-input.span5 {
+    width: 39.10256410256411%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span4,
+  textarea.span4,
+  .uneditable-input.span4 {
+    width: 30.769230769230766%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span3,
+  textarea.span3,
+  .uneditable-input.span3 {
+    width: 22.435897435897438%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span2,
+  textarea.span2,
+  .uneditable-input.span2 {
+    width: 14.1025641025641%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
+  input.span1,
+  textarea.span1,
+  .uneditable-input.span1 {
+    width: 5.769230769230768%;
+    margin-right: 1.282051282051282%;
+    margin-left: 1.282051282051282%;
+  }
   .thumbnails {
     margin-left: -30px;
   }
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3ac976ea26..efc3d8718e 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -997,6 +997,114 @@ textarea[class*="span"],
   display: inline-block;
 }
 
+.controls-row input[class*="span"]:first-child,
+.controls-row textarea[class*="span"]:first-child,
+.controls-row .uneditable-input[class*="span"]:first-child {
+  margin-left: 0;
+}
+
+.controls-row input[class*="span"]:last-child,
+.controls-row textarea[class*="span"]:last-child,
+.controls-row .uneditable-input[class*="span"]:last-child {
+  margin-right: 0;
+}
+
+.controls-row input.span12,
+textarea.span12,
+.uneditable-input.span12 {
+  width: 97.87234042553192%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span11,
+textarea.span11,
+.uneditable-input.span11 {
+  width: 89.53900709219857%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span10,
+textarea.span10,
+.uneditable-input.span10 {
+  width: 81.20567375886526%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span9,
+textarea.span9,
+.uneditable-input.span9 {
+  width: 72.87234042553192%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span8,
+textarea.span8,
+.uneditable-input.span8 {
+  width: 64.53900709219857%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span7,
+textarea.span7,
+.uneditable-input.span7 {
+  width: 56.20567375886525%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span6,
+textarea.span6,
+.uneditable-input.span6 {
+  width: 47.87234042553192%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span5,
+textarea.span5,
+.uneditable-input.span5 {
+  width: 39.53900709219859%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span4,
+textarea.span4,
+.uneditable-input.span4 {
+  width: 31.205673758865245%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span3,
+textarea.span3,
+.uneditable-input.span3 {
+  width: 22.872340425531917%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span2,
+textarea.span2,
+.uneditable-input.span2 {
+  width: 14.53900709219858%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
+.controls-row input.span1,
+textarea.span1,
+.uneditable-input.span1 {
+  width: 6.205673758865247%;
+  margin-right: 1.0638297872340425%;
+  margin-left: 1.0638297872340425%;
+}
+
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
diff --git a/less/forms.less b/less/forms.less
index afb84caee3..7e9036a6a1 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -297,6 +297,10 @@ textarea[class*="span"],
 // GRID SIZING FOR INPUTS
 // ----------------------
 
+.controls-row {
+  #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
+}
+
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
diff --git a/less/mixins.less b/less/mixins.less
index 9a0650132c..803837e2d8 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -599,4 +599,38 @@
 
   }
 
+
+  .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
+
+    .spanX (@index) when (@index > 0) {
+      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
+      .spanX(@index - 1);
+    }
+    .spanX (0) {}
+
+    .span(@columns) {
+      width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
+      margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth);
+      margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
+    }
+
+    // Space grid-sized controls properly if multiple per line
+    input[class*="span"]:first-child,
+    textarea[class*="span"]:first-child,
+    .uneditable-input[class*="span"]:first-child {
+      margin-left: 0;
+    }
+    input[class*="span"]:last-child,
+    textarea[class*="span"]:last-child,
+    .uneditable-input[class*="span"]:last-child {
+      margin-right: 0;
+    }
+
+
+    // generate .spanX
+    .spanX (@gridColumns);
+
+  }
+
+
 }
diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less
index 8b909b8cdb..e8dcb73dcc 100644
--- a/less/responsive-1200px-min.less
+++ b/less/responsive-1200px-min.less
@@ -14,6 +14,7 @@
 
   // Fixed grid
   #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
+  #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
 
   // Thumbnails
   .thumbnails {
diff --git a/less/tests/grid.html b/less/tests/grid.html
index 1360d3ebc7..abfd5fbb2f 100644
--- a/less/tests/grid.html
+++ b/less/tests/grid.html
@@ -16,6 +16,8 @@
         padding-top: 30px;
         padding-bottom: 30px;
       }
+
+
     </style>
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
@@ -73,19 +75,24 @@
 
 
       <h2>Inputs</h2>
+      <input type="text" class="span1" placeholder=".span1">
+      <input type="text" class="span2" placeholder=".span2">
+      <input type="text" class="span4" placeholder=".span4">
+      <input type="text" class="span5" placeholder=".span5">
 
-      <h4>No additional markup</h4>
-      <input type="text" class="span4" placeholder=".span4">
-      <input type="text" class="span4" placeholder=".span4">
-      <input type="text" class="span4" placeholder=".span4">
-
-      <h4>With .controls-row</h4>
-      <div class="controls-row">
-        <input type="text" class="span4" placeholder=".span4">
-        <input type="text" class="span4" placeholder=".span4">
+      <div class="row">
+        <input type="text" class="span1" placeholder=".span1">
+        <input type="text" class="span2" placeholder=".span2">
         <input type="text" class="span4" placeholder=".span4">
+        <input type="text" class="span5" placeholder=".span5">
       </div>
 
+      <div class="controls-row">
+        <input type="text" class="span1" placeholder=".span1">
+        <input type="text" class="span2" placeholder=".span2">
+        <input type="text" class="span4" placeholder=".span4">
+        <input type="text" class="span5" placeholder=".span5">
+      </div>
 
     </form> <!-- /container -->