//----------------------------------
//
//**
// *
// * @authors liwb(lwbhtml@163.com)
// * @date    2017/11/29 14:45
// * @version $
// * @desc 移动端1px的线 利用伪类+background-image
// */
//----------------------------------

.hairline(@position, @color)  {
  // top
  & when (@position = top) {
    &:before {
      left: 0;
      top: 0;
      bottom: auto;
      right: auto;
      height: 1Px;
      width: 100%;
      .hairline-background-image(@color);
      background-size: 100% 1Px;
    }
  }
  // left
  & when (@position = left) {
    &:before {
      left: 0;
      top: 0;
      bottom: auto;
      right: auto;
      width: 1Px;
      height: 100%;
      .hairline-background-image(@color);
      background-size: 1Px 100%;
    }
  }
  // bottom
  & when (@position = bottom) {
    &:after {
      left: 0;
      bottom: 0;
      right: auto;
      top: auto;
      height: 1Px;
      width: 100%;
      .hairline-background-image(@color);
      background-size: 100% 1Px;
    }
  }
  // right
  & when (@position = right) {
    &:after {
      right: 0;
      top: 0;
      left: auto;
      bottom: auto;
      width: 1Px;
      height: 100%;
      .hairline-background-image(@color);
      background-size: 1Px 100%;
    }
  }
}

.hairline-background-image(@color) {
  content: "";
  position: absolute;
  display: block;
  z-index: 15;
  background-image: linear-gradient(180deg, @color, @color 50%, transparent 50%);
  background-repeat: no-repeat;
}