104 lines
1.9 KiB
Plaintext
104 lines
1.9 KiB
Plaintext
@import "@/assets/fonts/fonts.less";
|
||
@import "global";
|
||
//表单元素垂直居中对齐（也可设置顶对齐，底对齐）
|
||
.form-element-v-align(@alignment: middle){
|
||
display: inline-block;
|
||
vertical-align: @alignment;
|
||
*vertical-align: auto;
|
||
*display: inline;
|
||
zoom: 1;
|
||
}
|
||
|
||
//水平居中
|
||
.horizontal-center(){
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
//绝对居中(相对于固定宽高的容器)
|
||
.absolute-center(@width, @height){
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
margin-left: -(@width / 2);
|
||
margin-top: -(@height / 2);
|
||
width: @width;
|
||
height: @height;
|
||
}
|
||
|
||
//浮动（主要针对PC端了...）
|
||
.float(@side: left){
|
||
float: @side;
|
||
_display: inline;
|
||
}
|
||
|
||
//清除浮动(其实很多时候，clear-fix也被提取为单类使用)
|
||
.clear-fix(){
|
||
*zoom: 1;
|
||
&:before,
|
||
&:after {
|
||
content: "";
|
||
display: table;
|
||
clear: both;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
//截取文本(仅针对单行)
|
||
.text-single-line-ellipsis(@height, @line-height, @width: auto){
|
||
width: @width;
|
||
height: @height;
|
||
line-height: @line-height;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
//设置透明度
|
||
.opacity(@val){
|
||
filter: alpha(opacity=@val);
|
||
opacity: @val / 100;
|
||
}
|
||
|
||
//不可用状态
|
||
.disabled(@bgColor:#e6e6e6, @textColor:#ababab){
|
||
background-color: @bgColor !important;
|
||
color: @textColor !important;
|
||
cursor: not-allowed !important;
|
||
}
|
||
|
||
//最小高度（主要针对PC端了...）
|
||
.min-height(@height){
|
||
min-height: @height;
|
||
height: auto !important;
|
||
_height: @height;
|
||
}
|
||
.flex-start(@type: row) {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-direction: @type;
|
||
}
|
||
.bg(@url, @left: left, @top: top) {
|
||
background: url(@url) @left @top no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
|
||
.flex-row{
|
||
display: flex;
|
||
flex-flow: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-column{
|
||
display: flex;
|
||
flex-flow: column;
|
||
}
|
||
.text-ellipsis{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|