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

package/dist/packages/noticebar/noticebar.scss

@@ -1,13 +1,13 @@
 .nut-noticebar {
   width: 100%;
 
-  .nut-noticebar-page {
+  .nut-noticebar-box {
+    position: relative;
     display: flex;
-    padding: $noticebar-box-padding;
+    align-items: center;
     height: $noticebar-height;
+    padding: $noticebar-box-padding;
     font-size: $noticebar-font-size;
-    position: relative;
-    align-items: center;
     background: $noticebar-background;
     color: $noticebar-color;
 
@@ -32,10 +32,9 @@
     }
 
     .left-icon {
-      display: flex;
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
-      margin: $noticebar-lefticon-margin;
+      margin-right: $noticebar-icon-gap;
       background-size: 100% 100%;
     }
 
@@ -44,7 +43,7 @@
       align-items: center;
       justify-content: center;
       width: $noticebar-right-icon-width;
-      margin: $noticebar-righticon-margin;
+      margin-left: $noticebar-icon-gap;
     }
 
     .wrap {
@@ -113,19 +112,19 @@
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
-      margin: $noticebar-lefticon-margin;
+      margin: $noticebar-icon-gap;
       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;
@@ -147,7 +146,7 @@
       display: flex;
       justify-content: center;
       width: $noticebar-right-icon-width;
-      margin: $noticebar-righticon-margin;
+      margin-left: $noticebar-icon-gap;
     }
   }
 }

package/dist/packages/notify/notify.scss

@@ -42,28 +42,20 @@
 }
 
 .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;
-  line-height: $notify-line-height;
-  &--popup-top {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    overflow-y: auto;
-    transition: transform 0.3s;
-    z-index: 9999;
-  }
-
+  &--popup-top,
   &--popup-bottom {
     position: fixed;
-    bottom: 0;
+    top: 0;
     left: 0;
     width: 100%;
     overflow-y: auto;

package/dist/packages/numberkeyboard/numberkeyboard.scss

@@ -1,10 +1,9 @@
 
 .nut-numberkeyboard {
-  width: $numberkeyboard-width;
+  width: 100%;
   padding: $numberkeyboard-padding;
-  background-color: $numberkeyboard-background-color;
   user-select: none;
-  background-color: $gray4;
+  background-color: $numberkeyboard-background-color;
 
   &__header {
     position: relative;
@@ -12,13 +11,12 @@
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    height: $numberkeyboard-header-height;
-    padding: $numberkeyboard-header-padding;
-    color: $numberkeyboard-header-color;
-    font-size: $numberkeyboard-header-font-size;
+    padding: $popup-title-padding;
+    color: $color-title;
+    font-size: $popup-title-font-size;
 
     &__title {
-      color: $title-color;
+      color: $color-title;
       display: inline-block;
     }
 
@@ -51,7 +49,7 @@
       flex-basis: 33%;
       box-sizing: border-box;
       padding: 0 6px 6px 0;
-      background-color: $gray5;
+      background-color: $numberkeyboard-wrapper-background-color;
 
       .key {
         display: flex;
@@ -63,7 +61,10 @@
         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;
         }
@@ -90,6 +91,7 @@
         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,7 +6,6 @@
   height: 100%;
   background: $overlay-bg-color;
   z-index: $overlay-zIndex;
-
   .wrapper {
     .content {
       background-color: $overlay-content-bg-color;
@@ -17,10 +16,6 @@
 
 .nut-overflow-hidden {
   overflow: hidden !important;
-
-  .taro_page {
-    overflow: hidden !important;
-  }
 }
 
 .nut-overlay-slide {

package/dist/packages/pagination/pagination.scss

@@ -56,4 +56,27 @@
     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;
+    }
+  }
 }

package/dist/packages/picker/picker.scss

@@ -1,25 +1,25 @@
 
 .nut-picker {
-  background-color: $background-color3;
+  background-color: $color-background-overlay;
   width: 100%;
 
   &__control {
     display: flex;
-    height: 56px;
-    font-size: 16px;
+    height: $popup-title-height;
+    font-size: $popup-title-font-size;
     align-items: center;
     justify-content: space-between;
-    padding: $picker-bar-button-padding;
+    padding: $popup-title-padding;
   }
 
   &__cancel-btn {
-    color: $picker-bar-cancel-color;
-    font-size: $picker-bar-cancel-font-size;
+    color: $color-text;
+    font-size: $picker-title-cancel-font-size;
   }
 
   &__confirm-btn {
-    color: $picker-bar-ok-color;
-    font-size: $picker-bar-ok-font-size;
+    color: $color-primary;
+    font-size: $picker-title-ok-font-size;
   }
 
   &__title {
@@ -28,9 +28,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: center;
-    color: $picker-bar-title-color;
-    font-size: $picker-bar-title-font-size;
-    font-weight: $picker-bar-title-font-weight;
+    color: $color-title;
+    font-size: $popup-title-font-size;
+    font-weight: $font-weight-bold;
   }
 
   &__panel {
@@ -81,7 +81,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-image: $picker-mask-bg-img;
+    background-image: $picker-mask-background;
     background-position: top, bottom;
     background-size: 100% 108px;
     background-repeat: no-repeat;
@@ -136,7 +136,7 @@
     position: absolute;
     top: 0;
     width: 100%;
-    color: $gray1;
+    color: $color-title;
   }
 
   &-roller-item-title {
@@ -145,8 +145,8 @@
     height: 36px;
     line-height: 36px;
     text-align: center;
-    color: $gray1;
-    font-size: $picker-bar-title-font-size;
+    color: $color-title;
+    font-size: $font-size-base;
   }
 
   &-roller-item-hidden {

package/dist/packages/popover/popover.scss

@@ -12,14 +12,14 @@
 
     &-top {
       bottom: 0;
-      border-top-color: $popover-white-background-color;
+      border-top-color: $popover-border-color;
       border-bottom-width: 0;
       margin-bottom: -8px;
     }
 
     &-bottom {
       top: 0px;
-      border-bottom-color: $popover-white-background-color;
+      border-bottom-color: $popover-border-color;
       border-top-width: 0;
       margin-top: -8px;
 
@@ -41,7 +41,7 @@
 
     &-left {
       right: 0px;
-      border-left-color: $popover-white-background-color;
+      border-left-color: $popover-border-color;
       border-right-width: 0;
       margin-right: -8px;
 
@@ -63,7 +63,7 @@
 
     &-right {
       left: 0px;
-      border-right-color: $popover-white-background-color;
+      border-right-color: $popover-border-color;
       border-left-width: 0;
       margin-left: -8px;
 
@@ -91,7 +91,7 @@
     font-size: $popover-font-size;
     font-family: PingFangSC;
     font-weight: normal;
-    color: $popover-primary-text-color;
+    color: $popover-text-color;
     box-shadow: 0 2px 12px #3232331f;
     max-height: initial;
     overflow-y: initial;
@@ -103,22 +103,18 @@
     }
 
     .nut-popover-menu-item {
+      position: relative;
       display: flex;
       align-items: center;
+      justify-content: center;
       padding: $popover-menu-item-padding;
-      border-bottom: 1px solid $popover-border-bottom-color;
+      border-bottom: 1px solid $popover-divider-color;
 
       &:last-child {
         margin-bottom: 2px;
         border-bottom: none;
       }
 
-      &:hover {
-        cursor: pointer;
-        color: $popover-menu-item-hover-text-color;
-        background-color: $popover-menu-item-hover-background-color;
-      }
-
       &:hover:nth-of-type(2) {
         border-radius: 8px 8px 0px 0px;
       }
@@ -127,9 +123,31 @@
         border-radius: 0px 0px 8px 8px;
       }
 
-      .nut-popover-menu-item-name {
+      &-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 12px;
+        height: 12px;
+        font-size: 12px;
+      }
+
+      &-name {
         width: 100%;
         word-break: keep-all;
+        margin-left: 4px;
+      }
+
+      &-action-icon {
+        position: absolute;
+        right: $popover-menu-item-padding;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 12px;
+        height: 12px;
+        font-size: 12px;
+        color: $color-text;
       }
 
       &.nut-popover-menu-disabled {
@@ -154,13 +172,11 @@
         right: 16px;
         transform: translateX(0%);
       }
-
       right: 0;
     }
 
     &--top-start {
       left: 0;
-
       .nut-popover-arrow--top-start {
         left: 16px;
         transform: translateX(0%);