Fixed flex horizontal alignment. Issue #10125

diff --git a/scss/_global.scss b/scss/_global.scss
index 1efbb4896253e151051f0afa222436e688459e77..3ce6519bb20c302de7d9c02ac56d00aa17feb186 100644 (file)
--- 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 32b79ba581f82b910ad7b4bce67297b8d4eb08b7..47d0da4f11d4c9aace2b96072eff5d9cc09b890c 100644 (file)
--- 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 cd24dd719785a4e7ead11fc4eb1cab1ef99b640d..2a48b6dbdb2f9dbfbb6d35513ec680226e02297d 100644 (file)
--- 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,