_mixins.scss

/*
  .monkee {
    @include clearfix;
  }
*/
@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin ratio($percent) {
  &:after {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: $percent;
  }
}

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

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin text-shadow($shadow...) {
  text-shadow: $shadow;
}

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

/* # USAGE #
  .monkee {
    @include transition-custom(timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
  }
*/
@mixin transition-custom($key, $value) {
  -webkit-transition-#{$key}: $value;
  -moz-transition-#{$key}: $value;
  -ms-transition-#{$key}: $value;
  -o-transition-#{$key}: $value;
  transition-#{$key}: $value;
}

@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}

@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
  -moz-transform: scale($ratio);
  -ms-transform: scale($ratio);
  -o-transform: scale($ratio);
  transform: scale($ratio);
}

@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}

@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
  -moz-transform: skew($x, $y);
  -ms-transform: skew($x, $y);
  -o-transform: skew($x, $y);
  transform: skew($x, $y);
}

@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
  -moz-transform: translate3d($x, $y, $z);
  -ms-transform: translate3d($x, $y, $z);
  -o-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}

@mixin transform($transforms...) {
  -webkit-transform: $transforms;
  -moz-transform: $transforms;
  -ms-transform: $transforms;
  -o-transform: $transforms;
  transform: $transforms;
}

@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
  -moz-background-clip: $clip;
  background-clip: $clip;
}

@mixin background-size($size) {
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}

@mixin linear-gradient($color1, $color2, $start: 0%, $end: 100%) {
  background-color: $color2;
  background-image: -moz-linear-gradient(top, $color1 $start, $color2 $end); /* FF3.6+ */
  background-image: -webkit-linear-gradient(top, $color1 $start, $color2 $end); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top, $color1 $start, $color2 $end); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top, $color1 $start, $color2 $end); /* IE10+ */
  background-image: linear-gradient(to bottom, $color1 $start, $color2 $end); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie-hex-str($color1)}', endColorstr='#{ie-hex-str($color2)}',GradientType=0 ); /* IE6-9 */
}

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

@mixin user-select($select) {
  -webkit-user-select: $select;
  -moz-user-select: $select;
  -o-user-select: $select;
  user-select: $select;
}

@mixin selection() {
  ::selection {
    @content;
  }
  ::-moz-selection {
    @content;
  }
}

@mixin placeholder() {
  &::-webkit-input-placeholder {
    @content;
  }

  &:-moz-placeholder { /* Firefox 18- */
    @content;
  }

  &::-moz-placeholder {  /* Firefox 19+ */
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

@mixin triangle($direction: 'up', $size: 6px, $color: #333) {
  @if type-of($direction) != "string" {
    @warn "`#{$direction}` should be a string for `triangle` mixin.";
  } @else {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    content: '';
    @if ($direction == 'up') {
      border-bottom: $size solid $color;
      border-left: 1/2*$size solid transparent;
      border-right: 1/2*$size solid transparent;
    } @else if ($direction == 'down') {
      border-top: $size solid $color;
      border-left: 1/2*$size solid transparent;
      border-right: 1/2*$size solid transparent;
    } @else if ($direction == 'left') {
      border-top: 1/2*$size solid transparent;
      border-bottom: 1/2*$size solid transparent;
      border-right: $size solid $color;
    } @else if ($direction == 'right') {
      border-top: 1/2*$size solid transparent;
      border-bottom: 1/2*$size solid transparent;
      border-left: $size solid $color;
    }
  }
}

@mixin circle($size) {
  border-radius: 50%;
  height: auto;
  padding-bottom: 0% + $size;
  width: 0% + $size;
}

@mixin square($size) {
  height: auto;
  padding-bottom: 0% + $size;
  width: 0% + $size;
}

@mixin rectangle($size) {
  height: 0;
  padding-bottom: 0% + $size / 3 *2;
  width: 0% + $size;
}

/* # USAGE #
  .visuallyhidden {
    @include visuallyhidden;
  }
*/
@mixin visuallyhidden() {
  clip: rect(0,0,0,0);
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  &.focusable:active,
  &.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }
}

@mixin font-face($font-family, $file-path, $font-weight: normal, $font-style: normal) {
  @font-face {
    font-family: $font-family;
    font-weight: $font-weight;
    font-style: $font-style;
    src: url('#{$file-path}.eot');
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
      url('#{$file-path}.woff') format('woff'),
      url('#{$file-path}.ttf') format('truetype'),
      url('#{$file-path}.svg##{$font-family}') format('svg');
  }
}

@mixin image-2x($image, $size) {
  @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) {
    background-image: url($image);
    background-size: $size;
  }
}

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

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

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

/* # USAGE #
  .icon {
    @include pseudo-elements(before, 1.56em, .125em) {
      background: #333;
      top: .25em;
    }
  }
*/
@mixin pseudo-elements($el, $width, $height){
  @if $el == "before" or $el == "after"{
  	&:#{$el}{
  		content: "";
  		position: absolute;
  		width: $width;
  		height: $height;
  		@content;
  	}
  }
  @else {
    @warn "`#{$el}` is not a valid pseudo-element.";
  }
}

@mixin bp($min, $max: false) {
  $query: only screen;

  @if $min {
    $query: append($query, "and (min-width: #{em-calc($min, 16)})", space);
  }
  @if $max {
    $query: append($query, "and (max-width: #{em-calc($max, 16)})", space);
  }

  @media #{$query} {
    @content;
  }
}

/* Functions */

/* # Return a unitless number. */
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function lighten($color, $percent) {
  @if type-of($color) != color {
    @warn "`#{$color}` should be a valid color for `lighten`.";
  } @else {
    @return mix(white, $color, $percent);
  }
}

@function darken($color, $percent) {
  @if type-of($color) != color {
    @warn "`#{$color}` should be a valid color for `shade`.";
  } @else {
    @return mix(black, $color, $percent);
  }
}

@function palette($palette, $tone: 'base') {
    @return map-get(map-get($palettes, $palette), $tone);
}

/*
  # Convert Photoshop letter spacing to pixels. http://justinmarsan.com/css-letter-spacing-in-photoshop-and-browsers/
  @params(photoshop-letter-spacing, font-size-in-pixels)

  .foo {
    letter-spacing: letter-spacing-calc(25, 16);
  }
*/
@function letter-spacing-calc($spacing, $font-size) {
  @return ( $spacing * strip-unit($font-size) / 1000) * 1px;
}

/*
  # Convert px to em.
  @params(font-size-in-pixels, optional-em-base)

  .foo {
    margin-top: em-calc(42px);
  }
*/
$em-base: 16px !default;

@function convert-to-em($value, $base-value: $em-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1em;
  @if ($value == 0em) { $value: 0; } // Turn 0em into 0
  @return $value;
}

@function em-calc($values, $base-value: $em-base) {
  $max: length($values);

  @if $max == 1 { @return convert-to-em(nth($values, 1), $base-value); }

  $emValues: ();
  @for $i from 1 through $max {
    $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
  }
  @return $emValues;
}