@nutui/nutui-react 2.3.8-beta.0 → 2.3.9

package/dist/packages/toast/toast.scss

@@ -17,6 +17,7 @@
   text-align: center;
   pointer-events: none;
   z-index: 1300;
+
   &-overlay-default {
     --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
     --nutui-overlay-zIndex: 1300;
@@ -49,10 +50,12 @@
     border-radius: $toast-inner-border-radius;
     color: $toast-font-color;
     transform: translate(-50%, -50%);
+
     &.normal {
       word-break: normal;
       word-wrap: normal;
     }
+
     &.break-word {
       word-break: normal;
       word-wrap: break-word;
@@ -120,6 +123,18 @@
   }
 }
 
+[dir='rtl'] .nut-toast,
+.nut-rtl .nut-toast {
+  left: auto;
+  right: 0;
+
+  &-inner {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}
+
 .toast-fade-enter-active {
   transition: opacity 0.3s;
 }

package/dist/packages/tour/tour.scss

@@ -82,3 +82,26 @@
     background: transparent;
   }
 }
+
+[dir='rtl'] .nut-tour,
+.nut-rtl .nut-tour {
+  &-content {
+    &-top {
+      text-align: left;
+    }
+
+    &-bottom {
+      &-operate {
+        &-btn {
+          margin-left: 0;
+          margin-right: $tour-content-bottom-btn-margin-left;
+        }
+      }
+    }
+  }
+
+  &-masked {
+    left: auto;
+    right: 0;
+  }
+}

package/dist/packages/trendarrow/trendarrow.scss

@@ -21,3 +21,16 @@
     vertical-align: middle;
   }
 }
+
+[dir='rtl'] .nut-trendarrow,
+.nut-rtl .nut-trendarrow {
+  &-icon-before {
+    margin-right: 0;
+    margin-left: $trendarrow-icon-margin;
+  }
+
+  &-icon-after {
+    margin-left: 0;
+    margin-right: $trendarrow-icon-margin;
+  }
+}

package/dist/packages/uploader/uploader.scss

@@ -212,3 +212,39 @@
     }
   }
 }
+
+[dir='rtl'] .nut-uploader,
+.nut-rtl .nut-uploader {
+  &-input {
+    left: auto;
+    right: 0;
+  }
+
+  &-preview {
+    margin-right: 0;
+    margin-left: $uploader-preview-margin-right;
+
+    &-progress {
+      left: auto;
+      right: 0;
+    }
+
+    &.list {
+      margin-right: 0;
+      margin-left: 0px;
+    }
+
+    .close {
+      right: auto;
+      left: $uploader-preview-close-right;
+      transform: translate(-50%, -50%);
+    }
+
+    &-img {
+      .tips {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}

package/dist/packages/video/video.scss

@@ -3,13 +3,16 @@
   height: 100%;
   position: relative;
   display: flex;
+
   &-player {
     width: 100%;
     background: #000;
+
     &:focus {
       outline: none;
     }
   }
+
   video {
     width: 100%;
     height: 100%;

package/dist/packages/virtuallist/virtuallist.scss

@@ -18,6 +18,17 @@
   }
 }
 
+[dir='rtl'] .nut-horizontal-items,
+.nut-rtl .nut-horizontal-items {
+  float: right;
+
+  li {
+    float: right;
+    margin-right: 0;
+    margin-left: 20px;
+  }
+}
+
 .nut-vertical-items {
   li {
     display: block;