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

docs/assets/css/bootstrap-responsive.css

@@ -34,7 +34,7 @@
 .input-block-level {
   display: block;
   width: 100%;
-  min-height: 28px;
+  min-height: 30px;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
@@ -203,7 +203,7 @@
     display: block;
     float: left;
     width: 100%;
-    min-height: 28px;
+    min-height: 30px;
     margin-left: 2.564102564102564%;
     *margin-left: 2.5109110747408616%;
     -webkit-box-sizing: border-box;
@@ -548,7 +548,7 @@
     display: block;
     float: left;
     width: 100%;
-    min-height: 28px;
+    min-height: 30px;
     margin-left: 2.7624309392265194%;
     *margin-left: 2.709239449864817%;
     -webkit-box-sizing: border-box;
@@ -830,7 +830,7 @@
   .uneditable-input {
     display: block;
     width: 100%;
-    min-height: 28px;
+    min-height: 30px;
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
             box-sizing: border-box;

docs/assets/css/bootstrap.css

@@ -150,7 +150,7 @@ textarea {
 .input-block-level {
   display: block;
   width: 100%;
-  min-height: 28px;
+  min-height: 30px;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
@@ -340,7 +340,7 @@ a:hover {
   display: block;
   float: left;
   width: 100%;
-  min-height: 28px;
+  min-height: 30px;
   margin-left: 2.127659574468085%;
   *margin-left: 2.074468085106383%;
   -webkit-box-sizing: border-box;
@@ -1012,10 +1012,9 @@ input[type="color"]:focus,
 
 input[type="radio"],
 input[type="checkbox"] {
-  margin: 4px 0;
+  margin: 4px 0 0;
+  margin-top: 1px \9;
   *margin-top: 0;
-  /* IE7 */
-
   line-height: normal;
   cursor: pointer;
 }
@@ -1031,13 +1030,13 @@ input[type="checkbox"] {
 
 select,
 input[type="file"] {
-  height: 28px;
+  height: 30px;
   /* In IE7, the height of the select element cannot be changed by height, only font-size */
 
   *margin-top: 4px;
   /* For IE7, add top margin to align select with labels */
 
-  line-height: 28px;
+  line-height: 30px;
 }
 
 select {
@@ -1863,8 +1862,8 @@ table {
   background-color: #f9f9f9;
 }
 
-.table-hover tr:hover td,
-.table-hover tr:hover th {
+.table-hover tbody tr:hover td,
+.table-hover tbody tr:hover th {
   background-color: #f5f5f5;
 }
 
@@ -2866,6 +2865,7 @@ table .span24 {
   position: relative;
   height: 0;
   overflow: hidden;
+  overflow: visible \9;
   -webkit-transition: height 0.35s ease;
      -moz-transition: height 0.35s ease;
        -o-transition: height 0.35s ease;
@@ -3254,8 +3254,8 @@ button.close {
 
 button.btn,
 input[type="submit"].btn {
-  *padding-top: 2px;
-  *padding-bottom: 2px;
+  *padding-top: 3px;
+  *padding-bottom: 3px;
 }
 
 button.btn::-moz-focus-inner,
@@ -4030,7 +4030,7 @@ input[type="submit"].btn.btn-mini {
 .navbar .brand {
   display: block;
   float: left;
-  padding: 8px 20px 12px;
+  padding: 10px 20px 10px;
   margin-left: -20px;
   font-size: 20px;
   font-weight: 200;
@@ -4146,6 +4146,11 @@ input[type="submit"].btn.btn-mini {
   margin-bottom: 0;
 }
 
+.navbar-fixed-top .navbar-inner,
+.navbar-fixed-bottom .navbar-inner {
+  border: 0;
+}
+
 .navbar-fixed-top .navbar-inner,
 .navbar-fixed-bottom .navbar-inner {
   padding-right: 0;
@@ -4165,7 +4170,6 @@ input[type="submit"].btn.btn-mini {
 }
 
 .navbar-fixed-top .navbar-inner {
-  border-width: 0 0 1px;
   -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
@@ -4176,7 +4180,6 @@ input[type="submit"].btn.btn-mini {
 }
 
 .navbar-fixed-bottom .navbar-inner {
-  border-width: 1px 0 0;
   -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
@@ -4285,7 +4288,7 @@ input[type="submit"].btn.btn-mini {
   margin-top: 3px;
 }
 
-.navbar .dropdown-menu:before {
+.navbar .nav > li > .dropdown-menu:before {
   position: absolute;
   top: -7px;
   left: 9px;
@@ -4297,7 +4300,7 @@ input[type="submit"].btn.btn-mini {
   content: '';
 }
 
-.navbar .dropdown-menu:after {
+.navbar .nav > li > .dropdown-menu:after {
   position: absolute;
   top: -6px;
   left: 10px;
@@ -4308,7 +4311,7 @@ input[type="submit"].btn.btn-mini {
   content: '';
 }
 
-.navbar-fixed-bottom .dropdown-menu:before {
+.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
   top: auto;
   bottom: -7px;
   border-top: 7px solid #ccc;
@@ -4316,7 +4319,7 @@ input[type="submit"].btn.btn-mini {
   border-top-color: rgba(0, 0, 0, 0.2);
 }
 
-.navbar-fixed-bottom .dropdown-menu:after {
+.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
   top: auto;
   bottom: -6px;
   border-top: 6px solid #ffffff;
@@ -4342,24 +4345,35 @@ input[type="submit"].btn.btn-mini {
   border-bottom-color: #555555;
 }
 
-.navbar .pull-right .dropdown-menu,
-.navbar .dropdown-menu.pull-right {
+.navbar .pull-right > li > .dropdown-menu,
+.navbar .nav > li > .dropdown-menu.pull-right {
   right: 0;
   left: auto;
 }
 
-.navbar .pull-right .dropdown-menu:before,
-.navbar .dropdown-menu.pull-right:before {
+.navbar .pull-right > li > .dropdown-menu:before,
+.navbar .nav > li > .dropdown-menu.pull-right:before {
   right: 12px;
   left: auto;
 }
 
-.navbar .pull-right .dropdown-menu:after,
-.navbar .dropdown-menu.pull-right:after {
+.navbar .pull-right > li > .dropdown-menu:after,
+.navbar .nav > li > .dropdown-menu.pull-right:after {
   right: 13px;
   left: auto;
 }
 
+.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
+.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
+  right: 100%;
+  left: auto;
+  margin-right: -1px;
+  margin-left: 0;
+  -webkit-border-radius: 6px 0 6px 6px;
+     -moz-border-radius: 6px 0 6px 6px;
+          border-radius: 6px 0 6px 6px;
+}
+
 .navbar-inverse {
   color: #999999;
 }

docs/assets/css/docs.css

@@ -133,9 +133,14 @@ hr.soften {
 
 /* Download button */
 @-webkit-keyframes downloadButton {
-  from { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
-  50% {  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 25px rgba(0,68,204,.9); }
-  to {   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
+  from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
+  50% {  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 25px rgba(0,68,204,.9); }
+  to {   box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
+}
+@-moz-keyframes downloadButton {
+  from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
+  50% {  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 25px rgba(0,68,204,.9); }
+  to {   box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
 }
 .masthead .btn {
   padding: 14px 24px;
@@ -150,8 +155,11 @@ hr.soften {
      -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.01);
           box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.01);
   -webkit-animation-name: downloadButton;
+     -moz-animation-name: downloadButton;
   -webkit-animation-duration: 1.5s;
+     -moz-animation-duration: 1.5s;
   -webkit-animation-iteration-count: infinite;
+     -moz-animation-iteration-count: infinite;
   -webkit-transition: none;
      -moz-transition: none;
           transition: none;

docs/base-css.html

@@ -1257,7 +1257,7 @@ For example, <code>section</code> should be wrapped as inline.
             <span class="input-xlarge uneditable-input">Some value here</span>
           </form>
 <pre class="prettyprint linenums">
-  &lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
+&lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
 </pre>
 
           <h3>Form actions</h3>

docs/customize.html

@@ -190,12 +190,16 @@
                   <input type="checkbox" checked="true" value="bootstrap-tooltip.js">
                   Tooltips
                 </label>
-              </div><!-- /span -->
-              <div class="span3">
                 <label class="checkbox">
                   <input type="checkbox" checked="true" value="bootstrap-popover.js">
                   Popovers <small>(requires Tooltips)</small>
                 </label>
+              </div><!-- /span -->
+              <div class="span3">
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-affix.js">
+                  Affix
+                </label>
                 <label class="checkbox">
                   <input type="checkbox" checked="true" value="bootstrap-alert.js">
                   Alert messages
@@ -294,11 +298,11 @@
                 <label>@monoFontFamily</label>
                 <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
                 <label>@baseFontSize</label>
-                <input type="text" class="span3" placeholder="13px">
+                <input type="text" class="span3" placeholder="14px">
                 <label>@baseFontFamily</label>
                 <input type="text" class="span3" placeholder="@sansFontFamily">
                 <label>@baseLineHeight</label>
-                <input type="text" class="span3" placeholder="18px">
+                <input type="text" class="span3" placeholder="20px">
                 <label>@altFontFamily</label>
                 <input type="text" class="span3" placeholder="@serifFontFamily">
                 <label>@headingsFontFamily</label>

docs/examples/hero.html

@@ -46,6 +46,18 @@
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#contact">Contact</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="nav-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
             </ul>
             <form class="navbar-form pull-right">
               <input class="span2" type="text" placeholder="Email">

docs/index.html

@@ -86,7 +86,7 @@
   <div class="container">
     <ul class="bs-docs-social-buttons">
       <li>
-        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
+        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
       </li>
       <li>
         <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>

docs/javascript.html

@@ -74,7 +74,7 @@
 <header class="jumbotron subhead" id="overview">
   <div class="container">
     <h1>JavaScript for Bootstrap</h1>
-    <p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom jQuery plugins.
+    <p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.
   </div>
 </header>
 

docs/templates/pages/base-css.mustache

@@ -1194,7 +1194,7 @@
             <span class="input-xlarge uneditable-input">Some value here</span>
           </form>
 <pre class="prettyprint linenums">
-  &lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
+&lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
 </pre>
 
           <h3>{{_i}}Form actions{{/i}}</h3>

docs/templates/pages/customize.mustache

@@ -119,12 +119,16 @@
                   <input type="checkbox" checked="true" value="bootstrap-tooltip.js">
                   {{_i}}Tooltips{{/i}}
                 </label>
-              </div><!-- /span -->
-              <div class="span3">
                 <label class="checkbox">
                   <input type="checkbox" checked="true" value="bootstrap-popover.js">
                   {{_i}}Popovers <small>(requires Tooltips)</small>{{/i}}
                 </label>
+              </div><!-- /span -->
+              <div class="span3">
+                <label class="checkbox">
+                  <input type="checkbox" checked="true" value="bootstrap-affix.js">
+                  {{_i}}Affix{{/i}}
+                </label>
                 <label class="checkbox">
                   <input type="checkbox" checked="true" value="bootstrap-alert.js">
                   {{_i}}Alert messages{{/i}}
@@ -223,11 +227,11 @@
                 <label>@monoFontFamily</label>
                 <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
                 <label>@baseFontSize</label>
-                <input type="text" class="span3" placeholder="13px">
+                <input type="text" class="span3" placeholder="14px">
                 <label>@baseFontFamily</label>
                 <input type="text" class="span3" placeholder="@sansFontFamily">
                 <label>@baseLineHeight</label>
-                <input type="text" class="span3" placeholder="18px">
+                <input type="text" class="span3" placeholder="20px">
                 <label>@altFontFamily</label>
                 <input type="text" class="span3" placeholder="@serifFontFamily">
                 <label>@headingsFontFamily</label>

docs/templates/pages/index.mustache

@@ -15,7 +15,7 @@
   <div class="container">
     <ul class="bs-docs-social-buttons">
       <li>
-        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
+        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
       </li>
       <li>
         <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>

docs/templates/pages/javascript.mustache

@@ -3,7 +3,7 @@
 <header class="jumbotron subhead" id="overview">
   <div class="container">
     <h1>{{_i}}JavaScript for Bootstrap{{/i}}</h1>
-    <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom jQuery plugins.{{/i}}
+    <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.{{/i}}
   </div>
 </header>
 

less/buttons.less

@@ -170,8 +170,9 @@ input[type="submit"].btn {
   }
 
   // IE7 has some default padding on button controls
-  *padding-top: 2px;
-  *padding-bottom: 2px;
+  *padding-top: 3px;
+  *padding-bottom: 3px;
+
   &.btn-large {
     *padding-top: 7px;
     *padding-bottom: 7px;

less/component-animations.less

@@ -15,6 +15,7 @@
   position: relative;
   height: 0;
   overflow: hidden;
+  overflow: visible \9;
   .transition(height .35s ease);
   &.in {
     height: auto;

less/forms.less

@@ -132,8 +132,9 @@ input[type="color"],
 // Position radios and checkboxes better
 input[type="radio"],
 input[type="checkbox"] {
-  margin: 4px 0;
+  margin: 4px 0 0;
   *margin-top: 0; /* IE7 */
+  margin-top: 1px \9; /* IE8-9 */
   line-height: normal;
   cursor: pointer;
 }
@@ -151,9 +152,9 @@ input[type="checkbox"] {
 // Set the height of select and file controls to match text inputs
 select,
 input[type="file"] {
-  height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+  height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
-  line-height: 28px;
+  line-height: 30px;
 }
 
 // Make select elements obey height by applying a border

less/mixins.less

@@ -154,11 +154,12 @@
 .input-block-level {
   display: block;
   width: 100%;
-  min-height: 28px;        // Make inputs at least the height of their button counterpart
+  min-height: 30px;        // Make inputs at least the height of their button counterpart
   .box-sizing(border-box); // Makes inputs behave like true block-level elements
 }
 
 
+
 // Mixin for form field states
 .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
   // Set the text color

less/navbar.less

@@ -47,9 +47,7 @@
   float: left;
   display: block;
   // Vertically center the text given @navbarHeight
-  @elementHeight: 20px;
-  @heightDifference: @navbarHeight - @elementHeight;
-  padding: ((@heightDifference / 2) - 2) 20px ((@heightDifference / 2) + 2);
+  padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
   margin-left: -20px; // negative indent to left-align the text down the page
   font-size: 20px;
   font-weight: 200;
@@ -153,6 +151,9 @@
   left: 0;
   z-index: @zindexFixedNavbar;
   margin-bottom: 0; // remove 18px margin for static navbar
+  .navbar-inner {
+    border: 0;
+  }
 }
 .navbar-fixed-top .navbar-inner,
 .navbar-fixed-bottom .navbar-inner {
@@ -161,6 +162,7 @@
   .border-radius(0);
 }
 
+// Reset container width
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
   #grid > .core > .span(@gridColumns);
@@ -170,7 +172,6 @@
 .navbar-fixed-top {
   top: 0;
   .navbar-inner {
-    border-width: 0 0 1px;
     .box-shadow(0 1px 10px rgba(0,0,0,.1));
   }
 }
@@ -179,7 +180,6 @@
 .navbar-fixed-bottom {
   bottom: 0;
   .navbar-inner {
-    border-width: 1px 0 0;
     .box-shadow(0 -1px 10px rgba(0,0,0,.1));
   }
 }
@@ -207,8 +207,7 @@
 .navbar .nav > li > a {
   float: none;
   // Vertically center the text given @navbarHeight
-  @elementHeight: 20px;
-  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2);
+  padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
   color: @navbarLinkColor;
   text-decoration: none;
   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
@@ -266,7 +265,7 @@
 // --------------
 
 // Menu position and menu carets
-.navbar .dropdown-menu {
+.navbar .nav > li > .dropdown-menu {
   &:before {
     content: '';
     display: inline-block;
@@ -290,7 +289,7 @@
   }
 }
 // Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .dropdown-menu {
+.navbar-fixed-bottom .nav > li > .dropdown-menu {
   &:before {
     border-top: 7px solid #ccc;
     border-top-color: @dropdownBorder;
@@ -325,8 +324,8 @@
 }
 
 // Right aligned menus need alt position
-.navbar .pull-right .dropdown-menu,
-.navbar .dropdown-menu.pull-right {
+.navbar .pull-right > li > .dropdown-menu,
+.navbar .nav > li > .dropdown-menu.pull-right {
   left: auto;
   right: 0;
   &:before {
@@ -337,6 +336,13 @@
     left: auto;
     right: 13px;
   }
+  .dropdown-menu {
+    left: auto;
+    right: 100%;
+    margin-left: 0;
+    margin-right: -1px;
+    .border-radius(6px 0 6px 6px);
+  }
 }
 
 

less/tables.less

@@ -159,10 +159,12 @@ table {
 // ------------
 // Placed here since it has to come after the potential zebra striping
 .table-hover {
+  tbody {
     tr:hover td,
     tr:hover th {
       background-color: @tableBackgroundHover;
     }
+  }
 }
 
 

less/thumbnails.less

@@ -27,7 +27,7 @@
 .thumbnail {
   display: block;
   padding: 4px;
-  line-height: 20px;
+  line-height: @baseLineHeight;
   border: 1px solid #ddd;
   .border-radius(4px);
   .box-shadow(0 1px 3px rgba(0,0,0,.055));