feat(1px): 更改 1px 的实现方式

src/components/accordion/index.scss

@@ -10,7 +10,7 @@
     min-height: $font-size-lg;
     font-size: $font-size-lg;
     padding: $spacing-v-lg $spacing-h-lg;
-    @include border-thin-bottom($width: 1px);
+    @include hairline-bottom();
     @include active;
   }
 
@@ -25,16 +25,6 @@
     width: 100%;
     transition: height 0.3s;
     overflow: hidden;
-
-    &::after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 1px;
-      position: absolute;
-      bottom: -1px;
-      left: 0;
-      @include border-thin-top($width: 1px);
-    }
+    @include hairline-top();
   }
 }

src/components/action-sheet/body/item/index.scss

@@ -4,10 +4,7 @@
 .at-action-sheet-item {
   padding: $spacing-v-lg $spacing-h-lg;
   font-size: $font-size-xl;
-
-  /* prettier-ignore */
-  @include border-thin-bottom($width: 1px);
-
   @include active();
   @include line(1);
+  @include hairline-bottom-relative();
 }

src/components/action-sheet/header/index.scss

@@ -7,7 +7,5 @@
   font-size: $font-size-base;
   text-align: center;
   line-height: $line-height-zh;
-
-  /* prettier-ignore */
-  @include border-thin-bottom($width: 1px);
+  @include hairline-bottom();
 }

src/components/checkbox/index.scss

@@ -6,6 +6,7 @@ $checkbox-icon-px-size: 20PX;
 
 .at-checkbox {
   background-color: $color-bg;
+  @include hairline-top-bottom();
 
   &__option_wrap {
     padding: $spacing-v-lg $spacing-h-xl $spacing-v-lg 0;
@@ -79,7 +80,7 @@ $checkbox-icon-px-size: 20PX;
 
   &__option + &__option {
     .at-checkbox__option_wrap {
-      @include border-thin-top($width: 1px);
+      @include hairline-top();
     }
   }
 }

src/components/form/index.scss

@@ -6,5 +6,5 @@
   padding-left: $spacing-h-xl;
   background-color: $color-bg;
   overflow: hidden;
-  @include border-thin($directions: bottom top, $width: 1px);
+  @include hairline-top-bottom();
 }

src/components/grid/index.scss

@@ -9,23 +9,16 @@ $gird-img-size-sm: 50px;
 
   &-item {
     position: relative;
-    @include border-thin-bottom($width: 1px);
+    @include hairline-surround();
 
     &::after {
-      content: " ";
-      position: absolute;
-      right: 0;
-      top: 0;
-      background-color: $color-border-lighter;
-
-      /* prettier-ignore */
-      width: 1px;
-      height: 100%;
+      border-top: none;
+      border-left: none;
     }
   }
 
   &:last-child {
-    .at-grid__flex-item {
+    .at-grid__flex-item::after {
       border-bottom: none;
     }
   }
@@ -53,7 +46,7 @@ $gird-img-size-sm: 50px;
 
 .at-grid-item--last {
   &::after {
-    content: initial;
+    border-right: none;
   }
 }
 
@@ -118,10 +111,8 @@ $gird-img-size-sm: 50px;
   }
 
   &--no-border {
-    border-bottom: initial;
-
     &::after {
-      content: initial;
+      border: none;
     }
   }
 

src/components/input/index.scss

@@ -5,7 +5,7 @@
   padding: $spacing-v-lg 0;
   background-color: $color-bg;
   color: $color-text-base;
-  @include border-thin-bottom($width: 1px);
+  @include hairline-bottom();
 
   &__container {
     display: flex;
@@ -46,7 +46,7 @@
 
   &__children {
     display: inline-flex;
-    @include border-thin-left;
+    @include hairline-left();
 
     > view,
     div,

src/components/list/index.scss

@@ -2,37 +2,8 @@
 @import "../../style/theme/default.scss";
 
 .at-list {
-  /* prettier-ignore */
-  @include border-thin-top($width: 1px);
-
-  position: relative;
   background-color: white;
-
-  &::after {
-    content: " ";
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    background-color: $color-border-light;
-
-    /* prettier-ignore */
-    height: 1px;
-  }
-
-  &::before {
-    content: " ";
-    left: 0;
-    width: $spacing-v-lg;
-    z-index: 100;
-    position: absolute;
-    background-color: transparent;
-
-    /* prettier-ignore */
-    height: calc(100% - 1px);
-    top: 0;
-  }
+  @include hairline-top-bottom();
 
   &--no-border {
     border-top: none;

src/components/list/item/index.scss

@@ -23,18 +23,7 @@ $item-horizontal-padding: 24px;
   color: $color-text-base;
   font-size: $font-size-lg;
   line-height: $line-height-zh;
-
-  &::after {
-    content: " ";
-    position: absolute;
-    width: calc(100% - #{$spacing-h-lg});
-
-    /* prettier-ignore */
-    height: 1px;
-    background-color: $color-border-light;
-    bottom: 0;
-    left: $spacing-h-lg;
-  }
+  @include hairline-bottom-relative($left: $spacing-h-lg);
 
   &-container {
     @include display-flex;

src/components/modal/action/index.scss

@@ -2,8 +2,7 @@
 @import "../../../style/theme/default";
 
 .at-modal-footer {
-  /* prettier-ignore */
-  @include border-thin-top($color:$color-grey-4,$width: 1px);
+  @include hairline-top($color: $color-grey-4);
 
   .at-modal-action {
     @include display-flex;
@@ -26,11 +25,12 @@
       &::after {
         border: 0;
         border-radius: 0;
+        width: initial;
+        height: initial;
       }
 
       &:not(:first-child) {
-        /* prettier-ignore */
-        @include border-thin-left($color: $color-grey-4,$width:1px);
+        @include hairline-left-relative($color: $color-grey-4);
       }
 
       &:first-child:last-child {

src/components/modal/header/index.scss

@@ -2,7 +2,7 @@
 @import "../../../style/theme/default";
 
 .at-modal-header {
-  @include border-thin-bottom($color-grey-4);
+  @include hairline-bottom($color: $color-grey-4);
   @include line(1);
 
   color: $color-text-base;

src/components/nav-bar/index.scss

@@ -13,7 +13,7 @@ $font-size: 18PX;
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
-  @include border-thin-bottom($width: 1px);
+  @include hairline-bottom();
 
   &--fixed {
     position: fixed;

src/components/radio/index.scss

@@ -3,6 +3,7 @@
 
 .at-radio {
   background-color: $color-bg;
+  @include hairline-top-bottom();
 
   &__option_wrap {
     padding: $spacing-v-lg $spacing-h-xl $spacing-v-lg 0;
@@ -60,7 +61,7 @@
 
   &__option + &__option {
     .at-radio__option_wrap {
-      @include border-thin-top($width: 1px);
+      @include hairline-top();
     }
   }
 }

src/components/search-bar/index.scss

@@ -13,7 +13,7 @@ $placeholderPadding: 5PX;
   box-sizing: content-box;
   overflow: hidden;
   background-color: $color-bg;
-  @include border-thin-bottom;
+  @include hairline-bottom();
 
   &__container {
     position: relative;

src/components/switch/index.scss

@@ -7,7 +7,7 @@
   align-items: center;
   background-color: $color-bg;
   padding: $spacing-v-lg $spacing-h-xl $spacing-v-lg 0;
-  @include border-thin-bottom($width: 1px);
+  @include hairline-bottom();
 
   &__title {
     flex: 6;

src/components/tab-bar/index.scss

@@ -11,7 +11,7 @@
   justify-content: center;
   align-items: start;
   background-color: $color-bg;
-  @include border-thin-top($width: 1px);
+  @include hairline-top();
 
   &__item {
     flex: 1;

src/pages/form/checkbox/index.scss

@@ -1,5 +0,0 @@
-@import '../../../style/mixins/index.scss';
-
-.checkbox-container {
-  @include border-thin($directions: top bottom, $width: 1px);
-}

src/pages/form/radio/index.scss

@@ -1,5 +0,0 @@
-@import '../../../style/mixins/index.scss';
-
-.radio-container {
-  @include border-thin($directions: top bottom, $width: 1px);
-}

src/pages/panel/index.scss

@@ -1,4 +1,5 @@
 @import '../../components/icon/index.scss';
+@import '../../style/mixins/index.scss';
 @import '../../style/theme/default.scss';
 
 /**
@@ -50,7 +51,7 @@
     align-items: center;
     justify-content: space-between;
     height: 120px;
-    border-bottom: 1px solid $color-border-lighter;
+    @include hairline-bottom();
 
     .name {
       color: #1d1d26;

src/style/mixins/index.scss

@@ -15,3 +15,4 @@
 @import './libs/disabled';
 @import './libs/placeholder';
 @import './libs/alignhack';
+@import './libs/hairline';