updated all docs to jQuery 1.7, move all docs JS to application.js, and move...

updated all docs to jQuery 1.7, move all docs JS to application.js, and move dropdowns css to dedicated file

bootstrap.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Dec 21 15:58:57 CST 2011
+ * Date: Wed Dec 21 16:21:54 CST 2011
  */
 html, body {
   margin: 0;
@@ -1610,7 +1610,7 @@ footer {
   transition: 0.1s linear all;
 }
 .btn:hover {
-  color: #333;
+  color: #404040;
   text-decoration: none;
   background-position: 0 -15px;
 }
@@ -1619,6 +1619,7 @@ footer {
 }
 .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);
@@ -1906,6 +1907,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;

docs/assets/css/docs.css

@@ -317,6 +317,11 @@ h2 + table {
 .example-sites img {
   width: 290px;
 }
+.built-with {
+  margin: -18px 0 27px;
+  color: #999;
+  text-align: center;
+}
 
 .scrollspy-example {
   height: 200px;

docs/assets/js/application.js

 $(function(){
 
+  // Hide the Mobile Safari address bar once loaded
+  // ==============================================
+
+  window.addEventListener("load",function() {
+    // Set a timeout...
+    setTimeout(function(){
+      // Hide the address bar!
+      window.scrollTo(0, 1);
+    }, 0);
+  });
+
+
+  // Docs topbar nav
+  // ===============
+
+  $('.nav .active').click(function(e) {
+    e.preventDefault();
+    $(this).siblings().toggle();
+  });
+
+
+  // Show grid dimensions on hover
+  // =============================
+
+  $('.show-grid > div').hover(function() {
+    var width = $(this).width();
+    $(this).attr('title', width);
+    $(this).twipsy();
+  });
+
+
   // table sort example
   // ==================
 

docs/base-css.html

@@ -1178,18 +1178,7 @@ Form states
 
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-
-    <script type="text/javascript">
-      // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
-      $(document).ready(function() {
-        $('.nav .active').click(function(e) {
-          e.preventDefault();
-          $(this).siblings().toggle();
-        });
-      });
-    </script>
-
+    <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>

docs/components.html

@@ -814,18 +814,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
 
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-
-    <script type="text/javascript">
-      // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
-      $(document).ready(function() {
-        $('.nav .active').click(function(e) {
-          e.preventDefault();
-          $(this).siblings().toggle();
-        });
-      });
-    </script>
-
+    <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>

docs/index.html

@@ -107,19 +107,20 @@
 
         <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>
@@ -233,27 +234,7 @@
 
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
-
-    <script type="text/javascript">
-      // When ready...
-      window.addEventListener("load",function() {
-        // Set a timeout...
-        setTimeout(function(){
-          // Hide the address bar!
-          window.scrollTo(0, 1);
-        }, 0);
-      });
-
-      // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
-      $(document).ready(function() {
-        $('.nav .active').click(function(e) {
-          e.preventDefault();
-          $(this).siblings().toggle();
-        });
-      });
-    </script>
-
+    <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>

docs/less.html

@@ -466,18 +466,7 @@
 
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-
-    <script type="text/javascript">
-      // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
-      $(document).ready(function() {
-        $('.nav .active').click(function(e) {
-          e.preventDefault();
-          $(this).siblings().toggle();
-        });
-      });
-    </script>
-
+    <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>

docs/scaffolding.html

@@ -371,29 +371,7 @@
 
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-
-    <script type="text/javascript">
-      // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
-      $(document).ready(function() {
-        $('.nav .active').click(function(e) {
-          e.preventDefault();
-          $(this).siblings().toggle();
-        });
-      });
-    </script>
-
-    <script type="text/javascript">
-      // Show grid dimensions on hover
-      $(document).ready(function() {
-        $('.show-grid > div').hover(function() {
-          var width = $(this).width();
-          $(this).attr('title', width);
-          $(this).twipsy();
-        });
-      });
-    </script>
-
+    <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>

docs/upgrading.html

@@ -99,21 +99,14 @@
       <li>Added button bar options</li>
     </ul>
   </li>
+<!--
   <li>
     <ul>
       <li></li>
     </ul>
   </li>
-</ul>
-
-<!--
-
-
-
 -->
-
-
-
+</ul>
 
 
       <!-- Footer
@@ -128,18 +121,7 @@
 
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-
-    <script type="text/javascript">
-      // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
-      $(document).ready(function() {
-        $('.nav .active').click(function(e) {
-          e.preventDefault();
-          $(this).siblings().toggle();
-        });
-      });
-    </script>
-
+    <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>

lib/bootstrap.less

@@ -27,6 +27,7 @@
 // Temp catchall for what's missing thus far
 @import "patterns.less";
 
+@import "dropdowns.less";
 @import "tabs-pills.less";
 @import "breadcrumbs.less";
 @import "pagination.less";

lib/dropdowns.less

+// 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;
+  }
+}

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)
   }