/**
 * Created by c.y on 2018-3-1
 * 文件说明: 这个是定义项目全局的mixin
 */

// flex布局
.flexLayout(@justify:flex-start,@align:center,@direction:row) {
    display: flex;
    justify-content: @justify;
    align-items: @align;
    flex-direction: @direction;
}

// 清除浮动
.clearfix() {
    zoom: 1;
    &:before,
    &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
        visibility: hidden;
        font-size: 0;
        height: 0;
    }
}

// 单行文本超出显示省略号
.ellipsis(@w:auto) {
    width: @w;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

// 多行文本超出显示省略号
.ellipsisLn(@line) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
    word-break: break-all;
}

// 单词换行
.text_wrap() {
    word-wrap: break-word;
    word-break: break-all;
}

// 设置箭头 arrowSize--箭头的大小, borderColor---箭头的颜色，@borderWidth箭头的粗细
._setArrow(@arrowsize, @borderColor, @borderWidth) {
    display: inline-block;
    height: @arrowsize;
    width: @arrowsize;
    border-width: @borderWidth @borderWidth 0 0;
    border-color: @borderColor;
    border-style: solid;
}

// 示例调用  .setArrow(top, 10px, red, 2px);向上箭头
.setArrow(@direction, @arrowsize, @borderColor, @borderWidth)
    when
    (@direction = top) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);
    transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0); // rotate(-45deg)
}

.setArrow(@direction, @arrowsize, @borderColor,@borderWidth)
    when
    (@direction = right) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // rotate(45deg);
    position: relative;
    top: -1px;
}

.setArrow(@direction, @arrowsize, @borderColor,@borderWidth)
    when
    (@direction = down) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);
    transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); // rotate(135deg);
    position: relative;
    top: -1.5px;
}

.setArrow(@direction, @arrowsize, @borderColor,@borderWidth)
    when
    (@direction = left) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);
    transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0); // rotate(-135deg);
    position: relative;
    top: -1px;
}