loit-web-component-gx/static/theme/green/tabs.css

广西时代凌宇前端组件库

.el-tabs__header{padding-top: 0.1rem;position:relative;margin:0rem }.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:0.02rem;background-color:#09b29a;z-index:1;-webkit-transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1);list-style:none }.el-tabs__new-tab{float:right;border:1px solid #d3dce6;height:0.18rem;width:0.18rem;line-height:0.18rem;margin:0.12rem 0 0.09rem 0.1rem;border-radius:0.03rem;text-align:center;font-size:0.12rem;color:#d3dce6;cursor:pointer;-webkit-transition:all .15s;transition:all .15s }.el-tabs__new-tab .el-icon-plus{-webkit-transform:scale(.8,.8);transform:scale(.8,.8) }.el-tabs__new-tab:hover{color:#09b29a }.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-0.01rem;position:relative }.el-tabs__nav-wrap::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:0.02rem;background-color:#e4e7ed;z-index:1 }.el-tabs--border-card>.el-tabs__header .el-tabs__nav-wrap::after,.el-tabs--card>.el-tabs__header .el-tabs__nav-wrap::after{content:none }.el-tabs__nav-wrap.is-scrollable{padding:0 0.2rem;-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:0.44rem;font-size:0.12rem;color:#909399 }.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__item{padding:0 0.2rem;height:0.4rem;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:0.4rem;display:inline-block;list-style:none;font-size:0.15rem;font-weight:500;color:#303133;position:relative }.el-tabs__item:focus,.el-tabs__item:focus:active{outline:0 }.el-tabs__item:focus.is-active.is-focus:not(:active){-webkit-box-shadow:0 0 0.02rem 0.02rem #09b29a inset;box-shadow:0 0 0.02rem 0.02rem #09b29a inset;border-radius:0.03rem }.el-tabs__item .el-icon-close{border-radius:50%;text-align:center;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:0.05rem }.el-tabs__item .el-icon-close:before{-webkit-transform:scale(.9);transform:scale(.9);display:inline-block }.el-tabs__item .el-icon-close:hover{background-color:#c0c4cc;color:#fff }.el-tabs__item.is-active{color:#09b29a }.el-tabs__item:hover{color:#09b29a;cursor:pointer }.el-tabs__item.is-disabled{color:#c0c4cc;cursor:default }.el-tabs__content{overflow:hidden;position:relative }.el-tabs--card>.el-tabs__header{border-bottom:0.01rem solid #e4e7ed;padding-top: 0rem;margin-left: 0rem;}.el-tabs--card>.el-tabs__header .el-tabs__nav{border:1px solid #e4e7ed;border-bottom:none;border-radius:0.04rem 0.04rem 0 0 }.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:0.12rem;width:0;height:0.14rem;vertical-align:middle;line-height:0.15rem;overflow:hidden;top:-0.01rem;right:-0.02rem;-webkit-transform-origin:100% 50%;transform-origin:100% 50% }.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close,.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{width:0.14rem }.el-tabs--card>.el-tabs__header .el-tabs__item{border-bottom:0.01rem solid transparent;border-left:0.01rem solid #e4e7ed;-webkit-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) }.el-tabs--card>.el-tabs__header .el-tabs__item:first-child{border-left:none }.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-left:0.13rem;padding-right:0.13rem }.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{border-bottom-color:#fff }.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-left:0.2rem;padding-right:0.2rem }.el-tabs--border-card{background:#fff;border:1px solid #dcdfe6;-webkit-box-shadow:0 0.02rem 0.04rem 0 rgba(0,0,0,.12),0 0 0.06rem 0 rgba(0,0,0,.04);box-shadow:0 0.02rem 0.04rem 0 rgba(0,0,0,.12),0 0 0.06rem 0 rgba(0,0,0,.04) }.el-tabs--border-card>.el-tabs__content{padding:0.15rem }.el-tabs--border-card>.el-tabs__header{background-color:#f5f7fa;border-bottom:0.01rem solid #e4e7ed;margin:0 }.el-tabs--border-card>.el-tabs__header .el-tabs__item{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;margin:-0.01rem -0.01rem 0;color:#909399 }.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{color:#09b29a;background-color:#fff;border-right-color:#dcdfe6;border-left-color:#dcdfe6 }.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{color:#09b29a }.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-disabled{color:#c0c4cc }.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),.el-tabs--top .el-tabs__item.is-top:nth-child(2){padding-left:0 }.el-tabs--bottom .el-tabs__item.is-bottom:last-child,.el-tabs--bottom .el-tabs__item.is-top:last-child,.el-tabs--top .el-tabs__item.is-bottom:last-child,.el-tabs--top .el-tabs__item.is-top:last-child{padding-right:0 }.el-tabs--bottom .el-tabs--left .el-tabs__item:nth-child(2),.el-tabs--bottom .el-tabs--right .el-tabs__item:nth-child(2),.el-tabs--bottom.el-tabs--border-card .el-tabs__item:nth-child(2),.el-tabs--bottom.el-tabs--card .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--left .el-tabs__item:nth-child(2),.el-tabs--top .el-tabs--right .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--border-card .el-tabs__item:nth-child(2),.el-tabs--top.el-tabs--card .el-tabs__item:nth-child(2){padding-left:0.2rem }.el-tabs--bottom .el-tabs--left .el-tabs__item:last-child,.el-tabs--bottom .el-tabs--right .el-tabs__item:last-child,.el-tabs--bottom.el-tabs--border-card .el-tabs__item:last-child,.el-tabs--bottom.el-tabs--card .el-tabs__item:last-child,.el-tabs--top .el-tabs--left .el-tabs__item:last-child,.el-tabs--top .el-tabs--right .el-tabs__item:last-child,.el-tabs--top.el-tabs--border-card .el-tabs__item:last-child,.el-tabs--top.el-tabs--card .el-tabs__item:last-child{padding-right:0.2rem }.el-tabs--bottom .el-tabs__header.is-bottom{margin-bottom:0;margin-top:0.1rem }.el-tabs--bottom.el-tabs--border-card .el-tabs__header.is-bottom{border-bottom:0;border-top:0.01rem solid #dcdfe6 }.el-tabs--bottom.el-tabs--border-card .el-tabs__nav-wrap.is-bottom{margin-top:-0.01rem;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 -0.01rem -0.01rem }.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-scroll,.el-tabs--left .el-tabs__nav-wrap.is-left,.el-tabs--left .el-tabs__nav-wrap.is-right,.el-tabs--right .el-tabs__header.is-left,.el-tabs--right .el-tabs__header.is-right,.el-tabs--right .el-tabs__nav-scroll,.el-tabs--right .el-tabs__nav-wrap.is-left,.el-tabs--right .el-tabs__nav-wrap.is-right{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:0.02rem;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 }.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:0.3rem 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:0.02rem;bottom:auto;top:0 }.el-tabs--left .el-tabs__nav,.el-tabs--right .el-tabs__nav{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--card .el-tabs__active-bar.is-left,.el-tabs--right.el-tabs--card .el-tabs__active-bar.is-right{display:none }.el-tabs--left .el-tabs__nav-next,.el-tabs--left .el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-next,.el-tabs--right .el-tabs__nav-prev{height:0.3rem;line-height:0.3rem;width:100%;text-align:center;cursor:pointer }.el-tabs--left .el-tabs__nav-next i,.el-tabs--left .el-tabs__nav-prev i,.el-tabs--right .el-tabs__nav-next i,.el-tabs--right .el-tabs__nav-prev i{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg) }.el-tabs--left .el-tabs__nav-prev,.el-tabs--right .el-tabs__nav-prev{left:auto;top:0 }.el-tabs--left .el-tabs__nav-next,.el-tabs--right .el-tabs__nav-next{right:auto;bottom:0 }.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__nav-wrap.is-left::after{right:0;left:auto }.el-tabs--left .el-tabs__header.is-left{float:left;margin-bottom:0;margin-right:0.1rem }.el-tabs--left .el-tabs__nav-wrap.is-left{margin-right:-0.01rem }.el-tabs--left .el-tabs__item.is-left{text-align:right }.el-tabs--left.el-tabs--card .el-tabs__item.is-left{border-left:none;border-right:0.01rem solid #e4e7ed;border-bottom:none;border-top:0.01rem solid #e4e7ed }.el-tabs--left.el-tabs--card .el-tabs__item.is-left:first-child{border-right:0.01rem solid #e4e7ed;border-top:none }.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active{border:1px solid #e4e7ed;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 }.el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child{border-bottom:none }.el-tabs--left.el-tabs--card .el-tabs__nav{border-radius:0.04rem 0 0 0.04rem;border-bottom:0.01rem solid #e4e7ed;border-right: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{border-right:0.01rem solid #dfe4ed }.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left{border:1px solid transparent;margin:-0.01rem 0 -0.01rem -0.01rem }.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active{border-color:#d1dbe5 transparent }.el-tabs--right .el-tabs__header.is-right{float:right;margin-bottom:0;margin-left:0.1rem }.el-tabs--right .el-tabs__nav-wrap.is-right{margin-left:-0.01rem }.el-tabs--right .el-tabs__nav-wrap.is-right::after{left:0;right:auto }.el-tabs--right .el-tabs__active-bar.is-right{left:0 }.el-tabs--right.el-tabs--card .el-tabs__item.is-right{border-bottom:none;border-top:0.01rem solid #e4e7ed }.el-tabs--right.el-tabs--card .el-tabs__item.is-right:first-child{border-left:0.01rem solid #e4e7ed;border-top:none }.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active{border:1px solid #e4e7ed;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 }.el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active:last-child{border-bottom:none }.el-tabs--right.el-tabs--card .el-tabs__nav{border-radius:0 0.04rem 0.04rem 0;border-bottom:0.01rem solid #e4e7ed;border-left:none }.el-tabs--right.el-tabs--border-card .el-tabs__header.is-right{border-left:0.01rem solid #dfe4ed }.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right{border:1px solid transparent;margin:-0.01rem -0.01rem -0.01rem 0 }.el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active{border-color:#d1dbe5 transparent }.slideInLeft-transition,.slideInRight-transition{display:inline-block }.slideInRight-enter{-webkit-animation:slideInRight-enter .3s;animation:slideInRight-enter .3s }.slideInRight-leave{position:absolute;left:0;right:0;-webkit-animation:slideInRight-leave .3s;animation:slideInRight-leave .3s }.slideInLeft-enter{-webkit-animation:slideInLeft-enter .3s;animation:slideInLeft-enter .3s }.slideInLeft-leave{position:absolute;left:0;right:0;-webkit-animation:slideInLeft-leave .3s;animation:slideInLeft-leave .3s }@-webkit-keyframes slideInRight-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%) }to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes slideInRight-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%) }to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0) }}@-webkit-keyframes slideInRight-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1 }100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0 }}@keyframes slideInRight-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1 }100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0 }}@-webkit-keyframes slideInLeft-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%) }to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes slideInLeft-enter{0%{opacity:0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%) }to{opacity:1;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0) }}@-webkit-keyframes slideInLeft-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1 }100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0 }}@keyframes slideInLeft-leave{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(0);transform:translateX(0);opacity:1 }100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0 }}