Merge pull request #398 from libin0824/main

feat: sass variables update.

src/packages/badge/badge.scss

@@ -18,30 +18,30 @@
     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;
     line-height: 16px;
   }
   .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/button/button.scss

@@ -121,15 +121,15 @@
   }
 
   &--normal {
-    padding: 0 18px;
+    padding: $button-default-padding;
     font-size: $button-default-font-size;
   }
 
   &--small {
     height: $button-small-height;
     line-height: $button-small-line-height;
-    padding: 0 $padding-xs;
-    font-size: $font-size-1;
+    padding: $button-small-padding;
+    font-size: $button-small-font-size;
   }
 
   &--block {

src/packages/countdown/countdown.scss

 .nut-countdown {
-  display: flex;
+  display: $countdown-display;
 }

src/packages/infiniteloading/infiniteloading.scss

@@ -48,7 +48,7 @@
     width: 100%;
     padding-top: 16px;
     font-size: $font-size-small;
-    color: $infinite-bottom-color;
+    color: $infiniteloading-bottom-color;
     text-align: center;
 
     .bottom-box {

src/packages/inputnumber/inputnumber.scss

@@ -22,7 +22,7 @@
 }
 
 .nut-inputnumber {
-  display: flex;
+  display: $inputnumber-display;
   align-items: center;
 
   &--disabled {
@@ -47,8 +47,8 @@
     height: 100%;
     text-align: center;
     outline: none;
-    border: 0;
-    margin: 0 6px;
+    border: $inputnumber-input-border;
+    margin: $inputnumber-input-margin;
     background-color: $inputnumber-input-background-color;
     border-radius: $inputnumber-input-border-radius;
   }

src/packages/radio/radio.scss

@@ -30,7 +30,7 @@
 
   &--reverse {
     .nut-radio__label {
-      margin-right: 15px;
+      margin-right: $radio-label-margin-left;
       margin-left: 0;
     }
   }
@@ -38,10 +38,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 {
@@ -56,8 +56,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;
@@ -68,11 +68,12 @@
     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;
   }
   &__icon--disable {
-    color: $help-color;
+    color: $radio-icon-disable-color2;
   }
 }

src/packages/shortpassword/shortpassword.scss

@@ -106,9 +106,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;
@@ -139,13 +139,13 @@
     &__error {
       line-height: 1;
       font-size: $font-size-0;
-      color: $shortpsd-error;
+      color: $shortpassword-error;
     }
 
     &__forget {
       line-height: 1;
       font-size: $font-size-1;
-      color: $shortpsd-forget;
+      color: $shortpassword-forget;
       display: flex;
       align-items: center;
     }

src/packages/skeleton/skeleton.scss

@@ -31,7 +31,7 @@
       .skeleton-title {
         width: 30%;
         height: 15px;
-        background: #efefef;
+        background: $skeleton-content-line-title-background-color;
       }
     }
   }

src/packages/swiper/swiper.scss

@@ -22,10 +22,10 @@
     bottom: 12px;
     transform: translateX(-50%);
     i {
-      width: 8px;
-      height: 3px;
-      margin-right: 7px;
-      border-radius: 2px;
+      width: $swiper-pagination-item-width;
+      height: $swiper-pagination-item-height;
+      margin-right: $swiper-pagination-item-margin-right;
+      border-radius: $swiper-pagination-item-border-radius;
       &:last-child {
         margin-right: 0;
       }

src/packages/switch/switch.scss

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   background-color: $primary-color;
-  border-radius: 21px;
+  border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
@@ -37,17 +37,17 @@
     opacity: 0.6;
   }
   &-base {
-    width: 36px;
-    height: 21px;
-    line-height: 21px;
+    width: $switch-width;
+    height: $switch-height;
+    line-height: $switch-line-height;
     .switch-button {
-      height: 13px;
-      width: 13px;
-      transform: translateX(30%);
+      height: $switch-inside-height;
+      width: $switch-inside-width;
+      transform: $switch-inside-close-transform;
     }
     &.switch-open {
       .switch-button {
-        transform: translateX(146%);
+        transform: $switch-inside-open-transform;
       }
     }
     &.switch-close {

src/packages/timepannel/timepannel.scss

@@ -9,9 +9,9 @@
   }
 }
 .nut-timepannel {
-  height: 40px;
+  height: $timeselect-timepannel-height;
   line-height: 40px;
   text-align: center;
-  color: #666;
-  font-size: 14px;
+  color: $timeselect-timepannel-text-color;
+  font-size: $timeselect-timepannel-font-size;
 }

src/packages/timeselect/timeselect.scss

@@ -25,11 +25,11 @@
   height: 100%;
 
   &__title {
-    height: 50px;
-    line-height: 50px;
+    height: $timeselect-title-height;
+    line-height: $timeselect-title-line-height;
     margin-bottom: 10px;
-    font-size: 14px;
-    color: #1a1a1a;
+    font-size: $timeselect-title-font-size;
+    color: $timeselect-title-color;
     text-align: center;
   }