rl-theme/library/scss/_mixins.scss

/******************************************************************
Site Name:
Author:

Stylesheet: Mixins & Constants Stylesheet

This is where you can take advantage of Sass' 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;
}

// BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
* { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing:    border-box; 
	box-sizing:         border-box; 
}

/******************************************************************
CUSTOMIZED RESET VALUES
I added these extra styles as a more personalized reset. Feel free
to remove them if you like or add your own. If you want to update
the normalize styles, make sure to edit from this point up.
******************************************************************/

ul, ol {
	padding: 0;
	list-style-type: none;
}

dd {
	margin: 0;
}

.sidebar ul,
.sidebar ol,
.commentlist {
	list-style: none;
}

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

$alert-yellow:      #ebe16f;
$alert-red:         #fbe3e4;
$alert-green:       #e6efc2;
$alert-blue:        #d5edf8;

$black:             #000;
$white:             #fff;

$bones-pink:        #f01d4f;
$bones-blue:        #1990db;

$link-color:        $bones-pink;
$link-hover:        darken($link-color, 9%);

/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/

/*********************
TYPOGRAPHY
*********************/

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

// proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens) 
p {
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	  -epub-hyphens: auto;
	        hyphens: auto;
}

b,
strong,
.strong {
	font-weight: bold;
}

dfn,
em,
.em {
	font-style: italic;
}

small, .small {
	font-size: 75%;
}

/* 	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 !important;
  font-style: italic;
}

// text alignment 
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }


// alerts & notices 
.alert {
	margin: 10px;
	padding: 5px 18px;
	border: 1px solid;
}

.help {
	border-color: darken($alert-yellow, 5%);
	background: $alert-yellow;
}

.info {
	border-color: darken($alert-blue, 5%);
	background: $alert-blue;
}

.error {
	border-color: darken($alert-red, 5%);
	background: $alert-red;
}

.success {
	border-color: darken($alert-green, 5%);
	background: $alert-green;
}

/*********************
BORDER RADIUS
*********************/

/*
NOTE: For older browser support (and some mobile),
don't use the shorthand to define *different* corners.

USAGE: @include rounded(4px);

*/
@mixin rounded($radius: 4px) {
	-webkit-border-radius: $radius;
	-moz-border-radius:    $radius;
	border-radius:         $radius;
}

/*
Instead of having a seperate mixin for the different
borders, we're using the mixin from 320 & Up to make
things easier to use.

USAGE: @include border-radius(4px,4px,0,0);

*/
@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
	-webkit-border-top-right-radius:    $topright;
	-webkit-border-bottom-right-radius: $bottomright;
	-webkit-border-bottom-left-radius:  $bottomleft;
	-webkit-border-top-left-radius:     $topleft;
	-moz-border-radius-topright:        $topright;
	-moz-border-radius-bottomright:     $bottomright;
	-moz-border-radius-bottomleft:      $bottomleft;
	-moz-border-radius-topleft:         $topleft;
	border-top-right-radius:            $topright;
	border-bottom-right-radius:         $bottomright;
	border-bottom-left-radius:          $bottomleft;
	border-top-left-radius:             $topleft;
	-webkit-background-clip:            padding-box;
	-moz-background-clip:               padding;
	background-clip:                    padding-box;
}


/*********************
TRANISTION
*********************/

/* @include transition(all,2s,ease-out); */
@mixin css-transition($what: all, $time: 0.2s, $how: ease-in-out) {
	-webkit-transition: $what $time $how;
	-moz-transition:    $what $time $how;
	-ms-transition:     $what $time $how;
	-o-transition:      $what $time $how;
	transition:         $what $time $how;
}

/*********************
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;
          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: linear-gradient(to bottom, $from, $to);
}

/*********************
BOX SIZING
*********************/

/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
@mixin box-sizing($type: border-box) {
	-webkit-box-sizing: $type;
	-moz-box-sizing:    $type;
	-ms-box-sizing:     $type;
	box-sizing:         $type;
}


/*********************
BUTTONS
*********************/

.button, .button:visited {
	font-family: $sans-serif;
	border: 1px solid darken($link-color, 13%);
	border-top-color: darken($link-color, 7%);
	border-left-color: darken($link-color, 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 rounded(4px);
	@include css-gradient($link-color, darken($link-color, 5%));


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

	&:active {
		@include css-gradient(darken($link-color, 5%), $link-color);
	}
}

.blue-button, .blue-button:visited {
	border-color: darken($bones-blue, 10%);
	text-shadow: 0 1px 1px darken($bones-blue, 10%);
	@include css-gradient( $bones-blue, darken($bones-blue, 5%) );
	-webkit-box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
       -moz-box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
   	        box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
	&:hover, &:focus {
		border-color: darken($bones-blue, 15%);
		@include css-gradient( darken($bones-blue, 4%), darken($bones-blue, 10%) );
	}
	&:active {
		@include css-gradient( darken($bones-blue, 5%), $bones-blue );
	}
}