Add flexbox mode for input groups

diff --git a/docs/pages/forms.md b/docs/pages/forms.md
index 6054fa53e4440c3796e99727cb3c8aeeca11ba26..f0d01468af90eabade23cf3a5b773733bc7d6826 100644 (file)
--- a/docs/pages/forms.md
+++ b/docs/pages/forms.md
@@ -206,6 +206,10 @@ To attach extra text or controls to the left or right of an input field, wrap th
 - `.input-group-label` on a text label.
 - `.input-group-button` on a button. **Place the button inside this wrapper.**
 
+<div class="primary callout">
+  <p>This component supports flexbox mode. <a href="#">Learn how to enable flexbox mode</a>.</p>
+</div>
+
 ```html_example
 <div class="input-group">
   <span class="input-group-label">$</span>

diff --git a/scss/_global.scss b/scss/_global.scss
index 2eef7ce62c99ae3fe3c9971225c8bdc857775072..32ffa14d87fb9eb18bc6efdfdf7889df7ddd6a6c 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -87,8 +87,13 @@ $global-weight-bold: bold !default;
 $global-radius: 0 !default;
 
 /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
+/// @type Keyword
 $global-text-direction: ltr !default;
 
+/// Enables flexbox for components that support it.
+/// @type Boolean
+$global-flexbox: true !default;
+
 @if not map-has-key($foundation-palette, primary) {
   @error 'In $foundation-palette, you must have a color named "primary".';
 }

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index dafaf8f32b54aaf4124572d26d6ddafc1b9acb82..b3fb5b34ab31dffae3a60d7ba61cedabadb649c7 100644 (file)
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -24,12 +24,15 @@ $input-prefix-padding: 1rem !default;
 @mixin foundation-form-prepostfix {
   $height: ($input-font-size + $form-spacing * 1.5);
 
-
   .input-group {
-    display: table;
+    display: if($global-flexbox, flex, table);
     width: 100%;
     margin-bottom: $form-spacing;
 
+    @if $global-flexbox {
+      align-items: stretch;
+    }
+
     > :first-child {
       border-radius: $global-radius 0 0 $global-radius;
     }
@@ -42,21 +45,32 @@ $input-prefix-padding: 1rem !default;
   }
 
   %input-group-child {
-    display: table-cell;
     margin: 0;
-    vertical-align: middle;
+    
+    @if not $global-flexbox {
+      display: table-cell;
+      vertical-align: middle;
+    }
   }
 
   .input-group-label {
     @extend %input-group-child;
     text-align: center;
-    width: 1%;
-    height: 100%;
     padding: 0 $input-prefix-padding;
     background: $input-prefix-background;
     color: $input-prefix-color;
     border: $input-prefix-border;
 
+    @if $global-flexbox {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+    @else {
+      width: 1%;
+      height: 100%;
+    }
+
     @if has-value($input-prefix-border) {
       &:first-child {
         border-#{$global-right}: 0;
@@ -71,16 +85,30 @@ $input-prefix-padding: 1rem !default;
   .input-group-field {
     @extend %input-group-child;
     border-radius: 0;
-    height: $height;
+    
+    @if $global-flexbox {
+      flex: 1 1 0px;
+      width: auto;
+      height: auto;
+    }
+    @else {
+      height: $height;
+    }
   }
 
   .input-group-button {
     @extend %input-group-child;
-    height: 100%;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    width: 1%;
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      height: 100%;
+      width: 1%;
+    }
 
     a,
     input,