feat(1px): 优化组件细节，分隔线使用 1rpx

小程序端使用 1rpx，H5 端不转成 rem，而是保持 1px
jd-opensource · Oct 19, 2018 · 3ed1e1c · 3ed1e1c
1 parent ca79801
commit 3ed1e1c
Show file tree

Hide file tree

Showing 18 changed files with 44 additions and 31 deletions.
diff --git a/config/index.js b/config/index.js
@@ -23,14 +23,27 @@ const config = {
   defineConstants: {
   },
   weapp: {
-
+    module: {
+      postcss: {
+        pxtransform: {
+          config: {
+            onePxTransform: true
+          }
+        }
+      }
+    }
   },
   h5: {
     staticDirectory: 'static',
     module: {
       postcss: {
         autoprefixer: {
           enable: true
+        },
+        pxtransform: {
+          config: {
+            onePxTransform: false
+          }
         }
       }
     }

diff --git a/src/components/accordion/index.scss b/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 border-thin-bottom($width: 1px);
     @include active;
   }
 
@@ -30,11 +30,11 @@
       content: '';
       display: block;
       width: 100%;
-      height: 1PX;
+      height: 1px;
       position: absolute;
-      bottom: -1PX;
+      bottom: -1px;
       left: 0;
-      @include border-thin-top($width: 1PX);
+      @include border-thin-top($width: 1px);
     }
   }
 }
diff --git a/src/components/action-sheet/body/item/index.scss b/src/components/action-sheet/body/item/index.scss
@@ -6,7 +6,7 @@
   font-size: $font-size-xl;
 
   /* prettier-ignore */
-  @include border-thin-bottom($width: 1PX);
+  @include border-thin-bottom($width: 1px);
 
   @include active();
   @include line(1);

diff --git a/src/components/action-sheet/header/index.scss b/src/components/action-sheet/header/index.scss
@@ -9,5 +9,5 @@
   line-height: $line-height-zh;
 
   /* prettier-ignore */
-  @include border-thin-bottom($width: 1PX);
+  @include border-thin-bottom($width: 1px);
 }
diff --git a/src/components/checkbox/index.scss b/src/components/checkbox/index.scss
@@ -79,7 +79,7 @@ $checkbox-icon-px-size: 20PX;
 
   &__option + &__option {
     .at-checkbox__option_wrap {
-      @include border-thin-top($width: 1PX);
+      @include border-thin-top($width: 1px);
     }
   }
 }
diff --git a/src/components/form/index.scss b/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 border-thin($directions: bottom top, $width: 1px);
 }
diff --git a/src/components/grid/index.scss b/src/components/grid/index.scss
@@ -19,7 +19,7 @@ $gird-img-size-sm: 50px;
       background-color: $color-border-lighter;
 
       /* prettier-ignore */
-      width: 1PX;
+      width: 1px;
       height: 100%;
     }
   }

diff --git a/src/components/input/index.scss b/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 border-thin-bottom($width: 1px);
 
   &__container {
     display: flex;

diff --git a/src/components/list/index.scss b/src/components/list/index.scss
@@ -3,7 +3,7 @@
 
 .at-list {
   /* prettier-ignore */
-  @include border-thin-top($width: 1PX);
+  @include border-thin-top($width: 1px);
 
   position: relative;
   background-color: white;
@@ -15,10 +15,10 @@
     bottom: 0;
     left: 0;
     z-index: 2;
-    background-color: $color-border-lighter;
+    background-color: $color-border-light;
 
     /* prettier-ignore */
-    height: 1PX;
+    height: 1px;
   }
 
   &::before {
@@ -30,7 +30,7 @@
     background-color: transparent;
 
     /* prettier-ignore */
-    height: calc(100% - 1PX);
+    height: calc(100% - 1px);
     top: 0;
   }
 

diff --git a/src/components/list/item/index.scss b/src/components/list/item/index.scss
@@ -30,8 +30,8 @@ $item-horizontal-padding: 24px;
     width: calc(100% - #{$spacing-h-lg});
 
     /* prettier-ignore */
-    height: 1PX;
-    background-color: $color-border-lighter;
+    height: 1px;
+    background-color: $color-border-light;
     bottom: 0;
     left: $spacing-h-lg;
   }

diff --git a/src/components/modal/action/index.scss b/src/components/modal/action/index.scss
@@ -3,7 +3,7 @@
 
 .at-modal-footer {
   /* prettier-ignore */
-  @include border-thin-top($color:$color-grey-4,$width: 1PX);
+  @include border-thin-top($color:$color-grey-4,$width: 1px);
 
   .at-modal-action {
     @include display-flex;
@@ -30,7 +30,7 @@
 
       &:not(:first-child) {
         /* prettier-ignore */
-        @include border-thin-left($color: $color-grey-4,$width:1PX);
+        @include border-thin-left($color: $color-grey-4,$width:1px);
       }
 
       &:first-child:last-child {

diff --git a/src/components/nav-bar/index.scss b/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 border-thin-bottom($width: 1px);
 
   &--fixed {
     position: fixed;

diff --git a/src/components/radio/index.scss b/src/components/radio/index.scss
@@ -60,7 +60,7 @@
 
   &__option + &__option {
     .at-radio__option_wrap {
-      @include border-thin-top($width: 1PX);
+      @include border-thin-top($width: 1px);
     }
   }
 }
diff --git a/src/components/switch/index.scss b/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 border-thin-bottom($width: 1px);
 
   &__title {
     flex: 6;

diff --git a/src/components/tab-bar/index.scss b/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 border-thin-top($width: 1px);
 
   &__item {
     flex: 1;

diff --git a/src/pages/form/checkbox/index.scss b/src/pages/form/checkbox/index.scss
@@ -1,5 +1,5 @@
 @import '../../../style/mixins/index.scss';
 
 .checkbox-container {
-  @include border-thin($directions: top bottom, $width: 1PX);
+  @include border-thin($directions: top bottom, $width: 1px);
 }
diff --git a/src/pages/form/radio/index.scss b/src/pages/form/radio/index.scss
@@ -1,5 +1,5 @@
 @import '../../../style/mixins/index.scss';
 
 .radio-container {
-  @include border-thin($directions: top bottom, $width: 1PX);
+  @include border-thin($directions: top bottom, $width: 1px);
 }
diff --git a/src/style/mixins/libs/border.scss b/src/style/mixins/libs/border.scss
@@ -1,9 +1,9 @@
 @import "../../theme/default";
 
-// 默认主题下 $color-border-lighter
+// 默认主题下 $color-border-light
 
 @mixin border-thin(
-  $color: $color-border-lighter,
+  $color: $color-border-light,
   $style: solid,
   $directions: top bottom right left,
   $width: 1px
@@ -14,31 +14,31 @@
 }
 
 @mixin border-thin-top(
-  $color: $color-border-lighter,
+  $color: $color-border-light,
   $style: solid,
   $width: 1px
 ) {
   @include border-thin($color, $style, top, $width);
 }
 
 @mixin border-thin-left(
-  $color: $color-border-lighter,
+  $color: $color-border-light,
   $style: solid,
   $width: 1px
 ) {
   @include border-thin($color, $style, left, $width);
 }
 
 @mixin border-thin-right(
-  $color: $color-border-lighter,
+  $color: $color-border-light,
   $style: solid,
   $width: 1px
 ) {
   @include border-thin($color, $style, right, $width);
 }
 
 @mixin border-thin-bottom(
-  $color: $color-border-lighter,
+  $color: $color-border-light,
   $style: solid,
   $width: 1px
 ) {