@nutui/nutui-react 2.2.0 → 2.3.0-beta.1

package/dist/packages/toast/toast.scss

@@ -2,6 +2,7 @@
   0% {
     -webkit-transform: rotate(0deg);
   }
+
   100% {
     -webkit-transform: rotate(360deg);
   }
@@ -16,42 +17,37 @@
   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;
     }
   }
-  &-cover {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    height: 100%;
-    background: $toast-cover-bg-color;
-  }
-  &__inner {
+
+  &-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;
-    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;
@@ -62,45 +58,64 @@
       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,9 +2,10 @@
 .nut-tour {
   &-mask {
     position: fixed;
-    box-shadow: 0px 0px 0px 150vh rgba(0, 0, 0, 0.5);
+    box-shadow: 0px 0px 0px 150vh $color-mask;
     border-radius: $tour-mask-border-radius;
     z-index: 999;
+
     &-none {
       box-shadow: none;
     }
@@ -40,17 +41,21 @@
       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 $disable-color;
+          border: 1px solid $color-text-disabled;
           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: $text-color;
+          color: $color-text;
+          cursor: pointer;
+
           &.active {
             color: #fff;
             border: 0;

package/dist/packages/trendarrow/trendarrow.scss

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

package/dist/packages/virtuallist/virtuallist.scss

@@ -1,12 +1,15 @@
 .nut-horizontal-items {
   float: left;
+
   li {
     display: block;
     float: left;
-    background: $background-color3;
+    color: $color-title;
+    background: $color-background-overlay;
     padding: 10px;
     margin-right: 20px;
   }
+
   &:after {
     content: '';
     display: block;
@@ -14,10 +17,12 @@
     clear: both;
   }
 }
+
 .nut-vertical-items {
   li {
     display: block;
-    background: $background-color3;
+    color: $color-title;
+    background: $color-background-overlay;
     border-radius: 7px;
     box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
     margin-top: 20px;
@@ -26,20 +31,22 @@
     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 {
@@ -55,6 +62,7 @@
   overflow: scroll;
   position: relative;
   -webkit-overflow-scrolling: touch;
+
   &-phantom {
     position: absolute;
     left: 0;
@@ -62,12 +70,14 @@
     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,6 +7,7 @@
   bottom: 0;
   pointer-events: none;
   background-repeat: repeat;
+
   &-full-page {
     position: fixed;
   }