Input groups overhaul

* Moves input groups CSS into separate file
* Moves input groups docs into the Components page
* Add support for radios and checkboxes in input groups to fix #8679

3 files changed, 154 insertions, 148 deletions

diff --git a/less/bootstrap.less b/less/bootstrap.less
index 307f72f42..b7f393d7a 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -28,6 +28,7 @@
 
 // Components: common
 @import "component-animations.less";
+@import "input-groups.less";
 @import "dropdowns.less";
 @import "list-group.less";
 @import "panels.less";
diff --git a/less/forms.less b/less/forms.less
index 294f545dc..e6e54f835 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -273,151 +273,3 @@ select {
   margin-bottom: 10px;
   color: lighten(@text-color, 25%); // lighten the text some for contrast
 }
-
-
-
-// Input groups
-// --------------------------------------------------
-
-// Base styles
-// -------------------------
-.input-group {
-  display: table;
-  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
-
-  // Undo padding and float of grid classes
-  &.col {
-    float: none;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .form-control {
-    width: 100%;
-    margin-bottom: 0;
-  }
-}
-
-// Display as table-cell
-// -------------------------
-.input-group-addon,
-.input-group-btn,
-.input-group .form-control {
-  display: table-cell;
-
-  &:not(:first-child):not(:last-child) {
-    border-radius: 0;
-  }
-}
-// Addon and addon wrapper for buttons
-.input-group-addon,
-.input-group-btn {
-  width: 1%;
-  white-space: nowrap;
-  vertical-align: middle; // Match the inputs
-}
-
-// Text input groups
-// -------------------------
-.input-group-addon {
-  .box-sizing(border-box);
-  padding: @padding-base-vertical @padding-base-horizontal;
-  font-size: @font-size-base;
-  font-weight: normal;
-  line-height: @line-height-base;
-  text-align: center;
-  background-color: @gray-lighter;
-  border: 1px solid @input-group-addon-border-color;
-  border-radius: @border-radius-base;
-
-  &.input-small {
-    padding: @padding-small-vertical @padding-small-horizontal;
-    font-size: @font-size-small;
-    border-radius: @border-radius-small;
-  }
-  &.input-large {
-    padding: @padding-large-vertical @padding-large-horizontal;
-    font-size: @font-size-large;
-    border-radius: @border-radius-large;
-  }
-}
-
-// Reset rounded corners
-.input-group .form-control:first-child,
-.input-group-addon:first-child,
-.input-group-btn:first-child > .btn,
-.input-group-btn:first-child > .dropdown-toggle,
-.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
-  .border-right-radius(0);
-}
-.input-group-addon:first-child {
-  border-right: 0;
-}
-.input-group .form-control:last-child,
-.input-group-addon:last-child,
-.input-group-btn:last-child > .btn,
-.input-group-btn:last-child > .dropdown-toggle,
-.input-group-btn:first-child > .btn:not(:first-child) {
-  .border-left-radius(0);
-}
-.input-group-addon:last-child {
-  border-left: 0;
-}
-
-// Button input groups
-// -------------------------
-.input-group-btn {
-  position: relative;
-  white-space: nowrap;
-}
-.input-group-btn > .btn {
-  position: relative;
-  // Jankily prevent input button groups from wrapping
-  + .btn {
-    margin-left: -4px;
-  }
-  // Bring the "active" button to the front
-  &:hover,
-  &:active {
-    z-index: 2;
-  }
-}
-
-
-// Inline forms
-// --------------------------------------------------
-
-.form-inline {
-  .form-control,
-  .radio,
-  .checkbox {
-    display: inline-block;
-  }
-  .radio,
-  .checkbox {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-
-// Horizontal forms
-// --------------------------------------------------
-// Horizontal forms are built on grid classes.
-
-.form-horizontal .control-label {
-  padding-top: 9px;
-}
-
-.form-horizontal {
-  .form-group {
-    .make-row();
-  }
-}
-
-// Only right align form labels here when the columns stop stacking
-@media (min-width: @screen-tablet) {
-  .form-horizontal .control-label {
-    text-align: right;
-  }
-}
diff --git a/less/input-groups.less b/less/input-groups.less
new file mode 100644
index 000000000..fed7d5645
--- /dev/null
+++ b/less/input-groups.less
@@ -0,0 +1,153 @@
+//
+// Input groups
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.input-group {
+  display: table;
+  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+
+  // Undo padding and float of grid classes
+  &.col {
+    float: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .form-control {
+    width: 100%;
+    margin-bottom: 0;
+  }
+}
+
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+  display: table-cell;
+
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle; // Match the inputs
+}
+
+// Text input groups
+// -------------------------
+.input-group-addon {
+  .box-sizing(border-box);
+  padding: @padding-base-vertical @padding-base-horizontal;
+  font-size: @font-size-base;
+  font-weight: normal;
+  line-height: @line-height-base;
+  text-align: center;
+  background-color: @gray-lighter;
+  border: 1px solid @input-group-addon-border-color;
+  border-radius: @border-radius-base;
+
+  // Sizing
+  &.input-small {
+    padding: @padding-small-vertical @padding-small-horizontal;
+    font-size: @font-size-small;
+    border-radius: @border-radius-small;
+  }
+  &.input-large {
+    padding: @padding-large-vertical @padding-large-horizontal;
+    font-size: @font-size-large;
+    border-radius: @border-radius-large;
+  }
+
+  // Nuke default margins from checkboxes and radios to vertically center within.
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-top: 0;
+  }
+}
+
+// Reset rounded corners
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+  .border-right-radius(0);
+}
+.input-group-addon:first-child {
+  border-right: 0;
+}
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+  .border-left-radius(0);
+}
+.input-group-addon:last-child {
+  border-left: 0;
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn {
+  position: relative;
+  white-space: nowrap;
+}
+.input-group-btn > .btn {
+  position: relative;
+  // Jankily prevent input button groups from wrapping
+  + .btn {
+    margin-left: -4px;
+  }
+  // Bring the "active" button to the front
+  &:hover,
+  &:active {
+    z-index: 2;
+  }
+}
+
+
+// Inline forms
+// --------------------------------------------------
+
+.form-inline {
+  .form-control,
+  .radio,
+  .checkbox {
+    display: inline-block;
+  }
+  .radio,
+  .checkbox {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+
+// Horizontal forms
+// --------------------------------------------------
+// Horizontal forms are built on grid classes.
+
+.form-horizontal .control-label {
+  padding-top: 9px;
+}
+
+.form-horizontal {
+  .form-group {
+    .make-row();
+  }
+}
+
+// Only right align form labels here when the columns stop stacking
+@media (min-width: @screen-tablet) {
+  .form-horizontal .control-label {
+    text-align: right;
+  }
+}