ultimate_arrow_mixin.scss

@mixin arrow_helper($arrowSize, $arrowColor, $margin, $side, $align) {
  @if $side == "top" {
    border-bottom-color: $arrowColor;
    top: -2 * $arrowSize;
  }
  @if $side == "bottom" {
    border-top-color: $arrowColor;
    bottom: -2 * $arrowSize;
  }
  @if $side == "left" {
    border-right-color: $arrowColor;
    left: -2 * $arrowSize;
  }
  @if $side == "right" {
    border-left-color: $arrowColor;
    right: -2 * $arrowSize;
  }
  @if $side == "right" or $side == "left" {
    @if $align == "center" {
      top: 50%;
      margin-top: -$arrowSize;
    }
    @else if $align == "top" {
      top: $margin;
    }
    @else if $align == "bottom" {
      bottom: $margin;
    }
  }
  @if $side == "bottom" or $side == "top" {
    @if $align == "center" {
      right: 50%;
      margin-right: -$arrowSize;
    }
    @else if $align == "left" {
      left: $margin;
    }
    @else if $align == "right" {
      right: $margin;
    }
  }
}

@mixin arrow($side: "right", $align: "center", $size: 20px, $color: #f6f6f6, $borderColor: "none", $borderSize: 3px) {
  $selector: "&:after, &:before";
  @if $borderColor == "none" {
    $selector: "&:after";
  }
  #{$selector} {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
  }
  
  &:after {
    border-width: $size;
    @include arrow_helper($size, $color, $size, $side, $align);
  }
  
  @if $borderColor != "none" {
    &:before {
      border-width: $borderSize + $size;
      @include arrow_helper($size + $borderSize, $borderColor, $size - $borderSize, $side, $align);
    }
  }
}