@nutui/nutui-react 2.3.9 → 2.3.11

package/dist/packages/animate/animate.scss

@@ -304,30 +304,3 @@
     animation-iteration-count: infinite;
   }
 }
-
-[dir='rtl'] .nut-animate,
-.nut-rtl .nut-animate {
-  .nut-animate-twinkle {
-    &::after,
-    &::before {
-      border-radius: calc(60 / 2) * 1px;
-      right: auto;
-      left: 50%;
-      margin-right: 0;
-      margin-left: calc(-60 / 2) * 1px;
-    }
-  }
-
-  .nut-animate-flicker {
-    &::after {
-      left: auto;
-      right: 0;
-      background-image: linear-gradient(
-        -106deg,
-        rgba(232, 224, 255, 0) 24%,
-        #e8e0ff 91%
-      );
-      transform: skewX(20deg);
-    }
-  }
-}

package/dist/packages/audio/audio.scss

@@ -13,11 +13,6 @@
       background: $white;
       border-radius: 50%;
       box-shadow: 0 0 8px $color-text-disabled;
-
-      .nut-icon-am-rotate {
-        transform: rotate((360));
-        animation-timing-function: ease-in-out;
-      }
     }
 
     .nut-audio-icon-stop {

package/dist/packages/avatarcropper/avatarcropper.scss

@@ -119,7 +119,6 @@
     left: auto;
     right: 0;
   }
-
   &-popup {
     left: auto;
     right: 0;
@@ -138,7 +137,6 @@
     &-highlight {
       left: auto;
       right: 0;
-
       .highlight {
         left: auto;
         right: 50%;

package/dist/packages/badge/badge.scss

@@ -65,4 +65,11 @@
     right: auto;
     left: -15%;
   }
+
+  &-content {
+    transform: var(
+      --nutui-badge-content-transform,
+      translateY(-50%) translateX(-100%)
+    );
+  }
 }

package/dist/packages/barrage/barrage.scss

@@ -50,7 +50,7 @@
     }
 
     to {
-      transform: translateX(var(--move-distance));
+      -webkit-transform: translateX(var(--move-distance));
     }
   }
 }
@@ -59,15 +59,34 @@
 .nut-rtl .nut-barrage {
   left: auto;
   right: 0;
-
   .barrage-item {
-    right: auto;
-    left: 0;
     transform: translateX(-100%);
     background: linear-gradient(
       to left,
       var(--nutui-black-3),
       var(--nutui-black-1)
     );
+
+    &.move {
+      animation-name: moving-rtl;
+    }
+  }
+  @keyframes moving-rtl {
+    from {
+      transform: translateX(var(--move-distance));
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @-webkit-keyframes moving-rtl {
+    from {
+      transform: translateX(var(--move-distance));
+    }
+
+    to {
+      transform: translateX(100%);
+    }
   }
 }

package/dist/packages/button/button.scss

@@ -338,7 +338,6 @@
       margin-left: $button-text-icon-margin;
     }
   }
-
   &::before {
     left: auto;
     right: 50%;

package/dist/packages/calendar/calendar.scss

@@ -223,6 +223,10 @@
   }
 }
 
+.nut-calendar-popup .nut-popup-title-right {
+  top: 7px !important;
+}
+
 [dir='rtl'] .nut-calendar,
 .nut-rtl .nut-calendar {
   &-day {
@@ -245,7 +249,3 @@
     }
   }
 }
-
-.nut-calendar-popup .nut-popup-title-right {
-  top: 7px !important;
-}

package/dist/packages/calendarcard/calendarcard.scss

@@ -126,7 +126,6 @@
       }
     }
   }
-
   &-day {
     &.start {
       border-top-left-radius: 0;

package/dist/packages/cascader/cascader.scss

@@ -68,7 +68,6 @@
     visibility: hidden;
   }
 }
-
 [dir='rtl'] .nut-cascader,
 .nut-rtl .nut-cascader {
   .nut-icon-checklist {

package/dist/packages/checkbox/checkbox.scss

@@ -140,13 +140,11 @@
       left: 0;
       border-right: 10px solid transparent;
       border-left: 10px solid $color-primary;
-
       &-checked {
         left: auto;
         right: 50%;
         transform: translate(3px, -3px);
       }
-
       .nut-icon {
         &:before {
           margin-left: 0;

package/dist/packages/checkboxgroup/checkboxgroup.scss

@@ -1,7 +1,5 @@
 .nut-checkboxgroup {
   .nut-checkbox {
-    margin-bottom: 5px;
-
     &-button {
       background-color: $color-background;
     }
@@ -9,6 +7,7 @@
 
   &-vertical {
     .nut-checkbox {
+      margin-bottom: 5px;
       &.nut-checkbox-reverse {
         width: 100%;
         justify-content: space-between;
@@ -33,7 +32,6 @@
     }
   }
 }
-
 [dir='rtl'] .nut-checkboxgroup,
 .nut-rtl .nut-checkboxgroup {
   .nut-checkbox {

package/dist/packages/col/col.scss

@@ -4,7 +4,7 @@
   word-break: break-all;
   margin-bottom: $col-default-margin-bottom;
 
-  &-gutter {
+  &.nut-col-gutter {
     &:last-child {
       padding-right: 0 !important;
     }
@@ -19,7 +19,7 @@
 .nut-rtl .nut-col {
   float: right;
 
-  &-gutter {
+  &.nut-col-gutter {
     &:last-child {
       padding-right: 0 !important;
       padding-left: 0 !important;

package/dist/packages/collapseitem/collapseitem.scss

@@ -7,8 +7,8 @@
     content: ' ';
     pointer-events: none;
     right: 16px;
-    bottom: 0;
     left: 16px;
+    bottom: 0;
     border-bottom: $collapse-item-border-bottom;
     -webkit-transform: scaleY(0.5);
     transform: scaleY(0.5);
@@ -35,8 +35,8 @@
       content: ' ';
       pointer-events: none;
       right: 16px;
-      bottom: 0;
       left: 16px;
+      bottom: 0;
       border-bottom: $collapse-item-header-border-bottom;
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
@@ -105,7 +105,6 @@
     }
   }
 }
-
 [dir='rtl'] .nut-collapse-item,
 .nut-rtl .nut-collapse-item {
   &-icon-box {

package/dist/packages/dialog/dialog.scss

@@ -148,4 +148,8 @@
       margin-left: $dialog-footer-cancel-margin-right;
     }
   }
+
+  &-content {
+    text-align: var(--nutui-dialog-content-text-align, right);
+  }
 }

package/dist/packages/divider/divider.scss

@@ -52,10 +52,10 @@
     position: relative;
     top: $divider-vertical-top;
     display: inline-block;
+    width: auto;
     height: $divider-vertical-height;
     border-left: 1px solid $divider-border-color;
     margin: $divider-vertical-margin;
-    width: auto;
   }
 }
 

package/dist/packages/fixednav/fixednav.scss

@@ -148,7 +148,6 @@
 .nut-rtl .nut-fixednav {
   right: auto;
   left: 0;
-
   &.active {
     .nut-icon {
       transform: rotate(-180deg);
@@ -159,7 +158,6 @@
     right: auto;
     left: 0;
     border-radius: 0px 45px 45px 0px;
-
     .nut-icon {
       margin-right: 0px;
       margin-left: 5px;

package/dist/packages/form/form.scss

@@ -1,21 +1,14 @@
 
 .form-layout-right .nut-form-item-label {
-  text-align: right;
+  text-align: end;
   font-size: 14px;
   padding-right: 24px;
   white-space: nowrap;
 }
 
-[dir='rtl'] .form-layout-right .nut-form-item-label,
-.nut-rtl .form-layout-right .nut-form-item-label {
-  text-align: left;
-  padding-right: 0;
-  padding-left: 24px;
-}
-
 .form-layout-left .nut-form-item-label {
   position: relative;
-  text-align: left;
+  text-align: start;
   font-size: 14px;
   padding-left: 12px;
   white-space: nowrap;
@@ -28,18 +21,6 @@
   }
 }
 
-[dir='rtl'] .form-layout-left .nut-form-item-label,
-.nut-rtl .form-layout-left .nut-form-item-label {
-  text-align: right;
-  padding-left: 0;
-  padding-right: 12px;
-
-  .required {
-    left: auto;
-    right: 0.1em;
-  }
-}
-
 .form-layout-top .nut-form-item {
   flex-direction: column;
   align-items: flex-start;
@@ -53,15 +34,32 @@
   padding-right: 24px;
 }
 
-[dir='rtl'] .form-layout-top .nut-form-item-label,
-.nut-rtl .form-layout-top .nut-form-item-label {
+.form-layout-top .nut-form-item-body {
+  margin-left: 0;
+  width: 100%;
+}
+
+[dir='rtl'] .form-layout-right .nut-form-item-label,
+.nut-rtl .form-layout-right .nut-form-item-label {
   padding-right: 0;
   padding-left: 24px;
 }
 
-.form-layout-top .nut-form-item-body {
-  margin-left: 0;
-  width: 100%;
+[dir='rtl'] .form-layout-left .nut-form-item-label,
+.nut-rtl .form-layout-left .nut-form-item-label {
+  padding-left: 0;
+  padding-right: 12px;
+
+  .required {
+    left: auto;
+    right: 0.1em;
+  }
+}
+
+[dir='rtl'] .form-layout-top .nut-form-item-label,
+.nut-rtl .form-layout-top .nut-form-item-label {
+  padding-right: 0;
+  padding-left: 24px;
 }
 
 [dir='rtl'] .form-layout-top .nut-form-item-body,

package/dist/packages/formitem/formitem.scss

@@ -75,7 +75,6 @@
     }
   }
 }
-
 [dir='rtl'] .nut-form-item,
 .nut-rtl .nut-form-item {
   &-label {

package/dist/packages/grid/grid.scss

@@ -13,7 +13,7 @@
 [dir='rtl'] .nut-grid,
 .nut-rtl .nut-grid {
   &-border {
-    border-left-width: medium;
+    border-left-width: 0;
     border-right-width: 1px;
   }
 }

package/dist/packages/griditem/griditem.scss

@@ -93,38 +93,40 @@
   }
 }
 
-[dir='rtl'] .nut-grid-item,
-.nut-rtl .nut-grid-item {
-  $block: &;
-
-  &-content {
-    &-border {
-      border-right-width: medium;
-      border-left-width: 1px;
-    }
+[dir='rtl'] .nut-grid,
+.nut-rtl .nut-grid {
+  &-item {
+    $block: &;
+
+    &-content {
+      &-border {
+        border-right-width: 0;
+        border-left-width: 1px;
+      }
 
-    &-surround {
-      border-left-width: medium;
-      border-right-width: 1px;
-    }
+      &-surround {
+        border-left-width: 0;
+        border-right-width: 1px;
+      }
 
-    &-horizontal {
-      #{$block}-text {
-        margin: 0 $grid-item-text-margin 0 0;
+      &-horizontal {
+        .nut-grid-item-text {
+          margin: 0 $grid-item-text-margin 0 0;
+        }
       }
-    }
 
-    &-horizontal#{&}-reverse {
-      #{$block}-text {
-        margin: 0 0 0 $grid-item-text-margin;
+      &-horizontal.nut-grid-item-content-reverse {
+        .nut-grid-item-text {
+          margin: 0 0 0 $grid-item-text-margin;
+        }
       }
-    }
 
-    &-clickable {
-      &::before {
-        left: auto;
-        right: 50%;
-        transform: translate(50%, -50%);
+      &-clickable {
+        &::before {
+          left: auto;
+          right: 50%;
+          transform: translate(50%, -50%);
+        }
       }
     }
   }

package/dist/packages/imagepreview/imagepreview.scss

@@ -91,7 +91,6 @@
       transform: rotateZ(-180deg);
     }
   }
-
   &-close {
     &.top-right {
       right: auto;

package/dist/packages/indicator/indicator.scss

@@ -52,17 +52,16 @@
     }
   }
 }
-
 [dir='rtl'] .nut-indicator,
 .nut-rtl .nut-indicator {
   &-dot {
     &:first-child {
-      margin-left: 0;
+      margin-left: $indicator-dot-margin;
       margin-right: 0px;
     }
 
     &:last-child {
-      margin-right: 0;
+      margin-right: $indicator-dot-margin;
       margin-left: 0px;
     }
   }

package/dist/packages/menu/menu.scss

@@ -56,10 +56,3 @@
     transform: rotate(180deg);
   }
 }
-
-[dir='rtl'] .nut-menu-title,
-.nut-rtl .nut-menu-title {
-  &.active .nut-menu-title-icon {
-    transform: rotate(-180deg);
-  }
-}

package/dist/packages/menuitem/menuitem.scss

@@ -47,16 +47,6 @@
   }
 }
 
-[dir='rtl'] .nut-menu-container,
-.nut-rtl .nut-menu-container {
-  &-item {
-    .nut-icon {
-      margin-right: 0;
-      margin-left: $menu-item-icon-margin;
-    }
-  }
-}
-
 .overlay-fade-enter-active.nut-menu-container-overlay {
   top: auto;
   z-index: $menu-container-z-index;
@@ -116,3 +106,17 @@
   opacity: 0;
   transition: all 100ms;
 }
+
+[dir='rtl'] .nut-menu-container,
+.nut-rtl .nut-menu-container {
+  &-item {
+    .nut-icon {
+      margin-right: 0;
+      margin-left: $menu-item-icon-margin;
+    }
+  }
+
+  .nut-icon {
+    transform: rotateY(180deg);
+  }
+}

package/dist/packages/navbar/navbar.scss

@@ -99,7 +99,7 @@
   }
 
   &-title-align-left {
-    padding: 0 14px;
+    padding-left: 14px;
 
     .nut-navbar-left {
       position: static;
@@ -144,9 +144,8 @@
     left: auto;
     right: 0;
     .nut-icon-ArrowLeft {
-      transform: rotate(180deg);
+      transform: rotateY(180deg);
     }
-
     &-back {
       margin-right: 0;
       margin-left: 10px;
@@ -156,8 +155,7 @@
   &-right {
     right: auto;
     left: 0;
-
-    .nut-icon-ArrowLeft {
+    .nut-icon {
       margin-left: 0;
       margin-right: 12px;
 

package/dist/packages/noticebar/noticebar.scss

@@ -160,6 +160,26 @@
       margin-left: 0;
       margin-right: $noticebar-icon-gap;
     }
+
+    .play {
+      animation: nut-notice-bar-play-rtl linear both running;
+    }
+
+    .play-infinite {
+      animation: nut-notice-bar-play-infinite-rtl linear infinite both running;
+    }
+
+    @keyframes nut-notice-bar-play-rtl {
+      to {
+        transform: translate3d(100%, 0, 0);
+      }
+    }
+
+    @keyframes nut-notice-bar-play-infinite-rtl {
+      to {
+        transform: translate3d(100%, 0, 0);
+      }
+    }
   }
 
   .nut-noticebar-vertical {

package/dist/packages/numberkeyboard/numberkeyboard.scss

@@ -100,28 +100,35 @@
   }
 }
 
-[dir='rtl'] .nut-numberkeyboard,
-.nut-rtl .nut-numberkeyboard {
-  &-header {
-    &-close {
-      right: auto;
-      left: 0;
+[dir='rtl'] .nut-popup,
+.nut-rtl .nut-popup {
+  .nut-numberkeyboard {
+    &-header {
+      &-close {
+        right: auto;
+        left: 0;
+      }
     }
-  }
-
-  &-body {
-    padding: 6px 6px 0 0;
 
-    &-wrapper {
-      padding: 0 0 6px 6px;
+    &-body {
+      padding: 6px 6px 0 0;
+      &-wrapper {
+        padding: 0 0 6px 6px;
+        .delete {
+          transform: rotate(-180deg);
+        }
+      }
     }
-  }
 
-  &-sidebar {
-    .nut-numberkeyboard-body-wrapper {
-      .key {
-        left: 6px;
-        right: 0;
+    &-sidebar {
+      .nut-numberkeyboard-body-wrapper {
+        .key {
+          left: 6px;
+          right: 0;
+          &.delete {
+            transform: rotate(-180deg);
+          }
+        }
       }
     }
   }

package/dist/packages/pagination/pagination.scss

@@ -90,14 +90,12 @@
     border-right: none;
     border-left: none;
   }
-
   &-prev,
   &-next {
     .nut-icon {
       transform: rotate(180deg);
     }
   }
-
   .simple-border {
     border-right: none;
     border-left: $pagination-item-border-width solid

package/dist/packages/picker/picker.scss

@@ -158,3 +158,12 @@
     height: 1px;
   }
 }
+
+[dir='rtl'] .nut-picker-mask,
+.nut-rtl .nut-picker-mask {
+  background-image: var(
+    --picker-mask-background,
+    linear-gradient(-180deg, var(--nutui-white-12), var(--nutui-white-7)),
+    linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7))
+  );
+}