classes.sass

classes.sass

@charset "UTF-8"
// ♫

$medium: 64em
$small: 40.063em

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

@function rem($size)
	$remSize: $size / 16
	@return #{$remSize}rem

@function tracking($points: 100)
	$tracking: $points / 1000
	@return #{$tracking}em

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

@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

.full-bg
	background: center no-repeat
	@include backgroundSize(cover)

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

@mixin linearGradient($from, $to, $img: 0, $dist: 50)
	background: $from

	@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 smartGradient($base, $flipped: false)
	$from: lighten($base, 2)
	$to: darken($base, 2)

	background: $base

	@if $flipped == false
		background-image: -webkit-gradient(linear, 0 0, 0 50, from($from), to($to))
		background-image: -moz-linear-gradient($from, $to)

	@else
		background-image: -webkit-gradient(linear, 0 0, 0 50, from($to), to($from))
		background-image: -moz-linear-gradient($to, $from)

@mixin transparentBG($color, $alpha)
	$rgba: rgba($color, $alpha)
	$ie: ie-hex-str($rgba)

	zoom: 1
	background-color: transparent
	background-color: $rgba
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie},endColorstr=#{$ie})

@mixin transparentColour($color, $alpha)
	color: $color
	color: rgba($color, $alpha)

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

@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 stroke($colour)
	text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour
	-khtml-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour
	-webkit-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour
	-moz-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour
	-ms-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour
	-o-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour

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

@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 transitionProperty($property)
	transition-property: $property
	-khtml-transition-property: $property
	-webkit-transition-property: $property
	-moz-transition-property: $property
	-ms-transition-property: $property
	-o-transition-property: $property

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

@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 hideBackface
	-webkit-backface-visibility: hidden
	-moz-backface-visibility: hidden
	-ms-backface-visibility: hidden
	backface-visibility: hidden

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

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

@mixin transformOrigin($origin)
	-webkit-transform-origin: $origin
	-moz-transform-origin: $origin
	-ms-transform-origin: $origin
	-o-transform-origin: $origin
	transform-origin: $origin

@mixin transformStyle($style)
	-webkit-transform-style: $style
	-moz-transform-style: $style
	-ms-transform-style: $style
	-o-transform-style: $style
	transform-style: $style

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

@mixin perspective($perspective)
	-webkit-perspective: $perspective
	-moz-perspective: $perspective
	-ms-perspective: $perspective
	-o-perspective: $perspective
	perspective: $perspective

@mixin perspectiveOrigin($string)
	-webkit-perspective-origin: $string
	-moz-perspective-origin: $string
	-ms-perspective-origin: $string
	-o-perspective-origin: $string
	perspective-origin: $string

@mixin keyframes($name)
	@-webkit-keyframes #{$name}
		@content

	@-moz-keyframes #{$name}
		@content

	@keyframes #{$name}
		@content

.noanim
	-webkit-transition: none !important
	-moz-transition: none !important
	-ms-transition: none !important
	-o-transition: none !important
	transition: none !important

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

@mixin opacity($alpha)
	$ie: $alpha * 100
	opacity: $alpha
	filter: alpha(opacity=$ie)

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

@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 imageBlock($width, $height, $source, $display: block)
	display: $display
	width: $width
	height: $height
	text-indent: -999em
	text-align: left !important
	background: url(../images/#{$source}) no-repeat

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

@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 borderImage($string)
	-webkit-border-image: $string
	-moz-border-image: $string
	-o-border-image: $string
	border-image: $string

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

@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 columnGap($gap)
	column-gap: $gap
	-khtml-column-gap: $gap
	-webkit-column-gap: $gap
	-moz-column-gap: $gap
	-ms-column-gap: $gap
	-o-column-gap: $gap

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

@mixin userSelect($type)
	user-select: $type
	-khtml-user-select: $type
	-webkit-user-select: $type
	-webkit-touch-callout: $type
	-moz-user-select: $type
	-ms-user-select: $type
	-o-user-select: $type

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

@mixin colorSelection($el: "*")
	#{$el}::selection
		@content

	#{$el}::-khtml-selection
		@content

	#{$el}::-webkit-selection
		@content

	#{$el}::-moz-selection
		@content

	#{$el}::-ms-selection
		@content

	#{$el}::-o-selection
		@content

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

@mixin clearfix
	zoom: 1

	&:after, &:before
		content: '\0020'
		display: table
		height: 0
		overflow: hidden

	&:after
		clear: both

.cls
	clear: both

.clearfix
	@include clearfix

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

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

.full-height
	height: 100%

.full-width
	width: 100%

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

@mixin cover($pos: absolute, $dist: 0)
	position: $pos
	left: $dist
	right: $dist
	bottom: $dist
	top: $dist

.cover
	@include cover

.table.cover,
.table.cover > .cell
	@include sq(100%)

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

@mixin media($type)
	@if $type == tablet
		@media only screen and (min-device-width: 767px) and (max-device-width: 1024px)
			@content

	@else if $type == tabletPortrait
		@media only screen and (min-device-width: 767px) and (max-device-width: 1024px) and (orientation: portrait)
			@content

	@else if $type == tabletLandscape
		@media only screen and (min-device-width: 767px) and (max-device-width: 1024px) and (orientation: landscape)
			@content

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

	@else if $type == mobilePortrait
		@media only screen and (max-device-width: 767px) and (orientation: portrait)
			@content

	@else if $type == mobileLandscape
		@media only screen and (max-device-width: 767px) and (orientation: landscape)
			@content

	@else if $type == retina
		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dip)
			@content

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

@mixin wpActives
	&.active > a,
	&.current-menu-item > a,
	&.current-menu-parent > a,
	&.current-menu-ancestor > a,
	&.current-page-ancestor > a,
	&.current_page_parent > a,
	&.current_page_item > a,
	&.current_page_ancestor > a,
	&.current-cat > a
		@content

@mixin wpMenu
	ul, li
		display: inline
		margin: 0
		padding: 0

	ul li
		@content

@mixin fixWPNav($correct, $remove)
	#header li
		&##{$correct} > a
			@extend %selected

		&##{$remove} > a
			@extend %default

			&:hover
				@extend %selected

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

$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)

$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)

$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)

$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)

$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)

$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)

$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)

$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)

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

[class*="grid-"]
	@include clearfix

	.item
		float: left

		@media (max-width: $small)
			width: 100% !important
			margin: auto
			text-align: center

			*
				text-align: center !important

	@for $i from 1 to 10
		&.grid-#{$i} .item
			width: 100% / $i

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

body
	text-rendering: optimizeLegibility
	font-smoothing: antialised
	-webkit-font-smoothing: antialised
	-moz-font-smoothing: antialised
	-moz-text-size-adjust: 100%
	-ms-text-size-adjust: 100%
	text-size-adjust: 100%

*
	position: relative
	@include boxSizing(border-box)

a img
	outline: 0
	border: 0

a,
input[type],
button[type],
select, textarea
	&:focus,
	&:active
		outline: 5px auto #4d90fe

figure
	margin: 0

q:before
	content: "\201C"

q:after
	content: "\201D"

.wf-loading
	visibility: hidden !important

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
	display: none !important

.notification
	padding: 10px
	margin: 15px 0
	border: 1px solid transparent

	&.error
		color: #981010
		border-color: #8F0000
		background: #FFCCCC

	&.success
		color: #258815
		border-color: #9ADF8F
		background: #D4FFCD

	&.info
		color: #2850C1
		border-color: #9FC7F5
		background: #DBECFF

	&.warning
		color: #878314
		border-color: #E5DB55
		background: #FEFCCB

.table
	display: table
	text-align: center

.cell
	display: table-cell
	vertical-align: middle

.gm-style *
	max-width: none
	@include boxSizing(content-box)

.unreverse
	direction: rtl
	unicode-bidi: bidi-override

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

.row.full-width
	max-width: none

.row.collapse .columns
	padding-left: 0
	padding-right: 0

.hide
	display: none

.invisible
	visibility: hidden

.collapse-2col .columns
	@media (min-width: $small)
		&:first-child
			padding-left: 0 !important

		&:last-child
			padding-right: 0 !important

		&:only-child
			width: 100% !important
			padding: 0 !important
			padding: 0 !important

	@media (max-width: $small)
		&.small-12
			padding-left: 0 !important
			padding-right: 0 !important

.collapse-3col .columns
	@media (min-width: $small)
		&:first-child,
		&:nth-child(3n + 1)
			padding-left: 0 !important

		&:nth-child(2),
		&:nth-child(3n + 2)
			padding: 0 .47rem

		&:last-child,
		&:nth-child(3n)
			padding-right: 0 !important

	@media (max-width: $small)
		&.small-12
			padding-left: 0 !important
			padding-right: 0 !important