Add a caret to any element.

README.md

Add a caret to any element.

You can set the size, color, position and alignment of caret and border color and border size.

Legal Values:

position -> 'top', 'rigth', 'bottom' and 'left' align -> 'start', 'middle' and 'end' (also suppor unit measures)

• If the position have vertical disposition also you can use 'top', 'center' and 'bottom'.
• And if the position have horizontal disposition also you can use 'left', 'center' and 'right'.
• Also you can define a distance in the unit measure of you prefer.
• If you need the caret start from bottom position or right position, you have define a negative value.

@author Cristian Ferrari <cristianferrarig@gmail.com> || @energettico

SCSS usage:

element {
    @include caret(
        $size:         10px,
        $color:        #FFF,
        $position:     left,
        $align:        center,
        $border-size:  false,
        $border-color: false
    );
}

element {
    @include caret($size: 10px, $color: #FFF, $position: left, $align: center, $border-size: 1px, $border-color: #DDD);
}

element {
    @include caret(10px, #FFF, left, center, 1px, #DDD);
}

SASS usage:

element
    @include caret($size: 10px, $color: #FFF, $position: left, $align: center, $border-size: 1px, $border-color: #DDD)

element
    @include caret(10px, #FFF, left, center, 1px, #DDD)

Changelog:

• 2013/FEB/20
  • Fix: Problem with caret position.
  • New: function for border color assignment.
  • New: mixin for support hover coloring.
• 2013/ENE/31
  • Improve: separate readme file.
  • New: support SASS syntax.
• 2012/NOV/22:
  • Improve: new descriptions.
  • New: change log. :-)
  • Fixed: change name from carret to caret. :-)
• 2012/NOV/20:
  • New: support for align in any unit measure.
  • First release.

_caret.scss

@mixin caret-disposition($disposition,$align,$size) {
  $disposition: unquote($disposition); $align: unquote($align); $size: unquote($size);

  @if type-of($align) != string {
    @if $disposition == 'horizontal' {
      @if      $align > 0  { left:   $align; }
      @else if $align < 0  { right:  -($align); }
    }
    @else if $disposition == 'vertical' {
      @if      $align > 0  { top:    $align; }
      @else if $align < 0  { bottom: -($align); }
    }
  }@else {
    @if $disposition == 'horizontal' {
      @if      ($align == 'left'   or $align == 'start')  { left:   0px;  }
      @else if ($align == 'center' or $align == 'middle') { left:   50%; margin-left: -$size; }
      @else if ($align == 'right'  or $align == 'end')    { right:  0px; }
    }
    @else if $disposition == 'vertical' {
      @if      ($align == 'top'    or $align == 'start')  { top:    0px; }
      @else if ($align == 'center' or $align == 'middle') { top:    50%; margin-top: -$size;  }
      @else if ($align == 'bottom' or $align == 'end')    { bottom: 0px; }
    }
  }
}

@function caret-colors($position, $color) {
  $position: unquote($position); $color: unquote($color);

  $none:   transparent;
  $top:    $none;
  $right:  $none;
  $bottom: $none;
  $left:   $none;

  @if      $position == 'top'    { $bottom: $color; }
  @else if $position == 'bottom' { $top:    $color; }
  @else if $position == 'right'  { $left:   $color; }
  @else if $position == 'left'   { $right:  $color; }

  $borders: #{$top} #{$right} #{$bottom} #{$left};
  @return $borders;
}

@mixin caret(
  $size:         10px,
  $color:        #FFF,
  $position:     left,
  $align:        center,
  $border-size:  false,
  $border-color: false
) {
  $selector:        '';
  $border-position: '';
  $disposition:     '';

  $size: unquote($size); $color: unquote($color); $position: unquote($position);
  $align: unquote($align); $border-size: unquote($border-size); $border-color: unquote($border-color);

  @if $border-size != false { $selector: ', &:before'; }

  @if      ($position == 'top' or $position == 'bottom') { $disposition: 'horizontal'; }
  @else if ($position == 'right' or $position == 'left') { $disposition: 'vertical'; }

  &:after #{$selector} {
    content: '';
    display: block;
    position: absolute;
    @include caret-disposition($disposition,$align,$size);
    border: $size solid transparent;
    height: 0px;
    width: 0px;
  }
  &:after{
    z-index: 2;
    border-color: caret-colors($position, $color);
    #{$position}: -($size * 2);
  }

  @if $border-size != false {
    &:before{
      z-index: 1;
      #{$position}: -($size * 2) - $border-size;
      border-color: caret-colors($position, $border-color);
    }
  }
}


@mixin caret-hover($position, $caret-color, $border-color: false) {
  &:hover {
    background-color: $caret-color;
    &:after {
      border-color: caret-colors($position, $caret-color);
    }
    @if $border-color != false {
      &:before{
        border-color: caret-colorcolors($position, $border-color);
      }
    }
  }
}