LimitLess-admin-panel/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
// ------------------------------

// Main container
.cropper-container {
	font-size: 0;
	line-height: 0;
	position: relative;
	direction: ltr !important;
	-ms-touch-action: none;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	.user-select(none);

	// Image
	img {
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none !important;
		height: 100%;
		min-height: 0 !important;
		max-height: none !important;
		image-orientation: 0deg !important;
	}
}

// Containers
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

// Wrap box
.cropper-wrap-box {
	overflow: hidden;
}

// Drag box
.cropper-drag-box {
	background-color: #fff;
	.opacity(0);
}

// Modal
.cropper-modal {
	background-color: @modal-backdrop-bg;
	.opacity(@modal-backdrop-opacity);
}

// View box
.cropper-view-box {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

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

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

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

// Center cropper
.cropper-center {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 0;
	height: 0;
	.opacity(0.75);

	// Lines
	&:before,
	&:after {
		content: ' ';
		position: absolute;
		display: block;
		background-color: #eee;
	}
	&:before {
		top: 0;
		left: -3px;
		width: 7px;
		height: 1px;
	}
	&:after {
		top: -3px;
		left: 0;
		width: 1px;
		height: 7px;
	}
}


//
// Cropper area
//

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

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

// Lines
.cropper-line {
	background-color: @color-primary-500;

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

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

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

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

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

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

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

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

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

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

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

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

	&.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: @color-primary-500;
			.opacity(0);
		}

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

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

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



// Misc
// ------------------------------

// Background
.cropper-bg {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

// Invisible elements
.cropper-invisible {
	.opacity(0);
}

// Hidden elements
.cropper-hide {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
}
.cropper-hidden {
	display: none !important;
}

// Disabled elements
.cropper-disabled {
	.cropper-drag-box,
	.cropper-face,
	.cropper-line,
	.cropper-point {
		cursor: @cursor-disabled;
	}
}


//
// Cursors
//

// Move
.cropper-move {
	cursor: move;
}

// Crop
.cropper-crop {
  cursor: crosshair;
}