// Set Triangle @mixin arrow($direction, $width, $height, $color) { width: 0px; height: 0px; border-style: solid; @if $direction == "top" { border-width: $width $height 0 $height; border-color: $color transparent transparent transparent; } @else if $direction == "right" { border-width: $height $width $height 0; border-color: transparent $color transparent transparent; } @else if $direction == "bottom" { border-width: 0 $height $width $height; border-color: transparent transparent $color transparent; } @else if $direction == "left" { border-width: $height 0 $height $width; border-color: transparent transparent transparent $color; } @else if $direction == "top-right" { border-width: 0 $width $height 0; border-color: transparent $color transparent transparent; } @else if $direction == "top-left" { border-width: $height $width 0 0; border-color: $color transparent transparent transparent; } @else if $direction == "bottom-right" { border-width: 0 0 $height $width; border-color: transparent transparent $color transparent; } @else if $direction == "bottom-left" { border-width: $height 0 0 $width; border-color: transparent transparent transparent $color; } } @mixin list-reset() { margin: 0; padding: 0; list-style: none; }