Merge branch '2.2.2-wip' into exploratory

Conflicts:
	docs/assets/css/bootstrap.css
	docs/components.html
	docs/templates/pages/components.mustache
	less/alerts.less
	less/button-groups.less
	less/buttons.less
	less/tests/css-tests.html

10 files changed, 145 insertions, 50 deletions

diff --git a/less/alerts.less b/less/alerts.less
index 977d960b6..1425d0652 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -13,6 +13,10 @@
   background-color: @warningBackground;
   border: 1px solid @warningBorder;
   border-radius: @baseBorderRadius;
+}
+.alert,
+.alert h4 {
+  // Specified for the h4 to prevent conflicts of changing @headingsColor
   color: @warningText;
 }
 .alert h4 {
diff --git a/less/button-groups.less b/less/button-groups.less
index 7b7c779ae..b6913b13c 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -22,9 +22,9 @@
   font-size: 0; // Hack to remove whitespace that results from using inline-block
   margin-top: @baseLineHeight / 2;
   margin-bottom: @baseLineHeight / 2;
-  .btn + .btn,
-  .btn-group + .btn,
-  .btn + .btn-group {
+  > .btn + .btn,
+  > .btn-group + .btn,
+  > .btn + .btn-group {
     margin-left: 5px;
   }
 }
@@ -38,19 +38,20 @@
   margin-left: -1px;
 }
 .btn-group > .btn,
-.btn-group > .dropdown-menu {
+.btn-group > .dropdown-menu,
+.btn-group > .popover {
   font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
 }
 
 // Reset fonts for other sizes
 .btn-group > .btn-mini {
-  font-size: 11px;
+  font-size: @fontSizeMini;
 }
 .btn-group > .btn-small {
-  font-size: 12px;
+  font-size: @fontSizeSmall;
 }
 .btn-group > .btn-large {
-  font-size: 16px;
+  font-size: @fontSizeLarge;
 }
 
 // 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
@@ -189,13 +190,13 @@
 .btn-group-vertical {
   display: inline-block; // Make buttons only take up the width they need
 }
-.btn-group-vertical .btn {
+.btn-group-vertical > .btn {
   display: block;
   float: none;
-  width: 100%;
   border-radius: 0;
+  max-width: 100%;
 }
-.btn-group-vertical .btn + .btn {
+.btn-group-vertical > .btn + .btn {
   margin-left: 0;
   margin-top: -1px;
 }
diff --git a/less/carousel.less b/less/carousel.less
index ba0de8c9b..a7ff59f06 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -15,50 +15,50 @@
   width: 100%;
 }
 
-.carousel {
+.carousel-inner {
 
-  .item {
+  > .item {
     display: none;
     position: relative;
     .transition(.6s ease-in-out left);
   }
 
   // Account for jankitude on images
-  .item > img {
+  > .item > img {
     display: block;
     line-height: 1;
   }
 
-  .active,
-  .next,
-  .prev { display: block; }
+  > .active,
+  > .next,
+  > .prev { display: block; }
 
-  .active {
+  > .active {
     left: 0;
   }
 
-  .next,
-  .prev {
+  > .next,
+  > .prev {
     position: absolute;
     top: 0;
     width: 100%;
   }
 
-  .next {
+  > .next {
     left: 100%;
   }
-  .prev {
+  > .prev {
     left: -100%;
   }
-  .next.left,
-  .prev.right {
+  > .next.left,
+  > .prev.right {
     left: 0;
   }
 
-  .active.left {
+  > .active.left {
     left: -100%;
   }
-  .active.right {
+  > .active.right {
     left: 100%;
   }
 
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 934709d17..aad993f6f 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -107,6 +107,7 @@
   text-decoration: none;
   background-color: transparent;
   background-image: none; // Remove CSS gradient
+  .reset-filter();
   cursor: default;
 }
 
diff --git a/less/forms.less b/less/forms.less
index 33f6ded80..41da55d04 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -691,7 +691,10 @@ legend + .control-group {
   // And apply it only to .help-block instances that follow a form control
   input,
   select,
-  textarea {
+  textarea,
+  .uneditable-input,
+  .input-prepend,
+  .input-append {
     + .help-block {
       margin-top: @baseLineHeight / 2;
     }
diff --git a/less/mixins.less b/less/mixins.less
index f5edd230c..e477f7113 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -367,7 +367,7 @@
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
     background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
+    background-image: linear-gradient(top, @startColor, @endColor); // Standard, IE10
     background-repeat: repeat-x;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
   }
diff --git a/less/navbar.less b/less/navbar.less
index eb04a2071..2ed93d7f8 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -222,6 +222,7 @@
 }
 .navbar .nav .dropdown-toggle .caret {
   margin-top: 8px;
+
 }
 
 // Hover
@@ -311,6 +312,12 @@
   }
 }
 
+// Caret should match text color on hover
+.navbar .nav li.dropdown > a:hover .caret {
+  border-top-color: @navbarLinkColorActive;
+  border-bottom-color: @navbarLinkColorActive;
+}
+
 // Remove background color from open dropdown
 .navbar .nav li.dropdown.open > .dropdown-toggle,
 .navbar .nav li.dropdown.active > .dropdown-toggle,
@@ -410,6 +417,10 @@
     background-color: @navbarInverseLinkBackgroundActive;
     color: @navbarInverseLinkColorActive;
   }
+  .nav li.dropdown > a:hover .caret {
+    border-top-color: @navbarInverseLinkColorActive;
+    border-bottom-color: @navbarInverseLinkColorActive;
+  }
   .nav li.dropdown > .dropdown-toggle .caret {
     border-top-color: @navbarInverseLinkColor;
     border-bottom-color: @navbarInverseLinkColor;
diff --git a/less/navs.less b/less/navs.less
index bfdec50ed..ac3ff6aa4 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -24,6 +24,12 @@
   background-color: @grayLighter;
 }
 
+// Prevent IE8 from misplacing imgs
+// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+.nav > li > a > img {
+  max-width: none;
+}
+
 // Redeclare pull classes because of specifity
 .nav > .pull-right {
   float: right;
diff --git a/less/popovers.less b/less/popovers.less
index 256aa9451..095b81bf1 100644
--- a/less/popovers.less
+++ b/less/popovers.less
@@ -49,31 +49,101 @@
 }
 
 // Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
 .popover .arrow,
 .popover .arrow:after {
   position: absolute;
-  display: inline-block;
+  display: block;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
 }
+.popover .arrow {
+  border-width: @popoverArrowOuterWidth;
+}
 .popover .arrow:after {
+  border-width: @popoverArrowWidth;
   content: "";
-  z-index: -1;
 }
 
 .popover {
   &.top .arrow {
+    left: 50%;
+    margin-left: -@popoverArrowOuterWidth;
+    border-bottom-width: 0;
+    border-top-color: #999; // IE8 fallback
+    border-top-color: @popoverArrowOuterColor;
+    bottom: -@popoverArrowOuterWidth;
+    &:after {
+      bottom: 1px;
+      margin-left: -@popoverArrowWidth;
+      border-bottom-width: 0;
+      border-top-color: @popoverArrowColor;
+    }
+  }
+  &.right .arrow {
+    top: 50%;
+    left: -@popoverArrowOuterWidth;
+    margin-top: -@popoverArrowOuterWidth;
+    border-left-width: 0;
+    border-right-color: #999; // IE8 fallback
+    border-right-color: @popoverArrowOuterColor;
+    &:after {
+      left: 1px;
+      bottom: -@popoverArrowWidth;
+      border-left-width: 0;
+      border-right-color: @popoverArrowColor;
+    }
+  }
+  &.bottom .arrow {
+    left: 50%;
+    margin-left: -@popoverArrowOuterWidth;
+    border-top-width: 0;
+    border-bottom-color: #999; // IE8 fallback
+    border-bottom-color: @popoverArrowOuterColor;
+    top: -@popoverArrowOuterWidth;
+    &:after {
+      top: 1px;
+      margin-left: -@popoverArrowWidth;
+      border-top-width: 0;
+      border-bottom-color: @popoverArrowColor;
+    }
+  }
+
+  &.left .arrow {
+    top: 50%;
+    right: -@popoverArrowOuterWidth;
+    margin-top: -@popoverArrowOuterWidth;
+    border-right-width: 0;
+    border-left-color: #999; // IE8 fallback
+    border-left-color: @popoverArrowOuterColor;
+    &:after {
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: @popoverArrowColor;
+      bottom: -@popoverArrowWidth;
+    }
+  }
+
+
+
+/*
+  &.top .arrow {
     bottom: -@popoverArrowWidth;
     left: 50%;
     margin-left: -@popoverArrowWidth;
     border-width: @popoverArrowWidth @popoverArrowWidth 0;
-    border-top-color: @popoverArrowColor;
+    //border-top-color: @popoverArrowColor;
+    border-top-color: blue;
     &:after {
       border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
-      border-top-color: @popoverArrowOuterColor;
-      bottom: -1px;
+      //border-top-color: @popoverArrowOuterColor;
+      border-top-color: red;
+      top: -@popoverArrowWidth;
+      //bottom: -1px;
       left: -@popoverArrowOuterWidth;
     }
   }
@@ -115,5 +185,5 @@
       bottom: -@popoverArrowOuterWidth;
       right: -1px;
     }
-  }
+  }*/
 }
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 2d9725b3b..c1066741c 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -214,13 +214,13 @@
 
 <div class="row">
   <div class="span4">
-    <img src="http://placehold.it/600x600" height="200">
+    <img data-src="holder.js/600x600" height="200">
   </div>
   <div class="span4">
-    <img src="http://placehold.it/600x600">
+    <img data-src="holder.js/600x600">
   </div>
   <div class="span4">
-    <img src="http://placehold.it/600x600">
+    <img data-src="holder.js/600x600">
   </div>
 </div>
 
@@ -228,13 +228,13 @@
 
 <div class="row">
   <div class="span4">
-    <img src="http://placehold.it/600x900" style="width: 200px;">
+    <img data-src="holder.js/600x900" style="width: 200px;">
   </div>
   <div class="span4">
-    <img src="http://placehold.it/200x300">
+    <img data-src="holder.js/200x300">
   </div>
   <div class="span4">
-    <img src="http://placehold.it/600x600">
+    <img data-src="holder.js/600x600">
   </div>
 </div>
 
@@ -723,16 +723,16 @@
 <h4>Default thumbnails (no grid sizing)</h4>
 <ul class="thumbnails">
   <li class="thumbnail">
-    <img src="http://placehold.it/260x180" alt="">
+    <img data-src="holder.js/260x180" alt="">
   </li>
   <li class="thumbnail">
-    <img src="http://placehold.it/260x180" alt="">
+    <img data-src="holder.js/260x180" alt="">
   </li>
   <li class="thumbnail">
-    <img src="http://placehold.it/260x180" alt="">
+    <img data-src="holder.js/260x180" alt="">
   </li>
   <li class="thumbnail">
-    <img src="http://placehold.it/260x180" alt="">
+    <img data-src="holder.js/260x180" alt="">
   </li>
 </ul>
 
@@ -741,17 +741,17 @@
 <ul class="thumbnails">
   <li class="span3 offset3">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img data-src="holder.js/260x180" alt="">
     </a>
   </li>
   <li class="span3">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img data-src="holder.js/260x180" alt="">
     </a>
   </li>
   <li class="span3">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img data-src="holder.js/260x180" alt="">
     </a>
   </li>
 </ul>
@@ -761,23 +761,22 @@
 <ul class="thumbnails">
   <li class="span3">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img data-src="holder.js/260x180" alt="">
     </a>
   </li>
   <li class="span3 offset3">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img data-src="holder.js/260x180" alt="">
     </a>
   </li>
   <li class="span3">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img data-src="holder.js/260x180" alt="">
     </a>
   </li>
 </ul>
 
 
-
 <!-- Tabs
 ================================================== -->