bk-magic-vue/lib/ui/tab.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.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{
                border-left:none;
            }

.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-extension-controller,
        .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-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 !important;
                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:before, .bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .active + li: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-extension-controller, .bk-tab.bk-tab-card .bk-tab-add-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{
                border-left:none;
            }

.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-extension-controller,
        .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-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 !important;
            }

.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-right .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-controller{
                border-left:none;
            }

.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-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 1px);
}

.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 !important;
            }

.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-extension-controller, .bk-tab-label-wrapper .bk-tab-add-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-extension-controller:hover, .bk-tab-label-wrapper .bk-tab-add-controller:hover{
            color:#3a84ff;
        }

.bk-tab-label-wrapper .bk-tab-extension-controller.left-border, .bk-tab-label-wrapper .bk-tab-add-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 0px -4px 0px -2px #3a84ff !important;
                            box-shadow:inset 0px -4px 0px -2px #3a84ff !important;
                    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:before,
                .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item .bk-tab-close-controller:after{
                    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(0.5px) rotate(45deg);
                            transform:translateY(0.5px) rotate(45deg);
                }

.bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item .bk-tab-close-controller:after{
                    -webkit-transform:translateY(0.5px) rotate(-45deg);
                            transform:translateY(0.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;
}