Skip to content

S
style_tool
Commit 53519ab5 authored by 刘安琪's avatar 刘安琪
Browse files
Options

根据设计图覆盖tabs样式

parent 77cb409d
Hide whitespace changes
Inline Side-by-side
Showing with 889 additions and 780 deletions
node_module/element-theme-chalk/src/tabs.scss
View file @ 53519ab5
...@@ -2,11 +2,6 @@ ...@@ -2,11 +2,6 @@
@import "common/var"; @import "common/var";
@include b(tabs) { @include b(tabs) {
border: 1px solid #D7D8D9;
border-radius: 3px;
> .el-tabs__content {
padding: 0 8px 8px 8px;
}
@include e(header) { @include e(header) {
padding: 0; padding: 0;
position: relative; position: relative;
...@@ -15,12 +10,12 @@ ...@@ -15,12 +10,12 @@
@include e(active-bar) { @include e(active-bar) {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0;
height: 2px; height: 2px;
background-color: $--color-primary; background-color: $--color-primary;
z-index: 1; z-index: 1;
transition: transform .3s cubic-bezier(.645,.045,.355,1); transition: transform .3s cubic-bezier(.645,.045,.355,1);
list-style: none; list-style: none;
padding:0 16px;
} }
@include e(new-tab) { @include e(new-tab) {
float: right; float: right;
...@@ -55,7 +50,7 @@ ...@@ -55,7 +50,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 1px; height: 2px;
background-color: $--border-color-light; background-color: $--border-color-light;
z-index: $--index-normal; z-index: $--index-normal;
} }
...@@ -82,6 +77,7 @@ ...@@ -82,6 +77,7 @@
left: 0; left: 0;
} }
@include e(nav) { @include e(nav) {
border: none !important;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
transition: transform .3s; transition: transform .3s;
...@@ -98,16 +94,21 @@ ...@@ -98,16 +94,21 @@
} }
} }
@include e(item) { @include e(item) {
padding: 0 24px; padding: 0 20px;
height: 48px; height: 40px;
box-sizing: border-box; box-sizing: border-box;
line-height: 48px; line-height: 40px;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
font-size: 16px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: $--color-text-regular; color: $--color-text-primary;
position: relative; position: relative;
border: 1px solid $--color-default-text-plain;
margin-left: 20px;
border-radius: 4px 4px 0 0;
background: #E6E8ED;
&:focus, &:focus:active { &:focus, &:focus:active {
outline: none; outline: none;
} }
...@@ -135,6 +136,7 @@ ...@@ -135,6 +136,7 @@
@include when(active) { @include when(active) {
color: $--color-primary; color: $--color-primary;
background: $--color-white;
} }
&:hover { &:hover {
...@@ -181,11 +183,8 @@ ...@@ -181,11 +183,8 @@
} }
> .el-tabs__header .el-tabs__item { > .el-tabs__header .el-tabs__item {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
border-left: 1px solid $--border-color-light;
transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1); transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
&:first-child {
border-left: none;
}
&.is-closable { &.is-closable {
&:hover { &:hover {
padding-left: 13px; padding-left: 13px;
...@@ -259,14 +258,14 @@ ...@@ -259,14 +258,14 @@
} }
} }
@include m((top, bottom)) { @include m((top, bottom)) {
// .el-tabs__item.is-top:nth-child(2), .el-tabs__item.is-top:nth-child(2),
// .el-tabs__item.is-bottom:nth-child(2) { .el-tabs__item.is-bottom:nth-child(2) {
// padding-left: 0; padding-left: 0;
// } }
// .el-tabs__item.is-top:last-child, .el-tabs__item.is-top:last-child,
// .el-tabs__item.is-bottom:last-child { .el-tabs__item.is-bottom:last-child {
// padding-right: 0; padding-right: 0;
// } }
&.el-tabs--border-card, &.el-tabs--card, &.el-tabs--border-card, &.el-tabs--card,
.el-tabs--left, .el-tabs--right { .el-tabs--left, .el-tabs--right {
......
theme/index.css
View file @ 53519ab5
...@@ -32729,397 +32729,452 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -32729,397 +32729,452 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
--------------------------*/ --------------------------*/
/* Break-point /* Break-point
--------------------------*/ --------------------------*/
.el-tabs { .el-tabs__header {
border: 1px solid #D7D8D9; padding: 0;
border-radius: 3px; } position: relative;
.el-tabs > .el-tabs__content { margin: 0 0 15px; }
padding: 0 8px 8px 8px; }
.el-tabs__header { .el-tabs__active-bar {
padding: 0; position: absolute;
position: relative; bottom: 0;
margin: 0 0 15px; } left: 0;
.el-tabs__active-bar { height: 2px;
background-color: #0994DC;
z-index: 1;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none; }
.el-tabs__new-tab {
float: right;
border: 1px solid #d3dce6;
height: 18px;
width: 18px;
line-height: 18px;
margin: 12px 0 9px 10px;
border-radius: 3px;
text-align: center;
font-size: 12px;
color: #d3dce6;
cursor: pointer;
-webkit-transition: all .15s;
transition: all .15s; }
.el-tabs__new-tab .el-icon-plus {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8); }
.el-tabs__new-tab:hover {
color: #0994DC; }
.el-tabs__nav-wrap {
overflow: hidden;
margin-bottom: -1px;
position: relative; }
.el-tabs__nav-wrap::after {
content: "";
position: absolute; position: absolute;
left: 0;
bottom: 0; bottom: 0;
width: 100%;
height: 2px; height: 2px;
background-color: #0994DC; background-color: #D0D0D0;
z-index: 1; z-index: 1; }
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); .el-tabs__nav-wrap.is-scrollable {
transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); padding: 0 20px;
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none;
padding: 0 16px; }
.el-tabs__new-tab {
float: right;
border: 1px solid #d3dce6;
height: 18px;
width: 18px;
line-height: 18px;
margin: 12px 0 9px 10px;
border-radius: 3px;
text-align: center;
font-size: 12px;
color: #d3dce6;
cursor: pointer;
-webkit-transition: all .15s;
transition: all .15s; }
.el-tabs__new-tab .el-icon-plus {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8); }
.el-tabs__new-tab:hover {
color: #0994DC; }
.el-tabs__nav-wrap {
overflow: hidden;
margin-bottom: -1px;
position: relative; }
.el-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #D0D0D0;
z-index: 1; }
.el-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.el-tabs__nav-scroll {
overflow: hidden; }
.el-tabs__nav-next, .el-tabs__nav-prev {
position: absolute;
cursor: pointer;
line-height: 44px;
font-size: 12px;
color: #999999; }
.el-tabs__nav-next {
right: 0; }
.el-tabs__nav-prev {
left: 0; }
.el-tabs__nav {
white-space: nowrap;
position: relative;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
float: left;
z-index: 2; }
.el-tabs__nav.is-stretch {
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.el-tabs__nav.is-stretch > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center; }
.el-tabs__item {
padding: 0 24px;
height: 48px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 48px;
display: inline-block;
list-style: none;
font-size: 16px;
font-weight: 500;
color: #666666;
position: relative; }
.el-tabs__item:focus, .el-tabs__item:focus:active {
outline: none; }
.el-tabs__item:focus.is-active.is-focus:not(:active) {
-webkit-box-shadow: 0 0 2px 2px #0994DC inset;
box-shadow: 0 0 2px 2px #0994DC inset;
border-radius: 3px; }
.el-tabs__item .el-icon-close {
border-radius: 50%;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-left: 5px; }
.el-tabs__item .el-icon-close:before {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block; }
.el-tabs__item .el-icon-close:hover {
background-color: #CCCCCC;
color: #FFFFFF; }
.el-tabs__item.is-active {
color: #0994DC; }
.el-tabs__item:hover {
color: #0994DC;
cursor: pointer; }
.el-tabs__item.is-disabled {
color: #CCCCCC;
cursor: default; }
.el-tabs__content {
overflow: hidden;
position: relative; }
.el-tabs--card > .el-tabs__header {
border-bottom: 1px solid #D0D0D0; }
.el-tabs--card > .el-tabs__header .el-tabs__nav-wrap::after {
content: none; }
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 1px solid #D0D0D0;
border-bottom: none;
border-radius: 4px 4px 0 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.el-tabs--card > .el-tabs__header .el-tabs__active-bar {
display: none; } .el-tabs__nav-scroll {
.el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close { overflow: hidden; }
position: relative;
font-size: 12px; .el-tabs__nav-next, .el-tabs__nav-prev {
width: 0; position: absolute;
height: 14px; cursor: pointer;
vertical-align: middle; line-height: 44px;
line-height: 15px; font-size: 12px;
overflow: hidden; color: #999999; }
top: -1px;
right: -2px; .el-tabs__nav-next {
-webkit-transform-origin: 100% 50%; right: 0; }
transform-origin: 100% 50%; }
.el-tabs--card > .el-tabs__header .el-tabs__item { .el-tabs__nav-prev {
border-bottom: 1px solid transparent; left: 0; }
border-left: 1px solid #D0D0D0;
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); .el-tabs__nav {
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } border: none !important;
.el-tabs--card > .el-tabs__header .el-tabs__item:first-child { white-space: nowrap;
border-left: none; } position: relative;
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover { -webkit-transition: -webkit-transform .3s;
padding-left: 13px; transition: -webkit-transform .3s;
padding-right: 13px; } transition: transform .3s;
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close { transition: transform .3s, -webkit-transform .3s;
float: left;
z-index: 2; }
.el-tabs__nav.is-stretch {
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.el-tabs__nav.is-stretch > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center; }
.el-tabs__item {
padding: 0 20px;
height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 14px;
font-weight: 500;
color: #333333;
position: relative;
border: 1px solid #999999;
margin-left: 20px;
border-radius: 4px 4px 0 0;
background: #E6E8ED; }
.el-tabs__item:focus, .el-tabs__item:focus:active {
outline: none; }
.el-tabs__item:focus.is-active.is-focus:not(:active) {
-webkit-box-shadow: 0 0 2px 2px #0994DC inset;
box-shadow: 0 0 2px 2px #0994DC inset;
border-radius: 3px; }
.el-tabs__item .el-icon-close {
border-radius: 50%;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-left: 5px; }
.el-tabs__item .el-icon-close:before {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block; }
.el-tabs__item .el-icon-close:hover {
background-color: #CCCCCC;
color: #FFFFFF; }
.el-tabs__item.is-active {
color: #0994DC;
background: #FFFFFF; }
.el-tabs__item:hover {
color: #0994DC;
cursor: pointer; }
.el-tabs__item.is-disabled {
color: #CCCCCC;
cursor: default; }
.el-tabs__content {
overflow: hidden;
position: relative; }
.el-tabs--card > .el-tabs__header {
border-bottom: 1px solid #D0D0D0; }
.el-tabs--card > .el-tabs__header .el-tabs__nav-wrap::after {
content: none; }
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 1px solid #D0D0D0;
border-bottom: none;
border-radius: 4px 4px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.el-tabs--card > .el-tabs__header .el-tabs__active-bar {
display: none; }
.el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close {
position: relative;
font-size: 12px;
width: 0;
height: 14px;
vertical-align: middle;
line-height: 15px;
overflow: hidden;
top: -1px;
right: -2px;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%; }
.el-tabs--card > .el-tabs__header .el-tabs__item {
border-bottom: 1px solid transparent;
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
padding-left: 13px;
padding-right: 13px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close {
width: 14px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #FFFFFF; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
padding-left: 20px;
padding-right: 20px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close {
width: 14px; } width: 14px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #FFFFFF; } .el-tabs--border-card {
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable { background: #FFFFFF;
padding-left: 20px; border: 1px solid #E4E4E4;
padding-right: 20px; } -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); }
width: 14px; } .el-tabs--border-card > .el-tabs__content {
.el-tabs--border-card { padding: 15px; }
background: #FFFFFF; .el-tabs--border-card > .el-tabs__header {
border: 1px solid #E4E4E4; background-color: #F6F6F6;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); border-bottom: 1px solid #D0D0D0;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); } margin: 0; }
.el-tabs--border-card > .el-tabs__content { .el-tabs--border-card > .el-tabs__header .el-tabs__nav-wrap::after {
padding: 15px; } content: none; }
.el-tabs--border-card > .el-tabs__header { .el-tabs--border-card > .el-tabs__header .el-tabs__item {
background-color: #F6F6F6; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
border-bottom: 1px solid #D0D0D0; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin: 0; } border: 1px solid transparent;
.el-tabs--border-card > .el-tabs__header .el-tabs__nav-wrap::after {
content: none; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
border: 1px solid transparent;
margin-top: -1px;
color: #999999; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: #0994DC;
background-color: #FFFFFF;
border-right-color: #E4E4E4;
border-left-color: #E4E4E4; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: #0994DC; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled {
color: #CCCCCC; }
.el-tabs--border-card > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
margin-left: 0; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2) {
padding-left: 20px; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child {
padding-right: 20px; }
.el-tabs--bottom .el-tabs__header.is-bottom {
margin-bottom: 0;
margin-top: 10px; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom {
border-bottom: 0;
border-top: 1px solid #E4E4E4; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom {
margin-top: -1px; margin-top: -1px;
color: #999999; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: #0994DC;
background-color: #FFFFFF;
border-right-color: #E4E4E4;
border-left-color: #E4E4E4; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: #0994DC; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled {
color: #CCCCCC; }
.el-tabs--border-card > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
margin-left: 0; }
.el-tabs--top .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
padding-left: 0; }
.el-tabs--top .el-tabs__item.is-top:last-child,
.el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child,
.el-tabs--bottom .el-tabs__item.is-bottom:last-child {
padding-right: 0; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2) {
padding-left: 20px; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child {
padding-right: 20px; }
.el-tabs--bottom .el-tabs__header.is-bottom {
margin-bottom: 0;
margin-top: 10px; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom {
border-bottom: 0;
border-top: 1px solid #E4E4E4; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom {
margin-top: -1px;
margin-bottom: 0; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) {
border: 1px solid transparent; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom {
margin: 0 -1px -1px -1px; }
.el-tabs--left, .el-tabs--right {
overflow: hidden; }
.el-tabs--left .el-tabs__header.is-left,
.el-tabs--left .el-tabs__header.is-right,
.el-tabs--left .el-tabs__nav-wrap.is-left,
.el-tabs--left .el-tabs__nav-wrap.is-right,
.el-tabs--left .el-tabs__nav-scroll, .el-tabs--right .el-tabs__header.is-left,
.el-tabs--right .el-tabs__header.is-right,
.el-tabs--right .el-tabs__nav-wrap.is-left,
.el-tabs--right .el-tabs__nav-wrap.is-right,
.el-tabs--right .el-tabs__nav-scroll {
height: 100%; }
.el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__active-bar.is-right, .el-tabs--right .el-tabs__active-bar.is-left,
.el-tabs--right .el-tabs__active-bar.is-right {
top: 0;
bottom: auto;
width: 2px;
height: auto; }
.el-tabs--left .el-tabs__nav-wrap.is-left,
.el-tabs--left .el-tabs__nav-wrap.is-right, .el-tabs--right .el-tabs__nav-wrap.is-left,
.el-tabs--right .el-tabs__nav-wrap.is-right {
margin-bottom: 0; } margin-bottom: 0; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) { .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
border: 1px solid transparent; } .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom { .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
margin: 0 -1px -1px -1px; } .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left, .el-tabs--right { .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
overflow: hidden; } .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__header.is-left, .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
.el-tabs--left .el-tabs__header.is-right, height: 30px;
.el-tabs--left .el-tabs__nav-wrap.is-left, line-height: 30px;
.el-tabs--left .el-tabs__nav-wrap.is-right, width: 100%;
.el-tabs--left .el-tabs__nav-scroll, .el-tabs--right .el-tabs__header.is-left, text-align: center;
.el-tabs--right .el-tabs__header.is-right, cursor: pointer; }
.el-tabs--right .el-tabs__nav-wrap.is-left, .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__nav-wrap.is-right, .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--right .el-tabs__nav-scroll { .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
height: 100%; } .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--left .el-tabs__active-bar.is-left, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--left .el-tabs__active-bar.is-right, .el-tabs--right .el-tabs__active-bar.is-left, .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__active-bar.is-right { .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i {
top: 0; -webkit-transform: rotateZ(90deg);
bottom: auto; transform: rotateZ(90deg); }
width: 2px; .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
height: auto; } .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-left, .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev {
.el-tabs--left .el-tabs__nav-wrap.is-right, .el-tabs--right .el-tabs__nav-wrap.is-left,
.el-tabs--right .el-tabs__nav-wrap.is-right {
margin-bottom: 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
height: 30px;
line-height: 30px;
width: 100%;
text-align: center;
cursor: pointer; }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg); }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev {
left: auto;
top: 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
right: auto;
bottom: 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,
.el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, .el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,
.el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable {
padding: 30px 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after, .el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
height: 100%;
width: 2px;
bottom: auto;
top: 0; }
.el-tabs--left .el-tabs__nav.is-left,
.el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left,
.el-tabs--right .el-tabs__nav.is-right {
float: none; }
.el-tabs--left .el-tabs__item.is-left,
.el-tabs--left .el-tabs__item.is-right, .el-tabs--right .el-tabs__item.is-left,
.el-tabs--right .el-tabs__item.is-right {
display: block; }
.el-tabs--left .el-tabs__header.is-left {
float: left;
margin-bottom: 0;
margin-right: 10px; }
.el-tabs--left .el-tabs__nav-wrap.is-left {
margin-right: -1px; }
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
left: auto; left: auto;
right: 0; } top: 0; }
.el-tabs--left .el-tabs__active-bar.is-left { .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
right: 0; .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
left: auto; } .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
.el-tabs--left .el-tabs__item.is-left { right: auto;
text-align: right; } bottom: 0; }
.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left { .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,
display: none; } .el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, .el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,
.el-tabs--left.el-tabs--card .el-tabs__item.is-left { .el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable {
border-left: none; padding: 30px 0; }
border-right: 1px solid #D0D0D0; .el-tabs--left .el-tabs__nav-wrap.is-left::after,
border-bottom: none; .el-tabs--left .el-tabs__nav-wrap.is-right::after, .el-tabs--right .el-tabs__nav-wrap.is-left::after,
border-top: 1px solid #D0D0D0; .el-tabs--right .el-tabs__nav-wrap.is-right::after {
text-align: left; } height: 100%;
.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child { width: 2px;
border-right: 1px solid #D0D0D0; bottom: auto;
top: 0; }
.el-tabs--left .el-tabs__nav.is-left,
.el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left,
.el-tabs--right .el-tabs__nav.is-right {
float: none; }
.el-tabs--left .el-tabs__item.is-left,
.el-tabs--left .el-tabs__item.is-right, .el-tabs--right .el-tabs__item.is-left,
.el-tabs--right .el-tabs__item.is-right {
display: block; }
.el-tabs--left .el-tabs__header.is-left {
float: left;
margin-bottom: 0;
margin-right: 10px; }
.el-tabs--left .el-tabs__nav-wrap.is-left {
margin-right: -1px; }
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
left: auto;
right: 0; }
.el-tabs--left .el-tabs__active-bar.is-left {
right: 0;
left: auto; }
.el-tabs--left .el-tabs__item.is-left {
text-align: right; }
.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left {
display: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left {
border-left: none;
border-right: 1px solid #D0D0D0;
border-bottom: none;
border-top: 1px solid #D0D0D0;
text-align: left; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child {
border-right: 1px solid #D0D0D0;
border-top: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
border: 1px solid #D0D0D0;
border-right-color: #fff;
border-left: none;
border-bottom: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child {
border-top: none; } border-top: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active { .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child {
border: 1px solid #D0D0D0;
border-right-color: #fff;
border-left: none;
border-bottom: none; } border-bottom: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child {
border-top: none; } .el-tabs--left.el-tabs--card .el-tabs__nav {
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child { border-radius: 4px 0 0 4px;
border-bottom: none; } border-bottom: 1px solid #D0D0D0;
.el-tabs--left.el-tabs--card .el-tabs__nav { border-right: none; }
border-radius: 4px 0 0 4px;
border-bottom: 1px solid #D0D0D0; .el-tabs--left.el-tabs--card .el-tabs__new-tab {
border-right: none; } float: none; }
.el-tabs--left.el-tabs--card .el-tabs__new-tab {
float: none; } .el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left { border-right: 1px solid #dfe4ed; }
border-right: 1px solid #dfe4ed; }
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left { .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
border: 1px solid transparent; border: 1px solid transparent;
margin: -1px 0 -1px -1px; } margin: -1px 0 -1px -1px; }
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active { .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
border-color: transparent; border-color: transparent;
border-top-color: #d1dbe5; border-top-color: #d1dbe5;
border-bottom-color: #d1dbe5; } border-bottom-color: #d1dbe5; }
.el-tabs--right .el-tabs__header.is-right {
float: right; .el-tabs--right .el-tabs__header.is-right {
margin-bottom: 0; float: right;
margin-left: 10px; } margin-bottom: 0;
.el-tabs--right .el-tabs__nav-wrap.is-right { margin-left: 10px; }
margin-left: -1px; }
.el-tabs--right .el-tabs__nav-wrap.is-right::after { .el-tabs--right .el-tabs__nav-wrap.is-right {
left: 0; margin-left: -1px; }
right: auto; } .el-tabs--right .el-tabs__nav-wrap.is-right::after {
.el-tabs--right .el-tabs__active-bar.is-right { left: 0;
left: 0; } right: auto; }
.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right {
display: none; } .el-tabs--right .el-tabs__active-bar.is-right {
.el-tabs--right.el-tabs--card .el-tabs__item.is-right { left: 0; }
border-bottom: none;
border-top: 1px solid #D0D0D0; } .el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right {
.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child { display: none; }
border-left: 1px solid #D0D0D0;
.el-tabs--right.el-tabs--card .el-tabs__item.is-right {
border-bottom: none;
border-top: 1px solid #D0D0D0; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child {
border-left: 1px solid #D0D0D0;
border-top: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active {
border: 1px solid #D0D0D0;
border-left-color: #fff;
border-right: none;
border-bottom: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child {
border-top: none; } border-top: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active { .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child {
border: 1px solid #D0D0D0;
border-left-color: #fff;
border-right: none;
border-bottom: none; } border-bottom: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child {
border-top: none; } .el-tabs--right.el-tabs--card .el-tabs__nav {
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child { border-radius: 0 4px 4px 0;
border-bottom: none; } border-bottom: 1px solid #D0D0D0;
.el-tabs--right.el-tabs--card .el-tabs__nav { border-left: none; }
border-radius: 0 4px 4px 0;
border-bottom: 1px solid #D0D0D0; .el-tabs--right.el-tabs--border-card .el-tabs__header.is-right {
border-left: none; } border-left: 1px solid #dfe4ed; }
.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right {
border-left: 1px solid #dfe4ed; } .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right {
.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right { border: 1px solid transparent;
border: 1px solid transparent; margin: -1px -1px -1px 0; }
margin: -1px -1px -1px 0; } .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active {
.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active { border-color: transparent;
border-color: transparent; border-top-color: #d1dbe5;
border-top-color: #d1dbe5; border-bottom-color: #d1dbe5; }
border-bottom-color: #d1dbe5; }
.slideInRight-transition, .slideInRight-transition,
.slideInLeft-transition { .slideInLeft-transition {
theme/tabs.css
View file @ 53519ab5
...@@ -262,397 +262,452 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/ ...@@ -262,397 +262,452 @@ $--checkbox-disabled-checked-icon-color: $--disabled-fill-base !default;*/
--------------------------*/ --------------------------*/
/* Break-point /* Break-point
--------------------------*/ --------------------------*/
.el-tabs { .el-tabs__header {
border: 1px solid #D7D8D9; padding: 0;
border-radius: 3px; } position: relative;
.el-tabs > .el-tabs__content { margin: 0 0 15px; }
padding: 0 8px 8px 8px; }
.el-tabs__header { .el-tabs__active-bar {
padding: 0; position: absolute;
position: relative; bottom: 0;
margin: 0 0 15px; } left: 0;
.el-tabs__active-bar { height: 2px;
background-color: #0994DC;
z-index: 1;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none; }
.el-tabs__new-tab {
float: right;
border: 1px solid #d3dce6;
height: 18px;
width: 18px;
line-height: 18px;
margin: 12px 0 9px 10px;
border-radius: 3px;
text-align: center;
font-size: 12px;
color: #d3dce6;
cursor: pointer;
-webkit-transition: all .15s;
transition: all .15s; }
.el-tabs__new-tab .el-icon-plus {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8); }
.el-tabs__new-tab:hover {
color: #0994DC; }
.el-tabs__nav-wrap {
overflow: hidden;
margin-bottom: -1px;
position: relative; }
.el-tabs__nav-wrap::after {
content: "";
position: absolute; position: absolute;
left: 0;
bottom: 0; bottom: 0;
width: 100%;
height: 2px; height: 2px;
background-color: #0994DC; background-color: #D0D0D0;
z-index: 1; z-index: 1; }
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); .el-tabs__nav-wrap.is-scrollable {
transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); padding: 0 20px;
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none;
padding: 0 16px; }
.el-tabs__new-tab {
float: right;
border: 1px solid #d3dce6;
height: 18px;
width: 18px;
line-height: 18px;
margin: 12px 0 9px 10px;
border-radius: 3px;
text-align: center;
font-size: 12px;
color: #d3dce6;
cursor: pointer;
-webkit-transition: all .15s;
transition: all .15s; }
.el-tabs__new-tab .el-icon-plus {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8); }
.el-tabs__new-tab:hover {
color: #0994DC; }
.el-tabs__nav-wrap {
overflow: hidden;
margin-bottom: -1px;
position: relative; }
.el-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #D0D0D0;
z-index: 1; }
.el-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.el-tabs__nav-scroll {
overflow: hidden; }
.el-tabs__nav-next, .el-tabs__nav-prev {
position: absolute;
cursor: pointer;
line-height: 44px;
font-size: 12px;
color: #999999; }
.el-tabs__nav-next {
right: 0; }
.el-tabs__nav-prev {
left: 0; }
.el-tabs__nav {
white-space: nowrap;
position: relative;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
float: left;
z-index: 2; }
.el-tabs__nav.is-stretch {
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.el-tabs__nav.is-stretch > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center; }
.el-tabs__item {
padding: 0 24px;
height: 48px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 48px;
display: inline-block;
list-style: none;
font-size: 16px;
font-weight: 500;
color: #666666;
position: relative; }
.el-tabs__item:focus, .el-tabs__item:focus:active {
outline: none; }
.el-tabs__item:focus.is-active.is-focus:not(:active) {
-webkit-box-shadow: 0 0 2px 2px #0994DC inset;
box-shadow: 0 0 2px 2px #0994DC inset;
border-radius: 3px; }
.el-tabs__item .el-icon-close {
border-radius: 50%;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-left: 5px; }
.el-tabs__item .el-icon-close:before {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block; }
.el-tabs__item .el-icon-close:hover {
background-color: #CCCCCC;
color: #FFFFFF; }
.el-tabs__item.is-active {
color: #0994DC; }
.el-tabs__item:hover {
color: #0994DC;
cursor: pointer; }
.el-tabs__item.is-disabled {
color: #CCCCCC;
cursor: default; }
.el-tabs__content {
overflow: hidden;
position: relative; }
.el-tabs--card > .el-tabs__header {
border-bottom: 1px solid #D0D0D0; }
.el-tabs--card > .el-tabs__header .el-tabs__nav-wrap::after {
content: none; }
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 1px solid #D0D0D0;
border-bottom: none;
border-radius: 4px 4px 0 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
.el-tabs--card > .el-tabs__header .el-tabs__active-bar {
display: none; } .el-tabs__nav-scroll {
.el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close { overflow: hidden; }
position: relative;
font-size: 12px; .el-tabs__nav-next, .el-tabs__nav-prev {
width: 0; position: absolute;
height: 14px; cursor: pointer;
vertical-align: middle; line-height: 44px;
line-height: 15px; font-size: 12px;
overflow: hidden; color: #999999; }
top: -1px;
right: -2px; .el-tabs__nav-next {
-webkit-transform-origin: 100% 50%; right: 0; }
transform-origin: 100% 50%; }
.el-tabs--card > .el-tabs__header .el-tabs__item { .el-tabs__nav-prev {
border-bottom: 1px solid transparent; left: 0; }
border-left: 1px solid #D0D0D0;
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); .el-tabs__nav {
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } border: none !important;
.el-tabs--card > .el-tabs__header .el-tabs__item:first-child { white-space: nowrap;
border-left: none; } position: relative;
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover { -webkit-transition: -webkit-transform .3s;
padding-left: 13px; transition: -webkit-transform .3s;
padding-right: 13px; } transition: transform .3s;
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close { transition: transform .3s, -webkit-transform .3s;
float: left;
z-index: 2; }
.el-tabs__nav.is-stretch {
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.el-tabs__nav.is-stretch > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center; }
.el-tabs__item {
padding: 0 20px;
height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 14px;
font-weight: 500;
color: #333333;
position: relative;
border: 1px solid #999999;
margin-left: 20px;
border-radius: 4px 4px 0 0;
background: #E6E8ED; }
.el-tabs__item:focus, .el-tabs__item:focus:active {
outline: none; }
.el-tabs__item:focus.is-active.is-focus:not(:active) {
-webkit-box-shadow: 0 0 2px 2px #0994DC inset;
box-shadow: 0 0 2px 2px #0994DC inset;
border-radius: 3px; }
.el-tabs__item .el-icon-close {
border-radius: 50%;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-left: 5px; }
.el-tabs__item .el-icon-close:before {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block; }
.el-tabs__item .el-icon-close:hover {
background-color: #CCCCCC;
color: #FFFFFF; }
.el-tabs__item.is-active {
color: #0994DC;
background: #FFFFFF; }
.el-tabs__item:hover {
color: #0994DC;
cursor: pointer; }
.el-tabs__item.is-disabled {
color: #CCCCCC;
cursor: default; }
.el-tabs__content {
overflow: hidden;
position: relative; }
.el-tabs--card > .el-tabs__header {
border-bottom: 1px solid #D0D0D0; }
.el-tabs--card > .el-tabs__header .el-tabs__nav-wrap::after {
content: none; }
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 1px solid #D0D0D0;
border-bottom: none;
border-radius: 4px 4px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.el-tabs--card > .el-tabs__header .el-tabs__active-bar {
display: none; }
.el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close {
position: relative;
font-size: 12px;
width: 0;
height: 14px;
vertical-align: middle;
line-height: 15px;
overflow: hidden;
top: -1px;
right: -2px;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%; }
.el-tabs--card > .el-tabs__header .el-tabs__item {
border-bottom: 1px solid transparent;
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
padding-left: 13px;
padding-right: 13px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close {
width: 14px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #FFFFFF; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
padding-left: 20px;
padding-right: 20px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close {
width: 14px; } width: 14px; }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #FFFFFF; } .el-tabs--border-card {
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable { background: #FFFFFF;
padding-left: 20px; border: 1px solid #E4E4E4;
padding-right: 20px; } -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); }
width: 14px; } .el-tabs--border-card > .el-tabs__content {
.el-tabs--border-card { padding: 15px; }
background: #FFFFFF; .el-tabs--border-card > .el-tabs__header {
border: 1px solid #E4E4E4; background-color: #F6F6F6;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); border-bottom: 1px solid #D0D0D0;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); } margin: 0; }
.el-tabs--border-card > .el-tabs__content { .el-tabs--border-card > .el-tabs__header .el-tabs__nav-wrap::after {
padding: 15px; } content: none; }
.el-tabs--border-card > .el-tabs__header { .el-tabs--border-card > .el-tabs__header .el-tabs__item {
background-color: #F6F6F6; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
border-bottom: 1px solid #D0D0D0; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin: 0; } border: 1px solid transparent;
.el-tabs--border-card > .el-tabs__header .el-tabs__nav-wrap::after {
content: none; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
border: 1px solid transparent;
margin-top: -1px;
color: #999999; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: #0994DC;
background-color: #FFFFFF;
border-right-color: #E4E4E4;
border-left-color: #E4E4E4; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: #0994DC; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled {
color: #CCCCCC; }
.el-tabs--border-card > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
margin-left: 0; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2) {
padding-left: 20px; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child {
padding-right: 20px; }
.el-tabs--bottom .el-tabs__header.is-bottom {
margin-bottom: 0;
margin-top: 10px; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom {
border-bottom: 0;
border-top: 1px solid #E4E4E4; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom {
margin-top: -1px; margin-top: -1px;
color: #999999; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item {
margin-left: -1px; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: #0994DC;
background-color: #FFFFFF;
border-right-color: #E4E4E4;
border-left-color: #E4E4E4; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: #0994DC; }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled {
color: #CCCCCC; }
.el-tabs--border-card > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
margin-left: 0; }
.el-tabs--top .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
padding-left: 0; }
.el-tabs--top .el-tabs__item.is-top:last-child,
.el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child,
.el-tabs--bottom .el-tabs__item.is-bottom:last-child {
padding-right: 0; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2) {
padding-left: 20px; }
.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child {
padding-right: 20px; }
.el-tabs--bottom .el-tabs__header.is-bottom {
margin-bottom: 0;
margin-top: 10px; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom {
border-bottom: 0;
border-top: 1px solid #E4E4E4; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom {
margin-top: -1px;
margin-bottom: 0; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) {
border: 1px solid transparent; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom {
margin: 0 -1px -1px -1px; }
.el-tabs--left, .el-tabs--right {
overflow: hidden; }
.el-tabs--left .el-tabs__header.is-left,
.el-tabs--left .el-tabs__header.is-right,
.el-tabs--left .el-tabs__nav-wrap.is-left,
.el-tabs--left .el-tabs__nav-wrap.is-right,
.el-tabs--left .el-tabs__nav-scroll, .el-tabs--right .el-tabs__header.is-left,
.el-tabs--right .el-tabs__header.is-right,
.el-tabs--right .el-tabs__nav-wrap.is-left,
.el-tabs--right .el-tabs__nav-wrap.is-right,
.el-tabs--right .el-tabs__nav-scroll {
height: 100%; }
.el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__active-bar.is-right, .el-tabs--right .el-tabs__active-bar.is-left,
.el-tabs--right .el-tabs__active-bar.is-right {
top: 0;
bottom: auto;
width: 2px;
height: auto; }
.el-tabs--left .el-tabs__nav-wrap.is-left,
.el-tabs--left .el-tabs__nav-wrap.is-right, .el-tabs--right .el-tabs__nav-wrap.is-left,
.el-tabs--right .el-tabs__nav-wrap.is-right {
margin-bottom: 0; } margin-bottom: 0; }
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom:not(.is-active) { .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
border: 1px solid transparent; } .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--bottom.el-tabs--border-card .el-tabs__item.is-bottom { .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
margin: 0 -1px -1px -1px; } .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left, .el-tabs--right { .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
overflow: hidden; } .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__header.is-left, .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
.el-tabs--left .el-tabs__header.is-right, height: 30px;
.el-tabs--left .el-tabs__nav-wrap.is-left, line-height: 30px;
.el-tabs--left .el-tabs__nav-wrap.is-right, width: 100%;
.el-tabs--left .el-tabs__nav-scroll, .el-tabs--right .el-tabs__header.is-left, text-align: center;
.el-tabs--right .el-tabs__header.is-right, cursor: pointer; }
.el-tabs--right .el-tabs__nav-wrap.is-left, .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__nav-wrap.is-right, .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--right .el-tabs__nav-scroll { .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
height: 100%; } .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--left .el-tabs__active-bar.is-left, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--left .el-tabs__active-bar.is-right, .el-tabs--right .el-tabs__active-bar.is-left, .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__active-bar.is-right { .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i {
top: 0; -webkit-transform: rotateZ(90deg);
bottom: auto; transform: rotateZ(90deg); }
width: 2px; .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
height: auto; } .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-left, .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev {
.el-tabs--left .el-tabs__nav-wrap.is-right, .el-tabs--right .el-tabs__nav-wrap.is-left,
.el-tabs--right .el-tabs__nav-wrap.is-right {
margin-bottom: 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
height: 30px;
line-height: 30px;
width: 100%;
text-align: center;
cursor: pointer; }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next i,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev i,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next i {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg); }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-prev,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-prev {
left: auto;
top: 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
.el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
right: auto;
bottom: 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,
.el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, .el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,
.el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable {
padding: 30px 0; }
.el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after, .el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
height: 100%;
width: 2px;
bottom: auto;
top: 0; }
.el-tabs--left .el-tabs__nav.is-left,
.el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left,
.el-tabs--right .el-tabs__nav.is-right {
float: none; }
.el-tabs--left .el-tabs__item.is-left,
.el-tabs--left .el-tabs__item.is-right, .el-tabs--right .el-tabs__item.is-left,
.el-tabs--right .el-tabs__item.is-right {
display: block; }
.el-tabs--left .el-tabs__header.is-left {
float: left;
margin-bottom: 0;
margin-right: 10px; }
.el-tabs--left .el-tabs__nav-wrap.is-left {
margin-right: -1px; }
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
left: auto; left: auto;
right: 0; } top: 0; }
.el-tabs--left .el-tabs__active-bar.is-left { .el-tabs--left .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
right: 0; .el-tabs--left .el-tabs__nav-wrap.is-right > .el-tabs__nav-next, .el-tabs--right .el-tabs__nav-wrap.is-left > .el-tabs__nav-next,
left: auto; } .el-tabs--right .el-tabs__nav-wrap.is-right > .el-tabs__nav-next {
.el-tabs--left .el-tabs__item.is-left { right: auto;
text-align: right; } bottom: 0; }
.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left { .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable,
display: none; } .el-tabs--left .el-tabs__nav-wrap.is-right.is-scrollable, .el-tabs--right .el-tabs__nav-wrap.is-left.is-scrollable,
.el-tabs--left.el-tabs--card .el-tabs__item.is-left { .el-tabs--right .el-tabs__nav-wrap.is-right.is-scrollable {
border-left: none; padding: 30px 0; }
border-right: 1px solid #D0D0D0; .el-tabs--left .el-tabs__nav-wrap.is-left::after,
border-bottom: none; .el-tabs--left .el-tabs__nav-wrap.is-right::after, .el-tabs--right .el-tabs__nav-wrap.is-left::after,
border-top: 1px solid #D0D0D0; .el-tabs--right .el-tabs__nav-wrap.is-right::after {
text-align: left; } height: 100%;
.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child { width: 2px;
border-right: 1px solid #D0D0D0; bottom: auto;
top: 0; }
.el-tabs--left .el-tabs__nav.is-left,
.el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left,
.el-tabs--right .el-tabs__nav.is-right {
float: none; }
.el-tabs--left .el-tabs__item.is-left,
.el-tabs--left .el-tabs__item.is-right, .el-tabs--right .el-tabs__item.is-left,
.el-tabs--right .el-tabs__item.is-right {
display: block; }
.el-tabs--left .el-tabs__header.is-left {
float: left;
margin-bottom: 0;
margin-right: 10px; }
.el-tabs--left .el-tabs__nav-wrap.is-left {
margin-right: -1px; }
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
left: auto;
right: 0; }
.el-tabs--left .el-tabs__active-bar.is-left {
right: 0;
left: auto; }
.el-tabs--left .el-tabs__item.is-left {
text-align: right; }
.el-tabs--left.el-tabs--card .el-tabs__active-bar.is-left {
display: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left {
border-left: none;
border-right: 1px solid #D0D0D0;
border-bottom: none;
border-top: 1px solid #D0D0D0;
text-align: left; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child {
border-right: 1px solid #D0D0D0;
border-top: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
border: 1px solid #D0D0D0;
border-right-color: #fff;
border-left: none;
border-bottom: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child {
border-top: none; } border-top: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active { .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child {
border: 1px solid #D0D0D0;
border-right-color: #fff;
border-left: none;
border-bottom: none; } border-bottom: none; }
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:first-child {
border-top: none; } .el-tabs--left.el-tabs--card .el-tabs__nav {
.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child { border-radius: 4px 0 0 4px;
border-bottom: none; } border-bottom: 1px solid #D0D0D0;
.el-tabs--left.el-tabs--card .el-tabs__nav { border-right: none; }
border-radius: 4px 0 0 4px;
border-bottom: 1px solid #D0D0D0; .el-tabs--left.el-tabs--card .el-tabs__new-tab {
border-right: none; } float: none; }
.el-tabs--left.el-tabs--card .el-tabs__new-tab {
float: none; } .el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left { border-right: 1px solid #dfe4ed; }
border-right: 1px solid #dfe4ed; }
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left { .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
border: 1px solid transparent; border: 1px solid transparent;
margin: -1px 0 -1px -1px; } margin: -1px 0 -1px -1px; }
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active { .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
border-color: transparent; border-color: transparent;
border-top-color: #d1dbe5; border-top-color: #d1dbe5;
border-bottom-color: #d1dbe5; } border-bottom-color: #d1dbe5; }
.el-tabs--right .el-tabs__header.is-right {
float: right; .el-tabs--right .el-tabs__header.is-right {
margin-bottom: 0; float: right;
margin-left: 10px; } margin-bottom: 0;
.el-tabs--right .el-tabs__nav-wrap.is-right { margin-left: 10px; }
margin-left: -1px; }
.el-tabs--right .el-tabs__nav-wrap.is-right::after { .el-tabs--right .el-tabs__nav-wrap.is-right {
left: 0; margin-left: -1px; }
right: auto; } .el-tabs--right .el-tabs__nav-wrap.is-right::after {
.el-tabs--right .el-tabs__active-bar.is-right { left: 0;
left: 0; } right: auto; }
.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right {
display: none; } .el-tabs--right .el-tabs__active-bar.is-right {
.el-tabs--right.el-tabs--card .el-tabs__item.is-right { left: 0; }
border-bottom: none;
border-top: 1px solid #D0D0D0; } .el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right {
.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child { display: none; }
border-left: 1px solid #D0D0D0;
.el-tabs--right.el-tabs--card .el-tabs__item.is-right {
border-bottom: none;
border-top: 1px solid #D0D0D0; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child {
border-left: 1px solid #D0D0D0;
border-top: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active {
border: 1px solid #D0D0D0;
border-left-color: #fff;
border-right: none;
border-bottom: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child {
border-top: none; } border-top: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active { .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child {
border: 1px solid #D0D0D0;
border-left-color: #fff;
border-right: none;
border-bottom: none; } border-bottom: none; }
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:first-child {
border-top: none; } .el-tabs--right.el-tabs--card .el-tabs__nav {
.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child { border-radius: 0 4px 4px 0;
border-bottom: none; } border-bottom: 1px solid #D0D0D0;
.el-tabs--right.el-tabs--card .el-tabs__nav { border-left: none; }
border-radius: 0 4px 4px 0;
border-bottom: 1px solid #D0D0D0; .el-tabs--right.el-tabs--border-card .el-tabs__header.is-right {
border-left: none; } border-left: 1px solid #dfe4ed; }
.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right {
border-left: 1px solid #dfe4ed; } .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right {
.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right { border: 1px solid transparent;
border: 1px solid transparent; margin: -1px -1px -1px 0; }
margin: -1px -1px -1px 0; } .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active {
.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active { border-color: transparent;
border-color: transparent; border-top-color: #d1dbe5;
border-top-color: #d1dbe5; border-bottom-color: #d1dbe5; }
border-bottom-color: #d1dbe5; }
.slideInRight-transition, .slideInRight-transition,
.slideInLeft-transition { .slideInLeft-transition {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment