From: Abdullah Salem <abdullahsalem@outlook.com>
Date: Mon, 25 Sep 2017 13:09:05 +0000 (+0300)
Subject: Fixed flex horizontal alignment. Issue #10125
X-Git-Tag: v6.4.4-rc1~10^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10676%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Fixed flex horizontal alignment. Issue #10125
---

diff --git a/scss/_global.scss b/scss/_global.scss
index 1efbb4896..3ce6519bb 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -121,6 +121,9 @@ $global-button-cursor: auto !default;
 $global-left: if($global-text-direction == rtl, right, left);
 $global-right: if($global-text-direction == rtl, left, right);
 
+// Internal variable that contains the flex justifying options
+$-zf-flex-justify: -zf-flex-justify($global-text-direction);
+
 /// Global tolerance for color pick contrast.
 /// @type Number
 $global-color-pick-contrast-tolerance: 0 !default;
diff --git a/scss/components/_flex.scss b/scss/components/_flex.scss
index 32b79ba58..47d0da4f1 100644
--- a/scss/components/_flex.scss
+++ b/scss/components/_flex.scss
@@ -71,14 +71,14 @@ $flexbox-responsive-breakpoints: true !default;
 
 @mixin foundation-flex-classes {
   // Horizontal alignment using justify-content
-  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') {
+  @each $hdir, $prop in $-zf-flex-justify {
     .align-#{$hdir} {
       @include flex-align($x: $hdir);
     }
   }
   
   // Horizontal alignment Specifically for Vertical Menu
-  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left', 'justify', 'spaced') {
+  @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {
     .align-#{$hdir} {
       &.vertical.menu > li > a { 
         @include flex-align($x: $hdir);
diff --git a/scss/util/_flex.scss b/scss/util/_flex.scss
index cd24dd719..2a48b6dbd 100644
--- a/scss/util/_flex.scss
+++ b/scss/util/_flex.scss
@@ -1,10 +1,15 @@
-$-zf-flex-justify: (
-  'left': flex-start,
-  'right': flex-end,
-  'center': center,
-  'justify': space-between,
-  'spaced': space-around,
-);
+@function -zf-flex-justify($text-direction){
+  $-zf-flex-justify: (
+    'left': if($text-direction == rtl, flex-end, flex-start),
+    'right': if($text-direction == rtl, flex-start, flex-end),
+    'center': center,
+    'justify': space-between,
+    'spaced': space-around,
+  );
+
+  @return $-zf-flex-justify;
+}
+
 
 $-zf-flex-align: (
   'top': flex-start,