@nutui/nutui-react 2.3.10 → 2.3.11

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))
+  );
+}

package/dist/packages/popover/popover.scss

@@ -243,7 +243,6 @@
       margin-right: -8px;
     }
   }
-
   .nut-popover-content {
     .nut-popover-menu-item {
       &-name {
@@ -256,7 +255,6 @@
         left: $popover-menu-item-padding;
       }
     }
-
     &-top {
       .nut-popover-arrow-top {
         left: auto;
@@ -264,7 +262,6 @@
         transform: translateX(50%);
       }
     }
-
     &-top-end {
       right: auto;
       left: 0;
@@ -292,7 +289,6 @@
         transform: translateX(50%);
       }
     }
-
     &-bottom-end {
       right: auto;
 

package/dist/packages/popup/popup.scss

@@ -306,7 +306,9 @@
     &-right-exit-done,
     &-top-exit-done,
     &-bottom-exit-done {
-      display: none;
+      &.nut-popup {
+        display: none;
+      }
     }
   }
 
@@ -359,24 +361,6 @@
     right: 0;
   }
 
-  &-right {
-    right: auto;
-    left: 0;
-
-    &.nut-popup-round {
-      border-radius: 0 $popup-border-radius $popup-border-radius 0;
-    }
-  }
-
-  &-left {
-    left: auto;
-    right: 0;
-
-    &.nut-popup-round {
-      border-radius: $popup-border-radius 0 0 $popup-border-radius;
-    }
-  }
-
   &-top {
     left: auto;
     right: 0;

package/dist/packages/price/price.scss

@@ -1,4 +1,5 @@
 .nut-price {
+  direction: ltr;
   font-size: $font-size-large;
   display: inline;
   color: $color-primary;

package/dist/packages/radio/radio.scss

@@ -78,7 +78,6 @@
     border: 1px solid $color-text-disabled;
   }
 }
-
 [dir='rtl'] .nut-radio,
 .nut-rtl .nut-radio {
   &:last-child {

package/dist/packages/radiogroup/radiogroup.scss

@@ -1,6 +1,7 @@
 .nut-radiogroup {
   .nut-radio {
-    margin: $radiogroup-radio-margin;
+    margin-right: $radiogroup-radio-margin;
+    margin-bottom: $radiogroup-radio-margin-bottom;
 
     &-label {
       margin: $radiogroup-radio-label-margin;
@@ -50,3 +51,11 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
+[dir='rtl'] .nut-radiogroup,
+.nut-rtl .nut-radiogroup {
+  .nut-radio {
+    margin-left: $radiogroup-radio-margin;
+    margin-right: 0;
+  }
+}