SCSS Arrow Mixins

mx_arrows.scss

/*
 *
 *   Arrow Mixins
 *
 */



/* Settings */

$arrow-color:       $FFFFFF;
$arrow-up:          'up';
$arrow-right:       'right';
$arrow-down:        'down';
$arrow-left:        'left';
$arrow-width:       5px;




/* Mixins */

@mixin arrow ( $direction: $arrow-right , $width: $arrow-width , $color: $arrow-color  ) {

    width: 0;
    height: 0;

    // Up
    @if $direction == $arrow-up {
        border-left: $width solid transparent;
        border-right: $width solid transparent;
        border-bottom: $width solid $color;

    // Right
    } @else if $direction == $arrow-right {
        border-top: $width solid transparent;
        border-bottom: $width solid transparent;
        border-left: $width solid $color;

    // Down
    } @else if $direction == $arrow-down {
        border-left: $width solid transparent;
        border-right: $width solid transparent;
        border-top: $width solid $color;

    // Left
    } @else if $direction == $arrow-left {
        border-top: $width solid transparent;
        border-bottom: $widthpx solid transparent;
        border-right:10$width solid $color;
    }
}