common-style-less.less

/*text*/
//ellipsis
.text-ellipsis(@lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
}
//size
.font-l {
  font-size: 16px;
}
.font-n {
  font-size: 14px;
}
.font-s {
  font-size: 12px;
}
//weight
.bold {
  font-weight: bold;
}
.normal {
  font-weight: normal;
}
.lighter {
  font-weight: lighter;
}

/*布局*/
//行内元素对齐
.text-c {
  text-align: center;
}
.text-l {
  text-align: left;
}
.text-r {
  text-align: right;
}
//两边对齐弹性布局
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
//间隔相等弹性布局
.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
//水平居中
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
//弹性布局从头排
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
//弹性布局从尾排
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flex-content(@style:flex-start){
  display: flex;
  justify-content: @style;
  align-items: center;
}

//section尺寸大小
.size(@w:100%, @h:100%) { width: @w; height: @h; }

//滚动条
/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
.scrollbar(@w:10px,@h:10px,@scrollbarBgColor:white,@thumbBgColor:black,@thumbBgHoverColor:#404040,@thumbRadius:5px){
  &::-webkit-scrollbar {
    width: @w;
    height: @h;
    background-color: @scrollbarBgColor;
  }
  /*定义滚动条轨道
 背景颜色*/
  &::-webkit-scrollbar-track
  {
    background-color:@scrollbarBgColor;
  }
  /* 暗色模式下的滚动条滑块样式 */
  &::-webkit-scrollbar-thumb {
    background-color: @thumbBgColor;
    border-radius: @thumbRadius;
    &:hover {
      background-color: @thumbBgHoverColor;
    }
  }
}
//透明度颜色设置
.color-opacity(@color: #000, @opacity: 0.5) {
  background-color: rgba(red(@color), green(@color), blue(@color), @opacity);
}