/* ------------------------------------------------------------------------------
*
* # 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);
}
}