@nutui/nutui-react 2.0.23 → 2.1.0-beta.0

package/dist/packages/fixednav/fixednav.scss

@@ -10,9 +10,11 @@
     .nut-icon {
       transform: rotate(180deg);
     }
+
     .nut-fixednav__list {
       transform: translateX(0%) !important;
     }
+
     &.left {
       .nut-icon {
         transform: rotate(0deg) !important;
@@ -26,10 +28,9 @@
     right: 0;
 
     z-index: $fixednav-index;
-    width: 80px;
-    padding-left: 12px;
+    width: 70px;
     height: 100%;
-    background: $fixednav-btn-bg;
+    background: $fixednav-button-background;
     border-radius: 45px 0px 0px 45px;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     display: flex;
@@ -39,10 +40,11 @@
     .text {
       width: 24px;
       line-height: 13px;
-      font-size: 10px;
-      color: $fixednav-bg-color;
+      font-size: $font-size-small;
+      color: #fff;
       flex-shrink: 0;
     }
+
     .nut-icon {
       margin-right: 5px;
       transition: all 0.3s;
@@ -60,15 +62,17 @@
     z-index: $fixednav-index;
     flex-shrink: 0;
     height: 100%;
-    background: $fixednav-bg-color;
+    background: $fixednav-background-color;
     display: flex;
     justify-content: space-between;
     border-radius: 25px 0px 0px 25px;
     box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
+
     padding: {
       left: 20px;
       right: 80px;
     }
+
     &-item {
       position: relative;
       flex: 1;
@@ -79,15 +83,18 @@
       align-items: center;
       min-width: 50px;
       flex-shrink: 0;
+      color: $fixednav-color;
+
       img {
         width: 20px;
         height: 20px;
         margin-bottom: 2px;
       }
+
       .nut-fixednav__list-text {
         font-size: 10px;
-        color: $fixednav-font-color;
       }
+
       .b {
         position: absolute;
         right: 0;
@@ -97,13 +104,14 @@
         font-size: 10px;
         padding: 0 3px;
         color: white;
-        background: $primary-color;
+        background: $color-primary;
         border-radius: 7px;
         text-align: center;
         min-width: 12px;
       }
     }
   }
+
   &.left {
     right: auto;
     left: 0;
@@ -113,22 +121,27 @@
       right: auto;
       left: 0;
       border-radius: 0 45px 45px 0;
+
       .nut-icon {
         transform: rotate(180deg);
       }
     }
+
     .nut-fixednav__list {
       transform: translateX(-100%);
       right: auto;
       border-radius: 0px 25px 25px 0px;
+
       padding: {
         left: 80px;
         right: 20px;
       }
+
       margin: 0;
     }
   }
 }
+
 .nut-drag .nut-fixednav {
   position: inherit;
 }

package/dist/packages/formitem/formitem.scss

@@ -46,7 +46,7 @@
       .nut-input-text {
         font-size: $form-item-body-font-size;
         text-align: $form-item-body-input-text-align;
-        color: $black;
+        color: $color-title;
         width: 100%;
         outline: 0 none;
         border: 0;

package/dist/packages/griditem/griditem.scss

@@ -62,6 +62,7 @@
 
     &--horizontal#{&}--reverse {
       flex-direction: row-reverse;
+
       #{$block}__text {
         margin: 0 $grid-item-text-margin 0 0;
       }
@@ -76,9 +77,9 @@
         left: 50%;
         width: 100%;
         height: 100%;
-        background-color: $black;
+        background-color: $color-mask;
         border: inherit;
-        border-color: $black;
+        border-color: $color-mask;
         border-radius: inherit;
         transform: translate(-50%, -50%);
         opacity: 0;

package/dist/packages/image/image.scss

@@ -1,6 +1,7 @@
 .nut-image {
   display: block;
   position: relative;
+
   .nut-img {
     display: block;
     width: 100%;
@@ -22,9 +23,10 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: #f7f8fa;
+    background: $color-background;
     background-size: 100% 100%;
   }
+
   .nut-img-error {
     width: 100%;
     height: 100%;
@@ -35,7 +37,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: #f7f8fa;
+    background: $color-background;
     background-size: 100% 100%;
   }
 }

package/dist/packages/imagepreview/imagepreview.scss

@@ -17,7 +17,7 @@
     left: 0;
     right: 0;
     background: transparent;
-    color: #fff;
+    color: $color-title;
 
     .arrow {
       position: absolute;
@@ -26,16 +26,6 @@
     }
   }
 
-  .popup-bg {
-    background: rgba(0, 0, 0, 0.9);
-  }
-
-  .popup-box {
-    height: 100%;
-    overflow: visible;
-    background-color: transparent;
-  }
-
   &-pop {
     height: 100%;
     background: transparent !important;

package/dist/packages/indicator/indicator.scss

@@ -27,8 +27,8 @@
 
   &__active {
     width: $indicator-dot-active-size;
-    border-radius: $indicator-border-size;
-    background-color: $indicator-color;
+    border-radius: $indicator-border-radius-size;
+    background: $indicator-color;
   }
 
   &__vertical {
@@ -38,7 +38,7 @@
     justify-content: center;
 
     .nut-indicator__dot {
-      margin: $indicator-dot-vertical-margin 0;
+      margin: $indicator-dot-margin 0;
 
       &:first-child {
         margin-top: 0px;

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -1,26 +1,33 @@
 .nut-infiniteloading {
   display: block;
   width: 100%;
+
   .nut-infinite-top {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     overflow: hidden;
+    font-size: $font-size-small;
+    color: $infiniteloading-color;
+
     .top-box {
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      color: $text-color;
-    }
-  }
-  .nut-infinite-container {
-    .infiniteLi {
-      color: $title-color;
+      &-icons {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: $pulltorefresh-top-icon-width;
+        height: $pulltorefresh-top-icon-height;
+        margin-bottom: 4px;
+      }
     }
   }
+
   .nut-infinite-bottom {
     display: flex;
     align-items: center;
@@ -28,11 +35,19 @@
     width: 100%;
     padding-top: 6px;
     font-size: $font-size-small;
-    color: $infiniteloading-bottom-color;
+    color: $infiniteloading-color;
     text-align: center;
 
     .bottom-box {
-      color: $text-color;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &-icons {
+        width: $infiniteloading-bottom-icon-size;
+        height: $infiniteloading-bottom-icon-size;
+        margin-right: 8px;
+      }
     }
   }
 }

package/dist/packages/input/input.scss

@@ -6,9 +6,10 @@
   width: 100%;
   padding: $input-padding;
   line-height: 24px;
-  background: $white;
   font-size: $input-font-size;
   box-sizing: border-box;
+  border-radius: $input-border-radius;
+  background-color: $input-background-color;
   border-bottom: $input-border-bottom-width solid $input-border-bottom;
 
   .nut-icon {
@@ -17,7 +18,7 @@
 
   .nut-input-native {
     width: 100%;
-    color: $gray1;
+    color: $input-color;
     flex: 1;
     background-color: transparent;
     padding: 0;
@@ -25,6 +26,7 @@
     outline: 0 none;
     font: inherit;
     text-decoration: none;
+    background-color: transparent;
   }
 
   &-disabled {

package/dist/packages/inputnumber/inputnumber.scss

@@ -1,5 +1,5 @@
 .nut-inputnumber {
-  display: $inputnumber-display;
+  display: flex;
   align-items: center;
 
   .nut-input-minus,
@@ -13,35 +13,38 @@
     border-radius: $inputnumber-button-border-radius;
   }
 
-  &--disabled {
+  &-disabled {
     input {
-      color: $inputnumber-icon-void-color !important;
+      color: $inputnumber-disabled-color !important;
     }
   }
 
-  &__icon {
+  &-icon {
     color: $inputnumber-icon-color;
     font-size: $inputnumber-icon-size;
     cursor: pointer;
 
-    &--disabled {
-      color: $inputnumber-icon-disabled-color;
+    &-disabled {
+      color: $inputnumber-disabled-color;
       cursor: not-allowed;
     }
   }
 
   input,
   .nut-number-input,
-  &__text--readonly {
+  &-text-readonly {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: $inputnumber-input-width;
     height: $inputnumber-input-height;
     text-align: center;
     outline: none;
     border: $inputnumber-input-border;
+    border-radius: $inputnumber-input-border-radius;
     margin: $inputnumber-input-margin;
     color: $inputnumber-input-font-color;
     background-color: $inputnumber-input-background-color;
-    border-radius: $inputnumber-input-border-radius;
   }
 
   input::-webkit-outer-spin-button,
@@ -50,16 +53,16 @@
   .nut-number-input::-webkit-inner-spin-button {
     appearance: none;
   }
-}
 
-.nut-icon-Minus,
-.nut-icon-minus {
-  --nut-icon-width: 20px;
-  --nut-icon-height: 20px;
-}
+  .nut-icon-Minus,
+  .nut-icon-minus {
+    --nut-icon-width: 16px;
+    --nut-icon-height: 16px;
+  }
 
-.nut-icon-Plus,
-.nut-icon-plus {
-  --nut-icon-width: 20px;
-  --nut-icon-height: 20px;
+  .nut-icon-Plus,
+  .nut-icon-plus {
+    --nut-icon-width: 16px;
+    --nut-icon-height: 16px;
+  }
 }

package/dist/packages/loading/loading.scss

@@ -19,9 +19,9 @@
     }
   }
   .nut-loading-text {
-    padding: 4px;
-    color: $loading-text-color;
-    font-size: $loading-text-size;
+    padding: 8px;
+    color: $loading-color;
+    font-size: $loading-font-size;
   }
 }
 @keyframes nut-loading-rotation {

package/dist/packages/menu/menu.scss

@@ -1,6 +1,7 @@
 @import '../../styles/mixins/text-ellipsis.scss';
 
 .nut-menu {
+  position: relative;
   &.scroll-fixed {
     position: fixed;
     top: $menu-scroll-fixed-top;
@@ -9,56 +10,47 @@
   }
 }
 
-.nut-menu-relative {
-  position: relative;
-}
-
 .nut-menu__bar {
   position: relative;
   display: flex;
   line-height: $menu-bar-line-height;
-  background-color: $white;
+  background-color: $color-background-overlay;
   box-shadow: $menu-bar-box-shadow;
 
   &.opened {
     z-index: $menu-bar-opened-z-index;
   }
 }
-
-.nut-menu__item {
+.nut-menu__title {
   flex: 1;
   text-align: center;
-  font-size: $menu-item-font-size;
-  color: $menu-item-text-color;
+  font-size: $menu-title-font-size;
+  color: $menu-title-color;
   min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+
+  &-text {
+    @include text-ellipsis;
+    display: block;
+    padding: $menu-title-padding;
+  }
+
+  &-icon {
+    transition: all 0.2s linear;
+  }
 
   &.active {
-    color: $menu-item-active-text-color;
+    color: $menu-item-active-color;
   }
 
   &.disabled {
     color: $menu-item-disabled-color;
   }
-}
-
-.nut-menu__title-icon {
-  transition: all 0.2s linear;
-}
-
-.nut-menu__title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
 
   &.active .nut-menu__title-icon {
     transform: rotate(180deg);
   }
 }
-
-.nut-menu__title-text {
-  @include text-ellipsis;
-  display: block;
-  padding-left: $menu-title-text-padding-left;
-  padding-right: $menu-title-text-padding-right;
-}

package/dist/packages/menuitem/menuitem.scss

@@ -1,64 +1,63 @@
 
-.nut-menu-item__content {
-  padding: $menu-item-content-padding;
-  max-height: $menu-item-content-max-height;
-  overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  background: $menu-item-content-bg-color;
-
-  &_fixed {
-    width: 100%;
-    opacity: 0;
-    position: fixed;
-  }
-}
-
-.nut-menu-item__option {
-  color: $title-color;
-  font-size: $font-size-2;
-  padding-top: $menu-item-option-padding-top;
-  padding-bottom: $menu-item-option-padding-bottom;
-  display: flex;
-  align-items: center;
-
-  &.active {
-    font-weight: 500;
-    color: $menu-item-active-text-color;
+.nut-menu-container {
+  &-content {
+    padding: $menu-content-padding;
+    max-height: $menu-content-max-height;
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    background: $menu-content-background-color;
+
+    &_fixed {
+      width: 100%;
+      opacity: 0;
+      position: fixed;
+    }
   }
-
-  i {
-    margin-right: $menu-item-option-i-margin-right;
-    display: inline-flex;
+  &-item {
+    display: flex;
     align-items: center;
+    color: $color-title;
+    font-size: $font-size-base;
+    padding: $menu-item-padding;
+
+    &.active {
+      font-weight: $menu-item-active-font-weight;
+      color: $menu-item-active-color;
+    }
+
+    i {
+      display: inline-flex;
+      align-items: center;
+      margin-right: $menu-item-icon-margin;
+    }
+  }
+  &-wrap,
+  &-wrap-up {
+    position: absolute;
+    width: 100%;
+    z-index: $menu-container-z-index;
+    overflow: hidden;
   }
-}
-
-.nut-menu-item__wrap,
-.nut-menu-item__wrap-up {
-  position: absolute;
-  width: 100%;
-  z-index: $menu-item-z-index;
-  overflow: hidden;
-}
 
-.nut-menu-item__wrap-up {
-  bottom: $menu-bar-line-height;
+  &-wrap-up {
+    bottom: $menu-bar-line-height;
+  }
 }
 
-.overlay-fade-enter-active.nut-menu__overlay {
+.overlay-fade-enter-active.nut-menu-container-overlay {
   top: auto;
-  z-index: $menu-item-z-index;
+  z-index: $menu-container-z-index;
 }
 
-.nut-menu__pop.nut-popup {
-  transition: all 0s ease 0s;
-  transform: none;
-}
+// .nut-menu__pop.nut-popup {
+//   transition: all 0s ease 0s;
+//   transform: none;
+// }
 
 .placeholder-element {
   position: fixed;
-  top: $menu-placeholder-top;
+  top: -$menu-bar-line-height;
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;
@@ -69,44 +68,44 @@
   }
 }
 
-.menu-item-enter {
+.nut-menu-container-down-enter {
   opacity: 0;
   transform: translate(0, -30px);
 }
 
-.menu-item-enter-done {
+.nut-menu-container-down-enter-done {
   opacity: 1;
   transform: translate(0, 0);
   transition: all 100ms;
 }
 
-.menu-item-exit {
+.nut-menu-container-down-exit {
   opacity: 1;
   transition: all 100ms;
 }
 
-.menu-item-exit-done {
+.nut-menu-container-down-exit-done {
   opacity: 0;
   transition: all 100ms;
 }
 
-.menu-item-up-enter {
+.nut-menu-container-up-enter {
   opacity: 0;
   transform: translate(0, 30px);
 }
 
-.menu-item-up-enter-done {
+.nut-menu-container-up-enter-done {
   opacity: 1;
   transform: translate(0, 0);
   transition: all 100ms;
 }
 
-.menu-item-up-exit {
+.nut-menu-container-up-exit {
   opacity: 1;
   transition: all 100ms;
 }
 
-.menu-item-up-exit-done {
+.nut-menu-container-up-exit-done {
   opacity: 0;
   transition: all 100ms;
 }

package/dist/packages/navbar/navbar.scss

@@ -5,7 +5,6 @@
   align-items: center;
   height: $navbar-height;
   box-sizing: border-box;
-  padding: $navbar-padding;
   background: $navbar-background;
   box-shadow: $navbar-box-shadow;
   font-size: $navbar-font-size;
@@ -42,10 +41,10 @@
     color: $navbar-title-font-color;
 
     .nut-tabs__titles {
-      background: $white;
+      background: transparent;
 
       &-item__text {
-        color: $title-color;
+        color: $color-title;
       }
     }
 
@@ -66,11 +65,19 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    padding: 0 16px;
+    padding: 0 14px;
+
+    .nut-icon,
+    .nutui-iconfont {
+      width: 20px;
+      height: 20px;
+      font-size: 20px;
+    }
   }
 
   &__left {
     left: 0;
+
     &__back {
       display: flex;
       align-items: center;