lg_frontend/assets/styles/mixin.less

@import "@/assets/fonts/fonts.less";
//表单元素垂直居中对齐（也可设置顶对齐，底对齐）
.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;
}