Stylus Mixin Template [CSS,Stylus,Configure,Settings,Template]

stylus-mixin.styl

//################################################################ STYLUS MIXIN	

// Colors
$lavender = #9569bb
$pink = #f468f9
$white = #fff
$black = #000
$grayDark = #333
$grayMed = #666
$grayLight = #999
$purple = #520192
$purpleDark = #36015f
$purpleLighter = #8b00f6
$teal = rgba(120,229,219,1)
$tealDark = rgba(67,128,122,1)
$lime = rgba(120,182,1,1)
$limeDark = rgba(125,169,41,1)

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
$gradient( $color, $colorDark )
	background: $colorDark
	background: -moz-linear-gradient(top,  $color 0%, $colorDark 100%)
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color), color-stop(100%,$colorDark))
	background: -webkit-linear-gradient(top, $color 0%, $colorDark 100%)
	background: -o-linear-gradient(top, $color 0%, $colorDark 100%)
	background: -ms-linear-gradient(top, $color 0%, $colorDark 100%)
	background: linear-gradient(to bottom, $color 0%, $colorDark 100%)

// Flexible image assets
$img_base = "../img/"
$bg_img( image )
	url( $img_base + image )

trbl( $t, $r, $b, $l )
	top: $t
	right: $r
	bottom: $b
	left: $l