From 460a84a926756768976cb0b24489971651475684 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 30 Jun 2011 15:56:25 -0700 Subject: Updated offset columns, fix app.js bug, misc tweaks to copy --- bootstrap-1.0.0.css | 144 +++++++++++++++++++++++++++++++----------- bootstrap-1.0.0.min.css | 50 +++++++++------ docs/assets/css/docs.css | 45 +------------ docs/assets/js/application.js | 5 ++ docs/index.html | 45 ++++++------- lib/preboot.less | 8 ++- lib/scaffolding.less | 50 ++++++++++----- lib/tables.less | 4 +- 8 files changed, 205 insertions(+), 146 deletions(-) diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index 6d5536c05a..a902aaba6a 100644 --- a/bootstrap-1.0.0.css +++ b/bootstrap-1.0.0.css @@ -128,144 +128,216 @@ aside { */ /* Baseline Grid System -------------------------------------------------- */ -div.row { +.row { zoom: 1; } -div.row:after { +.row:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } -div.row div.span1 { +.row .span1 { float: left; width: 40px; margin-left: 20px; } -div.row div.span1:first-child { +.row .span1:first-child { margin-left: 0; } -div.row div.span2 { +.row .span2 { float: left; width: 100px; margin-left: 20px; } -div.row div.span2:first-child { +.row .span2:first-child { margin-left: 0; } -div.row div.span3 { +.row .span3 { float: left; width: 160px; margin-left: 20px; } -div.row div.span3:first-child { +.row .span3:first-child { margin-left: 0; } -div.row div.span4 { +.row .span4 { float: left; width: 220px; margin-left: 20px; } -div.row div.span4:first-child { +.row .span4:first-child { margin-left: 0; } -div.row div.span5 { +.row .span5 { float: left; width: 280px; margin-left: 20px; } -div.row div.span5:first-child { +.row .span5:first-child { margin-left: 0; } -div.row div.span6 { +.row .span6 { float: left; width: 340px; margin-left: 20px; } -div.row div.span6:first-child { +.row .span6:first-child { margin-left: 0; } -div.row div.span7 { +.row .span7 { float: left; width: 400px; margin-left: 20px; } -div.row div.span7:first-child { +.row .span7:first-child { margin-left: 0; } -div.row div.span8 { +.row .span8 { float: left; width: 460px; margin-left: 20px; } -div.row div.span8:first-child { +.row .span8:first-child { margin-left: 0; } -div.row div.span9 { +.row .span9 { float: left; width: 520px; margin-left: 20px; } -div.row div.span9:first-child { +.row .span9:first-child { margin-left: 0; } -div.row div.span10 { +.row .span10 { float: left; width: 580px; margin-left: 20px; } -div.row div.span10:first-child { +.row .span10:first-child { margin-left: 0; } -div.row div.span11 { +.row .span11 { float: left; width: 640px; margin-left: 20px; } -div.row div.span11:first-child { +.row .span11:first-child { margin-left: 0; } -div.row div.span12 { +.row .span12 { float: left; width: 700px; margin-left: 20px; } -div.row div.span12:first-child { +.row .span12:first-child { margin-left: 0; } -div.row div.span13 { +.row .span13 { float: left; width: 760px; margin-left: 20px; } -div.row div.span13:first-child { +.row .span13:first-child { margin-left: 0; } -div.row div.span14 { +.row .span14 { float: left; width: 820px; margin-left: 20px; } -div.row div.span14:first-child { +.row .span14:first-child { margin-left: 0; } -div.row div.span15 { +.row .span15 { float: left; width: 880px; margin-left: 20px; } -div.row div.span15:first-child { +.row .span15:first-child { margin-left: 0; } -div.row div.span16 { +.row .span16 { float: left; width: 940px; margin-left: 20px; } -div.row div.span16:first-child { +.row .span16:first-child { margin-left: 0; } +.row .offset1 { + margin-left: 80px !important; +} +.row .offset1:first-child { + margin-left: 60px !important; +} +.row .offset2 { + margin-left: 140px !important; +} +.row .offset2:first-child { + margin-left: 120px !important; +} +.row .offset3 { + margin-left: 200px !important; +} +.row .offset3:first-child { + margin-left: 180px !important; +} +.row .offset4 { + margin-left: 260px !important; +} +.row .offset4:first-child { + margin-left: 240px !important; +} +.row .offset5 { + margin-left: 320px !important; +} +.row .offset5:first-child { + margin-left: 300px !important; +} +.row .offset6 { + margin-left: 380px !important; +} +.row .offset6:first-child { + margin-left: 360px !important; +} +.row .offset7 { + margin-left: 440px !important; +} +.row .offset7:first-child { + margin-left: 420px !important; +} +.row .offset8 { + margin-left: 500px !important; +} +.row .offset8:first-child { + margin-left: 480px !important; +} +.row .offset9 { + margin-left: 500px !important; +} +.row .offset9:first-child { + margin-left: 480px !important; +} +.row .offset10 { + margin-left: 620px !important; +} +.row .offset10:first-child { + margin-left: 600px !important; +} +.row .offset11 { + margin-left: 680px !important; +} +.row .offset11:first-child { + margin-left: 660px !important; +} +.row .offset12 { + margin-left: 740px !important; +} +.row .offset12:first-child { + margin-left: 720px !important; +} /* Structural Layout -------------------------------------------------- */ html, body { @@ -928,10 +1000,10 @@ table th { /* Zebra-striping -------------------------------------------------- */ table.zebra-striped tbody tr:nth-child(odd) td { - background-color: #f5f5f5; + background-color: #f9f9f9; } table.zebra-striped tbody tr:hover td { - background-color: #f1f1f1; + background-color: #f5f5f5; } table.zebra-striped th.header { cursor: pointer; diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css index 23457db919..8650c0f79b 100644 --- a/bootstrap-1.0.0.min.css +++ b/bootstrap-1.0.0.min.css @@ -7,23 +7,35 @@ header,section,footer,article,aside{display:block;} .clearfix{zoom:1;}.clearfix:after{display:block;visibility:hidden;height:0;clear:both;content:".";} .center-block{display:block;margin:0 auto;} .container{width:940px;margin:0 auto;zoom:1;}.container:after{display:block;visibility:hidden;height:0;clear:both;content:".";} -div.row{zoom:1;}div.row:after{display:block;visibility:hidden;height:0;clear:both;content:".";} -div.row div.span1{float:left;width:40px;margin-left:20px;}div.row div.span1:first-child{margin-left:0;} -div.row div.span2{float:left;width:100px;margin-left:20px;}div.row div.span2:first-child{margin-left:0;} -div.row div.span3{float:left;width:160px;margin-left:20px;}div.row div.span3:first-child{margin-left:0;} -div.row div.span4{float:left;width:220px;margin-left:20px;}div.row div.span4:first-child{margin-left:0;} -div.row div.span5{float:left;width:280px;margin-left:20px;}div.row div.span5:first-child{margin-left:0;} -div.row div.span6{float:left;width:340px;margin-left:20px;}div.row div.span6:first-child{margin-left:0;} -div.row div.span7{float:left;width:400px;margin-left:20px;}div.row div.span7:first-child{margin-left:0;} -div.row div.span8{float:left;width:460px;margin-left:20px;}div.row div.span8:first-child{margin-left:0;} -div.row div.span9{float:left;width:520px;margin-left:20px;}div.row div.span9:first-child{margin-left:0;} -div.row div.span10{float:left;width:580px;margin-left:20px;}div.row div.span10:first-child{margin-left:0;} -div.row div.span11{float:left;width:640px;margin-left:20px;}div.row div.span11:first-child{margin-left:0;} -div.row div.span12{float:left;width:700px;margin-left:20px;}div.row div.span12:first-child{margin-left:0;} -div.row div.span13{float:left;width:760px;margin-left:20px;}div.row div.span13:first-child{margin-left:0;} -div.row div.span14{float:left;width:820px;margin-left:20px;}div.row div.span14:first-child{margin-left:0;} -div.row div.span15{float:left;width:880px;margin-left:20px;}div.row div.span15:first-child{margin-left:0;} -div.row div.span16{float:left;width:940px;margin-left:20px;}div.row div.span16:first-child{margin-left:0;} +.row{zoom:1;}.row:after{display:block;visibility:hidden;height:0;clear:both;content:".";} +.row .span1{float:left;width:40px;margin-left:20px;}.row .span1:first-child{margin-left:0;} +.row .span2{float:left;width:100px;margin-left:20px;}.row .span2:first-child{margin-left:0;} +.row .span3{float:left;width:160px;margin-left:20px;}.row .span3:first-child{margin-left:0;} +.row .span4{float:left;width:220px;margin-left:20px;}.row .span4:first-child{margin-left:0;} +.row .span5{float:left;width:280px;margin-left:20px;}.row .span5:first-child{margin-left:0;} +.row .span6{float:left;width:340px;margin-left:20px;}.row .span6:first-child{margin-left:0;} +.row .span7{float:left;width:400px;margin-left:20px;}.row .span7:first-child{margin-left:0;} +.row .span8{float:left;width:460px;margin-left:20px;}.row .span8:first-child{margin-left:0;} +.row .span9{float:left;width:520px;margin-left:20px;}.row .span9:first-child{margin-left:0;} +.row .span10{float:left;width:580px;margin-left:20px;}.row .span10:first-child{margin-left:0;} +.row .span11{float:left;width:640px;margin-left:20px;}.row .span11:first-child{margin-left:0;} +.row .span12{float:left;width:700px;margin-left:20px;}.row .span12:first-child{margin-left:0;} +.row .span13{float:left;width:760px;margin-left:20px;}.row .span13:first-child{margin-left:0;} +.row .span14{float:left;width:820px;margin-left:20px;}.row .span14:first-child{margin-left:0;} +.row .span15{float:left;width:880px;margin-left:20px;}.row .span15:first-child{margin-left:0;} +.row .span16{float:left;width:940px;margin-left:20px;}.row .span16:first-child{margin-left:0;} +.row .offset1{margin-left:80px !important;}.row .offset1:first-child{margin-left:60px !important;} +.row .offset2{margin-left:140px !important;}.row .offset2:first-child{margin-left:120px !important;} +.row .offset3{margin-left:200px !important;}.row .offset3:first-child{margin-left:180px !important;} +.row .offset4{margin-left:260px !important;}.row .offset4:first-child{margin-left:240px !important;} +.row .offset5{margin-left:320px !important;}.row .offset5:first-child{margin-left:300px !important;} +.row .offset6{margin-left:380px !important;}.row .offset6:first-child{margin-left:360px !important;} +.row .offset7{margin-left:440px !important;}.row .offset7:first-child{margin-left:420px !important;} +.row .offset8{margin-left:500px !important;}.row .offset8:first-child{margin-left:480px !important;} +.row .offset9{margin-left:500px !important;}.row .offset9:first-child{margin-left:480px !important;} +.row .offset10{margin-left:620px !important;}.row .offset10:first-child{margin-left:600px !important;} +.row .offset11{margin-left:680px !important;}.row .offset11:first-child{margin-left:660px !important;} +.row .offset12{margin-left:740px !important;}.row .offset12:first-child{margin-left:720px !important;} html,body{background-color:#fff;} body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;text-rendering:optimizeLegibility;} div.container{width:940px;margin:0 auto;} @@ -115,8 +127,8 @@ form.form-stacked ul.inputs-list{margin-bottom:0;}form.form-stacked ul.inputs-li form.form-stacked div.actions{margin-left:-20px;padding-left:20px;} table{width:100%;margin-bottom:18px;padding:0;text-align:left;border-collapse:separate;font-size:13px;}table th,table td{padding:10px 10px 9px;line-height:13.5px;vertical-align:middle;border-bottom:1px solid #ddd;} table th{padding-top:9px;font-weight:bold;border-bottom-width:2px;} -table.zebra-striped tbody tr:nth-child(odd) td{background-color:#f5f5f5;} -table.zebra-striped tbody tr:hover td{background-color:#f1f1f1;} +table.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;} +table.zebra-striped tbody tr:hover td{background-color:#f5f5f5;} table.zebra-striped th.header{cursor:pointer;padding-right:20px;} table.zebra-striped th.headerSortUp,table.zebra-striped th.headerSortDown{background-image:url(assets/img/tablesorter-indicators.png);background-position:right -23px;background-repeat:no-repeat;background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} table.zebra-striped th.header:hover{background-image:url(assets/img/tablesorter-indicators.png);background-position:right 15px;background-repeat:no-repeat;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7352dec8e0..4a93d754b3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -224,47 +224,4 @@ div.topbar-wrapper div.topbar { padding-right: 20px; -moz-border-radius: 4px; border-radius: 4px; -} -/* Code blocks --------------------------------------------------- */ -/* -pre.css, pre.html { - background-color: #fff; -} -pre ol { - background-color: #feeed6; - list-style: decimal; - margin: -17px; - padding-left: 59px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; -} -pre ol li { - background-color: #fff; - padding: 0 10px; - border-left: 1px solid rgba(0, 0, 0, 0.1); - border-left-color: #fddfb3; - font-size: 11px; - line-height: 18px; - color: #bbb; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); - word-wrap: break-word; -} -pre ol li:first-child { - padding-top: 9px; -} -pre ol li:last-child { - padding-bottom: 9px; -} -span.html__tag_start, span.html__tag_end { - color: #277ac1; - font-weight: normal; -} -span.html__attr_name { - color: #d78b41; -} -span.html__attr_value { - color: #de4a3f; -} -*/ +} \ No newline at end of file diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 01719fb468..8a74c2eb3c 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -34,6 +34,11 @@ $(document).ready(function(){ $(this).parents('.add-on').removeClass('active'); } }); + + // Disable certain links in docs + $('ul.tabs a, ul.pills a, .pagination a').click(function(e) { + e.preventDefault(); + }); // Copy code blocks in docs $(".copy-code").focus(function() { diff --git a/docs/index.html b/docs/index.html index 8e0d28bd53..a49213ee69 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,11 +11,6 @@ - @@ -76,7 +71,7 @@
Fork on GitHub
-

Download, fork, pull, and more with the official Bootstrap repo on Github.

+

Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.

Bootstrap on GitHub »

@@ -86,27 +81,6 @@
- - - - -

Grid system Rock the standard 940px or roll your own

@@ -200,6 +174,23 @@
16
+ +

Offsetting columns

+
+
4
+
8 offset 4
+
+
+
4 offset 4
+
4 offset 4
+
+
+
5 offset 3
+
5 offset 3
+
+
+
10 offset 6
+
diff --git a/lib/preboot.less b/lib/preboot.less index e55a96ad69..416ce35bcd 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -134,8 +134,14 @@ margin-left: 0; } } +.offsetMath(@extraSpace: 40px) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace !important; +} .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important; + .offsetMath(40px); + &:first-child { + .offsetMath(20px); + } } // Border Radius diff --git a/lib/scaffolding.less b/lib/scaffolding.less index ed73a996b4..f1db31c7cf 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -6,24 +6,40 @@ /* Baseline Grid System -------------------------------------------------- */ -div.row { +.row { .clearfix(); - div.span1 { .columns(1); } - div.span2 { .columns(2); } - div.span3 { .columns(3); } - div.span4 { .columns(4); } - div.span5 { .columns(5); } - div.span6 { .columns(6); } - div.span7 { .columns(7); } - div.span8 { .columns(8); } - div.span9 { .columns(9); } - div.span10 { .columns(10); } - div.span11 { .columns(11); } - div.span12 { .columns(12); } - div.span13 { .columns(13); } - div.span14 { .columns(14); } - div.span15 { .columns(15); } - div.span16 { .columns(16); } + + // 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); } + + // 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(8); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } } diff --git a/lib/tables.less b/lib/tables.less index 9a23c42d65..5cde1b5cee 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -35,10 +35,10 @@ table { table.zebra-striped { tbody { tr:nth-child(odd) td { - background-color: #f5f5f5; + background-color: #f9f9f9; } tr:hover td { - background-color: #f1f1f1; + background-color: #f5f5f5; } } // Tablesorting styles w/ jQuery plugin -- cgit v1.2.3