cube-ui/lib/upload/upload.min.css

A fantastic mobile ui lib implement by Vue

.cube-upload{position:relative}.cube-upload-def{margin-right:-10px}.cube-upload-def .cube-upload-btn,.cube-upload-def .cube-upload-file{float:left;margin:0 10px 10px 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:80px;height:80px;box-sizing:border-box;background-color:#fff;box-shadow:0 0 6px 2px rgba(0,0,0,.08);border-radius:2px;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:2px;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:4px;-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:6px;-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:20px;height:2px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#666}.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:80px;height:80px;box-sizing:border-box;background:#fff no-repeat 50%;background-size:cover;border-radius:2px}.cube-upload-file-def>.cubeic-wrong{position:absolute;z-index:2;top:-2px;right:-2px;color:rgba(0,0,0,.8);font-size:16px;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:2px;-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:30px;display:none}.cube-upload-file-status.cubeic-right{display:block;color:#fc9153}.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:20px}