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

docs/assets/css/bootstrap.css

@@ -1205,8 +1205,6 @@ legend + .control-group {
 }
 .form-horizontal .controls {
   margin-left: 160px;
-  /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
-
   *display: inline-block;
   *margin-left: 0;
   *padding-left: 20px;
@@ -2856,9 +2854,9 @@ input[type="submit"].btn.btn-mini {
 .tab-content {
   overflow: auto;
 }
-.tabs-below .nav-tabs,
-.tabs-right .nav-tabs,
-.tabs-left .nav-tabs {
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
   border-bottom: 0;
 }
 .tab-content > .tab-pane,
@@ -2869,71 +2867,71 @@ input[type="submit"].btn.btn-mini {
 .pill-content > .active {
   display: block;
 }
-.tabs-below .nav-tabs {
+.tabs-below > .nav-tabs {
   border-top: 1px solid #ddd;
 }
-.tabs-below .nav-tabs > li {
+.tabs-below > .nav-tabs > li {
   margin-top: -1px;
   margin-bottom: 0;
 }
-.tabs-below .nav-tabs > li > a {
+.tabs-below > .nav-tabs > li > a {
   -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
   border-radius: 0 0 4px 4px;
 }
-.tabs-below .nav-tabs > li > a:hover {
+.tabs-below > .nav-tabs > li > a:hover {
   border-bottom-color: transparent;
   border-top-color: #ddd;
 }
-.tabs-below .nav-tabs .active > a,
-.tabs-below .nav-tabs .active > a:hover {
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover {
   border-color: transparent #ddd #ddd #ddd;
 }
-.tabs-left .nav-tabs > li,
-.tabs-right .nav-tabs > li {
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
   float: none;
 }
-.tabs-left .nav-tabs > li > a,
-.tabs-right .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
   min-width: 74px;
   margin-right: 0;
   margin-bottom: 3px;
 }
-.tabs-left .nav-tabs {
+.tabs-left > .nav-tabs {
   float: left;
   margin-right: 19px;
   border-right: 1px solid #ddd;
 }
-.tabs-left .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a {
   margin-right: -1px;
   -webkit-border-radius: 4px 0 0 4px;
   -moz-border-radius: 4px 0 0 4px;
   border-radius: 4px 0 0 4px;
 }
-.tabs-left .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover {
   border-color: #eeeeee #dddddd #eeeeee #eeeeee;
 }
-.tabs-left .nav-tabs .active > a,
-.tabs-left .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover {
   border-color: #ddd transparent #ddd #ddd;
   *border-right-color: #ffffff;
 }
-.tabs-right .nav-tabs {
+.tabs-right > .nav-tabs {
   float: right;
   margin-left: 19px;
   border-left: 1px solid #ddd;
 }
-.tabs-right .nav-tabs > li > a {
+.tabs-right > .nav-tabs > li > a {
   margin-left: -1px;
   -webkit-border-radius: 0 4px 4px 0;
   -moz-border-radius: 0 4px 4px 0;
   border-radius: 0 4px 4px 0;
 }
-.tabs-right .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover {
   border-color: #eeeeee #eeeeee #eeeeee #dddddd;
 }
-.tabs-right .nav-tabs .active > a,
-.tabs-right .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover {
   border-color: #ddd #ddd #ddd transparent;
   *border-left-color: #ffffff;
 }

docs/index.html

@@ -83,7 +83,7 @@
     <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
     <p class="download-info">
       <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">View project on GitHub</a>
-      <a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap <small>(v2.0.2)</small></a>
+      <a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap <small>(v2.0.3)</small></a>
     </p>
   </div>
 

docs/less.html

@@ -812,6 +812,16 @@
         <td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
         <td>Generate a precent grid system with <em>n</em> columns and <em>x</em> % wide gutter</td>
       </tr>
+      <tr>
+        <td><code>#grid > .input()</code></td>
+        <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
+        <td>Generate the pixel grid system for <code>input</code> elements, accounting for padding and borders</td>
+      </tr>
+      <tr>
+        <td><code>.makeColumn</code></td>
+        <td><code>@columns: 1, @offset: 0</code></td>
+        <td>Turn any <code>div</code> into a grid column without the <code>.span*</code> classes</td>
+      </tr>
     </tbody>
   </table>
   <h3>CSS3 properties</h3>

docs/templates/pages/index.mustache

@@ -6,7 +6,7 @@
     <p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
     <p class="download-info">
       <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
-      <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap <small>(v2.0.2)</small>{{/i}}</a>
+      <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap <small>(v2.0.3)</small>{{/i}}</a>
     </p>
   </div>
 

docs/templates/pages/less.mustache

@@ -735,6 +735,16 @@
         <td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
         <td>{{_i}}Generate a precent grid system with <em>n</em> columns and <em>x</em> % wide gutter{{/i}}</td>
       </tr>
+      <tr>
+        <td><code>#grid > .input()</code></td>
+        <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
+        <td>{{_i}}Generate the pixel grid system for <code>input</code> elements, accounting for padding and borders{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.makeColumn</code></td>
+        <td><code>@columns: 1, @offset: 0</code></td>
+        <td>{{_i}}Turn any <code>div</code> into a grid column without the <code>.span*</code> classes{{/i}}</td>
+      </tr>
     </tbody>
   </table>
   <h3>{{_i}}CSS3 properties{{/i}}</h3>

less/forms.less

@@ -552,7 +552,7 @@ legend + .control-group {
   // Move over all input controls and content
   .controls {
     margin-left: 160px;
-    /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
+    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls
     *display: inline-block;
     *margin-left: 0;
     *padding-left: 20px;

less/mixins.less

@@ -522,9 +522,9 @@
   margin-left: @gridGutterWidth * -1;
   .clearfix();
 }
-.makeColumn(@columns: 1) {
+.makeColumn(@columns: 1, @offset: 0) {
   float: left;
-  margin-left: @gridGutterWidth;
+  margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
   width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 }
 

less/navs.less

@@ -270,9 +270,9 @@
 }
 
 // Remove border on bottom, left, right
-.tabs-below .nav-tabs,
-.tabs-right .nav-tabs,
-.tabs-left .nav-tabs {
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
   border-bottom: 0;
 }
 
@@ -290,22 +290,22 @@
 // BOTTOM
 // ------
 
-.tabs-below .nav-tabs {
+.tabs-below > .nav-tabs {
   border-top: 1px solid #ddd;
 }
-.tabs-below .nav-tabs > li {
+.tabs-below > .nav-tabs > li {
   margin-top: -1px;
   margin-bottom: 0;
 }
-.tabs-below .nav-tabs > li > a {
+.tabs-below > .nav-tabs > li > a {
   .border-radius(0 0 4px 4px);
   &:hover {
     border-bottom-color: transparent;
     border-top-color: #ddd;
   }
 }
-.tabs-below .nav-tabs .active > a,
-.tabs-below .nav-tabs .active > a:hover {
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover {
   border-color: transparent #ddd #ddd #ddd;
 }
 
@@ -313,51 +313,51 @@
 // ------------
 
 // Common styles
-.tabs-left .nav-tabs > li,
-.tabs-right .nav-tabs > li {
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
   float: none;
 }
-.tabs-left .nav-tabs > li > a,
-.tabs-right .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
   min-width: 74px;
   margin-right: 0;
   margin-bottom: 3px;
 }
 
 // Tabs on the left
-.tabs-left .nav-tabs {
+.tabs-left > .nav-tabs {
   float: left;
   margin-right: 19px;
   border-right: 1px solid #ddd;
 }
-.tabs-left .nav-tabs > li > a {
+.tabs-left > .nav-tabs > li > a {
   margin-right: -1px;
   .border-radius(4px 0 0 4px);
 }
-.tabs-left .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover {
   border-color: @grayLighter #ddd @grayLighter @grayLighter;
 }
-.tabs-left .nav-tabs .active > a,
-.tabs-left .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover {
   border-color: #ddd transparent #ddd #ddd;
   *border-right-color: @white;
 }
 
 // Tabs on the right
-.tabs-right .nav-tabs {
+.tabs-right > .nav-tabs {
   float: right;
   margin-left: 19px;
   border-left: 1px solid #ddd;
 }
-.tabs-right .nav-tabs > li > a {
+.tabs-right > .nav-tabs > li > a {
   margin-left: -1px;
   .border-radius(0 4px 4px 0);
 }
-.tabs-right .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover {
   border-color: @grayLighter @grayLighter @grayLighter #ddd;
 }
-.tabs-right .nav-tabs .active > a,
-.tabs-right .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover {
   border-color: #ddd #ddd #ddd transparent;
   *border-left-color: @white;
 }

less/tests/css-tests.html

@@ -445,6 +445,49 @@
 </div>
 
 
+<!-- Tabs
+================================================== -->
+
+<div class="tabbable tabs-left" style="margin-bottom: 18px;">
+  <ul class="nav nav-tabs">
+    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
+    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
+    <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
+  </ul>
+  <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+    <div class="tab-pane active" id="tab1">
+      <p>I'm in Section 1.</p>
+
+      <div class="tabbable" style="background: #f5f5f5; padding: 20px;">
+        <ul class="nav nav-tabs">
+          <li class="active"><a href="#tab1-1" data-toggle="tab">1.1</a></li>
+          <li><a href="#tab1-2" data-toggle="tab">1.2</a></li>
+          <li><a href="#tab1-3" data-toggle="tab">1.3</a></li>
+        </ul>
+        <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+          <div class="tab-pane active" id="tab1-1">
+            <p>I'm in Section 1.1.</p>
+          </div>
+          <div class="tab-pane" id="tab1-2">
+            <p>I'm in Section 1.2.</p>
+          </div>
+          <div class="tab-pane" id="tab1-3">
+            <p>I'm in Section 1.3.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane" id="tab2">
+      <p>Howdy, I'm in Section 2.</p>
+    </div>
+    <div class="tab-pane" id="tab3">
+      <p>What up girl, this is Section 3.</p>
+    </div>
+  </div>
+</div> <!-- /tabbable -->
+
+
+