/*

Mixins

Some of them are from Bootstrap, others are custom. The required arguments are
marked in bold.

Styleguide 26

*/

/*

Create a rectangle

    @include size($height, $width);

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

Styleguide 26.1

*/

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

/*

Create a square

    @include square($size);

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

Styleguide 26.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 26.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

Horizzontally center an element.

    @include center-block();

Become:

    @extend %display-block;
    margin-left: auto;
    margin-right: auto;

Styleguide 26.4

*/

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

/*

Center

Vertical and horizontal centering with absolute positioning, using the position absolute and negative translate.

    @include center();

Styleguide 26.5

*/

@mixin center() {
  @include position(absolute, 50% 0 0 50%);
  @include translate(-50%, -50%);
}


/*

Extend

Abbrieviantion for extendingt normal class (.) or a placeholder class (%) when using SASS syntax.

     +e($name, $silent);

* `$name`: Name of the class
* `$silent`: Set to true if it's a placeholder class

Styleguide 26.6

*/

@mixin e($name, $silent: false) {
    @if ($silent == true) {
        @extend %#{$name};
    } @else {
        @extend .#{$name};
    }

}


/*

Placeholder

    @include placeholder($color);

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

Styleguide 26.7

*/

@mixin placeholder($color: $gray) {

  ::-webkit-input-placeholder {
    color: $color;
  }

  :-moz-placeholder {
    color: $color;
  }

  ::-moz-placeholder {
    color: $color;
  }

  :-ms-input-placeholder {
    color: $color;
  }

  ::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 26.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 26.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 26.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: "";
        @extend %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 26.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 26.12

*/

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

/*

Keyframes support

Used for creating custom animations.

    @include keyframes($name) {
      ...keyframes...
    }

* `$name`: Name of the keyframe

Styleguide 26.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 26.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 26.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;
    @extend %display-inline-block;
    line-height: 0;
    position: relative;

    &:before,
    &:after {
        // @extend %no-border; 
        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));

    }
}


/*

Box Inset Shadow

Usefull for adding inset shadows to sidebars or large block where the shadow is only on one side and full width/height.

    @include inset-shadow($position, $size, $color);

* `$position`: top, right, bottom, left
* `$size`: Size of the shadow
* `$color`: Color of the shadow

Styleguide 26.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)
    }


}

/*

Side Shadow

Add Side Shadows to multi-line padded text for consistend side padding (Fabien Doiron's box-shadow Method).

    @include side-shadow($size, $color);

* `$size`: Size of the shadow
* `$color`: Color of the shadow

Styleguide 26.17

*/

@mixin side-shadow($size: 10px, $color: #000) {
    @include box-shadow($size 0 0 $color, neg($size) 0 0 $color);
    margin-left: $size;
    margin-right: $size;
}

/*

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 26.18

*/

@mixin icon-font($char: '\f013', $font: 'FontAwesome') {
    @extend %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 26.19

*/

@mixin media($media-query:null){

    // Failback for =< 2.2.1
    @if $media-query == 'palm'      { $media-query: $palm }
    @if $media-query == 'lap'       { $media-query: $lap }
    @if $media-query == 'lap-and-up'{ $media-query: $lap-and-up }
    @if $media-query == 'portable'  { $media-query: $portable }
    @if $media-query == 'desk'      { $media-query: $desk }

    @if $media-query {
        @include breakpoint($media-query) {
            @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 `s` inside the main `images` folder add this line:

    @import 's/ *.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 s-icon_name"></i> Link</a>

Or via `@include` from the scss:

    a:before {
        @include s(icon_name)
    }

The result is the same.

Styleguide 26.20

*/

@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 )
* `$from`: Direction, ltr or rtl
* `$media`: Media query to to use, for responsive grids

Styleguide 26.21

*/

@mixin columns (
    $cols,
    $cols-container: $total-columns,
    $omega: false,
    $nth-omega: false,
    $from: ltr,
    $media: null
    ) {

    @if (type-of($media) == 'string') { // Failback for =< 2.2.1
      @include media($media) {
        @include span($cols of $cols-container $from);
        @if $omega { @include omega; }
        @if $nth-omega { @include nth-omega($nth-omega); }
      }
    } @else {
      @include breakpoint($media) {
        @include span($cols of $cols-container $from);
        @if $omega { @include omega; }
        @if $nth-omega { @include nth-omega($nth-omega); }
      }
    }
}

/*

Animations

    @include animate($name, $duration, $delay, $function, $mode);

* `$name`: Name of the animations to use, it must be enabled first. For more information see the Animations section.
* `$duration`: Duration of the animation
* `$delay`: Delay before the animation
* `$function`: Easing, see 20.2 for a list of all easing options available
* `$mode`: animation-fill-mode (http://mzl.la/1g6ixCc), default to *both*

Styleguide 26.22

*/

@mixin animate(
  $name,
  $duration: $animations-duration,
  $delay: $animations-delay,
  $function: $animations-function,
  $mode: $animations-mode
) {
    @include experimental(animation, $name $duration $delay toBezier($function) $mode);
}

/*

Animation sequences

    @include animate-sequence($selector, $name, $iterations, $delay, $duration, $delay-offset, $function, $mode)

* `$selector`: Selector to use for the sequence
* `$name`: Name of the animations to use, it must be enabled first. For more information see the Animations section.
* `$iterations`: How many elements to iterate
* `$delay`: Time between each animation
* `$duration`: Duration of the animation
* `$delay-offset`: From what value start iterating using the `$delay` value
* `$function`: Easing, see 20.2 for a list of all easing options available
* `$mode`: animation-fill-mode (http://mzl.la/1g6ixCc), default to *both*

Example:

    .animation-iterations {
      @include animate-sequence('img', fadeIn, 4, .5s)
    }

Will be compiled to:

    .animation-iterations img:nth-child(1) {
      animation: fadeIn 0.5s 0.5s ease-out both;
    }
    .animation-iterations img:nth-child(2) {
      animation: fadeIn 0.5s 1s ease-out both;
    }
    .animation-iterations img:nth-child(3) {
      animation: fadeIn 0.5s 1.5s ease-out both;
    }
    .animation-iterations img:nth-child(4) {
      animation: fadeIn 0.5s 2s ease-out both;
    }

Styleguide 26.23

*/

@mixin animate-sequence(
  $selector,
  $name,
  $iterations,
  $delay,
  $duration: $animations-duration,
  $delay-offset: $animations-delay,
  $function: $animations-function,
  $mode: $animations-mode
) {
    @if $delay-offset == null {
      $delay-offset: 0;
    }
    @for $i from 1 through $iterations {
      $delay-seq: ( $delay * $i ) + $delay-offset;
      #{$selector}:nth-child(#{$i}) {
        @include animate($name, $duration, $delay-seq, $function, $mode);
      }
    }
}