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

stub out flexbox variation for input group

Browse Source
This commit is contained in:
Mark Otto 2015-04-27 01:43:30 -07:00
parent 9d4d6ef3a2
commit 391b62f968
1 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
scss/_input-group.scss
View File

@ -8,22 +8,31 @@
// //
.input-group { .input-group {
position: relative; // For dropdowns position: relative;
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table @if $enable-flex {
display: flex;
} @else {
display: table;
// Prevent input groups from inheriting border styles from table cells when
// placed within a table.
border-collapse: separate;
}
.form-control { .form-control {
// Ensure that the input is always above the *appended* addon button for // Ensure that the input is always above the *appended* addon button for
// proper border colors. // proper border colors.
position: relative; position: relative;
z-index: 2; z-index: 2;
@if $enable-flex {
// IE9 fubars the placeholder attribute in text inputs and the arrows on flex: 1;
// select elements in input groups. To fix it, we float the input. Details: } @else {
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 // IE9 fubars the placeholder attribute in text inputs and the arrows on
float: left; // select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
width: 100%; float: left;
width: 100%;
}
margin-bottom: 0; margin-bottom: 0;
} }
} }
@ -31,7 +40,11 @@
.input-group-addon, .input-group-addon,
.input-group-btn, .input-group-btn,
.input-group .form-control { .input-group .form-control {
display: table-cell; @if $enable-flex {
// do nothing
} @else {
display: table-cell;
}
&:not(:first-child):not(:last-child) { &:not(:first-child):not(:last-child) {
@include border-radius(0); @include border-radius(0);
@ -40,7 +53,11 @@
.input-group-addon, .input-group-addon,
.input-group-btn { .input-group-btn {
width: 1%; @if $enable-flex {
// do nothing
} @else {
width: 1%;
}
white-space: nowrap; white-space: nowrap;
vertical-align: middle; // Match the inputs vertical-align: middle; // Match the inputs
} }