Favourite Mixins!

_mixins.scss

//IMAGES

// SVG PNG swap out
$image-path: '../images' !default;
$fallback-extension: 'png' !default;
$retina-suffix: '@2x';
@mixin background-image($name, $size:false, $repeat: no-repeat) {
  background-image: url("#{$image-path}/#{$name}.svg");
  background-repeat: $repeat;
  @if($size) {
    background-size: $size;
  }
  .no-svg & {
    background-image: url("#{$image-path}/#{$name}.#{$fallback-extension}");
    @media only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
      background-image: url("#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension}");
    }
  }
}

// full width image mixins
@mixin full-block($image-url, $bg-size, $bg-pos, $bg-col) {
//@include full-block('bg_top.jpg', 1600px 700px, center top, $light);
  @extend %full-block-wrap;
  background: url("#{$image-path}/#{$image-url}") no-repeat fixed;
  background-size: $bg-size;
  background-position: $bg-pos;
  background-color: $bg-col;
  float: left;
  &:after {
    background: inherit;
  }
  &:before {
    background: inherit;
  }
}
%full-block-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 999px;
  }
  &:after {
    right: 100%;
  }
  &:before {
    left: 100%;
  }
}
//POSITION
// CENTERING
@mixin centered($width, $height) {
  position: absolute;
  left: 50%;
  top: 50%;
  height: $height;
  width: $width;
  margin-left: - $width / 2;
  margin-top: - $height / 2;
}
@mixin block {
  display: block;
  margin: auto;
}
// ABSOLUTE position:
@mixin position($position, $args) {
  $offsets: top right bottom left;
  position: $position;
  @each $o in $offsets {
    $i: index($args, $o);
    @if $i and $i + 1 <= length($args) and type-of( nth($args, $i + 1) ) == number {
      #{$o} : nth($args, $i + 1);
    }
  }
}
@mixin absolute($args) {
  @include position(absolute, $args);
}
@mixin fixed($args) {
  @include position(fixed, $args);
}
@mixin relative($args) {
  @include position(relative, $args);
}
//ELEMENTS
@mixin hide-text {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}
@mixin border-radius($radius...) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
}
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
@function function-text-color($color) {
    @if (lightness( $color ) > 40) {
      @return $white;
    }
    @else {
      @return $jumbo;
    }
}
$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
/*.login-box {
    @include set-value(top, 14px);
}*/

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
// @include generate-sizes("header-text", 12px, 20px, 40px);


// ANIMATIONS
/*
    Example usage:
    @include animation(10s, 5s, changecolour)
    */
@mixin animation ($delay, $duration, $animation) {
  -webkit-animation-delay: $delay;
  -webkit-animation-duration: $duration;
  -webkit-animation-name: $animation;
  -webkit-animation-fill-mode: forwards;
  /* this prevents the animation from restarting! */
  -moz-animation-delay: $delay;
  -moz-animation-duration: $duration;
  -moz-animation-name: $animation;
  -moz-animation-fill-mode: forwards;
  /* this prevents the animation from restarting! */
  animation-delay: $delay;
  animation-duration: $duration;
  animation-name: $animation;
  animation-fill-mode: forwards;
  /* this prevents the animation from restarting! */
}
@mixin keyframe ($animation_name) {
  @-webkit-keyframes $animation_name {
    @content;
  }
  @-moz-keyframes $animation_name {
    @content;
  }
  @keyframes $animation_name {
    @content;
  }
}
@include keyframe(fadeInUp) {
  0% {
    opacity: 0;
    -webkit-transform: translateY(300px);
    -moz-transform: translateY(300px);
    transform: translateY(300px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}
@include keyframe(fadeInScale) {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1.0);
  }
}


//Check for duplicates

/* all app scss styles here */
$image-path: '/images' !default;
// SVG PNG swap out
$fallback-extension: 'png' !default;
$retina-suffix: '@2x';

@mixin bg-img($name, $size:false, $repeat: no-repeat) {
  background-image: url("#{$image-path}/#{$name}.svg");
  background-repeat: $repeat;
  @if($size) {
    background-size: $size;
  }
  .no-svg & {
    background-image: url("#{$image-path}/#{$name}.#{$fallback-extension}");
    @media only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
      background-image: url("#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension}");
    }
  }
}

@mixin image-2x($image, $ext) {
  background-image: url("#{$image-path}/#{$image}.#{$ext}");
  background-repeat: no-repeat;
  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url("#{$image-path}/#{$image}@2x.#{$ext}");
    background-repeat: no-repeat;
  }
}

@mixin full-bg ($image) {
  background: $primary-color url("#{$image-path}/#{$image}.jpg") no-repeat center center;
  //background-blend-mode: multiply;
  background-size: cover;
  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background: $primary-color url("#{$image-path}/#{$image}@2x.jpg") no-repeat center center;
    background-size: cover;
  }
}

//TEXT ELEMENTS
@mixin hide-text {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

@mixin border-radius($radius...) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
}

//TOP image
@mixin css3($property, $value) {
  @each $prefix in -webkit-,
  -moz-,
  -ms-,
  -o-,
  '' {
    #{$prefix}#{$property}: $value;
  }
}

@mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
}

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

// Transparent buttons
@mixin trans-bg($bg, $border, $min-w) {
  background: transparent;
  border: 1px solid $border;
  min-width: $min-w;
  &:hover {
    background: darken($bg,.1%);
    @include transition(all, .3s, ease);
  }
  &:active {
    background: darken($bg,25%);
  }
}

@mixin separator {
  content: "";
  height: 1px;
  background: $warm-grey;
  width: 100%;
  display: block;
}

@mixin grayscale(){
  //Internet Explorer 6 - 9
  filter: gray;
  //Chrome 19+
  -webkit-filter: grayscale(100%);
  //Firefox 10+
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  //Standard
  filter: grayscale(100%);
}

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


@mixin radial-gradient($from, $to) {
    background: -moz-radial-gradient(center, circle cover, $from 0%, $to 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $from), color-stop(100%, $to));
    background: -webkit-radial-gradient(center, circle cover, $from 0%, $to 100%);
    background: -o-radial-gradient(center, circle cover, $from 0%, $to 100%);
    background: -ms-radial-gradient(center, circle cover, $from 0%, $to 100%);
    background: radial-gradient(center, circle cover, $from 0%, $to 100%);
    background-color: $from;
}

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

%flexbox { @include flexbox; }

@mixin order($int: 0) {
	-webkit-box-ordinal-group: $int + 1;
	-webkit-order: $int;
	-moz-order: $int;
	-ms-flex-order: $int;
	order: $int;
}



// MEDIA
@mixin medium-up {
  @media #{$medium-up} {
    @content;
  }
}

@mixin large-up {
  @media #{$large-up} {
    @content;
  }
}