@nutui/nutui-react-taro 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/packages/tabs/tabs.scss

@@ -1,284 +1,255 @@
 @import '../../styles/mixins/index';
 
-.nut-theme-dark {
-  .nut-tabs {
-    .nut-tabpane {
-      color: $white;
-    }
+.nut-tabs {
+  display: flex;
+}
 
-    &__titles {
-      background: $dark5;
+.nut-tabs__titles {
+  box-sizing: border-box;
+  height: $tabs-horizontal-titles-height;
+  padding: 0 10px;
+  display: flex;
+  user-select: none;
+  background: $tabs-titles-background-color;
+  border-radius: $tabs-titles-border-radius;
+  flex-shrink: 0;
+  overflow: hidden;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    background: transparent;
+  }
+}
 
-      &-item {
-        color: $dark1;
+.nut-tabs__titles--left {
+  justify-content: flex-start;
+}
 
-        &.active {
-          color: $dark1;
-        }
+.nut-tabs__titles--right {
+  justify-content: flex-end;
+}
 
-        &__text {
-          color: $dark1;
-        }
-      }
-    }
+.nut-tabs__titles--scrollable {
+  overflow-x: auto;
+  overflow-y: hidden;
 
-    &.vertical {
-      .nut-tabs__titles {
-        &-item {
-          &.active {
-            background-color: $dark5;
-          }
-        }
-      }
-    }
+  .nut-tabs__titles-item {
+    width: auto;
   }
 }
 
-.nut-tabs {
+.nut-tabs__titles-item {
+  position: relative;
+  min-width: $tabs-horizontal-titles-item-min-width;
   display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  margin: 0 $nut-tabs-title-gap;
+  font-size: $tabs-titles-item-font-size;
+  color: $tabs-titles-item-color;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  &.horizontal {
-    flex-direction: column;
-  }
-
-  &.vertical {
-    flex-direction: row;
-    width: 100%;
-
-    .nut-tabs__titles {
-      box-sizing: border-box;
-      flex-direction: column;
-      height: 100%;
-      padding: 0 !important;
-      width: $tabs-vertical-titles-width;
-      flex-shrink: 0;
-
-      &.scrollable {
-        overflow-x: hidden;
-        overflow-y: auto;
-      }
-
-      .nut-tabs__titles-item {
-        height: $tabs-vertical-titles-item-height;
-        flex: none;
-
-        .nut-tabs__titles-item__smile {
-          transition: width 0.3s ease;
-        }
+.nut-tabs__titles-item--left,
+.nut-tabs__titles-item--right {
+  flex: none;
+}
 
-        .nut-tabs__titles-item__line {
-          bottom: none;
-          transform: translate(0, -50%);
-          transition: height 0.3s ease;
-          width: 0;
-          height: 0;
-        }
+.nut-tabs__titles-item__text {
+  text-align: center;
+}
 
-        &.active {
-          background-color: $tabs-horizontal-titles-item-active-background-color;
+.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;
+}
 
-          .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 {
+  bottom: -2%;
 
-          .nut-tabs__titles-item__smile {
-            right: -2px;
-            bottom: 2px;
-            left: auto;
-            width: 3px;
-            transform: rotate(320deg);
-            height: $tabs-vertical-titles-item-active-line-height;
-          }
-        }
-      }
-    }
+  .nut-icon {
+    position: absolute;
+    font-size: 12px;
+    width: 100%;
+    height: 100%;
+    color: $tabs-tab-smile-color;
+  }
+}
 
-    .nut-tabs__content {
-      flex-direction: column;
+.nut-tabs__titles-item--active {
+  color: $tabs-titles-item-active-color;
+  font-weight: $tabs-titles-item-active-font-weight;
 
-      &__wrap {
-        flex: 1;
-      }
+  .nut-tabs__titles-item__smile {
+    overflow: unset;
+    width: 40px;
+    height: 20px;
+  }
 
-      height: 100%;
+  .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-tabpane {
-        height: 100%;
-      }
-    }
+.nut-tabs__titles-item--disabled {
+  color: $disable-color;
+}
 
-    .horizontal {
-      .nut-tabs__titles {
-        display: flex;
-        flex-direction: row;
-        padding: 0 !important;
-        width: 100%;
+.nut-tabs--horizontal {
+  flex-direction: column;
+}
 
-        .nut-tabs__titles-item {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex: 1 0 auto;
+.nut-tabs--vertical {
+  flex-direction: row;
+  width: 100%;
 
-          .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);
-            overflow: hidden;
-            border-radius: $tabs-horizontal-tab-line-border-radius;
-            opacity: $tabs-horizontal-tab-line-opacity;
-          }
+  .nut-tabs__titles {
+    box-sizing: border-box;
+    flex-direction: column;
+    height: 100%;
+    padding: 0;
+    width: $tabs-vertical-titles-width;
+    flex-shrink: 0;
+  }
 
-          &.active {
-            color: $tabs-titles-item-active-color;
-            font-weight: $tabs-titles-item-active-font-weight;
+  .nut-tabs__titles--scrollable {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
 
-            .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;
-            }
-          }
-        }
-      }
-    }
+  .nut-tabs__titles-item {
+    height: $tabs-vertical-titles-item-height;
+    flex: none;
   }
 
-  .nut-tabs__titles {
-    height: $tabs-horizontal-titles-height;
-    padding: 0 10px;
-    display: flex;
-    user-select: none;
-    background: $tabs-titles-background-color;
-    border-radius: $tabs-titles-border-radius;
-    flex-shrink: 0;
+  .nut-tabs__titles-item__smile {
+    width: 0;
+    height: 0;
     overflow: hidden;
+    transition: width 0.3s ease;
+  }
 
-    &.large {
-      .nut-tabs__titles-item {
-        font-size: $tabs-titles-item-large-font-size;
-      }
-    }
+  .nut-tabs__titles-item__line {
+    width: 0;
+    height: 0;
+    transform: translate(0, -50%);
+    transition: height 0.3s ease;
+  }
 
-    &.normal {
-      .nut-tabs__titles-item {
-        font-size: $tabs-titles-item-font-size;
-      }
-    }
+  .nut-tabs__titles-item--active {
+    background-color: $tabs-horizontal-titles-item-active-background-color;
 
-    &.small {
-      .nut-tabs__titles-item {
-        font-size: $tabs-titles-item-small-font-size;
-      }
+    .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;
     }
 
-    &::-webkit-scrollbar {
-      display: none;
-      width: 0;
-      background: transparent;
-    }
-
-    &.smile {
-      .nut-tabs__titles-item {
-        &.active {
-          .nut-tabs__titles-item__smile {
-            width: 20px;
-            height: 8px;
-          }
-        }
-      }
+    .nut-tabs__titles-item__smile {
+      right: -5px;
+      bottom: 2%;
+      left: auto;
+      width: 40px;
+      height: 20px;
+      transform: rotate(320deg);
     }
+  }
 
-    &.scrollable {
+  .nut-tabs--horizontal {
+    .nut-tabs__titles {
+      flex-direction: row;
       overflow-x: auto;
       overflow-y: hidden;
-
-      .nut-tabs__titles-item {
-        width: auto;
-      }
+      height: $tabs-horizontal-titles-height;
     }
 
-    .nut-tabs__titles-item {
-      position: relative;
-      font-size: $tabs-titles-item-font-size;
-      min-width: $tabs-horizontal-titles-item-min-width;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex: 1 0 auto;
-      color: $tabs-titles-item-color;
-
-      .nut-tabs__titles-item__text {
-        text-align: center;
+    .nut-tabs__content {
+      flex-direction: row;
+    }
 
-        &.ellipsis {
-          @include oneline-ellipsis();
-        }
-      }
+    .nut-tabs__titles-item--active {
+      background-color: initial;
 
-      .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);
-        overflow: hidden;
-        border-radius: $tabs-horizontal-tab-line-border-radius;
-        opacity: $tabs-horizontal-tab-line-opacity;
       }
 
       .nut-tabs__titles-item__smile {
-        .nut-icon {
-          position: absolute;
-          font-size: 12px;
-          width: 100%;
-          height: 100%;
-          color: $tabs-tab-smile-color;
-        }
+        left: 50%;
+        right: auto;
+        bottom: -3px;
+        transform: translate(-50%, 0) rotate(0deg);
       }
+    }
+  }
 
-      &.nut-tabs__titles-item-left-align {
-        flex: none;
-      }
+  .nut-tabs__content {
+    flex-direction: column;
+    height: 100%;
 
-      &.disabled {
-        color: $disable-color;
-      }
+    &__wrap {
+      flex: 1;
+    }
 
-      &.active {
-        color: $tabs-titles-item-active-color;
-        font-weight: $tabs-titles-item-active-font-weight;
+    .nut-tabpane {
+      height: 100%;
+    }
+  }
 
-        .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;
+  .nut-tabs--horizontal {
+    .nut-tabs__titles {
+      display: flex;
+      flex-direction: row;
+      padding: 0 !important;
+      width: 100%;
+
+      .nut-tabs__titles-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1 0 auto;
+
+        &--active {
+          color: $tabs-titles-item-active-color;
+          font-weight: $tabs-titles-item-active-font-weight;
+
+          .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;
+          }
         }
       }
     }
   }
+}
 
-  &__content {
-    &__wrap {
-      overflow: hidden;
-    }
-
-    display: flex;
-    box-sizing: border-box;
+.nut-tabs__content {
+  &__wrap {
+    overflow: hidden;
   }
+
+  display: flex;
+  box-sizing: border-box;
 }