diff options
| author | Jacob Thornton <[email protected]> | 2011-12-22 19:15:09 -0800 |
|---|---|---|
| committer | Jacob Thornton <[email protected]> | 2011-12-22 19:15:09 -0800 |
| commit | 35fdbad24b908714ff1a1221945598527a641863 (patch) | |
| tree | 0a054ac3f3b913fb16f71731b4b04472311afc4a | |
| parent | 87ac818253a26bcf09fa55f78ae3f55759c54e64 (diff) | |
| parent | 9fb380151d477f1741b7609ade7a9e7fd5450b2c (diff) | |
| download | bootstrap-35fdbad24b908714ff1a1221945598527a641863.tar.xz bootstrap-35fdbad24b908714ff1a1221945598527a641863.zip | |
Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
Conflicts:
bootstrap.css
docs/assets/js/application.js
docs/base-css.html
docs/components.html
docs/index.html
docs/javascript.html
docs/less.html
docs/scaffolding.html
docs/upgrading.html
| -rw-r--r-- | bootstrap.css | 117 | ||||
| -rw-r--r-- | bootstrap.min.css | 25 | ||||
| -rw-r--r-- | docs/assets/css/docs.css | 12 | ||||
| -rw-r--r-- | docs/assets/js/application.js | 14 | ||||
| -rw-r--r-- | docs/base-css.html | 83 | ||||
| -rw-r--r-- | docs/components.html | 133 | ||||
| -rw-r--r-- | docs/index.html | 36 | ||||
| -rw-r--r-- | docs/javascript.html | 12 | ||||
| -rw-r--r-- | docs/less.html | 3 | ||||
| -rw-r--r-- | docs/scaffolding.html | 5 | ||||
| -rw-r--r-- | docs/upgrading.html | 13 | ||||
| -rw-r--r-- | lib/bootstrap.less | 3 | ||||
| -rw-r--r-- | lib/dropdowns.less | 94 | ||||
| -rw-r--r-- | lib/forms.less | 1 | ||||
| -rw-r--r-- | lib/mixins.less | 1 | ||||
| -rw-r--r-- | lib/patterns.less | 9 | ||||
| -rw-r--r-- | lib/thumbnails.less (renamed from lib/media-grids.less) | 3 |
17 files changed, 471 insertions, 93 deletions
diff --git a/bootstrap.css b/bootstrap.css index ee80000c2..eb7b65678 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,11 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. +<<<<<<< HEAD * Date: Thu Dec 22 19:09:49 PST 2011 +======= + * Date: Wed Dec 21 18:38:56 CST 2011 +>>>>>>> 9fb380151d477f1741b7609ade7a9e7fd5450b2c */ html, body { margin: 0; @@ -919,6 +923,9 @@ textarea[readonly] { .inline-inputs span { padding: 0 2px 0 1px; } +.input-prepend, .input-append { + overflow: hidden; +} .input-prepend input, .input-append input { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; @@ -1534,7 +1541,6 @@ footer { .alert-message.danger, .btn.error, .alert-message.error { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #c43c35; background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); @@ -1549,7 +1555,6 @@ footer { 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 { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #57a957; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -moz-linear-gradient(top, #62c462, #57a957); @@ -1564,7 +1569,6 @@ footer { 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 { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #339bb9; background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); @@ -1610,7 +1614,7 @@ footer { transition: 0.1s linear all; } .btn:hover { - color: #333; + color: #404040; text-decoration: none; background-position: 0 -15px; } @@ -1759,7 +1763,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-bottom: 18px; color: #404040; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #eedc94; background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: -moz-linear-gradient(top, #fceec1, #eedc94); @@ -1802,6 +1805,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -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.error, .alert-message.success, .alert-message.info { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} .alert-message.block-message { padding: 14px; background-image: none; @@ -1905,6 +1911,104 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .label.notice { background-color: #62cffc; } +.dropdown { + position: relative; +} +.dropdown-toggle:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #ffffff; + filter: alpha(opacity=30); + -moz-opacity: 0.3; + opacity: 0.3; + content: "↓"; +} +.dropdown:hover .dropdown-toggle:after { + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; +} +.dropdown-menu { + position: absolute; + top: 40px; + z-index: 900; + float: left; + display: none; + min-width: 160px; + max-width: 220px; + _width: 160px; + padding: 6px 0; + margin-left: 0; + margin-right: 0; + background-color: #ffffff; + border-color: #999; + border-color: rgba(0, 0, 0, 0.2); + border-style: solid; + border-width: 0 1px 1px; + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding-box; + background-clip: padding-box; + zoom: 1; +} +.dropdown-menu li { + float: none; + display: block; + background-color: none; +} +.dropdown-menu .divider { + height: 1px; + margin: 5px 0; + overflow: hidden; + background-color: #eee; + border-bottom: 1px solid #ffffff; +} +.topbar .dropdown-menu a, .dropdown-menu a { + display: block; + padding: 4px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: #808080; + text-shadow: 0 1px 0 #ffffff; +} +.topbar .dropdown-menu a:hover, .dropdown-menu a:hover { + color: #404040; + text-decoration: none; + background-color: #dddddd; + background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd)); + background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); + background-image: -ms-linear-gradient(top, #eeeeee, #dddddd); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)); + background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); + background-image: -o-linear-gradient(top, #eeeeee, #dddddd); + background-image: linear-gradient(top, #eeeeee, #dddddd); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); + -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); +} +.dropdown.open .dropdown-toggle { + color: #ffffff; + background: #ccc; + background: rgba(0, 0, 0, 0.3); +} +.dropdown.open .dropdown-menu { + display: block; +} .tabs, .pills { padding: 0; margin: 0 0 20px; @@ -2539,6 +2643,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .thumbnail { display: block; + padding: 4px; line-height: 1; border: 1px solid #ddd; -webkit-border-radius: 4px; @@ -2556,7 +2661,7 @@ a.thumbnail:hover { } .thumbnail > img { display: block; - margin: 4px; + max-width: 100%; } .thumbnail .caption { padding: 9px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 3f48b135e..db5e4206d 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -150,7 +150,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .inline-inputs input.mini{width:60px;} .inline-inputs input.small{width:90px;} .inline-inputs span{padding:0 2px 0 1px;} -.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} +.input-prepend,.input-append{overflow:hidden;}.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} @@ -212,10 +212,10 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} footer{padding-top:17px;margin-top:17px;border-top:1px solid #eee;} .page-header{margin-bottom:27px;border-bottom:1px solid #eee;-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:13.5px;} .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{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);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{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);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);} -.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);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);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333;text-decoration:none;background-position:0 -15px;} +.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);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:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);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);} +.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);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);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#404040;text-decoration:none;background-position:0 -15px;} .btn:focus{outline:1px dotted #666;} .btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);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.active,.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);} @@ -234,11 +234,12 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);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);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 .close{*margin-top:3px;} +.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);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);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 .close{*margin-top:3px;} .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.error,.alert-message.success,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} .alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} .alert-message.block-message ul{margin-bottom:0;} .alert-message.block-message li{color:#404040;} @@ -254,6 +255,14 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} +.dropdown{position:relative;} +.dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";} +.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;zoom:1;}.dropdown-menu li{float:none;display:block;background-color:none;} +.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;} +.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{color:#404040;text-decoration:none;background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);} +.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} +.dropdown.open .dropdown-menu{display:block;} .tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;} .tabs:after,.pills:after{clear:both;} .tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} @@ -337,9 +346,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} .thumbnails:after{clear:both;} .thumbnails>li{float:left;margin:0 0 20px 20px;} -.thumbnail{display:block;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);} +.thumbnail{display:block;padding:4px;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);} a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -.thumbnail>img{display:block;margin:4px;} +.thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 8432f92ea..b3c464941 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -315,7 +315,12 @@ h2 + table { /* Example sites showcase */ .example-sites img { - width: 290px; + max-width: 290px; +} +.built-with { + margin: -18px 0 27px; + color: #999; + text-align: center; } .scrollspy-example { @@ -382,12 +387,15 @@ h2 + table { .example-sites { margin-left: 0; } - .example-sites a { + .example-sites > li { float: none; display: block; max-width: 300px; margin: 0 auto 18px; } + .example-sites img { + max-width: 270px; + } table code { white-space: normal; diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index c653233e6..c8e796a39 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -4,6 +4,18 @@ $(function(){ // IT'S ALL JUST JUNK FOR OUR DOCS! // ++++++++++++++++++++++++++++++++++++++++++ + // Hide the Mobile Safari address bar once loaded + // ============================================== + + // Set a timeout... + setTimeout(function(){ + // Hide the address bar! + window.scrollTo(0, 1); + }, 0); + + // table sort example + // ================== + // make code pretty prettyPrint && prettyPrint() @@ -61,4 +73,4 @@ $(function(){ } } -})
\ No newline at end of file +}) diff --git a/docs/base-css.html b/docs/base-css.html index 6173a4de6..34e844df3 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -762,6 +762,43 @@ <h1>Forms</h1> </div> +<!-- + +Types of forms + default (stacked) + horizontal (change the class) + search + inline +Form elements + form + fieldset + legend + label + input + text (password, email, etc) + radio + checkbox + textarea + rows + select + single + multiple + size +Custom form elements + Input prepend and append (for @ and $) + checkbox and radio lists +Explaining the default Bootstrap form structure + Bulletproofing our forms means adding a bit of extra structure and providing more classes for customization and event handling + Form vertical and horizontal forms, we require a wrapping element. + we suggest a fieldset + but could be anthing so long as it uses the proper class +Form states + warning + error + success + +--> + <h2>Four types of forms</h2> <table class="bordered-table striped-table"> <thead> @@ -842,7 +879,7 @@ </div> <div class="span9"> <form class="horizontal-form"> - <legend>Example form</legend> + <legend>Example form section</legend> <fieldset class="control-group"> <label class="control-label" for="input01">Text input</label> <div class="controls"> @@ -851,6 +888,16 @@ </div> </fieldset> <fieldset class="control-group"> + <label class="control-label" for="prependedInput">Prepended text</label> + <div class="controls"> + <div class="input-prepend"> + <span class="add-on">@</span> + <input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text"> + </div> + <span class="help-block">Here's some help text</span> + </div> + </fieldset> + <fieldset class="control-group"> <label class="control-label" for="select01">Select list</label> <div class="controls"> <select name="select01"> @@ -874,23 +921,44 @@ </select> </div> </fieldset> - <legend>Example form</legend> + <legend>Example form section</legend> + <fieldset class="control-group"> + <label class="control-label" for="textarea">Textarea</label> + <div class="controls"> + <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="fileInput">Disabled input</label> + <div class="controls"> + <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here... carry on." disabled> + </div> + </fieldset> <fieldset class="control-group"> <label class="control-label" for="fileInput">File input</label> <div class="controls"> <input class="input-file" id="fileInput" name="fileInput" type="file"> </div> </fieldset> - <fieldset class="control-group has-error"> + <fieldset class="control-group warning"> + <label class="control-label" for="inputError">Input with warning</label> + <div class="controls"> + <input type="text" name="inputError"> + <span class="help-inline">Something may have gone wrong</span> + </div> + </fieldset> + <fieldset class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" name="inputError"> + <span class="help-inline">Please correct the error</span> </div> </fieldset> - <fieldset class="control-group has-error"> - <label class="control-label" for="textareaError">Textarea with error</label> + <fieldset class="control-group success"> + <label class="control-label" for="inputError">Input with success</label> <div class="controls"> - <textarea class="input-xlarge" rows="3"></textarea> + <input type="text" name="inputError"> + <span class="help-inline">Woohoo!</span> </div> </fieldset> <fieldset class="control-group"> @@ -1110,8 +1178,7 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> - <script src="../js/tests/vendor/jquery.js"></script> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> <script src="assets/js/application.js"></script> diff --git a/docs/components.html b/docs/components.html index 4d2c60823..26a657cb5 100644 --- a/docs/components.html +++ b/docs/components.html @@ -22,6 +22,18 @@ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="assets/js/application.js"></script> </head> <body> @@ -201,11 +213,33 @@ -<!-- Navigation +<!-- Autocomplete +================================================== --> +<section id="autocomplete"> + <div class="page-header"> + <h1>Autocomplete <small></small></h1> + </div> + +</section> + + + +<!-- Carousel ================================================== --> -<section id="navigation"> +<section id="carousel"> <div class="page-header"> - <h1>Navigation</h1> + <h1>Carousel <small></small></h1> + </div> + +</section> + + + +<!-- Navbar +================================================== --> +<section id="navbar"> + <div class="page-header"> + <h1>Navbar</h1> </div> <h2>Fixed navbar</h2> <div class="navbar navbar-static" > @@ -262,11 +296,19 @@ </div> <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> - <br> +</section> + + + +<!-- Tabs & Pills +================================================== --> +<section id="tabsAndPills"> + <div class="page-header"> + <h1>Tabs and pills <small></small></h1> + </div> <div class="row"> <div class="span3"> - <h2>Tabs and pills</h2> <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> </div> @@ -428,10 +470,19 @@ </div> </div><!-- /row --> - <!-- Breadcrumbs --> +</section> + + + +<!-- Breadcrumbs +================================================== --> +<section id="breadcrumbs"> + <div class="page-header"> + <h1>Breadcrumbs <small></small></h1> + </div> + <div class="row"> <div class="span3"> - <h2>Breadcrumbs</h2> <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p> </div> <div class="span9"> @@ -464,10 +515,20 @@ </div> </div> +</section> + + + +<!-- Step nav +================================================== --> +<section id="stepNav"> + <div class="page-header"> + <h1>Step nav <small></small></h1> + </div> + <!-- Step nav --> <div class="row"> <div class="span3"> - <h2>Step nav</h2> <p>Placeholder for now!</p> </div> <div class="span9"> @@ -486,7 +547,17 @@ </div> </div> - <!-- Pagination --> +</section> + + + +<!-- Pagination +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Pagination <small></small></h1> + </div> + <div class="row"> <div class="span3"> <h2>Pagination</h2> @@ -644,11 +715,11 @@ </section> -<!-- Popovers +<!-- Modals ================================================== --> <section id="popovers"> <div class="page-header"> - <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1> + <h1>Modals <small></small></h1> </div> <div class="row"> <div class="span3"> @@ -676,7 +747,17 @@ </div> </div><!-- /row --> - <!-- Tooltips --> +</section> + + + +<!-- Twipsies +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Twipsy tooltips <small></small></h1> + </div> + <div class="row"> <div class="span3"> <h2>Tooltips</h2> @@ -694,7 +775,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </div> </div><!-- /row --> - <!-- Popovers --> +</section> + + + +<!-- Popovers +================================================== --> +<section id="popovers"> + <div class="page-header"> + <h1>Popovers <small></small></h1> + </div> + <div class="row"> <div class="span3"> <h2>Popovers</h2> @@ -721,6 +812,8 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </section> + + <!-- Footer ================================================== --> <footer class="footer"> @@ -730,19 +823,5 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> - - <!-- Le javascript --> - <!-- Placed at the end of the document so the pages load faster --> - <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> - <script src="../js/tests/vendor/jquery.js"></script> - - <script src="assets/js/google-code-prettify/prettify.js"></script> - - <script src="../js/bootstrap-transition.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-tab.js"></script> - - <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/index.html b/docs/index.html index 81d7df41e..0d340fa1a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -107,39 +107,23 @@ <div class="marketing"> <h1>Built with Bootstrap</h1> - <ul class="media-grid example-sites"> - <li> - <a href="http://kippt.com/" target="_blank"> + <p class="built-with">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a>.</p> + <ul class="thumbnails example-sites"> + <li class="span4"> + <a class="thumbnail" href="http://kippt.com/" target="_blank"> <img src="assets/img/example-sites/kippt.png" alt="Kippt"> </a> </li> - <li> - <a href="http://www.fleetio.com/" target="_blank"> + <li class="span4"> + <a class="thumbnail" href="http://www.fleetio.com/" target="_blank"> <img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> </a> </li> - <li> - <a href="http://www.jshint.com/" target="_blank"> + <li class="span4"> + <a class="thumbnail" href="http://www.jshint.com/" target="_blank"> <img src="assets/img/example-sites/jshint.png" alt="JS Hint"> </a> </li> -<!-- - <li> - <a href="http://bartop.co/" target="_blank"> - <img src="assets/img/example-sites/bartop.png" alt="Bartop.co"> - </a> - </li> - <li> - <a href="http://railwayjs.com/" target="_blank"> - <img src="assets/img/example-sites/railwayjs.png" alt="RailwayJS"> - </a> - </li> - <li> - <a href="http://www.totalwireframe.com/" target="_blank"> - <img src="assets/img/example-sites/totalwireframe.png" alt="Total Wireframe"> - </a> - </li> - --> </ul> <h1>Designed for everyone, everywhere</h1> @@ -234,5 +218,7 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + <script src="assets/js/application.js"></script> </body> -</html>
\ No newline at end of file +</html> diff --git a/docs/javascript.html b/docs/javascript.html index c9bb425a4..e33900432 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -102,7 +102,7 @@ </tr> <tr> <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> - <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> + <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> </tr> </tr> <tr> @@ -260,7 +260,7 @@ $('#myModal').on('hidden', function () { <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h3>Using boostrap-dropdown.js</h3> + <h3>Using bootstrap-dropdown.js</h3> <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre> <h3>Markup</h3> <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p> @@ -336,7 +336,7 @@ $('#myModal').on('hidden', function () { <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h2>Using boostrap-scrollspy.js</h2> + <h2>Using bootstrap-scrollspy.js</h2> <pre class="prettyprint linenums">$('#navbar').dropdown()</pre> <h3>Markup</h3> <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body). @@ -410,7 +410,7 @@ $('#myModal').on('hidden', function () { <a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h3>Using boostrap-tab.js</h3> + <h3>Using bootstrap-tab.js</h3> <pre class="prettyprint linenums">$('#myTab').tab('show')</pre> <h3>Markup</h3> <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p> @@ -608,11 +608,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </div> <div class="row"> <div class="span3 columns"> - <p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p> + <p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p> <a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h3>Using boostrap-popover.js</h3> + <h3>Using bootstrap-popover.js</h3> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> <table class="bordered-table striped-table"> diff --git a/docs/less.html b/docs/less.html index 13dfee282..7d3efd296 100644 --- a/docs/less.html +++ b/docs/less.html @@ -466,8 +466,7 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> - <script src="../js/tests/vendor/jquery.js"></script> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script src="assets/js/application.js"></script> </body> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 311a6954c..dc35bd577 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -370,11 +370,10 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> - <script src="../js/tests/vendor/jquery.js"></script> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script src="../js/bootstrap-transition.js"></script> <script src="../js/bootstrap-twipsy.js"></script> <script src="assets/js/application.js"></script> </body> -</html>
\ No newline at end of file +</html> diff --git a/docs/upgrading.html b/docs/upgrading.html index 4dedb37d8..7be1fd708 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -38,7 +38,7 @@ <li><a href="./base-css.html">Base CSS</a></li> <li><a href="./components.html">Components</a></li> <li><a href="./javascript.html">Javascript plugins</a></li> - <li class="active"><a href="./less.html">Using LESS</a></li> + <li><a href="./less.html">Using LESS</a></li> </ul> </div> </div> @@ -100,6 +100,16 @@ </ul> </li> </ul> +<!-- + <li> + <ul> + <li></li> + </ul> + </li> +--> +</ul> + + <!-- Footer ================================================== --> <footer class="footer"> @@ -109,5 +119,6 @@ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> + </body> </html> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index ffad35913..e05a966ad 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -27,13 +27,14 @@ // Temp catchall for what's missing thus far @import "patterns.less"; +@import "dropdowns.less"; @import "tabs-pills.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "modals.less"; @import "twipsy.less"; @import "popovers.less"; -@import "media-grids.less"; +@import "thumbnails.less"; // Responsive @import "responsive.less";
\ No newline at end of file diff --git a/lib/dropdowns.less b/lib/dropdowns.less new file mode 100644 index 000000000..7436f6a2c --- /dev/null +++ b/lib/dropdowns.less @@ -0,0 +1,94 @@ +// Dropdown Menus +// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns +.dropdown { + position: relative; +} +// The link that is clicked to toggle the dropdown +.dropdown-toggle:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(30); + content: "↓"; +} +.dropdown:hover .dropdown-toggle:after { + .opacity(100); +} +// The dropdown menu (ul) +.dropdown-menu { + position: absolute; + top: 40px; + z-index: 900; + float: left; + display: none; // None by default, but block on "open" of the menu + min-width: 160px; + max-width: 220px; + _width: 160px; + padding: 6px 0; + margin-left: 0; // override default ul styles + margin-right: 0; + background-color: @white; + border-color: #999; + border-color: rgba(0,0,0,.2); + border-style: solid; + border-width: 0 1px 1px; + .border-radius(0 0 6px 6px); + .box-shadow(0 2px 4px rgba(0,0,0,.2)); + .background-clip(padding-box); + zoom: 1; // do we need this? + + // Unfloat any li's to make them stack + li { + float: none; + display: block; + background-color: none; + } + // Dividers (basically an hr) within the dropdown + .divider { + height: 1px; + margin: 5px 0; + overflow: hidden; + background-color: #eee; + border-bottom: 1px solid @white; + } +} + +.topbar .dropdown-menu, .dropdown-menu { + // Links within the dropdown menu + a { + display: block; + padding: 4px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: @gray; + text-shadow: 0 1px 0 @white; + // Hover state + &:hover { + color: @grayDark; + text-decoration: none; + #gradient > .vertical(#eeeeee, #dddddd); + @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); + .box-shadow(@shadow); + } + } +} + +// Open state for the dropdown +.dropdown.open { + .dropdown-toggle { + color: @white; + background: #ccc; + background: rgba(0,0,0,.3); + } + .dropdown-menu { + display: block; + } +} diff --git a/lib/forms.less b/lib/forms.less index a73e6f545..64e77fdb4 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -325,6 +325,7 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { + overflow: hidden; input { .border-radius(0 3px 3px 0); } diff --git a/lib/mixins.less b/lib/mixins.less index 41cf8890d..e8b5cdd2f 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -205,7 +205,6 @@ // Gradient Bar Colors for buttons and alerts .gradientBar(@primaryColor, @secondaryColor) { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); #gradient > .vertical(@primaryColor, @secondaryColor); 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%); diff --git a/lib/patterns.less b/lib/patterns.less index 558f3ca45..44c427adf 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -401,7 +401,7 @@ footer { cursor: pointer; &:hover { - color: #333; + color: @grayDark; text-decoration: none; background-position: 0 -15px; } @@ -414,6 +414,7 @@ footer { // Primary Button Type &.primary { color: @white; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); .gradientBar(@blue, @blueDark) } @@ -575,6 +576,12 @@ input[type=submit].btn { .box-shadow(0 1px 0 rgba(255,255,255,.25)); } + &.error, + &.success, + &.info { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } + &.block-message { padding: 14px; background-image: none; diff --git a/lib/media-grids.less b/lib/thumbnails.less index 12626df3f..9e25f5027 100644 --- a/lib/media-grids.less +++ b/lib/thumbnails.less @@ -13,6 +13,7 @@ } .thumbnail { display: block; + padding: 4px; line-height: 1; border: 1px solid #ddd; .border-radius(4px); @@ -26,7 +27,7 @@ a.thumbnail:hover { // Images and captions .thumbnail > img { display: block; - margin: 4px; + max-width: 100%; } .thumbnail .caption { padding: 9px; |
