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

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

{"version":3,"sources":["tab.css"],"names":[],"mappings":"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","file":"tab.min.css","sourcesContent":["@import \"./variable.css\";\n\n$border: 1px solid $newGreyColor1;\n$headerBackgroundColor: $newGreyColor3;\n$headerColor: $newBlackColor2;\n\n.bk-tab {\n    border-radius: 2px;\n}\n\n.bk-tab.bk-tab-border-card {\n    > .bk-tab-header {\n        height: 43px;\n        border: $border;\n        border-bottom: none;\n        background-color: $headerBackgroundColor;\n        border-radius: 2px 2px 0 0;\n    }\n\n    > .bk-tab-header > .bk-tab-label-wrapper > .bk-tab-label-list {\n        > .bk-tab-label-item.active {\n            background-color: #fff;\n        }\n    }\n}\n\n\n.bk-tab.bk-tab-card-tab {\n    border-radius: 4px;\n\n    > .bk-tab-header {\n        border: 0;\n        background: $newGreyColor2;\n        border-radius: 4px 4px 0 0;\n        overflow: hidden;\n    }\n\n    .bk-tab-label-wrapper {\n        &.has-scroller.has-add {\n            .bk-tab-add-controller {\n                border-left: none;\n            }\n\n            .bk-tab-extension-controller {\n                border-left: none;\n            }\n        }\n\n        .bk-tab-extension-controller,\n        .bk-tab-add-controller,\n        .bk-tab-scroll-controller {\n            border: none;\n            background: $newGreyColor2;\n        }\n\n        .bk-tab-label-list {\n            .bk-tab-label-item {\n                border: 0 !important;\n                position: relative;\n\n                &:before {\n                    content: '';\n                    display: block;\n                    position: absolute;\n                    left: 0;\n                    top: 50%;\n                    margin-top: -8px;\n                    width: 1px;\n                    height: 16px;\n                    background: $newGreyColor;\n                }\n            }\n\n            .is-first {\n                &:before {\n                    display: none;\n                }\n            }\n\n            .is-last:not(.active) {\n                &:after {\n                    content: '';\n                    display: block;\n                    position: absolute;\n                    right: 0;\n                    top: 50%;\n                    margin-top: -8px;\n                    width: 1px;\n                    height: 16px;\n                    background: $newGreyColor;\n                }\n            }\n\n            .active {\n                background: #fff;\n                border-radius: 4px 4px 0 0;\n                overflow: hidden;\n\n                &:before {\n                    display: none;\n                }\n            }\n\n            .active, .active + li {\n                &:before {\n                    display: none;\n                }\n            }\n\n        }\n    }\n\n    .bk-tab-section {\n        border: none;\n    }\n}\n\n.bk-tab.bk-tab-card {\n    .bk-tab-label-wrapper {\n        &.has-add {\n            .bk-tab-label-list {\n                border-radius: 2px 0 0 0;\n            }\n        }\n\n        &.has-scroller {\n            .bk-tab-label-list {\n                border-radius: 0;\n            }\n        }\n    }\n\n    .bk-tab-label-list {\n        border-top: $border;\n        border-radius: 2px 2px 0 0;\n\n        .bk-tab-label-item.is-first {\n            border-left: $border;\n        }\n    }\n\n    .bk-tab-scroll-controller {\n        border-top: $border;\n\n        &.prev {\n            border-left: $border;\n\n            &.disabled {\n                border-right: none;\n            }\n        }\n    }\n\n    .bk-tab-extension-controller, .bk-tab-add-controller {\n        border-top: $border;\n        background-color: #fff;\n    }\n\n    > .bk-tab-header > .bk-tab-label-wrapper > .bk-tab-label-list {\n        > .bk-tab-label-item.active {\n            background-color: #fff;\n        }\n    }\n}\n\n.bk-tab-label-list-has-bar {\n    &::after {\n        content: '';\n        position: absolute;\n        bottom: var(--activeBarBottom);\n        top: var(----activeBarTop);\n        left: var(--activeBarLeft);\n        height: var(--activeBarHeight);\n        width: var(--activeBarWidth);\n        transform: var(--activeBarTransform);\n        background: $newMainColor;\n        transition: transform .3s cubic-bezier(.645, .045, .355, 1);\n    }\n}\n\n.bk-tab.bk-tab-unborder-card {\n    .bk-tab-label-list {\n        border-top: none;\n    }\n\n    .bk-tab-label-wrapper {\n        &.has-scroller.has-add {\n            .bk-tab-add-controller {\n                border-left: none;\n            }\n\n            .bk-tab-extension-controller {\n                border-left: none;\n            }\n        }\n\n        .bk-tab-extension-controller,\n        .bk-tab-add-controller,\n        .bk-tab-scroll-controller {\n            border: none;\n            border-bottom: $border;\n            background-color: #fff;\n        }\n\n        .bk-tab-label-list {\n            .bk-tab-label-item {\n                border: none !important;\n            }\n        }\n    }\n\n    .bk-tab-section {\n        border: none;\n    }\n}\n\n.position-left, .position-right {\n    display: flex;\n    align-items: stretch;\n    min-height: 225px;\n\n    &.position-right {\n        flex-direction: row-reverse;\n\n        .bk-tab-header {\n            border-right: none;\n            right: 0;\n\n            &:after, &:before {\n                left: 0;\n                right: calc(100% - 1px);\n            }\n        }\n\n        .bk-tab-label-wrapper {\n            &:after {\n                border-right: none;\n                border-left: $border;\n            }\n\n            .bk-tab-label-list .bk-tab-label-item {\n                text-align: left;\n                border-right: none;\n                border-left: $border;\n            }\n        }\n    }\n\n\n    .bk-tab-header {\n        height: auto;\n        background: #fff;\n        padding: 10px 0;\n\n        &:after, &:before {\n            content: '';\n            position: absolute;\n            height: 10px;\n            width: 1px;\n            right: 0;\n            top: 0;\n            background: $newGreyColor1;\n        }\n\n        &:after {\n            top: calc(100% - 10px);\n            bottom: 0;\n        }\n    }\n\n    .bk-tab-label-wrapper {\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n        overflow-y: overlay;\n\n        &:after {\n            content: '';\n            flex: 1;\n            border-right: $border;\n        }\n\n        &.has-scroller.has-add {\n            .bk-tab-add-controller {\n                border-left: none;\n            }\n\n            .bk-tab-extension-controller {\n                border-left: none;\n            }\n        }\n\n        .bk-tab-label-list {\n            display: flex;\n            flex-direction: column;\n            height: auto;\n\n            .bk-tab-label-item {\n                border-right: $border;\n                padding: 0 12px;\n                margin: 0;\n                text-align: right;\n                position: relative;\n            }\n        }\n    }\n\n    .bk-tab-section {\n        border: none;\n        padding: 10px 20px;\n        flex: 1;\n\n        .bk-tab-content {\n            word-break: break-all;\n        }\n    }\n    &.bk-tab-vertical-tab{\n        .bk-tab-header{\n            padding: 0;\n            background: $newGreyColor2;\n        }\n        .bk-tab-label-wrapper {\n            .active{\n                background: #fff;\n            }\n            &:after {\n               display: none;\n            }\n\n\n            .bk-tab-label-list {\n                .bk-tab-label-item {\n                    border: 0;\n                }\n            }\n        }\n    }\n}\n\n.bk-tab-header {\n    position: relative;\n    height: 42px;\n    color: $headerColor;\n    background-image: linear-gradient(transparent 41px, $newGreyColor1 1px);\n}\n\n.bk-tab-label-wrapper {\n    position: relative;\n    height: 100%;\n    font-size: 0;\n    overflow: hidden;\n\n    &.has-add .bk-tab-label-list {\n        .bk-tab-label-item.has-close {\n            transition: color .3s cubic-bezier(.645, .045, .355, 1), padding .3s cubic-bezier(.645, .045, .355, 1);\n\n            &:hover {\n                padding: 0 11px;\n            }\n\n            .bk-tab-close-controller {\n                transition: all .3s cubic-bezier(.645, .045, .355, 1);\n            }\n        }\n\n    }\n\n    &.has-scroller {\n        padding: 0 24px;\n\n        .bk-tab-label-list {\n            .bk-tab-label-item.is-last {\n                border-right: none;\n            }\n        }\n    }\n\n    &.has-scroller.has-add {\n        padding: 0 66px 0 24px;\n\n        .bk-tab-add-controller {\n            position: absolute;\n            top: 0;\n            right: 0;\n            border-bottom: $border;\n            border-left: $border;\n\n            &.next-right {\n                right: 24px;\n                box-shadow: -10px 0 10px rgb(0 0 0 / .05);\n                border-right: 0;\n            }\n        }\n\n        &.has-extension {\n            .bk-tab-extension-controller {\n                position: absolute;\n                top: 0;\n                right: 42px;\n                border-left: $border;\n            }\n\n            .bk-tab-add-controller {\n                border-left-width: 0;\n            }\n\n            .bk-tab-scroll-controller.next {\n                right: 84px !important;\n            }\n        }\n\n        .bk-tab-scroll-controller.next {\n            right: 42px;\n        }\n\n        .bk-tab-add-custom {\n            position: absolute;\n            top: 0;\n            right: 0;\n            border-left: $border;\n\n            &.next-right {\n                right: 24px;\n                border-left: $border;\n                box-shadow: -10px 0 10px rgb(0 0 0 / .05);\n            }\n        }\n    }\n\n    &.has-scroller.has-extension:not(.has-add) {\n        .bk-tab-extension-controller {\n            position: absolute;\n            top: 0;\n            right: 0;\n            border-bottom: $border;\n            border-left: $border;\n        }\n\n        .bk-tab-scroll-controller.next {\n            right: 42px;\n        }\n    }\n\n    .bk-tab-extension-controller, .bk-tab-add-controller {\n        display: inline-block;\n        vertical-align: middle;\n        width: 42px;\n        height: 42px;\n        border-right: $border;\n        border-bottom: $border;\n        line-height: 41px;\n        text-align: center;\n        font-size: $iconNormalSize;\n        background-color: $headerBackgroundColor;\n        cursor: pointer;\n        z-index: 2;\n\n        &:hover {\n            color: $newMainColor;\n        }\n\n        &.left-border {\n            border-left: $border;\n        }\n    }\n\n    .bk-tab-add-custom {\n        display: inline-block;\n        position: relative;\n        font-size: $iconNormalSize;\n        z-index: 2;\n        vertical-align: middle;\n        opacity: 1;\n        background-color: $headerBackgroundColor;\n        border-bottom: $border;\n    }\n\n    .bk-tab-scroll-controller {\n        position: absolute;\n        top: 0;\n        width: 24px;\n        height: 42px;\n        border-bottom: $border;\n        line-height: 41px;\n        text-align: center;\n        font-size: $iconNormalSize;\n        background-color: $headerBackgroundColor;\n        box-shadow: 0 0 20px rgba(0, 0, 0, .2);\n        cursor: pointer;\n        z-index: 1;\n\n        &.prev {\n            left: 0;\n            border-right: $border;\n            border-radius: 2px 0 0 0;\n        }\n\n        &.next {\n            right: 0;\n            border-left: $border;\n        }\n\n        &.add {\n            width: 42px;\n            right: 24px;\n            box-shadow: none;\n            border-right: $border;\n            border-left: $border;\n        }\n\n        &:hover {\n            color: $newMainColor;\n        }\n\n        &.disabled {\n            box-shadow: none;\n            cursor: not-allowed;\n            color: $newGreyColor;\n        }\n    }\n\n    .bk-tab-label-list {\n        display: inline-block;\n        height: 42px;\n        vertical-align: middle;\n        padding: 0;\n        margin: 0;\n        font-size: 0;\n        list-style: none;\n        white-space: nowrap;\n        transition: transform .3s;\n\n        .bk-tab-label-item {\n            position: relative;\n            display: inline-block;\n            vertical-align: middle;\n            min-width: 100px;\n            padding: 0 18px;\n            border-right: $border;\n            text-align: center;\n            line-height: 42px;\n            cursor: pointer;\n\n            &:not(.is-disabled):hover {\n                color: $newMainColor;\n            }\n\n            &.simulate-border-bottom {\n                padding: 0 10px;\n\n                .bk-tab-label {\n                    box-shadow: inset 0px -4px 0px -2px $newMainColor !important;\n                    padding: 0 8px;\n                }\n            }\n\n            &.simulate-border-right {\n                /* box-shadow: inset -4px 0px 0px -2px #3a84ff; */\n                border-right: 2px solid $newMainColor;\n                padding-right: 11px;\n            }\n\n            &.active {\n                /* background-color: #fff; */\n                color: $newMainColor;\n                cursor: default;\n            }\n\n            &.is-disabled {\n                color: $newGreyColor;\n                cursor: not-allowed;\n            }\n\n            &.is-dragging {\n                cursor: move;\n                user-select: none;\n            }\n\n            &.is-dragenter {\n                background: $newGreyColor2;\n            }\n\n            &.is-unsortable {\n                cursor: not-allowed;\n                background: none;\n            }\n\n            &.has-close:hover {\n                padding: 0 10px;\n\n                .bk-tab-close-controller {\n                    margin: 0 0 0 6px;\n                    width: 14px;\n                }\n            }\n\n            .bk-tab-label {\n                font-size: 14px;\n                display: inline-block;\n                vertical-align: middle;\n            }\n\n            .bk-tab-close-controller {\n                position: relative;\n                display: inline-block;\n                vertical-align: middle;\n                width: 0;\n                height: 14px;\n                border-radius: 50%;\n                background-color: $newGreyColor;\n                overflow: hidden;\n                cursor: pointer;\n\n                &:before,\n                &:after {\n                    content: \"\";\n                    position: absolute;\n                    top: 6px;\n                    left: 3px;\n                    width: 8px;\n                    height: 1px;\n                    background-color: #fff;\n                }\n\n                &:before {\n                    transform: translateY(0.5px) rotate(45deg);\n                }\n\n                &:after {\n                    transform: translateY(0.5px) rotate(-45deg);\n                }\n\n                &:hover {\n                    background-color: $newBlackColor3;\n                }\n            }\n        }\n    }\n}\n\n.bk-tab-header-setting {\n    float: right;\n    height: 42px;\n    line-height: 42px;\n}\n\n.bk-tab-section {\n    padding: 20px;\n    border: $border;\n    border-top: none;\n    border-radius: 0 0 2px 2px;\n}\n"]}