Helper mixins

_helpers.scss

// Center
@mixin center($direction, $position:'absolute') {
	@if $direction == x {
		left: 50%;
		position: if($position == relative, relative, absolute);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	} @else if $direction == y {
		position: if($position == relative, relative, absolute);
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	} @else if $direction == xy {
		left: 50%;
		position: if($position == relative, relative, absolute);
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
}

// BG transparency
@mixin transparent-bg($color, $alpha) {
	$rgba: rgba($color, $alpha);
	$ie: ie($rgba);
	background-color: transparent;
	background-color: $rgba;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie},endColorstr=#{$ie});
	zoom: 1;
}

// Calc rem
@function calculate-rem($size) {
	$rem-size: $size / 16px;
	@return $rem-size * 1rem;
}

@mixin font-size($size) {
	font-size: $size;
	font-size: calculate-rem($size);
}

// Transition
@mixin transition($args...) {
	transition: $args;
}

// Border radius
@mixin border-radius($radius) {
	border-radius: $radius;
	background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

// Box shadow
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
	@if $inset {
		box-shadow:inset $top $left $blur $color;
	} @else {
		box-shadow: $top $left $blur $color;
	}
}