rl-theme/library/less/mixins.less

/******************************************************************
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;
	}
	/* for IE */
	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/
*********************/

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

@black:             #000;
@white:             #fff;

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

/*********************
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 */
.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: .rounded(4px); 

*/
.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: .border-radius(4px,4px,0,0);

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

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

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

/* .css-gradient(#dfdfdf,#f8f8f8); */
.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
*********************/

/* .boxSizing(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? */
.boxSizing(@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	-ms-box-sizing:     @type;
	box-sizing:         @type;
}

/*********************
BOX SHADOW
*********************/

/* .boxShadow(0,0,4px,#444); */
.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;
					box-shadow: @x @y @radius @spread @color; 
}

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

.button, .button:visited {
	border: 1px solid darken(@bones-pink, 13%);
	border-top-color: darken(@bones-pink, 7%);
	border-left-color: darken(@bones-pink, 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;
	.transition();
	.rounded(4px);
	.css-gradient(@bones-pink,darken(@bones-pink, 5%));

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

.blue-button, .blue-button:visited {
	border-color: darken(@bones-blue, 10%);
	text-shadow: 0 1px 1px darken(@bones-blue, 10%);
	.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%);
		.css-gradient( darken(@bones-blue, 4%), darken(@bones-blue, 10%) );
	}
	&:active {
		.css-gradient( darken(@bones-blue, 5%), @bones-blue );
	}
}