Changes

Author: NAIARA ABAROA

vendor.scss

@@ -53,15 +53,59 @@
 
 /* ====================== FLEXBOX ====================== */
 @mixin display-box {
-  @include vendorValueNoMS("display", box);
+  display: -webkit-box;
+  display: -moz-box;
   display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
 }
 
-@mixin box-pack($arguments) {
-  @include vendorNoMS("box-pack", $arguments);
-  -ms-flex-pack: $arguments;
+@mixin flex-wrap($arguments) {
+  -webkit-flex-wrap: $arguments;
+  -ms-flex-wrap: $arguments;
+  flex-wrap: $arguments;
 }
 
+@mixin justify-content($arguments){
+  @if $arguments is flex-start{
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+  }
+  @if $arguments is flex-end{
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+  }
+  @if $arguments is center{
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+  @if $arguments is space-between{
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+  @if $arguments is space-around{
+     -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -webkit-justify-content: space-around;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+  }
+
+}
+
+
 @mixin box-align($arguments) {
   @include vendor("box-align", $arguments);
   -ms-flex-align: $arguments;
@@ -81,21 +125,32 @@
     -ms-flex: 0 $arguments auto;
   }
 }
-
-@mixin box-orient($arguments) {
-  @include vendorNoMS("box-orient", $arguments);
+/*direction of the flex container's main axis*/
+@mixin flex-direction($arguments) {
   @if $arguments is horizontal {
+    -webkit-box-direction: normal;
+    -moz-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+    -webkit-flex-direction: row;
     -ms-flex-direction: row;
+    flex-direction: row;
   }
   @else if $arguments is vertical {
+    -webkit-box-direction: normal;
+    -moz-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -webkit-flex-direction: column;
     -ms-flex-direction: column;
+    flex-direction: column;
   }
 }
 
-@mixin box-direction($arguments) {
-  @include vendorNoMS("box-direction", $arguments);
-  -ms-flex-direction: $arguments;
-}
+// @mixin box-direction($arguments) {
+//   @include vendorNoMS("box-direction", $arguments);
+//   -ms-flex-direction: $arguments;
+// }
 
 @mixin ordinal-group($arguments) {
   @include vendorNoMS("box-ordinal-group", $arguments);
@@ -145,7 +200,7 @@
 }
 
 @mixin transition-delay($arguments) {
-  @include vendor("transition-delay", $arguments); 
+  @include vendor("transition-delay", $arguments);
 }
 
 @mixin transition-property($arguments) {