Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Dec 26, 2017
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
edb29c6
Fix input group border radius issue (#25075)
ysds Dec 25, 2017
cec7af9
Remove migration note
ysds Dec 25, 2017
0d5237d
lint
ysds Dec 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions docs/4.0/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
48 changes: 19 additions & 29 deletions scss/_input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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); }
}
}

Expand Down Expand Up @@ -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);
}