ten-design-vue
Version:
ten-vue
389 lines (332 loc) • 7.01 kB
text/less
/* dependencies icon */
@import "../vars.less";
.ten-tabs {
background: #FFFFFF;
box-shadow: @shadow-level-1;
border-radius: @tabs-border-radius-default;
overflow: hidden;
.ten-tabs-nav-container {
position: relative;
height: @tabs-height;
transition: all .35s;
}
.ten-tabs-nav {
display: block;
width: 100%;
position: relative;
background: #FBFBFB;
overflow: hidden;
white-space: nowrap;
height: @tabs-height;
line-height: @tabs-height;
.ten-tabs-nav-scroll {
display: inline-block;
font-size: 0px;
transition: all .35s;
position: relative;
z-index: 2;
}
.ten-tabs-scroll__next {
right: 0px;
color: rgba(0, 0, 0, 0.6);
border-left: 1px rgba(218, 218, 218, 0.50) solid;
}
.ten-tabs-scroll__prev {
left: 0px;
color: rgba(0, 0, 0, 0.6);
border-right: 1px rgba(218, 218, 218, 0.50) solid;
}
.ten-tabs-scroll__next,
.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-scroll-btn {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.ten-icon--right,
.ten-icon--left {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&::after {
content: ' ';
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: rgba(218, 218, 218, 0.50);
z-index: 2;
}
}
&::after {
content: ' ';
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: rgba(218, 218, 218, 0.50);
z-index: 1;
}
.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: @font-size-base;
border-right: 1px rgba(218, 218, 218, 0.50) solid;
// transition: font-size .3s;
user-select: none;
&:hover {
color: rgba(0, 0, 0, 0.8);
}
&__icon {
line-height: 1;
color: @text-color-lighter-2;
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
}
&.ten-tabs-tab--info {
&::before {
content: ' ';
width: 8px;
height: 8px;
border-radius: 50%;
background-color: @primary-color;
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
}
}
}
.ten-tabs-tab--active {
background-color: #FFFFFF;
color: rgba(0, 0, 0, 0.8);
z-index: 3;
&.ten-tabs-tab--close {
padding: 0px 40px;
}
&::after {
content: ' ';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
width: 100%;
height: 2px;
background-color: #FFFFFF;
z-index: 1;
}
}
}
.ten-tabs-content {
.ten-tabs-tabpane {
padding: 20px;
display: none;
}
.ten-tabs-tabpane--active {
display: block;
}
}
}
.ten-tabs.ten-tabs--primary,
.ten-tabs.ten-tabs--normal {
.ten-tabs-tab,
.ten-tabs-tab--active {
font-size: @font-size-base;
}
.ten-tabs-nav::after {
display: none;
}
.ten-tabs-nav {
height: 48px;
line-height: 48px;
.ten-tabs-scroll__next,
.ten-tabs-scroll__prev {
width: 72px;
background: #FFFFFF;
border: none;
font-size: 16px;
color: @text-color-lighter-2;
&::after {
display: none;
}
}
.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-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-tab {
&::after {
content: ' ';
position: absolute;
left: 50%;
right: 0;
bottom: 0;
height: 2px;
background-color: @primary-color;
width: 0%;
// transition: all .35s;
}
&:hover {
&::after {
width: 100%;
left: 0%;
}
}
.ten-icon--clear {
color: #FFFFFF;
}
&.ten-tabs-tab--info {
&::before {
width: 6px;
height: 6px;
left: 11px;
}
}
}
.ten-tabs-tab--active {
&::after {
width: 100%;
left: 0%;
}
&.ten-tabs-tab--close {
padding: 0px 40px;
}
}
}
.ten-tabs.ten-tabs--primary {
background: @primary-color;
color: #FFFFFF;
.ten-tabs-nav,
.ten-tabs-tab,
.ten-tabs-tab--active {
background: @primary-color;
border: 0px;
color: rgba(255, 255, 255, 0.6);
}
.ten-tabs-tab,
.ten-tabs-tab--active {
&:hover {
color: #FFFFFF;
}
}
.ten-tabs-nav {
.ten-tabs-scroll__next,
.ten-tabs-scroll__prev {
background: @primary-color;
color: #ffffff;
}
.ten-tabs-scroll__next {
&::before {
background: linear-gradient(to left, @primary-color, fade(@primary-color, 0%););
}
}
.ten-tabs-scroll__prev {
&::before {
background: linear-gradient(to right, @primary-color, fade(@primary-color, 0%););
}
}
}
.ten-tabs-tab {
&::after {
background-color: #FFFFFF;
}
&.ten-tabs-tab--info {
&::before {
background-color: #FFFFFF;
}
}
}
.ten-tabs-tab--active {
color: #FFFFFF;
}
}
.ten-tabs.ten-tabs--normal {
background: #FFFFFF;
color: @text-color-lighter-2;
.ten-tabs-nav,
.ten-tabs-tab,
.ten-tabs-tab--active {
background: #FFFFFF;
border: 0px;
color: @text-color-lighter-2;
}
.ten-tabs-tab,
.ten-tabs-tab--active {
&:hover {
color: @primary-color;
.ten-icon {
color: @primary-color;
}
}
}
.ten-tabs-tab {
&.ten-tabs-tab--info {
&::before {
background-color: @primary-color;
}
}
.ten-icon {
color: @text-color-lighter-2;
}
}
.ten-tabs-tab--active {
color: @primary-color;
.ten-icon {
color: @primary-color;
}
}
}
.ten-tabs-content {
background-color: #FFFFFF;
color: @text-color;
}
.ten-tabs-top {
display: flex;
.ten-tabs-title {
flex: 1;
}
.ten-tabs-bar {}
}