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.

1 files changed, 40 insertions, 0 deletions

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index b1cc33725..f80d8b8a5 100644
--- a/dist/css/bootstrap.css
+++ b/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;