@nutui/nutui-react 2.3.8 → 2.3.9

package/dist/packages/tabs/tabs.scss

@@ -132,6 +132,7 @@
   &-card {
     padding: 0;
     background-color: $color-default-light;
+
     .nut-tabs-titles-item {
       margin: 0;
 
@@ -190,6 +191,32 @@
   }
 }
 
+[dir='rtl'] .nut-tabs-titles,
+.nut-rtl .nut-tabs-titles {
+  &-item {
+    &-smile,
+    &-line {
+      left: auto;
+      right: 50%;
+      transform: translate(50%, 0);
+    }
+
+    &:first-child {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &-divider {
+    .nut-tabs-titles-item {
+      &::after {
+        right: auto;
+        left: 0;
+      }
+    }
+  }
+}
+
 .nut-tabs-horizontal {
   flex-direction: column;
   position: relative;
@@ -248,6 +275,7 @@
       height: 0;
       transform: translate(0, -50%);
       transition: height 0.3s ease;
+
       &-vertical {
         top: 50%;
       }
@@ -357,6 +385,49 @@
   }
 }
 
+[dir='rtl'] .nut-tabs-vertical,
+.nut-rtl .nut-tabs-vertical {
+  .nut-tabs-titles {
+    &-line {
+      .nut-tabs-titles-item {
+        padding-left: 0;
+        padding-right: 14px;
+      }
+    }
+  }
+
+  .nut-tabs-titles-item {
+    &-active {
+      .nut-tabs-titles-item-line {
+        left: auto;
+        right: 10px;
+      }
+
+      .nut-tabs-titles-item-smile {
+        left: -12px;
+        right: auto;
+        transform: rotate(-320deg);
+      }
+    }
+  }
+
+  .nut-tabs-horizontal {
+    .nut-tabs-titles-item-active {
+      .nut-tabs-titles-item-line {
+        left: auto;
+        right: 50%;
+        transform: translate(50%, 0);
+      }
+
+      .nut-tabs-titles-item-smile {
+        right: 50%;
+        left: auto;
+        transform: translate(50%, 0) rotate(0deg);
+      }
+    }
+  }
+}
+
 .nut-tabs-content {
   &-wrap {
     overflow: hidden;

package/dist/packages/tag/tag.scss

@@ -70,3 +70,11 @@
     justify-content: center;
   }
 }
+
+[dir='rtl'] .nut-tag,
+.nut-rtl .nut-tag {
+  .nut-icon {
+    margin-left: 0;
+    margin-right: 4px;
+  }
+}

package/dist/packages/textarea/textarea.scss

@@ -51,3 +51,20 @@
     left: -999999px;
   }
 }
+
+[dir='rtl'] .nut-textarea,
+.nut-rtl .nut-textarea {
+  &-limit {
+    right: auto;
+    left: 15px;
+  }
+
+  &-textarea {
+    text-align: right;
+  }
+
+  .cpoyText {
+    left: auto;
+    right: -999999px;
+  }
+}

package/dist/packages/timedetail/timedetail.scss

@@ -23,3 +23,8 @@
     }
   }
 }
+
+[dir='rtl'] .nut-timedetail,
+.nut-rtl .nut-timedetail {
+  padding: 0 12px 50px 0;
+}

package/dist/packages/timeselect/timeselect.scss

@@ -33,3 +33,8 @@
     font-weight: $font-weight-bold;
   }
 }
+
+[dir='rtl'] .nut-timepannel,
+.nut-rtl .nut-timepannel {
+  text-align: right;
+}

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;