_mixins.scss

// Bourbon mixins

$prefix-for-webkit:    true !default;
$prefix-for-mozilla:   true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera:     true !default;
$prefix-for-spec:      true !default;

@function _linear-positions-parser($pos) {
  $type: type-of(nth($pos, 1));
  $spec: null;
  $degree: null;
  $side: null;
  $corner: null;
  $length: length($pos);
  // Parse Side and corner positions
  @if ($length > 1) {
    @if nth($pos, 1) == "to" { // Newer syntax
      $side: nth($pos, 2);

      @if $length == 2 { // eg. to top
        // Swap for backwards compatability
        $degree: _position-flipper(nth($pos, 2));
      }
      @else if $length == 3 { // eg. to top left
        $corner: nth($pos, 3);
      }
    }
    @else if $length == 2 { // Older syntax ("top left")
      $side: _position-flipper(nth($pos, 1));
      $corner: _position-flipper(nth($pos, 2));
    }

    @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
    }
    @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
    }
    @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
    }
    @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
    }
    $spec: to $side $corner;
  }
  @else if $length == 1 {
    // Swap for backwards compatability
    @if $type == string {
      $degree: $pos;
      $spec: to _position-flipper($pos);
    }
    @else {
      $degree: -270 - $pos; //rotate the gradient opposite from spec
      $spec: $pos;
    }
  }
  $degree: unquote($degree + ",");
  $spec:   unquote($spec + ",");
  @return $degree $spec;
}

@function _position-flipper($pos) {
 @return if($pos == left, right, null)
         if($pos == right, left, null)
         if($pos == top, bottom, null)
         if($pos == bottom, top, null);
}


//************************************************************************//
// Example: @include prefixer(border-radius, $radii, webkit ms spec);
//************************************************************************//
// Variables located in /settings/_prefixer.scss

@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    }
    @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    }
    @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    }
    @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    }
    @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    }
    @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin disable-prefix-for-all() {
  $prefix-for-webkit:    false !global;
  $prefix-for-mozilla:   false !global;
  $prefix-for-microsoft: false !global;
  $prefix-for-opera:     false !global;
  $prefix-for-spec:      false !global;
}

@mixin box-sizing ($box) {
//  content-box | border-box | inherit
  @include prefixer(box-sizing, $box, webkit moz spec);
}

@mixin appearance ($value) {
  @include prefixer(appearance, $value, webkit moz ms o spec);
}

@mixin user-select($value: none) {
  @include prefixer(user-select, $value, webkit moz ms spec);
}

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

  @if length($size) > 1 {
    $height: nth($size, 2);
  }

  @if $height == auto or (type-of($height) == number and not unitless($height)) {
    height: $height;
  }

  @if $width == auto or (type-of($width) == number and not unitless($width)) {
    width: $width;
  }
}

// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all 2s ease-in-out);
//          @include transition (opacity 1s ease-in 2s, width 2s ease-out);
//          @include transition-property (transform, opacity);

@mixin transition ($properties...) {
  // Fix for vendor-prefix transform property
  $needs-prefixes: false;
  $webkit: ();
  $moz: ();
  $spec: ();

  // Create lists for vendor-prefixed transform
  @each $list in $properties {
    @if nth($list, 1) == "transform" {
      $needs-prefixes: true;
      $list1: -webkit-transform;
      $list2: -moz-transform;
      $list3: ();

      @each $var in $list {
        $list3: join($list3, $var);

        @if $var != "transform" {
          $list1: join($list1, $var);
          $list2: join($list2, $var);
        }
      }

      $webkit: append($webkit, $list1);
         $moz: append($moz,    $list2);
        $spec: append($spec,   $list3);
    }

    // Create lists for non-prefixed transition properties
    @else {
      $webkit:  append($webkit, $list, comma);
      $moz:     append($moz,    $list, comma);
      $spec:    append($spec,   $list, comma);
    }
  }

  @if $needs-prefixes {
    -webkit-transition: $webkit;
       -moz-transition: $moz;
            transition: $spec;
  }
  @else {
    @if length($properties) >= 1 {
      @include prefixer(transition, $properties, webkit moz spec);
    }

    @else {
      $properties: all 0.15s ease-out 0s;
      @include prefixer(transition, $properties, webkit moz spec);
    }
  }
}

@mixin transition-property ($properties...) {
   -webkit-transition-property: transition-property-names($properties, 'webkit');
      -moz-transition-property: transition-property-names($properties, 'moz');
           transition-property: transition-property-names($properties, false);
}

@mixin transition-duration ($times...) {
  @include prefixer(transition-duration, $times, webkit moz spec);
}

@mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  @include prefixer(transition-timing-function, $motions, webkit moz spec);
}

@mixin transition-delay ($times...) {
  @include prefixer(transition-delay, $times, webkit moz spec);
}

@mixin transform($property: none) {
//  none | <transform-function>
  @include prefixer(transform, $property, webkit moz ms o spec);
}

@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right  | length | %
// y-axis - top  | center | bottom | length | %
// z-axis -                          length
  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
}

@mixin linear-gradient($pos, $G1, $G2: null,
                       $G3: null, $G4: null,
                       $G5: null, $G6: null,
                       $G7: null, $G8: null,
                       $G9: null, $G10: null,
                       $fallback: null) {
  // Detect what type of value exists in $pos
  $pos-type: type-of(nth($pos, 1));
  $pos-spec: null;
  $pos-degree: null;

  // If $pos is missing from mixin, reassign vars and add default position
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
     $pos: null;
  }

  @if $pos {
    $positions: _linear-positions-parser($pos);
    $pos-degree: nth($positions, 1);
    $pos-spec:   nth($positions, 2);
  }

  $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;

  // Set $G1 as the default fallback color
  $fallback-color: nth($G1, 1);

  // If $fallback is a color use that color as the fallback color
  @if (type-of($fallback) == color) or ($fallback == "transparent") {
    $fallback-color: $fallback;
  }

  background-color: $fallback-color;
  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
}