mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 11:51:23 +02:00
Code Issues Releases Wiki Activity

Multiple input-group-addon support

Browse Source 
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:
Vicary Archangel
2015-12-09 16:40:32 +08:00
parent 2f257445c3
commit c0f931d050
2 changed files with 20 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/input-group.md
View File

@@ -13,7 +13,7 @@ Easily extend form controls by adding text, buttons, or button groups on either
## Basic example ## 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 %} {% example html %}
<div class="input-group"> <div class="input-group">

45
scss/_input-group.scss
View File

@@ -4,6 +4,7 @@
.input-group { .input-group {
position: relative; position: relative;
width: 100%;
@if $enable-flex { @if $enable-flex {
display: flex; display: flex;
@@ -118,28 +119,26 @@
// Reset rounded corners // Reset rounded corners
// //
.input-group .form-control:first-child, .input-group .form-control:not(:last-child),
.input-group-addon:first-child, .input-group-addon:not(:last-child),
.input-group-btn:first-child > .btn, .input-group-btn:not(:last-child) > .btn,
.input-group-btn:first-child > .btn-group > .btn, .input-group-btn:not(:last-child) > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle, .input-group-btn:not(:last-child) > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { .input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
@include border-right-radius(0); @include border-right-radius(0);
} }
.input-group-addon:first-child { .input-group .form-control:not(:first-child),
border-right: 0; .input-group-addon:not(:first-child),
} .input-group-btn:not(:first-child) > .btn,
.input-group .form-control:last-child, .input-group-btn:not(:first-child) > .btn-group > .btn,
.input-group-addon:last-child, .input-group-btn:not(:first-child) > .dropdown-toggle,
.input-group-btn:last-child > .btn, .input-group-btn:not(:last-child) > .btn:not(:first-child),
.input-group-btn:last-child > .btn-group > .btn, .input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .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 {
@include border-left-radius(0); @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; border-left: 0;
} }
@@ -169,17 +168,11 @@
} }
// Negative margin to only have a single, shared border between the two // Negative margin to only have a single, shared border between the two
&:first-child { &:not(:first-child) {
> .btn,
> .btn-group {
margin-right: (-$input-btn-border-width);
}
}
&:last-child {
> .btn, > .btn,
> .btn-group { > .btn-group {
z-index: 2; z-index: 2;
margin-left: (-$input-btn-border-width); margin-left: (-$input-btn-border-width) * 2;
// Because specificity // Because specificity
@include hover-focus-active { @include hover-focus-active {
z-index: 3; z-index: 3;