$color-border-light: #eaeaea; 
 | 
  
 | 
@mixin hairline-common() { 
 | 
  content: ''; 
 | 
  position: absolute; 
 | 
  transform-origin: center; 
 | 
  box-sizing: border-box; 
 | 
  pointer-events: none; 
 | 
} 
 | 
  
 | 
@mixin hairline() { 
 | 
  @include hairline-common(); 
 | 
  top: -50%; 
 | 
  right: -50%; 
 | 
  bottom: -50%; 
 | 
  left: -50%; 
 | 
  border: 0 solid $color-border-light; 
 | 
  transform: scale(0.5); 
 | 
} 
 | 
  
 | 
@mixin hairline-base($color: $color-border-light, $style: solid) { 
 | 
  @include hairline-common(); 
 | 
  
 | 
  top: -50%; 
 | 
  left: -50%; 
 | 
  right: -50%; 
 | 
  bottom: -50%; 
 | 
  border: 0 $style $color; 
 | 
  transform: scale(0.5); 
 | 
} 
 | 
  
 | 
@mixin hairline-surround($color: $color-border-light, $style: solid, $width: 1px) { 
 | 
  position: relative; 
 | 
  
 | 
  &::after { 
 | 
    @include hairline-base($color, $style); 
 | 
  
 | 
    border-width: $width; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin hairline-top($color: $color-border-light, $style: solid, $width: 1px) { 
 | 
  position: relative; 
 | 
  
 | 
  &::after { 
 | 
    @include hairline-base($color, $style); 
 | 
  
 | 
    border-top-width: $width; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin hairline-bottom($color: $color-border-light, $style: solid, $width: 1px) { 
 | 
  position: relative; 
 | 
  
 | 
  &::after { 
 | 
    @include hairline-base($color, $style); 
 | 
  
 | 
    border-bottom-width: $width; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin hairline-left($color: $color-border-light, $style: solid, $width: 1px) { 
 | 
  position: relative; 
 | 
  
 | 
  &::after { 
 | 
    @include hairline-base($color, $style); 
 | 
  
 | 
    border-left-width: $width; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin hairline-right($color: $color-border-light, $style: solid, $width: 1px) { 
 | 
  position: relative; 
 | 
  
 | 
  &::after { 
 | 
    @include hairline-base($color, $style); 
 | 
  
 | 
    border-right-width: $width; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin hairline-top-bottom($color: $color-border-light, $style: solid, $width: 1px) { 
 | 
  position: relative; 
 | 
  
 | 
  &::after { 
 | 
    @include hairline-base($color, $style); 
 | 
  
 | 
    border-top-width: $width; 
 | 
    border-bottom-width: $width; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin hairline-bottom-relative($color: $color-border-light, $style: solid, $width: 1px, $left: 0) { 
 | 
  position: relative; 
 | 
  
 | 
  &::after { 
 | 
    @include hairline-common(); 
 | 
  
 | 
    top: auto; 
 | 
    left: $left; 
 | 
    right: 0; 
 | 
    bottom: 0; 
 | 
    transform: scaleY(0.5); 
 | 
    border-bottom: $width $style $color; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin hairline-top-relative($color: $color-border-light, $style: solid, $width: 1px, $left: 0) { 
 | 
  position: relative; 
 | 
  
 | 
  &::before { 
 | 
    @include hairline-common(); 
 | 
  
 | 
    top: 0; 
 | 
    left: $left; 
 | 
    right: 0; 
 | 
    bottom: auto; 
 | 
    transform: scaleY(0.5); 
 | 
    border-top: $width $style $color; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin hairline-left-relative($color: $color-border-light, $style: solid, $width: 1px, $top: 0) { 
 | 
  position: relative; 
 | 
  
 | 
  &::after { 
 | 
    @include hairline-common(); 
 | 
  
 | 
    top: $top; 
 | 
    left: 0; 
 | 
    right: auto; 
 | 
    bottom: 0; 
 | 
    transform: scaleX(0.5); 
 | 
    border-left: $width $style $color; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin hairline-right-relative($color: $color-border-light, $style: solid, $width: 1px, $top: 0) { 
 | 
  position: relative; 
 | 
  
 | 
  &::after { 
 | 
    @include hairline-common(); 
 | 
  
 | 
    top: $top; 
 | 
    left: auto; 
 | 
    right: 0; 
 | 
    bottom: 0; 
 | 
    transform: scaleX(0.5); 
 | 
    border-right: $width $style $color; 
 | 
  } 
 | 
} 
 | 
  
 | 
.van-hairline--bottom { 
 | 
  @include hairline-bottom(#ddd, 0, 0); 
 | 
} 
 | 
  
 | 
[class*='van-hairline'] { 
 | 
  &::after { 
 | 
    @include hairline(); 
 | 
  } 
 | 
} 
 | 
  
 | 
.van-hairline { 
 | 
  &, 
 | 
  &--top, 
 | 
  &--left, 
 | 
  &--right, 
 | 
  &--bottom, 
 | 
  &--surround, 
 | 
  &--top-bottom { 
 | 
    position: relative; 
 | 
  } 
 | 
  
 | 
  &--top::after { 
 | 
    border-top-width: 1px; 
 | 
  } 
 | 
  
 | 
  &--left::after { 
 | 
    border-left-width: 1px; 
 | 
  } 
 | 
  
 | 
  &--right::after { 
 | 
    border-right-width: 1px; 
 | 
  } 
 | 
  
 | 
  &--bottom::after { 
 | 
    border-bottom-width: 1px; 
 | 
  } 
 | 
  
 | 
  &, 
 | 
  &-unset { 
 | 
    &--top-bottom::after { 
 | 
      border-width: 1px 0; 
 | 
    } 
 | 
  } 
 | 
  
 | 
  &--surround::after { 
 | 
    border-width: 1px; 
 | 
  } 
 | 
} 
 |