rl-theme/library/scss/mixins.scss

/******************************************************************
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('library/fonts/font-name.eot');
    	src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
             url('library/fonts/font-name.woff') format('woff'),
             url('library/fonts/font-name.ttf') format('truetype'),
             url('library/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);
	}
		
}