@cw-devops/bk-magic-vue/lib/ui/steps.min.css.map

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

{"version":3,"sources":["steps.css","mixins/ellipsis.css"],"names":[],"mappings":"AAmDA,iCACI,GACI,+BAAyB,CAAzB,uBACJ,CACJ,CAJA,yBACI,GACI,+BAAyB,CAAzB,uBACJ,CACJ,CAEA,UACI,aAAc,CACd,UAAW,CACX,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,WAgOJ,CA/NI,mBACI,cAAyB,CACzB,gBAOJ,CALI,gCACI,oBAAqB,CACrB,kDAA2C,CAA3C,0CAA2C,CAC3C,cACJ,CA/DI,oHAGI,oBAAoB,CACpB,aACJ,CAKI,8FACI,8GAAuE,CAAvE,iEACJ,CAIJ,8BACI,gHAA6D,CAA7D,2DACJ,CAGA,6HAGI,wBAAwB,CACxB,oBAAoB,CACpB,UACJ,CAuCR,mBACI,kBAAO,CAAP,UAAO,CAAP,MAAO,CACP,iBAAkB,CAClB,eAAgB,CAChB,kBAAmB,CACnB,gBA2FJ,CA1FI,sCACI,0BAAoB,CAApB,0BAAoB,CAApB,mBAAoB,CACpB,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,UAAW,CACX,WAAY,CACZ,SAAU,CACV,gBAAiB,CACjB,wBAAyB,CACzB,iBAAkB,CAClB,gBAAiB,CACjB,aAAc,CACd,iBAAkB,CAClB,qBAAsB,CACtB,SAAU,CACV,kBACJ,CACA,mCACI,cAAe,CACf,iBACJ,CACA,oCACI,oBAAqB,CACrB,kBACJ,CACA,kCACI,oBAAqB,CACrB,iBAAkB,CAClB,aAAc,CACd,cAAe,CACf,oBAAqB,CACrB,iBAAkB,CAClB,gBAEJ,CAzEJ,wCACI,UAAW,CACX,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,aAAc,CACd,UAAW,CACX,4BACJ,CAkEI,wCACI,cAAe,CACf,aAAc,CAEd,kBAAmB,CC9G3B,aAAiB,CACjB,eAAoB,CACpB,eAAgB,CAChB,sBAAuB,CACvB,kBD4GI,CAEI,yDACI,cAMJ,CAzFR,+DACI,UAAW,CACX,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,aAAc,CACd,UAAW,CACX,4BACJ,CA6EY,+DACI,SAAU,CACV,QACJ,CAGR,8BACI,kBAAU,CAAV,aAAU,CAAV,SAAU,CACV,cAOJ,CANI,6CACI,eAIJ,CAHI,mDACI,YACJ,CAIJ,oFAEI,aACJ,CAGA,6HAGI,gBACJ,CACA,0FAEI,aACJ,CAGI,4DACI,wBAA+B,CAC/B,oBACJ,CACA,sHAEI,aACJ,CA/JJ,mIAGI,oBAAoB,CACpB,aACJ,CAKI,wGACI,8GAAuE,CAAvE,iEACJ,CAIJ,mCACI,gHAA6D,CAA7D,2DACJ,CAGA,4IAGI,wBAAwB,CACxB,oBAAoB,CACpB,UACJ,CA3BA,4IAGI,oBAAoB,CACpB,aACJ,CAKI,8GACI,8GAAuE,CAAvE,iEACJ,CAIJ,sCACI,gHAA6D,CAA7D,2DACJ,CAGA,qJAGI,wBAAwB,CACxB,oBAAoB,CACpB,UACJ,CA3BA,4IAGI,oBAAoB,CACpB,aACJ,CAKI,8GACI,8GAAuE,CAAvE,iEACJ,CAIJ,sCACI,gHAA6D,CAA7D,2DACJ,CAGA,qJAGI,wBAAwB,CACxB,oBAAoB,CACpB,UACJ,CA3BA,yIAGI,oBAAoB,CACpB,aACJ,CAKI,4GACI,8GAAuE,CAAvE,iEACJ,CAIJ,qCACI,gHAA6D,CAA7D,2DACJ,CAGA,kJAGI,wBAAwB,CACxB,oBAAoB,CACpB,UACJ,CAyJI,kGACI,8GAA8E,CAA9E,iEAA8E,CAC9E,0BAA2B,CAC3B,uBAAwB,CACxB,0BACJ,CASA,gGACI,wBACJ,CAKZ,mBACI,2BAAsB,CAAtB,4BAAsB,CAAtB,yBAAsB,CAAtB,qBAAsB,CACtB,WA8BJ,CA7BI,4BACI,iBAAkB,CAClB,cA0BJ,CAvBQ,sGACI,YACJ,CAEJ,kCACI,UAAW,CACX,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,WAAY,CACZ,SAAU,CACV,gHAAoE,CAApE,2DAAoE,CACpE,wBAA0B,CAC1B,uBAAwB,CACxB,0BACJ,CACA,2CACI,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,WAAY,CACZ,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,eAAgB,CAChB,YACJ,CAMA,4CACI,UAAW,CACX,WAAY,CACZ,gBACJ,CAEA,wCACI,cAAe,CACf,gBACJ,CAEA,yCACI,cACJ,CAEA,kCACI,cAAe,CACf,gBACJ,CAEA,+BACI,SAAU,CACV,QACJ,CAGI,8CACI,QACJ,CAKI,qEACI,SAAU,CACV,OACJ","file":"steps.min.css","sourcesContent":["@import './variable.css';\n@import \"./mixins/ellipsis\";\n\n/* usage: @mixin get-theme red; */\n@define-mixin get-theme $theme {\n    .bk-step {\n        &.done {\n            .bk-step-number,\n            .bk-step-icon,\n            .bk-step-text {\n                border-color: $theme;\n                color: $theme;\n            }\n\n            /* horizontal */\n            .bk-step-title,\n            .bk-step-indicator {\n                &::after {\n                    background-image: linear-gradient(to right, $theme 50%, transparent 0%);\n                }\n            }\n\n            /* vertical */\n            &::after {\n                background-image: linear-gradient($theme 50%, transparent 0%);\n            }\n        }\n        &.current {\n            .bk-step-number,\n            .bk-step-icon,\n            .bk-step-text {\n                background-color: $theme;\n                border-color: $theme;\n                color: #fff;\n            }\n        }\n    }\n}\n\n@define-mixin after-line {\n    &::after {\n        content: \"\";\n        position: absolute;\n        left: 100%;\n        top: 12px;\n        width: 99999px;\n        height: 1px;\n        background-color: transparent;\n    }\n}\n\n@keyframes loadingCircle {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n.bk-steps {\n    display: table;\n    width: 100%;\n    display: flex;\n    font-size: 0;\n    .bk-icon {\n        font-size: $iconLargeSize;\n        line-height: 24px;\n\n        &.icon-loading {\n            display: inline-block;\n            animation: loadingCircle 1s infinite linear;\n            font-size: $iconSmallestSize;\n        }\n    }\n    @mixin get-theme $newMainColor;\n    .bk-step {\n        flex: 1;\n        position: relative;\n        overflow: hidden;\n        white-space: nowrap;\n        margin-right: 8px;\n        .bk-step-indicator {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 24px;\n            height: 24px;\n            padding: 0;\n            margin-right: 8px;\n            border: 1px solid #979ba5;\n            border-radius: 50%;\n            line-height: 24px;\n            color: #979ba5;\n            text-align: center;\n            background-color: #fff;\n            z-index: 1;\n            vertical-align: top;\n        }\n        .bk-step-number {\n            font-size: 14px;\n            font-family: arial;\n        }\n        .bk-step-content {\n            display: inline-block;\n            vertical-align: top;\n        }\n        .bk-step-title {\n            display: inline-block;\n            position: relative;\n            color: #63656e;\n            font-size: 14px;\n            word-break: break-all;\n            padding-right: 8px;\n            line-height: 24px;\n            @mixin after-line;\n        }\n        .bk-step-description {\n            font-size: 12px;\n            color: #979ba5;\n            max-width: 140px;\n            white-space: normal;\n            @mixin ellipsis 140px, block;\n        }\n        &.bk-step-no-content {\n            .bk-step-indicator {\n                margin-right: 0;\n                @mixin after-line;\n                &::after {\n                    left: 32px;\n                    top: 10px;\n                }\n            }\n        }\n        &:last-child {\n            flex: none;\n            margin-right: 0;\n            .bk-step-title {\n                padding-right: 0;\n                &::after {\n                    display: none;\n                }\n            }\n        }\n        &.done {\n            .bk-step-title,\n            .bk-step-description {\n                color: $fnMainColor;\n            }\n        }\n        &.current {\n            .bk-step-number,\n            .bk-step-icon,\n            .bk-step-text {\n                border-width: 2px;\n            }\n            .bk-step-title,\n            .bk-step-description {\n                color: $fnMainColor;\n            }\n\n            &.bk-step-error {\n                .bk-step-indicator {\n                    background-color: $newRedColor1;\n                    border-color: $newRedColor1;\n                }\n                .bk-step-title,\n                .bk-step-description {\n                    color: $newRedColor1;\n                }\n            }\n        }\n    }\n    &-info {\n        @mixin get-theme $infoColor;\n    }\n    &-success {\n        @mixin get-theme $newGreenColor;\n    }\n    &-warning {\n        @mixin get-theme $newOrangeColor;\n    }\n    &-danger {\n        @mixin get-theme $newRedColor;\n    }\n\n    &-dashed {\n        .bk-step {\n            .bk-step-title,\n            .bk-step-indicator {\n                &::after {\n                    background-image: linear-gradient(to right, $newGreyColor 50%, transparent 0%);\n                    background-position: bottom;\n                    background-size: 6px 1px;\n                    background-repeat: repeat-x;\n                }\n            }\n        }\n    }\n\n    &-solid {\n        .bk-step {\n            .bk-step-title,\n            .bk-step-indicator {\n                &::after {\n                    background-color: $newGreyColor;\n                }\n            }\n        }\n    }\n\n    &-vertical {\n        flex-direction: column;\n        height: 100%;\n        .bk-step {\n            margin-bottom: 8px;\n            margin-right: 0;\n            .bk-step-title,\n            .bk-step-indicator {\n                &::after {\n                    display: none;\n                }\n            }\n            &::after {\n                content: \"\";\n                position: absolute;\n                left: 12px;\n                top: 32px;\n                height: 100%;\n                width: 1px;\n                background-image: linear-gradient($newGreyColor 50%, transparent 0%);\n                background-position: right;\n                background-size: 1px 6px;\n                background-repeat: repeat-y;\n            }\n            .bk-step-title {\n                display: flex;\n                height: 100%;\n                align-items: center;\n                text-align: left;\n                margin-top: 0;\n            }\n        }\n    }\n\n    &-small {\n        .bk-step {\n            .bk-step-indicator {\n                width: 20px;\n                height: 20px;\n                line-height: 20px;\n            }\n\n            .bk-step-title {\n                font-size: 12px;\n                line-height: 20px;\n            }\n\n            .bk-step-number {\n                font-size: 12px;\n            }\n\n            .bk-icon {\n                font-size: 12px;\n                line-height: 20px;\n            }\n\n            &::after {\n                left: 10px;\n                top: 28px;\n            }\n\n            .bk-step-title {\n                &::after {\n                    top: 10px;\n                }\n            }\n\n            &.bk-step-no-content {\n                .bk-step-indicator {\n                    &::after {\n                        left: 28px;\n                        top: 8px;\n                    }\n                }\n            }\n        }\n    }\n}\n","/**\n * @file ellipsis mixin\n *\n * usage:\n *      @mixin ellipsis 100px;\n */\n\n@define-mixin ellipsis $maxWidth, $display: inline-block {\n    display: $display;\n    max-width: $maxWidth;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n"]}