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

package/dist/packages/tabs/tabs.scss

@@ -4,15 +4,14 @@
   display: flex;
 }
 
-.nut-tabs__titles {
+.nut-tabs-titles {
   display: flex;
   box-sizing: border-box;
-  height: $tabs-horizontal-titles-height;
-  padding: 0 10px;
+  height: $tabs-titles-height;
+  padding: 0 16px;
   user-select: none;
-  background: $tabs-titles-background-color;
-  border-radius: $tabs-titles-border-radius;
   overflow: hidden;
+  background: $tabs-titles-background-color;
 
   &::-webkit-scrollbar {
     display: none;
@@ -20,115 +19,186 @@
     background: transparent;
   }
 
-  .nut-tabs__list {
+  .nut-tabs-list {
     width: 100%;
     height: auto;
     display: flex;
     flex-shrink: 0;
   }
-}
-
-.nut-tabs__titles--left {
-  justify-content: flex-start;
-}
 
-.nut-tabs__titles--right {
-  justify-content: flex-end;
-}
+  &-left {
+    justify-content: flex-start;
+  }
 
-.nut-tabs__titles--scrollable {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
+  &-right {
+    justify-content: flex-end;
+  }
 
-.nut-tabs__titles-item {
-  position: relative;
-  min-width: $tabs-horizontal-titles-item-min-width;
-  display: flex;
-  flex: 1 0 auto;
-  padding: 0 10px;
-  align-items: center;
-  justify-content: center;
-  margin: 0 $nut-tabs-title-gap;
-  font-size: $tabs-titles-item-font-size;
-  color: $tabs-titles-item-color;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &.taro {
-    height: 46px;
-    line-height: 46px;
+  &-scrollable {
+    overflow-x: auto;
+    overflow-y: hidden;
   }
-}
 
-.nut-tabs__titles-item--left,
-.nut-tabs__titles-item--right {
-  flex: none;
-}
+  &-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 0 auto;
+    padding: 0 10px;
+    margin: 0 $tabs-titles-gap;
+    min-width: $tabs-titles-item-min-width;
+    font-size: $tabs-titles-font-size;
+    color: $color-title;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.taro {
+      height: 44px;
+      line-height: 44px;
+    }
 
-.nut-tabs__titles-item__text {
-  text-align: center;
-}
+    &-left,
+    &-right {
+      flex: none;
+    }
 
-.nut-tabs__titles-item__smile,
-.nut-tabs__titles-item__line {
-  position: absolute;
-  transition: width 0.3s ease;
-  width: 0;
-  height: 0;
-  content: ' ';
-  bottom: $tabs-horizontal-tab-line-bottom;
-  left: 50%;
-  transform: translate(-50%, 0);
-  border-radius: $tabs-horizontal-tab-line-border-radius;
-  opacity: $tabs-horizontal-tab-line-opacity;
-  overflow: hidden;
-}
+    &-text {
+      text-align: center;
+    }
 
-.nut-tabs__titles-item__smile {
-  bottom: -2%;
+    &-smile,
+    &-line {
+      position: absolute;
+      transition: width 0.3s ease;
+      width: 0;
+      height: 0;
+      content: ' ';
+      bottom: $tabs-tab-line-bottom;
+      left: 50%;
+      transform: translate(-50%, 0);
+      border-radius: $tabs-tab-line-border-radius;
+      opacity: $tabs-tab-line-opacity;
+      overflow: hidden;
+    }
 
-  .nut-icon {
-    position: absolute;
-    font-size: 12px;
-    width: 100%;
-    height: 100%;
-    color: $tabs-tab-smile-color;
+    &-smile {
+      bottom: $tabs-titles-item-smile-bottom;
+
+      .nut-icon {
+        position: absolute;
+        font-size: 12px;
+        width: 100%;
+        height: 100%;
+        color: $color-primary;
+      }
+    }
+
+    &-active {
+      color: $tabs-titles-item-active-color;
+      font-weight: $tabs-titles-item-active-font-weight;
+
+      .nut-tabs-titles-item-line {
+        overflow: unset;
+        content: ' ';
+        width: $tabs-tab-line-width;
+        height: $tabs-tab-line-height;
+        background: $tabs-tab-line-color;
+      }
+
+      .nut-tabs-titles-item-smile {
+        overflow: unset;
+        width: 40px;
+        height: 20px;
+      }
+    }
+
+    &-disabled {
+      color: $color-text-disabled;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
   }
-}
 
-.nut-tabs__titles-item--active {
-  color: $tabs-titles-item-active-color;
-  font-weight: $tabs-titles-item-active-font-weight;
+  &-simple {
+    .nut-tabs-titles-item-active {
+      color: $color-title;
+      font-size: $tabs-titles-item-active-font-size;
+    }
+  }
 
-  .nut-tabs__titles-item__smile {
-    overflow: unset;
-    width: 40px;
-    height: 20px;
+  &-card {
+    padding: 0;
+    background-color: $color-default-light;
+    .nut-tabs-titles-item {
+      margin: 0;
+
+      &-active {
+        font-weight: $font-weight-bold;
+        background-color: $white;
+        border-radius: $radius-s $radius-s 0 0;
+      }
+    }
   }
 
-  .nut-tabs__titles-item__line {
-    overflow: unset;
-    content: ' ';
-    width: $tabs-horizontal-titles-item-active-line-width;
-    height: $tabs-horizontal-titles-item-active-line-height;
-    background: $tabs-horizontal-tab-line-color;
+  &-button {
+    .nut-tabs-titles-item {
+      &-active {
+        &.taro {
+          height: 28px;
+        }
+
+        margin: 8px 9px;
+        background: $color-default-light;
+        color: $color-text;
+        border-radius: $tabs-tab-button-border-radius;
+        font-weight: $font-weight-bold;
+        background-color: $tabs-tab-button-active-background-color;
+        color: $color-text-link;
+        border: $tabs-tab-button-active-border;
+      }
+    }
   }
-}
 
-.nut-tabs__titles-item--disabled {
-  color: $disable-color;
+  &-divider {
+    padding: 0;
+    border-bottom: 1px solid $color-border;
+
+    .nut-tabs-titles-item {
+      margin: 0;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        height: 50%;
+        width: 1px;
+        background: $color-border;
+        transform: translateY(-50%);
+      }
+
+      &:last-child {
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
-.nut-tabs--horizontal {
+.nut-tabs-horizontal {
   flex-direction: column;
 }
 
-.nut-tabs--vertical {
+.nut-tabs-vertical {
   flex-direction: row;
   width: 100%;
 
-  .nut-tabs__titles {
+  .nut-tabs-titles {
     box-sizing: border-box;
     flex-direction: column;
     height: 100%;
@@ -136,7 +206,7 @@
     width: $tabs-vertical-titles-width;
     flex-shrink: 0;
 
-    .nut-tabs__list {
+    .nut-tabs-list {
       width: 100%;
       display: flex;
       flex-direction: column;
@@ -144,58 +214,62 @@
     }
   }
 
-  .nut-tabs__titles--scrollable {
+  .nut-tabs-titles-scrollable {
     overflow-x: hidden;
     overflow-y: auto;
   }
 
-  .nut-tabs__titles-item {
+  .nut-tabs-titles-item {
     height: $tabs-vertical-titles-item-height;
     flex: none;
-  }
 
-  .nut-tabs__titles-item__smile {
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    transition: width 0.3s ease;
-  }
+    &-smile {
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      transition: width 0.3s ease;
+    }
 
-  .nut-tabs__titles-item__line {
-    width: 0;
-    height: 0;
-    transform: translate(0, -50%);
-    transition: height 0.3s ease;
-  }
+    &-line {
+      width: 0;
+      height: 0;
+      transform: translate(0, -50%);
+      transition: height 0.3s ease;
+    }
+
+    &-active {
+      background-color: $tabs-titles-item-active-background-color;
 
-  .nut-tabs__titles-item--active {
-    background-color: $tabs-horizontal-titles-item-active-background-color;
+      .nut-tabs-titles-item-line {
+        left: 10px;
+        width: $tabs-vertical-tab-line-width;
+        height: $tabs-vertical-tab-line-height;
+        background: $tabs-vertical-tab-line-color;
+      }
 
-    .nut-tabs__titles-item__line {
-      left: 10px;
-      width: $tabs-vertical-titles-item-active-line-width;
-      height: $tabs-vertical-titles-item-active-line-height;
-      background: $tabs-vertical-tab-line-color;
+      .nut-tabs-titles-item-smile {
+        right: -5px;
+        bottom: 2%;
+        left: auto;
+        width: 40px;
+        height: 20px;
+        transform: rotate(320deg);
+      }
     }
 
-    .nut-tabs__titles-item__smile {
-      right: -5px;
-      bottom: 2%;
-      left: auto;
-      width: 40px;
-      height: 20px;
-      transform: rotate(320deg);
+    &:first-child {
+      margin: 0 $tabs-titles-gap;
     }
   }
 
-  .nut-tabs--horizontal {
-    .nut-tabs__titles {
+  .nut-tabs-horizontal {
+    .nut-tabs-titles {
       flex-direction: row;
       overflow-x: auto;
       overflow-y: hidden;
-      height: $tabs-horizontal-titles-height;
+      height: $tabs-titles-height;
 
-      .nut-tabs__list {
+      .nut-tabs-list {
         width: 100%;
         display: flex;
         flex-direction: row;
@@ -203,19 +277,19 @@
       }
     }
 
-    .nut-tabs__content {
+    .nut-tabs-content {
       flex-direction: row;
     }
 
-    .nut-tabs__titles-item--active {
+    .nut-tabs-titles-item-active {
       background-color: initial;
 
-      .nut-tabs__titles-item__line {
+      .nut-tabs-titles-item-line {
         left: 50%;
         transform: translate(-50%, 0);
       }
 
-      .nut-tabs__titles-item__smile {
+      .nut-tabs-titles-item-smile {
         left: 50%;
         right: auto;
         bottom: -3px;
@@ -224,11 +298,11 @@
     }
   }
 
-  .nut-tabs__content {
+  .nut-tabs-content {
     flex-direction: column;
     height: 100%;
 
-    &__wrap {
+    &-wrap {
       flex: 1;
     }
 
@@ -237,28 +311,29 @@
     }
   }
 
-  .nut-tabs--horizontal {
-    .nut-tabs__titles {
+  .nut-tabs-horizontal {
+    .nut-tabs-titles {
       display: flex;
       flex-direction: row;
       padding: 0 !important;
       width: 100%;
 
-      .nut-tabs__titles-item {
+      .nut-tabs-titles-item {
         display: flex;
         align-items: center;
         justify-content: center;
         flex: 1 0 auto;
 
-        &--active {
-          color: $tabs-titles-item-active-color;
+        &-active {
+          color: $color-primary;
           font-weight: $tabs-titles-item-active-font-weight;
+          font-size: $tabs-titles-item-active-font-size;
 
-          .nut-tabs__titles-item__line {
+          .nut-tabs-titles-item-line {
             content: ' ';
-            width: $tabs-horizontal-titles-item-active-line-width;
-            height: $tabs-horizontal-titles-item-active-line-height;
-            background: $tabs-horizontal-tab-line-color;
+            width: $tabs-tab-line-width;
+            height: $tabs-tab-line-height;
+            background: $tabs-tab-line-color;
           }
         }
       }
@@ -266,8 +341,8 @@
   }
 }
 
-.nut-tabs__content {
-  &__wrap {
+.nut-tabs-content {
+  &-wrap {
     overflow: hidden;
   }
 

package/dist/packages/tag/tag.scss

@@ -15,52 +15,52 @@
   }
 
   @mixin plain {
-    &.nut-tag--plain {
-      color: $tag-background-color;
+    &.nut-tag-plain {
+      color: $color-title;
       background-color: #fff;
-      border: $tag-border-width solid $tag-background-color;
+      border: $tag-border-width solid $color-title;
     }
   }
 
-  &--default {
+  &-default {
     background: $tag-background-color;
     @include plain;
   }
 
-  &--primary {
+  &-primary {
     background: $tag-primary-background-color;
     @include plain;
   }
 
-  &--info {
+  &-info {
     background: $tag-info-background-color;
     @include plain;
   }
 
-  &--success {
+  &-success {
     background: $tag-success-background-color;
     @include plain;
   }
 
-  &--danger {
+  &-danger {
     background: $tag-danger-background-color;
     @include plain;
   }
 
-  &--warning {
+  &-warning {
     background: $tag-warning-background-color;
     @include plain;
   }
 
-  &--round {
+  &-round {
     border-radius: $tag-round-border-radius;
   }
 
-  &--mark {
+  &-mark {
     border-radius: $tag-mark-border-radius;
   }
 
-  &--close {
+  &-close {
     cursor: pointer;
   }
 

package/dist/packages/textarea/textarea.scss

@@ -3,19 +3,19 @@
   width: 100%;
   box-sizing: border-box;
   display: flex;
-  background: $white;
+  background: $color-background-overlay;
   font-size: $textarea-font;
   padding: $textarea-padding;
 
-  &__disabled {
-    .nut-textarea__textarea,
-    .nut-textarea__limit {
+  &-disabled {
+    .nut-textarea-textarea,
+    .nut-textarea-limit {
       cursor: not-allowed;
       color: $textarea-disabled-color !important;
     }
   }
 
-  &__limit {
+  &-limit {
     position: absolute;
     right: 15px;
     bottom: 12px;
@@ -23,7 +23,7 @@
     color: $textarea-limit-color;
   }
 
-  &__textarea {
+  &-textarea {
     outline: none;
     display: block;
     box-sizing: border-box;

package/dist/packages/timedetail/timedetail.scss

@@ -2,25 +2,24 @@
   display: flex;
   align-content: flex-start;
   flex-wrap: wrap;
-  padding: 0 0 50px 13px;
+  padding: 0 0 50px 12px;
 
-  &__item {
+  &-item {
     width: $timeselect-time-width;
     height: $timeselect-time-height;
-    line-height: $timeselect-time-line-height;
+    line-height: $timeselect-time-height;
     text-align: center;
     margin: $timeselect-time-margin;
     background: $timeselect-time-background;
-    color: $timeselect-time-color;
     border-radius: 5px;
-    font-size: $timeselect-time-font-size;
+    font-size: $font-size-base;
     border: 1px solid transparent;
-    font-weight: 700;
 
     &.active {
-      background-color: $timeselect-time-active-background;
-      border: 1px solid $timeselect-time-active-color;
-      color: $timeselect-time-active-color;
+      background-color: $color-primary-light;
+      border: 1px solid $color-primary;
+      color: $color-primary;
+      font-weight: $font-weight-bold;
     }
   }
 }

package/dist/packages/timeselect/timeselect.scss

@@ -1,44 +1,35 @@
 
 .nut-timeselect {
-  background-color: $background-color3;
+  background-color: $color-background-overlay;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: calc(100% - 50px);
 
-  &__title {
-    height: $timeselect-title-height;
-    line-height: $timeselect-title-line-height;
-    margin-bottom: 10px;
-    font-size: $timeselect-title-font-size;
-    background: $timeselect-title-background;
-    color: $title-color;
-    text-align: center;
-  }
-
-  &__content {
+  &-content {
     display: flex;
     flex: 1;
   }
 
-  &__content-left {
+  &-content-left {
     width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;
     overflow: auto;
-    background: $background-color2;
+    background: $color-background-sunken;
   }
 }
 
 .nut-timepannel {
+  padding: 0 16px;
   height: $timeselect-date-height;
-  line-height: $timeselect-date-line-height;
-  text-align: center;
-  color: $timeselect-date-color;
-  font-size: $timeselect-date-font-size;
+  line-height: $timeselect-date-height;
+  text-align: left;
+  color: $color-text;
+  font-size: $font-size-base;
 
   &.active {
-    background: $background-color3;
+    background: $color-background-overlay;
     color: $timeselect-date-active-color;
-    font-weight: 700;
+    font-weight: $font-weight-bold;
   }
 }