Multiple input-group-addon support

1. Invert `:first-child` into `:not(:last-child)` and vice versa
2. Remove double border at the left of `.form-control`
3. Shifts negative margins of `.btn` and `.btn-group` to retain
rightmost border when using at the left of `.form-control`.

diff --git a/docs/components/input-group.md b/docs/components/input-group.md
index 78ad26e27a26f1b22bebc41322e87ebb467f75c7..841ebb2d5fd592f61cda5ed1686cd626c8f754e0 100644 (file)
--- a/docs/components/input-group.md
+++ b/docs/components/input-group.md
@@ -13,7 +13,7 @@ Easily extend form controls by adding text, buttons, or button groups on either
 
 ## Basic example
 
-Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.**
+Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group.**
 
 {% example html %}
 <div class="input-group">

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index e6681ebdea895b0980e068dbf10e318a4f77ac8f..e068ffa3f175b14f9bf7cff604e985468a8ea4c1 100644 (file)
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -4,6 +4,7 @@
 
 .input-group {
   position: relative;
+  width: 100%;
 
   @if $enable-flex {
     display: flex;
@@ -118,28 +119,26 @@
 // 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 > .btn-group > .btn,
-.input-group-btn:first-child > .dropdown-toggle,
-.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
-.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+.input-group .form-control:not(:last-child),
+.input-group-addon:not(:last-child),
+.input-group-btn:not(:last-child) > .btn,
+.input-group-btn:not(:last-child) > .btn-group > .btn,
+.input-group-btn:not(:last-child) > .dropdown-toggle,
+.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
   @include 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 > .btn-group > .btn,
-.input-group-btn:last-child > .dropdown-toggle,
-.input-group-btn:first-child > .btn:not(:first-child),
-.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+.input-group .form-control:not(:first-child),
+.input-group-addon:not(:first-child),
+.input-group-btn:not(:first-child) > .btn,
+.input-group-btn:not(:first-child) > .btn-group > .btn,
+.input-group-btn:not(:first-child) > .dropdown-toggle,
+.input-group-btn:not(:last-child) > .btn:not(:first-child),
+.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
   @include border-left-radius(0);
 }
-.input-group-addon:last-child {
+.input-group .form-control:not(:first-child),
+.input-group-addon:not(:first-child) {
   border-left: 0;
 }
 
@@ -169,17 +168,11 @@
   }
 
   // Negative margin to only have a single, shared border between the two
-  &:first-child {
-    > .btn,
-    > .btn-group {
-      margin-right: (-$input-btn-border-width);
-    }
-  }
-  &:last-child {
+  &:not(:first-child) {
     > .btn,
     > .btn-group {
       z-index: 2;
-      margin-left: (-$input-btn-border-width);
+      margin-left: (-$input-btn-border-width) * 2;
       // Because specificity
       @include hover-focus-active {
         z-index: 3;