minin.less
.setTapColor (@c:rgba(0 ,0 ,0 ,0 ) ) {
-webkit-tap-highlight-color : @c;
}
._setArrow (@arrowsize, @borderColor, @borderWidth){
display : inline-block;
height : @arrowsize;
width : @arrowsize;
border-width : @borderWidth @borderWidth 0 0 ;
border-color : @borderColor;
border-style : solid;
}
.setArrow (@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top ) {
._setArrow (@arrowsize, @borderColor, @borderWidth);
transform : matrix(0.71 ,-0.71 ,0.71 ,0.71 ,0 ,0 );
}
.setArrow (@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right ) {
._setArrow (@arrowsize, @borderColor, @borderWidth);
transform : matrix(0.71 ,0.71 ,-0.71 ,0.71 ,0 ,0 );
position : relative;
top : -2 px;
}
.setArrow (@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down ) {
._setArrow (@arrowsize, @borderColor, @borderWidth);
transform : matrix(-0.71 ,0.71 ,-0.71 ,-0.71 ,0 ,0 );
position : relative;
top : -3 px;
}
.setArrow (@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left ) {
._setArrow (@arrowsize, @borderColor, @borderWidth);
transform : matrix(-0.71 ,-0.71 ,0.71 ,-0.71 ,0 ,0 );
position : relative;
top : -2 px;
}
.setTopLine (@c: #C7C7C7 ) {
content : " " ;
position : absolute;
left : 0 ;
top : 0 ;
right : 0 ;
height : 1 px;
border-top : 1 px solid @c;
color : @c;
transform-origin : 0 0 ;
transform : scaleY(0.5 );
}
.setBottomLine (@c: #C7C7C7 ) {
content : " " ;
position : absolute;
left : 0 ;
bottom : 0 ;
right : 0 ;
height : 1 px;
border-bottom : 1 px solid @c;
color : @c;
transform-origin : 0 100 %;
transform : scaleY(0.5 );
}
.setLeftLine (@c: #C7C7C7 ) {
content : " " ;
position : absolute;
left : 0 ;
top : 0 ;
width : 1 px;
bottom : 0 ;
border-left : 1 px solid @c;
color : @c;
transform-origin : 0 0 ;
transform : scaleX(0.5 );
}
.setRightLine (@c: #C7C7C7 ) {
content : " " ;
position : absolute;
right : 0 ;
top : 0 ;
width : 1 px;
bottom : 0 ;
border-right : 1 px solid @c;
color : @c;
transform-origin : 100 % 0 ;
transform : scaleX(0.5 );
}
.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;
}
.text_wrap () {
word-wrap :break-word;
word-break :break-all;
}
.hyphens () {
word-wrap :break-word;
-webkit-hyphens :auto;
hyphens :auto;
}
variable.less
.setTapColor (@c:rgba(0 ,0 ,0 ,0 ) ) {
-webkit-tap-highlight-color : @c;
}
._setArrow (@arrowsize, @borderColor, @borderWidth){
display : inline-block;
height : @arrowsize;
width : @arrowsize;
border-width : @borderWidth @borderWidth 0 0 ;
border-color : @borderColor;
border-style : solid;
}
.setArrow (@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top ) {
._setArrow (@arrowsize, @borderColor, @borderWidth);
transform : matrix(0.71 ,-0.71 ,0.71 ,0.71 ,0 ,0 );
}
.setArrow (@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right ) {
._setArrow (@arrowsize, @borderColor, @borderWidth);
transform : matrix(0.71 ,0.71 ,-0.71 ,0.71 ,0 ,0 );
position : relative;
top : -2 px;
}
.setArrow (@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down ) {
._setArrow (@arrowsize, @borderColor, @borderWidth);
transform : matrix(-0.71 ,0.71 ,-0.71 ,-0.71 ,0 ,0 );
position : relative;
top : -3 px;
}
.setArrow (@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left ) {
._setArrow (@arrowsize, @borderColor, @borderWidth);
transform : matrix(-0.71 ,-0.71 ,0.71 ,-0.71 ,0 ,0 );
position : relative;
top : -2 px;
}
.setTopLine (@c: #C7C7C7 ) {
content : " " ;
position : absolute;
left : 0 ;
top : 0 ;
right : 0 ;
height : 1 px;
border-top : 1 px solid @c;
color : @c;
transform-origin : 0 0 ;
transform : scaleY(0.5 );
}
.setBottomLine (@c: #C7C7C7 ) {
content : " " ;
position : absolute;
left : 0 ;
bottom : 0 ;
right : 0 ;
height : 1 px;
border-bottom : 1 px solid @c;
color : @c;
transform-origin : 0 100 %;
transform : scaleY(0.5 );
}
.setLeftLine (@c: #C7C7C7 ) {
content : " " ;
position : absolute;
left : 0 ;
top : 0 ;
width : 1 px;
bottom : 0 ;
border-left : 1 px solid @c;
color : @c;
transform-origin : 0 0 ;
transform : scaleX(0.5 );
}
.setRightLine (@c: #C7C7C7 ) {
content : " " ;
position : absolute;
right : 0 ;
top : 0 ;
width : 1 px;
bottom : 0 ;
border-right : 1 px solid @c;
color : @c;
transform-origin : 100 % 0 ;
transform : scaleX(0.5 );
}
.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;
}
.text_wrap () {
word-wrap :break-word;
word-break :break-all;
}
.hyphens () {
word-wrap :break-word;
-webkit-hyphens :auto;
hyphens :auto;
}