Skip to content
GitLab
Commit 53812bc2 authored by Mark Otto's avatar Mark Otto
Browse files

remove qualifying tags in .span selectors for built in grid so that we can use... 

remove qualifying tags in .span selectors for built in grid so that we can use .span-n classes in form styles
parent f3f60b21
Hide whitespace changes
Inline Side-by-side
Showing
with 269 additions and 137 deletions
+269 -137
bootstrap-1.3.0.css
+ 106
- 42
View file @ 53812bc2
......@@ -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],
......
bootstrap-1.3.0.min.css
+ 57
- 41
View file @ 53812bc2
......@@ -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;}
......
docs/index.html
+ 24
- 1
View file @ 53812bc2
......@@ -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>
......
lib/forms.less
+ 29
- 0
View file @ 53812bc2
......@@ -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],
......
lib/scaffolding.less
+ 53
- 53
View file @ 53812bc2
......@@ -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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment