Merge branch '2.2.2-wip' into exploratory

Conflicts:
	docs/assets/css/bootstrap.css
	less/buttons.less
	less/forms.less

docs/assets/css/bootstrap.css

@@ -686,6 +686,7 @@ pre {
 code {
   padding: 2px 4px;
   color: #d14;
+  white-space: nowrap;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
 }
@@ -1442,16 +1443,16 @@ input[type="checkbox"][readonly] {
   border-color: #3a87ad;
 }
 
-input:focus:required:invalid,
+input:focus:invalid,
-textarea:focus:required:invalid,
+textarea:focus:invalid,
-select:focus:required:invalid {
+select:focus:invalid {
   color: #b94a48;
   border-color: #ee5f5b;
 }
 
-input:focus:required:invalid:focus,
+input:focus:invalid:focus,
-textarea:focus:required:invalid:focus,
+textarea:focus:invalid:focus,
-select:focus:required:invalid:focus {
+select:focus:invalid:focus {
   border-color: #e9322d;
   -webkit-box-shadow: 0 0 6px #f8b9b7;
           box-shadow: 0 0 6px #f8b9b7;
@@ -1561,7 +1562,9 @@ select:focus:required:invalid:focus {
 .input-append .add-on,
 .input-prepend .add-on,
 .input-append .btn,
-.input-prepend .btn {
+.input-prepend .btn,
+.input-append .btn-group > .dropdown-toggle,
+.input-prepend .btn-group > .dropdown-toggle {
   vertical-align: top;
   border-radius: 0;
 }
@@ -1590,7 +1593,10 @@ select:focus:required:invalid:focus {
 
 .input-append input + .btn-group .btn,
 .input-append select + .btn-group .btn,
-.input-append .uneditable-input + .btn-group .btn {
+.input-append .uneditable-input + .btn-group .btn,
+.input-append input + .btn-group .btn:last-child,
+.input-append select + .btn-group .btn:last-child,
+.input-append .uneditable-input + .btn-group .btn:last-child {
   border-radius: 0 4px 4px 0;
 }
 
@@ -1601,7 +1607,8 @@ select:focus:required:invalid:focus {
 }
 
 .input-append .add-on:last-child,
-.input-append .btn:last-child {
+.input-append .btn:last-child,
+.input-append .btn-group:last-child > .dropdown-toggle {
   border-radius: 0 4px 4px 0;
 }
 
@@ -2798,6 +2805,7 @@ table th[class*="span"],
 }
 
 .typeahead {
+  z-index: 1051;
   margin-top: 2px;
 }
 
@@ -2926,7 +2934,6 @@ button.close {
 .btn:hover {
   color: #333333;
   text-decoration: none;
-  background-color: #e6e6e6;
   background-position: 0 -15px;
   -webkit-transition: background-position 0.1s linear;
      -moz-transition: background-position 0.1s linear;
@@ -2942,8 +2949,6 @@ button.close {
 
 .btn.active,
 .btn:active {
-  background-color: #e6e6e6;
-  background-color: #d9d9d9 \9;
   background-image: none;
   outline: 0;
   -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -2953,7 +2958,6 @@ button.close {
 .btn.disabled,
 .btn[disabled] {
   cursor: default;
-  background-color: #e6e6e6;
   background-image: none;
   opacity: 0.65;
   filter: alpha(opacity=65);

docs/base-css.html

@@ -1321,6 +1321,54 @@ For example, <code><section></code> should be wrapped as inlin
     </ul>
   </div>
 </div>
+</pre>
+
+          <h4>Segmented dropdown groups</h4>
+          <form class="bs-docs-example">
+            <div class="input-prepend">
+              <div class="btn-group">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <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><a href="#">Separated link</a></li>
+                </ul>
+              </div>
+              <input type="text">
+            </div>
+            <div class="input-append">
+              <input type="text">
+              <div class="btn-group">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <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><a href="#">Separated link</a></li>
+                </ul>
+              </div>
+            </div>
+          </form>
+<pre class="prettyprint linenums">
+&lt;form&gt;
+  &lt;div class="input-prepend"&gt;
+    &lt;div class="btn-group"&gt;...&lt;/div&gt;
+    &lt;input type="text"&gt;
+  &lt;/div&gt;
+  &lt;div class="input-append"&gt;
+    &lt;input type="text"&gt;
+    &lt;div class="btn-group"&gt;...&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
 </pre>
 
           <h4>Search form</h4>
@@ -1511,6 +1559,15 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
           </form>
 <pre class="prettyprint linenums">
 &lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
+</pre>
+
+          <h3>Invalid inputs</h3>
+          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="span3" type="email" placeholder="test@example.com" required>
+          </form>
+<pre class="prettyprint linenums">
+&lt;input class="span3" type="email" required&gt;
 </pre>
 
           <h3>Disabled inputs</h3>

docs/javascript.html

@@ -178,7 +178,7 @@ $('#myModal').on('show', function (e) {
           <h3>Static example</h3>
           <p>A rendered modal with header, body, and set of actions in the footer.</p>
           <div class="bs-docs-example" style="background-color: #f5f5f5;">
-            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
+            <div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
               <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h3>Modal header</h3>

docs/templates/pages/base-css.mustache

@@ -1261,6 +1261,54 @@
     </ul>
   </div>
 </div>
+</pre>
+
+          <h4>{{_i}}Segmented dropdown groups{{/i}}</h4>
+          <form class="bs-docs-example">
+            <div class="input-prepend">
+              <div class="btn-group">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                  <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                </ul>
+              </div>
+              <input type="text">
+            </div>
+            <div class="input-append">
+              <input type="text">
+              <div class="btn-group">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                  <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                </ul>
+              </div>
+            </div>
+          </form>
+<pre class="prettyprint linenums">
+&lt;form&gt;
+  &lt;div class="input-prepend"&gt;
+    &lt;div class="btn-group"&gt;...&lt;/div&gt;
+    &lt;input type="text"&gt;
+  &lt;/div&gt;
+  &lt;div class="input-append"&gt;
+    &lt;input type="text"&gt;
+    &lt;div class="btn-group"&gt;...&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
 </pre>
 
           <h4>{{_i}}Search form{{/i}}</h4>
@@ -1451,6 +1499,15 @@
           </form>
 <pre class="prettyprint linenums">
 &lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
+</pre>
+
+          <h3>{{_i}}Invalid inputs{{/i}}</h3>
+          <p>{{_i}}Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.{{/i}}</p>
+          <form class="bs-docs-example form-inline">
+            <input class="span3" type="email" placeholder="test@example.com" required>
+          </form>
+<pre class="prettyprint linenums">
+&lt;input class="span3" type="email" required&gt;
 </pre>
 
           <h3>{{_i}}Disabled inputs{{/i}}</h3>

docs/templates/pages/javascript.mustache

@@ -111,7 +111,7 @@ $('#myModal').on('show', function (e) {
           <h3>{{_i}}Static example{{/i}}</h3>
           <p>{{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}</p>
           <div class="bs-docs-example" style="background-color: #f5f5f5;">
-            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
+            <div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
               <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h3>{{_i}}Modal header{{/i}}</h3>

less/buttons.less

@@ -26,7 +26,6 @@
   &:hover {
     color: @grayDark;
     text-decoration: none;
-    background-color: darken(@white, 10%);
     background-position: 0 -15px;
 
     // transition is only when going to hover, otherwise the background
@@ -42,8 +41,6 @@
   // Active state
   &.active,
   &:active {
-    background-color: darken(@white, 10%);
-    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)");
@@ -53,7 +50,6 @@
   &.disabled,
   &[disabled] {
     cursor: default;
-    background-color: darken(@white, 10%);
     background-image: none;
     .opacity(65);
     .box-shadow(none);

less/code.less

@@ -19,6 +19,7 @@ code {
   color: #d14;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
+  white-space: nowrap;
 }
 
 // Blocks of code

less/dropdowns.less

@@ -214,5 +214,6 @@
 // Typeahead
 // ---------
 .typeahead {
+  z-index: 1051;
   margin-top: 2px; // give it some space to breathe
 }

less/forms.less

@@ -388,9 +388,9 @@ input[type="checkbox"][readonly] {
 
 // HTML5 invalid states
 // Shares styles with the .control-group.error above
-input:focus:required:invalid,
+input:focus:invalid,
-textarea:focus:required:invalid,
+textarea:focus:invalid,
-select:focus:required:invalid {
+select:focus:invalid {
   color: #b94a48;
   border-color: #ee5f5b;
   &:focus {
@@ -489,7 +489,8 @@ select:focus:required:invalid {
     border: 1px solid #ccc;
   }
   .add-on,
-  .btn {
+  .btn,
+  .btn-group > .dropdown-toggle {
     vertical-align: top;
     border-radius: 0;
   }
@@ -516,7 +517,8 @@ select:focus:required:invalid {
   select,
   .uneditable-input {
     border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
-    + .btn-group .btn {
+    + .btn-group .btn,
+    + .btn-group .btn:last-child {
       border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
     }
   }
@@ -526,7 +528,8 @@ select:focus:required:invalid {
     margin-left: -1px;
   }
   .add-on:last-child,
-  .btn:last-child {
+  .btn:last-child,
+  .btn-group:last-child > .dropdown-toggle {
     border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
   }
 }