/*

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

Horizzontally center an element.

    @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 position absolute and negative translate.

    @include center();

Styleguide 23.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 23.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 23.7

*/

@mixin placeholder($color: $gray) {

    &:-moz-placeholder {
        color: $color;
    }
    &::-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: color) {
    #{$attribute}: $color;
    #{$attribute}: rgba($color, $alpha);
}

/*

Keyframes support

Used for creating custom animations.

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

* `$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));

    }
}


/*

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 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)
    }


}

/*

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 23.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 23.18

*/

@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.19

*/

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

        @if $media-query == palm or $media-query == lap or $media-query == lap-and-up or $media-query == portable or $media-query == desk {

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

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

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

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

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

        @else {
            @media only screen and ($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 23.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 )
* `$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.21

*/

@mixin columns (
    $cols,
    $cols-container: $total-columns,
    $omega: false,
    $nth-omega: false,
    $remove-omega: false,
    $from: left,
    $media: null,
    $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;} }
        }
    }
}

/*

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 23.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);
}