Holy fucking shit fix that input group with buttons rounded corner noise

1 files changed, 27 insertions, 37 deletions

diff --git a/less/forms.less b/less/forms.less
index c04b7ec89..1aba99ce0 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -503,52 +503,43 @@ select:focus:invalid {
 
 // Button input groups
 // -------------------------
-.input-group-btn,
-.input-group-btn .btn {
+.input-group-btn {
+  position: relative;
   white-space: nowrap;
 }
 .input-group-btn > .btn {
+  position: relative;
   float: left; // Collapse white-space
   border-radius: 0;
   + .btn {
-    border-left: 0;
-  }
-}
-.input-group-btn.btn-group {
-  display: table-cell;
-}
-// Prepend
-.input-group-btn {
-  &:first-child > .btn,
-  &.btn-group:first-child > .btn {
-    border-right: 0;
+    margin-left: -1px;
   }
-  &:first-child > .btn,
-  &.btn-group:first-child > .btn {
-    border-radius: @border-radius-base 0 0 @border-radius-base;
-    &.btn-large {
-      border-radius:@border-radius-large 0 0 @border-radius-large;
-    }
-    &.btn-small {
-      border-radius:@border-radius-small 0 0 @border-radius-small;
-    }
+  // Bring the "active" button to the front
+  &:hover,
+  &:active {
+    z-index: 2;
   }
 }
-// Append
-.input-group-btn {
-  &:last-child > .btn,
-  &.btn-group:last-child > .btn:first-child {
-    border-left: 0;
+
+// Prepended buttons
+.input-group-btn:first-child {
+  // Round the left corners only
+  > .btn:first-child,
+  > .dropdown-toggle:first-child {
+    .border-left-radius(@border-radius-base);
+    &.btn-large { .border-left-radius(@border-radius-large); }
+    &.btn-small { .border-left-radius(@border-radius-small); }
   }
-  &:last-child > .btn,
-  &.btn-group:last-child > .btn {
-    border-radius: 0 @border-radius-base @border-radius-base 0;
-    &.btn-large {
-      border-radius: 0 @border-radius-large @border-radius-large 0;
-    }
-    &.btn-small {
-      border-radius: 0 @border-radius-small @border-radius-small 0;
-    }
+}
+
+// Appended buttons
+.input-group-btn:last-child {
+  // Round the right corners only
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-right-radius(@border-radius-base);
+    &.btn-large { .border-right-radius(@border-radius-large); }
+    &.btn-small { .border-right-radius(@border-radius-small); }
   }
 }
 
@@ -557,7 +548,6 @@ select:focus:invalid {
 // Horizontal forms
 // --------------------------------------------------
 
-
 @media screen and (min-width: 768px) {
 
   .form-horizontal {