@nutui/nutui-react 1.4.7 → 1.4.8

package/dist/packages/badge/badge.scss

@@ -6,41 +6,47 @@
     }
   }
 }
+
 .nut-badge {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 40px;
   margin-right: 40px;
+
   .slot-icons {
     position: absolute;
     background: $badge-background-color;
-    border-radius: 7px;
     top: -20%;
     right: -20%;
     padding: $badge-padding;
     text-align: center;
+    border: $badge-border;
     border-radius: $badge-border-radius;
     z-index: $badge-z-index;
   }
+
   .sup {
     position: absolute;
     background: $badge-background-color;
-    border-radius: 7px;
+    color: $badge-default-background-color;
     padding: $badge-padding;
-    text-align: center;
-    border-radius: $badge-border-radius;
     font-size: $badge-font-size;
     font-weight: normal;
-    color: $badge-default-background-color;
+    text-align: center;
     line-height: 16px;
+    border: $badge-border;
+    border-radius: $badge-border-radius;
   }
+
   .nut-badge__content {
     transform: $badge-content-transform;
   }
+
   .is-dot {
     width: $badge-dot-width;
     height: $badge-dot-height;
+    border: $badge-border;
     border-radius: $badge-dot-border-radius;
     padding: $badge-dot-padding;
   }

package/dist/packages/barrage/barrage.scss

@@ -44,9 +44,9 @@
       transform: translateX(100%);
     }
     to {
-      transform: translateX(-250%);
+      // transform: translateX(-250%);
       // transform: translateX(-180%);
-      // transform: translateX(var(--move-distance));
+      transform: translateX(var(--move-distance));
     }
   }
   @-webkit-keyframes moving {
@@ -54,7 +54,7 @@
       -webkit-transform: translateX(100%);
     }
     to {
-      transform: translateX(-250%);
+      transform: translateX(var(--move-distance));
     }
   }
 }

package/dist/packages/button/button.scss

@@ -153,6 +153,7 @@
   }
 
   &--plain {
+    color: $button-plain-color;
     background: $button-plain-background-color;
 
     &.nut-button--primary {

package/dist/packages/cascader/cascader.scss

@@ -9,13 +9,16 @@
     .nut-tabs__titles {
       background: $dark5;
     }
+
     &__title {
       color: $dark1;
       background-color: $dark5;
     }
+
     .nut-tabpane {
       background-color: $dark5;
     }
+
     .nut-cascader-item {
       color: $dark1;
     }
@@ -26,22 +29,24 @@
   width: 100%;
   font-size: $cascader-font-size;
   line-height: $cascader-line-height;
+
   &__title {
     background-color: $gray6;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: $cascader-title-padding;
-    text-align: center;
     font-weight: bold;
     line-height: $cascader-title-line-height;
     color: $gray1;
     font-size: $cascader-title-font-size;
   }
+
   .nut-tabs__titles {
     padding: $cascader-tabs-item-padding;
     background: $gray6;
   }
+
   .nut-tabs__titles-item {
     flex: initial;
     min-width: auto;
@@ -49,44 +54,53 @@
     padding: $cascader-tabs-item-padding;
     white-space: nowrap;
   }
+
   .nut-tabpane {
     padding: 0;
   }
+
   &-pane {
     display: block;
-    padding: 0;
-    margin: 0;
     width: 100%;
     padding-top: $cascader-pane-paddingTop;
     height: $cascader-pane-height;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
+
   &-item {
     display: flex;
     align-items: center;
+    justify-content: center;
+    height: $cascader-item-height;
     padding: $cascader-item-padding;
-    margin: 0;
-    cursor: pointer;
+    margin: $cascader-item-margin;
+    border-bottom: $cascader-item-border-bottom;
     font-size: $cascader-item-font-size;
     color: $cascader-item-color;
+    cursor: pointer;
+
     &.disabled {
       opacity: 0.6;
       cursor: not-allowed;
     }
+
     &.active {
       &:not(.disabled) {
         color: $cascader-item-active-color;
       }
+
       .nut-cascader-item__icon-check {
         visibility: visible;
         color: inherit;
       }
     }
   }
+
   &-item__title {
     flex: 1;
   }
+
   .nut-icon-checklist {
     margin-left: $cascader-icon-checklist-marginLeft;
     visibility: hidden;

package/dist/packages/checkboxgroup/checkboxgroup.scss

@@ -0,0 +1,33 @@
+.nut-checkboxgroup {
+  .nut-checkbox {
+    margin-bottom: 5px;
+
+    &__label {
+      margin-right: 5px;
+    }
+
+    &__button {
+      background-color: $gray4;
+    }
+  }
+
+  &--vertical {
+    .nut-checkbox {
+      &.nut-checkbox--reverse {
+        width: 100%;
+        justify-content: space-between;
+      }
+
+      &__label {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  &--horizontal {
+    .nut-checkbox {
+      display: inline-flex;
+      margin-right: 20px;
+    }
+  }
+}

package/dist/packages/collapseitem/collapseitem.scss

@@ -1,10 +1,13 @@
+
 .nut-theme-dark {
   .nut-collapse {
     &-item__header {
       background-color: $dark6;
+
       .nut-collapse-item__title {
         color: $dark1;
       }
+
       .nut-collapse-item__icon-box {
         .nut-collapse-item__icon {
           i {
@@ -12,17 +15,21 @@
           }
         }
       }
+
       .nut-collapse-item__sub-title {
         color: $dark2;
       }
+
       &::after {
         border-bottom: 1px solid $dark4;
       }
     }
+
     .nut-collapse-item__header--disabled {
       .nut-collapse-item__title {
         color: $dark2;
       }
+
       .nut-collapse-item__icon-box {
         .nut-collapse-item__icon {
           i {
@@ -31,9 +38,11 @@
         }
       }
     }
+
     &-item__content {
       background-color: $dark6;
       color: $dark1;
+
       &-text {
         color: $dark1;
       }
@@ -47,11 +56,12 @@
     display: flex;
     width: 100%;
     overflow: hidden;
-    padding: 13px 0px 13px 26px;
-    font-size: 14px;
-    line-height: 24px;
+    padding: $collapse-item-padding;
+    font-size: $collapse-item-font-size;
+    line-height: $collapse-item-line-height;
     background-color: $background-color3;
     box-sizing: border-box;
+
     &::after {
       position: absolute;
       box-sizing: border-box;
@@ -65,21 +75,27 @@
       transform: scaleY(0.5);
     }
   }
+
   &__title {
-    color: $title-color;
+    color: $collapse-item-color;
     display: flex;
     align-items: center;
+
     &-icon-left {
-      margin-right: 10px;
+      margin-right: $collapse-item-icon-margin-right;
       display: flex;
       align-items: center;
+      color: $collapse-item-icon-color;
     }
+
     &-icon-right {
-      margin-left: 10px;
+      margin-left: $collapse-item-icon-margin-left;
       display: flex;
       align-items: center;
+      color: $collapse-item-icon-color;
     }
   }
+
   &__sub-title {
     flex: 1;
     display: flex;
@@ -88,18 +104,21 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: $title-color2;
+    color: $collapse-item-sub-title-color;
   }
+
   &__icon-box {
     display: flex;
     padding-right: 40px;
     position: relative;
+
     .nut-collapse-item__icon {
       i {
-        color: $title-color !important;
+        color: $collapse-item-icon-color;
       }
     }
   }
+
   &__icon {
     display: flex;
     align-items: center;
@@ -110,28 +129,33 @@
     transform-origin: center;
     transition: transform 0.3s;
   }
+
   &__header--disabled {
-    color: #c2c2c2;
+    color: $collapse-item-disabled-color;
+
     .nut-collapse-item__title {
-      color: $disable-color;
+      color: $collapse-item-disabled-color;
     }
+
     .nut-collapse-item__icon {
       i {
-        color: $disable-color !important;
+        color: $collapse-item-disabled-color !important;
       }
     }
   }
+
   &__content {
     overflow: hidden;
     display: block;
-    color: #666666;
-    font-size: 14px;
-    line-height: 1.5;
-    background-color: $background-color3;
+    color: $collapse-wrapper-content-color;
+    font-size: $collapse-wrapper-content-font-size;
+    line-height: $collapse-wrapper-content-line-height;
+    background-color: $collapse-wrapper-content-background-color;
     transition: all 0.3s linear;
+
     &-text {
-      color: $title-color;
-      padding: 12px 26px;
+      color: $collapse-wrapper-content-color;
+      padding: $collapse-wrapper-content-padding;
     }
   }
 }

package/dist/packages/form/form.scss

@@ -2,17 +2,20 @@
   text-align: right;
   font-size: 14px;
   padding-right: 24px;
+  white-space: nowrap;
 }
 
 .form-layout-left .nut-form-item__label {
   text-align: left;
   font-size: 14px;
   padding-right: 24px;
+  white-space: nowrap;
 }
 
 .form-layout-top .nut-form-item {
   flex-direction: column;
   align-items: flex-start;
+  white-space: nowrap;
 }
 
 .form-layout-top .nut-form-item__label {

package/dist/packages/inputnumber/inputnumber.scss

@@ -1,17 +1,21 @@
+
 .nut-theme-dark {
   .nut-inputnumber {
     &__icon {
       color: $dark1;
+
       &--disabled {
         color: $dark2;
       }
     }
+
     input,
     &__text--readonly {
       background-color: $dark4;
       color: $dark1;
       border: 1px solid $dark2;
     }
+
     &--disabled {
       input {
         color: $dark3 !important;
@@ -24,6 +28,17 @@
   display: $inputnumber-display;
   align-items: center;
 
+  .nut-input-minus,
+  .nut-input-add {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: $inputnumber-button-width;
+    height: $inputnumber-button-height;
+    background-color: $inputnumber-button-background-color;
+    border-radius: $inputnumber-button-border-radius;
+  }
+
   &--disabled {
     input {
       color: $inputnumber-icon-void-color !important;
@@ -34,6 +49,7 @@
     color: $inputnumber-icon-color;
     font-size: $inputnumber-icon-size;
     cursor: pointer;
+
     &--disabled {
       color: $inputnumber-icon-disabled-color;
       cursor: not-allowed;
@@ -44,7 +60,7 @@
   .nut-number-input,
   &__text--readonly {
     width: $inputnumber-input-width;
-    height: 100%;
+    height: $inputnumber-input-height;
     text-align: center;
     outline: none;
     border: $inputnumber-input-border;
@@ -53,6 +69,7 @@
     background-color: $inputnumber-input-background-color;
     border-radius: $inputnumber-input-border-radius;
   }
+
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button,
   .nut-number-input::-webkit-outer-spin-button,

package/dist/packages/popover/popover.scss

@@ -19,18 +19,79 @@
 
   .popover-arrow {
     position: absolute;
+    z-index: -1;
     width: 0;
     height: 0;
     border: 8px solid transparent;
   }
 
-  // top
+  .popover-content {
+    z-index: 12;
+    background: $popover-white-background-color;
+    border-radius: $popover-border-radius;
+    opacity: 1;
+    font-size: $popover-font-size;
+    font-weight: normal;
+    color: $popover-primary-text-color;
+    position: absolute;
+    box-shadow: 0 2px 12px #3232331f;
+    opacity: 0;
+    transition: opacity 0.1s;
+
+    &.popover-content-show {
+      opacity: 1;
+    }
+
+    .popover-menu-item {
+      position: relative;
+      padding: 0 8px;
+      display: flex;
+      align-items: center;
+      height: $popover-menu-item-height;
+
+      .popover-menu-item-name {
+        margin: $popover-menu-item-name-margin;
+        width: 100%;
+      }
+
+      &:first-child {
+        border-radius: $popover-border-radius $popover-border-radius 0 0;
+      }
+
+      &:last-child {
+        border-bottom: none;
+        border-radius: 0 0 $popover-border-radius $popover-border-radius;
+
+        &::after {
+          height: 0;
+        }
+      }
+
+      &:hover {
+        cursor: pointer;
+        color: $popover-menu-item-hover-text-color;
+        background-color: $popover-menu-item-hover-background-color;
+      }
+
+      &::after {
+        position: absolute;
+        left: $popover-menu-item-border-left;
+        bottom: $popover-menu-item-border-bottom;
+        content: ' ';
+        display: inline-block;
+        width: $popover-menu-item-border-width;
+        height: $popover-menu-item-border-height;
+        background-color: $popover-border-bottom-color;
+      }
+    }
+  }
 
+  // top
   .popover-arrow-top {
     bottom: 0;
     border-top-color: $popover-white-background-color;
     border-bottom-width: 0;
-    margin-bottom: -8px;
+    margin-bottom: -7px;
   }
 
   .popover-content--top {
@@ -108,7 +169,7 @@
     top: 0px;
     border-bottom-color: $popover-white-background-color;
     border-top-width: 0;
-    margin-top: -8px;
+    margin-top: -7px;
   }
 
   .popover-arrow--bottom {
@@ -172,51 +233,15 @@
     transform: translateY(0%);
   }
 
-  .popover-content {
-    z-index: 12;
-    background: $popover-white-background-color;
-    border-radius: 5px;
-    opacity: 1;
-    font-size: 14px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: $popover-primary-text-color;
-    position: absolute;
-    box-shadow: 0 2px 12px #3232331f;
-    opacity: 0;
-    transition: opacity 0.1s;
-
-    &.popover-content-show {
-      opacity: 1;
-    }
-
-    .popover-menu-item {
-      display: flex;
-      align-items: center;
-      padding-bottom: 8px;
-      margin: 8px;
-      border-bottom: 1px solid $popover-border-bottom-color;
-
-      &:first-child {
-        margin-top: 15px;
-      }
-
-      &:last-child {
-        margin-bottom: 2px;
-        border-bottom: none;
-      }
-
-      .popover-menu-item-name {
-        margin-right: 12px;
-        margin-left: 8px;
-        width: 100%;
-      }
-    }
-  }
-
-  .disabled {
+  .popover-menu-item.disabled {
     color: $popover-disable-color;
     cursor: not-allowed;
+
+    &:hover {
+      cursor: not-allowed;
+      color: $popover-disable-color;
+      background-color: $popover-white-background-color;
+    }
   }
 }
 

package/dist/packages/radiogroup/radiogroup.scss

@@ -5,24 +5,29 @@
         &__label {
           margin-right: 5px;
         }
+
         &__button {
           background-color: $dark4;
           border: 1px solid $dark6;
         }
+
         &__button--active {
           border-color: $radio-label-button-border-color;
         }
       }
     }
+
     &--horizontal {
       .nut-radio {
         &__label {
           margin-right: 5px;
         }
+
         &__button {
           background-color: $dark4;
           border: 1px solid $dark6;
         }
+
         &__button--active {
           border-color: $radio-label-button-border-color;
         }
@@ -30,10 +35,8 @@
     }
   }
 }
-.nut-radiogroup {
-  display: flex;
-  align-items: flex-start;
 
+.nut-radiogroup {
   .nut-radio {
     margin-bottom: 5px;
 
@@ -47,8 +50,6 @@
   }
 
   &--vertical {
-    flex-direction: column;
-
     .nut-radio {
       &.nut-radio--reverse {
         width: 100%;
@@ -58,14 +59,17 @@
       &__label {
         margin-right: 5px;
       }
+
       &__button {
         border: 1px solid $gray6;
       }
+
       &__button--active {
         border-color: $radio-label-button-border-color;
       }
     }
   }
+
   &--horizontal {
     .nut-radio {
       display: inline-flex;
@@ -76,9 +80,6 @@
           margin: 0 6px;
         }
       }
-      &--button {
-        // ...
-      }
     }
   }
 }