react-zeanium-ui-ui/src/ui/Arrow.less

Zeanium UI Framework for React.js

@color-default: #3FA9F5;
@color-primary: #337ab7;
@color-success: #5cb85c;
@color-info:    #5bc0de;
@color-warning: #f0ad4e;
@color-danger:  #d9534f;

.c-arrow-base (@width: 10px, @color: #f00){
    border: @width solid transparent;
    border-left: @width solid @color;
    width: 0px;
    height: 0px;
}

.c-arrow-degree(@degree: 0deg){
    transform:rotate(@degree);
    -ms-transform:rotate(@degree); 	     /* IE 9 */
    -moz-transform:rotate(@degree); 	 /* Firefox */
    -webkit-transform:rotate(@degree);   /* Safari 和 Chrome */
    -o-transform:rotate(@degree); 	     /* Opera */
}


.c-arrow{
    display: inline-block;

    &.d-top{
        &, &::after, &::before{
            .c-arrow-degree(-90deg);
        }
    }

    &.d-right{
        &, &::after, &::before{
            .c-arrow-degree(0deg);
        }
    }

    &.d-bottom{
        &, &::after, &::before{
            .c-arrow-degree(90deg);
        }
    }

    &.d-left{
        &, &::after, &::before{
            .c-arrow-degree(-180deg);
        }
    }

    &.t-solid {
        .c-arrow-base;
    }

    &.t-line {
        position: relative;
        &>.after, &>.before {
            position: absolute;
            content: ' ';
            top: 0;
            right: -20px;
            .c-arrow-base(10px, transparent);
        }


        &.top, &.bottom{
            &::after{
                border-left-color: #f00;
                right: -21px;
            }
        }
        &.top, &.bottom{
            &::after{
                border-left-color: #f00;
                right: -21px;
            }
        }

    }

    &._solid_line {
        position: relative;
        &::after, &::before {
            position: absolute;
            content: ' ';
            top: 0;
            right: -20px;
            .c-arrow-base;
            border: solid transparent;
        }
        &::before{
            border-left-color: #f00;
            right: -21px;
        }
    }

}