Fix input group border radius issue (#25075) (#25076)

* Fix input group border radius issue (#25075) * Remove migration note - All buttons In input group do not have to be the same element now. * lint
twbs · Dec 26, 2017 · 8c6011a · 8c6011a
1 parent be6fbf5
commit 8c6011a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 31 deletions.
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
@@ -35,8 +35,6 @@ While Beta 2 saw the bulk of our breaking changes during the beta phase, but we
 
 - Sizing classes must be on the parent `.input-group` and not the individual form elements.
 
-- Due to limitations in how CSS selectors work, all buttons must be the same element (e.g., `<a>` or `<button>`).
-
 ## Beta 2 changes
 
 While in beta, we aim to have no breaking changes. However, things don't always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
@@ -33,9 +33,8 @@
 
   .form-control,
   .custom-select {
-    &:not(:first-child):not(:last-of-type) { @include border-radius(0); }
-    &:first-child { @include border-right-radius(0); }
-    &:last-of-type:not(:first-child) { @include border-left-radius(0); }
+    &:not(:last-child) { @include border-right-radius(0); }
+    &:not(:first-child) { @include border-left-radius(0); }
   }
 
   // Custom file inputs have more complex markup, thus requiring different
@@ -44,12 +43,10 @@
     display: flex;
     align-items: center;
 
-    &:not(:first-child):not(:last-of-type) .custom-file-control,
-    &:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); }
-    &:first-child .custom-file-control,
-    &:first-child .custom-file-control::before { @include border-right-radius(0); }
-    &:last-of-type:not(:first-child) .custom-file-control,
-    &:last-of-type:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
+    &:not(:last-child) .custom-file-control,
+    &:not(:last-child) .custom-file-control::before { @include border-right-radius(0); }
+    &:not(:first-child) .custom-file-control,
+    &:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
   }
 }
 
@@ -139,28 +136,21 @@
 // border-radius values when extending. They're more specific than we'd like
 // with the `.input-group >` part, but without it, we cannot override the sizing.
 
+
 .input-group > .input-group-prepend > .btn,
-.input-group > .input-group-prepend > .input-group-text {
-  // All prepended buttons have no right border-radius
+.input-group > .input-group-prepend > .input-group-text,
+.input-group > .input-group-append:not(:last-child) > .btn,
+.input-group > .input-group-append:not(:last-child) > .input-group-text,
+.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
   @include border-right-radius(0);
-
-  + .btn,
-  + .input-group-text {
-    @include border-left-radius(0);
-  }
 }
 
-// We separate out the button and input resets here because `.input-group-text`
-// can be any HTML element, but buttons are always inputs, buttons, or anchors.
-.input-group > .input-group-append {
-  // Everything but the last one have no rounded corners
-  .btn:not(:last-of-type),
-  .input-group-text:not(:last-child) {
-    @include border-radius(0);
-  }
-
-  .btn:last-of-type,
-  .input-group-text:last-child {
-    @include border-left-radius(0);
-  }
+.input-group > .input-group-append > .btn,
+.input-group > .input-group-append > .input-group-text,
+.input-group > .input-group-prepend:not(:first-child) > .btn,
+.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
+.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
+.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
+  @include border-left-radius(0);
 }