From 53812bc2d82adb1a4a96afb33391a1d59990c4fe Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 11 Sep 2011 18:44:25 -0700
Subject: [PATCH] remove qualifying tags in .span selectors for built in grid
so that we can use .span-n classes in form styles
---
bootstrap-1.3.0.css | 148 ++++++++++++++++++++++++++++------------
bootstrap-1.3.0.min.css | 98 +++++++++++++++-----------
docs/index.html | 25 ++++++-
lib/forms.less | 29 ++++++++
lib/scaffolding.less | 106 ++++++++++++++--------------
5 files changed, 269 insertions(+), 137 deletions(-)
diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css
index 0c20b8d640..fc1746408d 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 b2b38bbf86..66337455c0 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 110b4f46bd..02335fd758 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 90b8720f03..c867511936 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 263087b066..2dc67c6532 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
--
GitLab