@nutui/nutui-react 2.3.12-beta.0 → 2.4.0-beta.0

package/dist/packages/animatingnumbers/countup.scss

@@ -3,6 +3,7 @@
     display: inline-flex;
     height: $countup-height;
     overflow: hidden;
+    direction: ltr;
   }
 
   &-listitem {

package/dist/packages/badge/badge.scss

@@ -38,6 +38,8 @@
     border: $badge-border;
     border-radius: $badge-border-radius;
     min-width: $badge-min-width;
+    white-space: nowrap;
+    z-index: 1;
   }
 
   &-one {

package/dist/packages/checkbox/checkbox.scss

@@ -118,6 +118,23 @@
     color: $white;
     border: 1px solid $color-text-disabled;
   }
+
+  &-list-item {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: $checkbox-list-item-padding;
+    border-top: $checkbox-list-item-border;
+
+    .nut-checkbox-label {
+      flex: auto;
+    }
+
+    .nut-icon {
+      flex: none;
+    }
+  }
 }
 
 [dir='rtl'] .nut-checkbox,
@@ -140,11 +157,13 @@
       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

@@ -8,6 +8,7 @@
   &-vertical {
     .nut-checkbox {
       margin-bottom: 5px;
+
       &.nut-checkbox-reverse {
         width: 100%;
         justify-content: space-between;
@@ -31,7 +32,31 @@
       }
     }
   }
+
+  &-list {
+    width: 100%;
+    border-bottom: $checkbox-list-item-border;
+    border-top: $checkbox-list-item-border;
+    padding: $checkbox-list-padding;
+    background: $checkbox-list-background-color;
+
+    .nut-checkbox {
+      margin-bottom: 5px;
+
+      &:first-child {
+        .nut-checkbox-list-item {
+          border-top: none;
+        }
+      }
+
+      &.nut-checkbox-reverse {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
 }
+
 [dir='rtl'] .nut-checkboxgroup,
 .nut-rtl .nut-checkboxgroup {
   .nut-checkbox {

package/dist/packages/collapseitem/collapseitem.scss

@@ -62,7 +62,7 @@
 
   &-icon-box {
     display: flex;
-    padding-right: 40px;
+    width: 24px;
     position: relative;
     color: $color-text;
   }
@@ -107,11 +107,6 @@
 }
 [dir='rtl'] .nut-collapse-item,
 .nut-rtl .nut-collapse-item {
-  &-icon-box {
-    padding-right: 0;
-    padding-left: 40px;
-  }
-
   &-icon {
     left: auto;
     right: 5px;

package/dist/packages/dialog/dialog.scss

@@ -17,7 +17,6 @@
   &-outer {
     position: fixed;
     max-height: 100%;
-    overflow-y: auto;
     background-color: $white;
     transition:
       transform 0.2s,
@@ -52,6 +51,13 @@
       left: $dialog-close-left;
     }
 
+    &-bottom {
+      top: initial;
+      bottom: -56px;
+      left: 50%;
+      transform: translate(-50%);
+    }
+
     &:active {
       opacity: 0.7;
     }
@@ -77,6 +83,7 @@
     word-break: break-all;
     white-space: pre-wrap;
     text-align: $dialog-content-text-align;
+    overflow-y: auto;
   }
 
   &-footer {

package/dist/packages/noticebar/noticebar.scss

@@ -12,13 +12,18 @@
     color: $noticebar-color;
     border-radius: $noticebar-border-radius;
 
-    &-wrapable {
+    &-wrapable,
+    &-center {
       height: auto;
       padding: $noticebar-wrap-padding;
 
       .nut-noticebar-box-wrap {
         height: auto;
+      }
+    }
 
+    &-wrapable {
+      .nut-noticebar-box-wrap {
         .nut-noticebar-box-wrap-content {
           position: relative;
           white-space: normal;
@@ -27,6 +32,19 @@
       }
     }
 
+    &-center {
+      justify-content: center;
+
+      .nut-noticebar-box-wrap {
+        flex: initial;
+
+        .nut-noticebar-box-wrap-content {
+          position: relative;
+          display: initial;
+        }
+      }
+    }
+
     &-left-icon {
       display: flex;
       height: $noticebar-left-icon-width;

package/dist/packages/popover/popover.scss

@@ -218,6 +218,27 @@
   }
 }
 
+.nut-popover-dark {
+  background: $popover-text-color;
+  color: $popover-content-background-color;
+
+  .nut-popover-arrow {
+    border-bottom-color: $popover-text-color;
+  }
+
+  .nut-popover-content {
+    background: $popover-text-color !important;
+    color: $popover-content-background-color !important;
+    .nut-popover-menu-item {
+      border-bottom-color: $popover-content-background-color;
+      &:hover {
+        color: $popover-content-background-color;
+        background-color: $popover-text-color;
+      }
+    }
+  }
+}
+
 [dir='rtl'] .nut-popover,
 .nut-rtl .nut-popover {
   &-arrow {

package/dist/packages/swipe/swipe.scss

@@ -5,6 +5,7 @@
   background-color: $white;
 
   &-wrapper {
+    height: inherit;
     transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
     transition-property: transform;
 
@@ -14,6 +15,7 @@
 
     .nut-cell {
       margin: 0;
+      height: 100%;
     }
   }