vendor.scss

@mixin vendor($prop, $args) {
  @each $vendor in webkit, moz, ms, o {
    -#{$vendor}-#{$prop}: $args;
    #{$prop}: $args;
  }
}

@mixin vendorValue($prop, $args) {
  #{$prop}: -webkit- + $args;
  #{$prop}: -moz- + $args;
  #{$prop}: -ms- + $args;
  #{$prop}: -o- + $args;
  #{$prop}: $args;
}

@mixin vendorNoMS($prop, $args) {
  @each $vendor in webkit, moz, o {
    -#{$vendor}-#{$prop}: $args;
    #{$prop}: $args;
  }
}

@mixin vendorValueNoMS($prop, $args) {
  #{$prop}: -webkit- + $args;
  #{$prop}: -moz- + $args;
  #{$prop}: -o- + $args;
  #{$prop}: $args;
}

@mixin animation ($arguments) {
  @include vendor("animation", $arguments);
}

@mixin animation-fill-mode {
  @include vendor("animation-fill-mode", $arguments);
}

@mixin border-radius ($arguments) {
  @include vendor("border-radius", $arguments);
}

@mixin box-shadow ($arguments) {
  @include vendor("box-shadow", $arguments);
}

@mixin background-size ($arguments) {
  @include vendor("background-size", $arguments);
}

@mixin backface-visibility($arguments) {
  @include vendor("backface-visibility", $arguments);
}

/* ====================== FLEXBOX ====================== */
@mixin display-box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@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;
}

@mixin box-sizing($arguments) {
  -moz-box-sizing: $arguments;
  box-sizing: $arguments;
}

@mixin box-flex($arguments) {
  @include vendorNoMS("box-flex", $arguments);
  @if $arguments > 0 {
    -ms-flex: $arguments 0 auto;
  }
  @else {
    -ms-flex: 0 $arguments auto;
  }
}
/*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 ordinal-group($arguments) {
  @include vendorNoMS("box-ordinal-group", $arguments);
  -ms-flex-order: $arguments;
}

@mixin box-lines($arguments) {
  @include vendor("box-lines", $arguments);
}

/* ====================== BOXFLEX ====================== */
@mixin display-flex {
  @include vendorValueNoMS("display", flex);
}

@mixin flex-flow($arguments) {
  @include vendor("flex-flow", $arguments);
}

@mixin justify-content($arguments) {
  @include vendor("justify-content", $arguments);
}

@mixin align-content($arguments) {
  @include vendor("align-content", $arguments);
}

@mixin align-items($arguments) {
  @include vendor("align-items", $arguments);
}

@mixin order($arguments) {
  @include vendor("order", $arguments);
}

@mixin flex($arguments) {
  @include vendor("flex", $arguments);
}

@mixin align-self($arguments) {
  @include vendor("align-self", $arguments);
}

/* ====================== TRANSITIONS ====================== */
@mixin transition($arguments...) {
  @include vendor("transition", $arguments);
}

@mixin transition-delay($arguments) {
  @include vendor("transition-delay", $arguments);
}

@mixin transition-property($arguments) {
  @include vendor("transition-property", $arguments);
}

@mixin transition-duration($arguments) {
  @include vendor("transition-duration", $arguments);
}

@mixin transition-timing-function($arguments) {
  @include vendor("transition-timing-function", $arguments);
}

@mixin transform($arguments) {
  @include vendor("transform", $arguments);
}

@mixin transform-origin($arguments) {
  @include vendor("transform-origin", $arguments);
}