ten-design-vue/lib/style/tabs.css

ten-vue

/* dependencies icon */
/**
 * 文字部分
 * size 大小，line 行高， color 颜色
 */
/* button */
/* input */
/* transfer */
/* alert */
/* menu */
/* message */
/* modal */
/* badge */
/* tag */
/* progress */
/* popup */
/* tooltip */
/* loading */
/* tabs */
/* check */
/* mention */
/* popup */
/* steps */
/* tabs */
/* modal */
/* form */
/* table */
/* pagination */
/* upload */
/* collapse */
/* anchor */
/* list */
.ten-tabs {
  background: #FFFFFF;
  box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.06);
  border-radius: 0px;
  overflow: hidden;
}
.ten-tabs .ten-tabs-nav-container {
  position: relative;
  height: 72px;
  transition: all 0.35s;
}
.ten-tabs .ten-tabs-nav {
  display: block;
  width: 100%;
  position: relative;
  background: #FBFBFB;
  overflow: hidden;
  white-space: nowrap;
  height: 72px;
  line-height: 72px;
}
.ten-tabs .ten-tabs-nav .ten-tabs-nav-scroll {
  display: inline-block;
  font-size: 0px;
  transition: all 0.35s;
  position: relative;
  z-index: 2;
}
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__next {
  right: 0px;
  color: rgba(0, 0, 0, 0.6);
  border-left: 1px rgba(218, 218, 218, 0.5) solid;
}
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__prev {
  left: 0px;
  color: rgba(0, 0, 0, 0.6);
  border-right: 1px rgba(218, 218, 218, 0.5) solid;
}
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__next,
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__prev {
  position: absolute;
  top: 0%;
  bottom: 0%;
  font-size: 16px;
  z-index: 3;
  background: #FBFBFB;
  display: table;
  height: 100%;
  width: 41px;
  cursor: pointer;
}
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__next .ten-tabs-scroll-btn,
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__prev .ten-tabs-scroll-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__next .ten-icon--right,
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__prev .ten-icon--right,
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__next .ten-icon--left,
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__prev .ten-icon--left {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__next::after,
.ten-tabs .ten-tabs-nav .ten-tabs-scroll__prev::after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(218, 218, 218, 0.5);
  z-index: 2;
}
.ten-tabs .ten-tabs-nav::after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(218, 218, 218, 0.5);
  z-index: 1;
}
.ten-tabs .ten-tabs-nav .ten-tabs-tab {
  position: relative;
  cursor: pointer;
  display: inline-block;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  padding: 0px 40px;
  font-size: 14px;
  border-right: 1px rgba(218, 218, 218, 0.5) solid;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ten-tabs .ten-tabs-nav .ten-tabs-tab:hover {
  color: rgba(0, 0, 0, 0.8);
}
.ten-tabs .ten-tabs-nav .ten-tabs-tab__icon {
  line-height: 1;
  color: #999;
  position: absolute;
  right: 13px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.ten-tabs .ten-tabs-nav .ten-tabs-tab.ten-tabs-tab--info::before {
  content: ' ';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0052d9;
  position: absolute;
  left: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.ten-tabs .ten-tabs-nav .ten-tabs-tab--active {
  background-color: #FFFFFF;
  color: rgba(0, 0, 0, 0.8);
  z-index: 3;
}
.ten-tabs .ten-tabs-nav .ten-tabs-tab--active.ten-tabs-tab--close {
  padding: 0px 40px;
}
.ten-tabs .ten-tabs-nav .ten-tabs-tab--active::after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: #FFFFFF;
  z-index: 1;
}
.ten-tabs .ten-tabs-content .ten-tabs-tabpane {
  padding: 20px;
  display: none;
}
.ten-tabs .ten-tabs-content .ten-tabs-tabpane--active {
  display: block;
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab,
.ten-tabs.ten-tabs--normal .ten-tabs-tab,
.ten-tabs.ten-tabs--primary .ten-tabs-tab--active,
.ten-tabs.ten-tabs--normal .ten-tabs-tab--active {
  font-size: 14px;
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav::after,
.ten-tabs.ten-tabs--normal .ten-tabs-nav::after {
  display: none;
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav,
.ten-tabs.ten-tabs--normal .ten-tabs-nav {
  height: 48px;
  line-height: 48px;
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__next,
.ten-tabs.ten-tabs--normal .ten-tabs-nav .ten-tabs-scroll__next,
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__prev,
.ten-tabs.ten-tabs--normal .ten-tabs-nav .ten-tabs-scroll__prev {
  width: 72px;
  background: #FFFFFF;
  border: none;
  font-size: 16px;
  color: #999;
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__next::after,
.ten-tabs.ten-tabs--normal .ten-tabs-nav .ten-tabs-scroll__next::after,
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__prev::after,
.ten-tabs.ten-tabs--normal .ten-tabs-nav .ten-tabs-scroll__prev::after {
  display: none;
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__next::before,
.ten-tabs.ten-tabs--normal .ten-tabs-nav .ten-tabs-scroll__next::before {
  content: ' ';
  width: 60px;
  height: 100%;
  position: absolute;
  right: 100%;
  top: 0;
  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__prev::before,
.ten-tabs.ten-tabs--normal .ten-tabs-nav .ten-tabs-scroll__prev::before {
  content: ' ';
  width: 60px;
  height: 100%;
  position: absolute;
  left: 100%;
  top: 0;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab::after,
.ten-tabs.ten-tabs--normal .ten-tabs-tab::after {
  content: ' ';
  position: absolute;
  left: 50%;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #0052d9;
  width: 0%;
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab:hover::after,
.ten-tabs.ten-tabs--normal .ten-tabs-tab:hover::after {
  width: 100%;
  left: 0%;
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab .ten-icon--clear,
.ten-tabs.ten-tabs--normal .ten-tabs-tab .ten-icon--clear {
  color: #FFFFFF;
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab.ten-tabs-tab--info::before,
.ten-tabs.ten-tabs--normal .ten-tabs-tab.ten-tabs-tab--info::before {
  width: 6px;
  height: 6px;
  left: 11px;
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab--active::after,
.ten-tabs.ten-tabs--normal .ten-tabs-tab--active::after {
  width: 100%;
  left: 0%;
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab--active.ten-tabs-tab--close,
.ten-tabs.ten-tabs--normal .ten-tabs-tab--active.ten-tabs-tab--close {
  padding: 0px 40px;
}
.ten-tabs.ten-tabs--primary {
  background: #0052d9;
  color: #FFFFFF;
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav,
.ten-tabs.ten-tabs--primary .ten-tabs-tab,
.ten-tabs.ten-tabs--primary .ten-tabs-tab--active {
  background: #0052d9;
  border: 0px;
  color: rgba(255, 255, 255, 0.6);
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab:hover,
.ten-tabs.ten-tabs--primary .ten-tabs-tab--active:hover {
  color: #FFFFFF;
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__next,
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__prev {
  background: #0052d9;
  color: #ffffff;
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__next::before {
  background: linear-gradient(to left, #0052d9, rgba(0, 82, 217, 0));
}
.ten-tabs.ten-tabs--primary .ten-tabs-nav .ten-tabs-scroll__prev::before {
  background: linear-gradient(to right, #0052d9, rgba(0, 82, 217, 0));
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab::after {
  background-color: #FFFFFF;
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab.ten-tabs-tab--info::before {
  background-color: #FFFFFF;
}
.ten-tabs.ten-tabs--primary .ten-tabs-tab--active {
  color: #FFFFFF;
}
.ten-tabs.ten-tabs--normal {
  background: #FFFFFF;
  color: #999;
}
.ten-tabs.ten-tabs--normal .ten-tabs-nav,
.ten-tabs.ten-tabs--normal .ten-tabs-tab,
.ten-tabs.ten-tabs--normal .ten-tabs-tab--active {
  background: #FFFFFF;
  border: 0px;
  color: #999;
}
.ten-tabs.ten-tabs--normal .ten-tabs-tab:hover,
.ten-tabs.ten-tabs--normal .ten-tabs-tab--active:hover {
  color: #0052d9;
}
.ten-tabs.ten-tabs--normal .ten-tabs-tab:hover .ten-icon,
.ten-tabs.ten-tabs--normal .ten-tabs-tab--active:hover .ten-icon {
  color: #0052d9;
}
.ten-tabs.ten-tabs--normal .ten-tabs-tab.ten-tabs-tab--info::before {
  background-color: #0052d9;
}
.ten-tabs.ten-tabs--normal .ten-tabs-tab .ten-icon {
  color: #999;
}
.ten-tabs.ten-tabs--normal .ten-tabs-tab--active {
  color: #0052d9;
}
.ten-tabs.ten-tabs--normal .ten-tabs-tab--active .ten-icon {
  color: #0052d9;
}
.ten-tabs-content {
  background-color: #FFFFFF;
  color: #333;
}
.ten-tabs-top {
  display: flex;
}
.ten-tabs-top .ten-tabs-title {
  flex: 1;
}