style(badge、coutdown、inputnumber...): add sass param

README.md

@@ -156,11 +156,12 @@ NutUI 已经投入了我们的生产环境中使用，业界也在广泛地使
 
 本项目遵从 [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)，更新日志请查阅 [Release](https://github.com/jdf2e/nutui/releases)。
 
-## github stargazers 
+## 开源协议
 
-![stargazers](https://starchart.cc/jdf2e/nutui.svg)
+本项目基于 **MIT** 协议
 
 
-## 开源协议
+## github stargazers 
+
+![stargazers](https://starchart.cc/jdf2e/nutui.svg)
 
-本项目基于 **MIT** 协议

src/packages/__VUE/badge/index.scss

@@ -4,32 +4,30 @@
   .slot-icons {
     position: absolute;
     background: $badge-background-color;
-    border-radius: 7px;
     top: -20%;
     right: -20%;
-    padding: 0 5px;
+    padding: $badge-padding;
     text-align: center;
-    border-radius: 14px;
-    z-index: 1;
+    border-radius: $badge-border-radius;
+    z-index: $badge-z-index;
   }
   .sup {
     position: absolute;
     background: $badge-background-color;
-    border-radius: 7px;
-    padding: 0 5px;
+    padding: $badge-padding;
     text-align: center;
-    border-radius: 14px;
+    border-radius: $badge-border-radius;
     font-size: $badge-font-size;
     font-weight: normal;
-    color: $badge-default-background-color;
+    color: $badge-color;
   }
   .nut-badge__content {
-    transform: translateY(-50%) translateX(100%);
+    transform: $badge-content-transform;
   }
   .is-dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 7px;
-    padding: 0;
+    width: $badge-dot-width;
+    height: $badge-dot-height;
+    border-radius: $badge-dot-border-radius;
+    padding: $badge-dot-padding;
   }
 }

src/packages/__VUE/countdown/index.scss

@@ -1,3 +1,5 @@
 .nut-countdown {
-  display: flex;
+  display: $countdown-display;
+  color: $countdown-color;
+  font-size: $countdown-font-size;
 }

src/packages/__VUE/inputnumber/index.scss

@@ -24,8 +24,10 @@
     height: 100%;
     text-align: center;
     outline: none;
-    border: 0;
-    margin: 0 6px;
+    border: $inputnumber-input-border;
+    font-size: $inputnumber-input-font-size;
+    color: $inputnumber-input-font-color;
+    margin: $inputnumber-input-margin;
     background-color: $inputnumber-input-background-color;
     border-radius: $inputnumber-input-border-radius;
   }

src/packages/__VUE/numberkeyboard/index.scss

@@ -1,7 +1,7 @@
 .nut-numberkeyboard {
-  width: 100%;
-  padding-bottom: 22px;
-  background-color: #f2f3f5;
+  width: $numberkeyboard-width;
+  padding: $numberkeyboard-padding;
+  background-color: $numberkeyboard-background-color;
   user-select: none;
 
   .number-board-header {
@@ -10,10 +10,10 @@
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    height: 34px;
-    padding-top: 6px;
-    color: #646566;
-    font-size: 16px;
+    height: $numberkeyboard-header-height;
+    padding: $numberkeyboard-header-padding;
+    color: $numberkeyboard-header-color;
+    font-size: $numberkeyboard-header-font-size;
 
     .tit {
       display: inline-block;
@@ -23,10 +23,10 @@
       position: absolute;
       display: block;
       right: 0;
-      padding: 0 16px;
-      color: #576b95;
-      font-size: 14px;
-      background-color: transparent;
+      padding: $numberkeyboard-header-close-padding;
+      color: $numberkeyboard-header-close-color;
+      font-size: $numberkeyboard-header-close-font-size;
+      background-color: $numberkeyboard-header-close-background-color;
       border: none;
       cursor: pointer;
     }
@@ -53,16 +53,17 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 48px;
-        font-size: 28px;
-        line-height: 1.5;
-        background-color: #fff;
-        border-radius: 8px;
+        height: $numberkeyboard-key-height;
+        font-size: $numberkeyboard-key-font-size;
+        line-height: $numberkeyboard-key-line-height;
+        background-color: $numberkeyboard-key-background-color;
+        color: $numberkeyboard-key-font-size-color;
+        border-radius: $numberkeyboard-key-border-radius;
         cursor: pointer;
       }
 
       .active {
-        background-color: #ebedf0;
+        background-color: $numberkeyboard-key-active-background-color;
       }
 
       img {
@@ -91,13 +92,13 @@
         }
 
         .finish {
-          font-size: 16px;
-          color: #fff;
-          background-color: #1989fa;
+          font-size: $numberkeyboard-key-finish-font-size;
+          color: $numberkeyboard-key-finish-font-size-color;
+          background-color: $numberkeyboard-key-finish-background-color;
         }
 
         .activeFinsh {
-          background-color: #0570db;
+          background-color: $numberkeyboard-key-activeFinsh-background-color;
         }
       }
     }

src/packages/__VUE/sidenavbaritem/index.scss

@@ -1,10 +1,10 @@
 .nut-sidenavbaritem {
-  height: 40px;
-  line-height: 40px;
+  height: $sidenavbar-item-height;
+  line-height: $sidenavbar-item-line-height;
   display: block;
-  font-size: 16px;
+  font-size: $sidenavbar-item-font-size;
   &__title {
-    color: $title-color;
-    background-color: $sidenavbaritem-title-color;
+    color: $sidenavbar-item-title-color;
+    background-color: $sidenavbar-item-title-bg-color;
   }
 }

src/packages/__VUE/subsidenavbar/index.scss

@@ -5,20 +5,22 @@
   position: relative;
   &__title {
     display: block;
-    width: 100%;
-    height: 40px;
+    width: $sidenavbar-sub-title-width;
+    height: $sidenavbar-sub-title-height;
     position: relative;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     box-sizing: border-box;
-    border-bottom: 1px solid $subsidenavbar-title-border-color;
-    color: $title-color;
-    font-size: $font-size-large;
-    background-color: $subsidenavbar-title-bg-color;
+    border-bottom: 1px solid $sidenavbar-sub-title-border-color;
+    color: $sidenavbar-sub-title-text-color;
+    font-size: $sidenavbar-sub-title-font-size;
+    background-color: $sidenavbar-sub-title-bg-color;
+    border-radius: $sidenavbar-sub-title-radius;
+    border: $sidenavbar-sub-title-border;
     &__text {
-      line-height: 40px;
-      color: $title-color;
+      line-height: $sidenavbar-sub-title-text-line-height;
+      color: $sidenavbar-sub-title-text-color;
     }
     &__icon {
       position: absolute;

src/packages/__VUE/timedetail/index.scss

@@ -1,35 +1,35 @@
 .nut-timedetail {
   display: flex;
   width: 100%;
-  padding: 0 5px 50px 13px;
+  padding: $timeselect-timedetail-padding;
   &__detail {
     width: 100%;
     &__list {
       &__item {
         display: inline-block;
-        width: 100px;
-        height: 50px;
-        line-height: 50px;
+        width: $timeselect-timedetail-item-width;
+        height: $timeselect-timedetail-item-height;
+        line-height: $timeselect-timedetail-item-line-height;
         text-align: center;
         margin-right: 10px;
         margin-bottom: 10px;
-        background-color: $timedetail-item-bg-color;
-        border-radius: $timedetail-item-border-radius;
-        color: $timedetail-item-text-color;
-        font-size: $timedetail-item-text-font-size;
+        background-color: $timeselect-timedetail-item-bg-color;
+        border-radius: $timeselect-timedetail-item-border-radius;
+        color: $timeselect-timedetail-item-text-color;
+        font-size: $timeselect-timedetail-item-text-font-size;
         border: 1px solid transparent;
         font-weight: bold;
         &--curr {
-          background-color: $timedetail-item-cur-bg-color;
-          border: 1px solid $timedetail-item-cur-border;
-          color: $timedetail-item-cur-text-color;
+          background-color: $timeselect-timedetail-item-cur-bg-color;
+          border: 1px solid $timeselect-timedetail-item-cur-border;
+          color: $timeselect-timedetail-item-cur-text-color;
         }
       }
     }
     &__time {
       margin-bottom: 10px;
-      color: $timedetail-time-text-color;
-      font-size: $timedetail-time-font-size;
+      color: $timeselect-timedetail-time-text-color;
+      font-size: $timeselect-timedetail-time-font-size;
     }
   }
   &__detail--afternoon {

src/packages/__VUE/timepannel/index.scss

@@ -1,16 +1,16 @@
 .nut-timepannel {
   display: flex;
-  width: 140px;
-  height: 40px;
-  padding: 15px;
+  width: $timeselect-timepannel-width;
+  height: $timeselect-timepannel-height;
+  padding: $timeselect-timepannel-padding;
   align-items: center;
   justify-content: center;
-  color: $timepannel-text-color;
-  font-size: $timepannel-font-size;
+  color: $timeselect-timepannel-text-color;
+  font-size: $timeselect-timepannel-font-size;
   box-sizing: border-box;
   &--curr {
-    background-color: $timepannel-cur-bg-color;
-    color: $timepannel-cur-text-color;
+    background-color: $timeselect-timepannel-cur-bg-color;
+    color: $timeselect-timepannel-cur-text-color;
     font-weight: bold;
   }
 }

src/packages/__VUE/timeselect/index.scss

@@ -5,9 +5,9 @@
   overflow: hidden;
   &__title {
     display: flex;
-    width: 100%;
-    height: 50px;
-    line-height: 50px;
+    width: $timeselect-title-width;
+    height: $timeselect-title-height;
+    line-height: $timeselect-title-line-height;
     margin-bottom: 10px;
     font-size: $timeselect-title-font-size;
     color: $timeselect-title-color;

src/packages/styles/variables.scss

@@ -167,10 +167,14 @@ $textarea-disabled-color: $disable-color !default;
 
 $inputnumber-icon-color: $title-color !default;
 $inputnumber-icon-void-color: $disable-color !default;
+$inputnumber-icon-size: 20px !default;
+$inputnumber-input-font-size: 12px !default;
+$inputnumber-input-font-color: $title-color !default;
 $inputnumber-input-background-color: $help-color !default;
 $inputnumber-input-border-radius: 4px !default;
 $inputnumber-input-width: 40px !default;
-$inputnumber-icon-size: 20px !default;
+$inputnumber-input-margin: 0 6px !default;
+$inputnumber-input-border: 0 !default;
 
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
@@ -187,6 +191,35 @@ $shortpassword-border-color: #ddd !default;
 $shortpassword-error: $primary-color !default;
 $shortpassword-forget: rgba(128, 128, 128, 1) !default;
 
+//numberkeyboard
+$numberkeyboard-width: 100% !default;
+$numberkeyboard-padding: 0 0 22px 0 !default;
+$numberkeyboard-background-color: #f2f3f5 !default;
+$numberkeyboard-header-height: 34px !default;
+$numberkeyboard-header-padding: 6px 0 0 0 !default;
+$numberkeyboard-header-color: #646566 !default;
+$numberkeyboard-header-font-size: 16px !default;
+$numberkeyboard-header-close-padding: 0 16px !default;
+$numberkeyboard-header-close-color: #576b95 !default;
+$numberkeyboard-header-close-font-size: 14px !default;
+$numberkeyboard-header-close-background-color: transparent !default;
+$numberkeyboard-key-background-color: #fff !default;
+$numberkeyboard-key-active-background-color: #ebedf0 !default;
+$numberkeyboard-key-height: 48px !default;
+$numberkeyboard-key-line-height: 1.5 !default;
+$numberkeyboard-key-border-radius: 8px !default;
+$numberkeyboard-key-font-size: 28px !default;
+$numberkeyboard-key-font-size-color: #333 !default;
+$numberkeyboard-key-finish-font-size: 16px !default;
+$numberkeyboard-key-finish-font-size-color: #fff !default;
+$numberkeyboard-key-finish-background-color: #1989fa !default;
+$numberkeyboard-key-activeFinsh-background-color: #0570db !default;
+
+// countdown
+$countdown-display: flex !default;
+$countdown-color: inherit !default;
+$countdown-font-size: initial !default;
+
 //large price
 $price-symbol-big-size: 18px !default;
 $price-big-size: 24px !default;
@@ -393,24 +426,34 @@ $noticebar-righticon-margin: 0px 10px !default;
 // TimeSelect
 $timeselect-title-font-size: $font-size-2 !default;
 $timeselect-title-color: $title-color !default;
+$timeselect-title-width: 100% !default;
+$timeselect-title-height: 50px !default;
+$timeselect-title-line-height: 50px !default;
 $timeselect-pannel-bg-color: #f6f7f9 !default;
 
 // TimePannel
-$timepannel-text-color: $title-color2 !default;
-$timepannel-font-size: $font-size-2 !default;
-$timepannel-cur-bg-color: $white !default;
-$timepannel-cur-text-color: #333333 !default;
+$timeselect-timepannel-text-color: $title-color2 !default;
+$timeselect-timepannel-font-size: $font-size-2 !default;
+$timeselect-timepannel-cur-bg-color: $white !default;
+$timeselect-timepannel-cur-text-color: #333333 !default;
+$timeselect-timepannel-width: 140px !default;
+$timeselect-timepannel-height: 40px !default;
+$timeselect-timepannel-padding: 15px !default;
 
 // TimeDetail
-$timedetail-item-bg-color: #f6f7f9 !default;
-$timedetail-item-border-radius: 5px !default;
-$timedetail-item-text-color: #333333 !default;
-$timedetail-item-text-font-size: $font-size-2 !default;
-$timedetail-item-cur-bg-color: rgba($primary-color, 0.15) !default;
-$timedetail-item-cur-border: $primary-color !default;
-$timedetail-item-cur-text-color: $primary-color !default;
-$timedetail-time-text-color: #999 !default;
-$timedetail-time-font-size: $font-size-1 !default;
+$timeselect-timedetail-padding: 0 5px 50px 13px !default;
+$timeselect-timedetail-item-width: 100px !default;
+$timeselect-timedetail-item-height: 50px !default;
+$timeselect-timedetail-item-line-height: 50px !default;
+$timeselect-timedetail-item-bg-color: #f6f7f9 !default;
+$timeselect-timedetail-item-border-radius: 5px !default;
+$timeselect-timedetail-item-text-color: #333333 !default;
+$timeselect-timedetail-item-text-font-size: $font-size-2 !default;
+$timeselect-timedetail-item-cur-bg-color: rgba($primary-color, 0.15) !default;
+$timeselect-timedetail-item-cur-border: $primary-color !default;
+$timeselect-timedetail-item-cur-text-color: $primary-color !default;
+$timeselect-timedetail-time-text-color: #999 !default;
+$timeselect-timedetail-time-font-size: $font-size-1 !default;
 
 //tag
 $tag-font-size: 12px !default;
@@ -432,8 +475,16 @@ $tag-plain-background-color: #fff !default;
 
 //badge
 $badge-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
-$badge-default-background-color: rgba(255, 255, 255, 1) !default;
+$badge-border-radius: 14px !default;
+$badge-padding: 0 5px !default;
+$badge-content-transform: translateY(-50%) translateX(100%) !default;
+$badge-z-index: 1 !default;
+$badge-dot-width: 7px !default;
+$badge-dot-height: 7px !default;
+$badge-dot-border-radius: 7px !default;
+$badge-dot-padding: 0px !default;
 
 //popover
 $popover-white-background-color: rgba(255, 255, 255, 1) !default;
@@ -634,11 +685,22 @@ $navbar-title-icon-margin: 0 0 0 13px !default;
 $sidenavbar-content-bg-color: $white !default;
 
 // subsidenavbar
-$subsidenavbar-title-border-color: #f6f6f6 !default;
-$subsidenavbar-title-bg-color: #f6f6f6 !default;
+$sidenavbar-sub-title-border-color: #f6f6f6 !default;
+$sidenavbar-sub-title-bg-color: #f6f6f6 !default;
+$sidenavbar-sub-title-font-size: $font-size-large !default;
+$sidenavbar-sub-title-radius: 0 !default;
+$sidenavbar-sub-title-border: 0 !default;
+$sidenavbar-sub-title-width: 100% !default;
+$sidenavbar-sub-title-height: 40px !default;
+$sidenavbar-sub-title-text-line-height: 40px !default;
+$sidenavbar-sub-title-text-color: $title-color !default;
 
 // sidenavbaritem
-$sidenavbaritem-title-color: $white !default;
+$sidenavbar-item-title-color: #333 !default;
+$sidenavbar-item-title-bg-color: $white !default;
+$sidenavbar-item-height: 40px !default;
+$sidenavbar-item-line-height: 40px !default;
+$sidenavbar-item-font-size: 16px !default;
 
 // elevator
 $elevator-list-item-highcolor: $primary-color !default;