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

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

{"version":3,"sources":["steps.css","mixins/ellipsis.css"],"names":[],"mappings":"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","file":"steps.min.css","sourcesContent":["@import './variable.css';\r\n@import \"./mixins/ellipsis\";\r\n\r\n/* usage: @mixin get-theme red; */\r\n@define-mixin get-theme $theme {\r\n    .bk-step {\r\n        &.done {\r\n            .bk-step-number,\r\n            .bk-step-icon,\r\n            .bk-step-text {\r\n                border-color: $theme;\r\n                color: $theme;\r\n            }\r\n\r\n            /* horizontal */\r\n            .bk-step-title,\r\n            .bk-step-indicator {\r\n                &::after {\r\n                    background-image: linear-gradient(to right, $theme 50%, transparent 0%);\r\n                }\r\n            }\r\n\r\n            /* vertical */\r\n            &::after {\r\n                background-image: linear-gradient($theme 50%, transparent 0%);\r\n            }\r\n        }\r\n        &.current {\r\n            .bk-step-number,\r\n            .bk-step-icon,\r\n            .bk-step-text {\r\n                background-color: $theme;\r\n                border-color: $theme;\r\n                color: #fff;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n@define-mixin after-line {\r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        left: 100%;\r\n        top: 12px;\r\n        width: 99999px;\r\n        height: 1px;\r\n        background-color: transparent;\r\n    }\r\n}\r\n\r\n@keyframes loadingCircle {\r\n    100% {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n\r\n.bk-steps {\r\n    display: table;\r\n    width: 100%;\r\n    display: flex;\r\n    font-size: 0;\r\n    .bk-icon {\r\n        font-size: $iconLargeSize;\r\n        line-height: 24px;\r\n\r\n        &.icon-loading {\r\n            display: inline-block;\r\n            animation: loadingCircle 1s infinite linear;\r\n            font-size: $iconSmallestSize;\r\n        }\r\n    }\r\n    @mixin get-theme $newMainColor;\r\n    .bk-step {\r\n        flex: 1;\r\n        position: relative;\r\n        overflow: hidden;\r\n        white-space: nowrap;\r\n        margin-right: 8px;\r\n        .bk-step-indicator {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 24px;\r\n            height: 24px;\r\n            padding: 0;\r\n            margin-right: 8px;\r\n            border: 1px solid #979ba5;\r\n            border-radius: 50%;\r\n            line-height: 24px;\r\n            color: #979ba5;\r\n            text-align: center;\r\n            background-color: #fff;\r\n            z-index: 1;\r\n            vertical-align: top;\r\n        }\r\n        .bk-step-number {\r\n            font-size: 14px;\r\n            font-family: arial;\r\n        }\r\n        .bk-step-content {\r\n            display: inline-block;\r\n            vertical-align: top;\r\n        }\r\n        .bk-step-title {\r\n            display: inline-block;\r\n            position: relative;\r\n            color: #63656e;\r\n            font-size: 14px;\r\n            word-break: break-all;\r\n            padding-right: 8px;\r\n            line-height: 24px;\r\n            @mixin after-line;\r\n        }\r\n        .bk-step-description {\r\n            font-size: 12px;\r\n            color: #979ba5;\r\n            max-width: 140px;\r\n            white-space: normal;\r\n            @mixin ellipsis 140px, block;\r\n        }\r\n        &.bk-step-no-content {\r\n            .bk-step-indicator {\r\n                margin-right: 0;\r\n                @mixin after-line;\r\n                &::after {\r\n                    left: 32px;\r\n                    top: 10px;\r\n                }\r\n            }\r\n        }\r\n        &:last-child {\r\n            flex: none;\r\n            margin-right: 0;\r\n            .bk-step-title {\r\n                padding-right: 0;\r\n                &::after {\r\n                    display: none;\r\n                }\r\n            }\r\n        }\r\n        &.done {\r\n            .bk-step-title,\r\n            .bk-step-description {\r\n                color: $fnMainColor;\r\n            }\r\n        }\r\n        &.current {\r\n            .bk-step-number,\r\n            .bk-step-icon,\r\n            .bk-step-text {\r\n                border-width: 2px;\r\n            }\r\n            .bk-step-title,\r\n            .bk-step-description {\r\n                color: $fnMainColor;\r\n            }\r\n\r\n            &.bk-step-error {\r\n                .bk-step-indicator {\r\n                    background-color: $newRedColor1;\r\n                    border-color: $newRedColor1;\r\n                }\r\n                .bk-step-title,\r\n                .bk-step-description {\r\n                    color: $newRedColor1;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    &-info {\r\n        @mixin get-theme $infoColor;\r\n    }\r\n    &-success {\r\n        @mixin get-theme $newGreenColor;\r\n    }\r\n    &-warning {\r\n        @mixin get-theme $newOrangeColor;\r\n    }\r\n    &-danger {\r\n        @mixin get-theme $newRedColor;\r\n    }\r\n\r\n    &-dashed {\r\n        .bk-step {\r\n            .bk-step-title,\r\n            .bk-step-indicator {\r\n                &::after {\r\n                    background-image: linear-gradient(to right, $newGreyColor 50%, transparent 0%);\r\n                    background-position: bottom;\r\n                    background-size: 6px 1px;\r\n                    background-repeat: repeat-x;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &-solid {\r\n        .bk-step {\r\n            .bk-step-title,\r\n            .bk-step-indicator {\r\n                &::after {\r\n                    background-color: $newGreyColor;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &-vertical {\r\n        flex-direction: column;\r\n        height: 100%;\r\n        .bk-step {\r\n            margin-bottom: 8px;\r\n            margin-right: 0;\r\n            .bk-step-title,\r\n            .bk-step-indicator {\r\n                &::after {\r\n                    display: none;\r\n                }\r\n            }\r\n            &::after {\r\n                content: \"\";\r\n                position: absolute;\r\n                left: 12px;\r\n                top: 32px;\r\n                height: 100%;\r\n                width: 1px;\r\n                background-image: linear-gradient($newGreyColor 50%, transparent 0%);\r\n                background-position: right;\r\n                background-size: 1px 6px;\r\n                background-repeat: repeat-y;\r\n            }\r\n            .bk-step-title {\r\n                display: flex;\r\n                height: 100%;\r\n                align-items: center;\r\n                text-align: left;\r\n                margin-top: 0;\r\n            }\r\n        }\r\n    }\r\n\r\n    &-small {\r\n        .bk-step {\r\n            .bk-step-indicator {\r\n                width: 20px;\r\n                height: 20px;\r\n                line-height: 20px;\r\n            }\r\n\r\n            .bk-step-title {\r\n                font-size: 12px;\r\n                line-height: 20px;\r\n            }\r\n\r\n            .bk-step-number {\r\n                font-size: 12px;\r\n            }\r\n\r\n            .bk-icon {\r\n                font-size: 12px;\r\n                line-height: 20px;\r\n            }\r\n\r\n            &::after {\r\n                left: 10px;\r\n                top: 28px;\r\n            }\r\n\r\n            .bk-step-title {\r\n                &::after {\r\n                    top: 10px;\r\n                }\r\n            }\r\n\r\n            &.bk-step-no-content {\r\n                .bk-step-indicator {\r\n                    &::after {\r\n                        left: 28px;\r\n                        top: 8px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n","/**\r\n * @file ellipsis mixin\r\n *\r\n * usage:\r\n *      @mixin ellipsis 100px;\r\n */\r\n\r\n@define-mixin ellipsis $maxWidth, $display: inline-block {\r\n    display: $display;\r\n    max-width: $maxWidth;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n}\r\n"]}