style: variables 样式变量标准化调整

src/packages/__VUE/actionsheet/index.scss

@@ -6,7 +6,7 @@
     margin: 0;
     text-align: center;
     background-color: $white;
-    border-bottom: 1px solid $light-color;
+    border-bottom: 1px solid $actionsheet-light-color;
     font-size: $font-size-base;
     color: $title-color;
   }
@@ -63,6 +63,6 @@
 
   .nut-actionsheet-cancel {
     margin-top: 5px;
-    border-top: 1px solid $light-color;
+    border-top: 1px solid $actionsheet-light-color;
   }
 }

src/packages/__VUE/cascader/index.scss

@@ -1,7 +1,7 @@
 .nut-cascader {
   width: 100%;
-  font-size: $nut-cascader-font-size;
-  line-height: $nut-cascader-line-height;
+  font-size: $cascader-font-size;
+  line-height: $cascader-line-height;
 
   .nut-tabpane {
     padding: 0;
@@ -10,12 +10,12 @@
   .nut-tabs__titles-item {
     flex: initial;
     min-width: auto;
-    padding: $nut-cascader-tabs-item-padding;
+    padding: $cascader-tabs-item-padding;
     white-space: nowrap;
   }
 
   .nut-tabs__titles {
-    padding: $nut-cascader-tabs-item-padding;
+    padding: $cascader-tabs-item-padding;
     background: #fff;
   }
 
@@ -23,12 +23,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: $nut-cascader-bar-padding;
+    padding: $cascader-bar-padding;
     text-align: center;
     font-weight: bold;
-    line-height: $nut-cascader-bar-line-height;
-    color: $nut-cascader-bar-color;
-    font-size: $nut-cascader-bar-font-size;
+    line-height: $cascader-bar-line-height;
+    color: $cascader-bar-color;
+    font-size: $cascader-bar-font-size;
   }
 
   &-pane {
@@ -45,11 +45,11 @@
   &-item {
     display: flex;
     align-items: center;
-    padding: $nut-cascader-item-padding;
+    padding: $cascader-item-padding;
     margin: 0;
     cursor: pointer;
-    font-size: $nut-cascader-item-font-size;
-    color: $nut-cascader-item-color;
+    font-size: $cascader-item-font-size;
+    color: $cascader-item-color;
 
     &__title {
       flex: 1;
@@ -65,12 +65,12 @@
     }
 
     &.active:not(.disabled) {
-      color: $nut-cascader-item-active-color;
+      color: $cascader-item-active-color;
     }
 
     &.active &__icon-check {
       visibility: visible;
-      color: $nut-cascader-item-active-color;
+      color: $cascader-item-active-color;
     }
 
     &.disabled {

src/packages/__VUE/menu/index.scss

@@ -1,12 +1,12 @@
 .nut-menu__bar {
   position: relative;
   display: flex;
-  line-height: $nut-menu-bar-line-height;
+  line-height: $menu-bar-line-height;
   background-color: $white;
-  border-bottom: 1px solid $nut-menu-bar-border-bottom-color;
+  border-bottom: 1px solid $menu-bar-border-bottom-color;
 
   &.opened {
-    z-index: $nut-menu-bar-opened-z-index;
+    z-index: $menu-bar-opened-z-index;
   }
 
   .nut-menu__item {
@@ -17,7 +17,7 @@
     min-width: 0;
 
     &.disabled {
-      color: $nut-menu-item-disabled-color;
+      color: $menu-item-disabled-color;
     }
 
     .nut-menu__title-icon {
@@ -33,8 +33,8 @@
       .nut-menu__title-text {
         @include text-ellipsis;
         display: block;
-        padding-left: $nut-menu-title-text-padding-left;
-        padding-right: $nut-menu-title-text-padding-right;
+        padding-left: $menu-title-text-padding-left;
+        padding-right: $menu-title-text-padding-right;
       }
 
       &.active .nut-menu__title-icon {

src/packages/__VUE/menuitem/index.scss

@@ -5,8 +5,8 @@
 }
 
 .nut-menu-item__content {
-  padding: $nut-menu-item-content-padding;
-  max-height: $nut-menu-item-content-max-height;
+  padding: $menu-item-content-padding;
+  max-height: $menu-item-content-max-height;
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
@@ -14,13 +14,13 @@
   .nut-menu-item__option {
     color: $title-color;
     font-size: $font-size-2;
-    padding-top: $nut-menu-item-option-padding-top;
-    padding-bottom: $nut-menu-item-option-padding-bottom;
+    padding-top: $menu-item-option-padding-top;
+    padding-bottom: $menu-item-option-padding-bottom;
     display: flex;
     align-items: center;
 
     i {
-      margin-right: $nut-menu-item-option-i-margin-right;
+      margin-right: $menu-item-option-i-margin-right;
     }
   }
 }
@@ -38,9 +38,9 @@
 
 .placeholder-element {
   position: fixed;
-  top: -$nut-menu-bar-line-height;
+  top: -$menu-bar-line-height;
   left: 0;
   right: 0;
-  z-index: $nut-menu-bar-opened-z-index;
+  z-index: $menu-bar-opened-z-index;
   background-color: transparent;
 }

src/packages/__VUE/noticebar/index.scss

@@ -1,8 +1,8 @@
 .nut-noticebar-page {
   width: 100%;
   display: flex;
-  height: $noticeBar-height;
-  font-size: $noticeBar-font-size;
+  height: $noticebar-height;
+  font-size: $noticebar-font-size;
   position: relative;
   align-items: center;
   &.wrapable {
@@ -23,8 +23,8 @@
     padding-right: 40px;
   }
   .left-icon {
-    height: $noticeBar-left-icon-width;
-    min-width: $noticeBar-left-icon-width;
+    height: $noticebar-left-icon-width;
+    min-width: $noticebar-left-icon-width;
     margin: 0 5px 0 10px;
     background-size: 100% 100%;
   }
@@ -32,13 +32,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: $noticeBar-right-icon-width;
+    width: $noticebar-right-icon-width;
     margin: 0 10px 0 5px;
   }
   .wrap {
     flex: 1;
-    height: $noticeBar-line-height;
-    line-height: $noticeBar-line-height;
+    height: $noticebar-line-height;
+    line-height: $noticebar-line-height;
     overflow: hidden;
     position: relative;
   }
@@ -78,7 +78,7 @@
 // 垂直方向的滚动
 @keyframes nut-notice-bar-play-vertical {
   to {
-    transform: translateY($noticeBar-height);
+    transform: translateY($noticebar-height);
   }
 }
 
@@ -87,8 +87,8 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  height: $noticeBar-height;
-  font-size: $noticeBar-font-size;
+  height: $noticebar-height;
+  font-size: $noticebar-font-size;
   overflow: hidden;
 
   .horseLamp_list {
@@ -99,7 +99,7 @@
     .horseLamp_list_item {
       display: flex;
       align-items: center;
-      height: $noticeBar-height;
+      height: $noticebar-height;
     }
   }
 

src/packages/__VUE/shortpassword/index.scss

@@ -86,9 +86,9 @@
   height: 41px;
   margin: 0 auto;
   box-sizing: border-box;
-  background: $shortpsd-background-color;
+  background: $shortpassword-background-color;
   border-radius: 4px;
-  border: 1px solid $shortpsd-border-color;
+  border: 1px solid $shortpassword-border-color;
   display: flex;
   position: absolute;
   left: 0;
@@ -98,9 +98,9 @@
   width: 100%;
   height: 41px;
   margin: 0 auto;
-  background: $shortpsd-background-color;
+  background: $shortpassword-background-color;
   border-radius: 4px;
-  border: 1px solid $shortpsd-border-color;
+  border: 1px solid $shortpassword-border-color;
   display: flex;
   position: absolute;
   left: 0;
@@ -132,13 +132,13 @@
   .nut-shortpsd-error {
     line-height: 1;
     font-size: $font-size-0;
-    color: $shortpsd-error;
+    color: $shortpassword-error;
   }
 
   .nut-shortpsd-forget {
     line-height: 1;
     font-size: $font-size-1;
-    color: $shortpsd-forget;
+    color: $shortpassword-forget;
     display: flex;
   }
 }

src/packages/styles/variables.scss

@@ -37,6 +37,7 @@ $font-size-small: $font-size-1 !default;
 $font-size-base: $font-size-2 !default;
 $font-size-large: $font-size-3 !default;
 $line-height-base: 1.5 !default;
+
 // button
 $button-border-radius: 25px !default;
 $button-border-width: 1px !default;
@@ -142,17 +143,13 @@ $inputnumber-input-width: 40px !default;
 $inputnumber-icon-size: 20px !default;
 
 // actionsheet
-$zindex-actionsheet: 10001 !default;
-$body-background: #f6f6f6 !default;
-$light-color: #f6f6f6 !default;
-$font-size-base: $font-size-2 !default;
-$font-size-small: $font-size-1 !default;
+$actionsheet-light-color: #f6f6f6 !default;
 
 //shortpassword
-$shortpsd-background-color: rgba(245, 245, 245, 1) !default;
-$shortpsd-border-color: #ddd !default;
-$shortpsd-error: rgba(242, 39, 12, 1) !default;
-$shortpsd-forget: rgba(128, 128, 128, 1) !default;
+$shortpassword-background-color: rgba(245, 245, 245, 1) !default;
+$shortpassword-border-color: #ddd !default;
+$shortpassword-error: rgba(242, 39, 12, 1) !default;
+$shortpassword-forget: rgba(128, 128, 128, 1) !default;
 
 //large price
 $price-symbol-big-size: 18px !default;
@@ -207,7 +204,6 @@ $notify-text-color: $white !default;
 $notify-padding: 12px 0 !default;
 $notify-font-size: 14px !default;
 $notify-height: 44px !default;
-
 $notify-base-background-color: linear-gradient(
   135deg,
   rgba(250, 44, 25, 1) 0%,
@@ -231,12 +227,10 @@ $notify-danger-background-color: rgba(250, 50, 25, 1) !default;
 $notify-warning-background-color: linear-gradient(135deg, rgba(255, 93, 13, 1) 0%, rgba(255, 154, 13, 1) 100%) !default;
 
 // rate
-
 $rate-icon-color: $primary-color !default;
 $rate-icon-void-color: $disable-color !default;
 
 // tabbar
-
 $tabbar-active-color: $primary-color !default;
 $tabbar-border-color: #eee !default;
 
@@ -267,9 +261,9 @@ $radio-label-font-color: #1d1e1e !default;
 $radio-label-font-active-color: #f0250f !default;
 $radio-label-disable-color: #999 !default;
 $radio-icon-disable-color: #d6d6d6 !default;
-
 $radio-label-button-border-color: #f0250f !default;
 $radio-label-button-background: rgba(240, 37, 15, 0.05) !default;
+
 //fixednav
 $fixednav-bg-color: $white !default;
 $fixednav-font-color: $black !default;
@@ -277,11 +271,11 @@ $fixednav-index: 201 !default;
 $fixednav-btn-bg: linear-gradient(135deg, rgba(250, 25, 44, 1) 0%, rgba(250, 63, 25, 1) 100%) !default;
 
 // NoticeBar
-$noticeBar-font-size: 14px !default;
-$noticeBar-height: 40px !default;
-$noticeBar-line-height: 24px !default;
-$noticeBar-left-icon-width: 16px !default;
-$noticeBar-right-icon-width: 16px !default;
+$noticebar-font-size: 14px !default;
+$noticebar-height: 40px !default;
+$noticebar-line-height: 24px !default;
+$noticebar-left-icon-width: 16px !default;
+$noticebar-right-icon-width: 16px !default;
 
 // TimeSelect
 $timeselect-title-font-size: $font-size-2 !default;
@@ -293,6 +287,7 @@ $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;
+
 // TimeDetail
 $timedetail-item-bg-color: #f6f7f9 !default;
 $timedetail-item-border-radius: 5px !default;
@@ -303,6 +298,7 @@ $timedetail-item-cur-border: #f0250f !default;
 $timedetail-item-cur-text-color: #f0250f !default;
 $timedetail-time-text-color: #999 !default;
 $timedetail-time-font-size: $font-size-1 !default;
+
 //tag
 $tag-font-size: 12px !default;
 $tag-default-border-radius: 4px !default;
@@ -319,7 +315,6 @@ $tag-danger-background-color: linear-gradient(
 $tag-warning-background-color: #f3812e !default;
 $tag-default-color: #ffffff !default;
 $tag-border-width: 1px !default;
-
 $tag-plain-background-color: #fff !default;
 
 //badge
@@ -334,7 +329,7 @@ $popover-border-bottom-color: rgba(229, 229, 229, 1) !default;
 $popover-primary-text-color: rgba(51, 51, 51, 1) !default;
 $popover-disable-color: rgba(154, 155, 157, 1) !default;
 
-//分页
+//pagination
 $pagination-color: $primary-color !default;
 $pagination-font-size: $font-size-2 !default;
 $pagination-item-border-color: #e4e7eb !default;
@@ -350,13 +345,13 @@ $pagination-disable-background-color: #f7f8fa !default;
 $pagination-item-border-width: 1px !default;
 $pagination-item-border-radius: 2px !default;
 $pagination-prev-next-padding: 0 11px !default;
+
 // tabs
 $tabs-tab-smile-color: $primary-color !default;
 $tabs-titles-border-radius: 0 !default;
 $tabs-titles-item-large-font-size: $font-size-3 !default;
 $tabs-titles-item-font-size: $font-size-2 !default;
 $tabs-titles-item-small-font-size: $font-size-1 !default;
-
 $tabs-titles-item-color: $title-color !default;
 $tabs-titles-background-color: $help-color !default;
 $tabs-horizontal-tab-line-color: linear-gradient(90deg, #f5503a 0%, #fad1cb 100%) !default;
@@ -377,17 +372,17 @@ $indicator-dot-size: $indicator-size / 3 !default;
 $indicator-border-size: $indicator-size + 2 !default;
 
 // menu
-$nut-menu-bar-line-height: 46px !default;
-$nut-menu-bar-border-bottom-color: #eaf0fb !default;
-$nut-menu-bar-opened-z-index: 2001 !default;
-$nut-menu-item-disabled-color: #969799 !default;
-$nut-menu-title-text-padding-left: 8px !default;
-$nut-menu-title-text-padding-right: 8px !default;
-$nut-menu-item-content-padding: 12px 24px !default;
-$nut-menu-item-content-max-height: 214px !default;
-$nut-menu-item-option-padding-top: 12px !default;
-$nut-menu-item-option-padding-bottom: 12px !default;
-$nut-menu-item-option-i-margin-right: 6px !default;
+$menu-bar-line-height: 46px !default;
+$menu-bar-border-bottom-color: #eaf0fb !default;
+$menu-bar-opened-z-index: 2001 !default;
+$menu-item-disabled-color: #969799 !default;
+$menu-title-text-padding-left: 8px !default;
+$menu-title-text-padding-right: 8px !default;
+$menu-item-content-padding: 12px 24px !default;
+$menu-item-content-max-height: 214px !default;
+$menu-item-option-padding-top: 12px !default;
+$menu-item-option-padding-bottom: 12px !default;
+$menu-item-option-i-margin-right: 6px !default;
 
 // searchbar
 $searchbar-background: $white !default;
@@ -404,17 +399,17 @@ $empty-description-line-height: 20px;
 $empty-description-padding: 0 40px;
 
 // cascader
-$nut-cascader-font-size: $font-size-2;
-$nut-cascader-line-height: 22px;
-$nut-cascader-tabs-item-padding: 0 10px;
-$nut-cascader-bar-padding: 24px 20px 17px;
-$nut-cascader-bar-font-size: $font-size-4;
-$nut-cascader-bar-line-height: 20px;
-$nut-cascader-bar-color: $title-color;
-$nut-cascader-item-padding: 10px 20px;
-$nut-cascader-item-color: $title-color;
-$nut-cascader-item-font-size: $font-size-2;
-$nut-cascader-item-active-color: $primary-color;
+$cascader-font-size: $font-size-2;
+$cascader-line-height: 22px;
+$cascader-tabs-item-padding: 0 10px;
+$cascader-bar-padding: 24px 20px 17px;
+$cascader-bar-font-size: $font-size-4;
+$cascader-bar-line-height: 20px;
+$cascader-bar-color: $title-color;
+$cascader-item-padding: 10px 20px;
+$cascader-item-color: $title-color;
+$cascader-item-font-size: $font-size-2;
+$cascader-item-active-color: $primary-color;
 
 // form
 $form-item-error-line-color: $primary-color !default;