/* ====================================================================================================================

Mixins

Some of them are from Bootstrap, others are custom.

Styleguide 23

==================================================================================================================== */

/* --------------------------------------------------------------------------------------------------------------------

Create a rectangle

	@include size($height, $width);

* `$height`: Height of the rectangle
* `$width`: Width of the rectangle

Styleguide 23.1

-------------------------------------------------------------------------------------------------------------------- */

@mixin size($height, $width) {
	width: $width;
	height: $height;
}

/* --------------------------------------------------------------------------------------------------------------------

Create a square

	@include square($size);

* `$size`: Dimension used both for width and height

Styleguide 23.2

-------------------------------------------------------------------------------------------------------------------- */

@mixin square($size) {
	@include size($size, $size);
}

/* --------------------------------------------------------------------------------------------------------------------

Position an element

	@include position ($position, $coordinates);

* `$position`: fixed, relative, absolute
* `$coordinates`: 0 = null, 0px or more is a value used in the css.

Example:

	@include position (absolute, 0 0px 0px 0);

Become:

	position: absolute;
	right: 0px;
	bottom: 0px;

Styleguide 23.3

-------------------------------------------------------------------------------------------------------------------- */

@mixin position ($position: relative, $coordinates: 0 0 0 0) {

	@if type-of($position) == list {
		$coordinates: $position;
		$position: relative;
	}

	$top: nth($coordinates, 1);
	$right: nth($coordinates, 2);
	$bottom: nth($coordinates, 3);
	$left: nth($coordinates, 4);

	position: $position;

	@if $top == auto {
		top: $top;
	}
	@else if not(unitless($top)) {
		top: $top;
	}

	@if $right == auto {
		right: $right;
	}
	@else if not(unitless($right)) {
		right: $right;
	}

	@if $bottom == auto {
		bottom: $bottom;
	}
	@else if not(unitless($bottom)) {
		bottom: $bottom;
	}

	@if $left == auto {
		left: $left;
	}
	@else if not(unitless($left)) {
		left: $left;
	}
}

/* --------------------------------------------------------------------------------------------------------------------

Center-block

	@include center-block();

Become:

	display: block;
	margin-left: auto;
	margin-right: auto;

Styleguide 23.4

-------------------------------------------------------------------------------------------------------------------- */

@mixin center-block() {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------------------------------------------------

Center

Vertical and horizontal centering with absolute positioning, using the element size and negative margin.

	@include center($width, $height);

* `$height`: Height of the element
* `$width`: Width of the element

Styleguide 23.5

-------------------------------------------------------------------------------------------------------------------- */

@mixin center ($width, $height: null) {
	@include position(absolute, 50% 0 0 50%);
	margin-left: -($width / 2);
	@if $height { margin-top: -($height / 2); }
	@else { margin-top: -($width / 2);  }
}


/* --------------------------------------------------------------------------------------------------------------------

Extend

When using SASS syntax.

	+e(classname)

Styleguide 23.6

-------------------------------------------------------------------------------------------------------------------- */

@mixin e($class) {
	@if $class {
		@extend .#{$class};
	}
}


/* --------------------------------------------------------------------------------------------------------------------

Placeholder

	@include placeholder($color);

* `$color`: Set color of the placeholder of an input.

Styleguide 23.7

-------------------------------------------------------------------------------------------------------------------- */

@mixin placeholder($color: $gray) {
	&:-moz-placeholder {
		color: $color;
	}
	&:-ms-input-placeholder {
		color: $color;
	}
	&::-webkit-input-placeholder {
		color: $color;
	}
}


/* --------------------------------------------------------------------------------------------------------------------

Text overflow

Wrap text with ellipsis (modern browsers only).

	@include text-overflow();

Become

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

Styleguide 23.8

-------------------------------------------------------------------------------------------------------------------- */


@mixin text-overflow() {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------------------------------------------------

Triangle

Create a css-only triangle.

	@include triangle($size, $color, $direction);

* `$size`: Width of the triangle
* `$color`: Color of the triangle
* `$direction`: There are available up, up-right, right, down-right, down, down-left, left, up-left

Styleguide 23.9


-------------------------------------------------------------------------------------------------------------------- */

@mixin triangle ($size, $color, $direction) {
	@include square(0);

	@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
		border-color: transparent;
		border-style: solid;
		border-width: $size / 2;

		@if $direction == up {
			border-bottom-color: $color;
		} @else if $direction == right {
			border-left-color:  $color;
		} @else if $direction == down {
			border-top-color:   $color;
		} @else if $direction == left {
			border-right-color:  $color;
		}
	}

	@else if ($direction == up-right) or ($direction == up-left) {
		border-top: $size solid $color;

		@if $direction == up-right {
			border-left:  $size solid transparent;
		} @else if $direction == up-left {
			border-right: $size solid transparent;
		}
	}

	@else if ($direction == down-right) or ($direction == down-left) {
		border-bottom: $size solid $color;

		@if $direction == down-right {
			border-left:  $size solid transparent;
		} @else if $direction == down-left {
			border-right: $size solid transparent;
		}
	}
}


/* --------------------------------------------------------------------------------------------------------------------

Triangle with Borders

Add a css-only triangle width side borders, usefull for tooltips. For now only side triangles with border are suported.

	@include triangle_border($size, $color, $border-color, $border-width, $direction);

* `$size`: Same as `square`
* `$color`: Color of the triangle
* `$border-color`: Border color of the triangle
* `$border-width`: Border width of the triangle
* `$direction`: left or right

Styleguide 23.10

-------------------------------------------------------------------------------------------------------------------- */

@mixin triangle_border($size, $color, $border-color, $border-width, $direction) {

	$border-width-fix: '';

	@if $border-width == 1px {
		$border-width-fix: $border-width * 4;
	} @else {
		$border-width-fix: $border-width * 2;
	}

	$bg-size: $size + $border-width-fix;

	&:before, &:after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;

		@if $direction == 'right' { left: -($border-width); }
		@if $direction == 'left' { right: -($border-width); }
	}

	&:before {
		@include triangle($size, $color, $direction);
		margin-top: -($size / 2);
		z-index: 2;
	}

	&:after {
		@include triangle($bg-size, $border-color, $direction);
		margin-top: -($bg-size / 2);
		zoom: 1;
	}
}

/* --------------------------------------------------------------------------------------------------------------------

Text inset shadow

	@include text-inset-shadow($bg, $textcolor, $contrast);

* `$bg`: Background color of the text
* `$textcolor`: Color of the text
* `$contrast`: How much stronger the inset will be

Styleguide 23.11

-------------------------------------------------------------------------------------------------------------------- */

@mixin text-inset-shadow($bg: #fff, $textcolor: #054d4a, $contrast:  #f43059) {
	$shadow: darken($textcolor, 30%);

	color: rgba($textcolor, 0.8);
	text-shadow: 1px 5px 7px $bg, 0 0 0 rgba($shadow,.8);
}

/* --------------------------------------------------------------------------------------------------------------------

Alpha Color

Alpha color with ie full opacity fallback (for IE)

	@include alpha-color($color, $alpha, $attribute);

* `$color`: Base HEX color
* `$alpha`: Opacity
* `$attribute`: On what attribute

Example

	@include alpha-color(#000, .5, color);

Become

	color: #000;
	color: rgba(0,0,0,.5);

Styleguide 23.12

-------------------------------------------------------------------------------------------------------------------- */

@mixin alpha-color($color: #fff, $alpha: .5, $attribute: background) {
	@if $attribute == color {
		color: $color;
		color: rgba($color, $alpha);
	} @else {
		#{$attribute}: $color;
		#{$attribute}: rgba($color, $alpha);
	}
}

/* --------------------------------------------------------------------------------------------------------------------

Keyframes support

Used for creating custom animations.

	@include keyframes($name);

* `$name`: Name of the keyframe

Styleguide 23.13

-------------------------------------------------------------------------------------------------------------------- */

@mixin keyframes($name) {
	@-webkit-keyframes #{$name} {
		@content;
	}

	@-moz-keyframes #{$name} {
		@content;
	}

	@-o-keyframes #{$name} {
		@content;
	}
	@keyframes #{$name} {
		@content;
	}
}

/* --------------------------------------------------------------------------------------------------------------------

Nav divider

	@include nav-divider($top $bottom);

* `$top`: Color of the top border
* `$bottom`: Color of the bottom border

Styleguide 23.14

-------------------------------------------------------------------------------------------------------------------- */

@mixin nav-divider($top: #e5e5e5, $bottom: false) {
	*width: 100%;

	@if $bottom {
		height: 2px;
	} @else {
		height: 1px;
	}

	overflow: hidden;
	background-color: $top;
	@if $bottom { border-bottom: 1px solid $bottom; }
}

/* --------------------------------------------------------------------------------------------------------------------

Comicbook Shadow

	@include shadow-comicbook($padding $color $size $distance);

* `$padding`: Border color
* `$color`: Color of the shadow
* `$size`: Size of the shadow
* `$distance`: Distance of the shadow from the image

Styleguide 23.15

-------------------------------------------------------------------------------------------------------------------- */

@mixin shadow-comicbook($padding: 5px, $color: #bbb, $size: 15px, $distance: 10px) {

	$lightColor: lighten($color, 8);
	$degree: $size/1px;

	@include box-shadow(0 1px 3px $color);
	border:5px solid #fff;
	display: inline-block;
	line-height: 0;
	position: relative;

	&:before,
	&:after {
		// border: 0;
		background-color: $lightColor;
		content: '';
		z-index: -1;
		position: absolute;
		left: $distance;
		bottom: $distance;
		width: 70%;
		height: 55%;
		@include box-shadow(0 $size $size+1 $lightColor);
		@include transform(skew(-15deg) rotate(-6deg));
	}

	&:after {
		left: auto;
		right: $distance+1;
		@include transform(skew(15deg) rotate(6deg));

	}
}


/* --------------------------------------------------------------------------------------------------------------------

Comicbook Shadow

	@include shadow-comicbook($padding $color $size $distance);

* `$padding`: Border color
* `$color`: Color of the shadow
* `$size`: Size of the shadow
* `$distance`: Distance of the shadow from the image

Styleguide 23.16

-------------------------------------------------------------------------------------------------------------------- */

@mixin inset-shadow($position: right, $size: 10px, $color: #000) {

	$size: $size*2;

	@if $position == 'top' {
		@include box-shadow(inset 0 $size $size $size $color)
	}

	@if $position == 'right' {
		@include box-shadow(inset neg($size) 0 $size neg($size) $color)
	}

	@if $position == 'bottom' {
		@include box-shadow(inset 0 neg($size) $size neg($size) $color)
	}

	@if $position == 'left' {
		@include box-shadow(inset $size 0 $size $size $color)
	}


}

/* --------------------------------------------------------------------------------------------------------------------

Icon Fonts

Use the unicode character from an icon font to insert it wherever you want.

	@include icon-font($char $font);

* `$char`: Unicode of the character †
* `$font`: What font to use ‡

† For example for: `&#xf000` use `xf000`

‡ Fonts available: Fontawesome, Brandico, Entypo, Fontelico, Maki, Openweb-icons, Typicons, Zocial


Styleguide 23.17

-------------------------------------------------------------------------------------------------------------------- */

@mixin icon-font($char: '\f013', $font: 'FontAwesome') {
	display: inline-block;
	font-family: $font;
	content: "#{$char}";
}

/* --------------------------------------------------------------------------------------------------------------------

Media Queries

Add media queries to css width simple naming convention.

    @include media(<$media>) {...};

You can set the start/and with of each step from usins the variables `$lap-start`, `$desk-start`, `$desk-end`.

* `$media`:
	* `palm`: Only Palm
	* `lap`:  Only Lap
	* `lap-and-up`: Lap + Desktop
	* `portable`: Lap + Palm
	* `desk`: Only Desktop

Styleguide 23.18

-------------------------------------------------------------------------------------------------------------------- */

@mixin media($media-query){

	@if $media-query == palm { // Palm only
		@media only screen and (max-width:$palm-end) {
			@content;
		}
	}

	@elseif $media-query == lap{  // Lap only
		@media only screen and (min-width:$lap-start) and (max-width:$lap-end) {
			@content;
		}
	}

	@elseif $media-query == lap-and-up{ // Lap + Dektop
		@media only screen and (min-width:$lap-start) {
			@content;
		}
	}

	@elseif $media-query == portable{ // Palm + Lap
		@media only screen and (max-width:$lap-end) {
			@content;
		}
	}

	@elseif $media-query == desk{ // Desktop only
		@media only screen and (min-width:$desk-start) {
			@content;
		}
	}

	@else {
		@content;
	}

}

/* --------------------------------------------------------------------------------------------------------------------

Sprites

Rapido use the compass' [Sprites Mixin](http://compass-style.org/help/tutorials/spriting/) that make including sprites easily both in the html and directly in the css,
for more info see the full documentation from the link.

First you need to add to your scss file an import to import all of the seperate icons that will be compiled in a single image.
For example if you have a folder named `icons` inside the main `images` folder add this line:

	@import "icons/*.png";

Then add you have two options:

Add the sprite in the html with (where `icon_name` is the filename of the icon). .s` is the standard class the must be used with all sprites images.

	<a href="#"><i class="s icons-icon_name"></i> Link</a>

Or via `@include` from the scss:

	a:before {
		@include sprite(icon_name)
	}

The result is the same.

Styleguide 23.19

-------------------------------------------------------------------------------------------------------------------- */

@mixin s($name) {
	@extend .s;
	@extend .s-#{$name};
}

/* --------------------------------------------------------------------------------------------------------------------

Responsive grid

	@include columns ($cols, $cols-container, $omega, $nth-omega, $remove-omega, $from, $media, $highlight-omega);

* `$cols`: How many columns
* `$cols-container`: Columns of the container (default: $total-columns)
* `$omega`: Bolean, us if is the last column
* `$nth-omega`: If is a multi-row grid list use nth to apply omega to each element at the end of each row (example: `3n` to use omega every 3th element )
* `$remove-omega`: Remove omega on previously applied omega (ignore it)
* `$from`: Direction, left or right
* `$media`: Media query to to use, for responsive grids
* `$highlight-omega`: Bolean, used for debugging nth

Styleguide 23.20

-------------------------------------------------------------------------------------------------------------------- */

@mixin columns (
	$cols,
	$cols-container: $total-columns,
	$omega: false,
	$nth-omega: false,
	$remove-omega: false,
	$from: left,
	$media: all,
	$highlight-omega: false
	) {

	@include media($media) {
		$direction: left;

		@if $from != left { $direction: right; }

		@include span-columns($cols, $cols-container, $from: $direction);
		@if $omega { @include omega($from: $direction); }
		@if $nth-omega { @include nth-omega($nth-omega, $from: $direction); }
		@if $remove-omega { @include remove-omega; }
		@if $highlight-omega  {
			@if $omega { background: blue; }
			@if $nth-omega { &:nth-child(#{$nth-omega}) {background: blue;} }
		}
	}
}