aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJacob Thornton <[email protected]>2011-12-22 19:15:09 -0800
committerJacob Thornton <[email protected]>2011-12-22 19:15:09 -0800
commit35fdbad24b908714ff1a1221945598527a641863 (patch)
tree0a054ac3f3b913fb16f71731b4b04472311afc4a
parent87ac818253a26bcf09fa55f78ae3f55759c54e64 (diff)
parent9fb380151d477f1741b7609ade7a9e7fd5450b2c (diff)
downloadbootstrap-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.css117
-rw-r--r--bootstrap.min.css25
-rw-r--r--docs/assets/css/docs.css12
-rw-r--r--docs/assets/js/application.js14
-rw-r--r--docs/base-css.html83
-rw-r--r--docs/components.html133
-rw-r--r--docs/index.html36
-rw-r--r--docs/javascript.html12
-rw-r--r--docs/less.html3
-rw-r--r--docs/scaffolding.html5
-rw-r--r--docs/upgrading.html13
-rw-r--r--lib/bootstrap.less3
-rw-r--r--lib/dropdowns.less94
-rw-r--r--lib/forms.less1
-rw-r--r--lib/mixins.less1
-rw-r--r--lib/patterns.less9
-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: "&darr;";
+}
+.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:"&darr;";}
+.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:"&darr;";} .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>&lt;body&gt;</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>&lt;ul&gt;</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: "&darr;";
+}
+.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;