mixins

mixins.scss

@mixin clearfix() {
  &:after {
    content: " ";
    display: table;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin background-image-retina($file, $type, $width, $height, $positionX: left, $positionY: top, $background-repeat: no-repeat, $cover: '') {
  background-image: url($file + '.' + $type);
  width: $width;
  height: $height;
  background-position: $positionX $positionY;
  background-repeat: $background-repeat;
  @if $cover == 'cover' {
    background-size: $cover;
  } @else {
    background-size: $width $height;
  }
  @media
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min--moz-device-pixel-ratio: 2),
  screen and (-moz-min-device-pixel-ratio: 2),
  screen and (-o-min-device-pixel-ratio: 2/1),
  screen and (min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
    & {
      background-image: url($file + '@2x.' + $type);
    }
  }
}

@mixin svg($path, $width, $height, $position: 50% 50%, $background-size: 100%){
  background-image: image-url('#{$path}.png');
  background-image: image-url('#{$path}.svg');
  background-position: $position;
  background-repeat: no-repeat;
  background-size: $background-size;
  width: $width;
  height: $height;
}

@function em($pixels, $context: 16) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }

  @if (unitless($context)) {
    $context: $context * 1px;
  }

  @return $pixels / $context * 1em;
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex-wrap($values) {
  -webkit-flex-wrap: $values;
  -moz-flex-wrap:  $values;
  -ms-flex-wrap:  $values;
  flex-wrap:  $values;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin flex-flow($values) {
  -webkit-flex-flow: $values;
  -moz-flex-flow: $values;
  -ms-flex-flow: $values;
  flex-flow: $values;
}

@mixin flex-direction($values) {
  -webkit-flex-direction: $values;
  -moz-flex-direction:  $values;
  -webkit-flex-direction:  $values;
  -ms-flex-direction:  $values;
  flex-direction:  $values;
}

@mixin align-content($values) {
  -webkit-align-content: $values;
  // -moz-align-content: $values;
  -moz-box-align: $values;
  -ms-flex-line-pack: $values;
  align-content: $values;
}

@mixin align-items($values) {
  -webkit-box-align: $values;
  -webkit-align-items: $values;
  -moz-align-items: $values;
  -ms-flex-align: $values;
  align-items: $values;
}

@mixin justify-content($values) {
  -webkit-justify-content: $values;
  -moz-justify-content: $values;
  -ms-justify-content: $values;
  justify-content: $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}

@mixin flex-grow($val) {
  -webkit-flex-grow: $val;
  -moz-flex-grow: $val;
  -ms-flex-positive: $val;
  flex-grow: $val;
}

@mixin flex-shrink($val) {
  -webkit-flex-shrink: $val;
  -moz-flex-shrink: $val;
  -ms-flex-negative: $val;
  flex-shrink: $val;
}

@mixin align-self($val) {
  -webkit-align-self: $val;
  -moz-align-self: $val;
  -ms-align-self: $val;
  align-self: $val;
}

@mixin appearance($value){
  -webkit-appearance: $value;
     -moz-appearance: $value;
      -ms-appearance: $value;
       -o-appearance: $value;
          appearance: $value;
}

@mixin transition($value...){
  -webkit-transition: $value;
     -moz-transition: $value;
      -ms-transition: $value;
       -o-transition: $value;
          transition: $value;
}

@mixin truncate {
  text-overflow: ellipsis;
    white-space: nowrap;
       overflow: hidden;
}

@mixin padding-box{
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
       -o-background-clip: padding;
      -ms-background-clip: padding;
          background-clip: padding-box;
}

@mixin border-box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

@mixin border-radius($radius: 3px, $direction: 'all') {
  @if $direction == 'all' {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
            border-radius: $radius;
  }

  @if $direction == 'left'{
    -webkit-border-radius: $radius 0px 0px $radius;
       -moz-border-radius: $radius 0px 0px $radius;
        -ms-border-radius: $radius 0px 0px $radius;
            border-radius: $radius 0px 0px $radius;
  }

  @if $direction == 'right'{
    -webkit-border-radius: 0px $radius $radius 0px;
       -moz-border-radius: 0px $radius $radius 0px;
        -ms-border-radius: 0px $radius $radius 0px;
            border-radius: 0px $radius $radius 0px;
  }
   @if $direction == 'top'{
    -webkit-border-radius: $radius $radius 0px 0px;
       -moz-border-radius: $radius $radius 0px 0px;
        -ms-border-radius: $radius $radius 0px 0px;
            border-radius: $radius $radius 0px 0px;
  }

 @if $direction == 'bottom'{
    -webkit-border-radius: 0px 0px $radius $radius;
       -moz-border-radius: 0px 0px $radius $radius;
        -ms-border-radius: 0px 0px $radius $radius;
            border-radius: 0px 0px $radius $radius;
  }
}

@mixin arrow($direction, $size, $color) {
  height: 0;
  width: 0;

  @if $direction == 'up' {
    border-bottom: $size solid $color;
     border-right: $size solid transparent;
      border-left: $size solid transparent;

  }

  @if $direction == 'down' {
    border-right: $size solid transparent;
     border-left: $size solid transparent;
      border-top: $size solid $color
  }

  @if $direction == 'left' {
    border-bottom: $size solid transparent;
     border-right: $size solid $color;
       border-top: $size solid transparent;
  }

  @if $direction == 'right' {
    border-bottom: $size solid transparent;
      border-left: $size solid $color;
       border-top: $size solid transparent;
  }
}

@mixin box-shadow($top, $left, $blur, $width : 0px, $color:'', $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $top $left $blur $width $color;
       -moz-box-shadow: inset $top $left $blur $width $color;
            box-shadow: inset $top $left $blur $width $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $width $color;
       -moz-box-shadow: $top $left $blur $width $color;
            box-shadow: $top $left $blur $width $color;
  }
}

@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ", "};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  -ms-animation:     $animations;
  animation:         $animations;
}

@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
  -moz-animation-duration:    $duration;
  -o-animation-duration:      $duration;
  -ms-animation-duration:     $duration;
  animation-duration:         $duration;
}

@mixin animation-delay($duration) {
  -webkit-animation-delay: $duration;
  animation-delay: $duration;
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @-ms-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

@mixin transform($params){
  -webkit-transform: $params;
     -moz-transform: $params;
      -ms-transform: $params;
          transform: $params;
}

@mixin placeholder {
  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
  @each $placeholder in $placeholders {
    &:#{$placeholder}-placeholder {
      @content;
    }
  }
}

@mixin appearance($params) {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}