Add flex-order() mixin and order classes, and add deprecation warnings to old flex...

diff --git a/scss/components/_flex.scss b/scss/components/_flex.scss
index 0cd142fbfbe99c3c3757c6d44a6abc3da780cd59..1d27b0670d3f570272c32b867ae614545efa527d 100644 (file)
--- a/scss/components/_flex.scss
+++ b/scss/components/_flex.scss
@@ -18,4 +18,13 @@
       @include flex-align-self($y: $vdir);
     }
   }
+
+  // Source ordering
+  @include -zf-each-breakpoint {
+    @for $i from 1 through 6 {
+      .#{$-zf-size} {
+        @include flex-order($i);
+      }
+    }
+  }
 }

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index ae0b779e5a7dcbf42195c6f83db98d92cdd35c58..27e15c0d093d9433a11919af8ffbf1a6b7aaf991 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -103,7 +103,8 @@
 /// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.
 /// @param {Number} $order [0] - Order number to apply.
 @mixin flex-grid-order($order: 0) {
-  order: $order;
+  @warn 'This mixin is being replaced by flex-order(). flex-grid-order() will be removed in Foundation 6.3.';
+  @include flex-order($order);
 }
 
 /// Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.
@@ -111,6 +112,7 @@
 /// @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) {
+  @warn 'This mixin is being replaced by flex-align(). flex-grid-row-align() will be removed in Foundation 6.3.';
   @include flex-align($x, $y);
 }
 
@@ -118,6 +120,7 @@
 ///
 /// @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) {
+  @warn 'This mixin is being replaced by flex-align-self(). flex-grid-column-align() will be removed in Foundation 6.3.';
   @include flex-align-self($y);
 }
 
@@ -166,7 +169,7 @@
     @for $i from 1 through 6 {
       // Source ordering
       .#{$-zf-size}-order-#{$i} {
-        @include flex-grid-order($i);
+        @include flex-order($i);
       }
     }
 
@@ -217,7 +220,7 @@
   // Remove these in 6.3
   @each $vdir, $prop in $-zf-flex-align {
     .column.align-#{$vdir} {
-      @include flex-grid-column-align($vdir);
+      @include flex-align-self($vdir);
     }
   }
 

diff --git a/scss/util/_flex.scss b/scss/util/_flex.scss
index de09f8e68e2f7fec411a98c7847e1da81485810f..cf7d345550ed0d073d6c0b587273d667d48a0d7e 100644 (file)
--- a/scss/util/_flex.scss
+++ b/scss/util/_flex.scss
@@ -60,3 +60,9 @@ $-zf-flex-align: (
 
   align-self: $y;
 }
+
+/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.
+/// @param {Number} $order [0] - Order number to apply.
+@mixin flex-order($order: 0) {
+  order: $order;
+}