style(checkbox、radio、picker、divider): add sass param

src/packages/__VUE/checkbox/index.scss

@@ -4,13 +4,13 @@
   &--reverse {
     flex-direction: row-reverse;
     .nut-checkbox__label {
-      margin-right: 15px;
+      margin-right: $checkbox-label-margin-left;
       margin-left: 0;
     }
   }
   &__label {
-    margin-left: 15px;
-    font-size: 14px;
+    margin-left: $checkbox-label-margin-left;
+    font-size: $checkbox-label-font-size;
     color: $checkbox-label-color;
     &--disabled {
       color: $checkbox-label-disable-color;
@@ -18,6 +18,7 @@
   }
   &__icon {
     color: $primary-color;
+    font-size: $checkbox-icon-font-size;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
   }

src/packages/__VUE/checkbox/index.taro.vue

@@ -22,7 +22,7 @@ export default create({
     },
     iconSize: {
       type: [String, Number],
-      default: '18'
+      default: ''
     },
     iconName: {
       type: String,

src/packages/__VUE/checkbox/index.vue

@@ -23,7 +23,7 @@ export default create({
     },
     iconSize: {
       type: [String, Number],
-      default: '18'
+      default: ''
     },
     iconName: {
       type: String,

src/packages/__VUE/divider/demo.vue

@@ -1,31 +1,16 @@
 <template>
-  <div class="demo">
+  <div class="demo full bg-w">
     <h2>基础用法</h2>
-    <nut-cell>
-      <nut-divider />
-    </nut-cell>
+    <nut-divider />
     <h2>展示文本</h2>
-    <nut-cell>
-      <nut-divider>文本</nut-divider>
-    </nut-cell>
+    <nut-divider>文本</nut-divider>
     <h2>内容位置</h2>
-    <nut-cell>
-      <nut-divider content-position="left">文本</nut-divider>
-    </nut-cell>
-    <nut-cell>
-      <nut-divider content-position="right">文本</nut-divider>
-    </nut-cell>
+    <nut-divider content-position="left">文本</nut-divider>
+    <nut-divider content-position="right">文本</nut-divider>
     <h2>虚线</h2>
-    <nut-cell>
-      <nut-divider dashed>文本</nut-divider>
-    </nut-cell>
+    <nut-divider dashed>文本</nut-divider>
     <h2>自定义样式</h2>
-    <nut-cell>
-      <nut-divider
-        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
-        >文本</nut-divider
-      >
-    </nut-cell>
+    <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文本</nut-divider>
   </div>
 </template>
 

src/packages/__VUE/divider/index.scss

@@ -1,16 +1,16 @@
 .nut-divider {
   display: flex;
   align-items: center;
-  font-size: 14px;
-  color: #909ca4;
-  margin: 8px 0;
-  width: 100%;
+  font-size: $divider-text-font-size;
+  color: $divider-text-color;
+  margin: $divider-margin;
 
   &::before,
   &::after {
     content: '';
-    border: 1px solid currentColor;
-    border-width: 1px 0 0;
+    border: $divider-line-height solid currentColor;
+    border-width: $divider-line-height 0 0;
+    height: $divider-line-height;
     flex: 1;
   }
 
@@ -18,11 +18,11 @@
   &.nut-divider-left,
   &.nut-divider-right {
     &::before {
-      margin-right: 8px;
+      margin-right: $divider-before-margin-right;
     }
 
     &::after {
-      margin-left: 8px;
+      margin-left: $divider-after-margin-left;
     }
   }
 

src/packages/__VUE/picker/index.scss

@@ -1,6 +1,4 @@
 .nut-picker {
-  color: #f00;
-
   view {
     display: block;
   }
@@ -19,8 +17,6 @@
     height: 56px;
     align-items: center;
     justify-content: space-between;
-    padding: 0 15px;
-    font-size: 16px;
   }
   &__column {
     display: flex;
@@ -34,10 +30,25 @@
   }
   &__left {
     color: $picker-cancel-color;
-    font-size: 16px;
+    font-size: $picker-bar-cancel-font-size;
+  }
+  &__right {
+    color: $picker-ok-color;
+    font-size: $picker-bar-ok-font-size;
+  }
+
+  &__title {
+    color: $picker-bar-title-color;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
   }
+
   &__button {
     cursor: pointer;
+    padding: $picker-bar-button-padding;
+    display: flex;
+    align-items: center;
+    height: 100%;
   }
   &__wrapper {
     display: block;
@@ -53,7 +64,7 @@
     top: 108px;
     height: 34px;
     width: 100%;
-    border: 1px solid #d8d8d8;
+    border: $picker-item-active-line-border;
     border-left: 0;
     border-right: 0;
   }
@@ -72,7 +83,7 @@
     position: absolute;
     top: 108px;
     width: 100%;
-    height: 36px;
+    height: $picker-item-height;
     z-index: 1;
     transform-style: preserve-3d;
 
@@ -82,10 +93,10 @@
       position: absolute;
       top: 0;
       width: 100%;
-      height: 36px;
-      line-height: 36px;
-      color: #808080;
-      font-size: 16px;
+      height: $picker-item-height;
+      line-height: $picker-item-height;
+      color: $picker-item-text-color;
+      font-size: $picker-item-text-font-size;
 
       &-hidden {
         visibility: hidden;
@@ -99,7 +110,8 @@
     position: absolute;
     top: 108px;
     width: 100%;
-    height: 36px;
+    height: $picker-item-height;
+    color: $picker-item-active-text-color;
     z-index: 2;
     overflow: hidden;
     border-left: 0;
@@ -114,8 +126,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: 36px;
-    line-height: 36px;
+    height: $picker-item-height;
+    line-height: $picker-item-height;
     text-align: center;
     font-size: 16px;
   }

src/packages/__VUE/picker/index.taro.vue

@@ -9,9 +9,9 @@
     :round="true"
   >
     <view class="nut-picker__bar">
-      <view class="nut-picker__left nut-picker__button" @click="close">{{ cancelText }}</view>
-      <view> {{ title }}</view>
-      <view class="nut-picker__button" @click="confirm()">{{ okText }}</view>
+      <view class="nut-picker__button nut-picker__left" @click="close">{{ cancelText }}</view>
+      <view class="nut-picker__title"> {{ title }}</view>
+      <view class="nut-picker__button nut-picker__right" @click="confirm()">{{ okText }}</view>
     </view>
 
     <view class="nut-picker__column">

src/packages/__VUE/picker/index.vue

@@ -10,9 +10,9 @@
       :round="true"
     >
       <view class="nut-picker__bar">
-        <view class="nut-picker__left nut-picker__button" @click="close">{{ cancelText }}</view>
-        <view> {{ title }}</view>
-        <view class="nut-picker__button" @click="confirm()">{{ okText }}</view>
+        <view class="nut-picker__button nut-picker__left" @click="close">{{ cancelText }}</view>
+        <view class="nut-picker__title"> {{ title }}</view>
+        <view class="nut-picker__button nut-picker__right" @click="confirm()">{{ okText }}</view>
       </view>
 
       <view class="nut-picker__column">

src/packages/__VUE/radio/index.scss

@@ -10,7 +10,7 @@
 
   &--reverse {
     .nut-radio__label {
-      margin-right: 15px;
+      margin-right: $radio-label-margin-left;
       margin-left: 0;
     }
   }
@@ -18,10 +18,10 @@
   &__button {
     display: inline-flex;
     align-items: center;
-    padding: 5px 18px;
-    font-size: 12px;
+    padding: $radio-button-padding;
+    font-size: $radio-button-font-size;
     background: #f6f7f9;
-    border-radius: 15px;
+    border-radius: $radio-button-border-radius;
     color: $radio-label-font-color;
     box-sizing: border-box;
     &--active {
@@ -36,8 +36,8 @@
   }
 
   &__label {
-    margin-left: 15px;
-    font-size: 14px;
+    margin-left: $radio-label-margin-left;
+    font-size: $radio-label-font-size;
     color: $radio-label-font-color;
     &--disabled {
       color: $radio-label-disable-color;
@@ -48,6 +48,7 @@
     color: $radio-label-font-active-color;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
+    font-size: $radio-icon-font-size;
   }
   &__icon--unchecked {
     color: $radio-icon-disable-color;

src/packages/__VUE/radio/index.taro.vue

@@ -28,7 +28,7 @@ export default create({
     },
     iconSize: {
       type: [String, Number],
-      default: 18
+      default: ''
     }
   },
   setup(props, { emit, slots }) {

src/packages/__VUE/radio/index.vue

@@ -28,7 +28,7 @@ export default create({
     },
     iconSize: {
       type: [String, Number],
-      default: 18
+      default: ''
     }
   },
   setup(props, { emit, slots }) {

src/packages/styles/variables.scss

@@ -86,7 +86,6 @@ $button-warning-background-color: linear-gradient(
   rgba(255, 182, 13, 1) 83%,
   rgba(255, 190, 13, 1) 100%
 ) !default;
-$button-plain-background-color: #fff !default;
 $button-plain-background-color: $white !default;
 
 // cell
@@ -114,6 +113,15 @@ $cell-group-desc-font-size: $font-size-1 !default;
 $cell-group-desc-line-height: 16px !default;
 $cell-group-background-color: $white !default;
 
+// divider
+
+$divider-margin: 16px 0 !default;
+$divider-text-font-size: $font-size-2 !default;
+$divider-text-color: #909ca4 !default;
+$divider-line-height: 2px !default;
+$divider-before-margin-right: 16px !default;
+$divider-after-margin-left: 16px !default;
+
 // icon
 
 $icon-height: 20px !default;
@@ -128,6 +136,18 @@ $uploader-background: #f7f8fa !default;
 
 // picker
 $picker-cancel-color: $primary-color !default;
+$picker-ok-color: $primary-color !default;
+$picker-bar-cancel-font-size: 16px !default;
+$picker-bar-ok-font-size: 16px !default;
+$picker-bar-button-padding: 0 15px !default;
+$picker-bar-title-font-size: 16px !default;
+$picker-bar-title-color: $title-color !default;
+$picker-bar-title-font-weight: normal !default;
+$picker-item-height: 36px !default;
+$picker-item-text-color: #808080 !default;
+$picker-item-active-text-color: inherit !default;
+$picker-item-text-font-size: 16px !default;
+$picker-item-active-line-border: 1px solid #d8d8d8 !default;
 
 //input
 $input-border-bottom: #eaf0fb !default;
@@ -299,6 +319,9 @@ $dialog-width: 296px !default;
 $checkbox-label-color: #1d1e1e !default;
 $checkbox-label-disable-color: #999 !default;
 $checkbox-icon-disable-color: #d6d6d6 !default;
+$checkbox-label-margin-left: 15px !default;
+$checkbox-label-font-size: 14px !default;
+$checkbox-icon-font-size: 18px !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;
@@ -307,6 +330,12 @@ $radio-label-disable-color: #999 !default;
 $radio-icon-disable-color: #d6d6d6 !default;
 $radio-label-button-border-color: $primary-color !default;
 $radio-label-button-background: rgba($primary-color, 0.05) !default;
+$radio-label-margin-left: 15px !default;
+$radio-button-border-radius: 15px !default;
+$radio-label-font-size: 14px !default;
+$radio-button-font-size: 12px !default;
+$radio-button-padding: 5px 18px !default;
+$radio-icon-font-size: 18px !default;
 
 //fixednav
 $fixednav-bg-color: $white !default;

src/sites/mobile-taro/vue/src/base/pages/divider/index.vue

@@ -1,31 +1,16 @@
 <template>
-  <div class="demo">
+  <div class="demo full bg-w">
     <h2>基础用法</h2>
-    <nut-cell>
-      <nut-divider />
-    </nut-cell>
+    <nut-divider />
     <h2>展示文本</h2>
-    <nut-cell>
-      <nut-divider>文本</nut-divider>
-    </nut-cell>
+    <nut-divider>文本</nut-divider>
     <h2>内容位置</h2>
-    <nut-cell>
-      <nut-divider content-position="left">文本</nut-divider>
-    </nut-cell>
-    <nut-cell>
-      <nut-divider content-position="right">文本</nut-divider>
-    </nut-cell>
+    <nut-divider content-position="left">文本</nut-divider>
+    <nut-divider content-position="right">文本</nut-divider>
     <h2>虚线</h2>
-    <nut-cell>
-      <nut-divider dashed>文本</nut-divider>
-    </nut-cell>
+    <nut-divider dashed>文本</nut-divider>
     <h2>自定义样式</h2>
-    <nut-cell>
-      <nut-divider
-        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
-        >文本</nut-divider
-      >
-    </nut-cell>
+    <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文本</nut-divider>
   </div>
 </template>