@nutui/nutui-react 1.4.6 → 1.4.7-beta.0

package/dist/packages/address/address.scss

@@ -1,3 +1,4 @@
+
 .nut-theme-dark {
   .nut-address {
     .nut-elevator {
@@ -7,6 +8,7 @@
         }
       }
     }
+
     &__header {
       color: $dark1;
 
@@ -17,11 +19,13 @@
 
     &__custom {
     }
+
     .nut-address__region-tab {
       .nut-address__tab-item {
         color: $dark1;
       }
     }
+
     .nut-address__region-con {
       .nut-address__region-group {
         .nut-address__region-item {
@@ -31,9 +35,11 @@
         }
       }
     }
+
     .nut-address__exist-item-info {
       color: $dark1;
     }
+
     &__exist {
       &-group {
         .nut-address__exist-ul {
@@ -47,6 +53,7 @@
         }
       }
     }
+
     .exist-address {
       .exist-address-group {
         .exist-ul {
@@ -60,6 +67,7 @@
         border-top: 1px solid $dark4;
       }
     }
+
     &-custom-buttom {
       border-top: 1px solid $dark4;
     }
@@ -68,6 +76,7 @@
 
 .nut-address {
   display: block;
+
   &__header {
     display: flex;
     justify-content: space-between;
@@ -79,6 +88,7 @@
     font-weight: bold;
     color: $title-color;
     line-height: 20px;
+
     &__title {
       display: block;
       color: $title-color;
@@ -89,6 +99,7 @@
   // 请选择
   .nut-address__custom {
     display: block;
+
     .nut-address__region-tab {
       position: relative;
       margin-top: 32px;
@@ -101,6 +112,7 @@
         min-width: 2px;
         margin-right: 30px;
         display: block;
+
         &.active {
           clear: $title-color;
           font-weight: bold;
@@ -131,18 +143,21 @@
     .nut-address__region-con {
       display: block;
       margin: 20px 20px 0;
+
       .nut-address__region-group {
         padding-top: 15px;
         height: 270px;
         overflow-y: auto;
         box-sizing: border-box;
         padding: 0;
+
         .nut-address__region-item {
           display: flex;
           align-items: center;
           margin-bottom: 20px;
           font-size: $font-size-1;
           color: $title-color;
+
           &.active {
             font-weight: bold;
             color: $title-color;
@@ -158,6 +173,7 @@
         }
       }
     }
+
     .nut-address__elevator-group {
       display: flex;
       margin-top: 20px;
@@ -172,16 +188,18 @@
     .nut-address__exist-group {
       padding: 15px 20px 0;
       height: 279px;
-      overflow-y: scroll;
+      overflow-y: auto;
 
       .nut-address__exist-ul {
         box-sizing: border-box;
         padding: 0;
+
         .nut-address__exist-item {
           margin-bottom: 20px;
           font-size: $font-size-1;
           line-height: 14px;
           color: $title-color;
+
           &.active {
             font-weight: bold;
           }
@@ -190,9 +208,11 @@
             display: flex;
             align-items: center;
           }
+
           .nut-address__exist-item-icon {
             margin-right: 9px;
           }
+
           span {
             display: inline-block;
             flex: 1;
@@ -206,6 +226,7 @@
       height: 54px;
       padding: 6px 0px 0;
       border-top: 1px solid #f2f2f2;
+
       &-btn {
         width: 90%;
         height: 42px;
@@ -215,7 +236,7 @@
         background: $button-primary-background-color;
         border-radius: 21px;
         font-size: 15px;
-        color: $white;
+        color: $primary-text-color;
       }
     }
   }

package/dist/packages/button/button.scss

@@ -25,6 +25,7 @@
     &--warning {
       color: $dark6;
     }
+
     &--plain {
       background: $dark6;
 
@@ -55,6 +56,7 @@
     }
   }
 }
+
 .nut-button {
   position: relative;
   display: inline-block;
@@ -73,7 +75,7 @@
   touch-action: manipulation;
 
   .text {
-    margin-left: 5px;
+    margin-left: $button-text-icon-width;
   }
 
   &::before {
@@ -90,6 +92,7 @@
     opacity: 0;
     content: ' ';
   }
+
   &::after {
     border: none;
   }
@@ -182,6 +185,10 @@
     width: 100%;
     height: $button-large-height;
     line-height: $button-large-line-height;
+
+    .text {
+      margin-left: $button-text-icon-large-width;
+    }
   }
 
   &--normal {
@@ -194,6 +201,21 @@
     line-height: $button-small-line-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+
+    .text {
+      margin-left: $button-text-icon-small-width;
+    }
+  }
+
+  &--mini {
+    height: $button-mini-height;
+    line-height: $button-mini-line-height;
+    padding: $button-mini-padding;
+    font-size: $button-mini-font-size;
+
+    .text {
+      margin-left: $button-text-icon-mini-width;
+    }
   }
 
   &--block {

package/dist/packages/calendar/calendar.scss

@@ -206,7 +206,7 @@
 
           &-active {
             background-color: $calendar-primary-color;
-            color: $white !important;
+            color: $primary-text-color !important;
             border-radius: $calendar-day-active-border-radius;
 
             .calendar-curr-tips {
@@ -218,7 +218,7 @@
             }
 
             .calendar-day-tip {
-              color: $white;
+              color: $primary-text-color;
             }
           }
 
@@ -253,7 +253,7 @@
       margin: 10px 18px;
       border-radius: 22px;
       background: $button-primary-background-color;
-      color: $white;
+      color: $primary-text-color;
       text-align: center;
       line-height: 44px;
     }

package/dist/packages/elevator/elevator.scss

@@ -32,7 +32,7 @@
       width: 100%;
       display: block;
       background-color: $elevator-list-inner-bg-color;
-      //   overflow: auto;
+      overflow: auto;
     }
     &__item {
       display: block;

package/dist/packages/numberkeyboard/numberkeyboard.scss

@@ -1,13 +1,16 @@
 .nut-theme-dark {
   .nut-numberkeyboard {
     background-color: $dark5;
+
     &__body {
       background-color: $dark5;
       color: $dark1;
+
       .nut-numberkeyboard__body__keys,
       .nut-numberkeyboard__sidebar {
         .key-board-wrapper {
           background-color: $dark5;
+
           .key {
             background-color: $dark4;
             color: $dark1;
@@ -15,6 +18,7 @@
         }
       }
     }
+
     .nut-numberkeyboard__header {
       .nut-numberkeyboard__header__tit {
         color: $dark1;
@@ -35,6 +39,7 @@
   background-color: $numberkeyboard-background-color;
   user-select: none;
   background-color: $gray4;
+
   .nut-numberkeyboard__header {
     position: relative;
     display: flex;
@@ -81,6 +86,7 @@
       box-sizing: border-box;
       padding: 0 6px 6px 0;
       background-color: $gray5;
+
       .key {
         display: flex;
         align-items: center;
@@ -89,7 +95,7 @@
         font-size: $numberkeyboard-key-font-size;
         line-height: $numberkeyboard-key-line-height;
         background-color: $numberkeyboard-key-background-color;
-        color: $numberkeyboard-key-font-size-color;
+        color: $numberkeyboard-key-font-color;
         border-radius: $numberkeyboard-key-border-radius;
         cursor: pointer;
       }
@@ -125,11 +131,13 @@
 
         .finish {
           font-size: $numberkeyboard-key-finish-font-size;
-          color: $numberkeyboard-key-finish-font-size-color;
+          color: $numberkeyboard-key-finish-font-color;
           background-color: $numberkeyboard-key-finish-background-color;
         }
 
         .activeFinsh {
+          font-size: $numberkeyboard-key-finish-font-size;
+          color: $numberkeyboard-key-finish-font-color;
           background-color: $numberkeyboard-key-activeFinsh-background-color;
         }
       }

package/dist/packages/popup/popup.scss

@@ -26,13 +26,13 @@
   &__close-icon {
     position: absolute !important;
     z-index: 1;
-    color: #969799;
-    font-size: 18px;
+    color: $popup-close-icon-color;
     cursor: pointer;
     width: 30px;
     height: 30px;
-    line-height: 30px;
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     &:active {
       opacity: 0.7;

package/dist/packages/progress/progress.scss

@@ -1,3 +1,4 @@
+
 .nut-theme-dark {
   .nut-progress {
     &-text {
@@ -7,16 +8,25 @@
     }
   }
 }
+
 .nut-progress {
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
+
+  .nut-progress-text {
+    color: $progress-text-color;
+  }
+
   &-outer {
     flex: auto;
+    border-radius: $progress-border-radius;
+
     .nut-progress-text {
-      color: red;
+      color: $progress-text-inner-color;
     }
+
     .nut-progress-active:before {
       content: '';
       position: absolute;
@@ -28,34 +38,43 @@
       animation: progressActive 2s ease-in-out infinite;
     }
   }
+
   &-small {
     height: $progress-small-height;
+
     .nut-progress-text {
       font-size: $progress-small-font-size;
       padding: $progress-small-padding;
     }
   }
+
   &-base {
     height: $progress-base-height;
+
     .nut-progress-text {
       font-size: $progress-base-font-size;
       padding: $progress-base-padding;
     }
   }
+
   &-large {
     height: $progress-large-height;
+
     .nut-progress-text {
       font-size: $progress-large-font-size;
       padding: $progress-large-padding;
     }
   }
+
   &-inner {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     transition: all 0.4s;
+    border-radius: $progress-border-radius;
   }
+
   &-text {
     display: flex;
     padding: $progress-text-padding;
@@ -63,10 +82,11 @@
     line-height: 1;
     min-width: 35px;
   }
+
   &-insidetext {
     position: absolute;
-    top: -4px;
-    bottom: -4px;
+    top: $progress-insidetext-position-top;
+    bottom: $progress-insidetext-position-bottom;
     display: flex;
     align-items: center;
     min-width: 0px;
@@ -74,15 +94,18 @@
     transform: translate(-50%);
     border-radius: $progress-insidetext-border-radius;
   }
+
   @keyframes progressActive {
     0% {
       background: rgba(255, 255, 255, 0.1);
       width: 0;
     }
+
     20% {
       background: rgba(255, 255, 255, 0.5);
       width: 0;
     }
+
     to {
       background: rgba(255, 255, 255, 0);
       width: 100%;

package/dist/packages/radio/radio.scss

@@ -30,7 +30,7 @@
     margin-right: 0 !important;
   }
 
-  &--reverse {
+  &.nut-radio--reverse {
     .nut-radio__label {
       margin-right: $radio-label-margin-left;
       margin-left: 0;

package/dist/packages/radiogroup/radiogroup.scss

@@ -31,18 +31,30 @@
   }
 }
 .nut-radiogroup {
-  display: inline-block;
+  display: flex;
+  align-items: flex-start;
+
   .nut-radio {
     margin-bottom: 5px;
+
     &__label {
       margin-right: 5px;
     }
+
     &__button {
       background-color: $gray4;
     }
   }
+
   &--vertical {
+    flex-direction: column;
+
     .nut-radio {
+      &.nut-radio--reverse {
+        width: 100%;
+        justify-content: space-between;
+      }
+
       &__label {
         margin-right: 5px;
       }
@@ -57,7 +69,8 @@
   &--horizontal {
     .nut-radio {
       display: inline-flex;
-      margin-right: 10px;
+      margin-right: 20px;
+
       &--round {
         .nut-radio__label {
           margin: 0 6px;

package/dist/packages/searchbar/searchbar.scss

@@ -1,25 +1,31 @@
 .nut-theme-dark {
   .nut-searchbar {
     background: $dark5;
+
     &__label {
       color: $dark1;
     }
+
     &__action-text {
       color: $dark1;
     }
+
     .nut-searchbar__input-clear {
       & .nut-searchbar__nut-icon-mask-close {
         color: $dark1;
+
         &:hover {
           cursor: pointer;
           color: $dark1;
         }
       }
     }
+
     &__right-search-icon,
     &__left-search-icon {
       color: $dark1;
     }
+
     &__leftout-icon,
     &__rightout-icon {
       i {
@@ -28,11 +34,13 @@
     }
   }
 }
+
 .val-text {
   font-size: 12px;
   color: $title-color2;
   padding: 0 20px;
 }
+
 .nut-searchbar {
   display: flex;
   align-items: center;
@@ -41,6 +49,7 @@
   background: $searchbar-background;
   color: $gray1;
   box-sizing: border-box;
+
   &__content {
     position: relative;
     flex: 1;
@@ -49,18 +58,23 @@
     justify-content: center;
     height: $searchbar-input-height;
     background: $searchbar-input-background;
+    border-radius: $searchbar-content-border-radius;
   }
+
   &__icon {
     padding: 0 5px 0 10px;
   }
+
   &__rightin-icon {
     padding: 0 5px;
   }
+
   .nut-searchbar__input-box {
     display: flex;
     align-items: center;
     flex: 1;
   }
+
   &__input {
     border: 0;
     outline: 0;
@@ -73,44 +87,58 @@
     border-radius: 0;
     font-size: $font-size-small;
     color: $searchbar-input-text-color;
+    caret-color: $searchbar-input-curror-color;
     background: transparent;
   }
+
   &__round {
     border-radius: $searchbar-input-border-radius;
   }
+
   &__disabled {
     cursor: not-allowed;
   }
+
   &__clear {
-    padding: 0 10px 0 5px;
+    padding: $searchbar-clear-icon-padding;
+
     i {
       color: $gray1 !important;
     }
   }
+
   .pos-right {
     right: 40px;
   }
+
   &__left {
     text-align: left;
   }
+
   &__right {
     text-align: right;
   }
+
   &__center {
     text-align: center;
   }
-  &__label,
-  &__action-text {
-    padding: 0 8px 0 0;
-    font-size: 12px;
-    color: $searchbar-action-text-color;
+
+  &__label {
+    padding: $searchbar-label-padding;
+    font-size: $searchbar-label-fontsize;
+    color: $searchbar-label-color;
   }
+
   &__action-text {
-    padding: 0 0 0 8px;
+    padding: $searchbar-action-text-padding;
+    font-size: $searchbar-action-text-fontsize;
+    color: $searchbar-action-text-color;
   }
+
   &__leftout-icon {
     margin-right: 10px;
   }
+
   &__rightout-icon {
     margin-left: 10px;
   }

package/dist/packages/shortpassword/shortpassword.scss

@@ -1,28 +1,36 @@
+
 .nut-theme-dark {
   .nut-shortpassword {
     &__title {
       color: $dark1;
     }
+
     &__subtitle {
       color: $dark2;
     }
+
     &__message__forget {
       color: $dark3;
     }
+
     &__input-real {
       background-color: $dark6;
       border-radius: 4px;
     }
+
     &__input-site {
       background-color: $dark6;
     }
+
     &__input-fake {
       border: none;
       background-color: $dark4;
+
       &__li__icon {
         background-color: $dark1;
       }
     }
+
     &__message__forget {
       color: $dark2;
     }
@@ -43,6 +51,7 @@
   font-size: $font-size-1;
   color: $text-color;
 }
+
 .nut-shortpsdWx-subtitle {
   display: block;
   margin-top: 12px;
@@ -55,11 +64,13 @@
   padding: 24px 0 10px 0;
   text-align: center;
   position: relative;
+
   .nut-input-site {
     width: 247px;
     height: 41px;
     border-radius: 4px;
   }
+
   .nut-input-real {
     position: absolute;
     right: 247px;
@@ -185,7 +196,7 @@
       padding: 8px 38px;
       line-height: 1;
       font-size: $font-size-2;
-      color: $white;
+      color: $primary-text-color;
     }
   }
 }