diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_input-group.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_input-group.scss | 44 |
1 files changed, 17 insertions, 27 deletions
diff --git a/assets/stylesheets/bootstrap/_input-group.scss b/assets/stylesheets/bootstrap/_input-group.scss index b447a32..ab44883 100644 --- a/assets/stylesheets/bootstrap/_input-group.scss +++ b/assets/stylesheets/bootstrap/_input-group.scss @@ -4,45 +4,34 @@ .input-group { position: relative; + display: flex; width: 100%; - @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 { // Ensure that the input is always above the *appended* addon button for // proper border colors. position: relative; z-index: 2; + flex: 1 1 auto; + // Add width 1% and flex-basis auto to ensure that button will not wrap out + // the column. Applies to IE Edge+ and Firefox. Chrome does not require this. + width: 1%; + margin-bottom: 0; + // Bring the "active" form control to the front @include hover-focus-active { z-index: 3; } - @if $enable-flex { - flex: 1; - } @else { - // IE9 fubars the placeholder attribute in text inputs and the arrows on - // select elements in input groups. To fix it, we float the input. Details: - // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 - float: left; - width: 100%; - } - margin-bottom: 0; } } .input-group-addon, .input-group-btn, .input-group .form-control { - @if not $enable-flex { - display: table-cell; - } + // Vertically centers the content of the addons within the input group + display: flex; + flex-direction: column; + justify-content: center; &:not(:first-child):not(:last-child) { @include border-radius(0); @@ -51,9 +40,6 @@ .input-group-addon, .input-group-btn { - @if not $enable-flex { - width: 1%; - } white-space: nowrap; vertical-align: middle; // Match the inputs } @@ -83,8 +69,8 @@ .input-group-addon { padding: $input-padding-y $input-padding-x; margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom - font-size: $font-size-base; - font-weight: normal; + font-size: $font-size-base; // Match inputs + font-weight: $font-weight-normal; line-height: $input-line-height; color: $input-color; text-align: center; @@ -158,9 +144,13 @@ // element above the siblings. > .btn { position: relative; + // Vertically stretch the button and center its content + flex: 1; + + .btn { margin-left: (-$input-btn-border-width); } + // Bring the "active" button to the front @include hover-focus-active { z-index: 3; |