@nutui/nutui-react 1.1.3 → 1.1.4-beta.2

package/dist/packages/avatar/avatar.scss

@@ -4,8 +4,17 @@
   background-position: center center;
   display: inline-block;
   position: relative;
-  margin-right: 24px;
   flex: 0 0 auto; // 防止被压缩
+  text-align: center;
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    flex-shrink: 0;
+  }
   .icon {
     background-size: 100% 100%;
     position: absolute;
@@ -25,24 +34,25 @@
     overflow: hidden;
   }
 }
-.avatar-large {
+.nut-avatar-large {
   width: $avatar-large-width;
   height: $avatar-large-height;
   line-height: $avatar-large-height;
 }
-.avatar-small {
+.nut-avatar-small {
   width: $avatar-small-width;
   height: $avatar-small-height;
   line-height: $avatar-small-height;
 }
-.avatar-normal {
+.nut-avatar-normal {
   width: $avatar-normal-width;
   height: $avatar-normal-height;
   line-height: $avatar-normal-height;
 }
-.avatar-round {
+.nut-avatar-round {
   border-radius: 50%;
+  overflow: hidden;
 }
-.avatar-square {
+.nut-avatar-square {
   border-radius: $avatar-square;
 }

package/dist/packages/avatargroup/avatargroup.scss

@@ -0,0 +1,14 @@
+.nut-avatar-group {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: inline-block;
+  position: relative;
+  flex: 0 0 auto; // 防止被压缩
+  .nut-avatar {
+    border: 1px solid #fff;
+    &:not(:first-of-type) {
+      margin-left: -8px;
+    }
+  }
+}

package/dist/packages/circleprogress/circleprogress.scss

@@ -1,65 +1,24 @@
 .nut-circleprogress {
   position: relative;
 
-  .nut-circleprogress-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-  .nut-circleprogress__right {
-    width: 50%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    float: right;
-  }
-  .nut-circleprogress__left {
-    width: 50%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    float: left;
+  &-hover {
+    stroke: $circleprogress-primary-color;
+    transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;
   }
 
-  .nut-circleprogress__line {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    overflow: hidden;
-    &.nut-circleprogress__l {
-      top: 0px;
-      transform: rotate(0deg);
-      left: 0px;
-    }
-
-    &.nut-circleprogress__r {
-      top: 0px;
-      transform: rotate(180deg);
-      right: 0px;
-    }
+  &-path {
+    stroke: $circleprogress-path-color;
   }
 
-  .nut-circleprogress__progress {
+  &-text {
     position: absolute;
     top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 16px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: rgba(29, 29, 33, 1);
-  }
-
-  .nut-circleprogress__line__c {
-    width: 200%;
-    height: 100%;
-    border: 10px solid transparent;
-    border-radius: 50%;
-    position: absolute;
+    left: 0;
     box-sizing: border-box;
-    top: 0;
-    transform: rotate(-45deg);
+    width: 100%;
+    transform: translateY(-50%);
+    text-align: center;
+    color: $circleprogress-text-color;
+    font-size: $circleprogress-text-size;
   }
 }

package/dist/packages/skeleton/skeleton.scss

@@ -16,13 +16,11 @@
       height: 100%;
       background: rgb(239, 239, 239);
       margin-top: 10px;
-    }
-
-    .skeleton-lines {
       &:last-child {
         width: 70% !important;
       }
     }
+
     .blockClass--round {
       border-radius: 10px;
     }

package/dist/packages/step/step.scss

@@ -17,15 +17,15 @@
     right: -50%;
     display: inline-block;
     height: 1px;
-    background: #909ca4;
+    background: $steps-base-line-color;
   }
   &-icon {
     position: relative;
     display: flex;
-    width: 25px;
-    height: 25px;
-    line-height: 25px;
-    font-size: 13px;
+    width: $steps-base-icon-width;
+    height: $steps-base-icon-height;
+    line-height: $steps-base-icon-line-height;
+    font-size: $steps-base-icon-font-size;
     align-items: center;
     justify-content: center;
     z-index: 1;
@@ -53,14 +53,14 @@
   }
   &-title {
     display: block;
-    margin-bottom: 10px;
-    font-size: 14px;
-    color: #909ca4;
+    margin-bottom: $steps-base-title-margin-bottom;
+    font-size: $steps-base-title-font-size;
+    color: $steps-base-title-color;
   }
   &-content {
     display: block;
-    font-size: 14px;
-    color: #666;
+    font-size: $steps-base-content-font-size;
+    color: $steps-base-content-color;
   }
   &:last-child {
     .nut-step-line {
@@ -69,53 +69,53 @@
   }
   &.nut-step-finish {
     .nut-step-head {
-      color: $primary-color;
-      border-color: $primary-color;
+      color: $steps-finish-head-color;
+      border-color: $steps-finish-head-border-color;
     }
     .nut-step-icon.is-text {
-      background-color: $white;
+      background-color: $steps-finish-icon-text-color;
     }
     .nut-step-icon.is-icon {
-      background-color: $white;
+      background-color: $steps-finish-icon-text-color;
     }
     .nut-step-line {
-      background: $primary-color;
+      background: $steps-finish-line-background;
     }
     .nut-step-title {
-      color: $primary-color;
+      color: $steps-finish-title-color;
     }
   }
   &.nut-step-process {
     .nut-step-head {
-      color: $white;
-      border-color: $primary-color;
+      color: $steps-process-head-color;
+      border-color: $steps-process-head-border-color;
     }
     .nut-step-icon.is-text {
-      background-color: $primary-color;
+      background-color: $steps-process-icon-text-color;
     }
     .nut-step-icon.is-icon {
-      background-color: $primary-color;
+      background-color: $steps-process-icon-text-color;
     }
     .nut-step-title {
-      color: $primary-color;
+      color: $steps-process-title-color;
     }
   }
   &.nut-step-wait {
     .nut-step-head {
-      color: #909ca4;
-      border-color: #909ca4;
+      color: $steps-wait-head-color;
+      border-color: $steps-wait-head-border-color;
     }
     .nut-step-icon.is-text {
-      background-color: $white;
+      background-color: $steps-wait-icon-bg-color;
     }
     .nut-step-icon.is-icon {
-      background-color: $step-wait-bg-color;
+      background-color: $steps-wait-icon-bg-color;
       .nut-icon {
-        color: $white;
+        color: $steps-wait-icon-color;
       }
     }
     .nut-step-content {
-      color: #909ca4;
+      color: $steps-wait-content-color;
     }
   }
 }
@@ -155,10 +155,10 @@
     }
     .nut-step-wait {
       .nut-step-icon {
-        background-color: #959fb1;
+        background-color: $steps-wait-icon-bg-color;
       }
       .nut-step-content {
-        color: #909ca4;
+        color: $steps-wait-content-color;
       }
     }
     .nut-step-finish {

package/dist/packages/uploader/uploader.scss

@@ -1,3 +1,4 @@
+@import '../../styles/mixins/text-ellipsis.scss';
 
 .nut-uploader {
   position: relative;
@@ -11,21 +12,21 @@
   &__upload {
     position: relative;
     background: $uploader-background;
-    width: $uploader-width;
-    height: $uploader-height;
+    width: $uploader-picture-width;
+    height: $uploader-picture-height;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
   &__input {
-    position: absolute;
+    position: absolute !important;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100% !important;
+    height: 100% !important;
     overflow: hidden;
-    cursor: pointer;
+    cursor: pointer !important;
     opacity: 0;
     &:disabled {
       cursor: not-allowed;
@@ -33,17 +34,68 @@
   }
 
   &__preview {
-    width: $uploader-width;
-    height: $uploader-height;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 10px;
     margin-bottom: 10px;
-    &-img {
-      position: relative;
+    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+
+    &__progress {
+      position: absolute;
+      left: 0;
+      top: 0;
       width: 100%;
       height: 100%;
+      background: rgba(0, 0, 0, 0.6);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      &__msg {
+        color: $white;
+        font-size: 12px;
+        margin-top: 6px;
+      }
+    }
+    &.list {
+      width: 100%;
+      margin-right: 0px;
+      margin-bottom: 0px;
+      margin-top: 10px;
+    }
+    &-list {
+      width: 100%;
+      height: 32px;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      padding-right: 20px;
+      .nut-uploader__preview-img__file__name {
+        -webkit-line-clamp: 1;
+        padding: 2px;
+        height: 24px;
+      }
+
+      .nut-uploader__preview-img__file__del {
+        position: absolute;
+        right: 4px;
+        top: 6px;
+      }
+      .nut-progress {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        .nut-progress-outer {
+          height: 2px !important;
+        }
+      }
+    }
+    &-img {
+      position: relative;
+      width: $uploader-picture-width;
+      height: $uploader-picture-height;
       .close {
         position: absolute;
         right: 0;
@@ -56,17 +108,48 @@
         left: 0;
         right: 0;
         text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         font-size: 12px;
         color: $white;
-        height: 30px;
-        line-height: 30px;
-        text-align: c;
+        height: 0px;
+        transition: height 0.3s;
         background: rgba(0, 0, 0, 0.54);
+        @include oneline-ellipsis();
       }
       &__c {
         height: 100%;
         width: 100%;
-        object-fit: cover;
+      }
+      &__file {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+
+        &__name {
+          display: flex;
+          width: 100%;
+          font-size: 12px;
+          color: $text-color;
+          &.error {
+            color: red !important;
+          }
+          &.success {
+            color: #1890ff !important;
+          }
+          .nut-icon-link {
+            &::before {
+              margin-left: -25%;
+              margin-top: -25%;
+              transform: none;
+            }
+          }
+          @include moreline-ellipsis();
+        }
       }
     }
   }