KleenAppWeb/wwwadmin/assets/less/components/plugins/uploaders/dropzone.less

/* ------------------------------------------------------------------------------
 *
 *  # Dropzone file uploader
 *
 *  Open source library that provides drag’n’drop file uploads with image previews
 *
 *  Version: 1.3
 *  Latest update: Dec 30, 2016
 *
 * ---------------------------------------------------------------------------- */


// Layout
// ------------------------------

.dropzone {
	position: relative;
	border: 2px dashed @panel-default-border;
	min-height: 250px;
	border-radius: @border-radius-small;
	background-color: #fff;
	padding: 5px;

	// If inside panel, give it grey background
	.panel & {
		background-color: #fcfcfc;
		border-color: @gray-lighter;
	}

	// Clickable wrapper
	&.dz-clickable {
	  	&,
	  	.dz-message,
	  	.dz-message span {
		  	cursor: pointer;
	  	}

	  	* {
			cursor: default;
	  	}
	}

	// Message
	.dz-message {
		.opacity(1);
	}
	&.dz-started .dz-message {
		display: none;
	}

	// Drag hover border and bg color
	&.dz-drag-hover {
		border-color: fade(#000, 15%);
		background: fade(#000, 4%);
	}

	// Inside sidebar
	.sidebar & {
		min-height: 190px;
		text-align: center;
		border-width: 2px;

		.dz-default.dz-message {
			&:before {
				font-size: (@icon-font-size * 4);
				width: (@icon-font-size * 4);
				height: (@icon-font-size * 4);
				margin-left: -(@icon-font-size * 2);
				top: 50px;
			}

			span {
				font-size: @font-size-h6;
			}

			> span {
				margin-top: 130px;
			}
		}
	}

	@media (min-width: @screen-sm) {
		min-height: 320px;
	}
}


// Messages
// ------------------------------

.dropzone {

	// Default styles
	.dz-default {
		&.dz-message {
			@dz-message-height: 230px;
			position: absolute;
			height: @dz-message-height;
			width: 100%;
			margin-top: -(@dz-message-height / 2);
			top: 50%;
			left: 0;
			padding: @panel-body-padding;
			text-align: center;
			border-radius: @border-radius-large;
			.opacity(1);
			.transition(opacity 0.3s ease-in-out);

			// Icon
			&:before {
				content: '\ea0e';
				font-family: 'icomoon';
				font-size: (@icon-font-size * 4);
				position: absolute;
				top: (@icon-font-size * 3);
				width: (@icon-font-size * 4);
				height: (@icon-font-size * 4);
				display: inline-block;
				left: 50%;
				margin-left: -(@icon-font-size * 2);
				line-height: 1;
				z-index: 2;
				color: #ddd;
				text-indent: 0;
				font-weight: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}

			// Text label
			span {
				font-size: @font-size-h6;
				color: #bbb;
				text-align: center;
				margin-top: 140px;
				display: block;
				font-weight: 500;
				text-shadow: 0 1px 1px #fff;

				> span {
					margin-top: 2px;
					display: block;
					color: #ccc;
					font-size: @font-size-h6;
				}
			}

			// Responsive styles
			@media (min-width: @screen-sm) {
				&:before {
					font-size: (@icon-font-size * 5);
					top: (@icon-font-size * 3);
					width: (@icon-font-size * 5);
					height: (@icon-font-size * 5);
					margin-left: -(@icon-font-size * 2);
				}

				span {
					font-size: @font-size-h4;
					margin-top: 130px;
				}
			}
		}
	}

	// On files drag
	&.dz-drag-hover .dz-message {
		.opacity(0.15);
	}
	&.dz-started .dz-message {
		display: block;
		.opacity(0);
	}
}


// Preview
// ------------------------------

.dropzone,
.dropzone-previews {
	.dz-preview {
		background-color: #fff;
		position: relative;
		display: inline-block;
		margin: 10px;
		vertical-align: top;
		border: 1px solid @panel-default-border;
		padding: 8px;
		border-radius: @border-radius-small;

		// Hide thumbnail in file preview
		&.dz-file-preview [data-dz-thumbnail] {
			display: none;
		}

		// Details
		.dz-details {
			width: 140px;
			position: relative;
			background-color: #fafafa;
			padding: 8px;
			margin-bottom: 25px;

			.dz-filename {
				overflow: hidden;
				height: 100%;
			}

			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 140px;
				height: 140px;
			}

			.dz-size {
				position: absolute;
				bottom: -26px;
				left: 0;
			}
		}
		&:hover {
			.dz-details img {
				display: none;
			}
		}

		// Marks
		.dz-error-mark,
		.dz-success-mark {
			display: none;
			position: absolute;
			z-index: 9;
			right: 8px;

			&:after {
				font-family: 'icomoon';
				display: block;
				position: absolute;
				right: 0;
				bottom: 3px;
				font-size: @font-size-small;
				line-height: 1;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}

			span,
			svg {
				display: none;
			}
		}
		.dz-error-mark {
			color: @brand-danger;

			&:after {
				content: '\ed6a';
			}
		}
		.dz-success-mark {
			color: @brand-success;

			&:after {
				content: '\ed6e';
			}
		}

		// Error and success marks
		&.dz-error .dz-error-mark,
		&.dz-success .dz-success-mark {
			display: block;
			.opacity(1);
		}

		// Uploading progress
		.dz-progress {
			position: absolute;
			top: 118px;
			left: 8px;
			right: 8px;
			height: 4px;
			background-color: @gray-lighter;
			display: none;
			border-radius: @border-radius-small;

			.dz-upload {
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 0%;
				height: 100%;
				background-color: @brand-info;
				.transition(width 0.3s ease-in-out);
			}
		}
		&.dz-processing .dz-progress {
			display: block;
		}
		&.dz-success {
			.dz-progress {
				display: block;
				.opacity(0);
				.transition(opacity 0.4s ease-in-out);
			}
		}

		// Error message
		.dz-error-message {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			background: fade(#f5f5f5, 80%);
			margin: 8px;
			padding: 8px;
			color: @brand-danger;
			max-width: 100%;
			z-index: 5;
			.opacity(0);
			.transition(opacity 0.3s ease-in-out);
		}
		&.dz-error {
			&:hover .dz-error-message {
				display: block;
				.opacity(1);
			}

			.dz-progress .dz-upload {
				background: @brand-danger;
			}
		}

		// Image preview
		&.dz-image-preview:hover {
			.dz-details img {
				display: block;
				.opacity(0.1);
			}
		}

		// Remove button
		a.dz-remove {
			background-color: #fafafa;
			border-radius: @border-radius-small;
			border: 1px solid @gray-lighter;
			display: block;
			padding: 5px;
			text-align: center;
			color: @text-muted;
			margin-top: 35px;
			cursor: pointer;

			&:hover {
				color: @text-color;
				background-color: #f5f5f5;
			}
		}
	}
}