kingdot/lib/theme/Tabs.css

A UI Components Library For Vue

.kd-tabs,.kd-tabs-main-move{overflow:hidden;position:relative}.kd-tab,.kd-tabs,.kd-tabs-main-move{position:relative}.kd-tabs{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kd-tabs .kd-control{display:none}.kd-addabble-box{margin-right:50px}.kd-tab{width:auto;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;text-align:center}.kd-tab-text{text-decoration:none;color:#8d919b;font-family:PingFangSC-Medium;font-size:14px;letter-spacing:0}.kd-tabs-block .kd-tab-active .kd-tab-text,.kd-tabs-card .kd-tabs-content .kd-tab-active .kd-tab-text,.kd-tabs-default .kd-tab-active .kd-tab-text,.kd-tabs-pagination .kd-tab-active .kd-tab-text,.kd-tabs-super-card .kd-tabs-content .kd-tab-active .kd-tab-text,.kd-tabs-vertical .kd-tab-active .kd-tab-text{color:#fff}.kd-tabs-default:after{content:'';position:absolute;bottom:0;left:0;height:1px;width:100%;background:#2f374f}.kd-tabs-default .kd-tabs-content{position:relative;padding:0 16px;display:inline-block;white-space:nowrap}.kd-tabs-default .kd-tab{display:inline-block;padding:10px 16px;min-width:88px}.kd-tabs-pagination .kd-tab{padding:10px 5px;min-width:84px}.kd-tabs-pagination .kd-tab:not(:last-child):after{position:absolute;content:'';width:1px;background:#2f374f;height:18px;right:0;top:15px}.kd-tabs-pagination .kd-tabs-content{display:-ms-flexbox;display:flex}.kd-tabs-pagination .kd-tab-active .kd-tab-text{display:inline-block;border-bottom:1px solid #ed3351;padding-bottom:5px;height:auto}.kd-tabs-card .kd-tab:not(:first-child){border-left:none}.kd-tabs-card .kd-tab{display:inline-block;min-width:84px;border:1px solid #525c77;padding:9px 16px;cursor:pointer;background:#222a41}.kd-tabs-card .kd-tabs-content{display:inline-block;white-space:nowrap;border-radius:4px 0 0 4px}.kd-tabs-card .kd-tabs-content .kd-tab-active{background:linear-gradient(180deg,#f8334c 0,#4e284d 91%)!important}.kd-tabs-super-card .kd-tab,.kd-tabs-super-card .kd-tabs-content{display:inline-block;border-radius:2px;background-color:$-tabs-super-card-background-color}.kd-tabs-super-card .kd-tab{padding:0 8px;height:26px;line-height:25px}.kd-tabs-super-card .kd-tab .kd-tab-text{font-size:12px}.kd-tabs-super-card .kd-tabs-content{white-space:nowrap;padding:3px}.kd-tabs-super-card .kd-tabs-content .kd-tab-active{background:linear-gradient(180deg,#f8334c 0,#4e284d 91%)}.kd-tabs-super-card .kd-tabs-content.kd-tab-content-fluid{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.kd-tabs-super-card .kd-tabs-content.kd-tab-content-fluid .kd-tab{-ms-flex:1;flex:1}.kd-tabs-super-card.kd-tabs-small .kd-tabs-content{padding:2px}.kd-tabs-super-card.kd-tabs-small .kd-tab{height:24px;line-height:23px}.kd-tabs-block .kd-tabs-content{display:inline-block;padding:0 16px;white-space:nowrap}.kd-tabs-block .kd-tabs-content .kd-tab:not(:first-child){margin-left:7px}.kd-tabs-block .kd-tab{display:inline-block;min-width:128px;padding:14px 16px;border:1px solid transparent;background:#2d354d}.kd-tabs-block .kd-tab-active:before{content:'';position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:2px;background:#ed3351}.kd-tabs-block .kd-tab-active{background:#222a41!important;border-bottom:1px solid transparent;border-left:1px solid transparent}.kd-tabs-vertical{display:inline-block;padding:14px 0;height:100%}.kd-tabs-vertical .kd-tab{white-space:nowarp;min-width:60px;padding:16px}.kd-tabs-vertical .kd-move-vertical{transition:all .3s;position:absolute;background:#ed3351;right:0;top:0;height:50px;width:3px}.kd-tabs-vertical:after{position:absolute;content:'';right:0;top:0;height:100%;width:1px;background:#2f374f}.kd-tabs-show-control{position:relative}.kd-tabs-show-control .kd-tabs-content{transition:margin-left .3s;padding:0 20px}.kd-tabs-show-control .kd-control{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:calc(100% - 2px);cursor:pointer;background:#2d354d;border:1px solid transparent;z-index:10}.kd-tabs-show-control .kd-control.right{right:0}.kd-move-bar{transition:all .3s;position:absolute;display:inline-block;background:#ed3351;bottom:0;z-index:99;height:2px}.kd-close{display:inline;margin-left:10px;color:#c0c7cc}.kd-close:hover{color:#fff}.kd-close:active{color:#222a41}.kd-disabled{cursor:not-allowed}.kd-disabled .kd-tab-text{color:#4f576e;cursor:not-allowed}.kd-move-disable-left,.kd-move-disable-right{cursor:not-allowed!important;color:#4f576e;background:#222a41!important;border:1px solid #2f374f!important}.kd-add-tab{position:absolute;right:0;top:calc(50% - 21px);width:42px;height:42px;background:0 0;margin-left:7px;color:#b2b2b2;cursor:pointer;text-align:center;line-height:42px;font-size:12px}.kd-add-tab:active{color:#222a41;border:1px solid}