Newfangled input and button group sizing (fixes #9295)

Instead of applying `.btn-` or `.input-` to individual elements in
button and input groups, we now have new sizing classes to keep your
markup a little leaner.

* Add `.input-group-sm` or `.input-group-lg` to your `.input-group` to
replicate `.input-sm` and `.input-lg`, respectively.
* Add `.btn-group-xs`, `.btn-group-sm`, or `.btn-group-lg` to your
`.btn-group` to replicate `.btn-xs`, `.btn-sm`, and `. btn-lg`,
respectively.

Both sets of new sizing classes simply use the existing individual
sizing classes as mixins, so customization of them is automatically
inherited when compiling.

_includes/nav-components.html

@@ -12,6 +12,8 @@
   <ul class="nav">
     <li><a href="#btn-groups-single">Basic button group</a></li>
     <li><a href="#btn-groups-toolbar">Button toolbar</a></li>
+    <li><a href="#btn-groups-sizing">Button group sizing</a></li>
+    <li><a href="#btn-groups-nested">Nested button groups</a></li>
     <li><a href="#btn-groups-vertical">Vertical variation</a></li>
     <li><a href="#btn-groups-justified">Justified link buttons</a></li>
   </ul>

components.html

@@ -152,6 +152,39 @@ base_url: "../"
   <div class="btn-group">...</div>
   <div class="btn-group">...</div>
 </div>
+{% endhighlight %}
+
+    <h3 id="btn-groups-sizing">Button group sizing</h3>
+    <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
+    <div class="bs-example">
+      <div class="btn-group btn-group-lg">
+        <button type="button" class="btn btn-default">Left</button>
+        <button type="button" class="btn btn-default">Middle</button>
+        <button type="button" class="btn btn-default">Right</button>
+      </div>
+      <div class="btn-group">
+        <button type="button" class="btn btn-default">Left</button>
+        <button type="button" class="btn btn-default">Middle</button>
+        <button type="button" class="btn btn-default">Right</button>
+      </div>
+      <div class="btn-group btn-group-sm">
+        <button type="button" class="btn btn-default">Left</button>
+        <button type="button" class="btn btn-default">Middle</button>
+        <button type="button" class="btn btn-default">Right</button>
+      </div>
+      <div class="btn-group btn-group-xs">
+        <button type="button" class="btn btn-default">Left</button>
+        <button type="button" class="btn btn-default">Middle</button>
+        <button type="button" class="btn btn-default">Right</button>
+      </div>
+    </div>
+{% highlight html %}
+<div class="btn-toolbar">
+  <div class="btn-group btn-group-lg">...</div>
+  <div class="btn-group">...</div>
+  <div class="btn-group btn-group-sm">...</div>
+  <div class="btn-group btn-group-xs">...</div>
+</div>
 {% endhighlight %}
 
     <h3 id="btn-groups-nested">Nested button groups</h3>
@@ -568,11 +601,11 @@ base_url: "../"
 {% endhighlight %}
 
     <h2 id="input-groups-sizes">Optional sizes</h2>
-    <p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
+    <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
     <form class="bs-example bs-example-form" role="form">
-      <div class="input-group">
-        <span class="input-group-addon input-lg">@</span>
-        <input type="text" class="form-control input-lg" placeholder="Username">
+      <div class="input-group input-group-lg">
+        <span class="input-group-addon">@</span>
+        <input type="text" class="form-control" placeholder="Username">
       </div>
       <br>
       <div class="input-group">
@@ -580,14 +613,14 @@ base_url: "../"
         <input type="text" class="form-control" placeholder="Username">
       </div>
       <br>
-      <div class="input-group">
-        <span class="input-group-addon input-sm">@</span>
-        <input type="text" class="form-control input-sm" placeholder="Username">
+      <div class="input-group input-group-sm">
+        <span class="input-group-addon">@</span>
+        <input type="text" class="form-control" placeholder="Username">
       </div>
     </form>
 {% highlight html %}
-<div class="input-group">
-  <span class="input-group-addon input-lg">@</span>
+<div class="input-group input-group-lg">
+  <span class="input-group-addon">@</span>
   <input type="text" class="form-control input-lg" placeholder="Username">
 </div>
 
@@ -596,9 +629,9 @@ base_url: "../"
   <input type="text" class="form-control" placeholder="Username">
 </div>
 
-<div class="input-group">
-  <span class="input-group-addon input-sm">@</span>
-  <input type="text" class="form-control input-sm" placeholder="Username">
+<div class="input-group input-group-sm">
+  <span class="input-group-addon">@</span>
+  <input type="text" class="form-control" placeholder="Username">
 </div>
 {% endhighlight %}
 

dist/css/bootstrap.css

@@ -2262,6 +2262,24 @@ input[type="button"].btn-block {
   margin-bottom: 0;
 }
 
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon {
+  height: 45px;
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+  border-radius: 6px;
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
@@ -3487,6 +3505,28 @@ button.close {
   outline: 0;
 }
 
+.btn-group-xs > .btn {
+  padding: 5px 10px;
+  padding: 3px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.btn-group-sm > .btn {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.btn-group-lg > .btn {
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+  border-radius: 6px;
+}
+
 .btn-group > .btn + .dropdown-toggle {
   padding-right: 8px;
   padding-left: 8px;

less/button-groups.less

@@ -117,6 +117,14 @@
 }
 
 
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-xs > .btn { .btn-xs(); }
+.btn-group-sm > .btn { .btn-sm(); }
+.btn-group-lg > .btn { .btn-lg(); }
+
 
 // Split button dropdowns
 // ----------------------

less/input-groups.less

@@ -22,6 +22,17 @@
   }
 }
 
+// Sizing options
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon { .input-lg(); }
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon { .input-sm(); }
+
+
 // Display as table-cell
 // -------------------------
 .input-group-addon,