arrow.scss

/*
* this really needs more work, the translates are tested only with 25px
*/
@mixin arrow($size: 25px, $orientation: left, $color: #000, $hover-color: red) {
  &:before, &:after {
    display: block;
    width: $size;
    height: 1em;
    border-top: 3px solid $color;
    line-height: 1em;
    content: ' ';
  }
  &:before {
    transform: rotate(-45deg) translateX(60%) translateY(60%);
  }
  &:after {
    transform: rotate(45deg) translateX(10%) translateY(-50%);
  }
  @if $orientation == right {
    transform: rotate(180deg) translateY(50%) translateX(20%);
  }
  &:hover{
    &:before, &:after {
      border-color: $hover-color;
    }
  }
}