From dd769f9a6e4419f0588a4c947961ae148fdb3671 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 27 Jun 2011 16:47:12 -0700 Subject: [PATCH] update to use latest version of bootstrap, docs cleanup, etc --- baseline-1.0.0.css => bootstrap-1.0.0.css | 0 ...e-1.0.0.min.css => bootstrap-1.0.0.min.css | 0 bootstrap.css | 195 ++++++++++++++ docs/assets/css/docs.css | 2 +- docs/assets/js/application.js | 8 +- docs/index.html | 188 +++++++------ lib/baseline.less | 17 -- lib/bootstrap.less | 218 +-------------- lib/forms.less | 10 +- lib/patterns.less | 22 +- lib/preboot.less | 255 ++++++++++++++++++ lib/scaffolding.less | 9 +- lib/tables.less | 3 +- lib/type.less | 20 +- 14 files changed, 600 insertions(+), 347 deletions(-) rename baseline-1.0.0.css => bootstrap-1.0.0.css (100%) rename baseline-1.0.0.min.css => bootstrap-1.0.0.min.css (100%) create mode 100644 bootstrap.css delete mode 100644 lib/baseline.less create mode 100644 lib/preboot.less diff --git a/baseline-1.0.0.css b/bootstrap-1.0.0.css similarity index 100% rename from baseline-1.0.0.css rename to bootstrap-1.0.0.css diff --git a/baseline-1.0.0.min.css b/bootstrap-1.0.0.min.css similarity index 100% rename from baseline-1.0.0.min.css rename to bootstrap-1.0.0.min.css diff --git a/bootstrap.css b/bootstrap.css new file mode 100644 index 0000000000..1381e8ebb6 --- /dev/null +++ b/bootstrap.css @@ -0,0 +1,195 @@ +html,body{margin:0;padding:0;} +h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;} +table{border-collapse:collapse;border-spacing:0;} +ol,ul{list-style:none;} +q:before,q:after,blockquote:before,blockquote:after{content:"";} +.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{display:inline;float:left;width:40px;margin-left:20px;}div.row div.span1:first-child{margin-left:0;} +div.row div.span2{display:inline;float:left;width:100px;margin-left:20px;}div.row div.span2:first-child{margin-left:0;} +div.row div.span3{display:inline;float:left;width:160px;margin-left:20px;}div.row div.span3:first-child{margin-left:0;} +div.row div.span4{display:inline;float:left;width:220px;margin-left:20px;}div.row div.span4:first-child{margin-left:0;} +div.row div.span5{display:inline;float:left;width:280px;margin-left:20px;}div.row div.span5:first-child{margin-left:0;} +div.row div.span6{display:inline;float:left;width:340px;margin-left:20px;}div.row div.span6:first-child{margin-left:0;} +div.row div.span7{display:inline;float:left;width:400px;margin-left:20px;}div.row div.span7:first-child{margin-left:0;} +div.row div.span8{display:inline;float:left;width:460px;margin-left:20px;}div.row div.span8:first-child{margin-left:0;} +div.row div.span9{display:inline;float:left;width:520px;margin-left:20px;}div.row div.span9:first-child{margin-left:0;} +div.row div.span10{display:inline;float:left;width:580px;margin-left:20px;}div.row div.span10:first-child{margin-left:0;} +div.row div.span11{display:inline;float:left;width:640px;margin-left:20px;}div.row div.span11:first-child{margin-left:0;} +div.row div.span12{display:inline;float:left;width:700px;margin-left:20px;}div.row div.span12:first-child{margin-left:0;} +div.row div.span13{display:inline;float:left;width:760px;margin-left:20px;}div.row div.span13:first-child{margin-left:0;} +div.row div.span14{display:inline;float:left;width:820px;margin-left:20px;}div.row div.span14:first-child{margin-left:0;} +div.row div.span15{display:inline;float:left;width:880px;margin-left:20px;}div.row div.span15:first-child{margin-left:0;} +div.row div.span16{display:inline;float:left;width:940px;margin-left:20px;}div.row div.span16:first-child{margin-left:0;} +html,body{background-color:#fff;} +body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:normal;line-height:20px;color:#808080;text-rendering:optimizeLegibility;} +div.container{width:940px;margin:0 auto;} +div.container-fluid{padding:20px;zoom:1;}div.container-fluid:after{display:block;visibility:hidden;height:0;clear:both;content:".";} +div.container-fluid div.sidebar{float:left;width:220px;} +div.container-fluid div.content{min-width:700px;max-width:1180px;margin-left:240px;} +a{color:#08b5fb;text-decoration:none;line-height:inherit;}a:hover{color:#0393cd;text-decoration:underline;} +.btn{display:inline-block;background-color:#dfd8d8;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#dfd8d8));background-image:-moz-linear-gradient(#f5f5f5, #dfd8d8);background-image:-ms-linear-gradient(#f5f5f5, #dfd8d8);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #dfd8d8));background-image:-webkit-linear-gradient(#f5f5f5, #dfd8d8);background-image:-o-linear-gradient(#f5f5f5, #dfd8d8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#dfd8d8', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#dfd8d8', GradientType=0)";background-image:linear-gradient(#f5f5f5, #dfd8d8);padding:9px 15px 10px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333333;font-size:13px;line-height:20px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),inset 0 -1px 0 rgba(0, 0, 0, 0.2),0 1px 2px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),inset 0 -1px 0 rgba(0, 0, 0, 0.2),0 1px 2px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),inset 0 -1px 0 rgba(0, 0, 0, 0.2),0 1px 2px rgba(0, 0, 0, 0.25);}.btn:hover{background-position:0 -15px;color:#333333;text-decoration:none;} +.btn.primary{background-color:#0381b4;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#08b5fb), to(#0381b4));background-image:-moz-linear-gradient(#08b5fb, #0381b4);background-image:-ms-linear-gradient(#08b5fb, #0381b4);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #08b5fb), color-stop(100%, #0381b4));background-image:-webkit-linear-gradient(#08b5fb, #0381b4);background-image:-o-linear-gradient(#08b5fb, #0381b4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#08b5fb', endColorstr='#0381b4', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#08b5fb', endColorstr='#0381b4', GradientType=0)";background-image:linear-gradient(#08b5fb, #0381b4);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.btn.primary:hover{color:#fff;} +.btn.large{font-size:16px;line-height:30px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} +.btn.small{padding-right:9px;padding-left:9px;font-size:11px;line-height:16px;} +button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} +p{font-size:14px;font-weight:normal;line-height:20px;margin-bottom:20px;}p small{font-size:12px;color:#b3b3b3;} +h1,h2,h3,h4,h5,h6{font-weight:500;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#b3b3b3;} +h1{margin-bottom:20px;font-size:30px;line-height:40px;}h1 small{font-size:18px;} +h2{font-size:24px;line-height:40px;}h2 small{font-size:14px;} +h3,h4,h5,h6{line-height:40px;} +h3{font-size:18px;}h3 small{font-size:14px;} +h4{font-size:16px;}h4 small{font-size:12px;} +h5{font-size:14px;} +h6{font-size:13px;color:#b3b3b3;text-transform:uppercase;} +ul,ol{margin:0 0 20px 25px;} +ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} +ul{list-style:disc;} +ol{list-style:decimal;} +li{line-height:20px;color:#808080;} +ul.unstyled{list-style:none;margin-left:0;} +dl{margin-bottom:20px;}dl dt,dl dd{line-height:20px;} +dl dt{font-weight:bold;} +dl dd{margin-left:10px;} +span.label{background-color:#ccc;padding:3px 5px;font-size:10px;font-weight:bold;color:#fff;text-shadow:0 0 1px rgba(0, 0, 0, 0.01);text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}span.label.expired{background-color:#f5f5f5;color:#999;} +span.label.pending{background-color:#48489b;} +span.label.declined{background-color:#9b4848;} +span.label.active,span.label.approved{background-color:#59bf59;} +span.label.disabled{background-color:#faa226;} +span.label.scheduled{background-color:#f5f5f5;color:#59bf59;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +hr{margin:0 0 19px;border:0;border-bottom:1px solid #eee;} +strong{font-style:inherit;font-weight:bold;line-height:inherit;} +em{font-style:italic;font-weight:inherit;line-height:inherit;} +.muted{color:#e6e6e6;} +blockquote{margin-bottom:20px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:20px;margin-bottom:0;} +blockquote cite{display:block;font-size:12px;font-weight:300;line-height:20px;color:#b3b3b3;}blockquote cite:before{content:'\2014 \00A0';} +address{display:block;line-height:20px;margin-bottom:20px;} +code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:2px 3px;} +pre{background-color:#f5f5f5;display:block;padding:19px;margin:0 0 20px;line-height:20px;font-size:12px;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre-wrap;} +pre.css,pre.html{background-color:#fff;} +pre ol{background-color:#feeed6;list-style:decimal;margin:-19px;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:20px;color:#b3b3b3;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;} +form{margin-bottom:20px;}form fieldset{margin-bottom:20px;padding-top:20px;}form fieldset legend{display:block;margin-left:150px;font-size:20px;line-height:1;color:#404040;} +form div.clearfix{margin-bottom:20px;} +form label,form input,form select,form textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;} +form label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;} +form div.input{margin-left:150px;} +form input[type=checkbox],form input[type=radio]{cursor:pointer;} +form input[type=text],form input[type=password],form textarea,form select,form .uneditable-input{display:block;width:210px;margin:0;padding:4px;font-size:13px;line-height:20px;height:20px;color:#808080;border:1px solid #bbb;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +form select,form input[type=file]{height:30px;line-height:30px;} +form textarea{height:auto;} +form .uneditable-input{background-color:#eee;display:block;border-color:#ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);} +form input[type=text],form input[type=password],form select,form textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} +form input[type=text]:focus,form input[type=password]:focus,form textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.75);-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.5);-moz-box-shadow:0 0 8px rgba(82, 168, 236, 0.5);box-shadow:0 0 8px rgba(82, 168, 236, 0.5);} +form div.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.error>label{color:#9d261d;} +form div.error input[type=text],form div.error input[type=password],form div.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.error input[type=text]:focus,form div.error input[type=password]:focus,form div.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);} +form div.error div.input-prepend span.add-on,form div.error div.input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;} +form .input-mini,form input.mini,form textarea.mini,form select.mini{width:60px;} +form .input-small,form input.small,form textarea.small,form select.small{width:90px;} +form .input-medium,form input.medium,form textarea.medium,form select.medium{width:150px;} +form .input-large,form input.large,form textarea.large,form select.large{width:210px;} +form .input-xlarge,form input.xlarge,form textarea.xlarge,form select.xlarge{width:270px;} +form .input-xxlarge,form input.xxlarge,form textarea.xxlarge,form select.xxlarge{width:530px;} +form textarea.xxlarge{overflow-y:scroll;} +form input[readonly]:focus,form textarea[readonly]:focus,form input.disabled{background:#f5f5f5;border-color:#ddd;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +div.actions{background:#f5f5f5;margin-top:20px;margin-bottom:20px;padding:19px 20px 20px 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;}div.actions div.secondary-action{float:right;}div.actions div.secondary-action a{line-height:30px;}div.actions div.secondary-action a:hover{text-decoration:underline;} +.help-inline,.help-block{font-size:12px;line-height:20px;color:#b3b3b3;} +.help-inline{padding-left:5px;} +.help-block{display:block;max-width:600px;}.help-block h5,.help-block p,.help-block ol li{color:#808080;} +.help-block p,.help-block ol li{font-size:12px;} +.help-block p{margin-bottom:0;font-size:12px;line-height:20px;color:#b3b3b3;} +.help-block ol{margin-bottom:10px;margin-left:25px;} +div.inline-inputs{color:#808080;}div.inline-inputs span,div.inline-inputs input[type=text]{display:inline-block;} +div.inline-inputs input.mini{width:60px;} +div.inline-inputs input.small{width:90px;} +div.inline-inputs span{padding:0 2px 0 1px;} +div.input-prepend input[type=text],div.input-append input[type=text]{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} +div.input-prepend .add-on,div.input-append .add-on{background:#f5f5f5;float:left;display:block;width:auto;min-width:16px;padding:5px 4px 5px 5px;color:#b3b3b3;font-weight:normal;line-height:18px;height:18px;text-align:center;text-shadow:0 1px 0 #fff;border:1px solid #bbb;border-right-width:0;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +div.input-prepend .active,div.input-append .active{background:#a9dba9;border-color:#46a546;} +div.input-append input[type=text]{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +div.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;border-right-width:1px;border-left-width:0;} +ul.inputs-list{margin:0 0 5px;width:100%;}ul.inputs-list li{display:block;padding:0;width:100%;}ul.inputs-list li label{display:block;float:none;width:auto;padding:0;line-height:20px;text-align:left;white-space:normal;}ul.inputs-list li label strong{color:#808080;} +ul.inputs-list li label small{font-size:12px;font-weight:normal !important;} +ul.inputs-list li ul.inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;} +ul.inputs-list li:first-child{padding-top:5px;} +ul.inputs-list input[type=radio],ul.inputs-list input[type=checkbox]{margin-bottom:0;} +form.form-stacked fieldset{padding-top:10px;} +form.form-stacked legend{margin-left:0;} +form.form-stacked label{display:block;float:none;width:auto;font-weight:bold;text-align:left;line-height:20px;padding-top:0;} +form.form-stacked div.clearfix{margin-bottom:10px;}form.form-stacked div.clearfix div.input{margin-left:0;} +form.form-stacked ul.inputs-list{margin-bottom:0;}form.form-stacked ul.inputs-list li{padding-top:0;}form.form-stacked ul.inputs-list li label{font-weight:normal;padding-top:0;} +table{width:100%;margin-bottom:20px;padding:0;text-align:left;border-collapse:separate;}table th,table td{padding:10px 10px 9px;line-height:20px;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 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;} +table.zebra-striped th.actions:hover{background-image:none !important;} +table.zebra-striped th.headerSortDown,table.zebra-striped th.headerSortDown:hover{background-position:right -25px;} +table.zebra-striped th.headerSortUp,table.zebra-striped th.headerSortUp:hover{background-position:right -65px;} +table.zebra-striped th.blue{color:#08b5fb;border-bottom-color:#08b5fb;} +table.zebra-striped th.headerSortUp.blue,table.zebra-striped th.headerSortDown.blue{background-color:#d1f1fe;} +table.zebra-striped th.green{color:#46a546;border-bottom-color:#46a546;} +table.zebra-striped th.headerSortUp.green,table.zebra-striped th.headerSortDown.green{background-color:#cdeacd;} +table.zebra-striped th.red{color:#9d261d;border-bottom-color:#9d261d;} +table.zebra-striped th.headerSortUp.red,table.zebra-striped th.headerSortDown.red{background-color:#f4c8c5;} +table.zebra-striped th.yellow{color:#ffc40d;border-bottom-color:#ffc40d;} +table.zebra-striped th.headerSortUp.yellow,table.zebra-striped th.headerSortDown.yellow{background-color:#fff6d9;} +table.zebra-striped th.orange{color:#f89406;border-bottom-color:#f89406;} +table.zebra-striped th.headerSortUp.orange,table.zebra-striped th.headerSortDown.orange{background-color:#fee9cc;} +table.zebra-striped th.purple{color:#7a43b6;border-bottom-color:#7a43b6;} +table.zebra-striped th.headerSortUp.purple,table.zebra-striped th.headerSortDown.purple{background-color:#e2d5f0;} +div.topbar{background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(#333333, #222222);background-image:-ms-linear-gradient(#333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(#333333, #222222);background-image:-o-linear-gradient(#333333, #222222);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0)";background-image:linear-gradient(#333333, #222222);height:40px;position:fixed;top:0;left:0;right:0;z-index:100;overflow:visible;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}div.topbar a{color:#b3b3b3;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);-webkit-transition:all linear 0.1s;-moz-transition:all linear 0.1s;transition:all linear 0.1s;} +div.topbar ul li a:hover,div.topbar ul li.active a,div.topbar a.logo:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.15);color:#ffffff;text-decoration:none;} +div.topbar a.logo{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}div.topbar a.logo img{display:inline;float:left;margin-right:6px;} +div.topbar form{float:left;margin:4px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#b3b3b3;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#e6e6e6;} +div.topbar form input::-webkit-input-placeholder{color:#e6e6e6;} +div.topbar form input:hover{background-color:#444;background-color:rgba(255, 255, 255, 0.5);color:#fff;} +div.topbar form input:focus,div.topbar form input.focused{outline:none;background-color:#fff;color:#404040;text-shadow:0 1px 0 #fff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);} +div.topbar ul{display:block;float:left;margin:0 10px 0 0;}div.topbar ul.secondary-nav{float:right;margin-left:10px;margin-right:0;} +div.topbar ul li{display:block;float:left;font-size:13px;}div.topbar ul li a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}div.topbar ul li a:hover{color:#fff;text-decoration:none;} +div.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);font-weight:bold;} +div.topbar ul li.vr{border-left:1px solid #008db8;border-right:1px solid #00a0d1;height:26px;margin:6px 3px 1px 3px;} +div.topbar ul.primary-nav li ul{left:0;} +div.topbar ul.secondary-nav li ul{right:0;} +div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:7px;height:7px;display:inline-block;background:transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;opacity:.5;} +div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);color:#fff;} +div.topbar ul li.menu.open ul{display:block;}div.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}div.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;} +div.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;} +div.topbar ul li ul{background-color:#333;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:0;text-align:left;border:0;zoom:1;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);}div.topbar ul li ul li{float:none;clear:both;display:block;background:none;font-size:12px;}div.topbar ul li ul li a{display:block;padding:6px 15px;clear:both;font-weight:normal;line-height:19px;color:#bbb;}div.topbar ul li ul li a:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.25);color:#fff;} +div.topbar ul li ul li.divider{height:1px;overflow:hidden;background:rgba(0, 0, 0, 0.2);border-bottom:1px solid rgba(255, 255, 255, 0.1);margin:5px 0;} +div.topbar ul li ul li span{clear:both;display:block;background:rgba(0, 0, 0, 0.2);padding:6px 15px;cursor:default;color:#666;border-top:1px solid rgba(0, 0, 0, 0.2);} +div.page-header{margin-bottom:19px;border-bottom:1px solid #ddd;-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}div.page-header h1{margin-bottom:0;} +div.alert-message{background-color:rgba(0, 0, 0, 0.15);background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.15)));background-image:-moz-linear-gradient(transparent, rgba(0, 0, 0, 0.15));background-image:-ms-linear-gradient(transparent, rgba(0, 0, 0, 0.15));background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.15)));background-image:-webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.15));background-image:-o-linear-gradient(transparent, rgba(0, 0, 0, 0.15));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='rgba(0, 0, 0, 0.15)', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='rgba(0, 0, 0, 0.15)', GradientType=0)";background-image:linear-gradient(transparent, rgba(0, 0, 0, 0.15));background-color:#e6e6e6;margin-bottom:20px;padding:10px 15px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;color:#fff;border-bottom:1px solid rgba(0, 0, 0, 0.25);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}div.alert-message p{color:#fff;margin-bottom:0;}div.alert-message p+p{margin-top:5px;} +div.alert-message.error{background-color:#e06359;} +div.alert-message.warning{background-color:#ffd75a;} +div.alert-message.success{background-color:#74c474;} +div.alert-message.info{background-color:#53ccfc;} +div.alert-message a.close{float:right;margin-top:-2px;opacity:.5;color:#fff;font-size:20px;font-weight:bold;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}div.alert-message a.close:hover{opacity:1;text-decoration:none;} +div.block-message{margin-bottom:20px;padding:14px 19px;color:#333;color:rgba(0, 0, 0, 0.8);text-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}div.block-message p{font-size:13px;line-height:18px;color:#333;color:rgba(0, 0, 0, 0.8);margin-right:30px;margin-bottom:0;} +div.block-message ul{margin-bottom:0;} +div.block-message strong{display:block;} +div.block-message a.close{display:block;color:#333;color:rgba(0, 0, 0, 0.5);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);} +div.block-message.error{background:#f8dcda;border:1px solid #f4c8c5;} +div.block-message.warning{background:#fff0c0;border:1px solid #ffe38d;} +div.block-message.success{background:#dff1df;border:1px solid #bbe2bb;} +div.block-message.info{background:#eaf9ff;border:1px solid #d1f1fe;} +ul.tabs,ul.pills{margin:0 0 20px;padding:0;zoom:1;}ul.tabs:after,ul.pills:after{display:block;visibility:hidden;height:0;clear:both;content:".";} +ul.tabs li,ul.pills li{display:inline;}ul.tabs li a,ul.pills li a{display:inline;float:left;width:auto;} +ul.tabs{width:100%;border-bottom:1px solid #ccc;}ul.tabs li a{margin-bottom:-1px;margin-right:2px;padding:0 15px;line-height:39px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}ul.tabs li a:hover{background:#f5f5f5;border-bottom:1px solid #ccc;} +ul.tabs li.active a{background:#fff;padding:0 14px;border:1px solid #ccc;border-bottom:0;color:#808080;} +ul.pills li a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #fff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}ul.pills li a:hover{background:#0393cd;color:#fff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);} +ul.pills li.active a{background:#08b5fb;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);} +div.pagination{height:40px;margin:20px 0;}div.pagination ul{float:left;margin:0;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.075);box-shadow:0 1px 2px rgba(0, 0, 0, 0.075);}div.pagination ul li{display:inline;}div.pagination ul li a{display:inline;float:left;padding:0 14px;line-height:38px;border-right:1px solid rgba(0, 0, 0, 0.15);text-decoration:none;} +div.pagination ul li a:hover,div.pagination ul li.active a{background-color:#eaf9ff;} +div.pagination ul li.disabled a,div.pagination ul li.disabled a:hover{background-color:none;color:#b3b3b3;} +div.pagination ul li.next a,div.pagination ul li:last-child a{border:0;} +div.well{background:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 3e255d18e4..de0fe5ee25 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -65,7 +65,7 @@ section { font-size: 20px; font-weight: 300; line-height: 30px; - margin: 5px 0; + margin: 0; } #masthead a.btn { background-color: #552e7e; diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index c6685b316f..2372bdb96f 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -1,6 +1,6 @@ -// Javascript to toggle the dropdowns $(document).ready(function(){ + // Example dropdown for topbar nav $("body").bind("click", function(e) { $("ul.menu-dropdown").hide(); $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide(); @@ -22,10 +22,10 @@ $(document).ready(function(){ return false; }); - //table sort example + // table sort example $("#sortTableExample").tablesorter( {sortList: [[1,0]]} ); - //add on + // add on $('.add-on :checkbox').click(function() { if ($(this).attr('checked')) { $(this).parents('.add-on').addClass('active'); @@ -35,7 +35,7 @@ $(document).ready(function(){ }); - //scroll spyer + // scroll spyer var activeTarget, $window = $(window), position = {}, diff --git a/docs/index.html b/docs/index.html index ccaf2235c6..353adc0b0a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,31 +2,20 @@ - Twitter Baseline + Twitter Bootstrap - - + + - + - - - - @@ -34,11 +23,11 @@

  • Getting Started
    • -
  • Bootstrap
    • +
  • Preboot
  • Grid
  • Layouts
  • Typography
    • @@ -55,8 +44,8 @@
    -

    Twitter Baseline

    -

    Baseline is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.

    +

    Twitter Bootstrap

    +

    Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.

    Download Zip » @@ -80,51 +69,50 @@
    -

    You can use Twitter Baseline in one of two ways: just drop the compiled CSS into any new project and start cranking, or run LESS on your site and compile on the fly like a boss.

    +

    You can use Twitter Bootstrap in one of two ways: just drop the compiled CSS into any new project and start cranking, or run LESS on your site and compile on the fly like a boss.

    1. Compiled CSS

    -

    Use this option if you want all the styles of Baseline in a compiled and minified stylesheet, but none of the extra power of LESS.

    - 
    <link type="text/css" href="baseline-1.0.0.css" media="all" />
    +

    Use this option if you want all the styles of Bootstrap in a compiled and minified stylesheet, but none of the extra power of LESS.

    + 
    <link type="text/css" href="bootstrap-1.0.0.css" media="all" />

    2. Run with LESS.js

    -

    Use this option to make full use of Baseline's LESS variables, mixins, and nesting in CSS.

    +

    Use this option to make full use of Bootstrap's LESS variables, mixins, and nesting in CSS.

    -<link rel="stylesheet/less" type="text/css" href="less/baseline.less" media="all" />
+<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" />
 <script type="text/javascript" src="js/less-1.0.41.min.js"></script>
    -
    +

    Fully Bootstrapped Supercharged CSS with variables, mixins, and functions

    -

    Bootstrap is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development, that we used to build Baseline.

    +

    Preboot is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development, that we used to build Bootstrap.

    What's included

    -

    Here are some of the highlights of what's included in Twitter Baseline as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.

    +

    Here are some of the highlights of what's included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.

    Color variables

    Variables in LESS are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you're set.

     // Links
-@link-color:        #0069d6;
-@link-hover-color:  darken(@link-color, 10);
+@linkColor:         #8b59c2;
+@linkColorHover:    darken(@linkColor, 10);
 
 // Grays
-@white:             #fff;
-@gray-lighter:      #ccc;
-@gray-light:        #777;
-@gray:              #555;
-@gray-dark:         #333;
 @black:             #000;
+@grayDark:          lighten(@black, 25%);
+@gray:              lighten(@black, 50%);
+@grayLight:         lighten(@black, 70%);
+@grayLighter:       lighten(@black, 90%);
+@white:             #fff;
 
 // Accent Colors
 @blue:              #08b5fb;
-@blue-dark:         #0069d6;
 @green:             #46a546;
 @red:               #9d261d;
 @yellow:            #ffc40d;
@@ -144,51 +132,69 @@

    Mixins up the wazoo

    -

    Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They're great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap in Baseline.

    +

    Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They're great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.

    +

    Font stacks

    -// Font Stacks
-.font(@weight: normal, @size: 14px, @lineheight: 20px) {
-  font-size: @size;
-  font-weight: @weight;
-  line-height: @lineheight;
-}
-.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: @size;
-  font-weight: @weight;
-  line-height: @lineheight;
-}
-
-// Drop shadows
-.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-  -webkit-box-shadow: @shadow;
-  -moz-box-shadow: @shadow;
-  box-shadow: @shadow;
-}
-
-// Gradients
-#gradient {
-  .horizontal(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: no-repeat;
-    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
-    background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
-    background-image: -moz-linear-gradient(right center, @startColor, @endColor);
-    background-image: -o-linear-gradient(left,  @startColor,  @endColor);
-    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
-    filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
-    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
+#font {
+  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
   }
-  .vertical(@startColor: #555, @endColor: #333) {
+  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
+  }
+  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+    font-family: "Georgia", Times New Roman, Times, sans-serif;
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
+  }
+  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
+    font-family: "Monaco", Courier New, monospace;
+    font-size: @size;
+    font-weight: @weight;
+    line-height: @lineHeight;
+  }
+}
+
    +

    Gradients

    +
    +#gradient {
+  .horizontal (@startColor: #555, @endColor: #333) {
     background-color: @endColor;
-    background-repeat: no-repeat;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
-    background-image: -webkit-linear-gradient(@startColor, @endColor);
-    background-image: -moz-linear-gradient(@startColor, @endColor);
-    background-image: -o-linear-gradient(top,  @startColor,  @endColor);
-    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
-    filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
-    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
+    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
+    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); /* IE6 & IE7 */
+    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
+    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+  }
+  .vertical (@startColor: #555, @endColor: #333) {
+    background-color: @endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */
+    background-image: -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */
+    background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
+    background-image: -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
+    background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */
+    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
+    background-image: linear-gradient(@startColor, @endColor); /* the standard */
+  }
+  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+    ...
+  }
+  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
+    ...
   }
 }
    @@ -196,19 +202,29 @@

    Operations and grid system

    Get fancy and perform some match to generate flexible and powerful mixins like the one below.

    -// Roll your own grid system
-@grid_columns: 16;
-@grid_column_width: 40px;
-@grid_gutter_width: 20px;
-.columns(@column_span: 1) {
+// Griditude
+@gridColumns:       16;
+@gridColumnWidth:   40px;
+@gridGutterWidth:   20px;
+
+// Grid System
+.container {
+  width: @siteWidth;
+  margin: 0 auto;
+  .clearfix();
+}
+.columns(@columnSpan: 1) {
   display: inline;
   float: left;
-  width: (@grid_column_width * @column_span) + (@grid_gutter_width * (@column_span - 1));
-  margin-left: @grid_gutter_width;
+  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+  margin-left: @gridGutterWidth;
   &:first-child {
     margin-left: 0;
   }
 }
+.offset(@columnOffset: 1) {
+  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
+}
    @@ -224,7 +240,7 @@

    Default grid

    -

    The default grid system provided as part of Baseline is a 940px wide 16-column grid. It's a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.

    +

    The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It's a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.

    Example grid markup

    @@ -1168,7 +1184,7 @@ diff --git a/lib/baseline.less b/lib/baseline.less deleted file mode 100644 index cfcfe9ed99..0000000000 --- a/lib/baseline.less +++ /dev/null @@ -1,17 +0,0 @@ -/* - Master Stylesheet - This file is only for importing all required stylesheets for LESS to include and then compile. -*/ - -// CSS Reset -@import "reset.less"; - -// Core -@import "bootstrap.less"; -@import "scaffolding.less"; - -// Styled patterns and elements -@import "type.less"; -@import "forms.less"; -@import "tables.less"; -@import "patterns.less"; \ No newline at end of file diff --git a/lib/bootstrap.less b/lib/bootstrap.less index bd9dbcf469..ddf5582d55 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -1,211 +1,17 @@ /* - Bootstrap v1.1 - Variables and mixins to bootstrap any new web development project. Modified from original version for Twitter. + Master Stylesheet + This file is only for importing all required stylesheets for LESS to include and then compile. */ +// CSS Reset +@import "reset.less"; -/* Variables --------------------------------------------------- */ +// Core +@import "preboot.less"; +@import "scaffolding.less"; -// Links -@link-color: #0069d6; -@link-hover-color: darken(@link-color, 10); - -// Grays -@white: #fff; -@gray-lighter: #ccc; -@gray-light: #777; -@gray: #555; -@gray-dark: #333; -@black: #000; - -// Accent Colors -@blue: #08b5fb; -@blue-dark: #0069d6; -@green: #46a546; -@red: #9d261d; -@yellow: #ffc40d; -@orange: #f89406; -@pink: #c3325f; -@purple: #7a43b6; - -// Baseline grid -@baseline: 20px; - -// Griditude -@grid_columns: 16; -@grid_column_width: 40px; -@grid_gutter_width: 20px; -@site_width: (@grid_columns * @grid_column_width) + (@grid_gutter_width * (@grid_columns - 1)); - - -/* Mixins --------------------------------------------------- */ - -// Clearfix for clearing floats like a boss -.clearfix { - zoom: 1; - &:after { - display: block; - visibility: hidden; - height: 0; - clear: both; - content: "."; - } -} - -// Floats -.right { - float: right; -} -.left { - float: left; -} - -// Input placeholder text -.placeholder(@color: @gray-light) { - :-moz-placeholder { - color: @color; - } - ::-webkit-input-placeholder { - color: @color; - } -} - -// Font Stacks -.font(@weight: normal, @size: 14px, @lineheight: 20px) { - font-size: @size; - font-weight: @weight; - line-height: @lineheight; -} -.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: @size; - font-weight: @weight; - line-height: @lineheight; -} -.serif(@weight: normal, @size: 14px, @lineheight: 20px) { - font-family: "Georgia", Times New Roman, Times, sans-serif; - font-size: @size; - font-weight: @weight; - line-height: @lineheight; -} -.monospace(@weight: normal, @size: 12px, @lineheight: 20px) { - font-family: "Monaco", Courier New, monospace; - font-size: @size; - font-weight: @weight; - line-height: @lineheight; -} - -// Grid System -.container { - width: @site_width; - margin: 0 auto; -} -.columns(@column_span: 1) { - display: inline; - float: left; - width: (@grid_column_width * @column_span) + (@grid_gutter_width * (@column_span - 1)); - margin-left: @grid_gutter_width; - &:first-child { - margin-left: 0; - } -} -.offset(@column_offset: 1) { - margin-left: (@grid_column_width * @column_offset) + (@grid_gutter_width * (@column_offset - 1)) !important; -} - -// Border Radius -.border-radius(@radius: 5px) { - -moz-border-radius: @radius; - border-radius: @radius; -} - -// Drop shadows -.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; -} - -// Transitions -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - transition: @transition; -} - -// CSS3 Content Columns -.content-columns(@column_count, @column_gap: 20px) { - -webkit-column-count: @count; - -webkit-column-gap: @gap; - -moz-column-count: @count; - -moz-column-gap: @gap; - column-count: @count; - column-gap: @gap; -} - -// Buttons -.button(@color: #f9f9f9, @padding: 4px 14px, @text_color: #555, @text_shadow: 0 1px 0 rgba(255,255,255,.75), @font_size: 13px, @border_color: rgba(0,0,0,.1), @rounded: 4px) { - display: inline-block; - #gradient > .vertical-three-colors(@color, @color, 0.25, darken(@color, 10%)); - padding: @padding; - text-shadow: @text_shadow; - color: @text_color; - line-height: @baseline; - border: 1px solid @border_color; - border-bottom-color: fadein(@border_color, 15%); - .border-radius(@rounded); - @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.1); - .box-shadow(@shadow); - cursor: pointer; - &:hover { - background-position: 0 -15px; - color: darken(@text_color, 10%); - text-decoration: none; - } -} - -// Add an alphatransparency value to any background or border color (via Elyse Holladay) -#translucent { - .background(@color: @white, @alpha: 1) { - background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - } - .border(@color: @white, @alpha: 1) { - border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - background-clip: padding-box; - } -} - -// Gradients -#gradient { - .horizontal(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); - background-image: -webkit-linear-gradient(right center, @startColor, @endColor); - background-image: -moz-linear-gradient(right center, @startColor, @endColor); - background-image: -o-linear-gradient(left, @startColor, @endColor); - background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); - filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor)); - -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor); - } - .vertical(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); - background-image: -webkit-linear-gradient(@startColor, @endColor); - background-image: -moz-linear-gradient(@startColor, @endColor); - background-image: -o-linear-gradient(top, @startColor, @endColor); - background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); - filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor)); - -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor); - } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { - background-color: @endColor; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor); - background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor); - } -} +// Styled patterns and elements +@import "type.less"; +@import "forms.less"; +@import "tables.less"; +@import "patterns.less"; \ No newline at end of file diff --git a/lib/forms.less b/lib/forms.less index 59dae9241b..3718b2f733 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -18,7 +18,7 @@ form { margin-left: 150px; font-size: 20px; line-height: 1; - color: @gray-dark; + color: @grayDark; } } // Parent element that clears floats and wraps labels and fields together @@ -27,7 +27,7 @@ form { } // Set font for forms label, input, select, textarea { - .sans-serif(normal,13px,normal); + #font > .sans-serif(normal,13px,normal); } // Float labels left label { @@ -177,7 +177,7 @@ div.actions { .help-block { font-size: 12px; line-height: @baseline; - color: @gray-light; + color: @grayLight; } .help-inline { padding-left: 5px; @@ -196,7 +196,7 @@ div.actions { margin-bottom: 0; font-size: 12px; line-height: @baseline; - color: @gray-light; + color: @grayLight; } ol { margin-bottom: 10px; @@ -234,7 +234,7 @@ div.input-append { width: auto; min-width: 16px; padding: 5px 4px 5px 5px; - color: @gray-light; + color: @grayLight; font-weight: normal; line-height: 18px; height: 18px; diff --git a/lib/patterns.less b/lib/patterns.less index ddad5271d4..e02fbd0b49 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -36,7 +36,7 @@ div.topbar { a.logo { margin-left: -10px; margin-right: 10px; - color: @gray-light; + color: @grayLight; font-size: 20px; font-weight: 200; img { @@ -77,7 +77,7 @@ div.topbar { .box-shadow(@shadow); // Links get text shadow a { - color: @gray-light; + color: @grayLight; text-shadow: 0 -1px 0 rgba(0,0,0,.25); .transition(all linear .1s); } @@ -113,9 +113,9 @@ div.topbar { opacity: 1; position: relative; input { - background-color: @gray-light; + background-color: @grayLight; background-color: rgba(255,255,255,.3); - .sans-serif(13px, normal, 1); + #font > .sans-serif(13px, normal, 1); width: 220px; padding: 4px 9px; color: #fff; @@ -127,10 +127,10 @@ div.topbar { .transition(none); // Placeholder text gets special styles; can't be bundled together though for some reason &:-moz-placeholder { - color: @gray-lighter; + color: @grayLighter; } &::-webkit-input-placeholder { - color: @gray-lighter; + color: @grayLighter; } &:hover { background-color: #444; @@ -141,7 +141,7 @@ div.topbar { &.focused { outline: none; background-color: #fff; - color: @gray-dark; + color: @grayDark; text-shadow: 0 1px 0 #fff; border: 0; padding: 5px 10px; @@ -315,7 +315,7 @@ div.page-header { // One-liner alert bars div.alert-message { #gradient > .vertical(transparent, rgba(0,0,0,0.15)); - background-color: @gray-lighter; + background-color: @grayLighter; margin-bottom: @baseline; padding: 10px 15px 9px; .border-radius(6px); @@ -457,14 +457,14 @@ ul.pills { line-height: 30px; .border-radius(15px); &:hover { - background: @link-hover-color; + background: @linkColorHover; color: #fff; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.25); } } &.active a { - background: @link-color; + background: @linkColor; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25); } @@ -501,7 +501,7 @@ div.pagination { &.disabled a, &.disabled a:hover { background-color: none; - color: @gray-light; + color: @grayLight; } &.next a, &:last-child a { diff --git a/lib/preboot.less b/lib/preboot.less new file mode 100644 index 0000000000..70ac9265cb --- /dev/null +++ b/lib/preboot.less @@ -0,0 +1,255 @@ +/* + Preboot + Variables and mixins to pre-ignite any new web development project +*/ + + +/* Variables +-------------------------------------------------- */ + +// Links +@linkColor: #08b5fb; +@linkColorHover: darken(@linkColor, 10); + +// Grays +@black: #000; +@grayDark: lighten(@black, 25%); +@gray: lighten(@black, 50%); +@grayLight: lighten(@black, 70%); +@grayLighter: lighten(@black, 90%); +@white: #fff; + +// Accent Colors +@blue: #08b5fb; +@green: #46a546; +@red: #9d261d; +@yellow: #ffc40d; +@orange: #f89406; +@pink: #c3325f; +@purple: #7a43b6; + +// Baseline grid +@baseline: 20px; + +// Griditude +@gridColumns: 16; +@gridColumnWidth: 40px; +@gridGutterWidth: 20px; +@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + + +/* Color Scheme +-------------------------------------------------- */ + +@baseColor: @blue; // Set a base color +@complement: spin(@baseColor, 180); // Determine a complementary color +@split1: spin(@baseColor, 158); // Split complements +@split2: spin(@baseColor, -158); +@triad1: spin(@baseColor, 135); // Triads colors +@triad2: spin(@baseColor, -135); +@tetra1: spin(@baseColor, 90); // Tetra colors +@tetra2: spin(@baseColor, -90); +@analog1: spin(@baseColor, 22); // Analogs colors +@analog2: spin(@baseColor, -22); + + +/* Mixins +-------------------------------------------------- */ + +// Clearfix for clearing floats like a boss +.clearfix { + zoom: 1; + &:after { + display: block; + visibility: hidden; + height: 0; + clear: both; + content: "."; + } +} + +// Center-align a block level element +.center-block { + display: block; + margin: 0 auto; +} + +// Sizing shortcuts +.size(@height: 5px, @width: 5px) { + height: @height; + width: @width; +} +.square(@size: 5px) { + .size(@size, @size); +} + +// Input placeholder text +.placeholder(@color: @grayLight) { + :-moz-placeholder { + color: @color; + } + ::-webkit-input-placeholder { + color: @color; + } +} + +// Font Stacks +#font { + .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) { + font-size: @size; + font-weight: @weight; + line-height: @lineHeight; + } + .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: @size; + font-weight: @weight; + line-height: @lineHeight; + } + .serif(@weight: normal, @size: 14px, @lineHeight: 20px) { + font-family: "Georgia", Times New Roman, Times, sans-serif; + font-size: @size; + font-weight: @weight; + line-height: @lineHeight; + } + .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) { + font-family: "Monaco", Courier New, monospace; + font-size: @size; + font-weight: @weight; + line-height: @lineHeight; + } +} + +// Grid System +.container { + width: @siteWidth; + margin: 0 auto; + .clearfix(); +} +.columns(@columnSpan: 1) { + display: inline; + float: left; + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + margin-left: @gridGutterWidth; + &:first-child { + margin-left: 0; + } +} +.offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important; +} + +// Border Radius +.border-radius(@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +// Drop shadows +.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { + -webkit-box-shadow: @shadow; + -moz-box-shadow: @shadow; + box-shadow: @shadow; +} + +// Transitions +.transition(@transition) { + -webkit-transition: @transition; + -moz-transition: @transition; + transition: @transition; +} + +// CSS3 Content Columns +.content-columns(@columnCount, @columnGap: 20px) { + -webkit-column-count: @columnCount; + -webkit-column-gap: @columnGap; + -moz-column-count: @columnCount; + -moz-column-gap: @columnGap; + column-count: @columnCount; + column-gap: @columnGap; +} + +// Buttons +.button(@color: #f5f5f5, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @padding: 9px 15px 10px, @borderRadius: 6px) { + display: inline-block; + #gradient > .vertical(@color,darken(saturate(@color,10),10)); + padding: @padding; + text-shadow: @textShadow; + color: @textColor; + font-size: @fontSize; + line-height: 20px; + .border-radius(@borderRadius); + @shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25); + .box-shadow(@shadow); + &:hover { + background-position: 0 -15px; + color: @textColor; + text-decoration: none; + } +} + +// Add an alphatransparency value to any background or border color (via Elyse Holladay) +#translucent { + .background(@color: @white, @alpha: 1) { + background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); + } + .border(@color: @white, @alpha: 1) { + border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); + background-clip: padding-box; + } +} + +// Gradients +#gradient { + .horizontal (@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror + background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ + background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 + background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); /* IE6 & IE7 */ + -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */ + background-image: linear-gradient(left, @startColor, @endColor); // Le standard + } + .vertical (@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */ + background-image: -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */ + background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */ + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */ + background-image: -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */ + background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */ + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */ + -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */ + background-image: linear-gradient(@startColor, @endColor); /* the standard */ + } + .directional (@startColor: #555, @endColor: #333, @deg: 45deg) { + background-color: @endColor; + background-repeat: repeat-x; + background-image: -moz-linear-gradient(@deg, @startColor, @endColor); /* FF 3.6+ */ + background-image: -ms-linear-gradient(@deg, @startColor, @endColor); /* IE10 */ + background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */ + background-image: -o-linear-gradient(@deg, @startColor, @endColor); /* Opera 11.10 */ + background-image: linear-gradient(@deg, @startColor, @endColor); /* the standard */ + } + .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { + background-color: @endColor; + background-repeat: no-repeat; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); + background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor); + background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor); + } +} + +// Opacity +.opacity(@opacity: 100) { + filter: e(%("alpha(opacity=%d)", @opacity)); + -khtml-opacity: @opacity / 100; + -moz-opacity: @opacity / 100; + opacity: @opacity / 100; +} \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index fc920ab3a4..eb787fe59a 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -35,10 +35,9 @@ html, body { } body { margin: 0; - .sans-serif(normal,14px,20px); + #font > .sans-serif(normal,14px,20px); color: @gray; text-rendering: optimizeLegibility; - .box-shadow(inset 0 1px 0 #fff); } // Container (centered, fixed-width layouts) @@ -68,11 +67,11 @@ div.container-fluid { // Links a { - color: @link-color; + color: @linkColor; text-decoration: none; line-height: inherit; &:hover { - color: @link-hover-color; + color: @linkColorHover; text-decoration: underline; } } @@ -81,7 +80,7 @@ a { .btn { .button(); &.primary { - #gradient > .vertical(@blue, @blue-dark); + #gradient > .vertical(@blue, darken(@blue, 15)); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25); &:hover { diff --git a/lib/tables.less b/lib/tables.less index 4f9098ce5f..d0b68db9cb 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -13,7 +13,6 @@ table { text-align: left; border-collapse: separate; th, td { - // #translucent > .background(@green, .15); padding: 10px 10px 9px; line-height: @baseline; vertical-align: middle; @@ -51,8 +50,8 @@ table.zebra-striped { background-position: right -23px; background-repeat: no-repeat; background-color: rgba(141,192,219,.25); - .border-radius(3px 3px 0 0); text-shadow: 0 1px 1px rgba(255,255,255,.75); + .border-radius(3px 3px 0 0); } th.header:hover { // Style the ascending (reverse alphabetical) column header background-image: url(assets/img/tablesorter-indicators.png); diff --git a/lib/type.less b/lib/type.less index cc1f0826a1..9be433adeb 100644 --- a/lib/type.less +++ b/lib/type.less @@ -8,11 +8,11 @@ -------------------------------------------------- */ p { - .font(normal,14px,@baseline); + #font > .shorthand(normal,14px,@baseline); margin-bottom: @baseline; small { font-size: 12px; - color: @gray-light; + color: @grayLight; } } @@ -22,9 +22,9 @@ p { h1, h2, h3, h4, h5, h6 { font-weight: 500; - color: @gray-dark; + color: @grayDark; small { - color: @gray-light; + color: @grayLight; } } h1 { @@ -62,7 +62,7 @@ h5 { } h6 { font-size: 13px; - color: @gray-light; + color: @grayLight; text-transform: uppercase; } @@ -167,7 +167,7 @@ em { line-height: inherit; } .muted { - color: @gray-lighter; + color: @grayLighter; } // Blockquotes @@ -176,13 +176,13 @@ blockquote { border-left: 5px solid #eee; padding-left: 15px; p { - .font(300,14px,@baseline); + #font > .shorthand(300,14px,@baseline); margin-bottom: 0; } cite { display: block; - .font(300,12px,@baseline); - color: @gray-light; + #font > .shorthand(300,12px,@baseline); + color: @grayLight; &:before { content: '\2014 \00A0'; } @@ -236,7 +236,7 @@ pre ol { border-left-color: lighten(@orange, 35%); font-size: 11px; line-height: @baseline; - color: @gray-light; + color: @grayLight; text-shadow: 0 1px 1px rgba(255,255,255,.5); word-wrap: break-word; &:hover {