shut/src/less/utilities/arrow.less

Shut UI Framework

// TODO: might need to go

.arrowreset() {
    inset: auto;
    border: 1px solid;
}

#arrow() {

    .above(@arrowWidth: 5px) {
        /* reset first */
        inset-inline-start: 45%;
        inset-block-start: -@arrowWidth;
        border-width: 0 @arrowWidth @arrowWidth;
        border-style: solid;
        border-block-start-color: transparent;
        border-inline-end-color: transparent;
        border-inline-start-color: transparent;
    }

    .left(@arrowWidth: 5px) {
        inset-block-start: 30%;
        inset-inline-start: -@arrowWidth;
        border-width: @arrowWidth;
        border-inline-start-width: 0;
        border-style: solid;
        border-block-start-color: transparent;
        border-block-end-color: transparent;
        border-inline-start-color: transparent;
    }

    .below(@arrowWidth: 5px) {
        inset-inline-start: 45%;
        inset-block-end: -@arrowWidth;
        border-width: @arrowWidth @arrowWidth 0;
        border-style: solid;
        border-inline-end-color: transparent;
        border-block-end-color: transparent;
        border-inline-start-color: transparent;
    }

    .right(@arrowWidth: 5px) {
        inset-block-start: 30%;
        inset-inline-end: -@arrowWidth;
        border-width: @arrowWidth 0 @arrowWidth @arrowWidth;
        border-style: solid;
        border-block-start-color: transparent;
        border-inline-end-color: transparent;
        border-block-end-color: transparent;
    }
}

#pointer() {
    .left(@arrowWidth: 6px) {
        margin-inline-end: @arrowWidth + 2;
        .arrowreset();
        #arrow>.left(@arrowWidth);
    }

    .up(@arrowWidth: 6px) {
        margin-inline-end: @arrowWidth + 2;
        .arrowreset();
        #arrow>.above(@arrowWidth);
    }

    .down(@arrowWidth: 6px) {
        margin-inline-end: @arrowWidth + 2;
        .arrowreset();
        #arrow>.below(@arrowWidth);
    }

    .right(@arrowWidth: 6px) {
        margin-inline-end: @arrowWidth + 2;
        .arrowreset();
        #arrow>.right(@arrowWidth);
    }

    .diagonalupleft(@arrowWidth: 8px) {
        margin-inline-end: @arrowWidth;
        .arrowreset();
        #arrow>.right(@arrowWidth);
        border-block-start-width: 0;
    }

    .diagonalupright(@arrowWidth: 8px) {
        margin-inline-end: @arrowWidth;
        .arrowreset();
        #arrow>.left(@arrowWidth);
        border-block-start-width: 0;
    }

    .diagonaldownleft(@arrowWidth: 8px) {
        margin-inline-end: @arrowWidth;
        .arrowreset();
        #arrow>.right(@arrowWidth);
        border-block-end-width: 0;
    }

    .diagonaldownright(@arrowWidth: 8px) {
        margin-inline-end: @arrowWidth;
        /* reset */
        .arrowreset();
        #arrow>.left(@arrowWidth);
        border-block-end-width: 0;
    }
}