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

5 files changed, 91 insertions, 79 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b0304d693..299933d4b 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1546,62 +1546,60 @@ select:focus:invalid:focus {
   border-left: 0;
 }
 
-.input-group-btn,
-.input-group-btn .btn {
+.input-group-btn {
+  position: relative;
   white-space: nowrap;
 }
 
 .input-group-btn > .btn {
+  position: relative;
   float: left;
   border-radius: 0;
 }
 
 .input-group-btn > .btn + .btn {
-  border-left: 0;
-}
-
-.input-group-btn.btn-group {
-  display: table-cell;
-}
-
-.input-group-btn:first-child > .btn,
-.input-group-btn.btn-group:first-child > .btn {
-  border-right: 0;
+  margin-left: -1px;
 }
 
-.input-group-btn:first-child > .btn,
-.input-group-btn.btn-group:first-child > .btn {
-  border-radius: 4px 0 0 4px;
+.input-group-btn > .btn:hover,
+.input-group-btn > .btn:active {
+  z-index: 2;
 }
 
-.input-group-btn:first-child > .btn.btn-large,
-.input-group-btn.btn-group:first-child > .btn.btn-large {
-  border-radius: 6px 0 0 6px;
+.input-group-btn:first-child > .btn:first-child,
+.input-group-btn:first-child > .dropdown-toggle:first-child {
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
 }
 
-.input-group-btn:first-child > .btn.btn-small,
-.input-group-btn.btn-group:first-child > .btn.btn-small {
-  border-radius: 3px 0 0 3px;
+.input-group-btn:first-child > .btn:first-child.btn-large,
+.input-group-btn:first-child > .dropdown-toggle:first-child.btn-large {
+  border-bottom-left-radius: 6px;
+  border-top-left-radius: 6px;
 }
 
-.input-group-btn:last-child > .btn,
-.input-group-btn.btn-group:last-child > .btn:first-child {
-  border-left: 0;
+.input-group-btn:first-child > .btn:first-child.btn-small,
+.input-group-btn:first-child > .dropdown-toggle:first-child.btn-small {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
 }
 
-.input-group-btn:last-child > .btn,
-.input-group-btn.btn-group:last-child > .btn {
-  border-radius: 0 4px 4px 0;
+.input-group-btn:last-child > .btn:last-child,
+.input-group-btn:last-child > .dropdown-toggle {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
-.input-group-btn:last-child > .btn.btn-large,
-.input-group-btn.btn-group:last-child > .btn.btn-large {
-  border-radius: 0 6px 6px 0;
+.input-group-btn:last-child > .btn:last-child.btn-large,
+.input-group-btn:last-child > .dropdown-toggle.btn-large {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
 }
 
-.input-group-btn:last-child > .btn.btn-small,
-.input-group-btn.btn-group:last-child > .btn.btn-small {
-  border-radius: 0 3px 3px 0;
+.input-group-btn:last-child > .btn:last-child.btn-small,
+.input-group-btn:last-child > .dropdown-toggle.btn-small {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
 @media screen and (min-width: 768px) {
@@ -1642,6 +1640,7 @@ select:focus:invalid:focus {
   font-weight: 500;
   line-height: 20px;
   text-align: center;
+  white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   border: 1px solid #a7a9aa;
@@ -3465,9 +3464,19 @@ button.close {
 }
 
 .btn-group > .btn {
+  position: relative;
   float: left;
 }
 
+.btn-group > .btn + btn {
+  margin-left: -1px;
+}
+
+.btn-group > .btn:hover,
+.btn-group > .btn:active {
+  z-index: 2;
+}
+
 .btn-toolbar:before,
 .btn-toolbar:after {
   display: table;
@@ -3560,15 +3569,16 @@ button.close {
   display: block;
   float: none;
   max-width: 100%;
-  border-radius: 0;
 }
 
 .btn-group-vertical .btn:first-child {
+  border-radius: 0;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
 
 .btn-group-vertical .btn:last-child {
+  border-radius: 0;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
diff --git a/docs/css.html b/docs/css.html
index 13d39adeb..501c791df 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1493,7 +1493,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <p></p>
           <form class="bs-docs-example">
             <div class="input-group span7">
-              <div class="input-group-btn btn-group">
+              <div class="input-group-btn">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1508,7 +1508,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <br>
             <div class="input-group span7">
               <input type="text">
-              <div class="input-group-btn btn-group">
+              <div class="input-group-btn">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1522,7 +1522,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </form>
 {% highlight html linenos %}
 <div class="input-group span7">
-  <div class="input-group-btn btn-group">
+  <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu">
       <li><a href="#">Action</a></li>
@@ -1537,7 +1537,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 <div class="input-group span7">
   <input type="text">
-  <div class="input-group-btn btn-group">
+  <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu">
       <li><a href="#">Action</a></li>
@@ -1553,7 +1553,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <h4>Segmented dropdown groups</h4>
           <form class="bs-docs-example">
             <div class="input-group span7">
-              <div class="input-group-btn btn-group">
+              <div class="input-group-btn">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1573,7 +1573,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
             <div class="input-group span7">
               <input type="text">
-              <div class="input-group-btn btn-group">
+              <div class="input-group-btn">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1590,7 +1590,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </form>
 {% highlight html linenos %}
 <div class="input-group span7">
-  <div class="input-group-btn btn-group">
+  <div class="input-group-btn">
     <!-- Button and dropdown menu -->
   </div>
   <input type="text">
diff --git a/less/button-groups.less b/less/button-groups.less
index a816a1ae1..ddb549e4b 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -16,7 +16,17 @@
   display: inline-block;
   vertical-align: middle; // match .btn alignment given font-size hack above
   > .btn {
+    position: relative;
     float: left;
+    // Prevent double borders when buttons are next to each other
+    + btn {
+      margin-left: -1px;
+    }
+    // Bring the "active" button to the front
+    &:hover,
+    &:active {
+      z-index: 2;
+    }
   }
 }
 
@@ -116,13 +126,14 @@
 .btn-group-vertical > .btn {
   display: block;
   float: none;
-  border-radius: 0;
   max-width: 100%;
 }
 .btn-group-vertical .btn:first-child {
+  border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
   .border-top-radius(@border-radius-base);
 }
 .btn-group-vertical .btn:last-child {
+  border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
   .border-bottom-radius(@border-radius-base);
 }
 .btn-group-vertical .btn-large:first-child {
diff --git a/less/buttons.less b/less/buttons.less
index 6996ea050..7eaaeb13f 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -19,6 +19,7 @@
   cursor: pointer;
   border: 1px solid @btn-border;
   border-radius: @border-radius-base;
+  white-space: nowrap;
 
   &:focus {
     .tab-focus();
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 {