vxe-pc-ui/es/tabs/style.css

A vue based PC component library

.vxe-tabs {
  display: flex;
  flex-direction: column;
  color: var(--vxe-ui-font-color);
  font-family: var(--vxe-ui-font-family);
}
.vxe-tabs.is--padding .vxe-tabs-pane--item {
  padding: var(--vxe-ui-layout-padding-default);
}
.vxe-tabs.trigger--default .vxe-tabs-header--item {
  cursor: pointer;
}
.vxe-tabs.trigger--default .vxe-tabs-header--item:hover .vxe-tabs-header--item-name {
  color: var(--vxe-ui-font-primary-color);
}

.vxe-tabs-header {
  display: flex;
  flex-direction: row;
}

.vxe-tabs-header--bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2em;
  border: 1px solid var(--vxe-ui-input-border-color);
  cursor: pointer;
}
.vxe-tabs-header--bar::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--vxe-ui-input-border-color);
  z-index: 3;
}
.vxe-tabs-header--bar:focus {
  color: var(--vxe-ui-font-darken-color);
}
.vxe-tabs-header--bar:hover {
  color: var(--vxe-ui-font-primary-lighten-color);
  background-color: var(--vxe-ui-font-tinge-color);
}
.vxe-tabs-header--bar:active {
  color: var(--vxe-ui-font-primary-darken-color);
}

.vxe-tabs-header--left-bar {
  border-right: 0;
  box-shadow: 8px 0px 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
}
.vxe-tabs-header--left-bar::after {
  right: -1px;
}

.vxe-tabs-header--right-bar {
  border-left: 0;
  box-shadow: -8px 0px 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color);
}
.vxe-tabs-header--right-bar::after {
  left: -1px;
}

.vxe-tabs-header--extra {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-bottom: 1px solid var(--vxe-ui-input-border-color);
}

.vxe-tabs-header--wrapper {
  position: relative;
  flex-grow: 1;
}
.vxe-tabs-header--wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--vxe-ui-input-border-color);
  z-index: 0;
}

.vxe-tabs-header--item-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
  outline: 0;
}

.vxe-tabs-header--item {
  position: relative;
  flex-shrink: 0;
  padding: 0 0.5em;
}
.vxe-tabs-header--item.is--active .vxe-tabs-header--item-content {
  color: var(--vxe-ui-font-primary-color);
}
.vxe-tabs-header--item.align--left {
  text-align: left;
}
.vxe-tabs-header--item.align--center {
  text-align: center;
}
.vxe-tabs-header--item.align--right {
  text-align: right;
}

.vxe-tabs-header--item-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.vxe-tabs-header--item-content {
  flex-grow: 1;
}

.vxe-tabs-header--item-icon {
  padding: 0 0.6em;
}
.vxe-tabs-header--item-icon + .vxe-tabs-header--item-name {
  padding-left: 0;
}

.vxe-tabs-header--item-name {
  padding: 0 0.6em;
}

.vxe-tabs-header--refresh-btn,
.vxe-tabs-header--close-btn {
  font-size: 0.8em;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  margin: 0 0.2em;
  line-height: 1.5em;
  text-align: center;
}
.vxe-tabs-header--refresh-btn:hover,
.vxe-tabs-header--close-btn:hover {
  color: var(--vxe-ui-font-color);
  background: var(--vxe-ui-tabs-close-hover-background-color);
}
.vxe-tabs-header--refresh-btn:active,
.vxe-tabs-header--close-btn:active {
  color: var(--vxe-ui-font-primary-color);
}
.vxe-tabs-header--refresh-btn > i,
.vxe-tabs-header--close-btn > i {
  font-size: 1em;
}

.vxe-tabs-header--item-inner {
  transition: color 0.1s ease-in-out;
}

.vxe-tabs-pane {
  flex-grow: 1;
  overflow: hidden;
}

.vxe-tabs-pane--item {
  display: none;
  height: 100%;
  overflow: auto;
  outline: 0;
}
.vxe-tabs-pane--item.is--visible {
  display: block;
}

.vxe-tabs-header--active-line {
  display: none;
}
.vxe-tabs-header--active-line.type--default {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 4px;
  background-color: var(--vxe-ui-font-primary-color);
  z-index: 2;
  transition: all 0.3s ease-in-out;
}
.vxe-tabs-header--active-line.type--card {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  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);
  transition: color, left 0.3s ease-in-out;
}
.vxe-tabs-header--active-line.type--border-card {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  border-left: 1px solid var(--vxe-ui-input-border-color);
  border-right: 1px solid var(--vxe-ui-input-border-color);
  pointer-events: none;
  z-index: 1;
}

.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;
}

.vxe-tabs--card .vxe-tabs-header--bar {
  border-top: 0;
}
.vxe-tabs--card .vxe-tabs-header--left-bar {
  border-left: 0;
}
.vxe-tabs--card .vxe-tabs-header--right-bar {
  border-right: 0;
}
.vxe-tabs--card .vxe-tabs-header {
  border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
  border-top: 1px solid var(--vxe-ui-input-border-color);
  border-left: 1px solid var(--vxe-ui-input-border-color);
  border-right: 1px solid var(--vxe-ui-input-border-color);
}
.vxe-tabs--card .vxe-tabs-header .vxe-tabs-header--wrapper {
  border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
}
.vxe-tabs--card .vxe-tabs-header--item {
  border-left: 1px solid var(--vxe-ui-input-border-color);
}
.vxe-tabs--card .vxe-tabs-header--item:first-child {
  border-left: 0;
}
.vxe-tabs--card .vxe-tabs-header--item:last-child {
  border-right: 1px solid var(--vxe-ui-input-border-color);
}

.vxe-tabs--border-card .vxe-tabs-header--item-wrapper {
  z-index: 2;
}
.vxe-tabs--border-card .vxe-tabs-header--bar {
  border-top: 0;
}
.vxe-tabs--border-card .vxe-tabs-header--left-bar {
  border-left: 0;
}
.vxe-tabs--border-card .vxe-tabs-header--right-bar {
  border-right: 0;
}
.vxe-tabs--border-card.is--padding .vxe-tabs-pane--item, .vxe-tabs--border-card.is--height .vxe-tabs-pane--item {
  border-bottom: 1px solid var(--vxe-ui-input-border-color);
  border-left: 1px solid var(--vxe-ui-input-border-color);
  border-right: 1px solid var(--vxe-ui-input-border-color);
}
.vxe-tabs--border-card .vxe-tabs-pane--item.has--content {
  border-bottom: 1px solid var(--vxe-ui-input-border-color);
  border-left: 1px solid var(--vxe-ui-input-border-color);
  border-right: 1px solid var(--vxe-ui-input-border-color);
}
.vxe-tabs--border-card .vxe-tabs-header {
  border-top: 1px solid var(--vxe-ui-input-border-color);
  border-left: 1px solid var(--vxe-ui-input-border-color);
  border-right: 1px solid var(--vxe-ui-input-border-color);
  background-color: var(--vxe-ui-tabs-card-header-background-color);
}
.vxe-tabs--border-card .vxe-tabs-header .vxe-tabs-header--wrapper {
  border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
}
.vxe-tabs--border-card .vxe-tabs-header--item.is--active {
  background-color: var(--vxe-ui-layout-background-color);
}

.vxe-tabs--round-card .vxe-tabs-header--item-wrapper {
  z-index: 2;
}
.vxe-tabs--round-card .vxe-tabs-header--item {
  position: relative;
  z-index: 2;
  margin: 0 2px;
  border-top: 1px solid var(--vxe-ui-input-border-color);
  border-left: 1px solid var(--vxe-ui-input-border-color);
  border-right: 1px solid var(--vxe-ui-input-border-color);
  border-radius: var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
  background-color: rgba(0, 0, 0, 0.02);
  transition: color 0.3s ease-in-out;
}
.vxe-tabs--round-card .vxe-tabs-header--item.is--active {
  background-color: var(--vxe-ui-layout-background-color);
}
.vxe-tabs--round-card .vxe-tabs-header--item:first-child {
  margin-left: 0;
}
.vxe-tabs--round-card .vxe-tabs-header--item:last-child {
  margin-right: 0;
}
.vxe-tabs--round-card.is--padding .vxe-tabs-pane--item, .vxe-tabs--round-card.is--height .vxe-tabs-pane--item {
  border-bottom: 1px solid var(--vxe-ui-input-border-color);
  border-left: 1px solid var(--vxe-ui-input-border-color);
  border-right: 1px solid var(--vxe-ui-input-border-color);
}
.vxe-tabs--round-card .vxe-tabs-pane--item.has--content {
  border-bottom: 1px solid var(--vxe-ui-input-border-color);
  border-left: 1px solid var(--vxe-ui-input-border-color);
  border-right: 1px solid var(--vxe-ui-input-border-color);
}
.vxe-tabs--round-card .vxe-tabs-pane {
  background-color: var(--vxe-ui-layout-background-color);
}

.vxe-tabs .vxe-tabs-header--wrapper {
  height: var(--vxe-ui-tabs-header-height-default);
  overflow: hidden;
}
.vxe-tabs .vxe-tabs-header--item-inner {
  height: var(--vxe-ui-tabs-header-height-default);
}
.vxe-tabs .vxe-tabs-header--active-line.type--card {
  height: calc(var(--vxe-ui-tabs-header-height-default) - 1px);
}
.vxe-tabs .vxe-tabs-header--active-line.type--border-card {
  height: calc(var(--vxe-ui-tabs-header-height-default) + 1px);
  line-height: calc(var(--vxe-ui-tabs-header-height-default) + 1px);
}