mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Multiple input-group-addon support
1. Invert `:first-child` into `:not(:last-child)` and vice versa 2. Remove double border at the left of `.form-control` 3. Shifts negative margins of `.btn` and `.btn-group` to retain rightmost border when using at the left of `.form-control`.
This commit is contained in:
parent
2f257445c3
commit
c0f931d050
2 changed files with 20 additions and 27 deletions
|
@ -13,7 +13,7 @@ Easily extend form controls by adding text, buttons, or button groups on either
|
|||
|
||||
## Basic example
|
||||
|
||||
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.**
|
||||
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group.**
|
||||
|
||||
{% example html %}
|
||||
<div class="input-group">
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
.input-group {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
|
@ -118,28 +119,26 @@
|
|||
// Reset rounded corners
|
||||
//
|
||||
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-addon:first-child,
|
||||
.input-group-btn:first-child > .btn,
|
||||
.input-group-btn:first-child > .btn-group > .btn,
|
||||
.input-group-btn:first-child > .dropdown-toggle,
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
|
||||
.input-group .form-control:not(:last-child),
|
||||
.input-group-addon:not(:last-child),
|
||||
.input-group-btn:not(:last-child) > .btn,
|
||||
.input-group-btn:not(:last-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:last-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
.input-group-addon:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-addon:last-child,
|
||||
.input-group-btn:last-child > .btn,
|
||||
.input-group-btn:last-child > .btn-group > .btn,
|
||||
.input-group-btn:last-child > .dropdown-toggle,
|
||||
.input-group-btn:first-child > .btn:not(:first-child),
|
||||
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
|
||||
.input-group .form-control:not(:first-child),
|
||||
.input-group-addon:not(:first-child),
|
||||
.input-group-btn:not(:first-child) > .btn,
|
||||
.input-group-btn:not(:first-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:first-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:last-child) > .btn:not(:first-child),
|
||||
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
.input-group-addon:last-child {
|
||||
.input-group .form-control:not(:first-child),
|
||||
.input-group-addon:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
|
@ -169,17 +168,11 @@
|
|||
}
|
||||
|
||||
// Negative margin to only have a single, shared border between the two
|
||||
&:first-child {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: (-$input-btn-border-width);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
&:not(:first-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
z-index: 2;
|
||||
margin-left: (-$input-btn-border-width);
|
||||
margin-left: (-$input-btn-border-width) * 2;
|
||||
// Because specificity
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
|
|
Loading…
Reference in a new issue