@nutui/nutui-react 2.1.1-beta.0 → 2.2.0

package/dist/packages/tabs/tabs.scss

@@ -4,14 +4,15 @@
   display: flex;
 }
 
-.nut-tabs-titles {
+.nut-tabs__titles {
   display: flex;
   box-sizing: border-box;
-  height: $tabs-titles-height;
-  padding: 0 16px;
+  height: $tabs-horizontal-titles-height;
+  padding: 0 10px;
   user-select: none;
-  overflow: hidden;
   background: $tabs-titles-background-color;
+  border-radius: $tabs-titles-border-radius;
+  overflow: hidden;
 
   &::-webkit-scrollbar {
     display: none;
@@ -19,155 +20,115 @@
     background: transparent;
   }
 
-  .nut-tabs-list {
+  .nut-tabs__list {
     width: 100%;
     height: auto;
     display: flex;
     flex-shrink: 0;
   }
+}
 
-  &-left {
-    justify-content: flex-start;
-  }
-
-  &-right {
-    justify-content: flex-end;
-  }
-
-  &-scrollable {
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-
-  &-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;
-    }
-
-    &-left,
-    &-right {
-      flex: none;
-    }
-
-    &-text {
-      text-align: center;
-    }
+.nut-tabs__titles--left {
+  justify-content: flex-start;
+}
 
-    &-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-tabs__titles--right {
+  justify-content: flex-end;
+}
 
-    &-smile {
-      bottom: $tabs-titles-item-smile-bottom;
+.nut-tabs__titles--scrollable {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
 
-      .nut-icon {
-        position: absolute;
-        font-size: 12px;
-        width: 100%;
-        height: 100%;
-        color: $color-primary;
-      }
-    }
+.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;
+  }
+}
 
-    &-active {
-      color: $tabs-titles-item-active-color;
-      font-weight: $tabs-titles-item-active-font-weight;
+.nut-tabs__titles-item--left,
+.nut-tabs__titles-item--right {
+  flex: none;
+}
 
-      .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__text {
+  text-align: center;
+}
 
-      .nut-tabs-titles-item-smile {
-        overflow: unset;
-        width: 40px;
-        height: 20px;
-      }
-    }
+.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;
+}
 
-    &-disabled {
-      color: $color-text-disabled;
-    }
+.nut-tabs__titles-item__smile {
+  bottom: -2%;
 
-    &:first-child {
-      margin-left: 0;
-    }
+  .nut-icon {
+    position: absolute;
+    font-size: 12px;
+    width: 100%;
+    height: 100%;
+    color: $tabs-tab-smile-color;
   }
+}
 
-  &-simple {
-    .nut-tabs-titles-item-active {
-      color: $color-title;
-      font-size: $tabs-titles-item-active-font-size;
-    }
-  }
+.nut-tabs__titles-item--active {
+  color: $tabs-titles-item-active-color;
+  font-weight: $tabs-titles-item-active-font-weight;
 
-  &-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__smile {
+    overflow: unset;
+    width: 40px;
+    height: 20px;
   }
 
-  &-button {
-    padding: 8px 9px;
-    height: 44px;
-    .nut-tabs-titles-item {
-      background: $color-default-light;
-      color: $color-text;
-      border-radius: $radius-xs;
-      margin: 0 3px;
-      &-active {
-        font-weight: $font-weight-bold;
-        background-color: $color-primary-light;
-        color: $color-text-link;
-      }
-    }
+  .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;
   }
 }
 
-.nut-tabs-horizontal {
+.nut-tabs__titles-item--disabled {
+  color: $disable-color;
+}
+
+.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%;
@@ -175,7 +136,7 @@
     width: $tabs-vertical-titles-width;
     flex-shrink: 0;
 
-    .nut-tabs-list {
+    .nut-tabs__list {
       width: 100%;
       display: flex;
       flex-direction: column;
@@ -183,62 +144,58 @@
     }
   }
 
-  .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;
+  }
 
-    &-smile {
-      width: 0;
-      height: 0;
-      overflow: hidden;
-      transition: width 0.3s ease;
-    }
-
-    &-line {
-      width: 0;
-      height: 0;
-      transform: translate(0, -50%);
-      transition: height 0.3s ease;
-    }
+  .nut-tabs__titles-item__smile {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    transition: width 0.3s ease;
+  }
 
-    &-active {
-      background-color: $tabs-titles-item-active-background-color;
+  .nut-tabs__titles-item__line {
+    width: 0;
+    height: 0;
+    transform: translate(0, -50%);
+    transition: height 0.3s ease;
+  }
 
-      .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--active {
+    background-color: $tabs-horizontal-titles-item-active-background-color;
 
-      .nut-tabs-titles-item-smile {
-        right: -5px;
-        bottom: 2%;
-        left: auto;
-        width: 40px;
-        height: 20px;
-        transform: rotate(320deg);
-      }
+    .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;
     }
 
-    &:first-child {
-      margin: 0 $tabs-titles-gap;
+    .nut-tabs__titles-item__smile {
+      right: -5px;
+      bottom: 2%;
+      left: auto;
+      width: 40px;
+      height: 20px;
+      transform: rotate(320deg);
     }
   }
 
-  .nut-tabs-horizontal {
-    .nut-tabs-titles {
+  .nut-tabs--horizontal {
+    .nut-tabs__titles {
       flex-direction: row;
       overflow-x: auto;
       overflow-y: hidden;
-      height: $tabs-titles-height;
+      height: $tabs-horizontal-titles-height;
 
-      .nut-tabs-list {
+      .nut-tabs__list {
         width: 100%;
         display: flex;
         flex-direction: row;
@@ -246,19 +203,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;
@@ -267,11 +224,11 @@
     }
   }
 
-  .nut-tabs-content {
+  .nut-tabs__content {
     flex-direction: column;
     height: 100%;
 
-    &-wrap {
+    &__wrap {
       flex: 1;
     }
 
@@ -280,29 +237,28 @@
     }
   }
 
-  .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: $color-primary;
+        &--active {
+          color: $tabs-titles-item-active-color;
           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-tab-line-width;
-            height: $tabs-tab-line-height;
-            background: $tabs-tab-line-color;
+            width: $tabs-horizontal-titles-item-active-line-width;
+            height: $tabs-horizontal-titles-item-active-line-height;
+            background: $tabs-horizontal-tab-line-color;
           }
         }
       }
@@ -310,8 +266,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: $color-title;
+    &.nut-tag--plain {
+      color: $tag-background-color;
       background-color: #fff;
-      border: $tag-border-width solid $color-title;
+      border: $tag-border-width solid $tag-background-color;
     }
   }
 
-  &-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: $color-background-overlay;
+  background: $white;
   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,24 +2,25 @@
   display: flex;
   align-content: flex-start;
   flex-wrap: wrap;
-  padding: 0 0 50px 12px;
+  padding: 0 0 50px 13px;
 
-  &-item {
+  &__item {
     width: $timeselect-time-width;
     height: $timeselect-time-height;
-    line-height: $timeselect-time-height;
+    line-height: $timeselect-time-line-height;
     text-align: center;
     margin: $timeselect-time-margin;
     background: $timeselect-time-background;
+    color: $timeselect-time-color;
     border-radius: 5px;
-    font-size: $font-size-base;
+    font-size: $timeselect-time-font-size;
     border: 1px solid transparent;
+    font-weight: 700;
 
     &.active {
-      background-color: $color-primary-light;
-      border: 1px solid $color-primary;
-      color: $color-primary;
-      font-weight: $font-weight-bold;
+      background-color: $timeselect-time-active-background;
+      border: 1px solid $timeselect-time-active-color;
+      color: $timeselect-time-active-color;
     }
   }
 }

package/dist/packages/timeselect/timeselect.scss

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