Merge branch '2.1.2-wip' into exploratory

Conflicts:
	docs/assets/css/bootstrap-responsive.css
	docs/assets/css/bootstrap.css
	docs/components.html
	docs/templates/pages/components.mustache
	less/labels-badges.less
	less/navbar.less
	less/tables.less

docs/assets/css/bootstrap.css

@@ -1198,6 +1198,11 @@ textarea[class*="span"],
   float: left;
 }
 
+.controls-row .checkbox[class*="span"],
+.controls-row .radio[class*="span"] {
+  padding-top: 5px;
+}
+
 input[disabled],
 select[disabled],
 textarea[disabled],
@@ -2643,6 +2648,18 @@ table [class*=span] {
   border-left-color: #ffffff;
 }
 
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+     -moz-border-radius: 6px 0 6px 6px;
+          border-radius: 6px 0 6px 6px;
+}
+
 .dropdown .dropdown-menu .nav-header {
   padding-right: 20px;
   padding-left: 20px;
@@ -3386,41 +3403,7 @@ input[type="button"].btn-block {
   margin-top: 9px;
 }
 
-<<<<<<< HEAD
 .nav .divider {
-=======
-.nav-list {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-bottom: 0;
-}
-
-.nav-list > li > a,
-.nav-list .nav-header {
-  margin-right: -15px;
-  margin-left: -15px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-
-.nav-list > li > a {
-  padding: 3px 15px;
-}
-
-.nav-list > .active > a,
-.nav-list > .active > a:hover {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  background-color: #0088cc;
-}
-
-.nav-list [class^="icon-"],
-.nav-list [class*=" icon-"] {
-  margin-right: 2px;
-}
-
-.nav-list .divider {
-  *width: 100%;
->>>>>>> 2.1.2-wip
   height: 1px;
   margin: 9px 1px;
   overflow: hidden;
@@ -4758,6 +4741,8 @@ a.thumbnail:hover {
 
 .label,
 .badge {
+  display: inline-block;
+  padding: 2px 4px;
   font-size: 11.844px;
   font-weight: bold;
   line-height: 14px;
@@ -4769,12 +4754,12 @@ a.thumbnail:hover {
 }
 
 .label {
-  padding: 1px 4px 2px;
   border-radius: 3px;
 }
 
 .badge {
-  padding: 1px 9px 2px;
+  padding-right: 9px;
+  padding-left: 9px;
   border-radius: 9px;
 }
 
@@ -5772,8 +5757,11 @@ a.badge:hover {
     width: auto;
     margin: 0;
   }
+  .modal.fade {
+    top: -100px;
+  }
   .modal.fade.in {
-    top: auto;
+    top: 20px;
   }
 }
 

docs/components.html

@@ -163,7 +163,10 @@
 
           <h3>Sub menus on dropdowns</h3>
           <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
-          <div class="bs-docs-example">
+          <div class="bs-docs-example" style="min-height: 180px;">
+
+            <div class="pull-left">
+              <p class="muted">Default</p>
               <div class="dropdown clearfix">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                   <li><a tabindex="-1" href="#">Action</a></li>
@@ -181,7 +184,12 @@
                     </ul>
                   </li>
                 </ul>
-              <div class="dropup" style="float: left; margin-left: 20px;">
+              </div>
+            </div>
+
+            <div class="pull-left" style="margin-left: 20px;">
+              <p class="muted">Dropup</p>
+              <div class="dropup">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                   <li><a tabindex="-1" href="#">Action</a></li>
                   <li><a tabindex="-1" href="#">Another action</a></li>
@@ -200,6 +208,29 @@
                 </ul>
               </div>
             </div>
+
+            <div class="pull-left" style="margin-left: 20px;">
+              <p class="muted">Left submenu</p>
+              <div class="dropdown">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                  <li><a tabindex="-1" href="#">Action</a></li>
+                  <li><a tabindex="-1" href="#">Another action</a></li>
+                  <li><a tabindex="-1" href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu pull-left">
+                    <a tabindex="-1" href="#">More options</a>
+                    <ul class="dropdown-menu">
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
           </div>
 <pre class="prettyprint linenums">
 &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
@@ -1049,13 +1080,13 @@
           <div class="bs-docs-example">
             <div class="navbar">
               <div class="container">
-                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                 </a>
                 <a class="brand" href="#">Title</a>
-                <div class="nav-collapse collapse">
+                <div class="nav-collapse collapse navbar-responsive-collapse">
                   <ul class="nav">
                     <li class="active"><a href="#">Home</a></li>
                     <li><a href="#">Link</a></li>
@@ -1092,6 +1123,7 @@
                   </ul>
                 </div><!-- /.nav-collapse -->
               </div>
+
             </div><!-- /navbar -->
           </div>
 <pre class="prettyprint linenums">
@@ -1129,13 +1161,13 @@
           <div class="bs-docs-example">
             <div class="navbar navbar-inverse" style="position: static;">
               <div class="container">
-                <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
+                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                 </a>
                 <a class="brand" href="#">Title</a>
-                <div class="nav-collapse collapse">
+                <div class="nav-collapse collapse navbar-inverse-collapse">
                   <ul class="nav">
                     <li class="active"><a href="#">Home</a></li>
                     <li><a href="#">Link</a></li>

docs/javascript.html

@@ -222,7 +222,7 @@ $('#myModal').on('show', function (e) {
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
 
               <h4>Popover in a modal</h4>
-              <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
+              <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
 
               <h4>Tooltips in a modal</h4>
               <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

docs/templates/pages/components.mustache

@@ -94,7 +94,10 @@
 
           <h3>{{_i}}Sub menus on dropdowns{{/i}}</h3>
           <p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p>
-          <div class="bs-docs-example">
+          <div class="bs-docs-example" style="min-height: 180px;">
+
+            <div class="pull-left">
+              <p class="muted">Default</p>
               <div class="dropdown clearfix">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                   <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
@@ -112,7 +115,12 @@
                     </ul>
                   </li>
                 </ul>
-              <div class="dropup" style="float: left; margin-left: 20px;">
+              </div>
+            </div>{{! /.pull-left }}
+
+            <div class="pull-left" style="margin-left: 20px;">
+              <p class="muted">Dropup</p>
+              <div class="dropup">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                   <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
                   <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
@@ -130,7 +138,30 @@
                   </li>
                 </ul>
               </div>
+            </div>{{! /.pull-left }}
+
+            <div class="pull-left" style="margin-left: 20px;">
+              <p class="muted">Left submenu</p>
+              <div class="dropdown">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                  <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
+                  <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
+                  <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu pull-left">
+                    <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
+                    <ul class="dropdown-menu">
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                    </ul>
+                  </li>
+                </ul>
               </div>
+            </div>{{! /.pull-left }}
+
           </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
@@ -980,13 +1011,13 @@
           <div class="bs-docs-example">
             <div class="navbar">
               <div class="container">
-                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                 </a>
                 <a class="brand" href="#">{{_i}}Title{{/i}}</a>
-                <div class="nav-collapse collapse">
+                <div class="nav-collapse collapse navbar-responsive-collapse">
                   <ul class="nav">
                     <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
                     <li><a href="#">{{_i}}Link{{/i}}</a></li>
@@ -1023,6 +1054,7 @@
                   </ul>
                 </div><!-- /.nav-collapse -->
               </div>
+
             </div><!-- /navbar -->
           </div>{{! /example }}
 <pre class="prettyprint linenums">
@@ -1060,13 +1092,13 @@
           <div class="bs-docs-example">
             <div class="navbar navbar-inverse" style="position: static;">
               <div class="container">
-                <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
+                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                 </a>
                 <a class="brand" href="#">{{_i}}Title{{/i}}</a>
-                <div class="nav-collapse collapse">
+                <div class="nav-collapse collapse navbar-inverse-collapse">
                   <ul class="nav">
                     <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
                     <li><a href="#">{{_i}}Link{{/i}}</a></li>

docs/templates/pages/javascript.mustache

@@ -154,7 +154,7 @@ $('#myModal').on('show', function (e) {
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
 
               <h4>{{_i}}Popover in a modal{{/i}}</h4>
-              <p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
+              <p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.{{/i}}</p>
 
               <h4>{{_i}}Tooltips in a modal{{/i}}</h4>
               <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>

less/dropdowns.less

@@ -151,7 +151,6 @@
 .dropdown-submenu {
   position: relative;
 }
-
 // Default dropdowns
 .dropdown-submenu > .dropdown-menu {
   top: 0;
@@ -195,6 +194,21 @@
   border-left-color: @dropdownLinkColorHover;
 }
 
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+  // Undo the float
+  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+  float: none;
+
+  // Positioning the submenu
+  > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+       -moz-border-radius: 6px 0 6px 6px;
+            border-radius: 6px 0 6px 6px;
+  }
+}
 
 // Tweak nav headers
 // -----------------

less/forms.less

@@ -334,6 +334,11 @@ textarea[class*="span"],
 .controls-row [class*="span"] {
   float: left;
 }
+// Explicity set top padding on all checkboxes/radios, not just first-child
+.controls-row .checkbox[class*="span"],
+.controls-row .radio[class*="span"] {
+  padding-top: 5px;
+}
 
 
 

less/labels-badges.less

@@ -6,6 +6,8 @@
 // Base classes
 .label,
 .badge {
+  display: inline-block;
+  padding: 2px 4px;
   font-size: @baseFontSize * .846;
   font-weight: bold;
   line-height: 14px; // ensure proper line-height if floated
@@ -17,11 +19,11 @@
 }
 // Set unique padding and border-radii
 .label {
-  padding: 1px 4px 2px;
   border-radius: 3px;
 }
 .badge {
-  padding: 1px 9px 2px;
+  padding-left: 9px;
+  padding-right: 9px;
   border-radius: 9px;
 }
 

less/mixins.less

@@ -261,6 +261,7 @@
       -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
        -o-transform: skew(@x, @y);
           transform: skew(@x, @y);
+  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
 }
 .translate3d(@x, @y, @z) {
   -webkit-transform: translate3d(@x, @y, @z);

less/responsive-767px-max.less

@@ -83,7 +83,8 @@
     right: 20px;
     width: auto;
     margin: 0;
-    &.fade.in { top: auto; }
+    &.fade  { top: -100px; }
+    &.fade.in { top: 20px; }
   }
 
 }

less/tables.less

@@ -178,8 +178,6 @@ table [class*=span] {
   margin-left: 0; // undo default grid column styles
 }
 
-
-
 // TABLE BACKGROUNDS
 // -----------------
 // Exact selectors below required to override .table-striped