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 {
  zoom: 1;
	&:before, &:after { content: ""; display: table; }
	&:after { clear: both; }
}

/*********************
TOOLS
*********************/

// 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; 
}

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

/* apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

/*********************
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;


/* 	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 and notices
%alert {
	margin: 10px;
	padding: 5px 18px;
	border: 1px solid;
}

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

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

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

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

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

/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include border-radius(4px 4px 0 0);
*/

@mixin border-radius($radius...) {
	// defining prefixes so we can use them in mixins below
	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
  @each $prefix in $prefixes {
    #{$prefix}-border-radius: $radius;
  }

  border-radius: $radius;
}

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

/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/

@mixin transition($transition...) {
	// defining prefixes so we can use them in mixins below
	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
  @each $prefix in $prefixes {
    #{$prefix}-transition: $transition;
  }

  transition: $transition;
}


/*********************
BOX SHADOWS
*********************/

/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include box-shadow(inset 0 0 4px rgba(0,0,0,0.22));
*/

@mixin box-shadow($shadow...) {
	// defining prefixes so we can use them in mixins below
	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
  @each $prefix in $prefixes {
    #{$prefix}-box-shadow: $shadow;
  }

  box-shadow: $shadow;
}


/*********************
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 border-radius(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%) );
	@include 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 );
	}
}