WeAreGenki/minna-ui

/**
 * CSS TRIANGLE MAKER
 *
 * Generates a triangle using the border technique. By default it will output
 * styles for use inline inside a rule targeting an existing element.
 *
 * Alternatively it can output styles for a pseudo element for easy use without
 * interfering with the document flow.
 *
 * USAGE:
 *   @include triangle(<size>, <color>, [side], [isPseudo]);
 *
 *   <side>     = one of: top, right, bottom, left
 *   <size>     = any CSS size with unit, e.g. 0.5rem or 8px
 *   [color]    = any CSS color, e.g. red, #f00, rgba(255, 0, 0, 0.5)
 *   [isPseudo] = if true will output as a pseudo element (optional)
 *
 * @format
 */

/* FIXME: Move documentation into docs + add link here */

/**
 * PostCSS mixin to draw a triangle.
 * @param {string} size
 * @param {string} color
 * @param {string=} side
 * @param {Boolean=} isPseudo
 * @returns {object}
 */
@mixin triangle($size, $color, $side: bottom, $isPseudo: false) {
  width: 0;
  height: 0;

  @if $isPseudo == true {
    $(side): calc(-1 * $size);

    position: absolute;
    display: block;
    content: '';

    /* stylelint-disable at-rule-empty-line-before */
    @if $side == left {
      top: calc(50% - $size);
    }
    @if $side == right {
      top: calc(50% - $size);
    }
    @if $side == top {
      left: calc(50% - $size);
    }
    @if $side == bottom {
      left: calc(50% - $size);
    }
    /* stylelint-enable */
  }

  @if $side == top {
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
  }

  @if $side == right {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  }

  @if $side == bottom {
    border-top: $size solid $color;
    border-right: $size solid transparent;
    border-left: $size solid transparent;
  }

  @if $side == left {
    border-top: $size solid transparent;
    border-right: $size solid $color;
    border-bottom: $size solid transparent;
  }
}