Merge branch '2.1.2-wip' into box-sizing-exercise

Conflicts:
	docs/scaffolding.html
	docs/templates/pages/scaffolding.mustache

19 files changed, 147 insertions, 66 deletions

diff --git a/less/bootstrap.less b/less/bootstrap.less
index aaa3d8a6f..3055c5cc4 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v2.1.1
+ * Bootstrap v2.1.2
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
diff --git a/less/button-groups.less b/less/button-groups.less
index 7bd639aac..62e53f373 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -120,7 +120,7 @@
 .btn-group > .btn + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
-  .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+  .box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
   *padding-top: 5px;
   *padding-bottom: 5px;
 }
@@ -147,7 +147,7 @@
   // Remove the gradient and set the same inset shadow as the :active state
   .dropdown-toggle {
     background-image: none;
-    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+    .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
   }
 
   // Keep the hover's background when dropdown is open
diff --git a/less/buttons.less b/less/buttons.less
index 08ece791c..3fd1e95f5 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -24,7 +24,7 @@
   border-bottom-color: darken(@btnBorder, 10%);
   .border-radius(4px);
   .ie7-restore-left-whitespace(); // Give IE7 some love
-  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+  .box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
 
   // Hover state
   &:hover {
@@ -51,7 +51,7 @@
     background-color: darken(@white, 15%) e("\9");
     background-image: none;
     outline: 0;
-    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+    .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
   }
 
   // Disabled state
@@ -208,7 +208,8 @@ input[type="submit"].btn {
 
 // Make a button look and behave like a link
 .btn-link,
-.btn-link:active {
+.btn-link:active,
+.btn-link[disabled] {
   background-color: transparent;
   background-image: none;
   .box-shadow(none);
@@ -224,3 +225,7 @@ input[type="submit"].btn {
   text-decoration: underline;
   background-color: transparent;
 }
+.btn-link[disabled]:hover {
+  color: @grayDark;
+  text-decoration: none;
+}
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 390c37497..bed158612 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -163,6 +163,8 @@
 .dropdown-submenu {
   position: relative;
 }
+
+// Default dropdowns
 .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
@@ -176,6 +178,18 @@
   display: block;
 }
 
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  -webkit-border-radius: 5px 5px 5px 0;
+     -moz-border-radius: 5px 5px 5px 0;
+          border-radius: 5px 5px 5px 0;
+}
+
+// Caret to indicate there is a submenu
 .dropdown-submenu > a:after {
   display: block;
   content: " ";
diff --git a/less/forms.less b/less/forms.less
index e1af6766a..557f87278 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -126,7 +126,7 @@ input[type="color"],
     border-color: rgba(82,168,236,.8);
     outline: 0;
     outline: thin dotted \9; /* IE6-9 */
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
   }
 }
 
@@ -162,7 +162,7 @@ input[type="file"] {
 // Make select elements obey height by applying a border
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
-  border: 1px solid #bbb;
+  border: 1px solid @inputBorder;
   background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
 }
 
diff --git a/less/mixins.less b/less/mixins.less
index 3da17ffe6..9a0650132 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -183,10 +183,7 @@
     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
     &:focus {
       border-color: darken(@borderColor, 10%);
-      // Write out in full since the lighten() function isn't easily escaped
-      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
-         -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
-              box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
+      .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%));
     }
   }
   // Give a small background color for input-prepend/-append
@@ -251,10 +248,12 @@
 }
 
 // Drop shadows
-.box-shadow(@shadow) {
-  -webkit-box-shadow: @shadow;
-     -moz-box-shadow: @shadow;
-          box-shadow: @shadow;
+.box-shadow(@shadowA, @shadowB:X, ...){
+  // Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
+  @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
+  -webkit-box-shadow: @props;
+     -moz-box-shadow: @props;
+          box-shadow: @props;
 }
 
 // Transitions
@@ -296,7 +295,7 @@
 .skew(@x, @y) {
   -webkit-transform: skew(@x, @y);
      -moz-transform: skew(@x, @y);
-      -ms-transform: skew(@x, @y);
+      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
        -o-transform: skew(@x, @y);
           transform: skew(@x, @y);
 }
diff --git a/less/modals.less b/less/modals.less
index 81cacb7ab..a0401c4d1 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -95,4 +95,8 @@
   .btn-group .btn + .btn {
     margin-left: -1px;
   }
+  // and override it for block buttons as well
+  .btn-block + .btn-block {
+    margin-left: 0;
+  }
 }
diff --git a/less/navbar.less b/less/navbar.less
index 64e2eb7ea..3514c40e0 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -202,7 +202,7 @@
 .navbar-fixed-top,
 .navbar-static-top {
   .navbar-inner {
-    .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
+    .box-shadow(inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1));
   }
 }
 
@@ -210,7 +210,7 @@
 .navbar-fixed-bottom {
   bottom: 0;
   .navbar-inner {
-    .box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)");
+    .box-shadow(inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1));
   }
 }
 
@@ -262,9 +262,7 @@
   color: @navbarLinkColorActive;
   text-decoration: none;
   background-color: @navbarLinkBackgroundActive;
-  -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
-     -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
-          box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
+  .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
 }
 
 // Navbar button for toggling navbar items in responsive layouts
@@ -276,7 +274,7 @@
   margin-left: 5px;
   margin-right: 5px;
   .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
-  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
+  .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075));
 }
 .navbar .btn-navbar .icon-bar {
   display: block;
@@ -448,7 +446,7 @@
       color: @white;
       background-color: @navbarInverseSearchBackground;
       border-color: @navbarInverseSearchBorder;
-      .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
+      .box-shadow(inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15));
       .transition(none);
       .placeholder(@navbarInverseSearchPlaceholderColor);
 
diff --git a/less/pager.less b/less/pager.less
index a7629d3db..da2425367 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -12,28 +12,29 @@
 .pager li {
   display: inline;
 }
-.pager a,
-.pager span {
+.pager li > a,
+.pager li > span {
   display: inline-block;
   padding: 5px 14px;
   background-color: #fff;
   border: 1px solid #ddd;
   .border-radius(15px);
 }
-.pager a:hover {
+.pager li > a:hover {
   text-decoration: none;
   background-color: #f5f5f5;
 }
-.pager .next a,
-.pager .next span {
+.pager .next > a,
+.pager .next > span {
   float: right;
 }
-.pager .previous a {
+.pager .previous > a,
+.pager .previous > span {
   float: left;
 }
-.pager .disabled a,
-.pager .disabled a:hover,
-.pager .disabled span {
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > span {
   color: @grayLight;
   background-color: #fff;
   cursor: default;
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 36744d89c..0486371aa 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -66,7 +66,7 @@
   .transition(width .6s ease);
 }
 .progress .bar + .bar {
-  .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
+  .box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15));
 }
 
 // Striped bars
diff --git a/less/reset.less b/less/reset.less
index fc27e9c87..2901a85c8 100644
--- a/less/reset.less
+++ b/less/reset.less
@@ -77,8 +77,11 @@ sub {
 // -------------------------
 
 img {
-  max-width: 100%; // Make images inherently responsive
-  height: auto; // Make images inherently responsive
+  /* Responsive images (ensure images don't scale beyond their parents) */
+  max-width: 100%; /* Part 1: Set a maxium relative to the parent */
+  width: auto\9; /* IE7-8 need help adjusting responsive images */
+  height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
+
   vertical-align: middle;
   border: 0;
   -ms-interpolation-mode: bicubic;
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index 3202c1905..6e4261047 100644
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -61,14 +61,18 @@
   .row-fluid [class*="span"] {
     float: none;
     display: block;
-    width: auto;
+    width: 100%;
     margin-left: 0;
+    .box-sizing(border-box);
   }
   .span12,
   .row-fluid .span12 {
     width: 100%;
     .box-sizing(border-box);
   }
+  .row-fluid [class*="offset"]:first-child {
+		margin-left: 0;
+	}
 
   // FORM FIELDS
   // -----------
@@ -132,24 +136,26 @@
   }
 
   // Remove the horizontal form styles
-  .form-horizontal .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  // Move over all input controls and content
-  .form-horizontal .controls {
-    margin-left: 0;
-  }
-  // Move the options list down to align with labels
-  .form-horizontal .control-list {
-    padding-top: 0; // has to be padding because margin collaspes
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .form-horizontal .form-actions {
-    padding-left: 10px;
-    padding-right: 10px;
+  .form-horizontal {
+    .control-label {
+      float: none;
+      width: auto;
+      padding-top: 0;
+      text-align: left;
+    }
+    // Move over all input controls and content
+    .controls {
+      margin-left: 0;
+    }
+    // Move the options list down to align with labels
+    .control-list {
+      padding-top: 0; // has to be padding because margin collaspes
+    }
+    // Move over buttons in .form-actions to align with .controls
+    .form-actions {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
   }
 
   // Modals
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index 4ffa5a9fe..c454dd5e3 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -129,7 +129,7 @@
     margin: (@baseLineHeight / 2) 0;
     border-top: 1px solid @navbarBackground;
     border-bottom: 1px solid @navbarBackground;
-    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
+    .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1));
   }
   .navbar-inverse .nav-collapse .navbar-form,
   .navbar-inverse .nav-collapse .navbar-search {
diff --git a/less/responsive.less b/less/responsive.less
index 87b347085..e56042e4e 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.1.1
+ * Bootstrap Responsive v2.1.2
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 342dcf705..7a7496a64 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -32,20 +32,21 @@ a:hover {
 // Images
 // -------------------------
 
+// Rounded corners
 .img-rounded {
   .border-radius(6px);
 }
 
+// Add polaroid-esque trim
 .img-polaroid {
   padding: 4px;
   background-color: #fff;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.2);
-  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
-     -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
-          box-shadow: 0 1px 3px rgba(0,0,0,.1);
+  .box-shadow(0 1px 3px rgba(0,0,0,.1));
 }
 
+// Perfect circle
 .img-circle {
-  .border-radius(500px);
+  .border-radius(500px); // crank the border-radius so it works with most reasonably sized images
 }
diff --git a/less/sprites.less b/less/sprites.less
index 9bf970fa9..6d3aaef32 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -30,8 +30,6 @@
 
 /* White icons with optional class, or on hover/active states of certain elements */
 .icon-white,
-.nav-tabs > .active > a > [class^="icon-"],
-.nav-tabs > .active > a > [class*=" icon-"],
 .nav-pills > .active > a > [class^="icon-"],
 .nav-pills > .active > a > [class*=" icon-"],
 .nav-list > .active > a > [class^="icon-"],
diff --git a/less/tables.less b/less/tables.less
index 9816d8973..e5b3f3979 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -133,7 +133,7 @@ table {
   colgroup + tbody tr:first-child td:last-child {
     -webkit-border-top-right-radius: 4px;
             border-top-right-radius: 4px;
-         -moz-border-radius-topleft: 4px;
+        -moz-border-radius-topright: 4px;
   }
 
 }
@@ -180,7 +180,7 @@ table [class*=span],
 }
 
 // Change the column widths to account for td/th padding
-table {
+.table {
   .span1     { .tableColumns(1); }
   .span2     { .tableColumns(2); }
   .span3     { .tableColumns(3); }
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 471514339..c0cb1485e 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -98,6 +98,44 @@
 
 
 
+<!-- Responsive images
+================================================== -->
+
+<div class="page-header">
+  <h1>Responsive images</h1>
+</div>
+
+<div class="row">
+  <div class="span4">
+    <img src="http://placehold.it/600x600" height="200">
+  </div>
+  <div class="span4">
+    <img src="http://placehold.it/600x600">
+  </div>
+  <div class="span4">
+    <img src="http://placehold.it/600x600">
+  </div>
+</div>
+
+<br>
+
+<div class="row">
+  <div class="span4">
+    <img src="http://placehold.it/600x900" style="width: 200px;">
+  </div>
+  <div class="span4">
+    <img src="http://placehold.it/200x300">
+  </div>
+  <div class="span4">
+    <img src="http://placehold.it/600x600">
+  </div>
+</div>
+
+<br><br>
+
+
+
+
 <!-- Fluid grid
 ================================================== -->
 
diff --git a/less/type.less b/less/type.less
index 14f65f2fa..2e0f386ee 100644
--- a/less/type.less
+++ b/less/type.less
@@ -11,7 +11,7 @@ p {
 }
 .lead {
   margin-bottom: @baseLineHeight;
-  font-size: 20px;
+  font-size: @baseFontSize * 1.5;
   font-weight: 200;
   line-height: @baseLineHeight * 1.5;
 }
@@ -32,9 +32,23 @@ em {
 cite {
   font-style: normal;
 }
+
+// Utility classes
 .muted {
   color: @grayLight;
 }
+.text-warning {
+  color: @warningText;
+}
+.text-error {
+  color: @errorText;
+}
+.text-info {
+  color: @infoText;
+}
+.text-success {
+  color: @successText;
+}
 
 
 // Headings