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