rl-theme/library/sass/mixins.sass

//
// Site Name: 
// Author: 
// 
// Stylesheet: Mixins & Constants Stylesheet
// 
// This is where you can take advantage of LESS' great features: 
// Mixins & Constants. I won't go in-depth on how they work exactly,
// there are a few articles below that will help do that. What I will
// tell you is that this will help speed up simple changes like
// changing a color or adding CSS3 techniques like box shadow and
// border-radius.
// 
// A WORD OF WARNING: It's very easy to overdo it here. Be careful and
// remember less is more. 
//
//

//
// CLEARFIXIN'
//

// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ 
.clearfix 
	&:before,
	&:after
		content: ""
		display: table
	
	&:after
		clear: both
	
	zoom: 1


//
// TOOLS
//

// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
.image-replacement
	text-indent: 100%
	white-space: nowrap
	overflow: hidden


//
// COLORS
// Need help w/ choosing your colors? Try this site out:
// http://0to255.com/
//

$yellow:            #ebe16f
$red:               #fbe3e4
$green:             #e6efc2
$blue:              #d5edf8

$black:             #000
$grayDark:          lighten($black, 25%)
$gray:              lighten($black, 50%)
$grayLight:         lighten($black, 75%)
$grayLighter:       lighten($black, 90%)
$white:             #fff

// this is pulled from Bootstrap
$baseColor:         $black                 // Set a base color
$complement:        spin($baseColor, 180)  // Determine a complementary color
$split1:            spin($baseColor, 158)  // Split complements
$split2:            spin($baseColor, -158)
$triad1:            spin($baseColor, 135)  // Triads colors
$triad2:            spin($baseColor, -135)
$tetra1:            spin($baseColor, 90)   // Tetra colors
$tetra2:            spin($baseColor, -90)
$analog1:           spin($baseColor, 22)   // Analogs colors
$analog2:           spin($baseColor, -22)
	
//
// TYPOGRAPHY
//

$sans-serif:        "Helvetica Neue", Helvetica, Arial, sans-serif
$serif:             "Georgia", Cambria, Times New Roman, Times, serif


// 	To embed your own fonts, use this syntax
//	and place your fonts inside the 
//	library/fonts folder. For more information
//	on embedding fonts, go to:
//	http://www.fontsquirrel.com/
//	Be sure to remove the comment brackets.
//

//	@font-face
//    	font-family: 'Font Name'
//    	src: url('../fonts/font-name.eot')
//    	src: url('../fonts/font-name.eot?#iefix') format('embedded-opentype'),
//            url('../fonts/font-name.woff') format('woff'),
//             url('../fonts/font-name.ttf') format('truetype'),
//             url('../fonts/font-name.svg#font-name') format('svg')
//   	font-weight: normal
//    	font-style: normal
//
//

// 
// use the best ampersand 
// http://simplebits.com/notebook/2008/08/14/ampersands-2/

span.amp 
	font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif
	font-style: italic

// text alignment 
.text-left
	text-align: left
.text-center
	text-align: center
.text-right
	text-align: right

// alerts & notices 
.help, .info, .error, .success 
	margin: 10px
	padding: 5px 18px 
	border: 1px solid

.help
	border-color: darken($yellow, 5%) 
	background: $yellow

.info
	border-color: darken($blue, 5%) 
	background: $blue

.error 
	border-color: darken($red, 5%) 
	background: $red

.success  
	border-color: darken($green, 5%) 
	background: $green


//
// BORDER RADIUS
//

// @include borderRadius(4px);
@mixin borderRadius($radius: 4px)
	-webkit-border-radius: $radius
	-moz-border-radius: $radius
	-ms-border-radius: $radius
	-o-border-radius: $radius
	border-radius: $radius

// @include borderTopRadius(4px);
@mixin borderTopRadius($radius: 4px)
	-webkit-border-top-right-radius: $radius
	-webkit-border-top-left-radius: $radius
	-moz-border-radius-topright: $radius
	-moz-border-radius-topleft: $radius
	border-top-right-radius: $radius
	border-top-left-radius: $radius

// @include borderRightRadius(4px); 
@mixin borderRightRadius($radius: 4px) 
	-webkit-border-top-right-radius: $radius
	-webkit-border-bottom-right-radius: $radius
	-moz-border-radius-topright: $radius
	-moz-border-radius-bottomright: $radius
	border-top-right-radius: $radius
	border-bottom-right-radius: $radius

// @include borderBottomRadius(4px);
@mixin borderBottomRadius($radius: 4px)
	-webkit-border-bottom-right-radius: $radius
	-webkit-border-bottom-left-radius: $radius
	-moz-border-radius-bottomright: $radius
	-moz-border-radius-bottomleft: $radius
	border-bottom-right-radius: $radius
	border-bottom-left-radius: $radius

// @include borderLeftRadius(4px);
@mixin borderLeftRadius($radius: 4px)
	-webkit-border-top-left-radius: $radius
	-webkit-border-bottom-left-radius: $radius
	-moz-border-radius-topleft: $radius
	-moz-border-radius-bottomleft: $radius
	border-top-left-radius: $radius
	border-bottom-left-radius: $radius

//
// BOX SHADOWS
//

// @include box-shadow(5px, 5px, 10px, #000);
@mixin box-shadow ($shadow-1, $shadow-2: false, $shadow-3: false, $shadow-4: false, $shadow-5: false, $shadow-6: false, $shadow-7: false, $shadow-8: false, $shadow-9: false)
	$full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9)
	-webkit-box-shadow: $full
	-moz-box-shadow: $full
	-ms-box-shadow: $full
	-o-box-shadow: $full
	box-shadow: $full


//
// CSS3 GRADIENTS
// Be careful with these since they can 
// really slow down your CSS. Don't overdue it.
//

// @include css-gradient(#dfdfdf,#f8f8f8); 
@mixin css-gradient($from: #dfdfdf, $to: #f8f8f8)
	background-color: $to
	background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to))
	background-image: -webkit-linear-gradient(top, $from, $to)
	background-image: -moz-linear-gradient(top, $from, $to)
	background-image: -o-linear-gradient(top, $from, $to)
	background-image: -ms-linear-gradient(top, $from, $to)
	background-image: linear-gradient(top, $from, $to)


//
// BOX SIZING
//

// @include boxSizing(border-box);
@mixin boxSizing($type: border-box)
	-webkit-box-sizing: $type
	-moz-box-sizing: $type
	-ms-box-sizing: $type
	-o-box-sizing: $type 
	box-sizing: $type 


//
// BOX SHADOW
//

// @include boxShadow(0 0 4px #444); 
@mixin boxShadow($x: 0, $y: 0, $radius: 4px, $spread: 0, $color: rgba(0,0,0,0.5))
	-webkit-box-shadow: $x $y $radius $spread $color
	-moz-box-shadow: $x $y $radius $spread $color
	-ms-box-shadow: $x $y $radius $spread $color
	-o-box-shadow: $x $y $radius $spread $color 
	box-shadow: $x $y $radius $spread $color 


//
// BUTTONS
//

.button, .button:visited
	border: 1px solid darken($blue, 13%)
	border-top-color: darken($blue, 7%)
	border-left-color: darken($blue, 7%)
	padding: 4px 12px
	color: $white
	display: inline-block
	font-size: 11px
	font-weight: bold
	text-decoration: none
	text-shadow: 0 1px rgba(0,0,0, .75)
	cursor: pointer
	margin-bottom: 20px
	line-height: 21px
	@include borderRadius(4px)
	@include css-gradient($blue,darken($blue, 5%))

	&:hover, &:focus
		color: $white
		border: 1px solid darken($blue, 13%)
		border-top-color: darken($blue, 20%)
		border-left-color: darken($blue, 20%)
		@include css-gradient(darken($blue, 5%),darken($blue, 10%))
	
	&:active
		@include css-gradient(darken($blue, 5%),$blue)