@nutui/nutui-react-taro 1.4.6 → 1.4.7-beta.1

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;
     }
   }
 }

package/dist/packages/swiper/swiper.scss

@@ -18,7 +18,7 @@
     display: flex;
     position: absolute;
     left: 50%;
-    bottom: 12px;
+    bottom: $swiper-pagination-bottom;
     transform: translateX(-50%);
     i {
       width: $swiper-pagination-item-width;

package/dist/packages/switch/switch.scss

@@ -1,9 +1,11 @@
 .nut-theme-dark {
   .nut-switch {
     background-color: $dark4;
+
     &.switch-close {
       color: $dark1;
     }
+
     .switch-button {
       .close {
         color: $dark4;
@@ -22,48 +24,59 @@
   background-repeat: no-repeat;
   background-position: center center;
   flex: 0 0 auto; // 防止被压缩
+
   &.switch-close {
     background-color: $switch-close-bg-color;
+
     .close-line {
       background: $switch-close--cline-bg-color;
       border-radius: 2px;
     }
   }
+
   .switch-button {
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background: $white;
+    background: $primary-text-color;
     transition: transform 0.3s;
+
     .nut-switch__label {
-      color: $white;
+      color: $primary-text-color;
       font-size: $font-size-1;
+
       &.open {
         transform: translateX(-16px);
       }
+
       &.close {
         transform: translateX(16px);
       }
     }
   }
+
   &-disable {
     opacity: 0.6;
   }
+
   &-base {
     width: $switch-width;
     height: $switch-height;
     line-height: $switch-line-height;
+
     .switch-button {
       height: $switch-inside-height;
       width: $switch-inside-width;
       transform: $switch-inside-close-transform;
     }
+
     &.switch-open {
       .switch-button {
         transform: $switch-inside-open-transform;
       }
     }
+
     &.switch-close {
       .close-line {
         width: 8px;

package/dist/packages/tabbar/tabbar.scss

@@ -3,14 +3,17 @@
     background: $dark4;
   }
 }
+
 .nut-tabbar {
   border: 0px;
   box-shadow: $tabbar-box-shadow;
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
+  height: $tabbar-height;
   width: 100%;
   display: flex;
-  padding: 7px 0;
+  justify-content: center;
+  align-items: center;
   box-sizing: border-box;
   background: $white;
 
@@ -26,7 +29,18 @@
   }
 
   &__safebottom {
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+    bottom: constant(safe-area-inset-bottom);
+    bottom: env(safe-area-inset-bottom);
+
+    &::after {
+      content: '';
+      z-index: 90;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      height: env(safe-area-inset-bottom);
+      width: 100%;
+      background-color: #fff;
+    }
   }
 }

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -1,6 +1,8 @@
+
 .nut-theme-dark {
   .nut-tabbar-item {
     color: $dark1;
+
     &--active {
       color: $primary-color;
     }
@@ -8,14 +10,15 @@
 }
 
 .nut-tabbar-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   flex: 1;
   text-align: center;
   text-decoration: none;
   color: $gray1;
   height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 
   &--active {
     color: $primary-color;
@@ -34,55 +37,61 @@
       border: 1px solid $white;
       border-radius: 7px;
       text-align: center;
-      top: -2px;
-      right: -7px;
+      top: calc(50% - 6px);
+      right: calc(50% - 16px);
       box-shadow: 0 0 0 1px $white;
       font-size: $font-size-1;
-      color: $white;
+      color: $primary-text-color;
       z-index: 1;
     }
+
     &__dot {
       position: absolute;
       width: 7px;
       height: 7px;
+      border: 0;
       border-radius: 7px;
       padding: 0px;
       background: $tabbar-active-color;
-      text-align: center;
-      font-size: 12px;
-      font-weight: normal;
-      color: #fff;
-      top: 0;
-      right: 0;
+      top: $tabbar-dot-top;
+      right: calc(50% - $tabbar-dot-right);
       transform: translate(50%, -50%);
     }
 
     &__num {
       line-height: 1;
       font-size: $tabbar-item-text-font-size;
-      color: $white;
+      color: $primary-text-color;
       padding: 1px 2px 2px 3px;
+      top: calc(-50% + 6px);
+      right: calc(-50%);
     }
 
     &__nums {
       line-height: 1;
       font-size: $tabbar-item-text-font-size;
-      color: $white;
+      color: $primary-text-color;
       padding: 2px 1px 2px 2px;
+      top: calc(-50% + 6px);
+      right: calc(-50% - 8px);
     }
+
     &__icon {
       display: block;
       background-size: 100% 100%;
       background-position: center center;
     }
+
     &--nav-word {
-      font-size: $font-size-0;
-      line-height: $tabbar-item-text-line-height;
       display: block;
+      font-size: $font-size-0;
+      margin-top: $tabbar-word-margin-top;
     }
+
     &--big-word {
       font-size: $font-size-large;
-      line-height: 1;
+      margin-top: 0;
+      line-height: $tabbar-item-text-line-height;
     }
   }
 }

package/dist/packages/tag/tag.scss

@@ -1,11 +1,13 @@
+
 .nut-tag {
-  padding: 0 4px;
+  padding: $tag-padding;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   font-size: $tag-font-size;
   border-radius: $tag-default-border-radius;
   height: $tag-height;
+
   ._icon {
     vertical-align: middle;
     margin-left: 4px;