triangule.styl

// 
// Default 
// Usage: $triangle(width, height, direction, color)
// ------------------------------------------------------------ 
    
$triangle($width = 10px, $height = 10px, $direction = 'bottom', $color = $gray-darker) 
  background none
  border-style solid
  height 0
  width 0

  // Styles for each direction
  // @stylint off
  directions = {
    top: {
      border-width: 0 ($width * .5) $height ($width * .5),
      border-color: transparent transparent $color transparent
    },
    topRight: {
      border-width: 0 $width $height 0,
      border-color: transparent $color transparent transparent
    },
    right: {
      border-width: ($height * .5) 0 ($height *.5) $width,
      border-color: transparent transparent transparent $color
    },
    bottomRight: {
      border-width: 0 0 $height $width,
      border-color: transparent transparent $color transparent
    },
    bottom: {
      border-width: $height ($width * .5) 0 ($width * .5),
      border-color: $color transparent transparent transparent
    },
    bottomLeft: {
      border-width: $width 0 0 $height,
      border-color: transparent transparent transparent $color
    },
    left: {
      border-width: ($height * .5) $width ($height * .5) 0,
      border-color: transparent $color transparent transparent
    },
    topLeft: {
      border-width: $height $width 0 0,
      border-color: $color transparent transparent transparent
    }
  } 

  // Mixin styles for passed direction
  styles = directions[$direction]
  {styles}
  // @stylint on