From 93be608bf0a4b85ec3331ebcc14e40f99a1974f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 20:49:17 -0700 Subject: [PATCH] fixes #3384: add support for multiple inputs per line when using grid sizing --- docs/assets/css/bootstrap-responsive.css | 6 +++ docs/assets/css/bootstrap.css | 57 +++++++++++++++++------- docs/base-css.html | 36 ++++++++++++++- docs/templates/pages/base-css.mustache | 36 ++++++++++++++- less/forms.less | 10 +++++ less/mixins.less | 5 +++ 6 files changed, 129 insertions(+), 21 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index a584b806e6..7023596161 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -358,6 +358,9 @@ .uneditable-input { margin-left: 0; } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 30px; + } input.span12, textarea.span12, .uneditable-input.span12 { @@ -700,6 +703,9 @@ .uneditable-input { margin-left: 0; } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; + } input.span12, textarea.span12, .uneditable-input.span12 { diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 4a66eb66d2..360461afe5 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1143,6 +1143,10 @@ textarea, margin-left: 0; } +.controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; +} + input.span12, textarea.span12, .uneditable-input.span12 { @@ -1215,6 +1219,25 @@ textarea.span1, width: 50px; } +.controls-row { + *zoom: 1; +} + +.controls-row:before, +.controls-row:after { + display: table; + line-height: 0; + content: ""; +} + +.controls-row:after { + clear: both; +} + +.controls-row [class*="span"] { + float: left; +} + input[disabled], select[disabled], textarea[disabled], @@ -2740,7 +2763,7 @@ button.close { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #cccccc; @@ -2885,7 +2908,7 @@ button.close { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); - background-image: linear-gradient(top, #0088cc, #0044cc); + background-image: linear-gradient(to bottom, #0088cc, #0044cc); background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-repeat: repeat-x; border-color: #0044cc #0044cc #002a80; @@ -2914,7 +2937,7 @@ button.close { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); - background-image: linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-repeat: repeat-x; border-color: #f89406 #f89406 #ad6704; @@ -2943,7 +2966,7 @@ button.close { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); - background-image: linear-gradient(top, #ee5f5b, #bd362f); + background-image: linear-gradient(to bottom, #ee5f5b, #bd362f); background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); background-repeat: repeat-x; border-color: #bd362f #bd362f #802420; @@ -2972,7 +2995,7 @@ button.close { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); - background-image: linear-gradient(top, #62c462, #51a351); + background-image: linear-gradient(to bottom, #62c462, #51a351); background-image: -moz-linear-gradient(top, #62c462, #51a351); background-repeat: repeat-x; border-color: #51a351 #51a351 #387038; @@ -3001,7 +3024,7 @@ button.close { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); - background-image: linear-gradient(top, #5bc0de, #2f96b4); + background-image: linear-gradient(to bottom, #5bc0de, #2f96b4); background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); background-repeat: repeat-x; border-color: #2f96b4 #2f96b4 #1f6377; @@ -3030,7 +3053,7 @@ button.close { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); background-image: -webkit-linear-gradient(top, #444444, #222222); background-image: -o-linear-gradient(top, #444444, #222222); - background-image: linear-gradient(top, #444444, #222222); + background-image: linear-gradient(to bottom, #444444, #222222); background-image: -moz-linear-gradient(top, #444444, #222222); background-repeat: repeat-x; border-color: #222222 #222222 #000000; @@ -3775,7 +3798,7 @@ input[type="submit"].btn.btn-mini { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); background-image: -webkit-linear-gradient(top, #222222, #111111); background-image: -o-linear-gradient(top, #222222, #111111); - background-image: linear-gradient(top, #222222, #111111); + background-image: linear-gradient(to bottom, #222222, #111111); background-repeat: repeat-x; -webkit-border-radius: 4px; -moz-border-radius: 4px; @@ -4049,7 +4072,7 @@ input[type="submit"].btn.btn-mini { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); background-image: -webkit-linear-gradient(top, #151515, #040404); background-image: -o-linear-gradient(top, #151515, #040404); - background-image: linear-gradient(top, #151515, #040404); + background-image: linear-gradient(to bottom, #151515, #040404); background-image: -moz-linear-gradient(top, #151515, #040404); background-repeat: repeat-x; border-color: #040404 #040404 #000000; @@ -4178,7 +4201,7 @@ input[type="submit"].btn.btn-mini { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1)); background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1); background-image: -o-linear-gradient(top, #ffffff, #f1f1f1); - background-image: linear-gradient(top, #ffffff, #f1f1f1); + background-image: linear-gradient(to bottom, #ffffff, #f1f1f1); background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1); background-repeat: repeat-x; border: 1px solid #e5e5e5; @@ -4281,7 +4304,7 @@ input[type="submit"].btn.btn-mini { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5)); background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); - background-image: linear-gradient(top, #ffffff, #f5f5f5); + background-image: linear-gradient(to bottom, #ffffff, #f5f5f5); background-repeat: repeat-x; border: 1px solid #ddd; -webkit-border-radius: 3px; @@ -5025,7 +5048,7 @@ a.badge:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; -webkit-border-radius: 4px; -moz-border-radius: 4px; @@ -5047,7 +5070,7 @@ a.badge:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); - background-image: linear-gradient(top, #149bdf, #0480be); + background-image: linear-gradient(to bottom, #149bdf, #0480be); background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); @@ -5090,7 +5113,7 @@ a.badge:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); - background-image: linear-gradient(top, #ee5f5b, #c43c35); + background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } @@ -5110,7 +5133,7 @@ a.badge:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } @@ -5130,7 +5153,7 @@ a.badge:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } @@ -5150,7 +5173,7 @@ a.badge:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); - background-image: linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } diff --git a/docs/base-css.html b/docs/base-css.html index 0c5bf0bea4..88f4436424 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1074,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline.

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Relative sizing

-
+
@@ -1092,10 +1092,13 @@ For example, <code>section</code> should be wrapped as inline. <input class="input-xlarge" type="text"> <input class="input-xxlarge" type="text"> +

+ Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

- +
@@ -1127,6 +1130,35 @@ For example, <code>section</code> should be wrapped as inline. <input class="span1" type="text"> <input class="span2" type="text"> <input class="span3" type="text"> + + +

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+<div class="controls controls-row">
+  <input class="span4" type="text" placeholder=".span4">
+  <input class="span1" type="text" placeholder=".span1">
+</div>

Uneditable inputs

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index ef68b1f594..a5d334fa3e 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1012,7 +1012,7 @@

{{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

{{_i}}Relative sizing{{/i}}

-
+
@@ -1030,10 +1030,13 @@ <input class="input-xlarge" type="text"> <input class="input-xxlarge" type="text"> +

+ {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

{{_i}}Grid sizing{{/i}}

{{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

- +
@@ -1065,6 +1068,35 @@ <input class="span1" type="text"> <input class="span2" type="text"> <input class="span3" type="text"> + + +

{{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+<div class="controls controls-row">
+  <input class="span4" type="text" placeholder=".span4">
+  <input class="span1" type="text" placeholder=".span1">
+</div>

{{_i}}Uneditable inputs{{/i}}

diff --git a/less/forms.less b/less/forms.less index 63ee05751a..078b36704d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -290,8 +290,18 @@ textarea[class*="span"], // GRID SIZING FOR INPUTS // ---------------------- +// Grid sizes #grid > .input(@gridColumnWidth, @gridGutterWidth); +// Control row for multiple inputs per line +.controls-row { + .clearfix(); // Clear the float from controls +} +.controls-row [class*="span"] { + float: left; // Float to collapse white-space for proper grid alignment +} + + // DISABLED STATE diff --git a/less/mixins.less b/less/mixins.less index 10239b38c2..3b99f4061d 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -721,6 +721,11 @@ margin-left: 0; // override margin-left from core grid system } + // Space grid-sized controls properly if multiple per line + .controls-row [class*="span"] + [class*="span"] { + margin-left: @gridGutterWidth; + } + // generate .spanX .spanX (@gridColumns);