caret

caret.scss

%pseudo-content-before {
  position: relative;
  &:before {
    content: " ";
    position: absolute;
    display: block;
   }
}

%pseudo-content-after {
  position: relative;
  &:after {
    content: " ";
    position: absolute;
    display: block;
   }
}

@mixin caret-top($size,$color, $top, $left) {
  @extend %pseudo-content-before;
  &:before {
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    left: $left;
    top: $top;
  }
}

@mixin caret-top-alt($size,$color, $top, $left) {
  @extend %pseudo-content-after;
  &:after {
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    left: $left;
    top: $top;
  }
}

@mixin triangle-up($size, $color) {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: $size $size 0 $size;
  border-color: $color transparent transparent transparent;
}

@mixin caret-bottom($size,$color, $top, $left) {
  @extend %pseudo-content-before;
  &:before {
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
    left: $left;
    top: $top;
  }
}

@mixin caret-bottom-alt($size,$color, $top, $left) {
  @extend %pseudo-content-after;
  &:after {
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
    left: $left;
    top: $top;
  }
}