kjh55128_m55128/KJH55128_Rec/public/css/common/mixin.less

@fcolor:#C31A00;
.firbg(){
    background: #C31A00;
}
.secbg(){
    background: #F3F3F3;
}
.border(){
    border: 1px solid rgba(0,0,0,.2);
}
.testbg(){
    background: papayawhip;
}
.border-1px-bottom(@color){
  position: relative;
  &:after{
       display: block;
       position: absolute;
       left: 0;
       bottom: 0;
       width: 100%;
       border-top: 1px solid @color;
       content: ' ';    
      }
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
        &:after{
           -webkit-transform: scaleY(0.7);
           transform: scaleY(0.7);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
        &:after{
           -webkit-transform: scaleY(0.5);
           transform: scaleY(0.5);
        }      
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
        &:after{
           -webkit-transform: scaleY(0.33);
           transform: scaleY(0.33);
        }      
    }
}
.border-1px(@color){
  position: relative;
  margin-bottom: 20px;
  border:none;
  &:after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid @color;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
        &:after{
          -webkit-transform: scale(0.7);
          transform: scale(0.7);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
        &:after{
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
        }      
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
        &:after{
          -webkit-transform: scale(0.33);
          transform: scale(0.33);
        }      
    }
}
.border-none(){
  &:after{
    display: none; 
  }
}
.flex-center(){
    display: -webkit-box;
    display: -moz-box;
    display: -mz-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    align-content: center;
}
.flex-center-between(){
    display: -webkit-box;
    display: -moz-box;
    display: -mz-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    align-content: center;
}
.flex-end(){
    display: -webkit-box;
    display: -moz-box;
    display: -mz-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
}
.flex-empty(){
    height:0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-image:none;
    border:none;
    &:after{
      display: none; 
    }
}
.flex-empty{
   .flex-empty();
}
.text-ellipsis(){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-multi-ellipsis(@row){
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @row;
    overflow: hidden;
}
.border-img(){
    border:1px solid transparent;
    -webkit-border-image: url("../images/border-1px.png") .5 .5 .5 .5 stretch;
    border-image: url("../images/border-1px.png") .5 .5 .5 .5 stretch;
}
.clear(){
    &:after{
        content:"";
        display:block;
        clear:both;
        height:0;
        overflow:hidden;
        visibility:hidden;
    }
    zoom:1;
}
.lot-shadow(){
    box-shadow: 0 0 10px 10px #fff,0 0 15px 15px #DADADA;
    border-radius: 50%;
}