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); }