WrenchBoradWeb/www/assets/less/components/plugins/images/image-cropper.less

/* ------------------------------------------------------------------------------
 *
 *  # Image cropper
 *
 *  Styles for cropper.min.js - a simple jQuery image cropping plugin
 *
 *  Version: 1.0
 *  Latest update: May 25, 2015
 *
 * ---------------------------------------------------------------------------- */


// Demo
// ------------------------------

// Grey demo container
.image-cropper-container {
	height: 350px;
	width: 100%;
	overflow: hidden;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

// Demo previews
.eg-preview {
	text-align: center;
	font-size: 0;

	// Container
	.preview {
		margin: 10px auto 0 auto;
		display: block;
		overflow: hidden;
		vertical-align: middle;
		border-radius: @border-radius-small;

		@media (min-width: @screen-sm-min) {
			display: inline-block;
			margin-left: 0;
			margin-right: 0;

			+ .preview {
				margin-left: 15px;
			}
		}
	}

	// Large
	.preview-lg {
		width: 150px;
		height: 150px;
	}

	// Base
	.preview-md {
		width: 120px;
		height: 120px;
	}

	// Small
	.preview-sm {
		width: 90px;
		height: 90px;
	}

	// Mini
	.preview-xs {
		width: 60px;
		height: 60px;
	}

	// Micro
	.preview-xxs {
		width: 40px;
		height: 40px;
	}

	@media (min-width: @screen-sm-min) {
		white-space: nowrap;
		max-width: 100%;
		overflow: auto;
	}
}


// Core
// ----------------------------------------

// Container
.cropper-container {
	position: relative;
	overflow: hidden;
	background-color: #fff;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	.user-select(none);

	> img {
		width: 100%;
		height: 100%;
	}
}

// Helper classes for JavaScript
.cropper-hidden {
	display: none !important;
}
.cropper-invisible {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	max-height: none !important;
	.opacity(0);
}


// Wrapper elements
// ------------------------------

// Modal and canvas
.cropper-modal,
.cropper-canvas {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.cropper-modal {
	background-color: @gray-dark;
	.opacity(0.5);
}
.cropper-canvas {
	cursor: crosshair;
	background-color: #fff;
	.opacity(0);
}

// Dragger
.cropper-dragger {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
}

// Viewer
.cropper-viewer {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	outline-width: 1px;
	outline-style: solid;
	outline-color: fade(@brand-primary, 75%);

	> img {
		max-width: none !important;
		max-height: none !important;
	}
}

// Dased cropper
.cropper-dashed {
	position: absolute;
	display: block;
	border: 0 dashed #fff;
	.opacity(0.5);

	// Horizontal
	&.dashed-h {
		top: 33.3%;
		left: 0;
		width: 100%;
		height: 33.3%;
		border-top-width: 1px;
		border-bottom-width: 1px;
	}

	// Vertical
	&.dashed-v {
		top: 0;
		left: 33.3%;
		width: 33.3%;
		height: 100%;
		border-right-width: 1px;
		border-left-width: 1px;
	}
}


// Cropper
// ------------------------------

// Common
.cropper-face,
.cropper-line,
.cropper-point {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	.opacity(0.1);
}

// Cropper area
.cropper-face {
	top: 0;
	left: 0;
	cursor: move;
	background-color: #fff;
}

// Line
.cropper-line {
	background-color: @brand-danger;

	// East
	&.line-e {
		top: 0;
		right: -3px;
		width: 5px;
		cursor: e-resize;
	}

	// North
	&.line-n {
		top: -3px;
		left: 0;
		height: 5px;
		cursor: n-resize;
	}

	// West
	&.line-w {
		top: 0;
		left: -3px;
		width: 5px;
		cursor: w-resize;
	}

	// South
	&.line-s {
		bottom: -3px;
		left: 0;
		height: 5px;
		cursor: s-resize;
	}
}

// Points
.cropper-point {
	width: 5px;
	height: 5px;
	background-color: @brand-primary;
	.opacity(0.75);

	// East
	&.point-e {
		top: 50%;
		right: -3px;
		margin-top: -3px;
		cursor: e-resize;
	}

	// North
	&.point-n {
		top: -3px;
		left: 50%;
		margin-left: -3px;
		cursor: n-resize;
	}

	// West
	&.point-w {
		top: 50%;
		left: -3px;
		margin-top: -3px;
		cursor: w-resize;
	}

	// South
	&.point-s {
		bottom: -3px;
		left: 50%;
		margin-left: -3px;
		cursor: s-resize;
	}

	// Nodth-east
	&.point-ne {
		top: -3px;
		right: -3px;
		cursor: ne-resize;
	}

	// North-west
	&.point-nw {
		top: -3px;
		left: -3px;
		cursor: nw-resize;
	}

	// South-west
	&.point-sw {
		bottom: -3px;
		left: -3px;
		cursor: sw-resize;
	}

	// South-east
	&.point-se {
		right: -3px;
		bottom: -3px;
		width: 20px;
		height: 20px;
		cursor: se-resize;
		.opacity(1);

		&:before {
			content: " ";
			position: absolute;
			right: -50%;
			bottom: -50%;
			display: block;
			width: 200%;
			height: 200%;
			background-color: @brand-primary;
			.opacity(0);
		}
	}


	// Media queries
	@media (min-width: @screen-sm) {
	    width: 15px;
	    height: 15px;
	}

	@media (min-width: @screen-md) {
	    width: 10px;
	    height: 10px;
	}

	@media (min-width: @screen-lg) {
	    width: 5px;
	    height: 5px;
	    .opacity(0.75);
	}
}