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

// 渐变
.color-linear-gradient (@leftColor:#18bfff, @rightColor:#0092f1, @direction:'90deg') {
    background: -webkit-linear-gradient(@direction, @leftColor,  @rightColor);
    background: -o-linear-gradient(@direction, @leftColor, @rightColor);
    background: -moz-linear-gradient(@direction, @leftColor, @rightColor);
    background: linear-gradient(@direction, @leftColor, @rightColor);
}

.color-linear-gradient-to (@leftColor:#ff8457, @rightColor:#ff4e53, @direction:'90deg') {
    background: -webkit-linear-gradient(@direction, @leftColor,  @rightColor);
    background: -o-linear-gradient(@direction, @leftColor, @rightColor);
    background: -moz-linear-gradient(@direction, @leftColor, @rightColor);
    background: linear-gradient(@direction, @leftColor, @rightColor);
}

// 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;
}

// top----1px
.setTopLine(@c: #C7C7C7, @height: 100%) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: @height;
    border-top: 1PX solid @c;
    color: @c;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}
// button----1px
.setBottomLine(@c: #C7C7C7, @height: 100%) {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: @height;
    border-bottom: 1PX solid @c;
    color: @c;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}
// left----1px
.setLeftLine(@c: #C7C7C7, @height: 100%) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1PX;
    bottom: 0;
    border-left: 1PX solid @c;
    color: @c;
    height: @height;
    transform-origin: 0 0;
    transform: scaleX(0.5);
}
// right----1px
.setRightLine(@c: #C7C7C7, @height: 100%) {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1PX;
    height: @height;
    bottom: 0;
    border-right: 1PX solid @c;
    color: @c;
    transform-origin: 100% 0;
    transform: scaleX(0.5);
}
// 设置箭头 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;
}