mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-30 12:24:19 +01:00
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
This commit is contained in:
Mark Otto
parent
948c59ddb3
commit
a968d300b4
110
bootstrap.css
vendored
110
bootstrap.css
vendored
@ -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: Mon Oct 3 21:43:20 PDT 2011
|
||||
* Date: Mon Oct 3 22:00:55 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).
|
||||
@ -264,7 +264,7 @@ a:hover {
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
[class*="span"] {
|
||||
.row > [class*="span"] {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
@ -341,40 +341,40 @@ a:hover {
|
||||
.span24 {
|
||||
width: 1420px;
|
||||
}
|
||||
.offset1 {
|
||||
.row > .offset1 {
|
||||
margin-left: 80px;
|
||||
}
|
||||
.offset2 {
|
||||
.row > .offset2 {
|
||||
margin-left: 140px;
|
||||
}
|
||||
.offset3 {
|
||||
.row > .offset3 {
|
||||
margin-left: 200px;
|
||||
}
|
||||
.offset4 {
|
||||
.row > .offset4 {
|
||||
margin-left: 260px;
|
||||
}
|
||||
.offset5 {
|
||||
.row > .offset5 {
|
||||
margin-left: 320px;
|
||||
}
|
||||
.offset6 {
|
||||
.row > .offset6 {
|
||||
margin-left: 380px;
|
||||
}
|
||||
.offset7 {
|
||||
.row > .offset7 {
|
||||
margin-left: 440px;
|
||||
}
|
||||
.offset8 {
|
||||
.row > .offset8 {
|
||||
margin-left: 500px;
|
||||
}
|
||||
.offset9 {
|
||||
.row > .offset9 {
|
||||
margin-left: 560px;
|
||||
}
|
||||
.offset10 {
|
||||
.row > .offset10 {
|
||||
margin-left: 620px;
|
||||
}
|
||||
.offset11 {
|
||||
.row > .offset11 {
|
||||
margin-left: 680px;
|
||||
}
|
||||
.offset12 {
|
||||
.row > .offset12 {
|
||||
margin-left: 740px;
|
||||
}
|
||||
.span-one-third {
|
||||
@ -788,99 +788,67 @@ textarea.xxlarge {
|
||||
}
|
||||
input.span1, textarea.span1, select.span1 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 30px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span2, textarea.span2, select.span2 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 90px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span3, textarea.span3, select.span3 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 150px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span4, textarea.span4, select.span4 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 210px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span5, textarea.span5, select.span5 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 270px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span6, textarea.span6, select.span6 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 330px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span7, textarea.span7, select.span7 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 390px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span8, textarea.span8, select.span8 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 450px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span9, textarea.span9, select.span9 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 510px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span10, textarea.span10, select.span10 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 570px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span11, textarea.span11, select.span11 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 630px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span12, textarea.span12, select.span12 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 690px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span13, textarea.span13, select.span13 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 750px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span14, textarea.span14, select.span14 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 810px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span15, textarea.span15, select.span15 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 870px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span16, textarea.span16, select.span16 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 930px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
@ -1134,6 +1102,54 @@ table tbody tr:last-child td:last-child {
|
||||
-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;
|
||||
}
|
||||
@ -2342,7 +2358,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
.media-grid a {
|
||||
float: left;
|
||||
padding: 4px;
|
||||
margin: 0 0 20px 20px;
|
||||
margin: 0 0 18px 20px;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
|
||||
76
bootstrap.min.css
vendored
76
bootstrap.min.css
vendored
@ -35,7 +35,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
|
||||
.show{display:block;}
|
||||
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.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;}
|
||||
.span2{width:100px;}
|
||||
.span3{width:160px;}
|
||||
@ -60,18 +60,18 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
|
||||
.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;}
|
||||
.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;}
|
||||
.span-one-third{width:300px;}
|
||||
.span-two-thirds{width:620px;}
|
||||
.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-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
|
||||
textarea.xxlarge{overflow-y:auto;}
|
||||
input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;}
|
||||
input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;}
|
||||
input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;}
|
||||
input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:210px;margin-left:0;}
|
||||
input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:270px;margin-left:0;}
|
||||
input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:330px;margin-left:0;}
|
||||
input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:390px;margin-left:0;}
|
||||
input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:450px;margin-left:0;}
|
||||
input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:510px;margin-left:0;}
|
||||
input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:570px;margin-left:0;}
|
||||
input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:630px;margin-left:0;}
|
||||
input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:690px;margin-left:0;}
|
||||
input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:750px;margin-left:0;}
|
||||
input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:810px;margin-left:0;}
|
||||
input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
|
||||
input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
|
||||
input.span1,textarea.span1,select.span1{display:inline-block;width:30px;}
|
||||
input.span2,textarea.span2,select.span2{display:inline-block;width:90px;}
|
||||
input.span3,textarea.span3,select.span3{display:inline-block;width:150px;}
|
||||
input.span4,textarea.span4,select.span4{display:inline-block;width:210px;}
|
||||
input.span5,textarea.span5,select.span5{display:inline-block;width:270px;}
|
||||
input.span6,textarea.span6,select.span6{display:inline-block;width:330px;}
|
||||
input.span7,textarea.span7,select.span7{display:inline-block;width:390px;}
|
||||
input.span8,textarea.span8,select.span8{display:inline-block;width:450px;}
|
||||
input.span9,textarea.span9,select.span9{display:inline-block;width:510px;}
|
||||
input.span10,textarea.span10,select.span10{display:inline-block;width:570px;}
|
||||
input.span11,textarea.span11,select.span11{display:inline-block;width:630px;}
|
||||
input.span12,textarea.span12,select.span12{display:inline-block;width:690px;}
|
||||
input.span13,textarea.span13,select.span13{display:inline-block;width:750px;}
|
||||
input.span14,textarea.span14,select.span14{display:inline-block;width:810px;}
|
||||
input.span15,textarea.span15,select.span15{display:inline-block;width:870px;}
|
||||
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;}
|
||||
.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;}
|
||||
@ -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: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 .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: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;}
|
||||
@ -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:after{clear:both;}
|
||||
.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);}
|
||||
|
||||
@ -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
|
||||
.formColumns(@columnSpan: 1) {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
|
||||
margin-left: 0;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
|
||||
@ -981,7 +981,7 @@ input[type=submit].btn {
|
||||
// -----------
|
||||
|
||||
.media-grid {
|
||||
margin-left: -20px;
|
||||
margin-left: -@gridGutterWidth;
|
||||
margin-bottom: 0;
|
||||
.clearfix();
|
||||
li {
|
||||
@ -990,7 +990,7 @@ input[type=submit].btn {
|
||||
a {
|
||||
float: left;
|
||||
padding: 4px;
|
||||
margin: 0 0 20px 20px;
|
||||
margin: 0 0 @baseline @gridGutterWidth;
|
||||
border: 1px solid #ddd;
|
||||
.border-radius(4px);
|
||||
.box-shadow(0 1px 1px rgba(0,0,0,.075));
|
||||
|
||||
@ -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)
|
||||
// Credit to @dhg for the idea
|
||||
[class*="span"] {
|
||||
.row > [class*="span"] {
|
||||
.gridColumn();
|
||||
}
|
||||
|
||||
@ -115,18 +115,20 @@ a {
|
||||
.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); }
|
||||
.row {
|
||||
& > .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; }
|
||||
|
||||
@ -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
|
||||
// --------------
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user