diff --git a/bootstrap.css b/bootstrap.css index d5a05d9fda..a7ba4c6492 100644 --- a/bootstrap.css +++ b/bootstrap.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: 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; diff --git a/bootstrap.min.css b/bootstrap.min.css index 0755122ce7..e9d26649cf 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -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);} diff --git a/lib/forms.less b/lib/forms.less index 77e1ce24b6..85e6e361e8 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -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, diff --git a/lib/patterns.less b/lib/patterns.less index ce387614e9..c4469e5392 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -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)); diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 26bb0cc059..4f8634710f 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -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; } diff --git a/lib/tables.less b/lib/tables.less index dcc72d3ea7..949072001d 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -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 // --------------