react-large-uploader
Version:
a react component using uploading of large file
94 lines (93 loc) • 2.01 kB
CSS
.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute ;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.webuploader-pick-disable {
opacity: 0.6;
pointer-events: none;
}
.large-uploader {
border: 1px solid #e9e9e9;
width: 300px;
font-size: 12px;
}
.large-uploader .file-list {
max-height: 200px;
overflow: auto;
display: flex;
flex-direction: column;
}
.large-uploader .file-list .file-item {
margin: 14px 10px 0;
display: flex;
height: 25px;
line-height: 25px;
justify-content: space-between;
position: relative;
transition: all .5s;
}
.large-uploader .file-list .file-item .file-name {
flex: 2;
}
.large-uploader .file-list .file-item .file-status {
flex: 1;
cursor: default;
}
.large-uploader .file-list .file-item .file-status.init-status,
.large-uploader .file-list .file-item .file-status.error-status {
cursor: pointer;
color: #108ee9;
}
.large-uploader .file-list .file-item .file-status.error-status {
color: red;
}
.large-uploader .file-list .file-item .process {
width: 100%;
position: absolute;
bottom: 0;
height: 1px;
}
.large-uploader .file-list .file-item .process .process-bar {
width: 0%;
height: 100%;
background: #108ee9;
transition: width .2s;
}
.large-uploader .file-list .file-item .process .success-bar {
background: lightgreen;
}
.large-uploader .file-list .file-item .process .error-bar {
background: red;
}
.large-uploader .file-list .file-item .delete {
font-size: 12px;
color: errorColor;
cursor: pointer;
}
.large-uploader .content {
display: flex;
justify-content: space-around;
margin: 15px 0;
}
.large-uploader .btn-primary {
cursor: pointer;
display: inline-block;
padding: 8px;
background: #108ee9;
font-size: 12px;
color: #fff;
border-radius: 18px;
}
.large-uploader .process,
.large-uploader .done {
cursor: none;
opacity: .7;
}
.large-uploader .msg-error {
color: errorColor;
}