@nutui/nutui-react 2.2.0 → 2.3.0-beta.1

package/dist/packages/checkbox/checkbox.scss

@@ -3,44 +3,115 @@
   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 {
+  &-icon-indeterminate {
     color: $color-primary;
-    font-size: $checkbox-icon-font-size;
-    transition-duration: 0.3s;
-    transition-property: color, border-color, background-color;
+
+    &.nut-checkbox-icon-disabled {
+      color: $color-primary-disabled;
+    }
   }
 
-  &__icon--unchecked {
-    color: $checkbox-icon-disable-color;
-    font-size: $checkbox-icon-font-size;
+  &-icon-disabled {
+    color: $color-text-disabled;
   }
 
-  &__icon--indeterminate {
-    color: $color-primary;
-    font-size: $checkbox-icon-font-size;
+  &-reverse {
+    flex-direction: row-reverse;
+
+    .nut-checkbox-label {
+      margin-right: $checkbox-label-margin-left;
+      margin-left: 0;
+    }
   }
 
-  &__icon--disable {
-    color: $disable-color;
-    font-size: $checkbox-icon-font-size;
+  &-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: $checkbox-button-padding;
+    font-size: $checkbox-button-font-size;
+    background: $checkbox-button-background;
+    border-radius: $checkbox-button-border-radius;
+    color: $checkbox-label-color;
+    box-sizing: border-box;
+    border: 1px solid $checkbox-button-background;
+    overflow: hidden;
+
+    &-active {
+      background: $color-primary-light;
+      color: $color-primary;
+      border: $checkbox-button-active-border;
+    }
+
+    &-disabled {
+      color: $color-text-disabled;
+      border: 1px solid $checkbox-button-background;
+    }
+
+    &-icon {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      border-top: 10px solid transparent;
+      border-left: 10px solid transparent;
+      border-bottom: 10px solid $color-primary;
+      border-right: 10px solid $color-primary;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+
+      &-checked {
+        width: 12px;
+        height: 12px;
+        position: absolute;
+        color: $white;
+        top: 50%;
+        left: 50%;
+        transform: translate(-3px, -3px);
+      }
+
+      // background-color: $color-primary;
+      .nut-icon {
+        font-size: 12px;
+        &:before {
+          top: auto;
+          bottom: -22px;
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  .nut-checkbox-button-active.nut-checkbox-button-disabled {
+    background: $color-text-disabled;
+    color: $white;
+    border: 1px solid $color-text-disabled;
   }
 }

package/dist/packages/checkboxgroup/checkboxgroup.scss

@@ -2,32 +2,42 @@
   .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;
       }
+
+      &-button-active {
+        border: $radio-button-active-border;
+        background-color: $color-primary-light;
+      }
     }
   }
 
-  &--horizontal {
+  &-horizontal {
     .nut-checkbox {
       display: inline-flex;
       margin-right: 20px;
+
+      &-button-active {
+        border: $radio-button-active-border;
+        background-color: $color-primary-light;
+      }
     }
   }
 }

package/dist/packages/collapseitem/collapseitem.scss

@@ -1,5 +1,22 @@
 .nut-collapse-item {
-  &__header {
+  position: relative;
+  &::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 16px;
+    bottom: 0;
+    left: 16px;
+    border-bottom: $collapse-item-border-bottom;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+  &:last-child::after {
+    display: none;
+  }
+
+  &-header {
     position: relative;
     display: flex;
     width: 100%;
@@ -7,7 +24,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,19 +35,19 @@
       right: 16px;
       bottom: 0;
       left: 16px;
-      border-bottom: 1px solid #ebedf0;
+      border-bottom: $collapse-item-header-border-bottom;
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
     }
   }
 
-  &__title {
+  &-title {
     color: $collapse-item-color;
     display: flex;
     align-items: center;
   }
 
-  &__extra {
+  &-extra {
     flex: 1;
     display: flex;
     justify-content: flex-end;
@@ -41,13 +58,14 @@
     color: $collapse-item-extra-color;
   }
 
-  &__icon-box {
+  &-icon-box {
     display: flex;
     padding-right: 40px;
     position: relative;
+    color: $color-text;
   }
 
-  &__icon {
+  &-icon {
     display: flex;
     align-items: center;
     position: absolute;
@@ -58,15 +76,19 @@
     transition: transform 0.3s;
   }
 
-  &__header.disabled {
+  &-header.disabled {
     color: $collapse-item-disabled-color;
 
-    .nut-collapse-item__title {
+    .nut-collapse-item-title {
+      color: $collapse-item-disabled-color;
+    }
+
+    .nut-collapse-item-icon {
       color: $collapse-item-disabled-color;
     }
   }
 
-  &__content {
+  &-content {
     overflow: hidden;
     display: block;
     color: $collapse-wrapper-content-color;

package/dist/packages/dialog/dialog.scss

@@ -14,7 +14,7 @@
     --nutui-overlay-zIndex: 1200;
   }
 
-  &__outer {
+  &-outer {
     position: fixed;
     max-height: 100%;
     overflow-y: auto;
@@ -32,29 +32,29 @@
     animation-duration: 0.3s;
   }
 
-  &__header {
+  &-header {
     display: block;
     text-align: center;
     font-size: $font-size-large;
     font-weight: $dialog-header-font-weight;
-    color: $title-color;
+    color: $color-title;
     @include oneline-ellipsis();
   }
 
-  &__content {
+  &-content {
     width: 100%;
     margin: $dialog-content-margin;
     max-height: $dialog-content-max-height;
     line-height: $dialog-content-line-height;
-    font-size: $font-size-small;
-    color: $text-color;
+    font-size: $font-size-base;
+    color: $color-text;
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
     text-align: $dialog-content-text-align;
   }
 
-  &__footer {
+  &-footer {
     display: flex;
     align-items: center;
     width: 100%;
@@ -67,13 +67,13 @@
         min-width: 100%;
         margin: 0;
 
-        &.nut-dialog__footer-ok {
+        &.nut-dialog-footer-ok {
           order: 1;
         }
 
-        &.nut-dialog__footer-cancel {
+        &.nut-dialog-footer-cancel {
           border: 0;
-          color: $text-color;
+          color: $color-text;
           order: 2;
           display: flex;
           align-items: flex-end;
@@ -86,7 +86,7 @@
       min-width: $dialog-footer-button-min-width;
     }
 
-    &-cancel.nut-dialog__footer-cancel {
+    &-cancel.nut-dialog-footer-cancel {
       margin-right: $dialog-footer-cancel-margin-right;
     }
 

package/dist/packages/divider/divider.scss

@@ -17,9 +17,9 @@
     flex: 1;
   }
 
-  &__center,
-  &__left,
-  &__right {
+  &-center,
+  &-left,
+  &-right {
     &::before {
       margin-right: $divider-spacing;
     }
@@ -29,26 +29,26 @@
     }
   }
 
-  &__left {
+  &-left {
     &::before {
       max-width: $divider-side-width;
     }
   }
 
-  &__right {
+  &-right {
     &::after {
       max-width: $divider-side-width;
     }
   }
 
-  &__hairline {
+  &-hairline {
     &::before,
     &::after {
       transform: scaleY(0.5);
     }
   }
 
-  &__vertical {
+  &-vertical {
     position: relative;
     top: $divider-vertical-top;
     display: inline-block;

package/dist/packages/elevator/elevator.scss

@@ -4,7 +4,7 @@
   position: relative;
   overflow: hidden;
 
-  &__list {
+  &-list {
     display: block;
     position: relative;
     top: 0;
@@ -12,7 +12,7 @@
     font-size: $elevator-list-font-size;
     color: $elevator-list-color;
 
-    &__inner {
+    &-inner {
       height: 100%;
       width: 100%;
       display: block;
@@ -20,10 +20,10 @@
       overflow: auto;
     }
 
-    &__item {
+    &-item {
       display: block;
 
-      &__code {
+      &-code {
         display: flex;
         position: relative;
         height: $elevator-list-item-code-height;
@@ -37,20 +37,20 @@
         background-color: $elevator-list-item-code-background-color;
       }
 
-      &__name {
+      &-name {
         display: flex;
         align-items: center;
         padding: $elevator-list-item-padding;
         height: $elevator-list-item-name-height;
         line-height: $elevator-list-item-name-line-height;
 
-        &--highcolor {
+        &-highcolor {
           color: $color-primary;
         }
       }
     }
 
-    &__fixed {
+    &-fixed {
       width: 100%;
       position: absolute;
       top: 0;
@@ -68,7 +68,7 @@
     }
   }
 
-  &__code--current {
+  &-code-current {
     position: absolute;
     right: $elevator-list-item-code-current-right;
     top: $elevator-list-item-code-current-top;
@@ -82,10 +82,11 @@
     text-align: $elevator-list-item-code-current-text-align;
   }
 
-  &__bars {
+  &-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;
@@ -94,12 +95,12 @@
     text-align: center;
     z-index: $elevator-bars-z-index;
 
-    &__inner {
-      &__item {
+    &-inner {
+      &-item {
         display: block;
         padding: $elevator-bars-inner-item-padding;
 
-        &--active {
+        &-active {
           font-weight: $font-weight-bold;
           color: $elevator-bars-active-color;
         }

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

package/dist/packages/fixednav/fixednav.scss

@@ -10,9 +10,11 @@
     .nut-icon {
       transform: rotate(180deg);
     }
-    .nut-fixednav__list {
+
+    .nut-fixednav-list {
       transform: translateX(0%) !important;
     }
+
     &.left {
       .nut-icon {
         transform: rotate(0deg) !important;
@@ -20,16 +22,15 @@
     }
   }
 
-  &__btn {
+  &-btn {
     box-sizing: border-box;
     position: absolute;
     right: 0;
 
     z-index: $fixednav-index;
-    width: 80px;
-    padding-left: 12px;
+    width: 70px;
     height: 100%;
-    background: $fixednav-btn-bg;
+    background: $fixednav-button-background;
     border-radius: 45px 0px 0px 45px;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     display: flex;
@@ -39,10 +40,11 @@
     .text {
       width: 24px;
       line-height: 13px;
-      font-size: 10px;
-      color: $fixednav-bg-color;
+      font-size: $font-size-small;
+      color: #fff;
       flex-shrink: 0;
     }
+
     .nut-icon {
       margin-right: 5px;
       transition: all 0.3s;
@@ -51,7 +53,7 @@
     }
   }
 
-  &__list {
+  &-list {
     position: absolute;
     right: 0;
     transform: translateX(100%);
@@ -60,15 +62,17 @@
     z-index: $fixednav-index;
     flex-shrink: 0;
     height: 100%;
-    background: $fixednav-bg-color;
+    background: $fixednav-background-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;
@@ -79,15 +83,18 @@
       align-items: center;
       min-width: 50px;
       flex-shrink: 0;
+      color: $fixednav-color;
+
       img {
         width: 20px;
         height: 20px;
         margin-bottom: 2px;
       }
-      .nut-fixednav__list-text {
+
+      .nut-fixednav-list-text {
         font-size: 10px;
-        color: $fixednav-font-color;
       }
+
       .b {
         position: absolute;
         right: 0;
@@ -104,31 +111,37 @@
       }
     }
   }
+
   &.left {
     right: auto;
     left: 0;
 
-    .nut-fixednav__btn {
+    .nut-fixednav-btn {
       flex-direction: row-reverse;
       right: auto;
       left: 0;
       border-radius: 0 45px 45px 0;
+
       .nut-icon {
         transform: rotate(180deg);
       }
     }
-    .nut-fixednav__list {
+
+    .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/form/form.scss

@@ -1,12 +1,12 @@
 
-.form-layout-right .nut-form-item__label {
+.form-layout-right .nut-form-item-label {
   text-align: right;
   font-size: 14px;
   padding-right: 24px;
   white-space: nowrap;
 }
 
-.form-layout-left .nut-form-item__label {
+.form-layout-left .nut-form-item-label {
   position: relative;
   text-align: left;
   font-size: 14px;
@@ -27,14 +27,14 @@
   white-space: nowrap;
 }
 
-.form-layout-top .nut-form-item__label {
+.form-layout-top .nut-form-item-label {
   padding-bottom: 4px;
   display: block;
   font-size: 14px;
   padding-right: 24px;
 }
 
-.form-layout-top .nut-form-item__body {
+.form-layout-top .nut-form-item-body {
   margin-left: 0;
   width: 100%;
 }