@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/tabs/constants.d.ts

@@ -1,28 +0,0 @@
-declare const cssClasses: {
-    TABS: string;
-    TABS_BAR: string;
-    TABS_BAR_LINE: string;
-    TABS_BAR_CARD: string;
-    TABS_BAR_BUTTON: string;
-    TABS_BAR_EXTRA: string;
-    TABS_TAB: string;
-    TABS_TAB_ACTIVE: string;
-    TABS_TAB_DISABLED: string;
-    TABS_CONTENT: string;
-    TABS_CONTENT_ANIMATED: string;
-    TABS_CONTENT_NO_ANIMATED: string;
-    TABS_PANE: string;
-    TABS_PANE_INACTIVE: string;
-    TABS_PANE_ACTIVE: string;
-    TABS_PANE_MOTION_OVERLAY: string;
-    TABS_PANE_ANIMATING: string;
-};
-declare const numbers: {
-    DEFAULT_ACTIVE_KEY: number;
-};
-declare const strings: {
-    TYPE_MAP: string[];
-    SIZE: string[];
-    POSITION_MAP: string[];
-};
-export { cssClasses, numbers, strings };

package/lib/cjs/tabs/constants.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.strings = exports.numbers = exports.cssClasses = void 0;
-
-var _constants = require("../base/constants");
-
-const cssClasses = {
-  TABS: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs"),
-  TABS_BAR: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar"),
-  TABS_BAR_LINE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar-line"),
-  TABS_BAR_CARD: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar-card"),
-  TABS_BAR_BUTTON: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar-button"),
-  TABS_BAR_EXTRA: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar-extra"),
-  TABS_TAB: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-tab"),
-  TABS_TAB_ACTIVE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-tab-active"),
-  TABS_TAB_DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-tab-disabled"),
-  TABS_CONTENT: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-content"),
-  TABS_CONTENT_ANIMATED: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-content-animated"),
-  TABS_CONTENT_NO_ANIMATED: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-content-no-animated"),
-  TABS_PANE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane"),
-  TABS_PANE_INACTIVE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-inactive"),
-  TABS_PANE_ACTIVE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-active"),
-  TABS_PANE_MOTION_OVERLAY: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-motion-overlay"),
-  TABS_PANE_ANIMATING: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-animating")
-};
-exports.cssClasses = cssClasses;
-const numbers = {
-  DEFAULT_ACTIVE_KEY: 1
-};
-exports.numbers = numbers;
-const strings = {
-  TYPE_MAP: ['line', 'card', 'button'],
-  SIZE: ['small', 'medium', 'large'],
-  POSITION_MAP: ['top', 'left']
-};
-exports.strings = strings;

package/lib/cjs/tabs/foundation.d.ts

@@ -1,20 +0,0 @@
-import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export interface TabsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    collectPane: () => void;
-    notifyTabClick: (activeKey: string, event: any) => void;
-    notifyChange: (activeKey: string) => void;
-    setNewActiveKey: (activeKey: string) => void;
-    getDefaultActiveKeyFromChildren: () => string;
-}
-declare class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TabsAdapter<P, S>, P, S> {
-    constructor(adapter: TabsAdapter<P, S>);
-    init(): void;
-    destroy: (...args: any[]) => void;
-    _notifyChange(activeKey: string): void;
-    handleTabClick(activeKey: string, event: any): void;
-    handleNewActiveKey(activeKey: string): void;
-    getDefaultActiveKey(): string;
-    handleTabListChange(): void;
-    handleTabPanesChange(): void;
-}
-export default TabsFoundation;

package/lib/cjs/tabs/foundation.js

@@ -1,99 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-
-var _lodashEs = require("lodash-es");
-
-class TabsFoundation extends _foundation.default {
-  constructor(adapter) {
-    super((0, _assign.default)({}, adapter));
-    this.destroy = _lodashEs.noop;
-  }
-
-  init() {
-    this._adapter.collectPane();
-  }
-
-  _notifyChange(activeKey) {
-    const {
-      activeKey: stateActiveKey
-    } = this.getStates();
-
-    if (stateActiveKey !== activeKey) {
-      this._adapter.notifyChange(activeKey);
-    }
-  }
-
-  handleTabClick(activeKey, event) {
-    const isControledComponent = this._isInProps('activeKey');
-
-    if (isControledComponent) {
-      this._notifyChange(activeKey);
-    } else {
-      this._notifyChange(activeKey);
-
-      this.handleNewActiveKey(activeKey);
-    }
-
-    this._adapter.notifyTabClick(activeKey, event);
-  }
-
-  handleNewActiveKey(activeKey) {
-    const {
-      activeKey: stateActiveKey
-    } = this.getStates();
-
-    if (stateActiveKey !== activeKey) {
-      this._adapter.setNewActiveKey(activeKey);
-    }
-  }
-
-  getDefaultActiveKey() {
-    let activeKey;
-    const props = this.getProps();
-
-    if ('activeKey' in props) {
-      activeKey = props.activeKey;
-    } else if ('defaultActiveKey' in props) {
-      activeKey = props.defaultActiveKey;
-    } else {
-      activeKey = this._adapter.getDefaultActiveKeyFromChildren();
-    }
-
-    return activeKey;
-  }
-
-  handleTabListChange() {
-    this._adapter.collectPane();
-  }
-
-  handleTabPanesChange() {
-    this._adapter.collectPane();
-
-    let activeKey = this.getState('activeKey');
-
-    if (typeof activeKey === 'undefined') {
-      activeKey = this._adapter.getDefaultActiveKeyFromChildren();
-    }
-
-    if (typeof activeKey !== 'undefined') {
-      this.handleNewActiveKey(activeKey);
-    }
-  }
-
-}
-
-var _default = TabsFoundation;
-exports.default = _default;

package/lib/cjs/tabs/rtl.scss

@@ -1,123 +0,0 @@
-$module: #{$prefix}-tabs;
-
-.#{$prefix}-rtl,
-.#{$prefix}-portal-rtl {
-    .#{$module} {
-        direction: rtl;
-
-        &-bar {
-            .#{$module}-tab {
-                float: right;
-
-                .#{$prefix}-icon {
-                    margin-right: 0;
-                    margin-left: $spacing-tabs_tab_icon-marginRight;
-                }
-            }
-        }
-
-        &-bar-collapse {
-            .#{$module}-bar-arrow-start {
-                margin-right: 0;
-                margin-left: $spacing-tabs_overflow_icon-marginRight;
-            }
-
-            .#{$module}-bar-arrow-end {
-                margin-left: 0;
-                margin-right: $spacing-tabs_overflow_icon-marginLeft;
-            }
-
-            .#{$prefix}-icon-chevron_right,
-            .#{$prefix}-icon-chevron_left {
-                transform: scaleX(-1);
-            }
-        }
-
-        &-bar-line {
-            &.#{$module}-bar-top {
-                .#{$module}-tab {
-
-                    &:not(:last-of-type) {
-                        margin-right: 0;
-                        margin-left: $spacing-tabs_bar_line_tab-marginRight;
-                    }
-                }
-            }
-
-            &.#{$module}-bar-left {
-                border-right: 0;
-                border-left: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
-
-                .#{$module}-tab {
-                    border-left: 0;
-                    border-right: $width-tabs_bar_line_tab-border solid transparent;
-
-                    &:hover {
-                        border-left: 0;
-                        border-right: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
-                    }
-
-                    &:active {
-                        border-left: 0;
-                        border-right: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
-                    }
-                }
-
-                .#{$module}-tab-active {
-
-                    &,
-                    &:hover {
-                        border-left: 0;
-                        border-right: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
-                    }
-                }
-            }
-        }
-
-        &-bar-card {
-            &.#{$module}-bar-top {
-                .#{$module}-tab {
-
-                    &:not(:last-of-type) {
-                        margin-left: 0;
-                        margin-right: $spacing-tabs_bar_card_tab-marginRight;
-                    }
-                }
-            }
-
-            &.#{$module}-bar-left {
-                border-right: 0;
-                border-left: $width-tabs_bar_card-border solid $color-tabs_tab_line_default-border-default;
-
-                .#{$module}-tab {
-                    border: $width-tabs_bar_card-border solid transparent;
-                    border-left: none;
-
-                    &:hover {
-                        border-left: none;
-                    }
-                }
-
-                .#{$module}-tab-active {
-
-                    &:after {
-                        right: auto;
-                        left: -1px;
-                    }
-                }
-            }
-        }
-
-        &-bar-button {
-            &.#{$module}-bar-top {
-                .#{$module}-tab {
-
-                    &:not(:last-of-type) {
-                        margin-right: auto;
-                        margin-left: $spacing-tabs_bar_button_tab-marginRight;
-                    }
-                }
-            }
-        }
-    }
-}

package/lib/cjs/tabs/tabs.css

@@ -1,366 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-.semi-tabs {
-  box-sizing: border-box;
-  position: relative;
-}
-.semi-tabs-left {
-  display: flex;
-  flex-direction: row;
-}
-.semi-tabs-bar {
-  position: relative;
-  white-space: nowrap;
-  outline: none;
-}
-.semi-tabs-bar-left {
-  display: flex;
-  flex-direction: column;
-}
-.semi-tabs-bar-extra {
-  padding: 0 5px;
-}
-.semi-tabs-bar .semi-tabs-tab {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  cursor: pointer;
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  float: left;
-  font-weight: 400;
-  color: var(--semi-color-text-2);
-  user-select: none;
-}
-.semi-tabs-bar .semi-tabs-tab .semi-icon {
-  position: relative;
-  margin-right: 8px;
-  top: 3px;
-  color: var(--semi-color-text-2);
-}
-.semi-tabs-bar .semi-tabs-tab:hover {
-  color: var(--semi-color-text-0);
-}
-.semi-tabs-bar .semi-tabs-tab:hover .semi-icon {
-  color: var(--semi-color-text-0);
-}
-.semi-tabs-bar .semi-tabs-tab:active {
-  color: var(--semi-color-text-0);
-}
-.semi-tabs-bar .semi-tabs-tab:active .semi-icon {
-  color: var(--semi-color-text-0);
-}
-.semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover {
-  color: var(--semi-color-text-0);
-  cursor: default;
-  font-weight: 600;
-  color: var(--semi-color-text-0);
-}
-.semi-tabs-bar .semi-tabs-tab-active .semi-icon, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon {
-  color: var(--semi-color-primary);
-}
-.semi-tabs-bar .semi-tabs-tab-disabled {
-  cursor: not-allowed;
-  color: var(--semi-color-disabled-text);
-}
-.semi-tabs-bar .semi-tabs-tab-disabled:hover {
-  color: var(--semi-color-disabled-text);
-  border-bottom: none;
-}
-.semi-tabs-bar-collapse,
-.semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
-  display: flex;
-  align-items: center;
-}
-.semi-tabs-bar-collapse .semi-overflow-list {
-  flex: 1;
-}
-.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper {
-  -ms-overflow-style: none;
-  /* Internet Explorer 10+ */
-  scrollbar-width: none;
-  /* Firefox */
-}
-.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper::-webkit-scrollbar {
-  display: none;
-  /* Safari and Chrome */
-  width: 0;
-  height: 0;
-}
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
-  margin-right: 4px;
-}
-.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
-  margin-left: 4px;
-}
-.semi-tabs-bar-dropdown {
-  max-height: 300px;
-  overflow-y: auto;
-}
-.semi-tabs-bar:after {
-  content: "";
-  height: 0;
-  display: block;
-  clear: both;
-}
-.semi-tabs-bar-line.semi-tabs-bar-top {
-  border-bottom: 1px solid var(--semi-color-border);
-}
-.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab {
-  padding: 16px 4px 14px 4px;
-  border-bottom: 2px solid transparent;
-}
-.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:nth-of-type(1) {
-  padding-left: 0;
-}
-.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover {
-  border-bottom: 2px solid var(--semi-color-fill-0);
-}
-.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active {
-  border-bottom: 2px solid var(--semi-color-fill-1);
-}
-.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
-  margin-right: 24px;
-}
-.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-small {
-  padding: 8px 4px 6px 4px;
-}
-.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-medium {
-  padding: 12px 4px 10px 4px;
-}
-.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover {
-  border-bottom: 2px solid var(--semi-color-primary);
-}
-.semi-tabs-bar-line.semi-tabs-bar-left {
-  border-right: 1px solid var(--semi-color-border);
-}
-.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab {
-  padding: 12px;
-  border-left: 2px solid transparent;
-}
-.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover {
-  border-left: 2px solid var(--semi-color-fill-0);
-  background-color: var(--semi-color-fill-0);
-}
-.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
-  border-left: 2px solid var(--semi-color-fill-1);
-  background-color: var(--semi-color-fill-1);
-}
-.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-small {
-  padding: 6px;
-}
-.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-medium {
-  padding: 10px;
-}
-.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active {
-  background-color: var(--semi-color-primary-light-default);
-}
-.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover {
-  border-left: 2px solid var(--semi-color-primary);
-  background-color: var(--semi-color-primary-light-default);
-}
-.semi-tabs-bar-line .semi-tabs-bar-extra {
-  height: 50px;
-  line-height: 50px;
-}
-.semi-tabs-bar-line .semi-tabs-bar-line-extra-small {
-  height: 36px;
-  line-height: 36px;
-}
-.semi-tabs-bar-card.semi-tabs-bar-top::before {
-  position: absolute;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  border-bottom: 1px solid var(--semi-color-border);
-  content: "";
-}
-.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab {
-  border: 1px solid transparent;
-  border-bottom: none;
-  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
-}
-.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:hover {
-  border-bottom: none;
-}
-.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
-  margin-right: 8px;
-}
-.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active:hover {
-  padding: 8px 12px 7px 12px;
-  border: 1px solid var(--semi-color-border);
-  border-bottom: 1px solid var(--semi-color-bg-1);
-  background: transparent;
-}
-.semi-tabs-bar-card.semi-tabs-bar-left {
-  border-right: 1px solid var(--semi-color-border);
-}
-.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab {
-  border: 1px solid transparent;
-  border-right: none;
-  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
-}
-.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover {
-  border-right: none;
-}
-.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after {
-  content: " ";
-  width: 1px;
-  position: absolute;
-  right: -1px;
-  top: 0;
-  bottom: 0;
-  background: var(--semi-color-bg-1);
-}
-.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:hover {
-  padding: 8px 12px;
-  border: 1px solid var(--semi-color-border);
-  border-right: none;
-  background: transparent;
-}
-.semi-tabs-bar-card .semi-tabs-tab {
-  padding: 8px 12px;
-}
-.semi-tabs-bar-card .semi-tabs-tab:hover {
-  background: var(--semi-color-fill-0);
-}
-.semi-tabs-bar-card .semi-tabs-tab:active {
-  background: var(--semi-color-fill-1);
-}
-.semi-tabs-bar-button {
-  border: none;
-}
-.semi-tabs-bar-button.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-.semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
-  margin-right: 8px;
-}
-.semi-tabs-bar-button .semi-tabs-tab {
-  padding: 8px 12px;
-  border-radius: var(--semi-border-radius-small);
-  color: var(--semi-color-text-2);
-  border: none;
-}
-.semi-tabs-bar-button .semi-tabs-tab:hover {
-  border: none;
-  background-color: var(--semi-color-fill-0);
-}
-.semi-tabs-bar-button .semi-tabs-tab:active {
-  background-color: var(--semi-color-fill-1);
-}
-.semi-tabs-bar-button .semi-tabs-tab-active, .semi-tabs-bar-button .semi-tabs-tab-active:hover {
-  color: var(--semi-color-primary);
-  border: none;
-  background-color: var(--semi-color-primary-light-default);
-}
-.semi-tabs-content {
-  width: 100%;
-  padding: 5px 0;
-}
-.semi-tabs-content-left {
-  height: 100%;
-  padding: 0 5px;
-}
-.semi-tabs-pane {
-  width: 100%;
-  overflow: hidden;
-}
-.semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive {
-  display: none;
-}
-
-.semi-rtl .semi-tabs,
-.semi-portal-rtl .semi-tabs {
-  direction: rtl;
-}
-.semi-rtl .semi-tabs-bar .semi-tabs-tab,
-.semi-portal-rtl .semi-tabs-bar .semi-tabs-tab {
-  float: right;
-}
-.semi-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon,
-.semi-portal-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon {
-  margin-right: 0;
-  margin-left: 8px;
-}
-.semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start,
-.semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
-  margin-right: 0;
-  margin-left: 4px;
-}
-.semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end,
-.semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
-  margin-left: 0;
-  margin-right: 4px;
-}
-.semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right,
-.semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left,
-.semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right,
-.semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left {
-  transform: scaleX(-1);
-}
-.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type),
-.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
-  margin-right: 0;
-  margin-left: 24px;
-}
-.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left,
-.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left {
-  border-right: 0;
-  border-left: 1px solid var(--semi-color-border);
-}
-.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab,
-.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab {
-  border-left: 0;
-  border-right: 2px solid transparent;
-}
-.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover,
-.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover {
-  border-left: 0;
-  border-right: 2px solid var(--semi-color-fill-0);
-}
-.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active,
-.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
-  border-left: 0;
-  border-right: 2px solid var(--semi-color-fill-1);
-}
-.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover,
-.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active,
-.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover {
-  border-left: 0;
-  border-right: 2px solid var(--semi-color-primary);
-}
-.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type),
-.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
-  margin-left: 0;
-  margin-right: 8px;
-}
-.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left,
-.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left {
-  border-right: 0;
-  border-left: 1px solid var(--semi-color-border);
-}
-.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab,
-.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab {
-  border: 1px solid transparent;
-  border-left: none;
-}
-.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover,
-.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover {
-  border-left: none;
-}
-.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after,
-.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after {
-  right: auto;
-  left: -1px;
-}
-.semi-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type),
-.semi-portal-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
-  margin-right: auto;
-  margin-left: 8px;
-}