From: ysds <fellows3@gmail.com>
Date: Tue, 26 Dec 2017 22:23:07 +0000 (+0900)
Subject: Fix input group border radius issue (#25075) (#25076)
X-Git-Tag: v4.0.0-beta.3~14^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8c6011ab4f28f6b05be608d2f016a33d984dd729;p=thirdparty%2Fbootstrap.git

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
---

diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index 346ef84ab0..39b7dfa168 100644
--- 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
index f1d3c9dea1..7ef0267cc3 100644
--- 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);
 }