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

Conflicts:
	bootstrap.css

Makefile

@@ -42,7 +42,7 @@ watch:
 	  echo "Watching less files..."; \
 	  watchr -e "watch('lib/.*\.less') { system 'make' }"; \
 	else \
-		echo "You must have the watchr installed in order to watch Bootstrap less files."; \
+		echo "You must have the watchr installed in order to watch Bootstrap Less files."; \
 		echo "You can install it by running: gem install watchr"; \
 	fi
 

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 Dec 25 21:24:32 PST 2011
+ * Date: Mon Jan  2 16:04:30 PST 2012
  */
 html, body {
   margin: 0;
@@ -491,7 +491,7 @@ address {
 }
 code, pre {
   padding: 0 3px 2px;
-  font-family: "Menlo", Monaco, Courier New, monospace;
+  font-family: Menlo, Monaco, Courier New, monospace;
   font-size: 12px;
   color: #404040;
   -webkit-border-radius: 3px;
@@ -602,8 +602,9 @@ select, input[type=file] {
 }
 select {
   background-color: #ffffff;
+  vertical-align: middle;
 }
-select[multiple] {
+select[multiple], select[size] {
   height: inherit;
 }
 input[type=image] {
@@ -904,23 +905,20 @@ textarea[readonly] {
   display: block;
   max-width: 600px;
 }
-.inline-inputs {
-  color: #808080;
-}
-.inline-inputs span, .inline-inputs input {
-  display: inline-block;
-}
-.inline-inputs input.mini {
-  width: 60px;
-}
-.inline-inputs input.small {
-  width: 90px;
+.input-prepend, .input-append {
+  zoom: 1;
 }
-.inline-inputs span {
-  padding: 0 2px 0 1px;
+.input-prepend:before,
+.input-append:before,
+.input-prepend:after,
+.input-append:after {
+  display: table;
+  *display: inline;
+  content: "";
+  zoom: 1;
 }
-.input-prepend, .input-append {
-  overflow: hidden;
+.input-prepend:after, .input-append:after {
+  clear: both;
 }
 .input-prepend input, .input-append input {
   -webkit-border-radius: 0 3px 3px 0;
@@ -928,8 +926,6 @@ textarea[readonly] {
   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;
@@ -1004,7 +1000,7 @@ th, td {
   padding: 8px;
   line-height: 18px;
   text-align: left;
-  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
 }
 th {
   font-weight: bold;
@@ -1013,9 +1009,6 @@ th {
 td {
   vertical-align: top;
 }
-tbody tr:last-child th, tbody tr:last-child td {
-  border-bottom: 0;
-}
 .condensed-table th, .condensed-table td {
   padding: 4px 5px;
 }
@@ -1206,10 +1199,6 @@ table {
   -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 a {
-  color: #bfbfbf;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
 .navbar .brand a:hover, .navbar ul .active > a {
   color: #ffffff;
   text-decoration: none;
@@ -1234,6 +1223,9 @@ table {
   color: #ffffff;
   background-color: transparent;
 }
+.navbar .btn {
+  margin-top: 5px;
+}
 .navbar-search {
   position: relative;
   float: left;
@@ -1315,7 +1307,9 @@ table {
   float: none;
   padding: 10px 10px 11px;
   line-height: 19px;
+  color: #bfbfbf;
   text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 .nav a:hover {
   color: #ffffff;
@@ -1383,104 +1377,6 @@ table {
 .topbar ul .dropdown-menu li a {
   padding: 4px 15px;
 }
-.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;
-}
 .hero-unit {
   padding: 60px;
   margin-bottom: 30px;
@@ -1732,6 +1628,23 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-border-radius-bottomright: 4px;
   border-bottom-right-radius: 4px;
 }
+.btn-group .btn.large:first-child {
+  margin-left: 0;
+  -webkit-border-top-left-radius: 6px;
+  -moz-border-radius-topleft: 6px;
+  border-top-left-radius: 6px;
+  -webkit-border-bottom-left-radius: 6px;
+  -moz-border-radius-bottomleft: 6px;
+  border-bottom-left-radius: 6px;
+}
+.btn-group .btn.large:last-child {
+  -webkit-border-top-right-radius: 6px;
+  -moz-border-radius-topright: 6px;
+  border-top-right-radius: 6px;
+  -webkit-border-bottom-right-radius: 6px;
+  -moz-border-radius-bottomright: 6px;
+  border-bottom-right-radius: 6px;
+}
 .btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active {
   z-index: 2;
 }
@@ -2327,7 +2240,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   margin: 18px 0;
 }
 .pagination ul {
-  float: left;
+  display: inline-block;
+  *display: inline;
+  /* IE7 inline-block hack */
+
+  *zoom: 1;
   margin: 0;
   border: 1px solid #ddd;
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -2363,6 +2280,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .pagination .next a {
   border: 0;
 }
+.pagination.centered {
+  text-align: center;
+}
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -2694,6 +2614,16 @@ a.thumbnail:hover {
   .horizontal-form .form-actions {
     padding-left: 0;
   }
+  .modal {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    width: auto;
+  }
+  .modal .close {
+    padding: 10px;
+  }
 }
 @media (max-width: 768px) {
   .container {
@@ -2703,7 +2633,7 @@ a.thumbnail:hover {
   .row {
     margin-left: 0;
   }
-  [class*="span"] {
+  .row > [class*="span"] {
     float: none;
     display: block;
     width: auto;

docs/assets/css/docs.css

@@ -22,6 +22,7 @@ body {
 body > .navbar-fixed .brand {
   padding-right: 0;
   padding-left: 0;
+  margin-left: 20px;
   float: right;
   font-weight: bold;
   color: #000;

docs/base-css.html

@@ -646,25 +646,24 @@
       <tr>
         <td>1</td>
         <td colspan="2">Some One</td>
-        <td>English</td>
+        <td>HTML</td>
       </tr>
       <tr>
         <td>2</td>
         <td>Joe</td>
         <td>Sixpack</td>
-        <td>English</td>
+        <td rowspan="2">Javascript</td>
       </tr>
       </tr>
         <td>3</td>
         <td>Joe</td>
         <td>Sixpack</td>
-        <td>English</td>
       </tr>
       <tr>
         <td>3</td>
         <td>Stu</td>
         <td>Dent</td>
-        <td>Code</td>
+        <td>CSS</td>
       </tr>
     </tbody>
   </table>
@@ -894,7 +893,17 @@ Form states
               <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>
+            <p class="help-block">Here's some help text</p>
+          </div>
+        </fieldset>
+        <fieldset class="control-group">
+          <label class="control-label" for="appendedInput">Appended text</label>
+          <div class="controls">
+            <div class="input-append">
+              <input class="input-small" id="appendedInput" name="appendedInput" size="16" type="text">
+              <span class="add-on">.00</span>
+            </div>
+            <p class="help-block">Here's more help text</p>
           </div>
         </fieldset>
         <fieldset class="control-group">

docs/components.html

@@ -716,7 +716,7 @@
       <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript &raquo;</a></p>
     </div>
     <div class="span9">
-      <div class="well" style="background-color: #888; border: none; padding: 40px;">
+      <div class="well" style="background-color: #888; border: none; ">
         <!-- Modal -->
         <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
           <div class="modal-header">

lib/forms.less

@@ -93,13 +93,15 @@ input[type=file] {
   line-height: @baseLineHeight * 1.5;
 }
 
-// Chrome on Linux needs background color
+// Chrome on Linux and Mobile Safari need background-color
 select {
   background-color: @white;
+  vertical-align: middle;
 }
 
 // Make multiple select elements height not fixed
-select[multiple] {
+select[multiple],
+select[size] {
   height: inherit;
 }
 
@@ -218,7 +220,7 @@ textarea[readonly] {
     border-color: @borderColor;
     &:focus {
       border-color: darken(@borderColor, 10%);
-      .box-shadow(0 0 6px lighten(@borderColor, 20%);
+      .box-shadow(0 0 6px lighten(@borderColor, 20%));
     }
   }
   // Give a small background color for input-prepend/-append
@@ -298,40 +300,17 @@ textarea[readonly] {
 
 
 
-// INLINE FIELDS
-// -------------
-
-.inline-inputs {
-  color: @gray;
-  span, input {
-    display: inline-block;
-  }
-  input.mini {
-    width: 60px;
-  }
-  input.small {
-    width: 90px;
-  }
-  span {
-    padding: 0 2px 0 1px;
-  }
-}
-
-
-
 // INPUT GROUPS
 // ------------
 
 // Allow us to put symbols and text within the input field for a cleaner look
 .input-prepend,
 .input-append {
-  overflow: hidden;
+  .clearfix(); // Clear the float to prevent wrapping
   input {
     .border-radius(0 3px 3px 0);
   }
   .add-on {
-    position: relative;
-    z-index: 2;
     float: left;
     display: block;
     width: auto;

lib/mixins.less

@@ -25,6 +25,12 @@
   margin-right: auto;
 }
 
+// IE7 inline-block
+.ie7-inline-block() {
+  *display: inline; /* IE7 inline-block hack */
+  *zoom: 1;
+}
+
 // Sizing shortcuts
 .size(@height: 5px, @width: 5px) {
   width: @width;
@@ -48,13 +54,13 @@
 #font {
   #family {
     .serif() {
-      font-family: "Georgia", Times New Roman, Times, serif;
+      font-family: Georgia, "Times New Roman", Times, serif;
     }
     .sans-serif() {
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
     .monospace() {
-      font-family: "Menlo", Monaco, Courier New, monospace;
+      font-family: Menlo, Monaco, Courier New, monospace;
     }
   }
   .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {

lib/modals.less

@@ -13,7 +13,8 @@
   &.fade { opacity: 0; }
 }
 
-.modal-backdrop, .modal-backdrop.fade.in {
+.modal-backdrop,
+.modal-backdrop.fade.in {
   .opacity(80);
 }
 

lib/pagination.less

@@ -5,7 +5,8 @@
   height: @baseLineHeight * 2;
   margin: @baseLineHeight 0;
   ul {
-    float: left;
+    display: inline-block;
+    .ie7-inline-block();
     margin: 0;
     border: 1px solid #ddd;
     border: 1px solid rgba(0,0,0,.15);
@@ -37,4 +38,9 @@
   .next a {
     border: 0;
   }
+
+  // Centered
+  &.centered {
+    text-align: center;
+  }
 }

lib/patterns.less

@@ -24,11 +24,6 @@
 }
 // Text and links
 .navbar {
-  // Links get text-shadow
-  a {
-    color: @grayLight;
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  }
   // Hover and active states
   .brand a:hover,
   ul .active > a {
@@ -57,6 +52,10 @@
       background-color: transparent;
     }
   }
+  // Buttons in navbar
+  .btn {
+    margin-top: 5px; // make buttons vertically centered in navbar
+  }
 }
 
 // Navbar search
@@ -146,7 +145,9 @@
     float: none;
     padding: 10px 10px 11px;
     line-height: 19px;
+    color: @grayLight;
     text-decoration: none;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
     &:hover {
       color: @white;
       text-decoration: none;
@@ -213,101 +214,6 @@
   padding: 4px 15px;
 }
 
-// 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;
-  }
-}
-
 
 
 
@@ -493,6 +399,7 @@ input[type=submit].btn {
   float: left;
   margin-left: -1px;
   .border-radius(0);
+  // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
   &:first-child {
     margin-left: 0;
        -webkit-border-top-left-radius: 4px;
@@ -510,6 +417,24 @@ input[type=submit].btn {
         -moz-border-radius-bottomright: 4px;
             border-bottom-right-radius: 4px;
   }
+  // Reset corners for large buttons
+  &.large:first-child {
+    margin-left: 0;
+       -webkit-border-top-left-radius: 6px;
+           -moz-border-radius-topleft: 6px;
+               border-top-left-radius: 6px;
+    -webkit-border-bottom-left-radius: 6px;
+        -moz-border-radius-bottomleft: 6px;
+            border-bottom-left-radius: 6px;
+  }
+  &.large:last-child {
+       -webkit-border-top-right-radius: 6px;
+           -moz-border-radius-topright: 6px;
+               border-top-right-radius: 6px;
+    -webkit-border-bottom-right-radius: 6px;
+        -moz-border-radius-bottomright: 6px;
+            border-bottom-right-radius: 6px;
+  }
 }
 // On hover/focus/active, bring the proper btn to front
 .btn-group .btn:hover,

lib/print.less

+/*!
+ * Bootstrap @VERSION for Print
+ *
+ * Copyright 2011 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ * Date: @DATE
+ */
+
+
+// HIDE UNECESSARY COMPONENTS
+// --------------------------
+
+.navbar-fixed {
+  display: none;
+}
\ No newline at end of file

lib/responsive.less

@@ -43,6 +43,18 @@
   .horizontal-form .form-actions {
     padding-left: 0;
   }
+
+  // Modals
+  .modal {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    width: auto;
+    .close {
+      padding: 10px;
+    }
+  }
 }
 
 
@@ -60,7 +72,7 @@
     margin-left: 0;
   }
   // Make all columns even
-  [class*="span"] {
+  .row > [class*="span"] {
     float: none;
     display: block;
     width: auto;

lib/tables.less

@@ -17,7 +17,7 @@ td {
   padding: 8px;
   line-height: @baseLineHeight;
   text-align: left;
-  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
 }
 th {
   font-weight: bold;
@@ -26,10 +26,6 @@ th {
 td {
   vertical-align: top;
 }
-tbody tr:last-child th,
-tbody tr:last-child td {
-  border-bottom: 0;
-}
 
 
 // CONDENSED TABLE W/ HALF PADDING