@nutui/nutui-react 1.4.7 → 1.4.8

package/dist/packages/step/step.scss

@@ -1,3 +1,4 @@
+
 .nut-theme-dark {
   .nut-step {
     &.nut-step-wait {
@@ -5,27 +6,34 @@
         .nut-step-title {
           color: $dark2;
         }
+
         .nut-step-content {
           color: $dark2;
         }
       }
+
       .nut-step-head {
         color: $dark2;
       }
+
       .nut-step-icon.is-text {
         background-color: $dark5;
       }
+
       .nut-step-icon.is-icon {
         background-color: $dark5;
+
         .nut-icon {
           color: $dark2;
         }
       }
+
       .nut-step-content {
         color: $dark2;
       }
     }
   }
+
   .nut-step-process,
   .nut-step-finish {
     .nut-step-main {
@@ -35,138 +43,216 @@
     }
   }
 }
+
 .nut-step {
   flex-grow: 0;
   flex-shrink: 0;
   flex: 1;
   text-align: center;
   font-size: 0;
+
   &-head {
     position: relative;
     display: flex;
     justify-content: center;
-    margin-bottom: 12px;
+    margin-bottom: $steps-base-icon-margin-bottom;
   }
+
+  // 计算方法：left = calc(50% + (100% - $steps-base-line-width) / 2)
+  // 如 width=70%时，left=65%; width=100%,left=50%;
   &-line {
     position: absolute;
-    top: 11px;
-    left: 50%;
-    right: -50%;
-    display: inline-block;
-    height: 1px;
-    background: $steps-base-line-color;
+    top: calc($steps-base-icon-height / 2);
+    left: calc(50% + (100% - $steps-base-line-width) / 2);
+    // right: calc(0 - $steps-base-line-width / 2);
+    height: $steps-base-line-height;
+    width: $steps-base-line-width;
+    background: $steps-base-line-background;
   }
+
   &-icon {
     position: relative;
     display: flex;
+    align-items: center;
+    justify-content: center;
     width: $steps-base-icon-width;
     height: $steps-base-icon-height;
     line-height: $steps-base-icon-line-height;
     font-size: $steps-base-icon-font-size;
-    align-items: center;
-    justify-content: center;
+    background-color: $steps-wait-icon-bg-color;
+    border-color: $steps-wait-icon-bg-color;
+    color: $steps-wait-icon-color;
     z-index: 1;
+
     .nut-icon {
       width: 100%;
       height: 100%;
     }
+
     &.is-text {
       border-radius: 50%;
       border-width: 1px;
       border-style: solid;
     }
+
     &.is-icon {
       border-radius: 50%;
       border-width: 1px;
       border-style: solid;
-      background-color: transparent;
     }
   }
+
   &-main {
     display: inline-block;
     padding-left: 10%;
     padding-right: 10%;
     text-align: center;
+
     .nut-step-content {
       color: $title-color;
     }
   }
+
   &-title {
     display: block;
     margin-bottom: $steps-base-title-margin-bottom;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
   }
+
   &-content {
     display: block;
     font-size: $steps-base-content-font-size;
     color: $steps-base-content-color;
   }
+
   &:last-child {
     .nut-step-line {
       display: none;
     }
   }
-  &.nut-step-finish {
-    .nut-step-head {
-      color: $steps-finish-head-color;
-      border-color: $steps-finish-head-border-color;
+
+  &.nut-step-process {
+    .nut-step-icon {
+      background-color: $steps-process-icon-bg-color;
+      border-color: $steps-process-icon-bg-color;
+      color: $steps-process-icon-color;
     }
-    .nut-step-icon.is-text {
-      background-color: $steps-finish-icon-text-color;
+
+    .nut-step-title {
+      color: $steps-process-title-color;
+      font-size: $steps-process-title-font-size;
+      font-weight: $steps-process-title-font-weight;
+    }
+
+    .nut-step-content {
+      // color: $steps-process-title-color;
+    }
+  }
+
+  &.nut-step-wait {
+    .nut-step-title {
+      color: $steps-wait-title-color;
     }
-    .nut-step-icon.is-icon {
-      background-color: $steps-finish-icon-text-color;
+
+    .nut-step-content {
+      color: $steps-wait-content-color;
     }
+  }
+
+  &.nut-step-finish {
+    .nut-step-icon {
+      background-color: $steps-finish-icon-bg-color;
+      border-color: $steps-finish-icon-color;
+      color: $steps-finish-icon-color;
+    }
+
     .nut-step-line {
       background: $steps-finish-line-background;
     }
+
     .nut-step-title {
       color: $steps-finish-title-color;
     }
-  }
-  &.nut-step-process {
-    .nut-step-head {
-      color: $steps-process-head-color;
-      border-color: $steps-process-head-border-color;
-    }
-    .nut-step-icon.is-text {
-      background-color: $steps-process-icon-text-color;
-    }
-    .nut-step-icon.is-icon {
-      background-color: $steps-process-icon-text-color;
+
+    .nut-step-content {
+      // color: $steps-finish-content-color;
     }
+  }
+}
+
+.nut-steps-dot {
+  .nut-step-head {
+    margin-top: 7px;
+    margin-bottom: 0;
+  }
+
+  .nut-step-line {
+    top: 7px;
+  }
+
+  .nut-step-icon {
+    width: $steps-dot-icon-width;
+    height: $steps-dot-icon-height;
+    border: $steps-dot-icon-border;
+    border-radius: 50%;
+    box-sizing: content-box;
+  }
+
+  .nut-step-wait {
     .nut-step-title {
-      color: $steps-process-title-color;
+      color: $steps-wait-title-color;
     }
-  }
-  &.nut-step-wait {
-    .nut-step-head {
-      color: $steps-wait-head-color;
-      border-color: $steps-wait-head-border-color;
+
+    .nut-step-content {
+      color: $steps-wait-content-color;
     }
-    .nut-step-icon.is-text {
-      background-color: $steps-wait-icon-bg-color;
+  }
+
+  .nut-step-finish {
+    .nut-step-icon {
+      background-color: $steps-finish-icon-bg-color;
+      border-color: $steps-finish-icon-color;
     }
-    .nut-step-icon.is-icon {
-      background-color: $steps-wait-icon-bg-color;
-      .nut-icon {
-        color: $steps-wait-icon-color;
+  }
+
+  .nut-step-process {
+    .nut-step-icon {
+      position: relative;
+      background-color: $steps-process-icon-bg-color;
+
+      &:before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -7px;
+        margin-top: -7px;
+        width: 14px;
+        height: 14px;
+        background-color: $primary-color-end;
+        border-radius: 50%;
+        opacity: 0.23;
       }
     }
-    .nut-step-main {
-      .nut-step-title,
-      .nut-step-content {
-        color: $steps-wait-content-color;
-      }
+  }
+}
+
+.nut-steps-horizontal {
+  &.nut-steps-dot {
+    .nut-step-line {
+      top: calc(($steps-dot-icon-width + $steps-dot-icon-border * 2) / 2);
     }
   }
 }
+
 .nut-steps-vertical {
   .nut-step {
     display: flex;
     height: 33.34%;
   }
+
   .nut-step-line {
     position: absolute;
     display: inline-block;
@@ -174,63 +260,14 @@
     height: 100%;
     background: #909ca4;
   }
+
   .nut-step-main {
     display: inline-block;
     padding-left: 6%;
     text-align: left;
+
     .nut-step-content {
-      color: $title-color;
-    }
-  }
-  &.nut-steps-dot {
-    .nut-step-head {
-      margin-top: 7px;
-      margin-bottom: 0;
-    }
-    .nut-step-line {
-      top: 7px;
-      left: 50%;
-      right: -50%;
-    }
-    .nut-step-icon {
-      width: 8px;
-      height: 8px;
-      background: $primary-color;
-      border-radius: 50%;
-      box-sizing: content-box;
-    }
-    .nut-step-wait {
-      .nut-step-icon {
-        background-color: $steps-wait-icon-bg-color;
-      }
-      .nut-step-content {
-        color: $steps-wait-content-color;
-      }
-    }
-    .nut-step-finish {
-      .nut-step-icon {
-        background-color: $primary-color;
-      }
-    }
-    .nut-step-process {
-      .nut-step-icon {
-        position: relative;
-        background-color: $primary-color;
-        &:before {
-          content: '';
-          display: inline-block;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          margin-left: -7px;
-          margin-top: -7px;
-          width: 14px;
-          height: 14px;
-          background-color: $primary-color-end;
-          border-radius: 50%;
-          opacity: 0.23;
-        }
-      }
+      color: $steps-base-content-color;
     }
   }
 }

package/dist/packages/switch/switch.scss

@@ -29,7 +29,7 @@
     background-color: $switch-close-bg-color;
 
     .close-line {
-      background: $switch-close--cline-bg-color;
+      background: $switch-close--line-bg-color;
       border-radius: 2px;
     }
   }

package/dist/packages/tabs/tabs.scss

@@ -1,24 +1,31 @@
 @import '../../styles/mixins/index';
+
 .nut-theme-dark {
   .nut-tabs {
     .nut-tabpane {
       color: $white;
     }
+
     &__titles {
       background: $dark5;
+
       &-item {
         color: $dark1;
+
         &.active {
           color: $dark1;
+
           .nut-tabs__titles-item__text {
             color: $dark1;
           }
         }
+
         &__text {
           color: $dark1;
         }
       }
     }
+
     &.vertical {
       .nut-tabs__titles {
         &-item {
@@ -95,9 +102,11 @@
 
     .nut-tabs__content {
       flex-direction: column;
+
       &__wrap {
         flex: 1;
       }
+
       height: 100%;
 
       .nut-tabpane {
@@ -163,16 +172,21 @@
     &-item {
       position: relative;
       font-size: $tabs-titles-item-font-size;
-      flex: 1 0 auto;
       min-width: $tabs-horizontal-titles-item-min-width;
       width: 0;
       display: flex;
       align-items: center;
       justify-content: center;
+      flex: 1 0 auto;
       color: $tabs-titles-item-color;
 
+      &-left-align {
+        flex: none;
+      }
+
       &__text {
         color: $gray1;
+
         &.ellipsis {
           @include oneline-ellipsis();
         }
@@ -187,10 +201,11 @@
         width: 0;
         height: 0;
         content: ' ';
-        bottom: 15%;
+        bottom: $tabs-horizontal-tab-line-bottom;
         left: 50%;
         transform: translate(-50%, 0);
         overflow: hidden;
+        border-radius: $tabs-horizontal-tab-line-border-radius;
       }
 
       &__smile {
@@ -205,13 +220,19 @@
 
       &.disabled {
         color: $disable-color;
+
+        .nut-tabs__titles-item__text {
+          color: $disable-color;
+        }
       }
 
       &.active {
         font-weight: 600;
+
         .nut-tabs__titles-item__text {
           color: $gray1;
         }
+
         .nut-tabs__titles-item__line {
           content: ' ';
           width: $tabs-horizontal-titles-item-active-line-width;
@@ -226,6 +247,7 @@
     &__wrap {
       overflow: hidden;
     }
+
     display: flex;
     box-sizing: border-box;
   }

package/dist/packages/textarea/textarea.scss

@@ -1,6 +1,7 @@
 .nut-theme-dark {
   .nut-textarea {
     background: $dark5;
+
     &__textarea {
       color: $dark1;
     }
@@ -14,7 +15,7 @@
   display: flex;
   background: $white;
   font-size: $textarea-font;
-  padding: 10px 25px;
+  padding: $textarea-padding;
 
   &__disabled {
     .nut-textarea__textarea,
@@ -23,6 +24,7 @@
       color: $textarea-disabled-color !important;
     }
   }
+
   &__limit {
     position: absolute;
     right: 15px;
@@ -30,6 +32,7 @@
     font-size: $textarea-font;
     color: $textarea-limit-color;
   }
+
   &__textarea {
     // min-height: $textarea-height;
     outline: none;
@@ -40,12 +43,15 @@
     margin: 0;
     padding: 0;
     font-size: $textarea-font;
+    line-height: $textarea-text-line-height;
     color: $textarea-text-color;
+    caret-color: $textarea-text-curror-color;
     text-align: left;
     background-color: transparent;
     border: 0;
     resize: none;
   }
+
   .cpoyText {
     position: absolute;
     top: -999999px;