Add flex utility mixins and classes

diff --git a/scss/components/_flex.scss b/scss/components/_flex.scss
new file mode 100644 (file)
index 0000000..4deae32
--- /dev/null
+++ b/scss/components/_flex.scss
@@ -0,0 +1,13 @@
+// Horizontal alignment using justify-content
+@each $hdir, $prop in map-remove($-zf-flex-justify, left) {
+  .row.align-#{$hdir} {
+    @include flex-align($x: $hdir);
+  }
+}
+
+// Vertical alignment using align-items and align-self
+@each $vdir, $prop in $-zf-flex-align {
+  .align-#{$vdir} {
+    @include flex-align($y: $vdir);
+  }
+}

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 32dbdfb091d766eb55d974db3f79f18336e950d9..a1dbc94fd8fe6523f1d513dc0824a75e428837a9 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -6,21 +6,6 @@
 /// @group flex-grid
 ////
 
-$-zf-flex-justify: (
-  'left': flex-start,
-  'right': flex-end,
-  'center': center,
-  'justify': space-between,
-  'spaced': space-around,
-);
-
-$-zf-flex-align: (
-  'top': flex-start,
-  'bottom': flex-end,
-  'middle': center,
-  'stretch': stretch,
-);
-
 /// Creates a container for a flex grid row.
 ///
 /// @param {Keyword|List} $behavior [null]
@@ -126,42 +111,14 @@ $-zf-flex-align: (
 /// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
 /// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
 @mixin flex-grid-row-align($x: null, $y: null) {
-  @if $x {
-    @if map-has-key($-zf-flex-justify, $x) {
-      $x: map-get($-zf-flex-justify, $x);
-    }
-    @else {
-      @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'
-    }
-  }
-
-  @if $y {
-    @if map-has-key($-zf-flex-align, $y) {
-      $y: map-get($-zf-flex-align, $y);
-    }
-    @else {
-      @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'
-    }
-  }
-
-  justify-content: $x;
-  align-items: $y;
+  @include flex-align($x, $y);
 }
 
 /// Vertically align a single column within a flex row. Apply this mixin to a flex column.
 ///
 /// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
 @mixin flex-grid-column-align($y: null) {
-  @if $y {
-    @if map-has-key($-zf-flex-align, $y) {
-      $y: map-get($-zf-flex-align, $y);
-    }
-    @else {
-      @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'
-    }
-  }
-
-  align-self: $y;
+  @include flex-align-self($y);
 }
 
 @mixin foundation-flex-grid {
@@ -256,19 +213,8 @@ $-zf-flex-align: (
     flex: flex-grid-column(shrink);
   }
 
-  // Horizontal alignment using justify-content
-  @each $hdir, $prop in map-remove($-zf-flex-justify, left) {
-    .row.align-#{$hdir} {
-      @include flex-grid-row-align($x: $hdir);
-    }
-  }
-
   // Vertical alignment using align-items and align-self
   @each $vdir, $prop in $-zf-flex-align {
-    .row.align-#{$vdir} {
-      @include flex-grid-row-align($y: $vdir);
-    }
-
     .column.align-#{$vdir} {
       @include flex-grid-column-align($vdir);
     }

diff --git a/scss/util/_flex.scss b/scss/util/_flex.scss
new file mode 100644 (file)
index 0000000..de09f8e
--- /dev/null
+++ b/scss/util/_flex.scss
@@ -0,0 +1,62 @@
+$-zf-flex-justify: (
+  'left': flex-start,
+  'right': flex-end,
+  'center': center,
+  'justify': space-between,
+  'spaced': space-around,
+);
+
+$-zf-flex-align: (
+  'top': flex-start,
+  'bottom': flex-end,
+  'middle': center,
+  'stretch': stretch,
+);
+
+/// Enables flexbox by adding `display: flex` to the element.
+@mixin flex {
+  display: flex;
+}
+
+/// Horizontally or vertically aligns the items within a flex container.
+///
+/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
+/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+@mixin flex-align($x: null, $y: null) {
+  @if $x {
+    @if map-has-key($-zf-flex-justify, $x) {
+      $x: map-get($-zf-flex-justify, $x);
+    }
+    @else {
+      @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'
+    }
+  }
+
+  @if $y {
+    @if map-has-key($-zf-flex-align, $y) {
+      $y: map-get($-zf-flex-align, $y);
+    }
+    @else {
+      @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'
+    }
+  }
+
+  justify-content: $x;
+  align-items: $y;
+}
+
+/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
+///
+/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+@mixin flex-align-self($y: null) {
+  @if $y {
+    @if map-has-key($-zf-flex-align, $y) {
+      $y: map-get($-zf-flex-align, $y);
+    }
+    @else {
+      @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'
+    }
+  }
+
+  align-self: $y;
+}

diff --git a/scss/util/_util.scss b/scss/util/_util.scss
index 5ab38d25cf414c3c0c5a245715177ed776c74d09..c38b425474a77c3be4d55bcae88ab195c24e33be 100644 (file)
--- a/scss/util/_util.scss
+++ b/scss/util/_util.scss
@@ -2,14 +2,10 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-// Utilities
 @import 'unit';
 @import 'value';
 @import 'color';
 @import 'selector';
-
-// Libraries
+@import 'flex';
 @import 'breakpoint';
-
-// Mixins
 @import 'mixins';