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

package/dist/packages/checkbox/checkbox.scss

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

package/dist/packages/checkboxgroup/checkboxgroup.scss

@@ -2,29 +2,29 @@
   .nut-checkbox {
     margin-bottom: 5px;
 
-    &-label {
+    &__label {
       margin-right: 5px;
     }
 
-    &-button {
-      background-color: $color-background;
+    &__button {
+      background-color: $gray4;
     }
   }
 
-  &-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: $color-background-overlay;
+    background-color: $background-color3;
     box-sizing: border-box;
 
     &::after {
@@ -18,7 +18,7 @@
       right: 16px;
       bottom: 0;
       left: 16px;
-      border-bottom: 1px solid $color-border;
+      border-bottom: 1px solid #ebedf0;
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
     }
@@ -45,7 +45,6 @@
     display: flex;
     padding-right: 40px;
     position: relative;
-    color: $color-text;
   }
 
   &__icon {
@@ -65,10 +64,6 @@
     .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,7 +5,6 @@
   flex-direction: column;
   align-items: center;
   width: $dialog-width;
-  max-height: 67%;
   min-height: $dialog-min-height;
   padding: $dialog-padding;
   box-sizing: border-box;
@@ -27,28 +26,28 @@
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
-    border-radius: $dialog-border-radius;
-    z-index: $dialog-z-index;
+    border-radius: $dialog-outer-border-radius;
+    z-index: $dialog-outer-z-index;
     animation-duration: 0.3s;
   }
 
   &__header {
     display: block;
     text-align: center;
-    font-size: $font-size-large;
-    line-height: 24px;
-    font-weight: 500;
-    color: $color-title;
+    font-size: $font-size-3;
+    color: $title-color;
     @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-base;
-    color: $color-text;
+    font-size: $font-size-1;
+    color: $text-color;
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
@@ -68,16 +67,12 @@
         min-width: 100%;
         margin: 0;
 
-        &.nut-dialog__footer-ok {
-          order: 1;
-        }
-
         &.nut-dialog__footer-cancel {
           border: 0;
-          color: $color-text;
-          order: 2;
-          display: flex;
-          align-items: flex-end;
+        }
+
+        &.nut-dialog__footer-ok {
+          margin-top: $dialog-vertical-footer-ok-margin-top;
         }
       }
     }
@@ -95,3 +90,23 @@
     }
   }
 }
+
+// .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 $divider-border-color;
+  border: 0 solid currentColor;
   width: 100%;
 
   &::before,
@@ -21,23 +21,23 @@
   &__left,
   &__right {
     &::before {
-      margin-right: $divider-spacing;
+      margin-right: $divider-before-margin-right;
     }
 
     &::after {
-      margin-left: $divider-spacing;
+      margin-left: $divider-after-margin-left;
     }
   }
 
   &__left {
     &::before {
-      max-width: $divider-side-width;
+      max-width: 10%;
     }
   }
 
   &__right {
     &::after {
-      max-width: $divider-side-width;
+      max-width: 10%;
     }
   }
 
@@ -53,7 +53,7 @@
     top: $divider-vertical-top;
     display: inline-block;
     height: $divider-vertical-height;
-    border-left: 1px solid $divider-border-color;
+    border-left: 1px solid $divider-vertical-border-left;
     margin: $divider-vertical-margin;
     width: auto;
   }

package/dist/packages/elevator/elevator.scss

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

package/dist/packages/empty/empty.scss

@@ -5,9 +5,8 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-  background-color: $color-background-overlay;
-
-  &-image {
+  background-color: $background-color3;
+  &__image {
     width: $empty-image-size;
     height: $empty-image-size;
 
@@ -24,40 +23,11 @@
     }
   }
 
-  &-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 {
+  &__description {
     margin-top: $empty-description-margin-top;
-    color: $color-text-help;
-    font-size: $font-size-small;
+    padding: $empty-description-padding;
+    color: $empty-description-color;
+    font-size: $empty-description-font-size;
     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;
-    }
-  }
 }

package/dist/packages/fixednav/fixednav.scss

@@ -10,11 +10,9 @@
     .nut-icon {
       transform: rotate(180deg);
     }
-
     .nut-fixednav__list {
       transform: translateX(0%) !important;
     }
-
     &.left {
       .nut-icon {
         transform: rotate(0deg) !important;
@@ -28,9 +26,10 @@
     right: 0;
 
     z-index: $fixednav-index;
-    width: 70px;
+    width: 80px;
+    padding-left: 12px;
     height: 100%;
-    background: $fixednav-button-background;
+    background: $fixednav-btn-bg;
     border-radius: 45px 0px 0px 45px;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     display: flex;
@@ -40,11 +39,10 @@
     .text {
       width: 24px;
       line-height: 13px;
-      font-size: $font-size-small;
-      color: #fff;
+      font-size: 10px;
+      color: $fixednav-bg-color;
       flex-shrink: 0;
     }
-
     .nut-icon {
       margin-right: 5px;
       transition: all 0.3s;
@@ -62,17 +60,15 @@
     z-index: $fixednav-index;
     flex-shrink: 0;
     height: 100%;
-    background: $fixednav-background-color;
+    background: $fixednav-bg-color;
     display: flex;
     justify-content: space-between;
     border-radius: 25px 0px 0px 25px;
     box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
-
     padding: {
       left: 20px;
       right: 80px;
     }
-
     &-item {
       position: relative;
       flex: 1;
@@ -83,18 +79,15 @@
       align-items: center;
       min-width: 50px;
       flex-shrink: 0;
-      color: $fixednav-color;
-
       img {
         width: 20px;
         height: 20px;
         margin-bottom: 2px;
       }
-
       .nut-fixednav__list-text {
         font-size: 10px;
+        color: $fixednav-font-color;
       }
-
       .b {
         position: absolute;
         right: 0;
@@ -104,14 +97,13 @@
         font-size: 10px;
         padding: 0 3px;
         color: white;
-        background: $color-primary;
+        background: $primary-color;
         border-radius: 7px;
         text-align: center;
         min-width: 12px;
       }
     }
   }
-
   &.left {
     right: auto;
     left: 0;
@@ -121,27 +113,22 @@
       right: auto;
       left: 0;
       border-radius: 0 45px 45px 0;
-
       .nut-icon {
         transform: rotate(180deg);
       }
     }
-
     .nut-fixednav__list {
       transform: translateX(-100%);
       right: auto;
       border-radius: 0px 25px 25px 0px;
-
       padding: {
         left: 80px;
         right: 20px;
       }
-
       margin: 0;
     }
   }
 }
-
 .nut-drag .nut-fixednav {
   position: inherit;
 }

package/dist/packages/formitem/formitem.scss

@@ -46,7 +46,7 @@
       .nut-input-text {
         font-size: $form-item-body-font-size;
         text-align: $form-item-body-input-text-align;
-        color: $color-title;
+        color: $black;
         width: 100%;
         outline: 0 none;
         border: 0;

package/dist/packages/griditem/griditem.scss

@@ -62,7 +62,6 @@
 
     &--horizontal#{&}--reverse {
       flex-direction: row-reverse;
-
       #{$block}__text {
         margin: 0 $grid-item-text-margin 0 0;
       }
@@ -77,9 +76,9 @@
         left: 50%;
         width: 100%;
         height: 100%;
-        background-color: $color-mask;
+        background-color: $black;
         border: inherit;
-        border-color: $color-mask;
+        border-color: $black;
         border-radius: inherit;
         transform: translate(-50%, -50%);
         opacity: 0;

package/dist/packages/image/image.scss

@@ -1,7 +1,6 @@
 .nut-image {
   display: block;
   position: relative;
-
   .nut-img {
     display: block;
     width: 100%;
@@ -23,10 +22,9 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: $color-background;
+    background: #f7f8fa;
     background-size: 100% 100%;
   }
-
   .nut-img-error {
     width: 100%;
     height: 100%;
@@ -37,7 +35,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: $color-background;
+    background: #f7f8fa;
     background-size: 100% 100%;
   }
 }

package/dist/packages/imagepreview/imagepreview.scss

@@ -17,7 +17,7 @@
     left: 0;
     right: 0;
     background: transparent;
-    color: $color-title;
+    color: #fff;
 
     .arrow {
       position: absolute;
@@ -26,6 +26,16 @@
     }
   }
 
+  .popup-bg {
+    background: rgba(0, 0, 0, 0.9);
+  }
+
+  .popup-box {
+    height: 100%;
+    overflow: visible;
+    background-color: transparent;
+  }
+
   &-pop {
     height: 100%;
     background: transparent !important;

package/dist/packages/indicator/indicator.scss

@@ -27,8 +27,8 @@
 
   &__active {
     width: $indicator-dot-active-size;
-    border-radius: $indicator-border-radius-size;
-    background: $indicator-color;
+    border-radius: $indicator-border-size;
+    background-color: $indicator-color;
   }
 
   &__vertical {
@@ -38,7 +38,7 @@
     justify-content: center;
 
     .nut-indicator__dot {
-      margin: $indicator-dot-margin 0;
+      margin: $indicator-dot-vertical-margin 0;
 
       &:first-child {
         margin-top: 0px;