wp-cw/css/sass/partials/_mixins.scss

//
// Mixins
// --------------------------------------------------


// Create REM values with PX fall back
//
// Generate a REM with PX fallback from
// $baseFontSize. Enter the desired size based
// on pixels in numerical form. Supports shorthand.
//
// Forked from: http://codepen.io/thejameskyle/pen/JmBjc
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include rem($property, $values);
// Example Usage:
//    @include rem(font-size, 16px);
//    @include rem(margin, 0 24px 0 12px);
//
// Outputs:
//    font-size: 16px;
//    font-size: 1.6rem;
//    margin: 0 24px 0 12px;
//    margin: 0 2.4rem 0 1.2rem;
// ----------------------------------
$baseFontSize: 10; // Based on HTML reset html { font-size: 62.5%; }

@function parseInt($n) {
  @return $n / ($n * 0 + 1);
}

@mixin rem($property, $values) {
	$px : ();
	$rem: ();

	$root: $baseFontSize;

	@each $value in $values {
		@if $value == 0 or $value == auto {
			$px : append($px , $value);
			$rem: append($rem, $value);
		}

		@else if type-of($value) == number {
			$unit: unit($value);
			$val: parseInt($value);

			@if $unit == "px" {
				$px : append($px,  $value);
				$rem: append($rem, ($val / $root + rem));
			}

			@if $unit == "rem" {
				$px : append($px,  ($val * $root + px));
				$rem: append($rem, $value);
			}
		}

		@else {
			$px : append($px,  $value);
			$rem: append($rem, $value);
		}
	}

	@if $px == $rem {
		#{$property}: $px;
	} @else {
		#{$property}: $px;
		#{$property}: $rem;
	}
}

@function rem($value) {
	$root: $baseFontSize;
	$val: parseInt($value);
	$return: ();

	@if unit($value) == "px" {
		$return: append($return, ($val / $root + rem));
	} @else {
		$return: append($return, ($val * $root + px));
	}

	@return $return;
}

// Responsive Breakpoints
// ----------------------------------

@mixin breakpoint($point) {
  @if $point == smallscreen {
     @media screen and (max-width: 1380px) { @content; }
  }

  @else if $point == desktop {
     @media screen and (max-width: 1140px) { @content; }
  }

  @else if $point == tablet {
    @media screen and (max-width: 800px) { @content; }
  }

  @else if $point == tablet-small {
    @media screen and (max-width: 700px) { @content; }
  }

  @else if $point == mobilelandscape {
  	@media screen and (max-width: 600px) { @content; }
  }

  @else if $point == mobile {
    @media screen and (max-width: 480px)  { @content; }
  }
}


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

// Single Corner Border Radius
// ----------------------------------
@mixin border-top-left-radius($radius) {
	-webkit-border-top-left-radius: $radius;
			-moz-border-radius-topleft: $radius;
					border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
	-webkit-border-top-right-radius: $radius;
			-moz-border-radius-topright: $radius;
					border-top-right-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
	-webkit-border-bottom-right-radius: $radius;
			-moz-border-radius-bottomright: $radius;
					border-bottom-right-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
	-webkit-border-bottom-left-radius: $radius;
			-moz-border-radius-bottomleft: $radius;
					border-bottom-left-radius: $radius;
}

// Single Side Border Radius
// ----------------------------------
@mixin border-top-radius($radius) {
	@include border-top-right-radius($radius);
	@include border-top-left-radius($radius);
}
@mixin border-right-radius($radius) {
	@include border-top-right-radius($radius);
	@include border-bottom-right-radius($radius);
}
@mixin border-bottom-radius($radius) {
	@include border-bottom-right-radius($radius);
	@include border-bottom-left-radius($radius);
}
@mixin border-left-radius($radius) {
	@include border-top-left-radius($radius);
	@include border-bottom-left-radius($radius);
}

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

// Box Sizing
// ----------------------------------
@mixin box-sizing($sizing...) {
	-webkit-box-sizing: $sizing;
		 -moz-box-sizing: $sizing;
					box-sizing: $sizing;
}

// Transitions
// ----------------------------------
@mixin transition($transition...) {
	-webkit-transition: $transition;
		 -moz-transition: $transition;
			 -o-transition: $transition;
					transition: $transition;
}
@mixin transition-delay($transition-delay) {
	-webkit-transition-delay: $transition-delay;
		 -moz-transition-delay: $transition-delay;
			 -o-transition-delay: $transition-delay;
					transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
	-webkit-transition-duration: $transition-duration;
		 -moz-transition-duration: $transition-duration;
			 -o-transition-duration: $transition-duration;
					transition-duration: $transition-duration;
}

// Transformations
// ----------------------------------
@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: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
			 -o-transform: skew($x, $y);
					transform: skew($x, $y);
	-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
@mixin translate3d($x, $y, $z) {
	-webkit-transform: translate3d($x, $y, $z);
		 -moz-transform: translate3d($x, $y, $z);
			 -o-transform: translate3d($x, $y, $z);
					transform: translate3d($x, $y, $z);
}