Skip to content

Commit edb29c6

Browse files
committed
Fix input group border radius issue (twbs#25075)
1 parent 2416801 commit edb29c6

File tree

1 file changed

+19
-29
lines changed

1 file changed

+19
-29
lines changed

scss/_input-group.scss

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,8 @@
3333

3434
.form-control,
3535
.custom-select {
36-
&:not(:first-child):not(:last-of-type) { @include border-radius(0); }
37-
&:first-child { @include border-right-radius(0); }
38-
&:last-of-type:not(:first-child) { @include border-left-radius(0); }
36+
&:not(:last-child) { @include border-right-radius(0); }
37+
&:not(:first-child) { @include border-left-radius(0); }
3938
}
4039

4140
// Custom file inputs have more complex markup, thus requiring different
@@ -44,12 +43,10 @@
4443
display: flex;
4544
align-items: center;
4645

47-
&:not(:first-child):not(:last-of-type) .custom-file-control,
48-
&:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); }
49-
&:first-child .custom-file-control,
50-
&:first-child .custom-file-control::before { @include border-right-radius(0); }
51-
&:last-of-type:not(:first-child) .custom-file-control,
52-
&:last-of-type:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
46+
&:not(:last-child) .custom-file-control,
47+
&:not(:last-child) .custom-file-control::before { @include border-right-radius(0); }
48+
&:not(:first-child) .custom-file-control,
49+
&:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
5350
}
5451
}
5552

@@ -139,28 +136,21 @@
139136
// border-radius values when extending. They're more specific than we'd like
140137
// with the `.input-group >` part, but without it, we cannot override the sizing.
141138

139+
142140
.input-group > .input-group-prepend > .btn,
143-
.input-group > .input-group-prepend > .input-group-text {
144-
// All prepended buttons have no right border-radius
141+
.input-group > .input-group-prepend > .input-group-text,
142+
.input-group > .input-group-append:not(:last-child) > .btn,
143+
.input-group > .input-group-append:not(:last-child) > .input-group-text,
144+
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
145+
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child), {
145146
@include border-right-radius(0);
146-
147-
+ .btn,
148-
+ .input-group-text {
149-
@include border-left-radius(0);
150-
}
151147
}
152148

153-
// We separate out the button and input resets here because `.input-group-text`
154-
// can be any HTML element, but buttons are always inputs, buttons, or anchors.
155-
.input-group > .input-group-append {
156-
// Everything but the last one have no rounded corners
157-
.btn:not(:last-of-type),
158-
.input-group-text:not(:last-child) {
159-
@include border-radius(0);
160-
}
161-
162-
.btn:last-of-type,
163-
.input-group-text:last-child {
164-
@include border-left-radius(0);
165-
}
149+
.input-group > .input-group-append > .btn,
150+
.input-group > .input-group-append > .input-group-text,
151+
.input-group > .input-group-prepend:not(:first-child) > .btn,
152+
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
153+
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
154+
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
155+
@include border-left-radius(0);
166156
}

0 commit comments

Comments
 (0)