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

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

{"version":3,"sources":["upload.css"],"names":[],"mappings":"AAEI,eACI,UACJ,CACA,qBACI,iBAAkB,CAClB,oBAAqB,CACrB,WAAY,CACZ,YAAa,CACb,WAAY,CACZ,wBAA+B,CAC/B,iBAAkB,CAClB,kBAuGJ,CAtGI,sCACI,iBACJ,CAEI,4CACI,cAAe,CACf,aACJ,CAOJ,uCAMI,iBAIJ,CACA,yEAVI,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,UAAW,CACX,WAAY,CAEZ,cAAe,CACf,iBAAkB,CAClB,eAyBJ,CAvBA,kCAMI,WAiBJ,CAbI,6CACI,cAAe,CACf,aACJ,CACA,4CACI,aACJ,CACA,+CACI,aAIJ,CAHI,qDACI,aACJ,CAGR,2BACI,iBAAkB,CAClB,MAAO,CACP,QAAS,CACT,UAAW,CACX,WAAY,CACZ,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,UAAoB,CACpB,qGAAuF,CAAvF,qEA+BJ,CA9BI,oCACI,iBAAkB,CAClB,UAAW,CACX,kCAA2B,CAA3B,0BAA2B,CAC3B,QAAS,CACT,yBAAkB,CAAlB,sBAAkB,CAAlB,iBAAkB,CAClB,cACJ,CACA,gCACI,iBAAkB,CAClB,YAAa,CACb,aAQJ,CAPI,qCACI,UAAW,CACX,kBAAmB,CACnB,eAAgB,CAChB,sBAAuB,CACvB,cACJ,CAEJ,wCACI,WAAY,CACZ,UAAW,CACX,UAAW,CACX,SACJ,CAMJ,kCACI,iBAAkB,CAClB,OAAQ,CACR,KAAM,CACN,aAAoB,CACpB,cAAe,CACf,cAAe,CACf,UAIJ,CAHI,wCACI,UACJ,CAGR,yBACI,iBAAkB,CAClB,cAWJ,CAVI,0CACI,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,MAAO,CACP,KAAM,CACN,UAAW,CACX,cAAe,CACf,SACJ,CAEJ,kBACI,iBAmCJ,CAlCI,gCACI,UAAW,CACX,WAAY,CACZ,wBAAwC,CACxC,SAAU,CACV,iBAAkB,CAClB,cAAe,CACf,kBAAmB,CACnB,iBAgBJ,CAfK,4CACG,YACJ,CACA,uCACI,0BAA2B,CAC3B,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,OAAQ,CACR,QAAS,CACT,cAAe,CACf,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBACJ,CAEJ,wBACI,iBAAkB,CAClB,UAAW,CACX,KAAM,CACN,WAAY,CACZ,WAAY,CACZ,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBACJ,CAGA,mCACI,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,iBAAkB,CAClB,yBAAgC,CAChC,iBA2BJ,CA1BI,yCACI,oBAIJ,CAHI,sDACI,aACJ,CAEJ,yCACI,oBACJ,CACA,gDACI,oBAAqB,CACrB,iBAAkB,CAClB,cAAe,CACf,aACJ,CACA,8CACI,QAAS,CACT,cACJ,CACA,gDACI,aACJ,CACA,iDACI,aAAoB,CACpB,eACJ,CAIJ,iCACI,oBA4BJ,CA1BQ,mDACI,aAAoB,CACpB,oBAIJ,CAHI,qDACI,aACJ,CAIJ,mDACI,oBACJ,CAEJ,6CACI,cAAe,CACf,WAAY,CACZ,YAAa,CACb,yBAAgC,CAChC,iBAAkB,CAClB,iBAMJ,CALI,+CACI,iBAAkB,CAClB,cAAe,CACf,aACJ,CAIZ,iCACI,uBAAwB,CACxB,cAAe,CACf,UAAW,CACX,iBAAkB,CAClB,kBAgBJ,CAfI,+CACI,UAAW,CACX,OAAS,CACT,kBAA0B,CAC1B,iBACJ,CACA,4CACI,kBACJ,CACA,0CACI,kBACJ,CACA,uCACI,kBACJ,CAEJ,gBACI,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,iBAAoB,CACpB,cAAe,CACf,eAAgB,CAChB,aACJ,CACA,mBACI,wBACJ,CAEI,gCACI,iBAAkB,CAClB,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,kBAAmB,CACnB,WAAY,CACZ,iBAAkB,CAClB,iBAAkB,CAClB,wBA0FJ,CAzFI,sCACI,cAAe,CAIf,oBACJ,CAJI,iDACI,aACJ,CAIA,6DACA,cAKA,CAEJ,2CACI,kBAAc,CAAd,iBAAc,CAAd,aAAc,CACd,WAAY,CACZ,UAAW,CACX,iBAIJ,CAHI,6CACI,cACJ,CAEJ,0CACI,iBAAkB,CAClB,QAAS,CACT,UAAW,CACX,WAAY,CACZ,UAAW,CACX,SAAU,CACV,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAaJ,CAZI,wDACI,WAAY,CACZ,UAAW,CACX,YAAa,CACb,cACJ,CACA,gDACI,oCAIJ,CAHI,8DACI,YACJ,CAGR,2CACI,kBAAO,CAAP,UAAO,CAAP,MAAO,CACP,iBAAkB,CAClB,gBAAiB,CACjB,aAAc,CACd,cAAe,CACf,eAkCJ,CAjCI,sDACI,oBAAqB,CACrB,cAAe,CACf,eAAgB,CAChB,gBAAiB,CACjB,kBAAmB,CACnB,eAAgB,CAChB,sBACJ,CACA,yDACI,iBAAkB,CAClB,UAAW,CACX,oBAAqB,CACrB,cAAe,CACf,aAOJ,CANI,uEACI,kBACJ,CACA,+DACI,aACJ,CAEJ,sDACI,eAAgB,CAChB,QAAS,CACT,WAAY,CACZ,gBAAiB,CACjB,kBAAmB,CACnB,eAAgB,CAChB,sBAAuB,CACvB,cAAe,CACf,aACJ,CAKhB,cACI,iBAAkB,CAClB,QAAS,CACT,UAAW,CACX,OAAQ,CACR,QAAS,CACT,6BAA8B,CAC9B,kCAQJ,CAPI,8BACI,iBAAkB,CAClB,SAAU,CACV,UAAW,CACX,UAAW,CACX,cACJ,CAMF,yBAHE,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAkB,CAAlB,qBAAkB,CAAlB,kBAkBF,CAhBA,MAGI,cAAe,CACf,cAAe,CACf,aAWJ,CAVI,eACE,aACF,CACA,WACE,UAAW,CACX,kBAAmB,CACnB,eAAgB,CAChB,sBAAuB,CACvB,cACJ","file":"upload.min.css","sourcesContent":["@import \"./variable.css\";\n.bk-upload {\n    img{\n        width: 100%;\n    }\n    .pic-item {\n        position: relative;\n        display: inline-block;\n        padding: 5px;\n        height: 100px;\n        width: 100px;\n        border: 1px solid $newGreyColor;\n        border-radius: 2px;\n        vertical-align: top;\n        &:not(:last-child) {\n            margin-right: 10px;\n        }\n        &.fail {\n            .error-image-icon {\n                font-size: 28px;\n                color: $newBlackColor3;\n            }\n        }\n        /* &:hover {\n            .mask {\n                display: flex;\n            }\n        } */\n        .uploading-status {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            padding: 36px 10px;\n            font-size: 14px;\n            text-align: center;\n            background: $defaultColor;\n        }\n        .fail-status {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            padding: 5px;\n            font-size: 14px;\n            text-align: center;\n            background: $defaultColor;\n            .error-pic {\n                font-size: 28px;\n                color: $newBlackColor3;\n            }\n            .reupload {\n                color: $newMainColor;\n            }\n            .delete-file {\n                color: $newRedColor1;\n                &:hover {\n                    color: $newRedColor1;\n                }\n            }\n        }\n        .mask {\n            position: absolute;\n            left: 0;\n            bottom: 0;\n            width: 98px;\n            height: 30px;\n            justify-content: center;\n            align-items: center;\n            color: $defaultColor;\n            background: linear-gradient(180deg, rgba(19, 64, 116, 0) 0%, rgba(8, 30, 64, 0.6) 100%);\n            .replace {\n                position: absolute;\n                bottom: 5px;\n                transform: translateX(-50%);\n                left: 50%;\n                width: fit-content;\n                font-size: 12px;\n            }\n            .tip {\n                position: absolute;\n                bottom: -30px;\n                color: #EA3736;\n                span {\n                    width: 80px;\n                    white-space: nowrap;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    cursor: default;\n                }\n            }\n            .delete-file {\n                height: 16px;\n                width: 16px;\n                right: -9px;\n                top: -76px;\n            }\n            /* .fail-tips {\n                width: 100%;\n                height: 100%;\n            } */\n        }\n        .delete-file {\n            position: absolute;\n            right: 0;\n            top: 0;\n            color: $newGreyColor;\n            font-size: 24px;\n            cursor: pointer;\n            z-index: 11;\n            &:hover {\n                color: $defaultColor;\n            }\n        }\n    }\n    .file-wrapper {\n        position: relative;\n        font-size: 14px;\n        input[type=file] {\n            width: 100%;\n            height: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 10;\n            cursor: pointer;\n            opacity: 0;\n        }\n    }\n    &.button {\n        position: relative;\n        .file-wrapper {\n            width: 86px;\n            height: 36px;\n            border: 1px solid rgba(196, 198, 204, 1);\n            opacity: 1;\n            border-radius: 2px;\n            cursor: pointer;\n            margin-bottom: 10px;\n            position: relative;\n             :not(input) {\n                display: none;\n            }\n            &::before {\n                content: attr(bk-lableName);\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n        }\n        p.tip {\n            position: absolute;\n            left: 100px;\n            top: 0;\n            margin: auto;\n            height: 34px;\n            display: flex;\n            align-items: center;\n        }\n    }\n    &.draggable {\n        .file-wrapper {\n            width: 100%;\n            height: 80px;\n            margin-bottom: 2px;\n            border-radius: 2px;\n            border: 1px dashed $newGreyColor;\n            text-align: center;\n            &:hover {\n                border-color: $newMainColor;\n                .upload-icon {\n                    color: $newMainColor;\n                }\n            }\n            &:focus {\n                border-color: $newMainColor;\n            }\n            .upload-icon {\n                display: inline-block;\n                margin: 14px 0 2px;\n                font-size: 28px;\n                color: $newGreyColor;\n            }\n            .text-area {\n                margin: 0;\n                font-size: 12px;\n            }\n            .drop-upload {\n                color: $newBlackColor2;\n            }\n            .click-upload {\n                color: $newMainColor;\n                margin-left: 5px;\n            }\n        }\n    }\n    &.picture {\n        .file-wrapper {\n            display: inline-block;\n            &:hover {\n                .upload-btn {\n                    color: $newMainColor;\n                    border-color: $newMainColor;\n                    i {\n                        color: $newMainColor;\n                    }\n                }\n            }\n            &:focus {\n                .upload-btn {\n                    border-color: $newMainColor;\n                }\n            }\n            .upload-btn {\n                padding: 28px 0;\n                width: 100px;\n                height: 100px;\n                border: 1px dashed $newGreyColor;\n                border-radius: 2px;\n                text-align: center;\n                i {\n                    margin-bottom: 2px;\n                    font-size: 20px;\n                    color: $newBlackColor3;\n                }\n            }\n        }\n    }\n    .progress-bar-wrapper {\n        width: calc(100% - 50px);\n        margin-top: 4px;\n        height: 2px;\n        border-radius: 1px;\n        background: $newGreyColor1;\n        .progress-bar {\n            height: 2px;\n            width: 0%;\n            background: $newGreenColor;\n            border-radius: 1px;\n        }\n        .uploading {\n            background: $newMainColor;\n        }\n        .success {\n            background: $successColor;\n        }\n        .fail {\n            background: $newRedColor1;\n        }\n    }\n    .tip {\n        display: flex;\n        align-items: center;\n        margin: 5px 0 10px 0;\n        font-size: 12px;\n        text-align: left;\n        color: $newBlackColor2;\n    }\n    .isdrag {\n        border: 1px solid #0082ff;\n    }\n    .all-file {\n        .file-item {\n            position: relative;\n            display: flex;\n            margin-bottom: 10px;\n            height: 60px;\n            padding: 12px 10px;\n            border-radius: 2px;\n            border: 1px solid #CBD5E0;\n            &:hover {\n                cursor: pointer;\n                .file-name {\n                    color: $newMainColor;\n                }\n                border-color: $newMainColor;\n            }\n            &.file-item-fail {\n                .close-upload {\n                font-size: 18px;\n                   /*  color: $newRedColor1;\n                    &:hover {\n                        color: $newRedColor1;\n                    } */\n                }\n            }\n            .file-icon {\n                flex: 0 0 36px;\n                height: 36px;\n                width: 36px;\n                border-radius: 2px;\n                i {\n                    font-size: 36px;\n                }\n            }\n            .del-icon {\n                position: absolute;\n                top: 25px;\n                right: 20px;\n                height: 20px;\n                width: 20px;\n                z-index: 1;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                .close-upload {\n                    height: 14px;\n                    width: 14px;\n                    fill: #8797aa;\n                    cursor: pointer;\n                }\n                &:hover {\n                    background-color: rgba(58, 132, 255, 0.1);\n                    .close-upload {\n                        fill: $newMainColor;\n                    }\n                }\n            }\n            .file-info {\n                flex: 1;\n                position: relative;\n                margin-left: 10px;\n                line-height: 1;\n                font-size: 12px;\n                overflow: hidden;\n                .file-name {\n                    display: inline-block;\n                    font-size: 12px;\n                    max-width: 250px;\n                    line-height: 16px;\n                    white-space: nowrap;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                }\n                .file-message {\n                    position: absolute;\n                    right: 25px;\n                    display: inline-block;\n                    font-size: 12px;\n                    line-height: 1;\n                    .upload-speed {\n                        padding-right: 40px;\n                    }\n                    .done {\n                        color: $newGreenColor;\n                    }\n                }\n                .error-msg {\n                    max-width: 250px;\n                    margin: 0;\n                    height: 18px;\n                    line-height: 18px;\n                    white-space: nowrap;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    font-size: 12px;\n                    color: $newRedColor1;\n                }\n            }\n        }\n    }\n}\n.success-icon {\n    position: absolute;\n    top: -1px;\n    right: -1px;\n    width: 0;\n    height: 0;\n    border-top: 24px solid #14AB5B;\n    border-left: 24px solid transparent;\n    .success-upload {\n        position: absolute;\n        top: -25px;\n        right: -3px;\n        color: #fff;\n        font-size: 20px;\n    }\n}\n.flex-align-center {\n    display: flex;\n    align-items: center\n  }\n  .tips {\n      display: flex;\n      align-items: center;\n      margin-top: 5px;\n      font-size: 12px;\n      color: #14AB5B;\n      &.errorMsg {\n        color: #EA3736;\n      }\n      span {\n        width: 80px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        cursor: default;\n    }\n  }\n"]}