arrows.less

/* 
 *  Created on : 20.02.2014, 10:43:52
 *  Author     : rpillichshammer
 */

/*
 * main mixin for arrows
 * ----------------------------
 */
@defaultArrowSize: 4px;
@defaultArrowColor: #fff;
.arrow-default-values(@size: @defaultArrowSize, @color: @defaultArrowColor) {
    position: absolute;
    content: "";
    top: 50%;
}

.arrow(@size: @defaultArrowSize, @color: @defaultArrowColor, @direction: down) when (@direction = up) {
    .arrow-default-values(@size);
    border-bottom: @size solid @color;
    border-right: @size solid transparent;
    border-left: @size solid transparent;
    margin-top: (@size - 1px) * -1;
}

.arrow(@size: @defaultArrowSize, @color: @defaultArrowColor, @direction: down) when (@direction = down) {
    .arrow-default-values(@size);
    border-top: @size solid @color;
    border-right: @size solid transparent;
    border-left: @size solid transparent;
    margin-top: (@size - 1px) * -1;
}

.arrow(@size: @defaultArrowSize, @color: @defaultArrowColor, @direction: down) when (@direction = left) {
    .arrow-default-values(@size);
    border-right: @size solid @color;
    border-top: @size solid transparent;
    border-bottom: @size solid transparent;
    margin-top: (@size + 1px) * -1;
}

.arrow(@size: @defaultArrowSize, @color: @defaultArrowColor, @direction: down) when (@direction = right) {
    .arrow-default-values(@size);
    border-left: @size solid @color;
    border-top: @size solid transparent;
    border-bottom: @size solid transparent;
    margin-top: (@size + 1px) * -1;
}

/*
 * aliases
 * ----------------------------
 */
.arrow-up(@size: @defaultArrowSize, @color: @defaultArrowColor) {
    .arrow(@size, @color, up);
}

.arrow-down(@size: @defaultArrowSize, @color: @defaultArrowColor) {
    .arrow(@size, @color, down);
}

.arrow-left(@size: @defaultArrowSize, @color: @defaultArrowColor) {
    .arrow(@size, @color, left);
}

.arrow-right(@size: @defaultArrowSize, @color: @defaultArrowColor) {
    .arrow(@size, @color, right);
}