jquery-cropper 0.3.31 → 2.2.5

data/app/assets/stylesheets/cropper.scss

@@ -1,221 +1,379 @@
+/*!
+ * Cropper v2.2.5
+ * https://github.com/fengyuanchen/cropper
+ *
+ * Copyright (c) 2014-2016 Fengyuan Chen and contributors
+ * Released under the MIT license
+ *
+ * Date: 2016-01-18T05:42:29.639Z
+ */
 .cropper-container {
+    font-size: 0;
+    line-height: 0;
+
     position: relative;
-    overflow: hidden;
+
     -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    background-color: #fff;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
+    direction: ltr !important;
+    -ms-touch-action: none;
+    touch-action: none;
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
 }
 
-.cropper-container .cropper-modal {
+.cropper-container 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;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    background: #000;
-    filter: alpha(opacity=50);
-    opacity: .5;
 }
 
-.cropper-container .cropper-dragger {
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    width: 80%;
-    height: 80%;
+.cropper-wrap-box {
+    overflow: hidden;
+}
+
+.cropper-drag-box {
+    opacity: 0;
+    background-color: #fff;
+
+    filter: alpha(opacity=0);
+}
+
+.cropper-modal {
+    opacity: .5;
+    background-color: #000;
+
+    filter: alpha(opacity=50);
 }
 
-.cropper-container .cropper-preview {
+.cropper-view-box {
     display: block;
+    overflow: hidden;
+
     width: 100%;
     height: 100%;
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-            box-sizing: border-box;
-    overflow: hidden;
-    border-width: 1px;
-    border-color: #69f;
-    border-color: rgba(51, 102, 255, .75);
-    border-style: solid;
+
+    outline: 1px solid #39f;
+    outline-color: rgba(51, 153, 255, .75);
 }
 
-.cropper-container .cropper-dashed {
+.cropper-dashed {
     position: absolute;
+
     display: block;
-    filter: alpha(opacity=50);
+
     opacity: .5;
-    border: 0 dashed #fff;
+    border: 0 dashed #eee;
+
+    filter: alpha(opacity=50);
 }
 
-.cropper-container .dashed-h {
-    top: 33.3%;
+.cropper-dashed.dashed-h {
+    top: 33.33333%;
     left: 0;
-    height: 33.3%;
+
     width: 100%;
+    height: 33.33333%;
+
     border-top-width: 1px;
     border-bottom-width: 1px;
 }
 
-.cropper-container .dashed-v {
+.cropper-dashed.dashed-v {
     top: 0;
-    left: 33.3%;
+    left: 33.33333%;
+
+    width: 33.33333%;
     height: 100%;
-    width: 33.3%;
+
     border-right-width: 1px;
     border-left-width: 1px;
 }
 
-.cropper-container .cropper-face,
-.cropper-container .cropper-line,
-.cropper-container .cropper-point {
+.cropper-center {
     position: absolute;
+    top: 50%;
+    left: 50%;
+
     display: block;
+
+    width: 0;
+    height: 0;
+
+    opacity: .75;
+
+    filter: alpha(opacity=75);
+}
+
+.cropper-center:before,
+.cropper-center:after {
+    position: absolute;
+
+    display: block;
+
+    content: ' ';
+
+    background-color: #eee;
+}
+
+.cropper-center:before {
+    top: 0;
+    left: -3px;
+
+    width: 7px;
+    height: 1px;
+}
+
+.cropper-center:after {
+    top: -3px;
+    left: 0;
+
+    width: 1px;
+    height: 7px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+    position: absolute;
+
+    display: block;
+
     width: 100%;
     height: 100%;
-    filter: alpha(opacity=10);
+
     opacity: .1;
+
+    filter: alpha(opacity=10);
 }
 
-.cropper-container .cropper-face {
+.cropper-face {
     top: 0;
     left: 0;
-    cursor: move;
+
     background-color: #fff;
 }
 
-.cropper-container .cropper-line {
-    background-color: #69f;
+.cropper-line {
+    background-color: #39f;
 }
 
-.cropper-container .line-e {
+.cropper-line.line-e {
     top: 0;
-    right: -2px;
+    right: -3px;
+
     width: 5px;
+
     cursor: e-resize;
 }
 
-.cropper-container .line-n {
-    top: -2px;
+.cropper-line.line-n {
+    top: -3px;
     left: 0;
+
     height: 5px;
+
     cursor: n-resize;
 }
 
-.cropper-container .line-w {
+.cropper-line.line-w {
     top: 0;
-    left: -2px;
+    left: -3px;
+
     width: 5px;
+
     cursor: w-resize;
 }
 
-.cropper-container .line-s {
-    bottom: -2px;
+.cropper-line.line-s {
+    bottom: -3px;
     left: 0;
+
     height: 5px;
+
     cursor: s-resize;
 }
 
-.cropper-container .cropper-point {
+.cropper-point {
     width: 5px;
     height: 5px;
-    background-color: #69f;
-    filter: alpha(opacity=75);
+
     opacity: .75;
+    background-color: #39f;
+
+    filter: alpha(opacity=75);
 }
 
-.cropper-container .point-e {
-    top: 49%;
-    right: -2px;
+.cropper-point.point-e {
+    top: 50%;
+    right: -3px;
+
+    margin-top: -3px;
+
     cursor: e-resize;
 }
 
-.cropper-container .point-n {
-    top: -2px;
-    left: 49%;
+.cropper-point.point-n {
+    top: -3px;
+    left: 50%;
+
+    margin-left: -3px;
+
     cursor: n-resize;
 }
 
-.cropper-container .point-w {
-    top: 49%;
-    left: -2px;
+.cropper-point.point-w {
+    top: 50%;
+    left: -3px;
+
+    margin-top: -3px;
+
     cursor: w-resize;
 }
 
-.cropper-container .point-s {
-    bottom: -2px;
-    left: 49%;
+.cropper-point.point-s {
+    bottom: -3px;
+    left: 50%;
+
+    margin-left: -3px;
+
     cursor: s-resize;
 }
 
-.cropper-container .point-ne {
-    top: -2px;
-    right: -2px;
+.cropper-point.point-ne {
+    top: -3px;
+    right: -3px;
+
     cursor: ne-resize;
 }
 
-.cropper-container .point-nw {
-    top: -2px;
-    left: -2px;
+.cropper-point.point-nw {
+    top: -3px;
+    left: -3px;
+
     cursor: nw-resize;
 }
 
-.cropper-container .point-sw {
-    bottom: -2px;
-    left: -2px;
+.cropper-point.point-sw {
+    bottom: -3px;
+    left: -3px;
+
     cursor: sw-resize;
 }
 
-.cropper-container .point-se {
-    right: -2px;
-    bottom: -2px;
+.cropper-point.point-se {
+    right: -3px;
+    bottom: -3px;
+
     width: 20px;
     height: 20px;
+
     cursor: se-resize;
-    filter: alpha(opacity=100);
+
     opacity: 1;
+
+    filter: alpha(opacity=100);
 }
 
-.cropper-container .point-se:before {
+.cropper-point.point-se:before {
     position: absolute;
     right: -50%;
     bottom: -50%;
+
     display: block;
-    height: 200%;
+
     width: 200%;
-    content: " ";
-    background-color: #69f;
-    filter: alpha(opacity=0);
+    height: 200%;
+
+    content: ' ';
+
     opacity: 0;
+    background-color: #39f;
+
+    filter: alpha(opacity=0);
 }
 
 @media (min-width: 768px) {
-    .cropper-container .point-se {
+    .cropper-point.point-se {
         width: 15px;
         height: 15px;
     }
 }
 
 @media (min-width: 992px) {
-    .cropper-container .point-se {
+    .cropper-point.point-se {
         width: 10px;
         height: 10px;
     }
 }
 
 @media (min-width: 1200px) {
-    .cropper-container .point-se {
+    .cropper-point.point-se {
         width: 5px;
         height: 5px;
-        filter: alpha(opacity=75);
+
         opacity: .75;
+
+        filter: alpha(opacity=75);
     }
 }
 
+.cropper-invisible {
+    opacity: 0;
+
+    filter: alpha(opacity=0);
+}
+
+.cropper-bg {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+    position: absolute;
+
+    display: block;
+
+    width: 0;
+    height: 0;
+}
+
 .cropper-hidden {
     display: none !important;
 }
+
+.cropper-move {
+    cursor: move;
+}
+
+.cropper-crop {
+    cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+    cursor: not-allowed;
+}