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

package/dist/packages/infiniteloading/infiniteloading.scss

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

package/dist/packages/input/input.scss

@@ -6,10 +6,9 @@
   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 {
@@ -18,7 +17,7 @@
 
   .nut-input-native {
     width: 100%;
-    color: $input-color;
+    color: $gray1;
     flex: 1;
     background-color: transparent;
     padding: 0;
@@ -26,7 +25,6 @@
     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: flex;
+  display: $inputnumber-display;
   align-items: center;
 
   .nut-input-minus,
@@ -13,38 +13,35 @@
     border-radius: $inputnumber-button-border-radius;
   }
 
-  &-disabled {
+  &--disabled {
     input {
-      color: $inputnumber-disabled-color !important;
+      color: $inputnumber-icon-void-color !important;
     }
   }
 
-  &-icon {
+  &__icon {
     color: $inputnumber-icon-color;
     font-size: $inputnumber-icon-size;
     cursor: pointer;
 
-    &-disabled {
-      color: $inputnumber-disabled-color;
+    &--disabled {
+      color: $inputnumber-icon-disabled-color;
       cursor: not-allowed;
     }
   }
 
   input,
   .nut-number-input,
-  &-text-readonly {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  &__text--readonly {
     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,
@@ -53,16 +50,16 @@
   .nut-number-input::-webkit-inner-spin-button {
     appearance: none;
   }
+}
 
-  .nut-icon-Minus,
-  .nut-icon-minus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
-  }
+.nut-icon-Minus,
+.nut-icon-minus {
+  --nut-icon-width: 20px;
+  --nut-icon-height: 20px;
+}
 
-  .nut-icon-Plus,
-  .nut-icon-plus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
-  }
+.nut-icon-Plus,
+.nut-icon-plus {
+  --nut-icon-width: 20px;
+  --nut-icon-height: 20px;
 }

package/dist/packages/loading/loading.scss

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

package/dist/packages/menu/menu.scss

@@ -1,7 +1,6 @@
 @import '../../styles/mixins/text-ellipsis.scss';
 
 .nut-menu {
-  position: relative;
   &.scroll-fixed {
     position: fixed;
     top: $menu-scroll-fixed-top;
@@ -10,47 +9,56 @@
   }
 }
 
+.nut-menu-relative {
+  position: relative;
+}
+
 .nut-menu__bar {
   position: relative;
   display: flex;
   line-height: $menu-bar-line-height;
-  background-color: $color-background-overlay;
+  background-color: $white;
   box-shadow: $menu-bar-box-shadow;
 
   &.opened {
     z-index: $menu-bar-opened-z-index;
   }
 }
-.nut-menu__title {
+
+.nut-menu__item {
   flex: 1;
   text-align: center;
-  font-size: $menu-title-font-size;
-  color: $menu-title-color;
+  font-size: $menu-item-font-size;
+  color: $menu-item-text-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-color;
+    color: $menu-item-active-text-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,63 +1,64 @@
 
-.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;
-    }
-  }
-  &-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;
+.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%;
-    z-index: $menu-container-z-index;
-    overflow: hidden;
+    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;
   }
 
-  &-wrap-up {
-    bottom: $menu-bar-line-height;
+  i {
+    margin-right: $menu-item-option-i-margin-right;
+    display: inline-flex;
+    align-items: center;
   }
 }
 
-.overlay-fade-enter-active.nut-menu-container-overlay {
+.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;
+}
+
+.overlay-fade-enter-active.nut-menu__overlay {
   top: auto;
-  z-index: $menu-container-z-index;
+  z-index: $menu-item-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-bar-line-height;
+  top: $menu-placeholder-top;
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;
@@ -68,44 +69,44 @@
   }
 }
 
-.nut-menu-container-down-enter {
+.menu-item-enter {
   opacity: 0;
   transform: translate(0, -30px);
 }
 
-.nut-menu-container-down-enter-done {
+.menu-item-enter-done {
   opacity: 1;
   transform: translate(0, 0);
   transition: all 100ms;
 }
 
-.nut-menu-container-down-exit {
+.menu-item-exit {
   opacity: 1;
   transition: all 100ms;
 }
 
-.nut-menu-container-down-exit-done {
+.menu-item-exit-done {
   opacity: 0;
   transition: all 100ms;
 }
 
-.nut-menu-container-up-enter {
+.menu-item-up-enter {
   opacity: 0;
   transform: translate(0, 30px);
 }
 
-.nut-menu-container-up-enter-done {
+.menu-item-up-enter-done {
   opacity: 1;
   transform: translate(0, 0);
   transition: all 100ms;
 }
 
-.nut-menu-container-up-exit {
+.menu-item-up-exit {
   opacity: 1;
   transition: all 100ms;
 }
 
-.nut-menu-container-up-exit-done {
+.menu-item-up-exit-done {
   opacity: 0;
   transition: all 100ms;
 }

package/dist/packages/navbar/navbar.scss

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

package/dist/packages/noticebar/noticebar.scss

@@ -1,13 +1,13 @@
 .nut-noticebar {
   width: 100%;
 
-  .nut-noticebar-box {
-    position: relative;
+  .nut-noticebar-page {
     display: flex;
-    align-items: center;
-    height: $noticebar-height;
     padding: $noticebar-box-padding;
+    height: $noticebar-height;
     font-size: $noticebar-font-size;
+    position: relative;
+    align-items: center;
     background: $noticebar-background;
     color: $noticebar-color;
 
@@ -32,9 +32,10 @@
     }
 
     .left-icon {
+      display: flex;
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
-      margin-right: $noticebar-icon-gap;
+      margin: $noticebar-lefticon-margin;
       background-size: 100% 100%;
     }
 
@@ -43,7 +44,7 @@
       align-items: center;
       justify-content: center;
       width: $noticebar-right-icon-width;
-      margin-left: $noticebar-icon-gap;
+      margin: $noticebar-righticon-margin;
     }
 
     .wrap {
@@ -112,19 +113,19 @@
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
-      margin: $noticebar-icon-gap;
+      margin: $noticebar-lefticon-margin;
       background-size: 100% 100%;
       display: flex;
       align-self: center;
     }
 
-    .horseLamp-list {
+    .horseLamp_list {
       margin: 0;
       padding: 0;
       display: block;
       flex: 1;
 
-      .horseLamp-list-item {
+      .horseLamp_list_item {
         display: flex;
         align-items: center;
         height: $noticebar-height;
@@ -146,7 +147,7 @@
       display: flex;
       justify-content: center;
       width: $noticebar-right-icon-width;
-      margin-left: $noticebar-icon-gap;
+      margin: $noticebar-righticon-margin;
     }
   }
 }

package/dist/packages/notify/notify.scss

@@ -42,18 +42,16 @@
 }
 
 .nut-notify {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   box-sizing: border-box;
   padding: $notify-padding;
   color: $notify-text-color;
   font-size: $notify-font-size;
   white-space: pre-wrap;
+  text-align: center;
   word-wrap: break-word;
   height: $notify-height;
-  &--popup-top,
-  &--popup-bottom {
+  line-height: $notify-line-height;
+  &--popup-top {
     position: fixed;
     top: 0;
     left: 0;
@@ -63,6 +61,16 @@
     z-index: 9999;
   }
 
+  &--popup-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow-y: auto;
+    transition: transform 0.3s;
+    z-index: 9999;
+  }
+
   &--base {
     background: $notify-base-background-color;
   }

package/dist/packages/numberkeyboard/numberkeyboard.scss

@@ -1,9 +1,10 @@
 
 .nut-numberkeyboard {
-  width: 100%;
+  width: $numberkeyboard-width;
   padding: $numberkeyboard-padding;
-  user-select: none;
   background-color: $numberkeyboard-background-color;
+  user-select: none;
+  background-color: $gray4;
 
   &__header {
     position: relative;
@@ -11,12 +12,13 @@
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    padding: $popup-title-padding;
-    color: $color-title;
-    font-size: $popup-title-font-size;
+    height: $numberkeyboard-header-height;
+    padding: $numberkeyboard-header-padding;
+    color: $numberkeyboard-header-color;
+    font-size: $numberkeyboard-header-font-size;
 
     &__title {
-      color: $color-title;
+      color: $title-color;
       display: inline-block;
     }
 
@@ -49,7 +51,7 @@
       flex-basis: 33%;
       box-sizing: border-box;
       padding: 0 6px 6px 0;
-      background-color: $numberkeyboard-wrapper-background-color;
+      background-color: $gray5;
 
       .key {
         display: flex;
@@ -61,10 +63,7 @@
         background-color: $numberkeyboard-key-background-color;
         color: $numberkeyboard-key-font-color;
         border-radius: $numberkeyboard-key-border-radius;
-        border: $numberkeyboard-key-border;
-        font-weight: $font-weight-bold;
         cursor: pointer;
-
         &.active {
           background-color: $numberkeyboard-key-active-background-color;
         }
@@ -91,7 +90,6 @@
         font-size: $numberkeyboard-key-confirm-font-size;
         color: $numberkeyboard-key-confirm-font-color;
         background-color: $numberkeyboard-key-confirm-background-color;
-
         &.active {
           background-color: rgba(255, 0, 0, 0.7);
         }

package/dist/packages/overlay/overlay.scss

@@ -6,6 +6,7 @@
   height: 100%;
   background: $overlay-bg-color;
   z-index: $overlay-zIndex;
+
   .wrapper {
     .content {
       background-color: $overlay-content-bg-color;
@@ -16,6 +17,10 @@
 
 .nut-overflow-hidden {
   overflow: hidden !important;
+
+  .taro_page {
+    overflow: hidden !important;
+  }
 }
 
 .nut-overlay-slide {

package/dist/packages/pagination/pagination.scss

@@ -56,27 +56,4 @@
     background-color: $pagination-disable-background-color;
     cursor: not-allowed;
   }
-
-  &-lite {
-    width: $pagination-lite-width;
-    height: $pagination-lite-height;
-    display: flex;
-    font-size: $font-size-xs;
-    color: $color-primary-text;
-    background-color: $pagination-lite-background-color;
-    border-radius: $pagination-lite-radius;
-    &-active,
-    &-default {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: $pagination-lite-height;
-      height: $pagination-lite-height;
-    }
-    &-active {
-      border-radius: $pagination-lite-radius;
-      font-size: $font-size-small;
-      background-color: $pagination-lite-active-background-color;
-    }
-  }
 }