amy-d
6/5/2014 - 2:15 AM

SASS: Arrow Mixin

SASS: Arrow Mixin

// REFERENCE http://css-tricks.com/snippets/css/css-triangle/
@mixin arrow ($direction, $size, $color) {
	@if $direction == up {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: $size solid $color;
	} @else if $direction == down {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-top: $size solid $color;
	} @else if $direction == right {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-left: $size solid $color;
	} @else if $direction == left {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-right:$size solid $color;
	}
}