vxe-pc-ui 3.13.11 → 3.13.13

package/styles/components/tabs.scss

@@ -1,746 +1,746 @@
-@use '../helpers/baseMixin.scss';
-
-$scrollbarOffsetSize: 20px;
-
-.vxe-tabs {
-  display: flex;
-  color: var(--vxe-ui-font-color);
-  font-family: var(--vxe-ui-font-family);
-  &.pos--top,
-  &.pos--bottom {
-    flex-direction: column;
-  }
-  &.pos--left,
-  &.pos--right {
-    flex-direction: row;
-  }
-  &.trigger--default {
-    .vxe-tabs-header--item {
-      cursor: pointer;
-      &:hover {
-        .vxe-tabs-header--item-name {
-          color: var(--vxe-ui-font-primary-color);
-        }
-      }
-    }
-  }
-}
-
-.vxe-tabs-header--bar {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  cursor: pointer;
-  &::after {
-    content: "";
-    position: absolute;
-    background-color: var(--vxe-ui-input-border-color);
-    z-index: 3;
-  }
-  &:focus {
-    color: var(--vxe-ui-font-darken-color);
-  }
-  &:hover {
-    color: var(--vxe-ui-font-primary-lighten-color);
-  }
-  &:active {
-    color: var(--vxe-ui-font-primary-darken-color);
-  }
-  &.type--default,
-  &.type--card,
-  &.type--border-card,
-  &.type--round-card {
-    border: 1px solid var(--vxe-ui-input-border-color);
-  }
-  &.type--round-card {
-    background-color: rgba(0, 0, 0, 0.02);
-  }
-  &.pos--top,
-  &.pos--bottom {
-    width: 1.6em;
-    &::after {
-      top: 0;
-      width: 1px;
-      height: 100%;
-    }
-  }
-  &.pos--left,
-  &.pos--right {
-    width: 100%;
-    height: 1.6em;
-    &::after {
-      left: 0;
-      width: 100%;
-      height: 1px;
-    }
-  }
-}
-.vxe-tabs-header--prev-bar {
-  &.type--default {
-    &.pos--top,
-    &.pos--bottom {
-      border-right: 0;
-    }
-    &.pos--left,
-    &.pos--right {
-      border-bottom: 0;
-    }
-  }
-  &.type--card {
-    &.pos--top {
-      border-bottom: 0;
-      border-right: 0;
-    }
-    &.pos--bottom {
-      border-top: 0;
-      border-right: 0;
-    }
-    &.pos--left {
-      border-left: 0;
-      border-bottom: 0;
-    }
-    &.pos--right {
-      border-right: 0;
-      border-bottom: 0;
-    }
-  }
-  &.type--border-card {
-    &.pos--top {
-      border-top: 0;
-      border-right: 0;
-    }
-    &.pos--bottom {
-      border-right: 0;
-      border-bottom: 0;
-    }
-    &.pos--left {
-      border-left: 0;
-      border-bottom: 0;
-    }
-    &.pos--right {
-      border-right: 0;
-      border-bottom: 0;
-    }
-  }
-  &.type--round-card {
-    &.pos--top {
-      border-right: 0;
-    }
-    &.pos--bottom {
-      border-right: 0;
-    }
-    &.pos--left {
-      border-bottom: 0;
-    }
-    &.pos--right {
-      border-bottom: 0;
-    }
-  }
-  &.pos--top,
-  &.pos--bottom {
-    &::after {
-      right: 0;
-    }
-  }
-  &.pos--left,
-  &.pos--right {
-    &::after {
-      bottom: 0;
-    }
-  }
-  &.scrolling--middle {
-    &.pos--top,
-    &.pos--bottom {
-      box-shadow: 4px 0px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
-    }
-    &.pos--left,
-    &.pos--right {
-      box-shadow: 0 4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
-    }
-  }
-}
-.vxe-tabs-header--next-bar {
-  &.type--default {
-    &.pos--top,
-    &.pos--bottom {
-      border-left: 0;
-    }
-    &.pos--left,
-    &.pos--right {
-      border-top: 0;
-    }
-  }
-  &.type--card {
-    &.pos--top {
-      border-top: 0;
-      border-left: 0;
-    }
-    &.pos--bottom {
-      border-bottom: 0;
-      border-left: 0;
-    }
-    &.pos--left {
-      border-top: 0;
-      border-right: 0;
-    }
-    &.pos--right {
-      border-top: 0;
-      border-left: 0;
-    }
-  }
-  &.type--border-card {
-    &.pos--top {
-      border-left: 0;
-      border-top: 0;
-    }
-    &.pos--bottom {
-      border-left: 0;
-      border-bottom: 0;
-    }
-    &.pos--left {
-      border-left: 0;
-      border-top: 0;
-    }
-    &.pos--right {
-      border-right: 0;
-      border-top: 0;
-    }
-  }
-  &.type--round-card {
-    &.pos--top {
-      border-left: 0;
-    }
-    &.pos--bottom {
-      border-left: 0;
-      border-bottom: 0;
-    }
-    &.pos--left {
-      border-top: 0;
-    }
-    &.pos--right {
-      border-top: 0;
-    }
-  }
-  &.pos--top,
-  &.pos--bottom {
-    &::after {
-      left: 0;
-    }
-  }
-  &.pos--left,
-  &.pos--right {
-    &::after {
-      top: 0;
-    }
-  }
-  &.scrolling--middle {
-    &.pos--top,
-    &.pos--bottom {
-      box-shadow: -4px 0px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
-    }
-    &.pos--left,
-    &.pos--right {
-      box-shadow: 0 -4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
-    }
-  }
-}
-
-.vxe-tabs-header--prefix,
-.vxe-tabs-header--suffix {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.vxe-tabs-header--prefix,
-.vxe-tabs-header--suffix {
-  &.type--default,
-  &.type--border-card,
-  &.type--round-card {
-    &.pos--top {
-      border-bottom: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--bottom {
-      border-top: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--left {
-      border-right: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--right {
-      border-left: 1px solid var(--vxe-ui-input-border-color);
-    }
-  }
-}
-
-.vxe-tabs-header--item-wrapper {
-  position: relative;
-  display: flex;
-  outline: 0;
-}
-
-.vxe-tabs-header--item {
-  position: relative;
-  flex-shrink: 0;
-  padding: 0 0.5em;
-  &.is--active {
-    .vxe-tabs-header--item-content {
-      color: var(--vxe-ui-font-primary-color);
-    }
-  }
-  &.align--left {
-    text-align: left;
-  }
-  &.align--center {
-    text-align: center;
-  }
-  &.align--right {
-    text-align: right;
-  }
-  &.type--card {
-    &.pos--top {
-      border-top: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--bottom {
-      border-bottom: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--top,
-    &.pos--bottom {
-      border-right: 1px solid var(--vxe-ui-input-border-color);
-      &:first-child {
-        border-left: 1px solid var(--vxe-ui-input-border-color);
-      }
-    }
-    &.pos--left {
-      border-left: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--right {
-      border-right: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--left,
-    &.pos--right {
-      border-bottom: 1px solid var(--vxe-ui-input-border-color);
-      &:first-child {
-        border-top: 1px solid var(--vxe-ui-input-border-color);
-      }
-    }
-  }
-  &.type--border-card {
-    &.is--active {
-      background-color: var(--vxe-ui-layout-background-color);
-    }
-  }
-  &.type--round-card {
-    z-index: 2;
-    border: 1px solid var(--vxe-ui-input-border-color);
-    background-color: rgba(0, 0, 0, 0.02);
-    @include baseMixin.createAnimationTransition(color, .3s);
-    &.is--active {
-      background-color: var(--vxe-ui-layout-background-color);
-    }
-    &.pos--top {
-      border-bottom: 0;
-      border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
-    }
-    &.pos--bottom {
-      border-top: 0;
-      border-radius: 0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius);
-    }
-    &.pos--top,
-    &.pos--bottom {
-      margin: 0 2px;
-      &:first-child {
-        margin-left: 0;
-      }
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-    &.pos--left {
-      border-right: 0;
-      border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
-    }
-    &.pos--right {
-      border-left: 0;
-      border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
-    }
-    &.pos--left,
-    &.pos--right {
-      margin: 2px 0;
-      &:first-child {
-        margin-top: 0;
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-.vxe-tabs-header--item-inner {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.vxe-tabs-header--item-content {
-  flex-grow: 1;
-  max-width: 30em;
-  padding: 0 0.3em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  & > span {
-    padding: 0 0.3em;
-  }
-}
-.vxe-tabs-header--refresh-btn,
-.vxe-tabs-header--close-btn {
-  font-size: 0.8em;
-  border-radius: 50%;
-  width: 1.5em;
-  height: 1.5em;
-  line-height: 1.5em;
-  text-align: center;
-  &:hover {
-    color: var(--vxe-ui-font-color);
-    background: var(--vxe-ui-tabs-close-hover-background-color);
-  }
-  &:active {
-    color: var(--vxe-ui-font-primary-color);
-  }
-  & > i {
-    font-size: 1em;
-    vertical-align: middle;
-  }
-}
-.vxe-tabs-header--refresh-btn {
-  visibility: hidden;
-  &.is--active,
-  &.is--loading {
-    visibility: visible;
-  }
-  &.is--disabled {
-    cursor: no-drop;
-    color: var(--vxe-ui-font-disabled-color);
-  }
-}
-.vxe-tabs-header--item-inner {
-  @include baseMixin.createAnimationTransition(color, .1s);
-}
-
-.vxe-tabs-pane--wrapper {
-  display: none;
-  position: relative;
-  flex-direction: column;
-  flex-grow: 1;
-  overflow: hidden;
-  &.is--content {
-    display: flex;
-  }
-  &.type--border-card,
-  &.type--round-card {
-    border: 1px solid var(--vxe-ui-input-border-color);
-    &.pos--top {
-      border-top: 0;
-    }
-    &.pos--bottom {
-      border-bottom: 0;
-    }
-    &.pos--left {
-      border-left: 0;
-    }
-    &.pos--right {
-      border-right: 0;
-    }
-  }
-}
-.vxe-tabs-pane--body {
-  flex-grow: 1;
-  overflow: hidden;
-  &.is--padding {
-    padding: var(--vxe-ui-layout-padding-default);
-  }
-}
-.vxe-tabs-pane--header,
-.vxe-tabs-pane--footer {
-  flex-shrink: 0;
-  overflow: auto;
-}
-
-.vxe-tabs-pane--item {
-  display: none;
-  height: 100%;
-  overflow: auto;
-  outline: 0;
-  &.is--visible {
-    display: block;
-  }
-}
-
-.vxe-tabs-header {
-  display: flex;
-  &.pos--top,
-  &.pos--bottom {
-    flex-direction: row;
-  }
-  &.pos--left,
-  &.pos--right {
-    flex-direction: column;
-  }
-  &.type--card {
-    &.pos--top {
-      border-bottom: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--bottom {
-      border-top: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--left {
-      border-right: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--right {
-      border-left: 1px solid var(--vxe-ui-input-border-color);
-    }
-  }
-  &.type--border-card {
-    background-color: var(--vxe-ui-tabs-card-header-background-color);
-    border: 1px solid var(--vxe-ui-input-border-color);
-    &.pos--top {
-      border-bottom: 0;
-    }
-    &.pos--bottom {
-      border-top: 0;
-    }
-    &.pos--left {
-      border-right: 0;
-    }
-    &.pos--right {
-      border-left: 0;
-    }
-  }
-}
-.vxe-tabs-header--wrapper {
-  position: relative;
-  flex-grow: 1;
-  overflow: hidden;
-  &.type--default,
-  &.type--border-card ,
-  &.type--round-card {
-    position: relative;
-    &::after {
-      content: "";
-      position: absolute;
-      background-color: var(--vxe-ui-input-border-color);
-      z-index: 0;
-    }
-    &.pos--top {
-      &::after {
-        bottom: 0;
-      }
-      
-    }
-    &.pos--bottom {
-      &::after {
-        top: 0;
-      }
-    }
-    &.pos--top,
-    &.pos--bottom {
-      &::after {
-        left: 0;
-        width: 100%;
-        height: 1px;
-      }
-    }
-    &.pos--left {
-      &::after {
-        right: 0;
-      }
-      
-    }
-    &.pos--right {
-      &::after {
-        left: 0;
-      }
-    }
-    &.pos--left,
-    &.pos--right {
-      &::after {
-        top: 0;
-        width: 1px;
-        height: 100%;
-      }
-    }
-  }
-  &.type--border-card {
-    &.pos--top {
-      border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
-    }
-    &.pos--bottom {
-      border-radius: 0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius);
-    }
-  }
-  &.type--border-card,
-  &.type--round-card {
-    & > .vxe-tabs-header--item-wrapper {
-      z-index: 2;
-    }
-  }
-  &.pos--top,
-  &.pos--bottom {
-    .vxe-tabs-header--item-wrapper {
-      flex-direction: row;
-      width: 100%;
-      overflow-y: hidden;
-      overflow-x: auto;
-    }
-  }
-  &.pos--left,
-  &.pos--right {
-    .vxe-tabs-header--item-wrapper {
-      flex-direction: column;
-      height: 100%;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-  }
-}
-
-.vxe-tabs-header--active-line {
-  display: none;
-  &.type--default {
-    display: block;
-    position: absolute;
-    background-color: var(--vxe-ui-font-primary-color);
-    z-index: 2;
-    @include baseMixin.createAnimationTransition(all, .3s);
-    &.pos--top {
-      bottom: $scrollbarOffsetSize;
-    }
-    &.pos--bottom {
-      top: 0;
-    }
-    &.pos--top,
-    &.pos--bottom {
-      left: 0;
-      height: 2px;
-      width: 4px;
-    }
-    &.pos--left {
-      right: $scrollbarOffsetSize;
-    }
-    &.pos--right {
-      left: 0;
-    }
-    &.pos--left,
-    &.pos--right {
-      top: 0;
-      height: 4px;
-      width: 2px;
-    }
-  }
-  &.type--card {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border: 1px solid var(--vxe-ui-font-primary-color);
-    pointer-events: none;
-    z-index: 1;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-    &.pos--top,
-    &.pos--bottom {
-      width: 4px;
-      transition: color,left 0.3s ease-in-out;
-    }
-    &.pos--left,
-    &.pos--right {
-      width: calc(100% - 20px);
-      transition: color,top 0.3s ease-in-out;
-    }
-  }
-  &.type--border-card {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    z-index: 1;
-    &.pos--top,
-    &.pos--bottom {
-      width: 4px;
-      border-left: 1px solid var(--vxe-ui-input-border-color);
-      border-right: 1px solid var(--vxe-ui-input-border-color);
-    }
-    &.pos--left,
-    &.pos--right {
-      width: 100%;
-      border-top: 1px solid var(--vxe-ui-input-border-color);
-      border-bottom: 1px solid var(--vxe-ui-input-border-color);
-    }
-  }
-}
-
-.vxe-tabs--default,
-.vxe-tabs--card,
-.vxe-tabs--border-card,
-.vxe-tabs--round-card {
-  border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
-  background-color: var(--vxe-ui-layout-background-color);
-}
-
-.vxe-tabs--default {
-  .vxe-tabs-header--item-inner {
-    border-bottom: 2px solid transparent;
-  }
-}
-
-@mixin getTabsSizeStyle ($fontSize, $headHeight) {
-  font-size: $fontSize;
-  .vxe-tabs-header--item-inner {
-    height: $headHeight;
-  }
-  .vxe-tabs-header--active-line {
-    &.type--card {
-      height: $headHeight;
-    }
-    &.type--border-card {
-      height: calc($headHeight + 1px);
-      line-height: calc($headHeight + 1px);
-    }
-  }
-  .vxe-tabs-header--wrapper {
-    &.pos--top,
-    &.pos--bottom {
-      height: $headHeight;
-    }
-  }
-  .vxe-tabs--card,
-  .vxe-tabs--round-card {
-    .vxe-tabs-header--item-inner {
-      height: calc($headHeight - 1px);
-    }
-  }
-  .vxe-tabs-header--prefix,
-  .vxe-tabs-header--suffix {
-    &.pos--top,
-    &.pos--bottom {
-      height: $headHeight;
-    }
-  }
-}
-
-.vxe-tabs {
-  @include getTabsSizeStyle(var(--vxe-ui-font-size-default), var(--vxe-ui-tabs-header-height-default));
-  &.size--medium {
-    @include getTabsSizeStyle(var(--vxe-ui-font-size-medium), var(--vxe-ui-tabs-header-height-medium));
-  }
-  &.size--small {
-    @include getTabsSizeStyle(var(--vxe-ui-font-size-small), var(--vxe-ui-tabs-header-height-small));
-  }
-  &.size--mini {
-    @include getTabsSizeStyle(var(--vxe-ui-font-size-mini), var(--vxe-ui-tabs-header-height-mini));
-  }
+@use '../helpers/baseMixin.scss';
+
+$scrollbarOffsetSize: 20px;
+
+.vxe-tabs {
+  display: flex;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  &.pos--top,
+  &.pos--bottom {
+    flex-direction: column;
+  }
+  &.pos--left,
+  &.pos--right {
+    flex-direction: row;
+  }
+  &.trigger--default {
+    .vxe-tabs-header--item {
+      cursor: pointer;
+      &:hover {
+        .vxe-tabs-header--item-name {
+          color: var(--vxe-ui-font-primary-color);
+        }
+      }
+    }
+  }
+}
+
+.vxe-tabs-header--bar {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  &::after {
+    content: "";
+    position: absolute;
+    background-color: var(--vxe-ui-input-border-color);
+    z-index: 3;
+  }
+  &:focus {
+    color: var(--vxe-ui-font-darken-color);
+  }
+  &:hover {
+    color: var(--vxe-ui-font-primary-lighten-color);
+  }
+  &:active {
+    color: var(--vxe-ui-font-primary-darken-color);
+  }
+  &.type--default,
+  &.type--card,
+  &.type--border-card,
+  &.type--round-card {
+    border: 1px solid var(--vxe-ui-input-border-color);
+  }
+  &.type--round-card {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+  &.pos--top,
+  &.pos--bottom {
+    width: 1.6em;
+    &::after {
+      top: 0;
+      width: 1px;
+      height: 100%;
+    }
+  }
+  &.pos--left,
+  &.pos--right {
+    width: 100%;
+    height: 1.6em;
+    &::after {
+      left: 0;
+      width: 100%;
+      height: 1px;
+    }
+  }
+}
+.vxe-tabs-header--prev-bar {
+  &.type--default {
+    &.pos--top,
+    &.pos--bottom {
+      border-right: 0;
+    }
+    &.pos--left,
+    &.pos--right {
+      border-bottom: 0;
+    }
+  }
+  &.type--card {
+    &.pos--top {
+      border-bottom: 0;
+      border-right: 0;
+    }
+    &.pos--bottom {
+      border-top: 0;
+      border-right: 0;
+    }
+    &.pos--left {
+      border-left: 0;
+      border-bottom: 0;
+    }
+    &.pos--right {
+      border-right: 0;
+      border-bottom: 0;
+    }
+  }
+  &.type--border-card {
+    &.pos--top {
+      border-top: 0;
+      border-right: 0;
+    }
+    &.pos--bottom {
+      border-right: 0;
+      border-bottom: 0;
+    }
+    &.pos--left {
+      border-left: 0;
+      border-bottom: 0;
+    }
+    &.pos--right {
+      border-right: 0;
+      border-bottom: 0;
+    }
+  }
+  &.type--round-card {
+    &.pos--top {
+      border-right: 0;
+    }
+    &.pos--bottom {
+      border-right: 0;
+    }
+    &.pos--left {
+      border-bottom: 0;
+    }
+    &.pos--right {
+      border-bottom: 0;
+    }
+  }
+  &.pos--top,
+  &.pos--bottom {
+    &::after {
+      right: 0;
+    }
+  }
+  &.pos--left,
+  &.pos--right {
+    &::after {
+      bottom: 0;
+    }
+  }
+  &.scrolling--middle {
+    &.pos--top,
+    &.pos--bottom {
+      box-shadow: 4px 0px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
+    }
+    &.pos--left,
+    &.pos--right {
+      box-shadow: 0 4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
+    }
+  }
+}
+.vxe-tabs-header--next-bar {
+  &.type--default {
+    &.pos--top,
+    &.pos--bottom {
+      border-left: 0;
+    }
+    &.pos--left,
+    &.pos--right {
+      border-top: 0;
+    }
+  }
+  &.type--card {
+    &.pos--top {
+      border-top: 0;
+      border-left: 0;
+    }
+    &.pos--bottom {
+      border-bottom: 0;
+      border-left: 0;
+    }
+    &.pos--left {
+      border-top: 0;
+      border-right: 0;
+    }
+    &.pos--right {
+      border-top: 0;
+      border-left: 0;
+    }
+  }
+  &.type--border-card {
+    &.pos--top {
+      border-left: 0;
+      border-top: 0;
+    }
+    &.pos--bottom {
+      border-left: 0;
+      border-bottom: 0;
+    }
+    &.pos--left {
+      border-left: 0;
+      border-top: 0;
+    }
+    &.pos--right {
+      border-right: 0;
+      border-top: 0;
+    }
+  }
+  &.type--round-card {
+    &.pos--top {
+      border-left: 0;
+    }
+    &.pos--bottom {
+      border-left: 0;
+      border-bottom: 0;
+    }
+    &.pos--left {
+      border-top: 0;
+    }
+    &.pos--right {
+      border-top: 0;
+    }
+  }
+  &.pos--top,
+  &.pos--bottom {
+    &::after {
+      left: 0;
+    }
+  }
+  &.pos--left,
+  &.pos--right {
+    &::after {
+      top: 0;
+    }
+  }
+  &.scrolling--middle {
+    &.pos--top,
+    &.pos--bottom {
+      box-shadow: -4px 0px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
+    }
+    &.pos--left,
+    &.pos--right {
+      box-shadow: 0 -4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
+    }
+  }
+}
+
+.vxe-tabs-header--prefix,
+.vxe-tabs-header--suffix {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.vxe-tabs-header--prefix,
+.vxe-tabs-header--suffix {
+  &.type--default,
+  &.type--border-card,
+  &.type--round-card {
+    &.pos--top {
+      border-bottom: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--bottom {
+      border-top: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--left {
+      border-right: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--right {
+      border-left: 1px solid var(--vxe-ui-input-border-color);
+    }
+  }
+}
+
+.vxe-tabs-header--item-wrapper {
+  position: relative;
+  display: flex;
+  outline: 0;
+}
+
+.vxe-tabs-header--item {
+  position: relative;
+  flex-shrink: 0;
+  padding: 0 0.5em;
+  &.is--active {
+    .vxe-tabs-header--item-content {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &.align--left {
+    text-align: left;
+  }
+  &.align--center {
+    text-align: center;
+  }
+  &.align--right {
+    text-align: right;
+  }
+  &.type--card {
+    &.pos--top {
+      border-top: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--bottom {
+      border-bottom: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--top,
+    &.pos--bottom {
+      border-right: 1px solid var(--vxe-ui-input-border-color);
+      &:first-child {
+        border-left: 1px solid var(--vxe-ui-input-border-color);
+      }
+    }
+    &.pos--left {
+      border-left: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--right {
+      border-right: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--left,
+    &.pos--right {
+      border-bottom: 1px solid var(--vxe-ui-input-border-color);
+      &:first-child {
+        border-top: 1px solid var(--vxe-ui-input-border-color);
+      }
+    }
+  }
+  &.type--border-card {
+    &.is--active {
+      background-color: var(--vxe-ui-layout-background-color);
+    }
+  }
+  &.type--round-card {
+    z-index: 2;
+    border: 1px solid var(--vxe-ui-input-border-color);
+    background-color: rgba(0, 0, 0, 0.02);
+    @include baseMixin.createAnimationTransition(color, .3s);
+    &.is--active {
+      background-color: var(--vxe-ui-layout-background-color);
+    }
+    &.pos--top {
+      border-bottom: 0;
+      border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
+    }
+    &.pos--bottom {
+      border-top: 0;
+      border-radius: 0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius);
+    }
+    &.pos--top,
+    &.pos--bottom {
+      margin: 0 2px;
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    &.pos--left {
+      border-right: 0;
+      border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
+    }
+    &.pos--right {
+      border-left: 0;
+      border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
+    }
+    &.pos--left,
+    &.pos--right {
+      margin: 2px 0;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+.vxe-tabs-header--item-inner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.vxe-tabs-header--item-content {
+  flex-grow: 1;
+  max-width: 30em;
+  padding: 0 0.3em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  & > span {
+    padding: 0 0.3em;
+  }
+}
+.vxe-tabs-header--refresh-btn,
+.vxe-tabs-header--close-btn {
+  font-size: 0.8em;
+  border-radius: 50%;
+  width: 1.5em;
+  height: 1.5em;
+  line-height: 1.5em;
+  text-align: center;
+  &:hover {
+    color: var(--vxe-ui-font-color);
+    background: var(--vxe-ui-tabs-close-hover-background-color);
+  }
+  &:active {
+    color: var(--vxe-ui-font-primary-color);
+  }
+  & > i {
+    font-size: 1em;
+    vertical-align: middle;
+  }
+}
+.vxe-tabs-header--refresh-btn {
+  visibility: hidden;
+  &.is--active,
+  &.is--loading {
+    visibility: visible;
+  }
+  &.is--disabled {
+    cursor: no-drop;
+    color: var(--vxe-ui-font-disabled-color);
+  }
+}
+.vxe-tabs-header--item-inner {
+  @include baseMixin.createAnimationTransition(color, .1s);
+}
+
+.vxe-tabs-pane--wrapper {
+  display: none;
+  position: relative;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+  &.is--content {
+    display: flex;
+  }
+  &.type--border-card,
+  &.type--round-card {
+    border: 1px solid var(--vxe-ui-input-border-color);
+    &.pos--top {
+      border-top: 0;
+    }
+    &.pos--bottom {
+      border-bottom: 0;
+    }
+    &.pos--left {
+      border-left: 0;
+    }
+    &.pos--right {
+      border-right: 0;
+    }
+  }
+}
+.vxe-tabs-pane--body {
+  flex-grow: 1;
+  overflow: hidden;
+  &.is--padding {
+    padding: var(--vxe-ui-layout-padding-default);
+  }
+}
+.vxe-tabs-pane--header,
+.vxe-tabs-pane--footer {
+  flex-shrink: 0;
+  overflow: auto;
+}
+
+.vxe-tabs-pane--item {
+  display: none;
+  height: 100%;
+  overflow: auto;
+  outline: 0;
+  &.is--visible {
+    display: block;
+  }
+}
+
+.vxe-tabs-header {
+  display: flex;
+  &.pos--top,
+  &.pos--bottom {
+    flex-direction: row;
+  }
+  &.pos--left,
+  &.pos--right {
+    flex-direction: column;
+  }
+  &.type--card {
+    &.pos--top {
+      border-bottom: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--bottom {
+      border-top: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--left {
+      border-right: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--right {
+      border-left: 1px solid var(--vxe-ui-input-border-color);
+    }
+  }
+  &.type--border-card {
+    background-color: var(--vxe-ui-tabs-card-header-background-color);
+    border: 1px solid var(--vxe-ui-input-border-color);
+    &.pos--top {
+      border-bottom: 0;
+    }
+    &.pos--bottom {
+      border-top: 0;
+    }
+    &.pos--left {
+      border-right: 0;
+    }
+    &.pos--right {
+      border-left: 0;
+    }
+  }
+}
+.vxe-tabs-header--wrapper {
+  position: relative;
+  flex-grow: 1;
+  overflow: hidden;
+  &.type--default,
+  &.type--border-card ,
+  &.type--round-card {
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      background-color: var(--vxe-ui-input-border-color);
+      z-index: 0;
+    }
+    &.pos--top {
+      &::after {
+        bottom: 0;
+      }
+      
+    }
+    &.pos--bottom {
+      &::after {
+        top: 0;
+      }
+    }
+    &.pos--top,
+    &.pos--bottom {
+      &::after {
+        left: 0;
+        width: 100%;
+        height: 1px;
+      }
+    }
+    &.pos--left {
+      &::after {
+        right: 0;
+      }
+      
+    }
+    &.pos--right {
+      &::after {
+        left: 0;
+      }
+    }
+    &.pos--left,
+    &.pos--right {
+      &::after {
+        top: 0;
+        width: 1px;
+        height: 100%;
+      }
+    }
+  }
+  &.type--border-card {
+    &.pos--top {
+      border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
+    }
+    &.pos--bottom {
+      border-radius: 0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius);
+    }
+  }
+  &.type--border-card,
+  &.type--round-card {
+    & > .vxe-tabs-header--item-wrapper {
+      z-index: 2;
+    }
+  }
+  &.pos--top,
+  &.pos--bottom {
+    .vxe-tabs-header--item-wrapper {
+      flex-direction: row;
+      width: 100%;
+      overflow-y: hidden;
+      overflow-x: auto;
+    }
+  }
+  &.pos--left,
+  &.pos--right {
+    .vxe-tabs-header--item-wrapper {
+      flex-direction: column;
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+}
+
+.vxe-tabs-header--active-line {
+  display: none;
+  &.type--default {
+    display: block;
+    position: absolute;
+    background-color: var(--vxe-ui-font-primary-color);
+    z-index: 2;
+    @include baseMixin.createAnimationTransition(all, .3s);
+    &.pos--top {
+      bottom: $scrollbarOffsetSize;
+    }
+    &.pos--bottom {
+      top: 0;
+    }
+    &.pos--top,
+    &.pos--bottom {
+      left: 0;
+      height: 2px;
+      width: 4px;
+    }
+    &.pos--left {
+      right: $scrollbarOffsetSize;
+    }
+    &.pos--right {
+      left: 0;
+    }
+    &.pos--left,
+    &.pos--right {
+      top: 0;
+      height: 4px;
+      width: 2px;
+    }
+  }
+  &.type--card {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 1px solid var(--vxe-ui-font-primary-color);
+    pointer-events: none;
+    z-index: 1;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    &.pos--top,
+    &.pos--bottom {
+      width: 4px;
+      transition: color,left 0.3s ease-in-out;
+    }
+    &.pos--left,
+    &.pos--right {
+      width: calc(100% - 20px);
+      transition: color,top 0.3s ease-in-out;
+    }
+  }
+  &.type--border-card {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: 1;
+    &.pos--top,
+    &.pos--bottom {
+      width: 4px;
+      border-left: 1px solid var(--vxe-ui-input-border-color);
+      border-right: 1px solid var(--vxe-ui-input-border-color);
+    }
+    &.pos--left,
+    &.pos--right {
+      width: 100%;
+      border-top: 1px solid var(--vxe-ui-input-border-color);
+      border-bottom: 1px solid var(--vxe-ui-input-border-color);
+    }
+  }
+}
+
+.vxe-tabs--default,
+.vxe-tabs--card,
+.vxe-tabs--border-card,
+.vxe-tabs--round-card {
+  border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
+  background-color: var(--vxe-ui-layout-background-color);
+}
+
+.vxe-tabs--default {
+  .vxe-tabs-header--item-inner {
+    border-bottom: 2px solid transparent;
+  }
+}
+
+@mixin getTabsSizeStyle ($fontSize, $headHeight) {
+  font-size: $fontSize;
+  .vxe-tabs-header--item-inner {
+    height: $headHeight;
+  }
+  .vxe-tabs-header--active-line {
+    &.type--card {
+      height: $headHeight;
+    }
+    &.type--border-card {
+      height: calc($headHeight + 1px);
+      line-height: calc($headHeight + 1px);
+    }
+  }
+  .vxe-tabs-header--wrapper {
+    &.pos--top,
+    &.pos--bottom {
+      height: $headHeight;
+    }
+  }
+  .vxe-tabs--card,
+  .vxe-tabs--round-card {
+    .vxe-tabs-header--item-inner {
+      height: calc($headHeight - 1px);
+    }
+  }
+  .vxe-tabs-header--prefix,
+  .vxe-tabs-header--suffix {
+    &.pos--top,
+    &.pos--bottom {
+      height: $headHeight;
+    }
+  }
+}
+
+.vxe-tabs {
+  @include getTabsSizeStyle(var(--vxe-ui-font-size-default), var(--vxe-ui-tabs-header-height-default));
+  &.size--medium {
+    @include getTabsSizeStyle(var(--vxe-ui-font-size-medium), var(--vxe-ui-tabs-header-height-medium));
+  }
+  &.size--small {
+    @include getTabsSizeStyle(var(--vxe-ui-font-size-small), var(--vxe-ui-tabs-header-height-small));
+  }
+  &.size--mini {
+    @include getTabsSizeStyle(var(--vxe-ui-font-size-mini), var(--vxe-ui-tabs-header-height-mini));
+  }
 }