mixins.scss

@mixin rectangle($width, $height, $color) {
	width: $width;
	height: $height;
	background: $color;
}

@mixin parallelogram($width, $height, $skew, $color) {
	@include rectangle($width, $height, $color);
	-webkit-transform: skew($skew);
	-moz-transform: skew($skew);
	-ms-transform: skew($skew);
	-o-transform: skew($skew);
	transform: skew($skew);
}

@mixin square($size, $color) {
	@include rectangle($size, $size, $color);
}

@mixin circle($size, $color) {
	@include square($size, $color);
	-webkit-border-radius: $size / 2;
	-moz-border-radius: $size / 2;
	border-radius: $size / 2;
}

@mixin oval($width, $height, $color) {
	width: $width;
	height: $height;
	-webkit-border-radius: #{$width} / #{$height};
	-moz-border-radius: #{$width} / #{$height};
	border-radius: #{$width} / #{$height};
	background: $color;
}

@mixin triangle($size, $color, $direction: 'up') {
	width: 0;
	height: 0;

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

@mixin corner-triangle($size, $color, $corner: 'top-left') {
	width: 0;
	height: 0;

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

@mixin trapezoid($width, $color) {
	width: $width;
	height: 0;
	border-right: $width / 2 solid transparent;
	border-bottom: $width solid $color;
	border-left: $width / 2 solid transparent;
}

@mixin chevron($width, $height, $skew, $color, $direction: 'up') {
	position: relative;
	width: $width;
	height: $height;
	
	@if $direction == 'down' {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	} @else if $direction == 'left' {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	} @else if $direction == 'right' {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	
	&:before, &:after {
		position: absolute;
		top: 0;
		width: 50%;
		height: 100%;
		background: $color;
		content: '';
	}
	&:before {
		left: 0;
		-webkit-transform: skew(0deg, $skew);
		-moz-transform: skew(0deg, $skew);
		-ms-transform: skew(0deg, $skew);
		-o-transform: skew(0deg, $skew);
		transform: skew(0deg, $skew);
	}
	&:after {
		right: 0;
		-webkit-transform: skew(0deg, -$skew);
		-moz-transform: skew(0deg, -$skew);
		-ms-transform: skew(0deg, -$skew);
		-o-transform: skew(0deg, -$skew);
		transform: skew(0deg, -$skew);
	}
}