element-ui
Version:
A Component Library for Vue.js.
1 lines • 5.78 kB
CSS
@charset "UTF-8";.el-tabs__header:after,.el-tabs__header:before{display:table;content:""}.el-tabs__header:after{clear:both}.el-tabs{display:inline-block}.el-tabs__header{border-bottom:1px solid #d3dce6;padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#20a0ff;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--card .el-tabs__item.is-active.is-closable .el-icon-close,.el-tabs--card .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.el-tabs__item{padding:0 16px;height:42px;box-sizing:border-box;line-height:42px;float:left;list-style:none;font-size:14px;color:#8492a6;margin-bottom:-1px;position:relative}.el-tabs__item:hover{color:#1f2d3d;cursor:pointer}.el-tabs__item.is-active{color:#20a0ff}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--card .el-tabs__active-bar{display:none}.el-tab-pane,.slideInLeft-transition,.slideInRight-transition{display:inline-block}.el-tabs--card .el-tabs__item{border:1px solid transparent;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card .el-tabs__item.is-closable:hover{padding-right:9px;padding-left:9px}.el-tabs--card .el-tabs__item.is-active{border:1px solid #d3dce6;border-bottom-color:#fff;border-radius:4px 4px 0 0}.el-tabs--card .el-tabs__item.is-active.is-closable{padding-right:16px;padding-left:16px}.el-tabs--card .el-tabs__item .el-icon-close{font-size:12px;vertical-align:middle;line-height:15px;overflow:hidden;width:0;height:14px;border-radius:50%;text-align:center;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);position:relative;top:-1px;right:-2px}.el-tabs--card .el-tabs__item .el-icon-close:before{-webkit-transform:scale(.7,.7);transform:scale(.7,.7);display:inline-block}.el-tabs--card .el-tabs__item .el-icon-close:hover{background-color:#99a9bf;color:#fff}.el-tabs--border-card{background:#fff;border:1px solid #d3dce6;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-tabs--border-card .el-tabs__content{padding:15px}.el-tabs--border-card .el-tabs__header{background-color:#eff2f7;margin:0}.el-tabs--border-card .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;border-top:0;margin-right:-1px;margin-left:-1px}.el-tabs--border-card .el-tabs__item.is-active{background-color:#fff;border-right-color:#d3dce6;border-left-color:#d3dce6}.el-tabs--border-card .el-tabs__item.is-active:first-child{border-left-color:#d3dce6}.el-tabs--border-card .el-tabs__item.is-active:last-child{border-right-color:#d3dce6}.el-tab-pane{width:100%}.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}}