-
-
Notifications
You must be signed in to change notification settings - Fork 79.1k
Closed
Description
Regarding overlapping of borders of a grouped element, @mdo commented in #24453 that it is not good way to control the border color. As an alternative, we can use border-width: 0 or negative margin.
In input group, .input-group-addon uses border width to 0, and input-group-btn uses negative margin. I think we should use a same way (negative margin), since .input-group-addon and input-group-btn are similar in principle.
bootstrap/scss/_input-group.scss
Lines 145 to 151 in 9de141f
| .form-control, | |
| .custom-select, | |
| .custom-file { | |
| + .input-group-addon:not(:first-child) { | |
| border-left: 0; | |
| } | |
| } |
bootstrap/scss/_input-group.scss
Lines 165 to 172 in 9de141f
| // Negative margin for spacing, position for bringing hovered/focused/actived | |
| // element above the siblings. | |
| > .btn { | |
| position: relative; | |
| + .btn { | |
| margin-left: (-$input-border-width); | |
| } |
Reactions are currently unavailable