kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Merge pull request #21032 from twbs/flexbox-input-group

Browse source 
Proper input group sizing and alignment in flexbox mode
This commit is contained in:
Mark Otto 2016-10-27 21:23:48 -07:00 • committed by GitHub
commit d23163a483
1 changed files with 14 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
scss/_input-group.scss
View file

@ -24,6 +24,7 @@
@include hover-focus-active { @include hover-focus-active {
z-index: 3; z-index: 3;
} }
@if $enable-flex { @if $enable-flex {
flex: 1; flex: 1;
} @else { } @else {
@ -40,7 +41,12 @@
.input-group-addon, .input-group-addon,
.input-group-btn, .input-group-btn,
.input-group .form-control { .input-group .form-control {
@if not $enable-flex { @if $enable-flex {
// Vertically centers the content of the addons within the input group
display: flex;
flex-direction: column;
justify-content: center;
} @else {
display: table-cell; display: table-cell;
} }
@ -158,9 +164,16 @@
// element above the siblings. // element above the siblings.
> .btn { > .btn {
position: relative; position: relative;
@if $enable-flex {
// Vertically stretch the button and center its content
flex: 1;
}
+ .btn { + .btn {
margin-left: (-$input-btn-border-width); margin-left: (-$input-btn-border-width);
} }
// Bring the "active" button to the front // Bring the "active" button to the front
@include hover-focus-active { @include hover-focus-active {
z-index: 3; z-index: 3;