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 | 23 +++--
6 files changed, 256 insertions(+), 8 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>
-
- <h4>No additional markup</h4>
- <input type="text" class="span4" placeholder=".span4">
- <input type="text" class="span4" placeholder=".span4">
+ <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>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 -->
--
GitLab