Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip

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: Sun Jan  8 01:50:02 PST 2012
+ * Date: Sun Jan  8 02:58:37 PST 2012
  */
 html, body {
   margin: 0;
@@ -485,6 +485,10 @@ blockquote small:before {
 }
 blockquote.pull-right {
   float: right;
+  padding-left: 0;
+  padding-right: 15px;
+  border-left: 0;
+  border-right: 5px solid #eee;
 }
 blockquote.pull-right p, blockquote.pull-right small {
   text-align: right;
@@ -1600,7 +1604,7 @@ i {
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
-.navbar .brand:hover, .navbar ul .active > a {
+.navbar .brand:hover, .navbar .nav .active > a {
   color: #ffffff;
   text-decoration: none;
   background-color: #333333;
@@ -1921,7 +1925,7 @@ i {
 .pills.stacked > li:last-child > a {
   margin-bottom: 1px;
 }
-.tabs .dropdown-menu, .pills .dropdown-menu {
+.nav .dropdown-menu {
   top: 33px;
   border-width: 1px;
 }
@@ -1930,19 +1934,26 @@ i {
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
-.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
+.nav .dropdown-toggle .caret {
+  border-top-color: #0088cc;
   margin-top: 6px;
 }
-.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle {
+.nav .dropdown-toggle:hover .caret {
+  border-top-color: #005580;
+}
+.nav .open .dropdown-toggle {
   background-color: #999;
   border-color: #999;
 }
-.tabs .open .caret, .pills .open .caret {
+.nav .open .caret, .nav .open a:hover .caret {
   border-top-color: #fff;
   filter: alpha(opacity=100);
   -moz-opacity: 1;
   opacity: 1;
 }
+.tabs.stacked .open > a:hover {
+  border-color: #999;
+}
 .tabbable {
   zoom: 1;
 }
@@ -2996,6 +3007,61 @@ a.thumbnail:hover {
   visibility: hidden;
 }
 @media (max-width: 480px) {
+  .navbar .nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 180px;
+    padding-top: 40px;
+    list-style: none;
+  }
+  .navbar .nav, .navbar .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;
+  }
+  .navbar .nav > li {
+    float: none;
+    display: none;
+  }
+  .navbar .nav > li > a {
+    float: none;
+    background-color: #222;
+  }
+  .navbar .nav > .active {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .navbar .nav > .active > a {
+    background-color: transparent;
+  }
+  .navbar .nav > .active > a:hover {
+    background-color: #333;
+  }
+  .navbar .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: "↓";
+  }
+  .navbar .nav:hover > li {
+    display: block;
+  }
+  .navbar .nav:hover > li > a:hover {
+    background-color: #333;
+  }
   .modal {
     width: auto;
     margin: 0;
@@ -3030,6 +3096,12 @@ a.thumbnail:hover {
   }
 }
 @media (max-width: 768px) {
+  .navbar-fixed {
+    position: absolute;
+  }
+  .navbar-fixed .nav {
+    float: none;
+  }
   .container {
     width: auto;
     padding: 0 20px;
@@ -3043,55 +3115,6 @@ a.thumbnail:hover {
     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 {

docs/components.html

@@ -222,9 +222,12 @@
       <h3>Application-style navigation</h3>
       <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
       <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
+      <h4>With icons</h4>
+      <p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
     </div>
     <div class="span4">
-      <h3>Example sidebar navigation</h3>
+      <h3>Example nav list</h3>
+      <p>Take a list of links and add <code>class="nav list"</code>:</p>
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="nav-header">List header</li>
@@ -237,9 +240,6 @@
           <li><a href="#">Help</a></li>
         </ul>
       </div> <!-- /well -->
-    </div>
-    <div class="span4">
-      <h3>Simple markup</h3>
 <pre class="prettyprint linenums">
 &lt;ul class="nav list"&gt;
   &lt;li class="nav-header"&gt;
@@ -253,6 +253,34 @@
   &lt;/li&gt;
   ...
 &lt;/ul&gt;
+</pre>
+    </div>
+    <div class="span4">
+      <h3>Example with icons</h3>
+      <p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
+      <div class="well" style="padding: 8px 0;">
+        <ul class="nav list">
+          <li class="nav-header">List header</li>
+          <li class="active"><a href="#"><i class="home"></i> Home</a></li>
+          <li><a href="#"><i class="book"></i> Library</a></li>
+          <li><a href="#"><i class="pencil"></i> Applications</a></li>
+          <li class="nav-header">Another list header</li>
+          <li><a href="#"><i class="user"></i> Profile</a></li>
+          <li><a href="#"><i class="cog"></i> Settings</a></li>
+          <li><a href="#"><i class="flag"></i> Help</a></li>
+        </ul>
+      </div> <!-- /well -->
+<pre class="prettyprint linenums">
+&lt;ul class="nav list"&gt;
+  ...
+  &lt;li&gt;
+    &lt;a href="#"&gt;
+      &lt;i class="book"&gt;&lt;/i&gt;
+      Library
+    &lt;/a&gt;
+  &lt;/li&gt;
+  ...
+&lt;/ul&gt;
 </pre>
     </div>
   </div>
@@ -262,23 +290,13 @@
   <div class="row">
     <div class="span4">
       <h3>What's included</h3>
-      <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:</p>
-      <ul>
-        <li>top (default)</li>
-        <li>right</li>
-        <li>bottom</li>
-        <li>left</li>
-      </ul>
+      <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
       <p>Changing between them is easy and only requires changing very little markup.</p>
-      <hr>
-      <h3>Custom jQuery plugin</h3>
-      <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
-      <p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
     </div>
-    <div class="span8">
+    <div class="span4">
       <h3>Tabbable example</h3>
       <p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p>
-      <div class="tabbable">
+      <div class="tabbable" style="margin-bottom: 9px;">
         <ul class="nav tabs">
           <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
           <li><a href="#2" data-toggle="tab">Section 2</a></li>
@@ -296,7 +314,14 @@
           </div>
         </div>
       </div> <!-- /tabbable -->
-      <hr>
+    </div>
+    <div class="span4">
+      <h3>Custom jQuery plugin</h3>
+      <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
+      <p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
+    </div>
+  </div>
+    
   <h3>Straightforward markup</h3>
   <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
 <pre class="prettyprint linenums">
@@ -315,8 +340,6 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
 
   <h3>Tabbable in any direction</h3>
   <div class="row">
@@ -809,28 +832,6 @@
 
 
 
-<!-- Autocomplete
-================================================== -->
-<section id="autocomplete">
-  <div class="page-header">
-    <h1>Autocomplete <small></small></h1>
-  </div>
-
-</section>
-
-
-
-<!-- Carousel
-================================================== -->
-<section id="carousel">
-  <div class="page-header">
-    <h1>Carousel <small></small></h1>
-  </div>
-
-</section>
-
-
-
 <!-- Alerts & Messages
 ================================================== -->
 <section id="alerts">

docs/scaffolding.html

@@ -243,11 +243,11 @@
       </div>
 <pre class="prettyprint linenums">
 &lt;body&gt;
-  &lt;div class="fluid-container"&gt;
-    &lt;div class="sidebar"&gt;
+  &lt;div class="fluid-container sidebar-left"&gt;
+    &lt;div class="fluid-sidebar"&gt;
       ...
     &lt;/div&gt;
-    &lt;div class="content"&gt;
+    &lt;div class="fluid-content"&gt;
       ...
     &lt;/div&gt;
   &lt;/div&gt;

lib/navbar.less

@@ -10,7 +10,7 @@
 .navbar {
   overflow: visible;
 }
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
 .navbar-inner {
   background-color: @navBarBgEnd;
   #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
@@ -21,7 +21,7 @@
 .navbar {
   // Hover and active states
   .brand:hover,
-  ul .active > a {
+  .nav .active > a {
     color: @white;
     text-decoration: none;
     background-color: @navBarBgStart;

lib/navs.less

@@ -175,29 +175,35 @@
 // ---------
 
 // Position the menu
-.tabs .dropdown-menu,
-.pills .dropdown-menu {
+.nav .dropdown-menu {
   top: 33px;
   border-width: 1px;
 }
 .pills .dropdown-menu {
   .border-radius(4px);
 }
-.tabs .dropdown-toggle .caret,
-.pills .dropdown-toggle .caret {
+.nav .dropdown-toggle .caret {
+  border-top-color: @linkColor;
   margin-top: 6px;
 }
-.tabs .open .dropdown-toggle,
-.pills .open .dropdown-toggle {
+.nav .dropdown-toggle:hover .caret {
+  border-top-color: @linkColorHover;
+}
+.nav .open .dropdown-toggle {
   background-color: #999;
   border-color: #999;
 }
-.tabs .open .caret,
-.pills .open .caret {
+.nav .open .caret,
+.nav .open a:hover .caret {
   border-top-color: #fff;
   .opacity(100);
 }
 
+// Dropdowns in stacked tabs
+.tabs.stacked .open > a:hover {
+  border-color: #999;
+}
+
 
 
 // TABBABLE

lib/responsive.less

@@ -18,6 +18,64 @@
 // ---------------------
 
 @media (max-width: 480px) {
+
+  // Make the nav work for small devices
+  .navbar {
+    .nav {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 180px;
+      padding-top: 40px;
+      list-style: none;
+    }
+    .nav,
+    .nav > li:last-child a {
+      .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;
+    }
+    .nav > .active > a {
+      background-color: transparent;
+    }
+    .nav > .active > a:hover {
+      background-color: #333;
+    }
+    .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 @white;
+      .opacity(100);
+      content: "↓";
+    }
+
+    .nav:hover > li {
+      display: block;
+    }
+    .nav:hover > li > a:hover {
+      background-color: #333;
+    }
+  }
+
   // Resize modals
   .modal {
     width: auto;
@@ -63,6 +121,15 @@
 // --------------------------------------------------
 
 @media (max-width: 768px) {
+  
+  // Unfix the navbar
+  .navbar-fixed {
+    position: absolute;
+  }
+  .navbar-fixed .nav {
+    float: none;
+  }
+
   // Remove width from containers
   .container {
     width: auto;
@@ -80,53 +147,6 @@
     margin: 0;
   }
 
-  // Make the nav work for small devices
-  .nav {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 180px;
-    padding-top: 40px;
-    list-style: none;
-  }
-  .nav,
-  .nav > li:last-child a {
-    .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 @white;
-    .opacity(100);
-    content: "↓";
-  }
-  .nav > .active a:hover {
-    background-color: rgba(255,255,255,.05);
-  }
 }
 
 

lib/type.less

@@ -165,6 +165,10 @@ blockquote {
   // Float right with text-align: right
   &.pull-right {
     float: right;
+    padding-left: 0;
+    padding-right: 15px;
+    border-left: 0;
+    border-right: 5px solid #eee;
     p,
     small {
       text-align: right;