LESS (CSS) arrows

arrows.less

// Arrow mixins. We repeat properties so they can override each other.
// Should be using :extend() instead of mixin, but Web Essentials chokes on that.
.arrow-base(@size) {
    width: 0;
    height: 0;

    border: @size solid transparent;
}
.arrow-up(@size, @color) {
    .arrow-base(@size);
    border-top-style: none;
    border-bottom-color: @color;
}

.arrow-down(@size, @color) {
    .arrow-base(@size);
    border-bottom-style: none;
    border-top-color: @color;
}

.arrow-right(@size, @color) {
    .arrow-base();
    border-right-style: none;
    border-left-color: @color;
}

.arrow-left(@size, @color) {
    .arrow-base();
    border-left-style: none;
    border-right-color: @color;
}