@nutui/nutui-react 2.1.1-beta.0 → 2.2.0

package/dist/packages/toast/toast.scss

@@ -2,7 +2,6 @@
   0% {
     -webkit-transform: rotate(0deg);
   }
-
   100% {
     -webkit-transform: rotate(360deg);
   }
@@ -17,37 +16,42 @@
   text-align: center;
   pointer-events: none;
   z-index: 1300;
-  &-overlay-default {
+  &__overlay-default {
     --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
     --nutui-overlay-zIndex: 1300;
   }
-
   &-small {
-    .nut-toast-inner {
+    .nut-toast__inner {
       font-size: $font-size-small;
     }
   }
-
   &-large {
-    .nut-toast-inner {
+    .nut-toast__inner {
       font-size: $font-size-large;
     }
   }
-
-  &-inner {
+  &-cover {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    height: 100%;
+    background: $toast-cover-bg-color;
+  }
+  &__inner {
     display: inline-block;
-    position: absolute;
-    left: 50%;
-    top: $toast-inner-top;
-    min-width: 30%;
-    max-width: 95.7%;
     font-size: $toast-text-font-size;
-    // text-align: $toast-inner-text-align;
+    min-width: 40%;
+    max-width: 65%;
+    text-align: $toast-inner-text-align;
     padding: $toast-inner-padding;
     word-break: break-all;
     background: $toast-inner-bg-color;
     border-radius: $toast-inner-border-radius;
     color: $toast-font-color;
+    position: absolute;
+    left: 50%;
+    top: $toast-inner-top;
     transform: translate(-50%, -50%);
     &.normal {
       word-break: normal;
@@ -58,64 +62,45 @@
       word-wrap: break-word;
     }
   }
-
   &-center {
     top: var(--nutui-toast-inner-top, 50%);
   }
-
   &-bottom {
     top: var(--nutui-toast-inner-top, 80%);
   }
-
   &-top {
     top: var(--nutui-toast-inner-top, 20%);
   }
-
   &-text {
+    font-size: $toast-text-font-size;
     &:empty {
       margin-bottom: -8px;
     }
   }
-
   &-title {
     font-size: $toast-title-font-size;
-    font-weight: 500;
-
     &:empty {
       margin-bottom: -8px;
     }
   }
-
   &-has-icon {
-    .nut-toast-icon-wrapper {
+    .nut-toast__icon-wrapper {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 8px;
-
-      .nut-icon {
-        width: 24px;
-        height: 24px;
-      }
     }
   }
-
   &-loading {
-    .nut-toast-inner {
+    .nut-toast__inner {
       display: inline-flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
-
-    .nut-toast-icon-wrapper {
+    .nut-toast__icon-wrapper {
       animation: rotation 2s linear infinite;
-
-      .nut-icon {
-        width: 24px;
-        height: 24px;
-      }
     }
   }
 }

package/dist/packages/tour/tour.scss

@@ -2,10 +2,9 @@
 .nut-tour {
   &-mask {
     position: fixed;
-    box-shadow: 0px 0px 0px 150vh $color-mask;
+    box-shadow: 0px 0px 0px 150vh rgba(0, 0, 0, 0.5);
     border-radius: $tour-mask-border-radius;
     z-index: 999;
-
     &-none {
       box-shadow: none;
     }
@@ -41,21 +40,17 @@
       margin-top: $tour-content-bottom-margin-top;
       display: flex;
       justify-content: space-between;
-
       &-operate {
         display: flex;
         justify-content: flex-end;
-
         &-btn {
           display: inline-block;
-          border: 1px solid $color-text-disabled;
+          border: 1px solid $disable-color;
           margin-left: $tour-content-bottom-btn-margin-left;
           padding: $tour-content-bottom-btn-padding;
           font-size: $tour-content-bottom-btn-font-size;
           border-radius: $tour-content-bottom-btn-border-radius;
-          color: $color-text;
-          cursor: pointer;
-
+          color: $text-color;
           &.active {
             color: #fff;
             border: 0;

package/dist/packages/trendarrow/trendarrow.scss

@@ -1,22 +1,17 @@
 .nut-trendarrow {
   display: inline-flex;
   align-items: center;
-  color: $color-title;
   font-size: $trendarrow-font-size;
-
-  &-icon-before {
+  &__icon-before {
     margin-right: $trendarrow-icon-margin;
   }
-
-  &-icon-after {
+  &__icon-after {
     margin-left: $trendarrow-icon-margin;
   }
-
-  &-rate {
+  &__rate {
     vertical-align: middle;
     display: inline;
   }
-
   .nut-icon {
     vertical-align: middle;
   }

package/dist/packages/uploader/uploader.scss

@@ -5,41 +5,40 @@
   display: flex;
   flex-wrap: wrap;
 
-  &-slot {
+  &__slot {
     position: relative;
   }
 
-  &-upload {
+  &__upload {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     background: $uploader-background;
-    width: $uploader-image-width;
-    height: $uploader-image-height;
-    border: $uploader-image-border;
-    border-radius: $uploader-image-border-radius;
+    width: $uploader-picture-width;
+    height: $uploader-picture-height;
+    border: $uploader-picture-border;
+    border-radius: $uploader-picture-border-radius;
   }
 
-  &-icon {
+  &__icon {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    color: $uploader-image-color;
 
-    i,
-    .nut-icon {
-      color: $uploader-image-color;
-      margin-bottom: $uploader-image-icon-margin-bottom;
+    i {
+      opacity: $uploader-picture-icon-opacity;
+      margin-bottom: $uploader-picture-icon-margin-bottom;
     }
 
     &-tip {
-      font-size: $uploader-image-icon-tip-font-size;
+      font-size: $uploader-picture-icon-tip-font-size;
+      color: $uploader-picture-icon-tip-color;
     }
   }
 
-  &-input {
+  &__input {
     position: absolute !important;
     top: 0;
     left: 0;
@@ -54,27 +53,25 @@
     }
   }
 
-  &-upload-disabled {
+  &__upload-disabled {
     background: $uploader-background-disabled;
-    color: $uploader-image-disabled;
 
-    .nut-uploader-icon {
-      i,
-      .nut-icon {
-        color: $uploader-image-disabled;
-        margin-bottom: $uploader-image-icon-margin-bottom;
+    .nut-uploader__icon {
+      i {
+        opacity: $uploader-picture-icon-opacity-disabled;
+        margin-bottom: $uploader-picture-icon-margin-bottom;
       }
     }
   }
 
-  &-preview {
+  &__preview {
     position: relative;
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
-    border-radius: $uploader-image-border-radius;
+    border-radius: $uploader-picture-border-radius;
     box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
 
-    &-progress {
+    &__progress {
       position: absolute;
       left: 0;
       top: 0;
@@ -85,14 +82,14 @@
       width: 100%;
       height: 100%;
       background: $uploader-preview-progress-background;
-      border-radius: $uploader-image-border-radius;
+      border-radius: $uploader-picture-border-radius;
 
       i {
-        margin-bottom: $uploader-image-icon-margin-bottom;
+        margin-bottom: $uploader-picture-icon-margin-bottom;
       }
 
-      &-msg {
-        color: $color-text-help;
+      &__msg {
+        color: #fff;
         font-size: 12px;
       }
     }
@@ -102,7 +99,6 @@
       margin-right: 0px;
       margin-bottom: 0px;
       margin-top: 10px;
-      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
     }
 
     &-list {
@@ -113,9 +109,9 @@
       align-items: center;
       justify-content: space-between;
       padding: 0 10px;
-      background-color: $color-background-sunken;
+      background-color: $gray5;
 
-      .nut-uploader-preview-img-file-name {
+      .nut-uploader__preview-img__file__name {
         display: flex;
         -webkit-line-clamp: 1;
         padding: 2px;
@@ -144,13 +140,13 @@
 
     &-img {
       position: relative;
-      width: $uploader-image-width;
-      height: $uploader-image-height;
-      border-radius: $uploader-image-border-radius;
+      width: $uploader-picture-width;
+      height: $uploader-picture-height;
+      border-radius: $uploader-picture-border-radius;
       overflow: hidden;
 
       i {
-        color: $color-title;
+        color: $gray1;
       }
 
       .tips {
@@ -163,7 +159,7 @@
         box-sizing: border-box;
         height: $uploader-preview-tips-height;
         line-height: $uploader-preview-tips-height;
-        border-radius: $uploader-image-border-radius;
+        border-radius: $uploader-picture-border-radius;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
         padding: $uploader-preview-tips-padding;
@@ -171,14 +167,14 @@
         @include oneline-ellipsis();
       }
 
-      &-c {
+      &__c {
         width: 100%;
         height: 100%;
         position: initial;
-        border-radius: $uploader-image-border-radius;
+        border-radius: $uploader-picture-border-radius;
       }
 
-      &-file {
+      &__file {
         height: 100%;
         width: 100%;
         display: flex;
@@ -186,11 +182,11 @@
         justify-content: center;
         transition: all 0.3s;
 
-        &-name {
+        &__name {
           display: flex;
           width: 90%;
           font-size: 12px;
-          color: $color-text;
+          color: $text-color;
 
           &.error {
             color: red !important;

package/dist/packages/virtuallist/virtuallist.scss

@@ -1,15 +1,12 @@
 .nut-horizontal-items {
   float: left;
-
   li {
     display: block;
     float: left;
-    color: $color-title;
-    background: $color-background-overlay;
+    background: $background-color3;
     padding: 10px;
     margin-right: 20px;
   }
-
   &:after {
     content: '';
     display: block;
@@ -17,12 +14,10 @@
     clear: both;
   }
 }
-
 .nut-vertical-items {
   li {
     display: block;
-    color: $color-title;
-    background: $color-background-overlay;
+    background: $background-color3;
     border-radius: 7px;
     box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
     margin-top: 20px;
@@ -31,22 +26,20 @@
     line-height: 18px;
     font-family: PingFangSC;
     font-weight: 500;
+    color: $title-color;
   }
 }
 
 .nut-virtualList-demo-item {
   height: 100px;
 }
-
 .nut-virtualList-box {
   overflow: auto;
 }
-
 .nut-virtualList-demo-box {
   .heigh1 {
     height: 500px;
   }
-
   &.hideScrollbar {
     .nut-virtualList-box {
       &::-webkit-scrollbar {
@@ -62,7 +55,6 @@
   overflow: scroll;
   position: relative;
   -webkit-overflow-scrolling: touch;
-
   &-phantom {
     position: absolute;
     left: 0;
@@ -70,14 +62,12 @@
     right: 0;
     z-index: -1;
   }
-
   &-container {
     left: 0;
     right: 0;
     top: 0;
     position: absolute;
   }
-
   &-item {
     overflow: hidden;
     margin: $list-item-margin;

package/dist/packages/watermark/watermark.scss

@@ -7,7 +7,6 @@
   bottom: 0;
   pointer-events: none;
   background-repeat: repeat;
-
   &-full-page {
     position: fixed;
   }