@lan-ui/lan-ui/lib/upload/upload.min.css

A fantastic mobile ui lib implement by Vue

.cube-upload{position:relative}.cube-upload-def{margin-right:-.625rem}.cube-upload-def .cube-upload-btn,.cube-upload-def .cube-upload-file{float:left;margin:0 .625rem .625rem 0}.cube-upload-btn{position:relative;overflow:hidden}.cube-upload-btn:active .cube-upload-btn-def{background-color:rgba(0,0,0,.04)}.cube-upload-input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;font-size:0;opacity:0}.cube-upload-btn-def{width:5rem;height:5rem;box-sizing:border-box;background-color:#fff;box-shadow:0 0 .375rem .125rem rgba(0,0,0,.08);border-radius:.125rem;position:relative}.cube-upload-btn-def:after{content:"";pointer-events:none;display:block;position:absolute;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #e5e5e5;border-radius:.125rem;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-upload-btn-def:after{width:200%;height:200%;border-radius:.25rem;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-upload-btn-def:after{width:300%;height:300%;border-radius:.375rem;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-upload-btn-def>i:after,.cube-upload-btn-def>i:before{content:"";position:absolute;top:50%;left:50%;width:1.25rem;height:.125rem;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#4c4c4c}.cube-upload-btn-def>i:after{-webkit-transform:translate(-50%,-50%) rotate(90deg);transform:translate(-50%,-50%) rotate(90deg)}.cube-upload-file{position:relative}.cube-upload-file-def{position:relative;width:5rem;height:5rem;box-sizing:border-box;background:#fff no-repeat 50%;background-size:cover;border-radius:.125rem}.cube-upload-file-def>.cubeic-wrong{position:absolute;z-index:2;top:-.125rem;right:-.125rem;color:rgba(0,0,0,.8);font-size:1rem;background-color:#fff;border-radius:50%}.cube-upload-file-def>.cubeic-wrong:before{display:inline-block;-webkit-transform:scale(1.625);transform:scale(1.625);-webkit-transform-origin:center;transform-origin:center}.cube-upload-file-state{position:relative;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;opacity:0;background-color:rgba(37,38,45,.4);border-radius:.125rem;-webkit-transition:opacity .1s;transition:opacity .1s}.cube-upload-file-state:before{content:".";position:relative;left:-50%;display:block;width:1px;height:1px;margin-left:-1px;background-color:rgba(0,0,0,.1)}.cube-upload-file_stat{opacity:1}.cube-upload-file-status{position:relative;z-index:1;font-size:1.875rem;display:none}.cube-upload-file-status.cubeic-right{display:block;color:#1890ff}.cube-upload-file-status.cubeic-warn{display:block;color:#f43530}.cube-upload-file-status.cubeic-right:after,.cube-upload-file-status.cubeic-warn:after{content:"";z-index:-1;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:.56em;height:.56em;border-radius:50%;background-color:#fff}.cube-upload-file-status.cubeic-right+.cube-upload-file-progress,.cube-upload-file-status.cubeic-warn+.cube-upload-file-progress{display:none}.cube-upload-file-progress{color:#fff;font-size:1.25rem}