rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
* 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
This commit is contained in:
ysds 2017-12-27 07:23:07 +09:00 committed by Mark Otto
parent be6fbf5387
commit 8c6011ab4f
2 changed files with 19 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/4.0/migration.md
View File

@ -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. - 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 ## 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. 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.

48
scss/_input-group.scss
View File

@ -33,9 +33,8 @@
.form-control, .form-control,
.custom-select { .custom-select {
&:not(:first-child):not(:last-of-type) { @include border-radius(0); } &:not(:last-child) { @include border-right-radius(0); }
&:first-child { @include border-right-radius(0); } &:not(:first-child) { @include border-left-radius(0); }
&:last-of-type:not(:first-child) { @include border-left-radius(0); }
} }
// Custom file inputs have more complex markup, thus requiring different // Custom file inputs have more complex markup, thus requiring different
@ -44,12 +43,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
&:not(:first-child):not(:last-of-type) .custom-file-control, &:not(:last-child) .custom-file-control,
&:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); } &:not(:last-child) .custom-file-control::before { @include border-right-radius(0); }
&:first-child .custom-file-control, &:not(:first-child) .custom-file-control,
&:first-child .custom-file-control::before { @include border-right-radius(0); } &:not(:first-child) .custom-file-control::before { @include border-left-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); }
} }
} }
@ -139,28 +136,21 @@
// border-radius values when extending. They're more specific than we'd like // 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. // with the `.input-group >` part, but without it, we cannot override the sizing.
.input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text { .input-group > .input-group-prepend > .input-group-text,
// All prepended buttons have no right border-radius .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); @include border-right-radius(0);
}
+ .btn, .input-group > .input-group-append > .btn,
+ .input-group-text { .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); @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);
}
}