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

一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作

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