Stylus Mixins

mixin.styl

border-radius(n)
  -webkit-border-radius n
	-moz-border-radius n
	border-radius n
  


// Math
// ------------------------------
floor(n){math(n, 'floor')}
random(n){math(n, 'random')}
random-range(min, max)
	min + (random(1) * (max - min))


// Fonts
// ------------------------------

fontsize(size = 12px, line = 1.1)
    font-size:   size
    line-height: size * line

font-family(family)

	&, h1, h2, h3, h4, h5, h6, p
		font-family : unquote(family)
		font-weight : 400

	&, p
		fontsize(12px)

	h2
		fontsize(15px, 1.3)


// Position and size
// ------------------------------

fullscreen()
	width: 100%
	height: 100%

size(width, height)
	width  : width
	height : height
	
center-origin(width, height)
	margin : -(width/2) 0 0 (-(height/2))
	
center-vert(height)
	margin-top: -(height/2)
	top: 50%
	
center-horiz(width)
	margin-left: -(width/2)
	left: 50%
	

center-all(width, height)
	center-horiz(width)
	center-vert(height)

	size(width, height)
	



		

// Transitions
// ------------------------------

trans_hidden( delay=0s )
	visibility:hidden;
	opacity:0;
	transition visibility 0s linear 0.5s, opacity 0.5s linear
	
	
trans_visible( delay=0s )
	visibility:visible;
	opacity:1;
	transition-delay:0s;
	

trans(time=1s)
	transition transform time easeInOutQuad, left time easeInOutQuad, top time easeInOutQuad
	
all-trans(time=1s)
	transition transform time easeInOutQuad, left time easeInOutQuad, top time easeInOutQuad, visibility 0s linear 0.5s, opacity 0.5s linear
	
trans2(time=1s)
	transition transform time easeOutQuad, left time easeOutQuad, top time easeOutQuad

opacity-trans(time=1s)
	transition opacity time linear

move(_left=0px,_top=0px,_scale=1.0, time=0s)		
	&.supported
		trans(time)
		transform : translate3d( _left, _top, 0px ) scale(_scale, _scale) 
	&.fallback
		left: _left
		top: _top


move2(_left=0px,_top=0px,_scale=1.0, time=0s, rx = 0, ry = 0, rz = 0, rdegree = 0deg)		
	&.supported
		trans2(time)
		transform : translate3d( _left, _top, 0px ) scale3d(_scale, _scale, _scale) rotate3d(rx, ry, rz, rdegree) 
	&.fallback
		left: _left
		top: _top

// Star animations
// ------------------------------

star-flickering-animation(id = 1, duration = .7s, direction = normal, ease-function = easeInOutQuad)
	animation-name            : ('star_flickering_%s' % id)
	animation-duration        : duration
	animation-iteration-count : infinite
	animation-direction       : direction
	animation-easing-function : ease-function


// Styles
// ------------------------------

opaque_bg()
	fullscreen()
	z-index: 1
	absolute top 0 left 0

	background: rgba(1, 1, 1, 0.5)


prevent_flicker()
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;