@cw-devops/bk-magic-vue
Version:
基于蓝鲸 Magicbox 和 Vue 的前端组件库
3 lines (2 loc) • 15.2 kB
CSS
.bk-tab{border-radius:2px}.bk-tab.bk-tab-border-card>.bk-tab-header{height:43px;border:1px solid #dcdee5;border-bottom:none;background-color:#fafbfd;border-radius:2px 2px 0 0}.bk-tab.bk-tab-border-card>.bk-tab-header>.bk-tab-label-wrapper>.bk-tab-label-list>.bk-tab-label-item.active{background-color:#fff}.bk-tab.bk-tab-card-tab{border-radius:4px}.bk-tab.bk-tab-card-tab>.bk-tab-header{border:0;background:#f0f1f5;border-radius:4px 4px 0 0;overflow:hidden}.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-controller,.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-extension-controller{border-left:none}.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-add-controller,.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-extension-controller,.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-scroll-controller{border:none;background:#f0f1f5}.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item{border:0;position:relative}.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item:before{content:"";display:block;position:absolute;left:0;top:50%;margin-top:-8px;width:1px;height:16px;background:#c4c6cc}.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .is-first:before{display:none}.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .is-last:not(.active):after{content:"";display:block;position:absolute;right:0;top:50%;margin-top:-8px;width:1px;height:16px;background:#c4c6cc}.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .active{background:#fff;border-radius:4px 4px 0 0;overflow:hidden}.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .active:before{display:none}.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .active+li:before,.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .active:before{display:none}.bk-tab.bk-tab-card-tab .bk-tab-section{border:none}.bk-tab.bk-tab-card .bk-tab-label-wrapper.has-add .bk-tab-label-list{border-radius:2px 0 0 0}.bk-tab.bk-tab-card .bk-tab-label-wrapper.has-scroller .bk-tab-label-list{border-radius:0}.bk-tab.bk-tab-card .bk-tab-label-list{border-top:1px solid #dcdee5;border-radius:2px 2px 0 0}.bk-tab.bk-tab-card .bk-tab-label-list .bk-tab-label-item.is-first{border-left:1px solid #dcdee5}.bk-tab.bk-tab-card .bk-tab-scroll-controller{border-top:1px solid #dcdee5}.bk-tab.bk-tab-card .bk-tab-scroll-controller.prev{border-left:1px solid #dcdee5}.bk-tab.bk-tab-card .bk-tab-scroll-controller.prev.disabled{border-right:none}.bk-tab.bk-tab-card .bk-tab-add-controller,.bk-tab.bk-tab-card .bk-tab-extension-controller{border-top:1px solid #dcdee5;background-color:#fff}.bk-tab.bk-tab-card>.bk-tab-header>.bk-tab-label-wrapper>.bk-tab-label-list>.bk-tab-label-item.active{background-color:#fff}.bk-tab-label-list-has-bar:after{content:"";position:absolute;bottom:var(--activeBarBottom);top:var(----activeBarTop);left:var(--activeBarLeft);height:var(--activeBarHeight);width:var(--activeBarWidth);-webkit-transform:var(--activeBarTransform);transform:var(--activeBarTransform);background:#3a84ff;-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)}.bk-tab.bk-tab-unborder-card .bk-tab-label-list{border-top:none}.bk-tab.bk-tab-unborder-card .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-controller,.bk-tab.bk-tab-unborder-card .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-extension-controller{border-left:none}.bk-tab.bk-tab-unborder-card .bk-tab-label-wrapper .bk-tab-add-controller,.bk-tab.bk-tab-unborder-card .bk-tab-label-wrapper .bk-tab-extension-controller,.bk-tab.bk-tab-unborder-card .bk-tab-label-wrapper .bk-tab-scroll-controller{border:none;border-bottom:1px solid #dcdee5;background-color:#fff}.bk-tab.bk-tab-unborder-card .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item{border:none}.bk-tab.bk-tab-unborder-card .bk-tab-section{border:none}.position-left,.position-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-height:225px}.position-left.position-right,.position-right.position-right{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.position-left.position-right .bk-tab-header,.position-right.position-right .bk-tab-header{border-right:none;right:0}.position-left.position-right .bk-tab-header:after,.position-left.position-right .bk-tab-header:before,.position-right.position-right .bk-tab-header:after,.position-right.position-right .bk-tab-header:before{left:0;right:calc(100% - 1px)}.position-left.position-right .bk-tab-label-wrapper:after,.position-right.position-right .bk-tab-label-wrapper:after{border-right:none;border-left:1px solid #dcdee5}.position-left.position-right .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item,.position-right.position-right .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item{text-align:left;border-right:none;border-left:1px solid #dcdee5}.position-left .bk-tab-header,.position-right .bk-tab-header{height:auto;background:#fff;padding:10px 0}.position-left .bk-tab-header:after,.position-left .bk-tab-header:before,.position-right .bk-tab-header:after,.position-right .bk-tab-header:before{content:"";position:absolute;height:10px;width:1px;right:0;top:0;background:#dcdee5}.position-left .bk-tab-header:after,.position-right .bk-tab-header:after{top:calc(100% - 10px);bottom:0}.position-left .bk-tab-label-wrapper,.position-right .bk-tab-label-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;overflow-y:overlay}.position-left .bk-tab-label-wrapper:after,.position-right .bk-tab-label-wrapper:after{content:"";-webkit-box-flex:1;-ms-flex:1;flex:1;border-right:1px solid #dcdee5}.position-left .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-controller,.position-left .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-extension-controller,.position-right .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-controller,.position-right .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-extension-controller{border-left:none}.position-left .bk-tab-label-wrapper .bk-tab-label-list,.position-right .bk-tab-label-wrapper .bk-tab-label-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:auto}.position-left .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item,.position-right .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item{border-right:1px solid #dcdee5;padding:0 12px;margin:0;text-align:right;position:relative}.position-left .bk-tab-section,.position-right .bk-tab-section{border:none;padding:10px 20px;-webkit-box-flex:1;-ms-flex:1;flex:1}.position-left .bk-tab-section .bk-tab-content,.position-right .bk-tab-section .bk-tab-content{word-break:break-all}.position-left.bk-tab-vertical-tab .bk-tab-header,.position-right.bk-tab-vertical-tab .bk-tab-header{padding:0;background:#f0f1f5}.position-left.bk-tab-vertical-tab .bk-tab-label-wrapper .active,.position-right.bk-tab-vertical-tab .bk-tab-label-wrapper .active{background:#fff}.position-left.bk-tab-vertical-tab .bk-tab-label-wrapper:after,.position-right.bk-tab-vertical-tab .bk-tab-label-wrapper:after{display:none}.position-left.bk-tab-vertical-tab .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item,.position-right.bk-tab-vertical-tab .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item{border:0}.bk-tab-header{position:relative;height:42px;color:#63656e;background-image:linear-gradient(transparent 41px,#dcdee5 0)}.bk-tab-label-wrapper{position:relative;height:100%;font-size:0;overflow:hidden}.bk-tab-label-wrapper.has-add .bk-tab-label-list .bk-tab-label-item.has-close{-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)}.bk-tab-label-wrapper.has-add .bk-tab-label-list .bk-tab-label-item.has-close:hover{padding:0 11px}.bk-tab-label-wrapper.has-add .bk-tab-label-list .bk-tab-label-item.has-close .bk-tab-close-controller{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.bk-tab-label-wrapper.has-scroller{padding:0 24px}.bk-tab-label-wrapper.has-scroller .bk-tab-label-list .bk-tab-label-item.is-last{border-right:none}.bk-tab-label-wrapper.has-scroller.has-add{padding:0 66px 0 24px}.bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-controller{position:absolute;top:0;right:0;border-bottom:1px solid #dcdee5;border-left:1px solid #dcdee5}.bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-controller.next-right{right:24px;-webkit-box-shadow:-10px 0 10px rgba(0,0,0,.05);box-shadow:-10px 0 10px rgba(0,0,0,.05);border-right:0}.bk-tab-label-wrapper.has-scroller.has-add.has-extension .bk-tab-extension-controller{position:absolute;top:0;right:42px;border-left:1px solid #dcdee5}.bk-tab-label-wrapper.has-scroller.has-add.has-extension .bk-tab-add-controller{border-left-width:0}.bk-tab-label-wrapper.has-scroller.has-add.has-extension .bk-tab-scroll-controller.next{right:84px}.bk-tab-label-wrapper.has-scroller.has-add .bk-tab-scroll-controller.next{right:42px}.bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-custom{position:absolute;top:0;right:0;border-left:1px solid #dcdee5}.bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-custom.next-right{right:24px;border-left:1px solid #dcdee5;-webkit-box-shadow:-10px 0 10px rgba(0,0,0,.05);box-shadow:-10px 0 10px rgba(0,0,0,.05)}.bk-tab-label-wrapper.has-scroller.has-extension:not(.has-add) .bk-tab-extension-controller{position:absolute;top:0;right:0;border-bottom:1px solid #dcdee5;border-left:1px solid #dcdee5}.bk-tab-label-wrapper.has-scroller.has-extension:not(.has-add) .bk-tab-scroll-controller.next{right:42px}.bk-tab-label-wrapper .bk-tab-add-controller,.bk-tab-label-wrapper .bk-tab-extension-controller{display:inline-block;vertical-align:middle;width:42px;height:42px;border-right:1px solid #dcdee5;border-bottom:1px solid #dcdee5;line-height:41px;text-align:center;font-size:22px;background-color:#fafbfd;cursor:pointer;z-index:2}.bk-tab-label-wrapper .bk-tab-add-controller:hover,.bk-tab-label-wrapper .bk-tab-extension-controller:hover{color:#3a84ff}.bk-tab-label-wrapper .bk-tab-add-controller.left-border,.bk-tab-label-wrapper .bk-tab-extension-controller.left-border{border-left:1px solid #dcdee5}.bk-tab-label-wrapper .bk-tab-add-custom{display:inline-block;position:relative;font-size:22px;z-index:2;vertical-align:middle;opacity:1;background-color:#fafbfd;border-bottom:1px solid #dcdee5}.bk-tab-label-wrapper .bk-tab-scroll-controller{position:absolute;top:0;width:24px;height:42px;border-bottom:1px solid #dcdee5;line-height:41px;text-align:center;font-size:22px;background-color:#fafbfd;-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);cursor:pointer;z-index:1}.bk-tab-label-wrapper .bk-tab-scroll-controller.prev{left:0;border-right:1px solid #dcdee5;border-radius:2px 0 0 0}.bk-tab-label-wrapper .bk-tab-scroll-controller.next{right:0;border-left:1px solid #dcdee5}.bk-tab-label-wrapper .bk-tab-scroll-controller.add{width:42px;right:24px;-webkit-box-shadow:none;box-shadow:none;border-right:1px solid #dcdee5;border-left:1px solid #dcdee5}.bk-tab-label-wrapper .bk-tab-scroll-controller:hover{color:#3a84ff}.bk-tab-label-wrapper .bk-tab-scroll-controller.disabled{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;color:#c4c6cc}.bk-tab-label-wrapper .bk-tab-label-list{display:inline-block;height:42px;vertical-align:middle;padding:0;margin:0;font-size:0;list-style:none;white-space:nowrap;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item{position:relative;display:inline-block;vertical-align:middle;min-width:100px;padding:0 18px;border-right:1px solid #dcdee5;text-align:center;line-height:42px;cursor:pointer}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item:not(.is-disabled):hover{color:#3a84ff}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.simulate-border-bottom{padding:0 10px}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.simulate-border-bottom .bk-tab-label{-webkit-box-shadow:inset 0 -4px 0 -2px #3a84ff;box-shadow:inset 0 -4px 0 -2px #3a84ff;padding:0 8px}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.simulate-border-right{border-right:2px solid #3a84ff;padding-right:11px}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.active{color:#3a84ff;cursor:default}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.is-disabled{color:#c4c6cc;cursor:not-allowed}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.is-dragging{cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.is-dragenter{background:#f0f1f5}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.is-unsortable{cursor:not-allowed;background:none}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.has-close:hover{padding:0 10px}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item.has-close:hover .bk-tab-close-controller{margin:0 0 0 6px;width:14px}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item .bk-tab-label{font-size:14px;display:inline-block;vertical-align:middle}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item .bk-tab-close-controller{position:relative;display:inline-block;vertical-align:middle;width:0;height:14px;border-radius:50%;background-color:#c4c6cc;overflow:hidden;cursor:pointer}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item .bk-tab-close-controller:after,.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item .bk-tab-close-controller:before{content:"";position:absolute;top:6px;left:3px;width:8px;height:1px;background-color:#fff}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item .bk-tab-close-controller:before{-webkit-transform:translateY(.5px) rotate(45deg);transform:translateY(.5px) rotate(45deg)}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item .bk-tab-close-controller:after{-webkit-transform:translateY(.5px) rotate(-45deg);transform:translateY(.5px) rotate(-45deg)}.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item .bk-tab-close-controller:hover{background-color:#979ba5}.bk-tab-header-setting{float:right;height:42px;line-height:42px}.bk-tab-section{padding:20px;border:1px solid #dcdee5;border-top:none;border-radius:0 0 2px 2px}
/*# sourceMappingURL=tab.min.css.map */