From: Mark Otto <markdotto@gmail.com>
Date: Thu, 27 Oct 2016 20:40:55 +0000 (-0700)
Subject: Ensure proper sizing of and alignment of content within input group addons and buttons
X-Git-Tag: v4.0.0-alpha.6~480^2~1
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=259a420d70913cdb97ceeb303985091a7325fffb;p=thirdparty%2Fbootstrap.git

Ensure proper sizing of and alignment of content within input group addons and buttons

Fixes #20927.
---

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index a33f2d3036..52f2c13c22 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -24,6 +24,7 @@
     @include hover-focus-active {
       z-index: 3;
     }
+
     @if $enable-flex {
       flex: 1;
     } @else {
@@ -40,7 +41,12 @@
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  @if not $enable-flex {
+  @if $enable-flex {
+    // Vertically centers the content of the addons within the input group
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  } @else {
     display: table-cell;
   }
 
@@ -158,9 +164,16 @@
   // element above the siblings.
   > .btn {
     position: relative;
+
+    @if $enable-flex {
+      // 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;