react-large-uploader/src/upload.less

a react component using uploading of large file

@mainColor: #108ee9;
@mainTextSize: 12px;
@bottonTextSize: 12px;
@errorColor: red;

.webuploader-container {
	position: relative;
}
.webuploader-element-invisible {
	position: absolute !important;
	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: @mainTextSize;
	.file-list {
		max-height: 200px;
		overflow: auto;
		display: flex;
		flex-direction: column;
		.file-item {
			margin: 14px 10px 0;
			display: flex;
			height: 25px;
			line-height: 25px;
			justify-content: space-between;
			position: relative;
			transition: all .5s;
			.file-name {
				flex: 2;
			}
			.file-status {
				flex: 1;
				cursor: default;
				&.init-status, &.error-status {
					cursor: pointer;
					color: @mainColor;
				}
				&.error-status {
					color: @errorColor;
				}
					
			}
			.process {
				width: 100%;
				position: absolute;
				bottom: 0;
				height: 1px;
				.process-bar {
					width: 0%;
					height: 100%;
					background: @mainColor;
					transition: width .2s;
				}
				.success-bar {
					background: lightgreen;
				}
				.error-bar {
					background: @errorColor;
				}
			}
			.delete { 
				font-size: 12px;
				color: errorColor;
				cursor: pointer;
			}
		}
	}
	.content {
		display: flex;
		justify-content: space-around;
		margin: 15px 0;
	}
	.btn-primary {
		cursor: pointer;
		display: inline-block;
		padding: 8px;
		background: @mainColor;
		font-size: @bottonTextSize;
		color: #fff;
		border-radius: 18px;
	}
	.process, .done {
		cursor: none;
		opacity: .7;
	}
	.msg-error {
		color: errorColor;
	}
}