/*
* Mixin for basic CSS triangles
* @include triangle(up, #000, 50px);
* @include triangle(bottomleft, #000, 50px);
*/
@mixin triangle($direction:up, $color:#000, $size:100px) {
      @if ($direction == up){
            border-color: transparent transparent $color;
            border-style: solid;
            border-width: 0 $size $size;
            height: 0;
            width: 0;
      }
      @if ($direction == down) {
            border-color: $color transparent transparent transparent;
            border-style: solid;
            border-width: $size;
            height: 0;
            width: 0;
      }
      @if ($direction == left) {
            border-color: transparent $color transparent transparent;
            border-style: solid;
            border-width: $size $size $size 0;
            height: 0;
            width: 0;
      }
      @if ($direction == right) {
            border-color: transparent transparent transparent $color;
            border-style: solid;
            border-width: $size 0 $size $size;
            height: 0;
            width: 0;
      }
      @if ($direction == bottomright) {
            border-color: transparent transparent $color transparent;
            border-style: solid;
            border-width: 0 0 $size $size;
            height: 0;
            width: 0;
      }
      @if ($direction == bottomleft) {
            border-color: transparent transparent transparent $color;
            border-style: solid;
            border-width: $size 0 0 $size;
            height: 0;
            width: 0;
      }
      @if ($direction == topleft) {
            border-color: $color transparent transparent transparent;
            border-style: solid;
            border-width: $size $size 0 0;
            height: 0;
            width: 0;
      }
      @if ($direction == topright) {
            border-color: transparent $color transparent transparent;
            border-style: solid;
            border-width: 0 $size $size 0;
            height: 0;
            width: 0;
      }
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}
}