From edb29c684071b0fbf4919c642e26a7765f7962bd Mon Sep 17 00:00:00 2001 From: ysds Date: Mon, 25 Dec 2017 17:47:43 +0900 Subject: [PATCH 1/3] Fix input group border radius issue (#25075) --- scss/_input-group.scss | 48 +++++++++++++++++------------------------- 1 file changed, 19 insertions(+), 29 deletions(-) diff --git a/scss/_input-group.scss b/scss/_input-group.scss index f1d3c9dea1a8..9ba23c81ef8f 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); } From cec7af97e90c1083b539e28ff2a5a67e8d8c8708 Mon Sep 17 00:00:00 2001 From: ysds Date: Mon, 25 Dec 2017 18:09:12 +0900 Subject: [PATCH 2/3] Remove migration note - All buttons In input group do not have to be the same element now. --- docs/4.0/migration.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md index 346ef84ab0da..39b7dfa1685b 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., `` or `