From 70bac36a2233d7f12a9901994238943d4ea50977 Mon Sep 17 00:00:00 2001 From: David Haywood Smith Date: Wed, 24 Aug 2011 00:05:07 +0100 Subject: [PATCH 01/19] Fixed empty for fields on select labels Also added id fields to selects where needed --- docs/index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/index.html b/docs/index.html index 1669e6123a..58be9e8b5f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -615,15 +615,15 @@
Example form legend
- +
- +
- @@ -633,9 +633,9 @@
- +
- @@ -797,15 +797,15 @@
Example form legend
- +
- +
- From 2d99e3f8a61ef9d4a40cd0cad109d0d89ae3c661 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 00:13:40 -0700 Subject: [PATCH 02/19] base import of normalize into the reset css, tweaks to selector specificity across the board --- bootstrap-1.1.0.css | 238 +++++++++++++++++++++--------- bootstrap-1.1.0.min.css | 97 +++++++----- lib/forms.less | 316 ++++++++++++++++++++-------------------- lib/patterns.less | 1 + lib/reset.less | 132 ++++++++++++++++- lib/scaffolding.less | 8 +- lib/type.less | 5 +- 7 files changed, 520 insertions(+), 277 deletions(-) diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css index 615e043d4a..d20ff26954 100644 --- a/bootstrap-1.1.0.css +++ b/bootstrap-1.1.0.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 Aug 22 12:48:23 PDT 2011 + * Date: Wed Aug 24 23:48:05 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). @@ -85,13 +85,92 @@ blockquote:before, blockquote:after { content: ""; } -header, -section, -footer, +html { + overflow-y: scroll; + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +a:focus { + outline: thin dotted; +} article, -aside { +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { display: block; } +audio, canvas, video { + display: inline-block; + *display: inline; + *zoom: 1; +} +audio:not([controls]) { + display: none; +} +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +img { + border: 0; + -ms-interpolation-mode: bicubic; +} +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} +button, input { + line-height: normal; + *overflow: visible; +} +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} +input[type="search"] { + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +textarea { + overflow: auto; + vertical-align: top; +} +table { + border-collapse: collapse; + border-spacing: 0; +} /* Preboot.less * Variables and mixins to pre-ignite any new web development project * ------------------------------------------------------------------ */ @@ -113,6 +192,7 @@ aside { width: 940px; margin: 0 auto; zoom: 1; + margin-bottom: 18px; } .container:before, .container:after { display: table; @@ -147,6 +227,7 @@ aside { * ------------------------------------------------------------------------------------------- */ .row { zoom: 1; + margin-bottom: 18px; } .row:before, .row:after { display: table; @@ -374,6 +455,7 @@ div.container { div.container-fluid { padding: 0 20px; zoom: 1; + margin-bottom: 18px; } div.container-fluid:before, div.container-fluid:after { display: table; @@ -481,6 +563,9 @@ a:hover { -moz-opacity: 0.65; opacity: 0.65; cursor: default; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .btn:disabled { background-image: none; @@ -489,12 +574,17 @@ a:hover { -moz-opacity: 0.65; opacity: 0.65; cursor: default; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.btn:disabled.primary { color: #fff; } .btn:active { - -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 0; @@ -622,7 +712,7 @@ em { line-height: inherit; } .muted { - color: #e6e6e6; + color: #bfbfbf; } blockquote { margin-bottom: 18px; @@ -675,7 +765,9 @@ pre { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + white-space: pre; white-space: pre-wrap; + word-wrap: break-word; } /* Forms.less * Base styles for various input types, form layouts, and states @@ -683,11 +775,11 @@ pre { form { margin-bottom: 18px; } -form fieldset { +fieldset { margin-bottom: 18px; padding-top: 18px; } -form fieldset legend { +fieldset legend { display: block; margin-left: 150px; font-size: 20px; @@ -700,19 +792,19 @@ form fieldset legend { color: #404040; } -form .clearfix { +.clearfix { margin-bottom: 18px; } -form label, -form input, -form select, -form textarea { +label, +input, +select, +textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: normal; } -form label { +label { padding-top: 6px; font-size: 13px; line-height: 18px; @@ -721,20 +813,19 @@ form label { text-align: right; color: #404040; } -form div.input { +div.input { margin-left: 150px; } -form input[type=checkbox], form input[type=radio] { +input[type=checkbox], input[type=radio] { cursor: pointer; } -form input[type=text], -form input[type=password], -form textarea, -form select, -form .uneditable-input { +input[type=text], +input[type=password], +textarea, +select, +.uneditable-input { display: inline-block; width: 210px; - margin: 0; padding: 4px; font-size: 13px; line-height: 18px; @@ -745,14 +836,14 @@ form .uneditable-input { -moz-border-radius: 3px; border-radius: 3px; } -form select, form input[type=file] { +select, input[type=file] { height: 27px; line-height: 27px; } -form textarea { +textarea { height: auto; } -form .uneditable-input { +.uneditable-input { background-color: #eee; display: block; border-color: #ccc; @@ -760,16 +851,16 @@ form .uneditable-input { -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 :-moz-placeholder { +:-moz-placeholder { color: #bfbfbf; } -form ::-webkit-input-placeholder { +::-webkit-input-placeholder { color: #bfbfbf; } -form input[type=text], -form input[type=password], -form select, -form textarea { +input[type=text], +input[type=password], +select, +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; @@ -777,7 +868,7 @@ form textarea { -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } -form input[type=text]:focus, form input[type=password]:focus, form textarea:focus { +input[type=text]:focus, input[type=password]:focus, textarea:focus { outline: none; border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); @@ -812,46 +903,46 @@ form div.error .input-prepend span.add-on, form div.error .input-append span.add border-color: #c87872; color: #b9554d; } -form .input-mini, -form input.mini, -form textarea.mini, -form select.mini { +.input-mini, +input.mini, +textarea.mini, +select.mini { width: 60px; } -form .input-small, -form input.small, -form textarea.small, -form select.small { +.input-small, +input.small, +textarea.small, +select.small { width: 90px; } -form .input-medium, -form input.medium, -form textarea.medium, -form select.medium { +.input-medium, +input.medium, +textarea.medium, +select.medium { width: 150px; } -form .input-large, -form input.large, -form textarea.large, -form select.large { +.input-large, +input.large, +textarea.large, +select.large { width: 210px; } -form .input-xlarge, -form input.xlarge, -form textarea.xlarge, -form select.xlarge { +.input-xlarge, +input.xlarge, +textarea.xlarge, +select.xlarge { width: 270px; } -form .input-xxlarge, -form input.xxlarge, -form textarea.xxlarge, -form select.xxlarge { +.input-xxlarge, +input.xxlarge, +textarea.xxlarge, +select.xxlarge { width: 530px; } -form textarea.xxlarge { +textarea.xxlarge { overflow-y: scroll; } -form input[readonly]:focus, form textarea[readonly]:focus, form input.disabled { +input[readonly]:focus, textarea[readonly]:focus, input.disabled { background: #f5f5f5; border-color: #ddd; -webkit-box-shadow: none; @@ -992,16 +1083,16 @@ form input[readonly]:focus, form textarea[readonly]:focus, form input.disabled { .inputs-list input[type=radio], .inputs-list input[type=checkbox] { margin-bottom: 0; } -form.form-stacked { +.form-stacked { padding-left: 20px; } -form.form-stacked fieldset { +.form-stacked fieldset { padding-top: 9px; } -form.form-stacked legend { +.form-stacked legend { margin-left: 0; } -form.form-stacked label { +.form-stacked label { display: block; float: none; width: auto; @@ -1010,30 +1101,30 @@ form.form-stacked label { line-height: 20px; padding-top: 0; } -form.form-stacked .clearfix { +.form-stacked .clearfix { margin-bottom: 9px; } -form.form-stacked .clearfix div.input { +.form-stacked .clearfix div.input { margin-left: 0; } -form.form-stacked .inputs-list { +.form-stacked .inputs-list { margin-bottom: 0; } -form.form-stacked .inputs-list li { +.form-stacked .inputs-list li { padding-top: 0; } -form.form-stacked .inputs-list li label { +.form-stacked .inputs-list li label { font-weight: normal; padding-top: 0; } -form.form-stacked div.error { +.form-stacked div.error { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; margin-top: 0; margin-left: -10px; } -form.form-stacked .actions { +.form-stacked .actions { margin-left: -20px; padding-left: 20px; } @@ -1575,6 +1666,7 @@ footer { margin: 0 0 20px; padding: 0; zoom: 1; + margin-bottom: 18px; } .tabs:before, .pills:before, @@ -1750,6 +1842,8 @@ footer { -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; zoom: 1; + margin-bottom: 18px; + margin-bottom: 0; } .modal .modal-footer:before, .modal .modal-footer:after { display: table; diff --git a/bootstrap-1.1.0.min.css b/bootstrap-1.1.0.min.css index 76178b180c..ae0cd3430f 100644 --- a/bootstrap-1.1.0.min.css +++ b/bootstrap-1.1.0.min.css @@ -3,13 +3,29 @@ h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,i table{border-collapse:collapse;border-spacing:0;} ol,ul{list-style:none;} q:before,q:after,blockquote:before,blockquote:after{content:"";} -header,section,footer,article,aside{display:block;} +html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} +a:focus{outline:thin dotted;} +article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;} +audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} +audio:not([controls]){display:none;} +sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} +sup{top:-0.5em;} +sub{bottom:-0.25em;} +img{border:0;-ms-interpolation-mode:bicubic;} +button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} +button,input{line-height:normal;*overflow:visible;} +button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} +button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;} +input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} +input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} +textarea{overflow:auto;vertical-align:top;} +table{border-collapse:collapse;border-spacing:0;} .clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";} .clearfix:after{clear:both;} .center-block{display:block;margin:0 auto;} -.container{width:940px;margin:0 auto;zoom:1;}.container:before,.container:after{display:table;content:"";} +.container{width:940px;margin:0 auto;zoom:1;margin-bottom:18px;}.container:before,.container:after{display:table;content:"";} .container:after{clear:both;} -.row{zoom:1;}.row:before,.row:after{display:table;content:"";} +.row{zoom:1;margin-bottom:18px;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} .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;} @@ -42,7 +58,7 @@ header,section,footer,article,aside{display:block;} 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;} -div.container-fluid{padding:0 20px;zoom:1;}div.container-fluid:before,div.container-fluid:after{display:table;content:"";} +div.container-fluid{padding:0 20px;zoom:1;margin-bottom:18px;}div.container-fluid:before,div.container-fluid:after{display:table;content:"";} div.container-fluid:after{clear:both;} div.container-fluid div.sidebar{float:left;width:220px;} div.container-fluid div.content{min-width:700px;max-width:1180px;margin-left:240px;} @@ -52,9 +68,9 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .btn{-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}.btn.primary{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}.btn.primary:hover{color:#fff;} .btn.large{font-size:16px;line-height:28px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .btn.small{padding-right:9px;padding-left:9px;font-size:11px;} -.btn.disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;} -.btn:disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;color:#fff;} -.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);} +.btn.disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +.btn:disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.btn:disabled.primary{color:#fff;} +.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} @@ -77,38 +93,39 @@ dl dd{margin-left:9px;} 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;} +.muted{color:#bfbfbf;} blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;} blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} address{display:block;line-height:18px;margin-bottom:18px;} 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:1px 3px;} -pre{background-color:#f5f5f5;display:block;padding:17px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre-wrap;} -form{margin-bottom:18px;}form fieldset{margin-bottom:18px;padding-top:18px;}form fieldset legend{display:block;margin-left:150px;font-size:20px;line-height:1;*margin:0 0 5px 145px;*line-height:1.5;color:#404040;} -form .clearfix{margin-bottom:18px;} -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;color:#404040;} -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:inline-block;width:210px;margin:0;padding:4px;font-size:13px;line-height:18px;height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} -form select,form input[type=file]{height:27px;line-height:27px;} -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 :-moz-placeholder{color:#bfbfbf;} -form ::-webkit-input-placeholder{color:#bfbfbf;} -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;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);} -form input[type=text]:focus,form input[type=password]:focus,form textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);} +pre{background-color:#f5f5f5;display:block;padding:17px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} +form{margin-bottom:18px;} +fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;margin-left:150px;font-size:20px;line-height:1;*margin:0 0 5px 145px;*line-height:1.5;color:#404040;} +.clearfix{margin-bottom:18px;} +label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;} +label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;} +div.input{margin-left:150px;} +input[type=checkbox],input[type=radio]{cursor:pointer;} +input[type=text],input[type=password],textarea,select,.uneditable-input{display:inline-block;width:210px;padding:4px;font-size:13px;line-height:18px;height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +select,input[type=file]{height:27px;line-height:27px;} +textarea{height:auto;} +.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);} +:-moz-placeholder{color:#bfbfbf;} +::-webkit-input-placeholder{color:#bfbfbf;} +input[type=text],input[type=password],select,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;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);} +input[type=text]:focus,input[type=password]:focus,textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);} 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,form div.error span.help-inline,form div.error span.help-block{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 .input-prepend span.add-on,form div.error .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;} +.input-mini,input.mini,textarea.mini,select.mini{width:60px;} +.input-small,input.small,textarea.small,select.small{width:90px;} +.input-medium,input.medium,textarea.medium,select.medium{width:150px;} +.input-large,input.large,textarea.large,select.large{width:210px;} +.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;} +.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;} +textarea.xxlarge{overflow-y:scroll;} +input[readonly]:focus,textarea[readonly]:focus,input.disabled{background:#f5f5f5;border-color:#ddd;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .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:12px;line-height:18px;color:#bfbfbf;} .help-inline{padding-left:5px;*position:relative;*top:-5px;} @@ -128,13 +145,13 @@ form input[readonly]:focus,form textarea[readonly]:focus,form input.disabled{bac .inputs-list li ul.inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;} .inputs-list li:first-child{padding-top:5px;} .inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;} -form.form-stacked{padding-left:20px;}form.form-stacked fieldset{padding-top:9px;} -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 .clearfix{margin-bottom:9px;}form.form-stacked .clearfix div.input{margin-left:0;} -form.form-stacked .inputs-list{margin-bottom:0;}form.form-stacked .inputs-list li{padding-top:0;}form.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;} -form.form-stacked div.error{padding-top:10px;padding-bottom:10px;padding-left:10px;margin-top:0;margin-left:-10px;} -form.form-stacked .actions{margin-left:-20px;padding-left:20px;} +.form-stacked{padding-left:20px;}.form-stacked fieldset{padding-top:9px;} +.form-stacked legend{margin-left:0;} +.form-stacked label{display:block;float:none;width:auto;font-weight:bold;text-align:left;line-height:20px;padding-top:0;} +.form-stacked .clearfix{margin-bottom:9px;}.form-stacked .clearfix div.input{margin-left:0;} +.form-stacked .inputs-list{margin-bottom:0;}.form-stacked .inputs-list li{padding-top:0;}.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;} +.form-stacked div.error{padding-top:10px;padding-bottom:10px;padding-left:10px;margin-top:0;margin-left:-10px;} +.form-stacked .actions{margin-left:-20px;padding-left:20px;} table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;font-size:13px;}table th,table td{padding:10px 10px 9px;line-height:13.5px;text-align:left;vertical-align:middle;border-bottom:1px solid #ddd;} table th{padding-top:9px;font-weight:bold;border-bottom-width:2px;} .zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;} @@ -193,7 +210,7 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .block-message.warning{background:#fff0c0;border:1px solid #ffe38d;} .block-message.success{background:#dff1df;border:1px solid #bbe2bb;} .block-message.info{background:#c7eefe;border:1px solid #ade6fe;} -.tabs,.pills{margin:0 0 20px;padding:0;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";} +.tabs,.pills{margin:0 0 20px;padding:0;zoom:1;margin-bottom:18px;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";} .tabs:after,.pills:after{clear:both;} .tabs li,.pills li{display:inline;}.tabs li a,.pills li a{float:left;width:auto;} .tabs{width:100%;border-bottom:1px solid #bfbfbf;}.tabs li a{margin-bottom:-1px;margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}.tabs li a:hover{background-color:#e6e6e6;border-bottom:1px solid #bfbfbf;} @@ -208,7 +225,7 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .modal-backdrop{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;} .modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .modal-header{border-bottom:1px solid #eee;padding:5px 20px;}.modal .modal-header a.close{position:absolute;right:10px;top:10px;color:#999;line-height:10px;font-size:18px;} .modal .modal-body{padding:20px;} -.modal .modal-footer{background-color:#f5f5f5;padding:14px 20px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal .modal-footer:before,.modal .modal-footer:after{display:table;content:"";} +.modal .modal-footer{background-color:#f5f5f5;padding:14px 20px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:18px;margin-bottom:0;}.modal .modal-footer:before,.modal .modal-footer:after{display:table;content:"";} .modal .modal-footer:after{clear:both;} .modal .modal-footer .btn{float:right;margin-left:10px;} .twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} diff --git a/lib/forms.less b/lib/forms.less index 4265f8e590..cfcdb3f17c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -8,174 +8,176 @@ form { margin-bottom: @baseline; +} - // Groups of fields with labels on top (legends) - fieldset { - margin-bottom: @baseline; - padding-top: @baseline; - legend { - display: block; - margin-left: 150px; - font-size: 20px; - line-height: 1; - *margin: 0 0 5px 145px; /* IE6-7 */ - *line-height: 1.5; /* IE6-7 */ - color: @grayDark; - } - } - - // Parent element that clears floats and wraps labels and fields together - .clearfix { - margin-bottom: @baseline; - } - - // Set font for forms - label, input, select, textarea { - #font > .sans-serif(normal,13px,normal); - } - - // Float labels left - label { - padding-top: 6px; - font-size: 13px; - line-height: 18px; - float: left; - width: 130px; - text-align: right; +// Groups of fields with labels on top (legends) +fieldset { + margin-bottom: @baseline; + padding-top: @baseline; + legend { + display: block; + margin-left: 150px; + font-size: 20px; + line-height: 1; + *margin: 0 0 5px 145px; /* IE6-7 */ + *line-height: 1.5; /* IE6-7 */ color: @grayDark; } +} - // Shift over the inside div to align all label's relevant content - div.input { - margin-left: 150px; +// Parent element that clears floats and wraps labels and fields together +.clearfix { + margin-bottom: @baseline; +} + +// Set font for forms +label, +input, +select, +textarea { + #font > .sans-serif(normal,13px,normal); +} + +// Float labels left +label { + padding-top: 6px; + font-size: 13px; + line-height: 18px; + float: left; + width: 130px; + text-align: right; + color: @grayDark; +} + +// Shift over the inside div to align all label's relevant content +div.input { + margin-left: 150px; +} + +// Checkboxs and radio buttons +input[type=checkbox], +input[type=radio] { + cursor: pointer; +} + +// Inputs, Textareas, Selects +input[type=text], +input[type=password], +textarea, +select, +.uneditable-input { + display: inline-block; + width: 210px; + padding: 4px; + font-size: 13px; + line-height: @baseline; + height: @baseline; + color: @gray; + border: 1px solid #ccc; + .border-radius(3px); +} +select, +input[type=file] { + height: @baseline * 1.5; + line-height: @baseline * 1.5; +} +textarea { + height: auto; +} +.uneditable-input { + background-color: #eee; + display: block; + border-color: #ccc; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.075)); +} + +// Placeholder text gets special styles; can't be bundled together though for some reason +:-moz-placeholder { + color: @grayLight; +} +::-webkit-input-placeholder { + color: @grayLight; +} + +// Focus states +input[type=text], +input[type=password], +select, textarea { + @transition: border linear .2s, box-shadow linear .2s; + .transition(@transition); + .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); +} +input[type=text]:focus, +input[type=password]:focus, +textarea:focus { + outline: none; + border-color: rgba(82,168,236,.8); + @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + .box-shadow(@shadow); +} + +// Error styles +form div.error { + background: lighten(@red, 57%); + padding: 10px 0; + margin: -10px 0 10px; + .border-radius(4px); + @error-text: desaturate(lighten(@red, 25%), 25%); + > label, + span.help-inline, + span.help-block { + color: @red; } - - // Checkboxs and radio buttons - input[type=checkbox], - input[type=radio] { - cursor: pointer; - } - - // Inputs, Textareas, Selects input[type=text], input[type=password], - textarea, - select, - .uneditable-input { - display: inline-block; - width: 210px; - margin: 0; - padding: 4px; - font-size: 13px; - line-height: @baseline; - height: @baseline; - color: @gray; - border: 1px solid #ccc; - .border-radius(3px); - } - select, - input[type=file] { - height: @baseline * 1.5; - line-height: @baseline * 1.5; - } textarea { - height: auto; - } - .uneditable-input { - background-color: #eee; - display: block; - border-color: #ccc; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.075)); - } - - // Placeholder text gets special styles; can't be bundled together though for some reason - :-moz-placeholder { - color: @grayLight; - } - ::-webkit-input-placeholder { - color: @grayLight; - } - - // Focus states - input[type=text], - input[type=password], - select, textarea { - @transition: border linear .2s, box-shadow linear .2s; - .transition(@transition); - .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); - } - input[type=text]:focus, - input[type=password]:focus, - textarea:focus { - outline: none; - border-color: rgba(82,168,236,.8); - @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); - .box-shadow(@shadow); - } - - // Error styles - div.error { - background: lighten(@red, 57%); - padding: 10px 0; - margin: -10px 0 10px; - .border-radius(4px); - @error-text: desaturate(lighten(@red, 25%), 25%); - > label, - span.help-inline, - span.help-block { - color: @red; + border-color: @error-text; + .box-shadow(0 0 3px rgba(171,41,32,.25)); + &:focus { + border-color: darken(@error-text, 10%); + .box-shadow(0 0 6px rgba(171,41,32,.5)); } - input[type=text], - input[type=password], - textarea { + } + .input-prepend, + .input-append { + span.add-on { + background: lighten(@red, 50%); border-color: @error-text; - .box-shadow(0 0 3px rgba(171,41,32,.25)); - &:focus { - border-color: darken(@error-text, 10%); - .box-shadow(0 0 6px rgba(171,41,32,.5)); - } - } - .input-prepend, - .input-append { - span.add-on { - background: lighten(@red, 50%); - border-color: @error-text; - color: darken(@error-text, 10%); - } + color: darken(@error-text, 10%); } } +} - // Form element sizes - .input-mini, input.mini, textarea.mini, select.mini { - width: 60px; - } - .input-small, input.small, textarea.small, select.small { - width: 90px; - } - .input-medium, input.medium, textarea.medium, select.medium { - width: 150px; - } - .input-large, input.large, textarea.large, select.large { - width: 210px; - } - .input-xlarge, input.xlarge, textarea.xlarge, select.xlarge { - width: 270px; - } - .input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge { - width: 530px; - } - textarea.xxlarge { - overflow-y: scroll; - } +// Form element sizes +.input-mini, input.mini, textarea.mini, select.mini { + width: 60px; +} +.input-small, input.small, textarea.small, select.small { + width: 90px; +} +.input-medium, input.medium, textarea.medium, select.medium { + width: 150px; +} +.input-large, input.large, textarea.large, select.large { + width: 210px; +} +.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge { + width: 270px; +} +.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge { + width: 530px; +} +textarea.xxlarge { + overflow-y: scroll; +} - // Turn off focus for disabled (read-only) form elements - input[readonly]:focus, - textarea[readonly]:focus, - input.disabled { - background: #f5f5f5; - border-color: #ddd; - .box-shadow(none); - } +// Turn off focus for disabled (read-only) form elements +input[readonly]:focus, +textarea[readonly]:focus, +input.disabled { + background: #f5f5f5; + border-color: #ddd; + .box-shadow(none); } // Actions (the buttons) @@ -261,13 +263,11 @@ form { border-color: @green; } } - .input-prepend { .add-on { *margin-top: 1px; /* IE6-7 */ } } - .input-append { input[type=text] { float: left; @@ -320,7 +320,7 @@ form { } // Stacked forms -form.form-stacked { +.form-stacked { padding-left: 20px; fieldset { padding-top: @baseline / 2; @@ -364,4 +364,4 @@ form.form-stacked { margin-left: -20px; padding-left: 20px; } -} +} \ No newline at end of file diff --git a/lib/patterns.less b/lib/patterns.less index fd728e6e7b..0fbdc9d865 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -558,6 +558,7 @@ footer { .border-radius(0 0 6px 6px); .box-shadow(inset 0 1px 0 #fff); .clearfix(); + margin-bottom: 0; .btn { float: right; margin-left: 10px; diff --git a/lib/reset.less b/lib/reset.less index db1682202b..28802f559a 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -4,7 +4,7 @@ // ERIC MEYER RESET -// ---------------- +// -------------------------------------------------- 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; } @@ -13,9 +13,133 @@ ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } -// HTML5 -// ----- +// Normalize.css +// Pulling in select resets form the normalize.css project +// -------------------------------------------------- -header, section, footer, article, aside { +// Display in IE6-9 and FF3 +// ------------------------- +// Source: http://github.com/necolas/normalize.css +html { + overflow-y: scroll; + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +// Focus states +a:focus { + outline: thin dotted; +} + +// Display in IE6-9 and FF3 +// ------------------------- +// Source: http://github.com/necolas/normalize.css +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { display: block; +} + +// Display block in IE6-9 and FF3 +// ------------------------- +// Source: http://github.com/necolas/normalize.css +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +// Prevents modern browsers from displaying 'audio' without controls +// ------------------------- +// Source: http://github.com/necolas/normalize.css +audio:not([controls]) { + display: none; +} + +// Prevents sub and sup affecting line-height in all browsers +// ------------------------- +// Source: http://github.com/necolas/normalize.css +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + +// Img border in a's and image quality +// ------------------------- +// Source: http://github.com/necolas/normalize.css +img { + border: 0; + -ms-interpolation-mode: bicubic; +} + +// Forms +// ------------------------- +// Source: http://github.com/necolas/normalize.css + +// Font size in all browsers, margin changes, misc consistency +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} +button, +input { + line-height: normal; // FF3/4 have !important on line-height in UA stylesheet + *overflow: visible; // Inner spacing ie IE6/7 +} +button::-moz-focus-inner, +input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 + border: 0; + padding: 0; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; // Cursors on all buttons applied consistently + -webkit-appearance: button; // Style clicable inputs in iOS +} +input[type="search"] { // Appearance in Safari/Chrome + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 +} +textarea { + overflow: auto; // Remove vertical scrollbar in IE6-9 + vertical-align: top; // Readability and alignment cross-browser +} +// Tables +// ------------------------- +// Source: http://github.com/necolas/normalize.css + +// Remove spacing between table cells +table { + border-collapse: collapse; + border-spacing: 0; } \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 50f6c96cfb..1372306720 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -152,6 +152,7 @@ a { background-image: none; .opacity(65); cursor: default; + .box-shadow(none); } // this can't be included with the .disabled def because IE8 and below will drop it ;_; @@ -159,10 +160,13 @@ a { background-image: none; .opacity(65); cursor: default; - color: #fff; + .box-shadow(none); + &.primary { + color: #fff; + } } &:active { - @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); + @shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } } diff --git a/lib/type.less b/lib/type.less index 1091d149b2..7ee69f2f5b 100644 --- a/lib/type.less +++ b/lib/type.less @@ -130,7 +130,7 @@ em { line-height: inherit; } .muted { - color: @grayLighter; + color: @grayLight; } // Blockquotes @@ -181,5 +181,8 @@ pre { border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); .border-radius(3px); + white-space: pre; white-space: pre-wrap; + word-wrap: break-word; + } \ No newline at end of file From 0e9d7c1c4d9552dda438d6eb5d2f175a99fd4501 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 25 Aug 2011 13:31:46 -0700 Subject: [PATCH 03/19] update alert and button styling aproach --- bootstrap-1.1.0.css | 344 +++++++++++++++++++++------------------- bootstrap-1.1.0.min.css | 41 +++-- docs/index.html | 14 +- lib/patterns.less | 195 +++++++++++++++-------- lib/preboot.less | 51 +++++- lib/scaffolding.less | 88 +--------- 6 files changed, 383 insertions(+), 350 deletions(-) diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css index 246094daf9..34b9d085f3 100644 --- a/bootstrap-1.1.0.css +++ b/bootstrap-1.1.0.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: Thu Aug 25 01:55:33 PDT 2011 + * Date: Thu Aug 25 13:30:35 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). @@ -121,6 +121,79 @@ aside { .container:after { clear: both; } +.btn.danger, +.alert.danger, +.btn.danger:hover, +.alert.danger:hover, +.btn.error, +.alert.error, +.btn.error:hover, +.alert.error:hover, +.btn.success, +.alert.success, +.btn.success:hover, +.alert.success:hover, +.btn.info, +.alert.info, +.btn.info:hover, +.alert.info:hover { + color: #ffffff; +} +.btn.danger, +.alert.danger, +.btn.danger:hover, +.alert.danger:hover, +.btn.error, +.alert.error, +.btn.error:hover, +.alert.error:hover { + background-color: #d6463e; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e)); + background-image: -moz-linear-gradient(#f56a66, #d6463e); + background-image: -ms-linear-gradient(#f56a66, #d6463e); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e)); + background-image: -webkit-linear-gradient(#f56a66, #d6463e); + background-image: -o-linear-gradient(#f56a66, #d6463e); + background-image: linear-gradient(#f56a66, #d6463e); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #d6463e #d6463e #a52a23; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} +.btn.success, +.alert.success, +.btn.success:hover, +.alert.success:hover { + background-color: #57a957; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); + background-image: -moz-linear-gradient(#62c462, #57a957); + background-image: -ms-linear-gradient(#62c462, #57a957); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); + background-image: -webkit-linear-gradient(#62c462, #57a957); + background-image: -o-linear-gradient(#62c462, #57a957); + background-image: linear-gradient(#62c462, #57a957); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #57a957 #57a957 #3d773d; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} +.btn.info, +.alert.info, +.btn.info:hover, +.alert.info:hover { + background-color: #36b3d9; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9)); + background-image: -moz-linear-gradient(#6bd0ee, #36b3d9); + background-image: -ms-linear-gradient(#6bd0ee, #36b3d9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9)); + background-image: -webkit-linear-gradient(#6bd0ee, #36b3d9); + background-image: -o-linear-gradient(#6bd0ee, #36b3d9); + background-image: linear-gradient(#6bd0ee, #36b3d9); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #36b3d9 #36b3d9 #1f85a4; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} /* * Scaffolding * Basic and global styles for generating a grid system, structural layout, and page templates @@ -286,110 +359,6 @@ a:hover { color: #0050a3; text-decoration: underline; } -.btn { - cursor: pointer; - display: inline-block; - background-color: #e6e6e6; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - background-image: -moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - color: #333; - font-size: 13px; - line-height: normal; - border: 1px solid #ccc; - border-bottom-color: #bbb; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -webkit-transition: 0.1s linear all; - -moz-transition: 0.1s linear all; - transition: 0.1s linear all; -} -.btn:hover { - background-position: 0 -15px; - color: #333; - text-decoration: none; -} -.btn.primary, -.btn.danger, -.btn.danger:hover, -.btn.primary:hover { - color: #fff; -} -.btn.primary { - background-color: #0064cd; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); - background-image: -moz-linear-gradient(#049cdb, #0064cd); - background-image: -ms-linear-gradient(#049cdb, #0064cd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); - background-image: -webkit-linear-gradient(#049cdb, #0064cd); - background-image: -o-linear-gradient(#049cdb, #0064cd); - background-image: linear-gradient(#049cdb, #0064cd); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #0064cd #0064cd #003f81; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} -.btn.danger { - background-color: #9d261d; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#d83a2e), to(#9d261d)); - background-image: -moz-linear-gradient(#d83a2e, #9d261d); - background-image: -ms-linear-gradient(#d83a2e, #9d261d); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d83a2e), color-stop(100%, #9d261d)); - background-image: -webkit-linear-gradient(#d83a2e, #9d261d); - background-image: -o-linear-gradient(#d83a2e, #9d261d); - background-image: linear-gradient(#d83a2e, #9d261d); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #9d261d #9d261d #5c1611; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} -.btn.disabled { - cursor: default; - background-image: none; - filter: alpha(opacity=65); - -khtml-opacity: 0.65; - -moz-opacity: 0.65; - opacity: 0.65; -} -.btn:disabled { - cursor: default; - background-image: none; - filter: alpha(opacity=65); - -khtml-opacity: 0.65; - -moz-opacity: 0.65; - opacity: 0.65; -} -.btn:active { - -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); -} -.btn.large { - font-size: 16px; - line-height: normal; - padding: 9px 14px 9px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; -} -.btn.small { - padding: 7px 9px 7px; - font-size: 11px; -} -button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { - padding: 0; - border: 0; -} /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */ @@ -1324,6 +1293,91 @@ footer { .page-header h1 { margin-bottom: 8px; } +.btn { + cursor: pointer; + display: inline-block; + background-color: #e6e6e6; + background-repeat: no-repeat; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6)); + background-image: -webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + background-image: -moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + padding: 5px 14px 6px; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + color: #333; + font-size: 13px; + line-height: normal; + border: 1px solid #ccc; + border-bottom-color: #bbb; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-transition: 0.1s linear all; + -moz-transition: 0.1s linear all; + transition: 0.1s linear all; +} +.btn:hover { + background-position: 0 -15px; + color: #333; + text-decoration: none; +} +.btn.disabled { + cursor: default; + background-image: none; + filter: alpha(opacity=65); + -khtml-opacity: 0.65; + -moz-opacity: 0.65; + opacity: 0.65; +} +.btn:disabled { + cursor: default; + background-image: none; + filter: alpha(opacity=65); + -khtml-opacity: 0.65; + -moz-opacity: 0.65; + opacity: 0.65; +} +.btn:active { + -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); +} +.btn.primary, .btn.primary:hover { + color: #fff; + background-color: #0064cd; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); + background-image: -moz-linear-gradient(#049cdb, #0064cd); + background-image: -ms-linear-gradient(#049cdb, #0064cd); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); + background-image: -webkit-linear-gradient(#049cdb, #0064cd); + background-image: -o-linear-gradient(#049cdb, #0064cd); + background-image: linear-gradient(#049cdb, #0064cd); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #0064cd #0064cd #003f81; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} +.btn.large { + font-size: 16px; + line-height: normal; + padding: 9px 14px 9px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} +.btn.small { + padding: 7px 9px 7px; + font-size: 11px; +} +button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { + padding: 0; + border: 0; +} .alert { background-color: #eedc94; background-repeat: repeat-x; @@ -1335,8 +1389,8 @@ footer { background-image: -o-linear-gradient(#fceec1, #eedc94); background-image: linear-gradient(#fceec1, #eedc94); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #e7ce68 #e7ce68 #e4c652; - border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125); + border-color: #eedc94 #eedc94 #e4c652; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); margin-bottom: 18px; padding: 7px 14px; color: #404040; @@ -1366,58 +1420,7 @@ footer { -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } -.alert-error, -.alert-success, -.alert-info, -.alert-error h5, -.alert-success h5, -.alert-info h5 { - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); -} -.alert-error { - background-color: #d6463e; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e)); - background-image: -moz-linear-gradient(#f56a66, #d6463e); - background-image: -ms-linear-gradient(#f56a66, #d6463e); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e)); - background-image: -webkit-linear-gradient(#f56a66, #d6463e); - background-image: -o-linear-gradient(#f56a66, #d6463e); - background-image: linear-gradient(#f56a66, #d6463e); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #ba2f27 #ba2f27 #a52a23; - border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125); -} -.alert-success { - background-color: #57a957; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(#62c462, #57a957); - background-image: -ms-linear-gradient(#62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(#62c462, #57a957); - background-image: -o-linear-gradient(#62c462, #57a957); - background-image: linear-gradient(#62c462, #57a957); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #458845 #458845 #3d773d; - border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125); -} -.alert-info { - background-color: #36b3d9; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9)); - background-image: -moz-linear-gradient(#6bd0ee, #36b3d9); - background-image: -ms-linear-gradient(#6bd0ee, #36b3d9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9)); - background-image: -webkit-linear-gradient(#6bd0ee, #36b3d9); - background-image: -o-linear-gradient(#6bd0ee, #36b3d9); - background-image: linear-gradient(#6bd0ee, #36b3d9); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #2396b9 #2396b9 #1f85a4; - border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125); -} -.close { +.alert .close { float: right; margin-top: -2px; color: #000000; @@ -1429,7 +1432,7 @@ footer { -moz-opacity: 0.2; opacity: 0.2; } -.close:hover { +.alert .close:hover { color: #000000; text-decoration: none; filter: alpha(opacity=40); @@ -1437,7 +1440,7 @@ footer { -moz-opacity: 0.4; opacity: 0.4; } -.alert-block { +.alert.alert-block, .alert.alert-block:hover { background-image: none; background-color: #fdf5d9; padding: 14px; @@ -1446,21 +1449,30 @@ footer { -moz-box-shadow: none; box-shadow: none; } -.alert-block p { +.alert.alert-block p, .alert.alert-block:hover p { margin-right: 30px; } -.alert-block .alert-actions { +.alert.alert-block .alert-actions, .alert.alert-block:hover .alert-actions { margin-top: 5px; } -.alert-block.error { +.alert.alert-block.error, +.alert.alert-block:hover.error, +.alert.alert-block.success, +.alert.alert-block:hover.success, +.alert.alert-block.info, +.alert.alert-block:hover.info { + color: #404040; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +} +.alert.alert-block.error, .alert.alert-block:hover.error { background-color: #fddfde; border-color: #fbc7c6; } -.alert-block.success { +.alert.alert-block.success, .alert.alert-block:hover.success { background-color: #d1eed1; border-color: #bfe7bf; } -.alert-block.info { +.alert.alert-block.info, .alert.alert-block:hover.info { background-color: #ddf4fb; border-color: #c6edf9; } diff --git a/bootstrap-1.1.0.min.css b/bootstrap-1.1.0.min.css index 5e273bf8e8..a3aca6ef4a 100644 --- a/bootstrap-1.1.0.min.css +++ b/bootstrap-1.1.0.min.css @@ -9,6 +9,10 @@ header,section,footer,article,aside{display:block;} .center-block{display:block;margin:0 auto;} .container{width:940px;margin:0 auto;zoom:1;}.container:before,.container:after{display:table;content:"";} .container:after{clear:both;} +.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover,.btn.success,.alert.success,.btn.success:hover,.alert.success:hover,.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{color:#ffffff;} +.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.success,.alert.success,.btn.success:hover,.alert.success:hover{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} .row .span1,.row .span2,.row .span3,.row .span4,.row .span5,.row .span6,.row .span7,.row .span8,.row .span9,.row .span10,.row .span11,.row .span12,.row .span13,.row .span14,.row .span15,.row .span16{display:inline;float:left;margin-left:20px;} @@ -48,16 +52,6 @@ div.container-fluid:after{clear:both;} 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:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;} -.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} -.btn.primary,.btn.danger,.btn.danger:hover,.btn.primary:hover{color:#fff;} -.btn.primary{background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(#049cdb, #0064cd);background-image:-ms-linear-gradient(#049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(#049cdb, #0064cd);background-image:-o-linear-gradient(#049cdb, #0064cd);background-image:linear-gradient(#049cdb, #0064cd);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.danger{background-color:#9d261d;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#d83a2e), to(#9d261d));background-image:-moz-linear-gradient(#d83a2e, #9d261d);background-image:-ms-linear-gradient(#d83a2e, #9d261d);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #d83a2e), color-stop(100%, #9d261d));background-image:-webkit-linear-gradient(#d83a2e, #9d261d);background-image:-o-linear-gradient(#d83a2e, #9d261d);background-image:linear-gradient(#d83a2e, #9d261d);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#9d261d #9d261d #5c1611;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;} -.btn:disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;} -.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);} -.btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} -.btn.small{padding:7px 9px 7px;font-size:11px;} -button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} @@ -182,20 +176,25 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .hero-unit p{font-size:18px;font-weight:200;line-height:27px;} footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-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);}.page-header h1{margin-bottom:8px;} -.alert{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#e7ce68 #e7ce68 #e4c652;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert h5{line-height:18px;} +.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} +.btn.disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;} +.btn:disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;} +.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);} +.btn.primary,.btn.primary:hover{color:#fff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(#049cdb, #0064cd);background-image:-ms-linear-gradient(#049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(#049cdb, #0064cd);background-image:-o-linear-gradient(#049cdb, #0064cd);background-image:linear-gradient(#049cdb, #0064cd);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} +.btn.small{padding:7px 9px 7px;font-size:11px;} +button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} +.alert{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert h5{line-height:18px;} .alert p{margin-bottom:0;} .alert div{margin-top:5px;margin-bottom:2px;line-height:28px;} .alert .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} -.alert-error,.alert-success,.alert-info,.alert-error h5,.alert-success h5,.alert-info h5{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);} -.alert-error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#ba2f27 #ba2f27 #a52a23;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);} -.alert-success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#458845 #458845 #3d773d;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);} -.alert-info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#2396b9 #2396b9 #1f85a4;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);} -.close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} -.alert-block{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-block p{margin-right:30px;} -.alert-block .alert-actions{margin-top:5px;} -.alert-block.error{background-color:#fddfde;border-color:#fbc7c6;} -.alert-block.success{background-color:#d1eed1;border-color:#bfe7bf;} -.alert-block.info{background-color:#ddf4fb;border-color:#c6edf9;} +.alert .close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.alert .close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} +.alert.alert-block,.alert.alert-block:hover{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert.alert-block p,.alert.alert-block:hover p{margin-right:30px;} +.alert.alert-block .alert-actions,.alert.alert-block:hover .alert-actions{margin-top:5px;} +.alert.alert-block.error,.alert.alert-block:hover.error,.alert.alert-block.success,.alert.alert-block:hover.success,.alert.alert-block.info,.alert.alert-block:hover.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.alert.alert-block.error,.alert.alert-block:hover.error{background-color:#fddfde;border-color:#fbc7c6;} +.alert.alert-block.success,.alert.alert-block:hover.success{background-color:#d1eed1;border-color:#bfe7bf;} +.alert.alert-block.info,.alert.alert-block:hover.info{background-color:#ddf4fb;border-color:#c6edf9;} .tabs,.pills{margin:0 0 20px;padding:0;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";} .tabs:after,.pills:after{clear:both;} .tabs li,.pills li{display:inline;}.tabs li a,.pills li a{float:left;width:auto;} diff --git a/docs/index.html b/docs/index.html index ebaa5a6f3a..02dd26e0c0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -859,13 +859,17 @@

Buttons

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

-

All buttons default to a light gray style, but a blue .primary class and a red .danger class is available. Plus, rolling your own styles is easy peasy.

+

All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class. Plus, rolling your own styles is easy peasy.

Example buttons

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

-    + + + + +

Alternate sizes

Fancy larger or smaller buttons? Have at it!

@@ -1077,15 +1081,15 @@ ×

Oh snap! Change this and that and try again.

-
+
×

Holy gaucamole! Best check yo self, you’re not looking too good.

-
+
×

Well done! You successfully read this alert message.

-
+
×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

diff --git a/lib/patterns.less b/lib/patterns.less index 466727cc42..2d946e39db 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -288,21 +288,96 @@ footer { } } +// BUTTON STYLES +// ------------- + + +// Base .btn styles +.btn { + // Button Base + cursor: pointer; + display: inline-block; + #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); + padding: 5px 14px 6px; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + color: #333; + font-size: 13px; + line-height: normal; + border: 1px solid #ccc; + border-bottom-color: #bbb; + .border-radius(4px); + @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + + &:hover { + background-position: 0 -15px; + color: #333; + text-decoration: none; + } + + // Transitions + .transition(.1s linear all); + + // Active and Disabled states + &.disabled { + cursor: default; + background-image: none; + .opacity(65); + } + + &:disabled { + // disabled pseudo can't be included with .disabled + // def because IE8 and below will drop it ;_; + cursor: default; + background-image: none; + .opacity(65); + } + + &:active { + @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + } + + // Primary Button Type + &.primary, + &.primary:hover { + color:#fff; + .gradientBar(@blue, @blueDark) + } + + + // Button Sizes + &.large { + font-size: 16px; + line-height: normal; + padding: 9px 14px 9px; + .border-radius(6px); + } + + &.small { + padding: 7px 9px 7px; + font-size: 11px; + } + +} + +// Help Firefox not be a jerk about adding extra padding to buttons +button.btn, +input[type=submit].btn { + &::-moz-focus-inner { + padding: 0; + border: 0; + } +} + + // ERROR STYLES // ------------ -// Setup a mixin to colorize different alerts -.alertTheme(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border-color: darken(@secondaryColor, 10%) darken(@secondaryColor, 10%) darken(@secondaryColor, 15%); - border-color: rgba(0,0,0,.05) rgba(0,0,0,.075) rgba(0,0,0,.125); -} - // Base alert styles .alert { - .alertTheme(#fceec1, #eedc94); + .gradientBar(#fceec1, #eedc94); // warning by default margin-bottom: @baseline; padding: 7px 14px; color: @grayDark; @@ -311,6 +386,7 @@ footer { border-style: solid; .border-radius(4px); .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); + // Remove extra margin from content h5 { line-height: @baseline; @@ -323,66 +399,59 @@ footer { margin-bottom: 2px; line-height: 28px; } - // Provide actions with buttons .btn { + // Provide actions with buttons .box-shadow(0 1px 0 rgba(255,255,255,.25)); } -} -// Alternate alerts -.alert-error, -.alert-success, -.alert-info, -.alert-error h5, -.alert-success h5, -.alert-info h5 { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.3); -} -.alert-error { .alertTheme(#f56a66, #d6463e); } -.alert-success { .alertTheme(#62c462, #57a957); } -.alert-info { .alertTheme(#6bd0ee, #36b3d9); } -// Close action -.close { - float: right; - margin-top: -2px; - color: @black; - font-size: 20px; - font-weight: bold; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover { + .close { + float: right; + margin-top: -2px; color: @black; - text-decoration: none; - .opacity(40); + font-size: 20px; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(20); + &:hover { + color: @black; + text-decoration: none; + .opacity(40); + } } -} -// Block-level alerts -.alert-block { - background-image: none; - background-color: lighten(#fceec1, 5%); - padding: 14px; - border-color: #fceec1; - .box-shadow(none); - p { - margin-right: 30px; - } - .alert-actions { - margin-top: 5px; - } -} -.alert-block.error { - background-color: lighten(#f56a66, 25%); - border-color: lighten(#f56a66, 20%); -} -.alert-block.success { - background-color: lighten(#62c462, 30%); - border-color: lighten(#62c462, 25%); -} -.alert-block.info { - background-color: lighten(#6bd0ee, 25%); - border-color: lighten(#6bd0ee, 20%); -} + &.alert-block, + &.alert-block:hover { + background-image: none; + background-color: lighten(#fceec1, 5%); + padding: 14px; + border-color: #fceec1; + .box-shadow(none); + + p { + margin-right: 30px; + } + .alert-actions { + margin-top: 5px; + } + &.error, + &.success, + &.info { + color: @grayDark; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + } + &.error { + background-color: lighten(#f56a66, 25%); + border-color: lighten(#f56a66, 20%); + } + &.success { + background-color: lighten(#62c462, 30%); + border-color: lighten(#62c462, 25%); + } + &.info { + background-color: lighten(#6bd0ee, 25%); + border-color: lighten(#6bd0ee, 20%); + } + } +} // NAVIGATION // ---------- diff --git a/lib/preboot.less b/lib/preboot.less index 964f677a68..cec847852d 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -170,14 +170,6 @@ column-gap: @columnGap; } -// Buttons -.btnColoring(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); - border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); -} - // Add an alphatransparency value to any background or border color (via Elyse Holladay) #translucent { .background(@color: @white, @alpha: 1) { @@ -189,6 +181,49 @@ } } +// Gradient Bar Colors for buttons and allerts +.gradientBar(@primaryColor, @secondaryColor) { + #gradient > .vertical(@primaryColor, @secondaryColor); + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); + border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); +} + +// Shared colors for buttons and alerts + +.btn, +.alert { + + &.danger, + &.danger:hover, + &.error, + &.error:hover, + &.success, + &.success:hover, + &.info, + &.info:hover { + color: @white + } + + &.danger, + &.danger:hover, + &.error, + &.error:hover { + .gradientBar(#f56a66, #d6463e); + } + + &.success, + &.success:hover { + .gradientBar(#62c462, #57a957); + } + + &.info, + &.info:hover { + .gradientBar(#6bd0ee, #36b3d9); + } + +} + // Gradients #gradient { .horizontal (@startColor: #555, @endColor: #333) { diff --git a/lib/scaffolding.less b/lib/scaffolding.less index f5bc68868c..ad5cc7644d 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -115,90 +115,4 @@ a { color: @linkColorHover; text-decoration: underline; } -} - -// Buttons -.btn { - // Button Base - cursor: pointer; - display: inline-block; - #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); - padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - color: #333; - font-size: 13px; - line-height: normal; - border: 1px solid #ccc; - border-bottom-color: #bbb; - .border-radius(4px); - @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - - &:hover { - background-position: 0 -15px; - color: #333; - text-decoration: none; - } - - // Transitions - .transition(.1s linear all); - - // Colored Button Types - &.primary, - &.danger, - &.danger:hover, - &.primary:hover { - color: #fff; - } - - &.primary { - .btnColoring(@blue, @blueDark) - } - - &.danger { - .btnColoring(lighten(@red, 15%), @red) - } - - // Active and Disabled states - &.disabled { - cursor: default; - background-image: none; - .opacity(65); - } - - &:disabled { - // disabled pseudo can't be included with .disabled - // def because IE8 and below will drop it ;_; - cursor: default; - background-image: none; - .opacity(65); - } - - &:active { - @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - } - - // Button Sizes - &.large { - font-size: 16px; - line-height: normal; - padding: 9px 14px 9px; - .border-radius(6px); - } - - &.small { - padding: 7px 9px 7px; - font-size: 11px; - } - -} - -// Help Firefox not be a jerk about adding extra padding to buttons -button.btn, -input[type=submit].btn { - &::-moz-focus-inner { - padding: 0; - border: 0; - } -} +} \ No newline at end of file From 04b8e667d0a8caaf241570721bbf7afb7a5e1b2d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 25 Aug 2011 13:52:04 -0700 Subject: [PATCH 04/19] clean up btn selectors a bit --- bootstrap-1.1.0.css | 48 ++++++++++++++++------------------------- bootstrap-1.1.0.min.css | 8 +++---- lib/patterns.less | 14 ++++++------ lib/preboot.less | 10 +++------ 4 files changed, 32 insertions(+), 48 deletions(-) diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css index 34b9d085f3..b9b50de4bf 100644 --- a/bootstrap-1.1.0.css +++ b/bootstrap-1.1.0.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: Thu Aug 25 13:30:35 PDT 2011 + * Date: Thu Aug 25 13:52:00 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). @@ -141,12 +141,8 @@ aside { } .btn.danger, .alert.danger, -.btn.danger:hover, -.alert.danger:hover, .btn.error, -.alert.error, -.btn.error:hover, -.alert.error:hover { +.alert.error { background-color: #d6463e; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e)); @@ -160,10 +156,7 @@ aside { border-color: #d6463e #d6463e #a52a23; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.btn.success, -.alert.success, -.btn.success:hover, -.alert.success:hover { +.btn.success, .alert.success { background-color: #57a957; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); @@ -177,10 +170,7 @@ aside { border-color: #57a957 #57a957 #3d773d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.btn.info, -.alert.info, -.btn.info:hover, -.alert.info:hover { +.btn.info, .alert.info { background-color: #36b3d9; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9)); @@ -1326,6 +1316,21 @@ footer { color: #333; text-decoration: none; } +.btn.primary { + color: #fff; + background-color: #0064cd; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); + background-image: -moz-linear-gradient(#049cdb, #0064cd); + background-image: -ms-linear-gradient(#049cdb, #0064cd); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); + background-image: -webkit-linear-gradient(#049cdb, #0064cd); + background-image: -o-linear-gradient(#049cdb, #0064cd); + background-image: linear-gradient(#049cdb, #0064cd); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #0064cd #0064cd #003f81; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} .btn.disabled { cursor: default; background-image: none; @@ -1347,21 +1352,6 @@ footer { -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } -.btn.primary, .btn.primary:hover { - color: #fff; - background-color: #0064cd; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); - background-image: -moz-linear-gradient(#049cdb, #0064cd); - background-image: -ms-linear-gradient(#049cdb, #0064cd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); - background-image: -webkit-linear-gradient(#049cdb, #0064cd); - background-image: -o-linear-gradient(#049cdb, #0064cd); - background-image: linear-gradient(#049cdb, #0064cd); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #0064cd #0064cd #003f81; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} .btn.large { font-size: 16px; line-height: normal; diff --git a/bootstrap-1.1.0.min.css b/bootstrap-1.1.0.min.css index a3aca6ef4a..32e6240acc 100644 --- a/bootstrap-1.1.0.min.css +++ b/bootstrap-1.1.0.min.css @@ -10,9 +10,9 @@ header,section,footer,article,aside{display:block;} .container{width:940px;margin:0 auto;zoom:1;}.container:before,.container:after{display:table;content:"";} .container:after{clear:both;} .btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover,.btn.success,.alert.success,.btn.success:hover,.alert.success:hover,.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{color:#ffffff;} -.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.success,.alert.success,.btn.success:hover,.alert.success:hover{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.danger,.alert.danger,.btn.error,.alert.error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.success,.alert.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert.info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} .row .span1,.row .span2,.row .span3,.row .span4,.row .span5,.row .span6,.row .span7,.row .span8,.row .span9,.row .span10,.row .span11,.row .span12,.row .span13,.row .span14,.row .span15,.row .span16{display:inline;float:left;margin-left:20px;} @@ -177,10 +177,10 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-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);}.page-header h1{margin-bottom:8px;} .btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} +.btn.primary{color:#fff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(#049cdb, #0064cd);background-image:-ms-linear-gradient(#049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(#049cdb, #0064cd);background-image:-o-linear-gradient(#049cdb, #0064cd);background-image:linear-gradient(#049cdb, #0064cd);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;} .btn:disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;} .btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);} -.btn.primary,.btn.primary:hover{color:#fff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(#049cdb, #0064cd);background-image:-ms-linear-gradient(#049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(#049cdb, #0064cd);background-image:-o-linear-gradient(#049cdb, #0064cd);background-image:linear-gradient(#049cdb, #0064cd);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .btn.small{padding:7px 9px 7px;font-size:11px;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} diff --git a/lib/patterns.less b/lib/patterns.less index 2d946e39db..b96a97198c 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -315,6 +315,12 @@ footer { text-decoration: none; } + // Primary Button Type + &.primary { + color:#fff; + .gradientBar(@blue, @blueDark) + } + // Transitions .transition(.1s linear all); @@ -338,14 +344,6 @@ footer { .box-shadow(@shadow); } - // Primary Button Type - &.primary, - &.primary:hover { - color:#fff; - .gradientBar(@blue, @blueDark) - } - - // Button Sizes &.large { font-size: 16px; diff --git a/lib/preboot.less b/lib/preboot.less index cec847852d..344876873b 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -206,19 +206,15 @@ } &.danger, - &.danger:hover, - &.error, - &.error:hover { + &.error { .gradientBar(#f56a66, #d6463e); } - &.success, - &.success:hover { + &.success { .gradientBar(#62c462, #57a957); } - &.info, - &.info:hover { + &.info { .gradientBar(#6bd0ee, #36b3d9); } From ce615d016a8ac380dae871358cfc7e745b5e20c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 22:41:45 -0700 Subject: [PATCH 05/19] merged in my pending changes from 1.2-wip branch, resolve diffs as best as i could, update docs and alerts to use original classes, updated docs to include smaller section for layouts --- bootstrap-1.1.0.css | 59 ++++++++---------- bootstrap-1.1.0.min.css | 30 ++++----- docs/assets/css/docs.css | 4 +- docs/index.html | 131 ++++++++++++++++++--------------------- lib/patterns.less | 5 +- lib/preboot.less | 4 +- 6 files changed, 108 insertions(+), 125 deletions(-) diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css index b9b50de4bf..f06827bc5d 100644 --- a/bootstrap-1.1.0.css +++ b/bootstrap-1.1.0.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: Thu Aug 25 13:52:00 PDT 2011 + * Date: Thu Aug 25 22:35:30 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). @@ -122,27 +122,27 @@ aside { clear: both; } .btn.danger, -.alert.danger, +.alert-message.danger, .btn.danger:hover, -.alert.danger:hover, +.alert-message.danger:hover, .btn.error, -.alert.error, +.alert-message.error, .btn.error:hover, -.alert.error:hover, +.alert-message.error:hover, .btn.success, -.alert.success, +.alert-message.success, .btn.success:hover, -.alert.success:hover, +.alert-message.success:hover, .btn.info, -.alert.info, +.alert-message.info, .btn.info:hover, -.alert.info:hover { +.alert-message.info:hover { color: #ffffff; } .btn.danger, -.alert.danger, +.alert-message.danger, .btn.error, -.alert.error { +.alert-message.error { background-color: #d6463e; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e)); @@ -156,7 +156,7 @@ aside { border-color: #d6463e #d6463e #a52a23; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.btn.success, .alert.success { +.btn.success, .alert-message.success { background-color: #57a957; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); @@ -170,7 +170,7 @@ aside { border-color: #57a957 #57a957 #3d773d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.btn.info, .alert.info { +.btn.info, .alert-message.info { background-color: #36b3d9; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9)); @@ -1368,7 +1368,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 0; border: 0; } -.alert { +.alert-message { background-color: #eedc94; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); @@ -1394,23 +1394,23 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } -.alert h5 { +.alert-message h5 { line-height: 18px; } -.alert p { +.alert-message p { margin-bottom: 0; } -.alert div { +.alert-message div { margin-top: 5px; margin-bottom: 2px; line-height: 28px; } -.alert .btn { +.alert-message .btn { -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } -.alert .close { +.alert-message .close { float: right; margin-top: -2px; color: #000000; @@ -1422,7 +1422,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-opacity: 0.2; opacity: 0.2; } -.alert .close:hover { +.alert-message .close:hover { color: #000000; text-decoration: none; filter: alpha(opacity=40); @@ -1430,7 +1430,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-opacity: 0.4; opacity: 0.4; } -.alert.alert-block, .alert.alert-block:hover { +.alert-message.block-message { background-image: none; background-color: #fdf5d9; padding: 14px; @@ -1439,30 +1439,25 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: none; box-shadow: none; } -.alert.alert-block p, .alert.alert-block:hover p { +.alert-message.block-message p { margin-right: 30px; } -.alert.alert-block .alert-actions, .alert.alert-block:hover .alert-actions { +.alert-message.block-message .alert-actions { margin-top: 5px; } -.alert.alert-block.error, -.alert.alert-block:hover.error, -.alert.alert-block.success, -.alert.alert-block:hover.success, -.alert.alert-block.info, -.alert.alert-block:hover.info { +.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info { color: #404040; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } -.alert.alert-block.error, .alert.alert-block:hover.error { +.alert-message.block-message.error { background-color: #fddfde; border-color: #fbc7c6; } -.alert.alert-block.success, .alert.alert-block:hover.success { +.alert-message.block-message.success { background-color: #d1eed1; border-color: #bfe7bf; } -.alert.alert-block.info, .alert.alert-block:hover.info { +.alert-message.block-message.info { background-color: #ddf4fb; border-color: #c6edf9; } diff --git a/bootstrap-1.1.0.min.css b/bootstrap-1.1.0.min.css index 32e6240acc..4cd8bdcbac 100644 --- a/bootstrap-1.1.0.min.css +++ b/bootstrap-1.1.0.min.css @@ -9,10 +9,10 @@ header,section,footer,article,aside{display:block;} .center-block{display:block;margin:0 auto;} .container{width:940px;margin:0 auto;zoom:1;}.container:before,.container:after{display:table;content:"";} .container:after{clear:both;} -.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover,.btn.success,.alert.success,.btn.success:hover,.alert.success:hover,.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{color:#ffffff;} -.btn.danger,.alert.danger,.btn.error,.alert.error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.success,.alert.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.info,.alert.info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;} +.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert-message.info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} .row .span1,.row .span2,.row .span3,.row .span4,.row .span5,.row .span6,.row .span7,.row .span8,.row .span9,.row .span10,.row .span11,.row .span12,.row .span13,.row .span14,.row .span15,.row .span16{display:inline;float:left;margin-left:20px;} @@ -184,17 +184,17 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .btn.small{padding:7px 9px 7px;font-size:11px;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} -.alert{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert h5{line-height:18px;} -.alert p{margin-bottom:0;} -.alert div{margin-top:5px;margin-bottom:2px;line-height:28px;} -.alert .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} -.alert .close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.alert .close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} -.alert.alert-block,.alert.alert-block:hover{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert.alert-block p,.alert.alert-block:hover p{margin-right:30px;} -.alert.alert-block .alert-actions,.alert.alert-block:hover .alert-actions{margin-top:5px;} -.alert.alert-block.error,.alert.alert-block:hover.error,.alert.alert-block.success,.alert.alert-block:hover.success,.alert.alert-block.info,.alert.alert-block:hover.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} -.alert.alert-block.error,.alert.alert-block:hover.error{background-color:#fddfde;border-color:#fbc7c6;} -.alert.alert-block.success,.alert.alert-block:hover.success{background-color:#d1eed1;border-color:#bfe7bf;} -.alert.alert-block.info,.alert.alert-block:hover.info{background-color:#ddf4fb;border-color:#c6edf9;} +.alert-message{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message h5{line-height:18px;} +.alert-message p{margin-bottom:0;} +.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} +.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} +.alert-message .close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.alert-message .close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} +.alert-message.block-message{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message p{margin-right:30px;} +.alert-message.block-message .alert-actions{margin-top:5px;} +.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;} +.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;} +.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;} .tabs,.pills{margin:0 0 20px;padding:0;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";} .tabs:after,.pills:after{clear:both;} .tabs li,.pills li{display:inline;}.tabs li a,.pills li a{float:left;width:auto;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 8334d3f12f..67a34280bf 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -171,7 +171,7 @@ div.mini-layout div { div.mini-layout div.mini-layout-body { background-color: #dceaf4; margin: 0 auto; - width: 450px; + width: 340px; height: 340px; } div.mini-layout.fluid div.mini-layout-sidebar, @@ -185,7 +185,7 @@ div.mini-layout.fluid div.mini-layout-sidebar { height: 340px; } div.mini-layout.fluid div.mini-layout-body { - width: 400px; + width: 300px; margin-left: 10px; } /* Topbar special styles diff --git a/docs/index.html b/docs/index.html index 02dd26e0c0..136a0dbcd2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -94,7 +94,7 @@

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

Bootstrap on GitHub »

-
+
@@ -137,7 +137,7 @@
  • Example page template (more to come soon)
  • -
    + @@ -167,7 +167,7 @@ </div> - +
    1
    1
    @@ -185,7 +185,7 @@
    1
    1
    1
    -
    +
    2
    2
    @@ -195,7 +195,7 @@
    2
    2
    2
    -
    +
    3
    3
    @@ -203,45 +203,45 @@
    3
    3
    1
    -
    +
    4
    4
    4
    4
    -
    +
    4
    6
    6
    -
    +
    8
    8
    -
    +
    5
    11
    -
    +
    16
    -
    +

    Offsetting columns

    4
    8 offset 4
    -
    +
    4 offset 4
    4 offset 4
    -
    +
    5 offset 3
    5 offset 3
    -
    +
    10 offset 6
    -
    + @@ -253,13 +253,10 @@

    Layouts Basic templates to create webpages

    -
    -
    +

    Fixed layout

    -

    A basic 940px wide, centered container layout for just about any site or page.

    -
    -
    +

    The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div.container>.

    @@ -270,16 +267,10 @@ </div> </body> -
    -
    - - -
    -
    +
    +

    Fluid layout

    -

    A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.

    -
    -
    +

    An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.

    @@ -296,8 +287,8 @@ </div> </body> -
    -
    +
    +
    @@ -360,7 +351,7 @@

    Abbreviations

    For abbreviations and acronyms, use the <abbr> tag (<acronym> is deprecated in HTML5). Put the shorthand form within the tag and set a title for the complete name.

    - +
    @@ -380,7 +371,7 @@ Dr. Julius Hibbert
    - +

    Lists

    @@ -449,7 +440,7 @@
    Etiam porta sem malesuada magna mollis euismod.
    - + @@ -595,7 +586,7 @@ ... </table> - + @@ -616,15 +607,15 @@
    Example form legend
    - +
    - +
    - @@ -634,9 +625,9 @@
    - +
    - @@ -784,7 +775,7 @@
    - +
    @@ -798,15 +789,15 @@
    Example form legend
    - +
    - +
    - @@ -853,7 +844,7 @@
    - +
    @@ -893,7 +884,7 @@  
    - + @@ -993,7 +984,7 @@ </ul> - +
    @@ -1057,7 +1048,7 @@ </div>
    - + @@ -1077,24 +1068,24 @@

    One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

    -
    - × -

    Oh snap! Change this and that and try again.

    -
    -
    +
    ×

    Holy gaucamole! Best check yo self, you’re not looking too good.

    -
    +
    + × +

    Oh snap! Change this and that and try again.

    +
    +
    ×

    Well done! You successfully read this alert message.

    -
    +
    ×

    Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

    -
    +
    @@ -1103,28 +1094,28 @@

    For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

    -
    - × -

    Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

    - -
    -
    +
    ×

    Holy gaucamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    -
    +
    + × +

    Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

    + +
    +
    ×

    Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

    -
    +
    ×

    Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

    @@ -1132,7 +1123,7 @@
    -
    +
    @@ -1165,7 +1156,7 @@
    - +
    @@ -1198,7 +1189,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
    - +
    @@ -1222,7 +1213,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
    - + diff --git a/lib/patterns.less b/lib/patterns.less index b96a97198c..be5394df50 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -374,7 +374,7 @@ input[type=submit].btn { // ------------ // Base alert styles -.alert { +.alert-message { .gradientBar(#fceec1, #eedc94); // warning by default margin-bottom: @baseline; padding: 7px 14px; @@ -416,8 +416,7 @@ input[type=submit].btn { } } - &.alert-block, - &.alert-block:hover { + &.block-message { background-image: none; background-color: lighten(#fceec1, 5%); padding: 14px; diff --git a/lib/preboot.less b/lib/preboot.less index 344876873b..5191c5cc56 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -192,8 +192,7 @@ // Shared colors for buttons and alerts .btn, -.alert { - +.alert-message { &.danger, &.danger:hover, &.error, @@ -217,7 +216,6 @@ &.info { .gradientBar(#6bd0ee, #36b3d9); } - } // Gradients From 7d821f18acf04cddd1067ee612773ce2f98cb4ac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 22:44:23 -0700 Subject: [PATCH 06/19] resolve issue #87 in this branch --- bootstrap-1.1.0.css | 14 +++++++------- bootstrap-1.1.0.min.css | 10 +++++----- lib/scaffolding.less | 8 ++++---- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css index f06827bc5d..e97f2fc897 100644 --- a/bootstrap-1.1.0.css +++ b/bootstrap-1.1.0.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: Thu Aug 25 22:35:30 PDT 2011 + * Date: Thu Aug 25 22:44:09 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). @@ -315,26 +315,26 @@ body { color: #808080; text-rendering: optimizeLegibility; } -div.container { +.container { width: 940px; margin: 0 auto; } -div.container-fluid { +.container-fluid { padding: 0 20px; zoom: 1; } -div.container-fluid:before, div.container-fluid:after { +.container-fluid:before, .container-fluid:after { display: table; content: ""; } -div.container-fluid:after { +.container-fluid:after { clear: both; } -div.container-fluid div.sidebar { +.container-fluid .sidebar { float: left; width: 220px; } -div.container-fluid div.content { +.container-fluid .content { min-width: 700px; max-width: 1180px; margin-left: 240px; diff --git a/bootstrap-1.1.0.min.css b/bootstrap-1.1.0.min.css index 4cd8bdcbac..343a51ec63 100644 --- a/bootstrap-1.1.0.min.css +++ b/bootstrap-1.1.0.min.css @@ -46,11 +46,11 @@ header,section,footer,article,aside{display:block;} .row .offset12{margin-left:740px;} 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;} -div.container-fluid{padding:0 20px;zoom:1;}div.container-fluid:before,div.container-fluid:after{display:table;content:"";} -div.container-fluid:after{clear:both;} -div.container-fluid div.sidebar{float:left;width:220px;} -div.container-fluid div.content{min-width:700px;max-width:1180px;margin-left:240px;} +.container{width:940px;margin:0 auto;} +.container-fluid{padding:0 20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";} +.container-fluid:after{clear:both;} +.container-fluid .sidebar{float:left;width:220px;} +.container-fluid .content{min-width:700px;max-width:1180px;margin-left:240px;} a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;} p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} diff --git a/lib/scaffolding.less b/lib/scaffolding.less index ad5cc7644d..6b7fa799fa 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -81,20 +81,20 @@ body { } // Container (centered, fixed-width layouts) -div.container { +.container { width: 940px; margin: 0 auto; } // Fluid layouts (left aligned, with sidebar, min- & max-width content) -div.container-fluid { +.container-fluid { padding: 0 20px; .clearfix(); - div.sidebar { + .sidebar { float: left; width: 220px; } - div.content { + .content { min-width: 700px; max-width: 1180px; margin-left: 240px; From 9a00619d6e91152413abec56dd60ac88be0f8630 Mon Sep 17 00:00:00 2001 From: Igor Bozato Date: Fri, 26 Aug 2011 03:17:38 -0300 Subject: [PATCH 07/19] .sidebar and .content in fluid layouts don't need to be divs --- lib/scaffolding.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/scaffolding.less b/lib/scaffolding.less index b1900f0126..bc6e0d1e32 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -67,11 +67,11 @@ div.container { div.container-fluid { padding: 0 20px; .clearfix(); - div.sidebar { + .sidebar { float: left; width: 220px; } - div.content { + .content { min-width: 700px; max-width: 1180px; margin-left: 240px; From 0758f64045645849b21164149428719a005da1cb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 22:52:21 -0700 Subject: [PATCH 08/19] updated classnames in the docs for the alerts, updated colors on error and info alerts/buttons --- bootstrap-1.1.0.css | 38 +++++++++++++++++++------------------- bootstrap-1.1.0.min.css | 4 ++-- docs/index.html | 4 ++-- lib/preboot.less | 13 ++++++------- 4 files changed, 29 insertions(+), 30 deletions(-) diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css index e97f2fc897..1c1db831f0 100644 --- a/bootstrap-1.1.0.css +++ b/bootstrap-1.1.0.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: Thu Aug 25 22:44:09 PDT 2011 + * Date: Thu Aug 25 22:51:24 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). @@ -143,17 +143,17 @@ aside { .alert-message.danger, .btn.error, .alert-message.error { - background-color: #d6463e; + background-color: #c43c35; background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e)); - background-image: -moz-linear-gradient(#f56a66, #d6463e); - background-image: -ms-linear-gradient(#f56a66, #d6463e); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e)); - background-image: -webkit-linear-gradient(#f56a66, #d6463e); - background-image: -o-linear-gradient(#f56a66, #d6463e); - background-image: linear-gradient(#f56a66, #d6463e); + background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); + background-image: -moz-linear-gradient(#ee5f5b, #c43c35); + background-image: -ms-linear-gradient(#ee5f5b, #c43c35); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35)); + background-image: -webkit-linear-gradient(#ee5f5b, #c43c35); + background-image: -o-linear-gradient(#ee5f5b, #c43c35); + background-image: linear-gradient(#ee5f5b, #c43c35); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #d6463e #d6463e #a52a23; + border-color: #c43c35 #c43c35 #882a25; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.success, .alert-message.success { @@ -171,17 +171,17 @@ aside { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.info, .alert-message.info { - background-color: #36b3d9; + background-color: #339bb9; background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9)); - background-image: -moz-linear-gradient(#6bd0ee, #36b3d9); - background-image: -ms-linear-gradient(#6bd0ee, #36b3d9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9)); - background-image: -webkit-linear-gradient(#6bd0ee, #36b3d9); - background-image: -o-linear-gradient(#6bd0ee, #36b3d9); - background-image: linear-gradient(#6bd0ee, #36b3d9); + background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); + background-image: -moz-linear-gradient(#5bc0de, #339bb9); + background-image: -ms-linear-gradient(#5bc0de, #339bb9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); + background-image: -webkit-linear-gradient(#5bc0de, #339bb9); + background-image: -o-linear-gradient(#5bc0de, #339bb9); + background-image: linear-gradient(#5bc0de, #339bb9); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #36b3d9 #36b3d9 #1f85a4; + border-color: #339bb9 #339bb9 #22697d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } /* diff --git a/bootstrap-1.1.0.min.css b/bootstrap-1.1.0.min.css index 343a51ec63..937e453754 100644 --- a/bootstrap-1.1.0.min.css +++ b/bootstrap-1.1.0.min.css @@ -10,9 +10,9 @@ header,section,footer,article,aside{display:block;} .container{width:940px;margin:0 auto;zoom:1;}.container:before,.container:after{display:table;content:"";} .container:after{clear:both;} .btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;} -.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(#ee5f5b, #c43c35);background-image:-ms-linear-gradient(#ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(#ee5f5b, #c43c35);background-image:-o-linear-gradient(#ee5f5b, #c43c35);background-image:linear-gradient(#ee5f5b, #c43c35);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.info,.alert-message.info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(#5bc0de, #339bb9);background-image:-ms-linear-gradient(#5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(#5bc0de, #339bb9);background-image:-o-linear-gradient(#5bc0de, #339bb9);background-image:linear-gradient(#5bc0de, #339bb9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} .row .span1,.row .span2,.row .span3,.row .span4,.row .span5,.row .span6,.row .span7,.row .span8,.row .span9,.row .span10,.row .span11,.row .span12,.row .span13,.row .span14,.row .span15,.row .span16{display:inline;float:left;margin-left:20px;} diff --git a/docs/index.html b/docs/index.html index 136a0dbcd2..68ae4cf947 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1064,7 +1064,7 @@

    Basic alerts

    -

    div.alert

    +

    div.alert-message

    One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

    @@ -1090,7 +1090,7 @@

    Block messages

    -

    div.alert.alert-block

    +

    div.alert-message.block-message

    For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

    diff --git a/lib/preboot.less b/lib/preboot.less index 5191c5cc56..eb43301fa7 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -188,11 +188,10 @@ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); } - // Shared colors for buttons and alerts - .btn, .alert-message { + // Set text color &.danger, &.danger:hover, &.error, @@ -203,18 +202,18 @@ &.info:hover { color: @white } - + // Danger and error appear as red &.danger, &.error { - .gradientBar(#f56a66, #d6463e); + .gradientBar(#ee5f5b, #c43c35); } - + // Success appears as green &.success { .gradientBar(#62c462, #57a957); } - + // Info appears as a neutral blue &.info { - .gradientBar(#6bd0ee, #36b3d9); + .gradientBar(#5bc0de, #339bb9); } } From dd4bb95c2db5db9bb6727147002d916cb86756e6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 23:10:18 -0700 Subject: [PATCH 09/19] updated docs for b/i tags based on issue #62 --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 68ae4cf947..e0c980b8ba 100644 --- a/docs/index.html +++ b/docs/index.html @@ -338,7 +338,7 @@

    Emphasis tags (<strong> and <em>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <strong> for importance and <em> for stress emphasis.

    Emphasis in a paragraph

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

    -

    Note: It's still okay to use <b> and <i> tags in HTML5, but they don't come with inherent styles anymore. <b> is meant to highlight words or phrases without conveying additional importance, while <i> is mostly for voice, technical terms, etc.

    +

    Note: It's still okay to use <b> and <i> tags in HTML5 and they don't have to be styled bold and italic, respectively (although if there is a more semantic element, use it). <b> is meant to highlight words or phrases without conveying additional importance, while <i> is mostly for voice, technical terms, etc.

    Addresses

    The <address> element is used for contact information for its nearest ancestor, or the entire body of work. Here’s how it looks:

    From c715584428752c885193b8e72d1b3156eb770aa7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 23:18:15 -0700 Subject: [PATCH 10/19] pull table class from docs again --- docs/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/index.html b/docs/index.html index e0c980b8ba..2cf2415c1a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -503,7 +503,7 @@
    -<table class="common-table">
    +<table>
       ...
     </table>

    Example: Zebra-striped

    @@ -540,7 +540,7 @@

    Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.

    -<table class="common-table zebra-striped">
    +<table class="zebra-striped">
     ...
     </table>

    Example: Zebra-striped w/ TableSorter.js

    @@ -582,7 +582,7 @@ $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); }); </script> -<table class="common-table zebra-striped"> +<table class="zebra-striped"> ... </table>
    From ab77d7abd39f44cbf281826c8721228e21c05ed3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 23:19:01 -0700 Subject: [PATCH 11/19] spacing --- bootstrap-1.1.0.css | 2 +- lib/reset.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css index af511cc656..0ac346f422 100644 --- a/bootstrap-1.1.0.css +++ b/bootstrap-1.1.0.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: Thu Aug 25 23:12:07 PDT 2011 + * Date: Thu Aug 25 23:18: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). diff --git a/lib/reset.less b/lib/reset.less index 28802f559a..e79b77b401 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -134,6 +134,7 @@ textarea { overflow: auto; // Remove vertical scrollbar in IE6-9 vertical-align: top; // Readability and alignment cross-browser } + // Tables // ------------------------- // Source: http://github.com/necolas/normalize.css From 74a18b341c8e071437de9e1e8ba5e1e56531b93c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 23:25:21 -0700 Subject: [PATCH 12/19] updated le docs to include note about topbar and padding on box (issue #86) and add snippet about @basefont and @baseline to type section --- docs/index.html | 51 ++++++++++++++++++++++++++----------------------- 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/docs/index.html b/docs/index.html index 2cf2415c1a..20591cc244 100644 --- a/docs/index.html +++ b/docs/index.html @@ -65,7 +65,7 @@ It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

    Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

    -
    +
    @@ -303,8 +303,10 @@
    -

    Headings and copy

    +

    Headings & copy

    A standard typographic hierarchy for structuring your webpages.

    +

    The entire typographic grid is based on two Less variables in our preboot.less file: @basefont and @baseline. The first is the base font-size used throughout and the second is the base line-height.

    +

    We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.

    h1. Heading 1

    @@ -611,7 +613,7 @@
    -
    +
    @@ -623,7 +625,7 @@
    -
    +
    @@ -635,26 +637,26 @@
    -
    +
    Some Value Here
    -
    +
    -
    +
    Small snippet of help text
    -
    +
    Example form legend @@ -666,7 +668,7 @@ - +
    @@ -675,7 +677,7 @@
    - +
    @@ -684,13 +686,13 @@
    - +
    -
    +
    Example form legend @@ -727,7 +729,7 @@ Note: Labels surround all the options for much larger click areas and a more usable form. - +
    @@ -740,7 +742,7 @@ All times are shown as Pacific Standard Time (GMT -08:00).
    - +
    @@ -749,7 +751,7 @@ Block of help text to describe the field above if need be.
    -
    +
    @@ -768,7 +770,7 @@
    -
    +
     
    @@ -793,7 +795,7 @@
    - +
    @@ -805,7 +807,7 @@
    -
    +
    Example form legend @@ -815,7 +817,7 @@ Small snippet of help text - +
    @@ -837,7 +839,7 @@ Note: Labels surround all the options for much larger click areas and a more usable form.
    -
    +
      @@ -923,9 +925,9 @@
    - - - + + +
    @@ -941,6 +943,7 @@

    As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done.

    +

    Note: When using the topbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your body.


    @@ -1366,7 +1369,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita - +