diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css
index 0c20b8d640dd5759349d9d987b7e2dbcb6baf7b6..fc1746408d3f58b47b0861a6daf68dde108f1871 100644
--- a/bootstrap-1.3.0.css
+++ b/bootstrap-1.3.0.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Sep 11 18:08:25 PDT 2011
+ * Date: Sun Sep 11 18:43:05 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -374,129 +374,129 @@ a:hover {
.row:after {
clear: both;
}
-.row [class*="span"] {
+[class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
-.row .span1 {
+.span1 {
width: 40px;
}
-.row .span2 {
+.span2 {
width: 100px;
}
-.row .span3 {
+.span3 {
width: 160px;
}
-.row .span4 {
+.span4 {
width: 220px;
}
-.row .span5 {
+.span5 {
width: 280px;
}
-.row .span6 {
+.span6 {
width: 340px;
}
-.row .span7 {
+.span7 {
width: 400px;
}
-.row .span8 {
+.span8 {
width: 460px;
}
-.row .span9 {
+.span9 {
width: 520px;
}
-.row .span10 {
+.span10 {
width: 580px;
}
-.row .span11 {
+.span11 {
width: 640px;
}
-.row .span12 {
+.span12 {
width: 700px;
}
-.row .span13 {
+.span13 {
width: 760px;
}
-.row .span14 {
+.span14 {
width: 820px;
}
-.row .span15 {
+.span15 {
width: 880px;
}
-.row .span16 {
+.span16 {
width: 940px;
}
-.row .span17 {
+.span17 {
width: 1000px;
}
-.row .span18 {
+.span18 {
width: 1060px;
}
-.row .span19 {
+.span19 {
width: 1120px;
}
-.row .span20 {
+.span20 {
width: 1180px;
}
-.row .span21 {
+.span21 {
width: 1240px;
}
-.row .span22 {
+.span22 {
width: 1300px;
}
-.row .span23 {
+.span23 {
width: 1360px;
}
-.row .span24 {
+.span24 {
width: 1420px;
}
-.row .offset1 {
+.offset1 {
margin-left: 80px;
}
-.row .offset2 {
+.offset2 {
margin-left: 140px;
}
-.row .offset3 {
+.offset3 {
margin-left: 200px;
}
-.row .offset4 {
+.offset4 {
margin-left: 260px;
}
-.row .offset5 {
+.offset5 {
margin-left: 320px;
}
-.row .offset6 {
+.offset6 {
margin-left: 380px;
}
-.row .offset7 {
+.offset7 {
margin-left: 440px;
}
-.row .offset8 {
+.offset8 {
margin-left: 500px;
}
-.row .offset9 {
+.offset9 {
margin-left: 560px;
}
-.row .offset10 {
+.offset10 {
margin-left: 620px;
}
-.row .offset11 {
+.offset11 {
margin-left: 680px;
}
-.row .offset12 {
+.offset12 {
margin-left: 740px;
}
-.row .span-one-third {
+.span-one-third {
width: 300px;
}
-.row .span-two-thirds {
+.span-two-thirds {
width: 620px;
}
-.row .offset-one-third {
+.offset-one-third {
margin-left: 340px;
}
-.row .offset-two-thirds {
+.offset-two-thirds {
margin-left: 660px;
}
/* Typography.less
@@ -883,6 +883,70 @@ select.xxlarge {
textarea.xxlarge {
overflow-y: auto;
}
+input.span1, textarea.span1, select.span1 {
+ width: 30px;
+ margin-left: 0;
+}
+input.span2, textarea.span2, select.span2 {
+ width: 90px;
+ margin-left: 0;
+}
+input.span3, textarea.span3, select.span3 {
+ width: 150px;
+ margin-left: 0;
+}
+input.span4, textarea.span4, select.span4 {
+ width: 210px;
+ margin-left: 0;
+}
+input.span5, textarea.span5, select.span5 {
+ width: 270px;
+ margin-left: 0;
+}
+input.span6, textarea.span6, select.span6 {
+ width: 330px;
+ margin-left: 0;
+}
+input.span7, textarea.span7, select.span7 {
+ width: 390px;
+ margin-left: 0;
+}
+input.span8, textarea.span8, select.span8 {
+ width: 450px;
+ margin-left: 0;
+}
+input.span9, textarea.span9, select.span9 {
+ width: 510px;
+ margin-left: 0;
+}
+input.span10, textarea.span10, select.span10 {
+ width: 570px;
+ margin-left: 0;
+}
+input.span11, textarea.span11, select.span11 {
+ width: 630px;
+ margin-left: 0;
+}
+input.span12, textarea.span12, select.span12 {
+ width: 690px;
+ margin-left: 0;
+}
+input.span13, textarea.span13, select.span13 {
+ width: 750px;
+ margin-left: 0;
+}
+input.span14, textarea.span14, select.span14 {
+ width: 810px;
+ margin-left: 0;
+}
+input.span15, textarea.span15, select.span15 {
+ width: 870px;
+ margin-left: 0;
+}
+input.span16, textarea.span16, select.span16 {
+ width: 930px;
+ margin-left: 0;
+}
input[disabled],
select[disabled],
textarea[disabled],
diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css
index b2b38bbf8601e7215e6b40d1cd6f81c4c69271a0..66337455c0ee924d1564efd71c2827624387b41d 100644
--- a/bootstrap-1.3.0.min.css
+++ b/bootstrap-1.3.0.min.css
@@ -42,47 +42,47 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.pull-left{float:left;}
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
.row:after{clear:both;}
-.row [class*="span"]{display:inline;float:left;margin-left:20px;}
-.row .span1{width:40px;}
-.row .span2{width:100px;}
-.row .span3{width:160px;}
-.row .span4{width:220px;}
-.row .span5{width:280px;}
-.row .span6{width:340px;}
-.row .span7{width:400px;}
-.row .span8{width:460px;}
-.row .span9{width:520px;}
-.row .span10{width:580px;}
-.row .span11{width:640px;}
-.row .span12{width:700px;}
-.row .span13{width:760px;}
-.row .span14{width:820px;}
-.row .span15{width:880px;}
-.row .span16{width:940px;}
-.row .span17{width:1000px;}
-.row .span18{width:1060px;}
-.row .span19{width:1120px;}
-.row .span20{width:1180px;}
-.row .span21{width:1240px;}
-.row .span22{width:1300px;}
-.row .span23{width:1360px;}
-.row .span24{width:1420px;}
-.row .offset1{margin-left:80px;}
-.row .offset2{margin-left:140px;}
-.row .offset3{margin-left:200px;}
-.row .offset4{margin-left:260px;}
-.row .offset5{margin-left:320px;}
-.row .offset6{margin-left:380px;}
-.row .offset7{margin-left:440px;}
-.row .offset8{margin-left:500px;}
-.row .offset9{margin-left:560px;}
-.row .offset10{margin-left:620px;}
-.row .offset11{margin-left:680px;}
-.row .offset12{margin-left:740px;}
-.row .span-one-third{width:300px;}
-.row .span-two-thirds{width:620px;}
-.row .offset-one-third{margin-left:340px;}
-.row .offset-two-thirds{margin-left:660px;}
+[class*="span"]{display:inline;float:left;margin-left:20px;}
+.span1{width:40px;}
+.span2{width:100px;}
+.span3{width:160px;}
+.span4{width:220px;}
+.span5{width:280px;}
+.span6{width:340px;}
+.span7{width:400px;}
+.span8{width:460px;}
+.span9{width:520px;}
+.span10{width:580px;}
+.span11{width:640px;}
+.span12{width:700px;}
+.span13{width:760px;}
+.span14{width:820px;}
+.span15{width:880px;}
+.span16{width:940px;}
+.span17{width:1000px;}
+.span18{width:1060px;}
+.span19{width:1120px;}
+.span20{width:1180px;}
+.span21{width:1240px;}
+.span22{width:1300px;}
+.span23{width:1360px;}
+.span24{width:1420px;}
+.offset1{margin-left:80px;}
+.offset2{margin-left:140px;}
+.offset3{margin-left:200px;}
+.offset4{margin-left:260px;}
+.offset5{margin-left:320px;}
+.offset6{margin-left:380px;}
+.offset7{margin-left:440px;}
+.offset8{margin-left:500px;}
+.offset9{margin-left:560px;}
+.offset10{margin-left:620px;}
+.offset11{margin-left:680px;}
+.offset12{margin-left:740px;}
+.span-one-third{width:300px;}
+.span-two-thirds{width:620px;}
+.offset-one-third{margin-left:340px;}
+.offset-two-thirds{margin-left:660px;}
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
@@ -140,6 +140,22 @@ form div.error .input-prepend span.add-on,form div.error .input-append span.add-
.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
textarea.xxlarge{overflow-y:auto;}
+input.span1,textarea.span1,select.span1{width:30px;margin-left:0;}
+input.span2,textarea.span2,select.span2{width:90px;margin-left:0;}
+input.span3,textarea.span3,select.span3{width:150px;margin-left:0;}
+input.span4,textarea.span4,select.span4{width:210px;margin-left:0;}
+input.span5,textarea.span5,select.span5{width:270px;margin-left:0;}
+input.span6,textarea.span6,select.span6{width:330px;margin-left:0;}
+input.span7,textarea.span7,select.span7{width:390px;margin-left:0;}
+input.span8,textarea.span8,select.span8{width:450px;margin-left:0;}
+input.span9,textarea.span9,select.span9{width:510px;margin-left:0;}
+input.span10,textarea.span10,select.span10{width:570px;margin-left:0;}
+input.span11,textarea.span11,select.span11{width:630px;margin-left:0;}
+input.span12,textarea.span12,select.span12{width:690px;margin-left:0;}
+input.span13,textarea.span13,select.span13{width:750px;margin-left:0;}
+input.span14,textarea.span14,select.span14{width:810px;margin-left:0;}
+input.span15,textarea.span15,select.span15{width:870px;margin-left:0;}
+input.span16,textarea.span16,select.span16{width:930px;margin-left:0;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
diff --git a/docs/index.html b/docs/index.html
index 110b4f46bd4b5dce05696363bfa0de63e52294a0..02335fd7581830b3c7a5d0726e97f7d85673b880 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1186,11 +1186,34 @@
</div>
</div><!-- /row -->
+ <div class="row">
+ <div class="span4">
+ <h2>Form field sizes</h2>
+ <p>Customize any form <code>input</code>, <code>select</code>, or <code>textarea</code> width by adding just a few classes to your markup.</p>
+ <p>As of v1.3.0, we have added the grid-based sizing classes for form elements. <strong>Please use the these over the existing <code>.mini</code>, <code>.small</code>, etc classes.</strong></p>
+ </div>
+ <div class="span12">
+ <form action="">
+ <div class="clearfix"><input class="span2" id="" name="" type="text" placeholder=".span2" /></div>
+ <div class="clearfix"><input class="span3" id="" name="" type="text" placeholder=".span3" /></div>
+ <div class="clearfix"><input class="span4" id="" name="" type="text" placeholder=".span4" /></div>
+ <div class="clearfix"><input class="span5" id="" name="" type="text" placeholder=".span5" /></div>
+ <div class="clearfix"><input class="span6" id="" name="" type="text" placeholder=".span6" /></div>
+ <div class="clearfix"><input class="span7" id="" name="" type="text" placeholder=".span7" /></div>
+ <div class="clearfix"><input class="span8" id="" name="" type="text" placeholder=".span8" /></div>
+ <div class="clearfix"><input class="span9" id="" name="" type="text" placeholder=".span9" /></div>
+ <div class="clearfix"><input class="span10" id="" name="" type="text" placeholder=".span10" /></div>
+ <div class="clearfix"><input class="span11" id="" name="" type="text" placeholder=".span11" /></div>
+ <div class="clearfix"><input class="span12" id="" name="" type="text" placeholder=".span12" /></div>
+ </form>
+ </div>
+ </div>
+
<div class="row">
<div class="span4">
<h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
- <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class. Plus, rolling your own styles is easy peasy.</p>
+ <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
</div>
<div class="span12">
<h3>Example buttons</h3>
diff --git a/lib/forms.less b/lib/forms.less
index 90b8720f03a0834a50ebfe8b462141f872008dfb..c867511936cc5defb040877b74190866347c0008 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -184,6 +184,7 @@ form div.error {
}
// Form element sizes
+// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
.input-mini,
input.mini,
textarea.mini,
@@ -224,6 +225,34 @@ textarea.xxlarge {
overflow-y: auto;
}
+// Grid style input sizes
+// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
+.formColumns(@columnSpan: 1) {
+ width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
+ margin-left: 0;
+}
+input,
+textarea,
+select {
+ // Default columns
+ &.span1 { .formColumns(1); }
+ &.span2 { .formColumns(2); }
+ &.span3 { .formColumns(3); }
+ &.span4 { .formColumns(4); }
+ &.span5 { .formColumns(5); }
+ &.span6 { .formColumns(6); }
+ &.span7 { .formColumns(7); }
+ &.span8 { .formColumns(8); }
+ &.span9 { .formColumns(9); }
+ &.span10 { .formColumns(10); }
+ &.span11 { .formColumns(11); }
+ &.span12 { .formColumns(12); }
+ &.span13 { .formColumns(13); }
+ &.span14 { .formColumns(14); }
+ &.span15 { .formColumns(15); }
+ &.span16 { .formColumns(16); }
+}
+
// Disabled and read-only inputs
input[disabled],
select[disabled],
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 263087b0664c13726a0ab742149f9f3c2c02eaa2..2dc67c6532c52bde9f153046911a8912e5f15437 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -79,58 +79,58 @@ a {
.row {
.clearfix();
margin-left: -1 * @gridGutterWidth;
+}
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
- // Credit to @dhg for the idea
- [class*="span"] {
- .gridColumn();
- }
+// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
+// Credit to @dhg for the idea
+[class*="span"] {
+ .gridColumn();
+}
- // Default columns
- .span1 { .columns(1); }
- .span2 { .columns(2); }
- .span3 { .columns(3); }
- .span4 { .columns(4); }
- .span5 { .columns(5); }
- .span6 { .columns(6); }
- .span7 { .columns(7); }
- .span8 { .columns(8); }
- .span9 { .columns(9); }
- .span10 { .columns(10); }
- .span11 { .columns(11); }
- .span12 { .columns(12); }
- .span13 { .columns(13); }
- .span14 { .columns(14); }
- .span15 { .columns(15); }
- .span16 { .columns(16); }
-
- // For optional 24-column grid
- .span17 { .columns(17); }
- .span18 { .columns(18); }
- .span19 { .columns(19); }
- .span20 { .columns(20); }
- .span21 { .columns(21); }
- .span22 { .columns(22); }
- .span23 { .columns(23); }
- .span24 { .columns(24); }
-
- // Offset column options
- .offset1 { .offset(1); }
- .offset2 { .offset(2); }
- .offset3 { .offset(3); }
- .offset4 { .offset(4); }
- .offset5 { .offset(5); }
- .offset6 { .offset(6); }
- .offset7 { .offset(7); }
- .offset8 { .offset(8); }
- .offset9 { .offset(9); }
- .offset10 { .offset(10); }
- .offset11 { .offset(11); }
- .offset12 { .offset(12); }
-
- // Unique column sizes for 16-column grid
- .span-one-third { width: 300px; }
- .span-two-thirds { width: 620px; }
- .offset-one-third { margin-left: 340px; }
- .offset-two-thirds { margin-left: 660px; }
-}
\ No newline at end of file
+// Default columns
+.span1 { .columns(1); }
+.span2 { .columns(2); }
+.span3 { .columns(3); }
+.span4 { .columns(4); }
+.span5 { .columns(5); }
+.span6 { .columns(6); }
+.span7 { .columns(7); }
+.span8 { .columns(8); }
+.span9 { .columns(9); }
+.span10 { .columns(10); }
+.span11 { .columns(11); }
+.span12 { .columns(12); }
+.span13 { .columns(13); }
+.span14 { .columns(14); }
+.span15 { .columns(15); }
+.span16 { .columns(16); }
+
+// For optional 24-column grid
+.span17 { .columns(17); }
+.span18 { .columns(18); }
+.span19 { .columns(19); }
+.span20 { .columns(20); }
+.span21 { .columns(21); }
+.span22 { .columns(22); }
+.span23 { .columns(23); }
+.span24 { .columns(24); }
+
+// Offset column options
+.offset1 { .offset(1); }
+.offset2 { .offset(2); }
+.offset3 { .offset(3); }
+.offset4 { .offset(4); }
+.offset5 { .offset(5); }
+.offset6 { .offset(6); }
+.offset7 { .offset(7); }
+.offset8 { .offset(8); }
+.offset9 { .offset(9); }
+.offset10 { .offset(10); }
+.offset11 { .offset(11); }
+.offset12 { .offset(12); }
+
+// Unique column sizes for 16-column grid
+.span-one-third { width: 300px; }
+.span-two-thirds { width: 620px; }
+.offset-one-third { margin-left: 340px; }
+.offset-two-thirds { margin-left: 660px; }
\ No newline at end of file