.el-tabs{}
|
|
.el-tabs__header{
|
border-bottom: 1px solid #26defd;
|
padding: 0;
|
position: relative;
|
margin: 0 0 15px;
|
}
|
|
.el-tabs__active-bar{
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
height: 3px;
|
background-color: #26defd;
|
z-index: 1;
|
transition: transform .3s cubic-bezier(.645,.045,.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;
|
transition: all .15s;
|
}
|
|
.el-tabs__new-tab .el-icon-plus {
|
transform: scale(0.8, 0.8);
|
}
|
|
.el-tabs__new-tab:hover{
|
color: #26defd;
|
}
|
|
.el-tabs__nav-wrap{
|
overflow: hidden;
|
margin-bottom: -1px;
|
position: relative;
|
}
|
|
.el-tabs__nav-wrap.is-scrollable{
|
padding: 0 15px;
|
}
|
|
.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: rgb(131, 145, 165);
|
}
|
|
.el-tabs__nav-next{
|
right: 0;
|
}
|
|
.el-tabs__nav-prev{
|
left: 0;
|
}
|
|
.el-tabs__nav{
|
white-space: nowrap;
|
position: relative;
|
transition: transform .3s;
|
float: left;
|
}
|
|
.el-tabs__item{
|
padding: 0 16px;
|
height: 42px;
|
box-sizing: border-box;
|
line-height: 42px;
|
display: inline-block;
|
list-style: none;
|
font-size: 14px;
|
color: #fff;
|
position: relative;
|
}
|
|
.el-tabs__item .el-icon-close{
|
border-radius: 50%;
|
text-align: center;
|
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
margin-left: 5px;
|
}
|
|
.el-tabs__item .el-icon-close:before{
|
transform: scale(.7, .7);
|
display: inline-block;
|
}
|
|
.el-tabs__item .el-icon-close:hover{
|
background-color: rgb(151, 168, 190);
|
color: transparent;
|
}
|
|
.el-tabs__item:hover{
|
color: #26defd;
|
cursor: pointer;
|
}
|
|
.el-tabs__item.is-disabled{
|
color: #bbb;
|
cursor: default;
|
}
|
|
.el-tabs__item.is-active{
|
color: #26defd;
|
}
|
|
.el-tabs__content{
|
overflow: hidden;
|
position: relative;
|
}
|
|
.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;
|
transform-origin: 100% 50%;
|
}
|
|
.el-tabs--card > .el-tabs__header .el-tabs__item {
|
border: 1px solid transparent;
|
transition: all .3s cubic-bezier(.645,.045,.355,1)
|
}
|
|
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable{}
|
|
.el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover{
|
padding-right: 9px;
|
padding-left: 9px;
|
}
|
|
.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: 1px solid #26defd;
|
border-bottom-color: transparent;
|
border-radius: 4px 4px 0 0;
|
}
|
|
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable{
|
padding-right: 16px;
|
padding-left: 16px;
|
}
|
|
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close{
|
width: 14px;
|
}
|
|
.el-tabs--border-card{
|
background: transparent;
|
border: 1px solid #26defd;
|
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
|
}
|
|
.el-tabs--border-card >.el-tabs__content {
|
padding: 15px;
|
}
|
|
.el-tabs--border-card >.el-tabs__header {
|
background-color: #194B5B;
|
margin: 0;
|
}
|
|
.el-tabs--border-card >.el-tabs__header .el-tabs__item {
|
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
border: 1px solid transparent;
|
border-top: 0;
|
margin-right: -1px;
|
margin-left: -1px
|
}
|
|
.el-tabs--border-card >.el-tabs__header .el-tabs__item.is-active{
|
background-color: transparent;
|
border-right-color: #26defd;
|
border-left-color: #26defd;
|
}
|
|
.el-tabs--border-card >.el-tabs__header .el-tabs__item.is-active:first-child{
|
border-left-color: #26defd;
|
}
|
|
.el-tabs--border-card >.el-tabs__header .el-tabs__item.is-active:last-child{
|
border-right-color: #26defd;
|
}
|
|
.slideInRight-transition, .slideInLeft-transition {
|
display: inline-block;
|
}
|
.slideInRight-enter {
|
animation: slideInRight-enter .3s;
|
}
|
.slideInRight-leave {
|
position: absolute;
|
left: 0;
|
right: 0;
|
animation: slideInRight-leave .3s;
|
}
|
.slideInLeft-enter {
|
animation: slideInLeft-enter .3s;
|
}
|
.slideInLeft-leave {
|
position: absolute;
|
left: 0;
|
right: 0;
|
animation: slideInLeft-leave .3s;
|
}
|
|
@keyframes slideInRight-enter {
|
0% {
|
opacity: 0;
|
transform-origin: 0 0;
|
transform: translateX(100%)
|
}
|
|
to {
|
opacity: 1;
|
transform-origin: 0 0;
|
transform: translateX(0)
|
}
|
}
|
@keyframes slideInRight-leave {
|
0% {
|
transform-origin: 0 0;
|
transform: translateX(0);
|
opacity: 1
|
}
|
|
100% {
|
transform-origin: 0 0;
|
transform: translateX(100%);
|
opacity: 0
|
}
|
}
|
@keyframes slideInLeft-enter {
|
0% {
|
opacity: 0;
|
transform-origin: 0 0;
|
transform: translateX(-100%)
|
}
|
|
to {
|
opacity: 1;
|
transform-origin: 0 0;
|
transform: translateX(0)
|
}
|
}
|
@keyframes slideInLeft-leave {
|
0% {
|
transform-origin: 0 0;
|
transform: translateX(0);
|
opacity: 1
|
}
|
|
100% {
|
transform-origin: 0 0;
|
transform: translateX(-100%);
|
opacity: 0
|
}
|
}
|
