classes.sass

classes.sass

/**
 * Sass mixins
 */

@charset "UTF-8"
// Force output of above line by adding a unicode character. ♫

// -----------------------------------------------

@mixin textFillColor($type)
	text-fill-color: $type
	-khtml-text-fill-color: $type
	-webkit-text-fill-color: $type
	-ms-text-fill-color: $type
	-o-text-fill-color: $type

@mixin backgroundClip($type)
	background-clip: $type
	-khtml-background-clip: $type
	-webkit-background-clip: $type
	-moz-background-clip: $type
	-ms-background-clip: $type
	-o-background-clip: $type

@mixin backgroundSize($type)
	background-size: $type
	-khtml-background-size: $type
	-webkit-background-size: $type
	-moz-background-size: $type
	-ms-background-size: $type
	-o-background-size: $type

@mixin textShadow($string)
	text-shadow: $string
	-khtml-text-shadow: $string
	-webkit-text-shadow: $string
	-moz-text-shadow: $string
	-ms-text-shadow: $string
	-o-text-shadow: $string

@mixin boxShadow($string)
	box-shadow: $string
	-khtml-box-shadow: $string
	-webkit-box-shadow: $string
	-moz-box-shadow: $string
	-ms-box-shadow: $string
	-o-box-shadow: $string

@mixin transitionDuration($time)
	transition-duration: $time
	-khtml-transition-duration: $time
	-webkit-transition-duration: $time
	-moz-transition-duration: $time
	-ms-transition-duration: $time
	-o-transition-duration: $time

@mixin transitionTiming($easing: ease)
	transition-timing-function: $easing
	-khtml-transition-timing-function: $easing
	-webkit-transition-timing-function: $easing
	-moz-transition-timing-function: $easing
	-ms-transition-timing-function: $easing
	-o-transition-timing-function: $easing

@mixin transition($string)
	transition: $string
	-khtml-transition: $string
	-webkit-transition: $string
	-moz-transition: $string
	-ms-transition: $string
	-o-transition: $string

@mixin transform($type)
	transform: $type
	-khtml-transform: $type
	-webkit-transform: $type
	-moz-transform: $type
	-ms-transform: $type
	-o-transform: $type

@mixin boxSizing($type)
	box-sizing: $type
	-khtml-box-sizing: $type
	-webkit-box-sizing: $type
	-moz-box-sizing: $type
	-ms-box-sizing: $type
	-o-box-sizing: $type

@mixin borderRadius($radius)
	border-radius: $radius
	-khtml-border-radius: $radius
	-webkit-border-radius: $radius
	-moz-border-radius: $radius
	-ms-border-radius: $radius
	-o-border-radius: $radius

@mixin mask($source)
	mask-image: url("@{source")
	-khtml-mask-image: url("@{source")
	-webkit-mask-image: url("@{source")
	-moz-mask-image: url("@{source")
	-ms-mask-image: url("@{source")
	-o-mask-image: url("@{source")

@mixin columns($len)
	columns: $len
	-khtml-columns: $len
	-webkit-columns: $len
	-moz-columns: $len
	-ms-columns: $len
	-o-columns: $len

@mixin columnCount($len)
	column-count: $len
	-khtml-column-count: $len
	-webkit-column-count: $len
	-moz-column-count: $len
	-ms-column-count: $len
	-o-column-count: $len

@mixin fontStretch($string)
	font-stretch: $string
	-khtml-font-stretch: $string
	-webkit-font-stretch: $string
	-moz-font-stretch: $string
	-ms-font-stretch: $string
	-o-font-stretch: $string

@mixin clearfix
	zoom: 1
	
	&:after, &:before
		content: '\0020'
		display: table
		height: 0
		overflow: hidden
	
	&:after 
		clear: both 

@mixin imageBlock($width, $height, $source, $display: block)
	display: $display
	width: $width
	height: $height
	text-indent: -999em
	background: url(../images/#{$source}) no-repeat

@mixin linearGradient($from, $to, $img: 0, $dist: 100)
	@if $img != 0
		background-image: url(../images/#{$img}), -webkit-gradient(linear, 0 0, 0 $dist, from($from), to($to))
		background-image: url(../images/#{$img}), -moz-linear-gradient($from, $to)

	@if $img == 0
		background-image: -webkit-gradient(linear, 0 0, 0 $dist, from($from), to($to))
		background-image: -moz-linear-gradient($from, $to)

@mixin wrap($y: 0)
	width: $maxWidth
	margin: $y auto

@mixin sq($dim)
	width: $dim
	height: $dim

@mixin verticallyCenter
	display: -webkit-box
	display: -moz-box
	display: -ms-box
	display: box
	-webkit-box-orient: vertical
	-moz-box-orient: vertical
	-ms-box-orient: vertical
	box-orient: vertical
	-webkit-box-align: center
	-moz-box-align: center
	-ms-box-align: center
	box-align: center
	-webkit-box-pack: center
	-moz-box-pack: center
	-ms-box-pack: center
	box-pack: center

@mixin animate($name: fadeIn, $duration: 1s, $delay: 0, $function: ease, $mode: both)
	animation: $name $duration $delay $function $mode
	-webkit-animation: $name $duration $delay $function $mode
	-moz-animation: $name $duration $delay $function $mode

// Cubic
$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190)
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000)
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000)

// Circ
$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335)
$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000)
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860)

// Expo
$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035)
$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000)
$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000)

// Quad
$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530)
$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940)
$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955)

// Quart
$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220)
$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000)
$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000)

// Quint
$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060)
$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000)
$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000)

// Sine
$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715)
$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000)
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950)

// Back
$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045)
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275)
$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550)


// -----------------------------------------------

/**
 * Content-powered mixins
 */
// Quicker @media assignments
@mixin media($type)
	@if $type == tablet
		@media only screen and (min-width: 768px) and (max-width: 991px)
			@content

	@else if $type == mobile
		@media only screen and (max-width: 767px)
			@content

// Wordpress active states
@mixin wpActives
	&.current-menu-item > a,
	&.current-menu-parent > a,
	&.current-menu-ancestor > a
		@content

// -----------------------------------------------

/**
 * Global styles/variables that do not need repeating
 */
$sansFamily: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif

a,h1,h2,h3,h4,
p,blockquote,pre,
input,button,textarea,
img,figure,video,object,
audio,em,b,strong,
section,article,
span
	@include transitionDuration(.25s)
	@include transitionTiming()

*
	position: relative
	-webkit-font-smoothing: antialiased
	-khtml-font-smoothing: antialiased
	-moz-font-smoothing: antialiased
	-ms-font-smoothing: antialiased
	-o-font-smoothing: antialiased
	-webkit-text-stroke: 1px transparent
	@include boxSizing(border-box)