LESS mixin for CSS arrow

LESS mixin for CSS arrow

/* ------------------------ */
/* LESS mixin for CSS arrow */
/* ------------------------ */

/* https://github.com/HugoGiraudel/LESS-Mixin-for-CSS-arrows

Source: https://gist.github.com/karrirasinmaki/f5b665461e78ef76758cd7007a40cd25
Original source: https://gist.github.com/julienchazal/11044351

//Usage
.arrow(size, depth, color, direction, offset, border-size, border-color, inset); 

Where
 * Size is the with of the arrow
 * Depth is the depth or height of the arrow
 * Color is the color of the arrow (plain color required)
 * Direction is the orientation of the arrow (top, right, bottom, left)
 * Offset is the position of the arrow on its axis (px / em)
 * Border-size is the width of the border if there is one (optional; default "0")
 * Border-color is the color of the border if there is one (optional; default "inherit") 
 * Inset is whether arrow is drawn inside the element pointing inwards (false, inset) (optional; default "false)

 //Extra
 Drop-shadows can be used on the element to create a shadow on the arrow as well 
 */

.arrow(@size, @depth, @color, @direction, @offset, @border-size: 0, @border-color: inherit, @inset: false) {
  position: relative;
  &:after, 
  &:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
  }
}

.arrow(@size, @depth, @color, @direction, @offset, @border-size: 0, @border-color: inherit, @inset: false) when (@direction = top) {
  @m-size: @size + (@border-size*2);
  @m-depth: @depth + (@border-size*2);

  &:after {
	bottom: 100%;
	left: @offset;
	margin-left: -@size;

	border-left: @size solid transparent;
	border-right: @size solid transparent;
	border-bottom: @depth solid @color;
	& when (@inset = inset) {
	  border-bottom: 0;
	  border-top: @depth solid @color;
	  bottom: auto;
	  top: 0;
	}
  }

  &:before {
	bottom: 100%;
	left: @offset;
	margin-left: -@m-size;

	border-left: @m-size solid transparent;
	border-right: @m-size solid transparent;
	border-bottom: @m-depth solid @border-color;
	& when (@inset = inset) {
	  border-bottom: 0;
	  border-top: @m-depth solid @border-color;
	  bottom: auto;
	  top: 0;
	}
  }
}

.arrow(@size, @depth,  @color, @direction, @offset, @border-size: 0, @border-color: inherit, @inset: false) when (@direction = bottom) {
  @m-size: @size + (@border-size*2);
  @m-depth: @depth + (@border-size*2);

  &:after {
	top: 100%;
	left: @offset;
	margin-left: -@size;

	border-left: @size solid transparent;
	border-right: @size solid transparent;
	border-top: @depth solid @color;
	& when (@inset = inset) {
	  border-top: 0;
	  border-bottom: @depth solid @color;
	  top: auto;
	  bottom: 0;
	}
  }

  &:before {
	top: 100%;
	left: @offset;
	margin-left: -@m-size;
	border-left: @m-size solid transparent;
	border-right: @m-size solid transparent;
	border-top: @m-depth solid @border-color;
	& when (@inset = inset) {
	  border-top: 0;
	  border-bottom: @m-depth solid @border-color;
	  top: auto;
	  bottom: 0;
	}
  }
}

.arrow(@size, @depth, @color, @direction, @offset, @border-size: 0, @border-color: inherit, @inset: false) when (@direction = right) {
  @m-size: @size + (@border-size*2);
  @m-depth: @depth + (@border-size*2);

  &:after {
	left: 100%;
	top: @offset;
	margin-top: -@size;

	border-top: @size solid transparent;
	border-bottom: @size solid transparent;
	border-left: @depth solid @color;
	& when (@inset = inset) {
	  border-left: 0;
	  border-right: @depth solid @color;
	  left: auto;
	  right: 0;
	}
  }
  &:before {
	left: 100%;
	top: @offset;
	margin-top: -@m-size;

	border-top: @m-size solid transparent;
	border-bottom: @m-size solid transparent;
	border-left: @m-depth solid @border-color;
	& when (@inset = inset) {
	  border-left: 0;
	  border-right: @m-depth solid @border-color;
	  left: auto;
	  right: 0;
	}
  }
}

.arrow(@size, @depth, @color, @direction, @offset, @border-size: 0, @border-color: inherit, @inset: false) when (@direction = left) {
  @m-size: @size + (@border-size*2);
  @m-depth: @depth + (@border-size*2);

  &:after {
	right: 100%;
	top: @offset;
	margin-top: -@size;

	border-top: @size solid transparent;
	border-bottom: @size solid transparent;
	border-right: @depth solid @color;
	& when (@inset = inset) {
	  border-right: 0;
	  border-left: @depth solid @color;
	  right: auto;
	  left: 0;
	}
  } 
  &:before {
	right: 100%;
	top: @offset;
	margin-top: -@m-size;

	border-top: @m-size solid transparent;
	border-bottom: @m-size solid transparent;
	border-right: @m-depth solid @border-color;
	& when (@inset = inset) {
	  border-right: 0;
	  border-left: @m-depth solid @border-color;
	  right: auto;
	  left: 0;
	}
  }
}