SASS

$primary-color-light:  #0288D2;
$primary-color:        #03A9F4;
$primary-color-light:  #B3E5FC;
$primary-color-text:   #FFFFFF;
$accent-color:         #FF9800;
$primary-text-color:   #212121;
$secondary-text-color: #727272;
$divider-color:        #B6B6B6;
$bg-color:             #F8F8F8;
$card-color:           #FFFFFF;

@mixin border-radius($radius: 0px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow($shadow:4px, $blur:6px, $color: #888888) {
  -webkit-box-shadow: $shadow $shadow $blur $color;
  -moz-box-shadow: $shadow $shadow $blur $color;
  box-shadow: $shadow $shadow $blur $color;
}

@mixin circle($width, $color) {
  width: $width;
  height: $width;
  background: $color;
  -webkit-border-radius: $width/2;
  -moz-border-radius: $width/2;
  border-radius: $width/2;
}

@mixin triangle($width, $direction, $color) {
  @if $direction == up {
    width: 0;
    height: 0;
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    border-bottom: $width solid $color;
  } @else if $direction == down {
    width: 0;
    height: 0;
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    border-top: $width solid $color;
  }@else if $direction == left {
    width: 0;
    height: 0;
    border-bottom: $width solid transparent;
    border-top: $width solid transparent;
    border-right: $width solid $color;
  }@else if $direction == right {
    width: 0;
    height: 0;
    border-bottom: $width solid transparent;
    border-top: $width solid transparent;
    border-left: $width solid $color;
  }
}

@mixin hover($shadow:2px, $blur:2px, $color: #888888) {
  -webkit-box-shadow: $shadow $shadow $blur $color;
  -moz-box-shadow: $shadow $shadow $blur $color;
  box-shadow: $shadow $shadow $blur $color;

  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

//Lists!!
$icons:(add, check, close, create, delete, download, left, right, settings, write);
@each $icon in $icons {
  .#{$icon} { background:url('../icons/#{$icon}.png');
    background-size: 50px auto;
    background-repeat: no-repeat;
    background-position: center;
  }
}