_flex.scss in foundation-rails-6.3.0.0

- old
+ new

@@ -11,10 +11,17 @@
   'bottom': flex-end,
   'middle': center,
   'stretch': stretch,
 );
 
+$-zf-flex-direction: (
+  'row': row,
+  'row-reverse': row-reverse,
+  'column': column,
+  'column-reverse': column-reverse,
+);
+
 /// Enables flexbox by adding `display: flex` to the element.
 @mixin flex {
   display: flex;
 }
 
@@ -26,20 +33,20 @@
   @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.'
+      @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.'
+      @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;
@@ -52,17 +59,27 @@
   @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.'
+      @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';
     }
   }
 
   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;
+}
+
+/// Change flex-direction
+/// @param {Keyword} $direction [row] - Flex direction to use. Can be
+///   - row (default): same as text direction
+///   - row-reverse: opposite to text direction
+///   - column: same as row but top to bottom
+///   - column-reverse: same as row-reverse top to bottom
+@mixin flex-direction($direction: row) {
+  flex-direction: $direction;
 }