@nutui/nutui-react 2.0.23 → 2.1.0-beta.0

package/dist/packages/calendar/calendar.scss

@@ -5,8 +5,8 @@
   flex-direction: column;
   flex: 1;
   font-size: $calendar-base-font-size;
-  background-color: $white;
-  color: $gray1;
+  background-color: $color-background-overlay;
+  color: $color-title;
   overflow: hidden;
   height: 100%;
 
@@ -38,9 +38,10 @@
   }
 
   &-title {
+    color: $color-title;
     font-size: $calendar-title-font-size;
     font-weight: $calendar-title-font-weight;
-    line-height: 44px;
+    line-height: 50px;
   }
 
   &-sub-title {
@@ -65,7 +66,7 @@
   &-week-item {
     &:first-of-type,
     &:last-of-type {
-      color: $calendar-day67-color;
+      color: $color-primary;
     }
   }
 
@@ -92,8 +93,8 @@
       top: -50px;
       left: 0;
       right: 0;
-      font-size: $font-size-1;
-      color: $text-color;
+      font-size: $font-size-small;
+      color: $color-text;
     }
   }
 
@@ -127,7 +128,7 @@
 
     &:nth-child(7n + 0),
     &:nth-child(7n + 1) {
-      color: $calendar-day67-color;
+      color: $color-primary;
     }
 
     &-info-curr {
@@ -159,8 +160,8 @@
     }
 
     &-active {
-      background-color: $calendar-active-background-color;
-      color: $primary-text-color !important;
+      background-color: $color-primary;
+      color: $color-primary-text !important;
       border-radius: $calendar-day-active-border-radius;
 
       &.active-start {
@@ -176,12 +177,12 @@
       }
 
       .nut-calendar-day-info {
-        color: $primary-text-color;
+        color: $color-primary-text;
       }
     }
 
     &-disabled {
-      color: $calendar-disable-color !important;
+      color: $color-text-disabled !important;
 
       .nut-calendar-day-info-curr {
         display: none;
@@ -189,8 +190,8 @@
     }
 
     &-choose-disabled {
-      background-color: $calendar-choose-disable-background-color;
-      color: $calendar-disable-color !important;
+      background-color: $calendar-choose-background-color-disabled;
+      color: $color-text-disabled !important;
 
       .nut-calendar-day-info-curr {
         display: none;
@@ -199,7 +200,7 @@
 
     &-choose {
       background-color: $calendar-choose-background-color;
-      color: $calendar-choose-color;
+      color: $color-primary;
     }
   }
 
@@ -215,13 +216,13 @@
       margin: 10px 18px;
       border-radius: 22px;
       background: $button-primary-background-color;
-      color: $primary-text-color;
+      color: $color-primary-text;
       text-align: center;
       line-height: 44px;
     }
   }
 }
 
-.nut-popup__close-icon {
+.nut-calendar-popup .nut-popup-title-right {
   top: 7px !important;
 }

package/dist/packages/card/card.scss

@@ -3,46 +3,56 @@
 .nut-card {
   width: 100%;
   display: flex;
+  background-color: $color-background-overlay;
+
   .nut-card__left {
     width: 120px;
     height: 120px;
     flex-shrink: 0;
-    background-color: $card-left-background-color;
     border-radius: $card-left-border-radius;
+
     > img {
       display: block;
       width: 100%;
       height: 100%;
     }
   }
+
   .nut-card__right {
     flex: 1;
     padding: 0 10px 8px;
+
     .nut-card__right-title {
       @include moreline-ellipsis();
       line-height: 1.5;
       font-size: 14px;
+      color: $color-title;
     }
+
     .nut-cardright-price {
       display: flex;
       align-items: center;
       height: 18px;
       line-height: 18px;
       margin-top: 9px;
+
       .nut-price {
         .nut-price__big {
           font-size: 18px;
         }
+
         .nut-price__symbol,
         .nut-price__point,
         .nut-price__small {
           font-size: 12px;
         }
       }
+
       .nut-cardright-price-origin {
         &.nut-price {
           margin-left: 2px;
           color: #d2a448;
+
           .nut-price__big,
           .nut-price__symbol,
           .nut-price__point,
@@ -52,23 +62,27 @@
         }
       }
     }
+
     .nut-cardright-other {
       display: flex;
       align-items: center;
       padding: 5px 0 2px;
+
       .nut-tag {
         padding: 0 2px;
         margin-right: 5px;
-        font-size: $font-size-0;
+        font-size: $font-size-xs;
       }
     }
+
     .nut-cardright-shop {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .nut-cardright-shop-name {
         line-height: 1.5;
-        color: #999;
+        color: $color-text;
         font-size: 12px;
         padding-top: 4px;
       }

package/dist/packages/cascader/cascader.scss

@@ -2,11 +2,10 @@
 .nut-cascader {
   width: 100%;
   font-size: $cascader-font-size;
-  line-height: $cascader-line-height;
 
   .nut-tabs__titles {
     padding: $cascader-tabs-item-padding;
-    background: $gray6;
+    background: $color-background-overlay;
   }
 
   .nut-tabs__titles-item {
@@ -19,6 +18,7 @@
 
   .nut-tabpane {
     padding: 0;
+    background: $color-background-overlay;
   }
 
   &-pane {

package/dist/packages/checkbox/checkbox.scss

@@ -3,44 +3,49 @@
   display: flex;
   align-items: center;
 
-  &--reverse {
-    flex-direction: row-reverse;
+  &-icon {
+    color: $color-text-disabled;
+    font-size: $checkbox-icon-font-size;
+  }
 
-    .nut-checkbox__label {
-      margin-right: $checkbox-label-margin-left;
-      margin-left: 0;
+  &-icon-checked {
+    color: $color-primary;
+    transition-duration: 0.3s;
+    transition-property: color, border-color, background-color;
+
+    &.nut-checkbox-icon-disabled {
+      color: $color-primary-disabled;
     }
   }
 
-  &__label {
+  &-label {
     margin-left: $checkbox-label-margin-left;
     font-size: $checkbox-label-font-size;
     color: $checkbox-label-color;
 
-    &--disabled {
-      color: $checkbox-label-disable-color;
+    &-disabled {
+      color: $color-text-disabled;
     }
   }
 
-  &__icon {
-    color: $primary-color;
-    font-size: $checkbox-icon-font-size;
-    transition-duration: 0.3s;
-    transition-property: color, border-color, background-color;
-  }
+  &-icon-indeterminate {
+    color: $color-primary;
 
-  &__icon--unchecked {
-    color: $checkbox-icon-disable-color;
-    font-size: $checkbox-icon-font-size;
+    &.nut-checkbox-icon-disabled {
+      color: $color-primary-disabled;
+    }
   }
 
-  &__icon--indeterminate {
-    color: $primary-color;
-    font-size: $checkbox-icon-font-size;
+  &-icon-disabled {
+    color: $color-text-disabled;
   }
 
-  &__icon--disable {
-    color: $disable-color;
-    font-size: $checkbox-icon-font-size;
+  &-reverse {
+    flex-direction: row-reverse;
+
+    .nut-checkbox-label {
+      margin-right: $checkbox-label-margin-left;
+      margin-left: 0;
+    }
   }
 }

package/dist/packages/checkboxgroup/checkboxgroup.scss

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

package/dist/packages/collapseitem/collapseitem.scss

@@ -7,7 +7,7 @@
     padding: $collapse-item-padding;
     font-size: $collapse-item-font-size;
     line-height: $collapse-item-line-height;
-    background-color: $background-color3;
+    background-color: $color-background-overlay;
     box-sizing: border-box;
 
     &::after {
@@ -18,7 +18,7 @@
       right: 16px;
       bottom: 0;
       left: 16px;
-      border-bottom: 1px solid #ebedf0;
+      border-bottom: 1px solid $color-border;
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
     }
@@ -45,6 +45,7 @@
     display: flex;
     padding-right: 40px;
     position: relative;
+    color: $color-text;
   }
 
   &__icon {
@@ -64,6 +65,10 @@
     .nut-collapse-item__title {
       color: $collapse-item-disabled-color;
     }
+
+    .nut-collapse-item__icon {
+      color: $collapse-item-disabled-color;
+    }
   }
 
   &__content {

package/dist/packages/dialog/dialog.scss

@@ -5,6 +5,7 @@
   flex-direction: column;
   align-items: center;
   width: $dialog-width;
+  max-height: 67%;
   min-height: $dialog-min-height;
   padding: $dialog-padding;
   box-sizing: border-box;
@@ -26,28 +27,28 @@
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
-    border-radius: $dialog-outer-border-radius;
-    z-index: $dialog-outer-z-index;
+    border-radius: $dialog-border-radius;
+    z-index: $dialog-z-index;
     animation-duration: 0.3s;
   }
 
   &__header {
     display: block;
     text-align: center;
-    font-size: $font-size-3;
-    color: $title-color;
+    font-size: $font-size-large;
+    line-height: 24px;
+    font-weight: 500;
+    color: $color-title;
     @include oneline-ellipsis();
   }
 
   &__content {
     width: 100%;
-    overflow: auto;
-    flex: 1;
     margin: $dialog-content-margin;
     max-height: $dialog-content-max-height;
     line-height: $dialog-content-line-height;
-    font-size: $font-size-1;
-    color: $text-color;
+    font-size: $font-size-base;
+    color: $color-text;
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
@@ -67,12 +68,16 @@
         min-width: 100%;
         margin: 0;
 
-        &.nut-dialog__footer-cancel {
-          border: 0;
+        &.nut-dialog__footer-ok {
+          order: 1;
         }
 
-        &.nut-dialog__footer-ok {
-          margin-top: $dialog-vertical-footer-ok-margin-top;
+        &.nut-dialog__footer-cancel {
+          border: 0;
+          color: $color-text;
+          order: 2;
+          display: flex;
+          align-items: flex-end;
         }
       }
     }
@@ -90,23 +95,3 @@
     }
   }
 }
-
-// .fadeDialog-enter,
-// .fadeDialog-appear {
-//   opacity: 0;
-// }
-
-// .fadeDialog-enter-active,
-// .fadeDialog-appear-active {
-//   opacity: 1;
-//   transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
-// }
-
-// .fadeDialog-exit {
-//   opacity: 1;
-// }
-
-// .fadeDialog-exit-active {
-//   opacity: 0;
-//   transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
-// }

package/dist/packages/divider/divider.scss

@@ -4,7 +4,7 @@
   font-size: $divider-text-font-size;
   color: $divider-text-color;
   margin: $divider-margin;
-  border: 0 solid currentColor;
+  border: 0 solid $divider-border-color;
   width: 100%;
 
   &::before,
@@ -21,23 +21,23 @@
   &__left,
   &__right {
     &::before {
-      margin-right: $divider-before-margin-right;
+      margin-right: $divider-spacing;
     }
 
     &::after {
-      margin-left: $divider-after-margin-left;
+      margin-left: $divider-spacing;
     }
   }
 
   &__left {
     &::before {
-      max-width: 10%;
+      max-width: $divider-side-width;
     }
   }
 
   &__right {
     &::after {
-      max-width: 10%;
+      max-width: $divider-side-width;
     }
   }
 
@@ -53,7 +53,7 @@
     top: $divider-vertical-top;
     display: inline-block;
     height: $divider-vertical-height;
-    border-left: 1px solid $divider-vertical-border-left;
+    border-left: 1px solid $divider-border-color;
     margin: $divider-vertical-margin;
     width: auto;
   }

package/dist/packages/elevator/elevator.scss

@@ -3,53 +3,60 @@
   display: block;
   position: relative;
   overflow: hidden;
+
   &__list {
     display: block;
     position: relative;
-    top: 1px;
+    top: 0;
     overflow: hidden;
+    font-size: $elevator-list-font-size;
+    color: $elevator-list-color;
+
     &__inner {
       height: 100%;
       width: 100%;
       display: block;
-      background-color: $elevator-list-inner-bg-color;
+      background-color: $elevator-list-bg-color;
       overflow: auto;
     }
+
     &__item {
       display: block;
-      font-size: $elevator-list-item-font-size;
-      color: $elevator-list-item-font-color;
+
       &__code {
         display: flex;
         position: relative;
         height: $elevator-list-item-code-height;
         line-height: $elevator-list-item-code-line-height;
         font-size: $elevator-list-item-code-font-size;
-        color: $elevator-list-item-code-font-color;
-        padding: $elevator-list-item-code-padding;
+        color: $elevator-list-item-code-color;
+        padding: $elevator-list-item-padding;
         font-weight: $elevator-list-item-code-font-weight;
         box-sizing: border-box;
-        border-bottom: $elevator-list-item-code-border-bottom solid
-          $elevator-list-item-code-border-bottom-color;
+        border-bottom: $elevator-list-item-code-border-bottom;
+        background-color: $elevator-list-item-code-background-color;
       }
+
       &__name {
         display: flex;
         align-items: center;
-        padding: $elevator-list-item-name-padding;
+        padding: $elevator-list-item-padding;
         height: $elevator-list-item-name-height;
         line-height: $elevator-list-item-name-line-height;
+
         &--highcolor {
-          color: $elevator-list-item-highcolor;
+          color: $color-primary;
         }
       }
     }
+
     &__fixed {
       width: 100%;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 1;
-      padding: $elevator-list-item-code-padding;
+      padding: $elevator-list-item-padding;
       height: $elevator-list-item-code-height;
       line-height: $elevator-list-item-code-line-height;
       font-size: $elevator-list-item-code-font-size;
@@ -60,11 +67,12 @@
       box-shadow: $elevator-list-fixed-box-shadow;
     }
   }
+
   &__code--current {
-    position: $elevator-list-item-code-current-position;
+    position: absolute;
     right: $elevator-list-item-code-current-right;
     top: $elevator-list-item-code-current-top;
-    transform: $elevator-list-item-code-current-transform;
+    transform: $elevator-bars-transform;
     width: $elevator-list-item-code-current-width;
     height: $elevator-list-item-code-current-height;
     line-height: $elevator-list-item-code-current-line-height;
@@ -73,24 +81,30 @@
     box-shadow: $elevator-list-item-code-current-box-shadow;
     text-align: $elevator-list-item-code-current-text-align;
   }
+
   &__bars {
-    position: $elevator-list-item-bars-position;
-    right: $elevator-list-item-bars-right;
-    top: $elevator-list-item-bars-top;
-    transform: $elevator-list-item-bars-transform;
-    padding: $elevator-list-item-bars-padding;
-    background-color: $elevator-list-item-bars-background-color;
-    border-radius: $elevator-list-item-bars-border-radius;
-    text-align: $elevator-list-item-bars-text-align;
-    z-index: $elevator-list-item-bars-z-index;
+    position: absolute;
+    right: $elevator-bars-right;
+    top: $elevator-bars-top;
+    color: $color-text-help;
+    font-size: $elevator-bars-font-size;
+    transform: $elevator-bars-transform;
+    padding: $elevator-bars-padding;
+    background-color: $elevator-bars-background-color;
+    border-radius: $elevator-bars-border-radius;
+    text-align: center;
+    z-index: $elevator-bars-z-index;
+
     &__inner {
       &__item {
         display: block;
-        padding: $elevator-list-item-bars-inner-item-padding;
-        font-size: $elevator-list-item-bars-inner-item-font-size;
+        padding: $elevator-bars-inner-item-padding;
+
         &--active {
-          color: $elevator-list-item-bars-inner-item-active-color;
+          font-weight: $font-weight-bold;
+          color: $elevator-bars-active-color;
         }
+
         cursor: pointer;
       }
     }

package/dist/packages/empty/empty.scss

@@ -5,8 +5,9 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $background-color3;
-  &__image {
+  background-color: $color-background-overlay;
+
+  &-image {
     width: $empty-image-size;
     height: $empty-image-size;
 
@@ -23,11 +24,40 @@
     }
   }
 
-  &__description {
+  &-title {
+    margin-top: $empty-title-margin-top;
+    margin-bottom: $empty-title-margin-bottom;
+    color: $color-title;
+    font-size: $font-size-base;
+    line-height: $empty-title-line-height;
+  }
+
+  &-description {
     margin-top: $empty-description-margin-top;
-    padding: $empty-description-padding;
-    color: $empty-description-color;
-    font-size: $empty-description-font-size;
+    color: $color-text-help;
+    font-size: $font-size-small;
     line-height: $empty-description-line-height;
   }
+
+  &-small {
+    .nut-empty-image {
+      width: $empty-image-small-size;
+      height: $empty-image-small-size;
+    }
+  }
+
+  &-actions {
+    display: flex;
+    margin-top: 16px;
+
+    .nut-button.nut-empty-actions-left,
+    .nut-button.nut-empty-actions-right {
+      height: 28px;
+      padding: 0px 12px;
+      font-weight: 400;
+    }
+    .nut-button.nut-empty-actions-left {
+      margin-right: 16px;
+    }
+  }
 }