_css-arrow.scss

// This mixin adds inset property to the original mixin which can be found here :
// https://github.com/msadouni/compass-css-arrow/blob/master/stylesheets/compass-css-arrow/_css-arrow.scss

// Default Settings
$arrow-default-position     : bottom    !default;
$arrow-default-size         : 1em       !default;
$arrow-default-color        : gray      !default;
$arrow-default-border-width : 0         !default;
$arrow-default-border-color : false     !default;
$arrow-default-border-style : solid     !default;
$arrow-default-offset       : 50%       !default;
$arrow-default-inset        : false     !default;

// Mixin
//
// $position      : top | right | bottom | left
// $size          : any border-accepted length - px, em, etc. (NOT %)
// $color         : any color
// $border-width  : any border-accepted length with units comparable to $size
// $border-color  : any color
// $border-style  : dotted | dashed | solid | double | groove | ridge | inset | outset
// $inset         : true | false
@mixin css-arrow(
  $position     : $arrow-default-position,
  $size         : $arrow-default-size,
  $color        : $arrow-default-color,
  $border-width : $arrow-default-border-width,
  $border-color : $arrow-default-border-color,
  $border-style : $arrow-default-border-style,
  $offset       : $arrow-default-offset,
  $inset        : $arrow-default-inset
) {

  $arrow-orientation  : opposite-position($position);
  @if ($inset == true) {
    $arrow-orientation  : $position;
  }

  $arrow-position     : left;
  $border-size        : $size + $border-width * 1.41421356;

  @if ($position == right) or ($position == left) {
    $arrow-position   : top;
  }

  position: relative;

  @if ($border-width > 0) or ($border-color) {
    @if not ($border-width > 0) {
      $border-width : $size*.25;
      $border-size  : $size + $border-width * 1.41421356;
    }
    @if not $border-color { $border-color: darken($color,5); }
    border: $border-width $border-style $border-color;
  }
  &:after, &:before {
    @if ($inset == true) {
      #{$position}: 0%;
    } @else {
      #{$position}: 100%;
    }
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  &:after {
    border-#{$arrow-orientation}-color: $color;
    border-width: $size;
    #{$arrow-position}: $offset;
    margin-#{$arrow-position}: -$size;
  }
  &:before {
    border-#{$arrow-orientation}-color: $border-color;
    border-width: $border-size;
    #{$arrow-position}: $offset;
    margin-#{$arrow-position}: -$border-size;
  }
}