rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-30 12:24:19 +01:00
Code Issues Actions Packages Releases Activity

overhaul the grid CSS to make it more durable for tables and forms to use the same sizing methods; need to see about improving this in the future

Browse Source
This commit is contained in:
Mark Otto 2011-10-03 22:14:50 -07:00
parent 948c59ddb3
commit a968d300b4
6 changed files with 154 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Mon Oct 3 21:43:20 PDT 2011 * Date: Mon Oct 3 22:00:55 PDT 2011
*/ */
/* Reset.less /* 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). * 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).
@ -264,7 +264,7 @@ a:hover {
.row:after { .row:after {
clear: both; clear: both;
} }
[class*="span"] { .row > [class*="span"] {
display: inline; display: inline;
float: left; float: left;
margin-left: 20px; margin-left: 20px;
@ -341,40 +341,40 @@ a:hover {
.span24 { .span24 {
width: 1420px; width: 1420px;
} }
.offset1 { .row > .offset1 {
margin-left: 80px; margin-left: 80px;
} }
.offset2 { .row > .offset2 {
margin-left: 140px; margin-left: 140px;
} }
.offset3 { .row > .offset3 {
margin-left: 200px; margin-left: 200px;
} }
.offset4 { .row > .offset4 {
margin-left: 260px; margin-left: 260px;
} }
.offset5 { .row > .offset5 {
margin-left: 320px; margin-left: 320px;
} }
.offset6 { .row > .offset6 {
margin-left: 380px; margin-left: 380px;
} }
.offset7 { .row > .offset7 {
margin-left: 440px; margin-left: 440px;
} }
.offset8 { .row > .offset8 {
margin-left: 500px; margin-left: 500px;
} }
.offset9 { .row > .offset9 {
margin-left: 560px; margin-left: 560px;
} }
.offset10 { .row > .offset10 {
margin-left: 620px; margin-left: 620px;
} }
.offset11 { .row > .offset11 {
margin-left: 680px; margin-left: 680px;
} }
.offset12 { .row > .offset12 {
margin-left: 740px; margin-left: 740px;
} }
.span-one-third { .span-one-third {
@ -788,99 +788,67 @@ textarea.xxlarge {
} }
input.span1, textarea.span1, select.span1 { input.span1, textarea.span1, select.span1 {
display: inline-block; display: inline-block;
float: none;
width: 30px; width: 30px;
margin-left: 0;
} }
input.span2, textarea.span2, select.span2 { input.span2, textarea.span2, select.span2 {
display: inline-block; display: inline-block;
float: none;
width: 90px; width: 90px;
margin-left: 0;
} }
input.span3, textarea.span3, select.span3 { input.span3, textarea.span3, select.span3 {
display: inline-block; display: inline-block;
float: none;
width: 150px; width: 150px;
margin-left: 0;
} }
input.span4, textarea.span4, select.span4 { input.span4, textarea.span4, select.span4 {
display: inline-block; display: inline-block;
float: none;
width: 210px; width: 210px;
margin-left: 0;
} }
input.span5, textarea.span5, select.span5 { input.span5, textarea.span5, select.span5 {
display: inline-block; display: inline-block;
float: none;
width: 270px; width: 270px;
margin-left: 0;
} }
input.span6, textarea.span6, select.span6 { input.span6, textarea.span6, select.span6 {
display: inline-block; display: inline-block;
float: none;
width: 330px; width: 330px;
margin-left: 0;
} }
input.span7, textarea.span7, select.span7 { input.span7, textarea.span7, select.span7 {
display: inline-block; display: inline-block;
float: none;
width: 390px; width: 390px;
margin-left: 0;
} }
input.span8, textarea.span8, select.span8 { input.span8, textarea.span8, select.span8 {
display: inline-block; display: inline-block;
float: none;
width: 450px; width: 450px;
margin-left: 0;
} }
input.span9, textarea.span9, select.span9 { input.span9, textarea.span9, select.span9 {
display: inline-block; display: inline-block;
float: none;
width: 510px; width: 510px;
margin-left: 0;
} }
input.span10, textarea.span10, select.span10 { input.span10, textarea.span10, select.span10 {
display: inline-block; display: inline-block;
float: none;
width: 570px; width: 570px;
margin-left: 0;
} }
input.span11, textarea.span11, select.span11 { input.span11, textarea.span11, select.span11 {
display: inline-block; display: inline-block;
float: none;
width: 630px; width: 630px;
margin-left: 0;
} }
input.span12, textarea.span12, select.span12 { input.span12, textarea.span12, select.span12 {
display: inline-block; display: inline-block;
float: none;
width: 690px; width: 690px;
margin-left: 0;
} }
input.span13, textarea.span13, select.span13 { input.span13, textarea.span13, select.span13 {
display: inline-block; display: inline-block;
float: none;
width: 750px; width: 750px;
margin-left: 0;
} }
input.span14, textarea.span14, select.span14 { input.span14, textarea.span14, select.span14 {
display: inline-block; display: inline-block;
float: none;
width: 810px; width: 810px;
margin-left: 0;
} }
input.span15, textarea.span15, select.span15 { input.span15, textarea.span15, select.span15 {
display: inline-block; display: inline-block;
float: none;
width: 870px; width: 870px;
margin-left: 0;
} }
input.span16, textarea.span16, select.span16 { input.span16, textarea.span16, select.span16 {
display: inline-block; display: inline-block;
float: none;
width: 930px; width: 930px;
margin-left: 0;
} }
input[disabled], input[disabled],
select[disabled], select[disabled],
@ -1134,6 +1102,54 @@ table tbody tr:last-child td:last-child {
-moz-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0; border-radius: 0 0 4px 0;
} }
table .span1 {
width: 20px;
}
table .span2 {
width: 60px;
}
table .span3 {
width: 100px;
}
table .span4 {
width: 140px;
}
table .span5 {
width: 180px;
}
table .span6 {
width: 220px;
}
table .span7 {
width: 260px;
}
table .span8 {
width: 300px;
}
table .span9 {
width: 340px;
}
table .span10 {
width: 380px;
}
table .span11 {
width: 420px;
}
table .span12 {
width: 460px;
}
table .span13 {
width: 500px;
}
table .span14 {
width: 540px;
}
table .span15 {
width: 580px;
}
table .span16 {
width: 620px;
}
.zebra-striped tbody tr:nth-child(odd) td { .zebra-striped tbody tr:nth-child(odd) td {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
@ -2342,7 +2358,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.media-grid a { .media-grid a {
float: left; float: left;
padding: 4px; padding: 4px;
margin: 0 0 20px 20px; margin: 0 0 18px 20px;
border: 1px solid #ddd; border: 1px solid #ddd;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;

76
bootstrap.min.css vendored
View File

@ -35,7 +35,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.show{display:block;} .show{display:block;}
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
.row:after{clear:both;} .row:after{clear:both;}
[class*="span"]{display:inline;float:left;margin-left:20px;} .row>[class*="span"]{display:inline;float:left;margin-left:20px;}
.span1{width:40px;} .span1{width:40px;}
.span2{width:100px;} .span2{width:100px;}
.span3{width:160px;} .span3{width:160px;}
@ -60,18 +60,18 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.span22{width:1300px;} .span22{width:1300px;}
.span23{width:1360px;} .span23{width:1360px;}
.span24{width:1420px;} .span24{width:1420px;}
.offset1{margin-left:80px;} .row >.offset1{margin-left:80px;}
.offset2{margin-left:140px;} .row >.offset2{margin-left:140px;}
.offset3{margin-left:200px;} .row >.offset3{margin-left:200px;}
.offset4{margin-left:260px;} .row >.offset4{margin-left:260px;}
.offset5{margin-left:320px;} .row >.offset5{margin-left:320px;}
.offset6{margin-left:380px;} .row >.offset6{margin-left:380px;}
.offset7{margin-left:440px;} .row >.offset7{margin-left:440px;}
.offset8{margin-left:500px;} .row >.offset8{margin-left:500px;}
.offset9{margin-left:560px;} .row >.offset9{margin-left:560px;}
.offset10{margin-left:620px;} .row >.offset10{margin-left:620px;}
.offset11{margin-left:680px;} .row >.offset11{margin-left:680px;}
.offset12{margin-left:740px;} .row >.offset12{margin-left:740px;}
.span-one-third{width:300px;} .span-one-third{width:300px;}
.span-two-thirds{width:620px;} .span-two-thirds{width:620px;}
.offset-one-third{margin-left:340px;} .offset-one-third{margin-left:340px;}
@ -135,22 +135,22 @@ form .clearfix.error .input-prepend span.add-on,form .clearfix.error .input-appe
.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;} .input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;} .input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
textarea.xxlarge{overflow-y:auto;} textarea.xxlarge{overflow-y:auto;}
input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;} input.span1,textarea.span1,select.span1{display:inline-block;width:30px;}
input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;} input.span2,textarea.span2,select.span2{display:inline-block;width:90px;}
input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;} input.span3,textarea.span3,select.span3{display:inline-block;width:150px;}
input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:210px;margin-left:0;} input.span4,textarea.span4,select.span4{display:inline-block;width:210px;}
input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:270px;margin-left:0;} input.span5,textarea.span5,select.span5{display:inline-block;width:270px;}
input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:330px;margin-left:0;} input.span6,textarea.span6,select.span6{display:inline-block;width:330px;}
input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:390px;margin-left:0;} input.span7,textarea.span7,select.span7{display:inline-block;width:390px;}
input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:450px;margin-left:0;} input.span8,textarea.span8,select.span8{display:inline-block;width:450px;}
input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:510px;margin-left:0;} input.span9,textarea.span9,select.span9{display:inline-block;width:510px;}
input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:570px;margin-left:0;} input.span10,textarea.span10,select.span10{display:inline-block;width:570px;}
input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:630px;margin-left:0;} input.span11,textarea.span11,select.span11{display:inline-block;width:630px;}
input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:690px;margin-left:0;} input.span12,textarea.span12,select.span12{display:inline-block;width:690px;}
input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:750px;margin-left:0;} input.span13,textarea.span13,select.span13{display:inline-block;width:750px;}
input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:810px;margin-left:0;} input.span14,textarea.span14,select.span14{display:inline-block;width:810px;}
input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;} input.span15,textarea.span15,select.span15{display:inline-block;width:870px;}
input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;} input.span16,textarea.span16,select.span16{display:inline-block;width:930px;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} 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;} .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;} .help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
@ -189,6 +189,22 @@ table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-b
table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
table .span1{width:20px;}
table .span2{width:60px;}
table .span3{width:100px;}
table .span4{width:140px;}
table .span5{width:180px;}
table .span6{width:220px;}
table .span7{width:260px;}
table .span8{width:300px;}
table .span9{width:340px;}
table .span10{width:380px;}
table .span11{width:420px;}
table .span12{width:460px;}
table .span13{width:500px;}
table .span14{width:540px;}
table .span15{width:580px;}
table .span16{width:620px;}
.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;} .zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
.zebra-striped tbody tr:hover td{background-color:#f5f5f5;} .zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
@ -326,5 +342,5 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;} .media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
.media-grid:after{clear:both;} .media-grid:after{clear:both;}
.media-grid li{display:inline;} .media-grid li{display:inline;}
.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a{float:left;padding:4px;margin:0 0 18px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}

2
lib/forms.less
View File

@ -235,9 +235,7 @@ textarea.xxlarge {
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.formColumns(@columnSpan: 1) { .formColumns(@columnSpan: 1) {
display: inline-block; display: inline-block;
float: none;
width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1)); width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
margin-left: 0;
} }
input, input,
textarea, textarea,

4
lib/patterns.less
View File

@ -981,7 +981,7 @@ input[type=submit].btn {
// ----------- // -----------
.media-grid { .media-grid {
margin-left: -20px; margin-left: -@gridGutterWidth;
margin-bottom: 0; margin-bottom: 0;
.clearfix(); .clearfix();
li { li {
@ -990,7 +990,7 @@ input[type=submit].btn {
a { a {
float: left; float: left;
padding: 4px; padding: 4px;
margin: 0 0 20px 20px; margin: 0 0 @baseline @gridGutterWidth;
border: 1px solid #ddd; border: 1px solid #ddd;
.border-radius(4px); .border-radius(4px);
.box-shadow(0 1px 1px rgba(0,0,0,.075)); .box-shadow(0 1px 1px rgba(0,0,0,.075));

28
lib/scaffolding.less
View File

@ -82,7 +82,7 @@ a {
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) // 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 // Credit to @dhg for the idea
[class*="span"] { .row > [class*="span"] {
.gridColumn(); .gridColumn();
} }
@ -115,18 +115,20 @@ a {
.span24 { .columns(24); } .span24 { .columns(24); }
// Offset column options // Offset column options
.offset1 { .offset(1); } .row {
.offset2 { .offset(2); } & > .offset1 { .offset(1); }
.offset3 { .offset(3); } & > .offset2 { .offset(2); }
.offset4 { .offset(4); } & > .offset3 { .offset(3); }
.offset5 { .offset(5); } & > .offset4 { .offset(4); }
.offset6 { .offset(6); } & > .offset5 { .offset(5); }
.offset7 { .offset(7); } & > .offset6 { .offset(6); }
.offset8 { .offset(8); } & > .offset7 { .offset(7); }
.offset9 { .offset(9); } & > .offset8 { .offset(8); }
.offset10 { .offset(10); } & > .offset9 { .offset(9); }
.offset11 { .offset(11); } & > .offset10 { .offset(10); }
.offset12 { .offset(12); } & > .offset11 { .offset(11); }
& > .offset12 { .offset(12); }
}
// Unique column sizes for 16-column grid // Unique column sizes for 16-column grid
.span-one-third { width: 300px; } .span-one-third { width: 300px; }

28
lib/tables.less
View File

@ -52,6 +52,34 @@ table {
} }
// TABLE CELL SIZES
// ----------------
// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
.tableColumns(@columnSpan: 1) {
width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
}
table {
// Default columns
.span1 { .tableColumns(1); }
.span2 { .tableColumns(2); }
.span3 { .tableColumns(3); }
.span4 { .tableColumns(4); }
.span5 { .tableColumns(5); }
.span6 { .tableColumns(6); }
.span7 { .tableColumns(7); }
.span8 { .tableColumns(8); }
.span9 { .tableColumns(9); }
.span10 { .tableColumns(10); }
.span11 { .tableColumns(11); }
.span12 { .tableColumns(12); }
.span13 { .tableColumns(13); }
.span14 { .tableColumns(14); }
.span15 { .tableColumns(15); }
.span16 { .tableColumns(16); }
}
// ZEBRA-STRIPING // ZEBRA-STRIPING
// -------------- // --------------