/**
 * ud2-file.less
 * 文件上传控件的默认样式
 */

// 导入必要的文件
@import "../../../common/import.less";

// 文件上传控件主容器
.ud2-file {
	border: 1px solid @ColorWhiteBorder;
	border-radius: @BorderRadius;

	input[type="file"] {
		position: absolute;
		top: 0;
		left: -10000px;
	}
}

// 文件上传控件主容器的默认样式
// (default)
.ud2-file-full {
	position: relative;
	display: block;
	height: auto;
	min-height: 304px;
	overflow-x: hidden;
	padding: 5px;
	background: @ColorWhiteBackLight;
}
// 存在图片的容器样式
.ud2-file-full-dragenter {
	.ud2-file-full-drag {
		visibility: visible;
		left: 0;
		background: @ColorWhiteBackLight;
		opacity: @OpacityHover;
	}

	.ud2-file-full-nofile, .ud2-file-full-list {
		-ms-filter: blur(5px);
		-moz-filter: blur(5px);
		-webkit-filter: blur(5px);
		filter: blur(5px);
	}
}
// 设置控件的拖拽样式
.ud2-file-full-drag {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: -100%;
	z-index: @MaxZIndex;
	width: 100%;
	height: 100%;
	font-size: 18px;
	font-weight: 800;
	line-height: 500%;
	outline-offset: -10px;
	text-align: center;
	vertical-align: middle;
	outline: 5px dashed @ColorWhiteBackDark;
	opacity: 0;
	.transition(opacity .3s, visibility);
}
// 设置控件的无图片样式
.ud2-file-full-nofile {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 0;
	width: 100%;
	height: 60px;
	margin: -30px 0 0 0;
	text-align: center;

	button {
		width: 120px;
		height: 40px;
	}

	i {
		margin: 0 .25em 0 0;
	}

	em {
		display: block;
		font-size: 12px;
		font-style: normal;
	}
}
// 设置控件的列表样式
.ud2-file-full-list {
	.layout();
	min-height: 304px;
	display: none;
}
// 设置控件的图片容器与添加按钮样式
.ud2-file-full-figure, .ud2-file-full-add {
	float: left;
	position: relative;
	width: 138px;
	height: 138px;
	margin: 5px;
	border: 1px solid @ColorWhiteBorder;
	border-radius: 2px;
	background: @ColorWhite;
}
// 设置控件的图片容器样式
.ud2-file-full-figure {
	.transform(scale(0));
	.transition(transform .3s);

	input {
		border: 0;
		line-height: 1;
		font-size: 12px;
	}

	&.ud2-file-full-figure-on {
		.transform(scale(1));
	}

	&.success .ud2-file-full-progress {
		background: fadeout(@ColorGreen, 20%);
	}

	&.fail .ud2-file-full-progress {
		background: fadeout(@ColorRed, 20%);
	}
}
// 设置控件重命名样式
.ud2-file-full-rename {
	position: relative;

	input {
		width: 86%;
	}

	&::before {
		content: '\eb3c';
		display: block;
		position: absolute;
		right: 0;
		top: 4px;
		font-family: 'ud2';
		font-size: 1em;
		line-height: 1;
		color: @ColorWhiteBackDark;
	}
}
// 设置控件的添加按钮样式
.ud2-file-full-add {
	background: @ColorWhiteDeepest;
	border-collapse: @ColorWhiteDeepest;
	cursor: pointer;

	&:hover div {
		opacity: 1;
		.transform(scale(1.2));
	}

	div {
		position: absolute;
		top: 50%;
		width: 100%;
		margin-top: -26px;
		opacity: @OpacityNoImport;
		.transition(transform .2s);
	}

	.ico, em {
		display: block;
		text-align: center;
	}

	.ico {
		font-size: 32px;
		line-height: 40px;
	}

	em {
		font-size: 12px;
		line-height: 12px;
		font-style: normal;
	}
}
// 设置控件的图片样式
.ud2-file-full-img {
	display: table-cell;
	width: 136px;
	height: 116px;
	vertical-align: middle;

	img {
		display: block;
		max-width: 136px;
		max-height: 116px;
		margin: auto;
	}

	& + div {
		position: absolute;
		left: 5px;
		right: 5px;
		bottom: 0;
		height: 20px;
		font-size: 12px;
		line-height: 20px;
		.textOverflow();
	}
}
// 设置控件的关闭按钮样式
.ud2-file-full-close {
	position: absolute;
	top: -9px;
	right: -9px;
	cursor: pointer;

	&::before {
		display: block;
		content: '\ed26';
		font-family: 'ud2';
		color: @ColorRed;
		font-size: 18px;
		line-height: 18px;
		.transition(transform .2s, color .2s);
	}

	&:hover::before {
		color: @ColorRedDeeper;
		.transform(rotate(90deg) scale(1.1));
	}

	&:active::before {
		color: @ColorRedDeepest;
	}
}
// 设置控件的工具容器样式
.ud2-file-full-tools {
	display: none;
	margin: 5px;

	.btn:last-of-type {
		margin-left: 10px;
	}
}
// 设置控件的进度条样式
.ud2-file-full-progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	color: @ColorWhite;
	height: 118px;
	font-size: 24px;
	line-height: 118px;
	text-align: center;
	background: fadeout(@ColorGreen, 20%);
	.transition(background .3s);
}