@nutui/nutui-react 1.5.2-beta.0 → 1.5.2-beta.2

package/dist/packages/toast/toast.scss

@@ -0,0 +1,98 @@
+
+@keyframes rotation {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+.nut-toast {
+  position: fixed;
+  left: 0;
+  bottom: 150px;
+  width: 100%;
+  text-align: center;
+  pointer-events: none;
+  z-index: 9999;
+  &-small {
+    .nut-toast__inner {
+      font-size: $font-size-small;
+    }
+  }
+  &-large {
+    .nut-toast__inner {
+      font-size: $font-size-large;
+    }
+  }
+  &-cover {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+    height: 100%;
+    background: $toast-cover-bg-color;
+  }
+  &__inner {
+    display: inline-block;
+    font-size: $toast-text-font-size;
+    min-width: 40%;
+    max-width: 65%;
+    text-align: center;
+    padding: $toast-inner-padding;
+    word-break: break-all;
+    background: $toast-inner-bg-color;
+    border-radius: $toast-inner-border-radius;
+    color: $toast-font-color;
+  }
+  &-text {
+    font-size: $toast-text-font-size;
+    &:empty {
+      margin-bottom: -8px;
+    }
+  }
+  &-title {
+    font-size: $toast-title-font-size;
+    &:empty {
+      margin-bottom: -8px;
+    }
+  }
+  &-has-icon {
+    .nut-toast__icon-wrapper {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 8px;
+    }
+  }
+  &-center {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  &-loading {
+    .nut-toast__inner {
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .nut-toast__icon-wrapper {
+      animation: rotation 2s linear infinite;
+    }
+  }
+}
+
+.toast-fade-enter-active {
+  transition: opacity 0.3s;
+}
+
+.toast-fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.toast-fade-enter-from,
+.toast-fade-leave-to {
+  opacity: 0;
+}

package/dist/packages/trendarrow/trendarrow.scss

@@ -0,0 +1,17 @@
+.nut-trendarrow {
+  display: inline-block;
+  font-size: $trendarrow-font-size;
+  &__icon-before {
+    margin-right: $trendarrow-before-icon-margin;
+  }
+  &__icon-after {
+    margin-left: $trendarrow-before-icon-margin;
+  }
+  &__rate {
+    vertical-align: middle;
+    display: inline;
+  }
+  .nut-icon {
+    vertical-align: middle;
+  }
+}

package/dist/packages/uploader/uploader.scss

@@ -0,0 +1,237 @@
+@import '../../styles/mixins/text-ellipsis.scss';
+
+.nut-theme-dark {
+  .nut-uploader {
+    // background-color:  $gray2;
+    &__preview {
+      margin-bottom: 0;
+
+      &-img {
+        i {
+          color: $dark1 !important;
+        }
+      }
+    }
+  }
+
+  .nut-progress {
+    .nut-progress-text__inner {
+      color: $white !important;
+    }
+  }
+
+  .nut-uploader__preview-list {
+    background: $dark5;
+    color: $dark1;
+  }
+}
+
+.nut-uploader {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+
+  &__slot {
+    position: relative;
+  }
+
+  &__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;
+  }
+
+  &__icon {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    i {
+      opacity: $uploader-picture-icon-opacity;
+      margin-bottom: $uploader-picture-icon-margin-bottom;
+    }
+
+    &-tip {
+      font-size: $uploader-picture-icon-tip-font-size;
+      color: $uploader-picture-icon-tip-color;
+    }
+  }
+
+  &__input {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden;
+    cursor: pointer !important;
+    opacity: 0;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__upload-disabled {
+    background: $uploader-background-disabled;
+
+    .nut-uploader__icon {
+      i {
+        opacity: $uploader-picture-icon-opacity-disabled;
+        margin-bottom: $uploader-picture-icon-margin-bottom;
+      }
+    }
+  }
+
+  &__preview {
+    position: relative;
+    margin-right: $uploader-preview-margin-right;
+    margin-bottom: $uploader-preview-margin-bottom;
+    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+
+    &__progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background: $uploader-preview-progress-background;
+      border-radius: $uploader-picture-border-radius;
+
+      i {
+        margin-bottom: $uploader-picture-icon-margin-bottom;
+      }
+
+      &__msg {
+        color: #fff;
+        font-size: 12px;
+      }
+    }
+
+    &.list {
+      width: 100%;
+      margin-right: 0px;
+      margin-bottom: 0px;
+      margin-top: 10px;
+    }
+
+    &-list {
+      width: 100%;
+      height: 32px;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      background-color: $gray5;
+
+      .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;
+        }
+      }
+    }
+
+    .close {
+      position: absolute;
+      right: $uploader-preview-close-right;
+      top: $uploader-preview-close-top;
+      transform: translate(50%, -50%);
+    }
+
+    &-img {
+      position: relative;
+      width: $uploader-picture-width;
+      height: $uploader-picture-height;
+      border-radius: $uploader-picture-border-radius;
+
+      i {
+        color: $gray1;
+      }
+
+      .tips {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        font-size: 12px;
+        color: $white;
+        text-align: center;
+        box-sizing: border-box;
+        height: $uploader-preview-tips-height;
+        line-height: $uploader-preview-tips-height;
+        border-radius: $uploader-picture-border-radius;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        padding: $uploader-preview-tips-padding;
+        background: $uploader-preview-tips-background;
+        @include oneline-ellipsis();
+      }
+
+      &__c {
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: 6px;
+      }
+
+      &__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();
+        }
+      }
+    }
+  }
+}

package/dist/packages/video/video.scss

@@ -0,0 +1,18 @@
+.nut-video {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  &-player {
+    width: 100%;
+    background: #000;
+    &:focus {
+      outline: none;
+    }
+  }
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
+}

package/dist/packages/virtuallist/virtuallist.scss

@@ -0,0 +1,87 @@
+.nut-theme-dark {
+  .nut-virtualList-demo-box {
+    li {
+      background-color: $dark5;
+      color: $dark1;
+    }
+    .nut-vertical-items li {
+      box-shadow: 0 1px 6px 0 $dark5;
+    }
+  }
+}
+
+.nut-horizontal-items {
+  float: left;
+  li {
+    display: block;
+    float: left;
+    background: $background-color3;
+    padding: 10px;
+    margin-right: 20px;
+  }
+  &:after {
+    content: '';
+    display: block;
+    visibility: hidden;
+    clear: both;
+  }
+}
+.nut-vertical-items {
+  li {
+    display: block;
+    background: $background-color3;
+    border-radius: 7px;
+    box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
+    margin-top: 20px;
+    padding: 14px 15px;
+    font-size: 13px;
+    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 {
+        width: 0px;
+        height: 0px;
+      }
+    }
+  }
+}
+
+.nut-virtuallist {
+  width: 100%;
+  overflow: scroll;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+  &-phantom {
+    position: absolute;
+    left: 0;
+    top: 0;
+    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

@@ -0,0 +1,13 @@
+.nut-watermark {
+  position: absolute;
+  z-index: $watermark-z-index;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+  &-full-page {
+    position: fixed;
+  }
+}