@tendaui/components 1.2.3 → 1.3.0

package/styles/components/tabs/_index.scss

@@ -1,165 +1,165 @@
-@import "../../vars.scss";
-@import "./vars.scss";
-@import "./_mixins.scss";
-@import "../../mixins/reset.scss";
-
-.#{$prefix}-tabs {
-  @include reset;
-  overflow: hidden;
-  background-color: $tab-default-bg;
-
-  &__header {
-    &.#{$prefix}-is-left {
-      float: left;
-    }
-
-    &.#{$prefix}-is-right {
-      float: right;
-    }
-    .t-icon {
-      font-size: $tab-icon-size;
-    }
-  }
-  &__nav {
-    position: relative;
-    overflow: hidden;
-    user-select: none;
-  }
-
-  &__nav-container {
-    position: relative;
-
-    &.#{$prefix}-is-addable {
-      margin-right: $tab-btn-width;
-    }
-
-    &.#{$prefix}-tabs__nav--card {
-      // border-bottom: 1px solid $tab-default-stroke;
-
-      &::after {
-        content: "";
-        background-color: transparent;
-      }
-    }
-  }
-
-  &__nav-item {
-    display: inline-flex;
-    align-items: center;
-    font: $font-body-medium;
-    color: $tab-default-text;
-    position: relative;
-    overflow: hidden;
-    z-index: 0;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: $tab-nav-item-transition;
-
-    &-wrapper {
-      display: flex;
-      align-items: center;
-      height: $tab-nav-item-wrapper-height;
-      padding: $tab-nav-item-wrapper-padding;
-      margin-left: $tab-nav-item-margin-left;
-      margin-right: $tab-nav-item-margin-right;
-      border-radius: $border-radius-default;
-      transition: $tab-nav-item-transition;
-
-      --ripple-color: $bg-color-container-active;
-    }
-
-    &.#{$prefix}-size-l {
-      font: $tab-nav-item-font;
-
-      .#{$prefix}-tabs__nav-item-wrapper {
-        height: $tab-nav-item-wrapper-height-large;
-        padding: $tab-nav-item-wrapper-padding-large;
-      }
-    }
-
-    &-text-wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-    }
-
-    &:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-active):hover {
-      .#{$prefix}-tabs__nav-item-wrapper {
-        background-color: $bg-color-container-hover;
-      }
-    }
-
-    &.#{$prefix}-is-left,
-    &.#{$prefix}-is-right {
-      display: flex;
-      align-items: center;
-    }
-
-    &.#{$prefix}-size-m {
-      height: $tab-height-middle;
-      line-height: $tab-height-middle;
-    }
-
-    &.#{$prefix}-size-l {
-      height: $tab-height-large;
-      line-height: $tab-height-large;
-    }
-
-    &.#{$prefix}-is-active {
-      color: $tab-default-text-select;
-      // font-weight: 500;
-      text-shadow: $tab-btn-text-shadow-active; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代替
-    }
-
-    &.#{$prefix}-is-disabled {
-      color: $tab-default-text-disabled;
-      cursor: not-allowed;
-    }
-
-    & > .remove-btn {
-      margin-left: $tab-btn-remove-btn-margin-left;
-      transition: $tab-btn-remove-btn-transition;
-      display: flex;
-    }
-  }
-  &__content {
-    overflow: hidden;
-    position: relative;
-  }
-  &__bar {
-    position: absolute;
-    background-color: $tab-default-bar-bg-color;
-    z-index: 1;
-    transition: $tab-bar-transition;
-    border-radius: $border-radius-small;
-
-    &.#{$prefix}-is-top {
-      bottom: 0;
-      left: 0;
-      height: $tab-default-stroke-size;
-    }
-
-    &.#{$prefix}-is-bottom {
-      top: 0;
-      left: 0;
-      height: $tab-default-stroke-size;
-    }
-
-    &.#{$prefix}-is-left {
-      top: 0;
-      right: 0;
-      width: $tab-default-stroke-size;
-    }
-
-    &.#{$prefix}-is-right {
-      top: 0;
-      left: 0;
-      width: $tab-default-stroke-size;
-    }
-  }
-}
-.#{$prefix}-tab-panel {
-  &.#{$prefix}-is-hidden {
-    display: none;
-  }
-}
+@use "../../_vars.scss" as *;
+@use "./vars.scss" as *;
+@use "./_mixins.scss" as *;
+@use "../../mixins/reset.scss" as *;
+
+.#{$prefix}-tabs {
+  @include reset;
+  overflow: hidden;
+  background-color: $tab-default-bg;
+
+  &__header {
+    &.#{$prefix}-is-left {
+      float: left;
+    }
+
+    &.#{$prefix}-is-right {
+      float: right;
+    }
+    .t-icon {
+      font-size: $tab-icon-size;
+    }
+  }
+  &__nav {
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  &__nav-container {
+    position: relative;
+
+    &.#{$prefix}-is-addable {
+      margin-inline-end: $tab-btn-width;
+    }
+
+    &.#{$prefix}-tabs__nav--card {
+      // border-bottom: 1px solid $tab-default-stroke;
+
+      &::after {
+        content: "";
+        background-color: transparent;
+      }
+    }
+  }
+
+  &__nav-item {
+    display: inline-flex;
+    align-items: center;
+    font: $font-body-medium;
+    color: $tab-default-text;
+    position: relative;
+    overflow: hidden;
+    z-index: 0;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: $tab-nav-item-transition;
+
+    &-wrapper {
+      display: flex;
+      align-items: center;
+      height: $tab-nav-item-wrapper-height;
+      padding: $tab-nav-item-wrapper-padding;
+      margin-inline-start: $tab-nav-item-margin-left;
+      margin-inline-end: $tab-nav-item-margin-right;
+      border-radius: $border-radius-default;
+      transition: $tab-nav-item-transition;
+
+      --ripple-color: $bg-color-container-active;
+    }
+
+    &.#{$prefix}-size-l {
+      font: $tab-nav-item-font;
+
+      .#{$prefix}-tabs__nav-item-wrapper {
+        height: $tab-nav-item-wrapper-height-large;
+        padding: $tab-nav-item-wrapper-padding-large;
+      }
+    }
+
+    &-text-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    &:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-active):hover {
+      .#{$prefix}-tabs__nav-item-wrapper {
+        background-color: $bg-color-container-hover;
+      }
+    }
+
+    &.#{$prefix}-is-left,
+    &.#{$prefix}-is-right {
+      display: flex;
+      align-items: center;
+    }
+
+    &.#{$prefix}-size-m {
+      height: $tab-height-middle;
+      line-height: $tab-height-middle;
+    }
+
+    &.#{$prefix}-size-l {
+      height: $tab-height-large;
+      line-height: $tab-height-large;
+    }
+
+    &.#{$prefix}-is-active {
+      color: $tab-default-text-select;
+      // font-weight: 500;
+      text-shadow: $tab-btn-text-shadow-active; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代�?    }
+
+      &.#{$prefix}-is-disabled {
+        color: $tab-default-text-disabled;
+        cursor: not-allowed;
+      }
+
+      & > .remove-btn {
+        margin-inline-start: $tab-btn-remove-btn-margin-left;
+        transition: $tab-btn-remove-btn-transition;
+        display: flex;
+      }
+    }
+    &__content {
+      overflow: hidden;
+      position: relative;
+    }
+    &__bar {
+      position: absolute;
+      background-color: $tab-default-bar-bg-color;
+      z-index: 1;
+      transition: $tab-bar-transition;
+      border-radius: $border-radius-small;
+
+      &.#{$prefix}-is-top {
+        bottom: 0;
+        inset-inline-start: 0;
+        height: $tab-default-stroke-size;
+      }
+
+      &.#{$prefix}-is-bottom {
+        top: 0;
+        inset-inline-start: 0;
+        height: $tab-default-stroke-size;
+      }
+
+      &.#{$prefix}-is-left {
+        top: 0;
+        inset-inline-end: 0;
+        width: $tab-default-stroke-size;
+      }
+
+      &.#{$prefix}-is-right {
+        top: 0;
+        inset-inline-start: 0;
+        width: $tab-default-stroke-size;
+      }
+    }
+  }
+  .#{$prefix}-tab-panel {
+    &.#{$prefix}-is-hidden {
+      display: none;
+    }
+  }
+}

package/styles/components/tabs/_mixins.scss

@@ -1,11 +1,11 @@
-@mixin bar-track-pseudo($w: 100%, $h: 100%, $top: auto, $right: auto, $bottom: auto, $left: auto) {
-  content: "";
-  width: $w;
-  height: $h;
-  position: absolute;
-  top: $top;
-  right: $right;
-  bottom: $bottom;
-  left: $left;
-  background-color: $tab-card-stroke;
-}
+@mixin bar-track-pseudo($w: 100%, $h: 100%, $top: auto, $right: auto, $bottom: auto, $left: auto) {
+  content: "";
+  width: $w;
+  height: $h;
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+  background-color: $tab-card-stroke;
+}

package/styles/components/tabs/_vars.scss

@@ -1,71 +1,72 @@
-// 默认选项卡
-$tab-default-bg: $bg-color-container;
-$tab-default-bg-hover: $bg-color-container-hover;
-$tab-default-bg-active: $bg-color-container-active;
-
-$tab-default-text: $text-color-secondary;
-$tab-default-text-select: $brand-color;
-$tab-default-text-disabled: $text-color-disabled;
-
-$tab-default-icon: $text-color-secondary;
-$tab-default-icon-select: $brand-color;
-$tab-default-icon-disabled: $text-color-disabled;
-
-$tab-default-stroke: $component-stroke;
-$tab-default-bar-bg-color: $brand-color;
-$tab-default-stroke-size: 3px;
-
-// 卡片选项卡
-$tab-card-bg: $bg-color-secondarycontainer;
-$tab-card-bg-hover: $bg-color-secondarycontainer-hover;
-$tab-card-bg-active: $bg-color-secondarycontainer-active;
-$tab-card-bg-select: $bg-color-container;
-
-$tab-card-text: $text-color-secondary;
-$tab-card-text-select: $brand-color;
-$tab-card-text-disabled: $text-color-disabled;
-
-$tab-card-icon: $text-color-secondary;
-$tab-card-icon-select: $text-color-primary;
-$tab-card-icon-disabled: $text-color-disabled;
-
-$tab-card-stroke: $component-stroke;
-
-// 其他
-$tab-height-middle: $comp-size-xxl;
-$tab-height-large: $comp-size-xxxxl;
-$tab-nav-item-wrapper-height: $comp-size-m;
-$tab-nav-item-wrapper-height-large: $comp-size-xxl;
-$tab-btn-width: 40px;
-$tab-nav-item-margin-left: $comp-margin-s;
-$tab-nav-item-margin-right: $comp-margin-s;
-$tab-nav-item-wrapper-padding: 0 $comp-paddingLR-s;
-$tab-nav-item-wrapper-padding-large: 0 $comp-paddingLR-m;
-$tab-btn-remove-btn-margin-left: $comp-margin-s;
-$tab-nav-card-nav-item-padding-right: $comp-paddingLR-l;
-$tab-nav-card-nav-item-padding-left: $comp-paddingLR-l;
-$tab-nav-card-nav-item-padding-right-large: $comp-paddingLR-xl;
-$tab-nav-card-nav-item-padding-left-large: $comp-paddingLR-xl;
-
-// 尺寸
-$tab-icon-size: $font-size-l; // icon尺寸
-$tab-nav-item-font: $font-body-large; // tab文本字体大小
-
-// 圆角&边框
-$tab-btn-border: 1px solid $tab-card-stroke; // 按钮边框
-$tab-bar-operations-border: 1px solid $tab-card-stroke; // 卡片边框
-
-// 动画&过度
-$tab-nav-scroll-transform: translate(0); // 滚动栏滚动过度
-$tab-btn-fade-transform-left: translateX(-50px); // 按钮过渡动画
-$tab-btn-fade-transform-right: translateX(50px); // 按钮过渡动画
-$tab-nav-warp-is-smooth-transform: transform $anim-duration-moderate $anim-time-fn-ease-out; // smooth 过渡动画
-$tab-nav-item-transition: background-color $anim-time-fn-easing $anim-duration-base;
-$tab-btn-remove-btn-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); // 删除按钮动画过渡
-$tab-btn-icon-close-transition: color $anim-time-fn-easing $anim-duration-base; // 关闭按钮过渡动画
-
-// 阴影
-$tab-bar-operations-btn-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 5%); // 按钮阴影
-$tab-bar-transition: all $anim-duration-moderate $anim-time-fn-easing; // 选项卡过渡动画
-$tab-btn-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); // 按钮阴影
-$tab-btn-text-shadow-active: 0 0 0.3px currentcolor; // 按钮选中颜色 win系统兼容
+@use "../../_vars.scss" as *;
+// 默认选项卡
+$tab-default-bg: $bg-color-container;
+$tab-default-bg-hover: $bg-color-container-hover;
+$tab-default-bg-active: $bg-color-container-active;
+
+$tab-default-text: $text-color-secondary;
+$tab-default-text-select: $brand-color;
+$tab-default-text-disabled: $text-color-disabled;
+
+$tab-default-icon: $text-color-secondary;
+$tab-default-icon-select: $brand-color;
+$tab-default-icon-disabled: $text-color-disabled;
+
+$tab-default-stroke: $component-stroke;
+$tab-default-bar-bg-color: $brand-color;
+$tab-default-stroke-size: 3px;
+
+// 卡片选项卡
+$tab-card-bg: $bg-color-secondarycontainer;
+$tab-card-bg-hover: $bg-color-secondarycontainer-hover;
+$tab-card-bg-active: $bg-color-secondarycontainer-active;
+$tab-card-bg-select: $bg-color-container;
+
+$tab-card-text: $text-color-secondary;
+$tab-card-text-select: $brand-color;
+$tab-card-text-disabled: $text-color-disabled;
+
+$tab-card-icon: $text-color-secondary;
+$tab-card-icon-select: $text-color-primary;
+$tab-card-icon-disabled: $text-color-disabled;
+
+$tab-card-stroke: $component-stroke;
+
+// 其他
+$tab-height-middle: $comp-size-xxl;
+$tab-height-large: $comp-size-xxxxl;
+$tab-nav-item-wrapper-height: $comp-size-m;
+$tab-nav-item-wrapper-height-large: $comp-size-xxl;
+$tab-btn-width: 40px;
+$tab-nav-item-margin-left: $comp-margin-s;
+$tab-nav-item-margin-right: $comp-margin-s;
+$tab-nav-item-wrapper-padding: 0 $comp-paddingLR-s;
+$tab-nav-item-wrapper-padding-large: 0 $comp-paddingLR-m;
+$tab-btn-remove-btn-margin-left: $comp-margin-s;
+$tab-nav-card-nav-item-padding-right: $comp-paddingLR-l;
+$tab-nav-card-nav-item-padding-left: $comp-paddingLR-l;
+$tab-nav-card-nav-item-padding-right-large: $comp-paddingLR-xl;
+$tab-nav-card-nav-item-padding-left-large: $comp-paddingLR-xl;
+
+// 尺寸
+$tab-icon-size: $font-size-l; // icon尺寸
+$tab-nav-item-font: $font-body-large; // tab文本字体大小
+
+// 圆角&边框
+$tab-btn-border: 1px solid $tab-card-stroke; // 按钮边框
+$tab-bar-operations-border: 1px solid $tab-card-stroke; // 卡片边框
+
+// 动画&过度
+$tab-nav-scroll-transform: translate(0); // 滚动栏滚动动画
+$tab-btn-fade-transform-left: translateX(-50px); // 按钮过渡动画
+$tab-btn-fade-transform-right: translateX(50px); // 按钮过渡动画
+$tab-nav-warp-is-smooth-transform: transform $anim-duration-moderate $anim-time-fn-ease-out; // smooth 过渡动画
+$tab-nav-item-transition: background-color $anim-time-fn-easing $anim-duration-base;
+$tab-btn-remove-btn-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); // 删除按钮动画过渡
+$tab-btn-icon-close-transition: color $anim-time-fn-easing $anim-duration-base; // 关闭按钮过渡动画
+
+// 阴影
+$tab-bar-operations-btn-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 5%); // 按钮阴影
+$tab-bar-transition: all $anim-duration-moderate $anim-time-fn-easing; // 选项卡过渡动画
+$tab-btn-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); // 按钮阴影
+$tab-btn-text-shadow-active: 0 0 0.3px currentcolor; // 按钮选中颜色 win系统兼容