@nutui/nutui-react-taro 2.3.12 → 2.4.1-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 {
@@ -57,6 +59,14 @@
     border-radius: $badge-dot-width;
     padding: 0;
   }
+
+  &-outline {
+    .nut-badge-content {
+      background: $color-primary-text;
+      border: 1px solid $color-primary;
+      color: $color-primary;
+    }
+  }
 }
 
 [dir='rtl'] .nut-badge,

package/dist/packages/button/button.scss

@@ -13,7 +13,7 @@
   font-weight: $button-default-font-weight;
   text-align: center;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: $button-transition;
   -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
@@ -59,6 +59,11 @@
     align-items: center;
     justify-content: center;
     background: initial;
+    .nut-icon {
+      font-size: $button-default-font-size;
+      width: $button-default-font-size;
+      height: $button-default-font-size;
+    }
   }
 
   &-loading,
@@ -78,7 +83,7 @@
     border: $button-border-width solid $button-default-border-color;
 
     &.nut-button-disabled {
-      color: $color-text-help;
+      color: $button-default-disabled-color;
       background: transparent;
     }
 
@@ -86,7 +91,7 @@
       background: transparent;
 
       &.nut-button-disabled {
-        color: $color-text-help;
+        color: $button-default-disabled-color;
       }
     }
 
@@ -95,7 +100,7 @@
       background: transparent;
 
       &.nut-button-disabled {
-        color: $color-text-help;
+        color: $button-default-disabled-color;
         border-color: $button-default-disabled;
       }
     }
@@ -105,22 +110,54 @@
     padding: $button-normal-padding;
   }
 
+  &-xlarge {
+    height: $button-xlarge-height;
+    padding: $button-xlarge-padding;
+    font-size: $button-xlarge-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-xlarge-font-size;
+      width: $button-xlarge-font-size;
+      height: $button-xlarge-font-size;
+    }
+  }
+
   &-large {
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-large-font-size;
+      width: $button-large-font-size;
+      height: $button-large-font-size;
+    }
   }
 
   &-small {
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+
+    .nut-icon {
+      font-size: $button-small-font-size;
+      width: $button-small-font-size;
+      height: $button-small-font-size;
+    }
   }
 
   &-mini {
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
+
+    .nut-icon {
+      font-size: $button-mini-font-size;
+      width: $button-mini-font-size;
+      height: $button-mini-font-size;
+    }
   }
 
   &-primary {
@@ -290,7 +327,7 @@
     border: $button-border-width solid transparent;
 
     &.nut-button-disabled {
-      color: #ffffff;
+      color: $button-default-disabled-color;
       background: $button-default-disabled;
     }
   }
@@ -308,7 +345,6 @@
 
   &-disabled {
     cursor: not-allowed;
-    font-weight: 400;
     color: #ffffff;
     background: $button-default-disabled;
     border-color: $button-default-disabled;
@@ -321,6 +357,19 @@
 
   &-round {
     border-radius: $button-border-radius;
+
+    &.nut-button-xlarge,
+    &.nut-button-large {
+      border-radius: $button-large-border-radius;
+    }
+
+    &.nut-button-small {
+      border-radius: $button-small-border-radius;
+    }
+
+    &.nut-button-mini {
+      border-radius: $button-mini-border-radius;
+    }
   }
 
   &-square {

package/dist/packages/calendarcard/calendarcard.scss

@@ -61,22 +61,28 @@
       line-height: 12px;
     }
 
-    &.active,
+    &.weekend {
+      color: $calendar-choose-color;
+    }
+
+    &.active {
+      background-color: $calendar-active-background-color;
+      color: $color-primary-text;
+      border-radius: $calendar-day-active-border-radius;
+    }
+
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text !important;
-      border-radius: $calendar-day-active-border-radius;
+      color: $color-primary-text;
     }
 
     &.start {
-      border-radius: 0px;
       border-top-left-radius: $calendar-day-active-border-radius;
       border-bottom-left-radius: $calendar-day-active-border-radius;
     }
 
     &.end {
-      border-radius: 0px;
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;
     }
@@ -86,10 +92,6 @@
       color: $calendar-choose-color;
     }
 
-    &.weekend {
-      color: $calendar-choose-color;
-    }
-
     .nut-calendar-day-info {
       color: $color-primary-text;
     }
@@ -127,17 +129,17 @@
     }
   }
   &-day {
+    &.start,
+    &.end {
+      border-radius: 0;
+    }
     &.start {
-      border-top-left-radius: 0;
       border-top-right-radius: $calendar-day-active-border-radius;
-      border-bottom-left-radius: 0;
       border-bottom-right-radius: $calendar-day-active-border-radius;
     }
 
     &.end {
-      border-top-right-radius: 0;
       border-top-left-radius: $calendar-day-active-border-radius;
-      border-bottom-right-radius: 0;
       border-bottom-left-radius: $calendar-day-active-border-radius;
     }
   }

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/infiniteloading/infiniteloading.scss

@@ -47,6 +47,13 @@
       }
     }
   }
+  &-primary {
+    background-color: $color-primary;
+    .nut-infinite-bottom,
+    .nut-infinite-top {
+      color: $color-text-dark;
+    }
+  }
 }
 
 [dir='rtl'] .nut-infiniteloading,

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/pulltorefresh/pulltorefresh.scss

@@ -22,6 +22,19 @@
       }
     }
   }
+
+  &-primary {
+    background: $pulltorefresh-color-primary;
+    .nut-pulltorefresh-content {
+      color: $color-text-dark;
+    }
+
+    .nut-pulltorefresh-head {
+      &-content {
+        color: $color-text-dark;
+      }
+    }
+  }
 }
 
 [dir='rtl'] .nut-pulltorefresh,

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%;
     }
   }