From f645c6f3a57bf5f53bbb2bde362b2447f725c977 Mon Sep 17 00:00:00 2001 From: Mario Date: Sat, 11 Jan 2020 10:30:12 +0000 Subject: update cropperjs to the recent version --- library/cropperjs/src/css/cropper.scss | 286 +++++++++++++++++++++++++++++++++ 1 file changed, 286 insertions(+) create mode 100644 library/cropperjs/src/css/cropper.scss (limited to 'library/cropperjs/src/css/cropper.scss') diff --git a/library/cropperjs/src/css/cropper.scss b/library/cropperjs/src/css/cropper.scss new file mode 100644 index 000000000..cfca464b7 --- /dev/null +++ b/library/cropperjs/src/css/cropper.scss @@ -0,0 +1,286 @@ +.cropper { + &-container { + direction: ltr; + font-size: 0; + line-height: 0; + position: relative; + touch-action: none; + user-select: none; + + img { + display: block; + height: 100%; + image-orientation: 0deg; + max-height: none !important; + max-width: none !important; + min-height: 0 !important; + min-width: 0 !important; + width: 100%; + } + } + + &-wrap-box, + &-canvas, + &-drag-box, + &-crop-box, + &-modal { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + } + + &-wrap-box, + &-canvas { + overflow: hidden; + } + + &-drag-box { + background-color: #fff; + opacity: 0; + } + + &-modal { + background-color: #000; + opacity: 0.5; + } + + &-view-box { + display: block; + height: 100%; + outline: 1px solid #39f; + outline-color: rgba(51, 153, 255, 0.75); + overflow: hidden; + width: 100%; + } + + &-dashed { + border: 0 dashed #eee; + display: block; + opacity: 0.5; + position: absolute; + + &.dashed-h { + border-bottom-width: 1px; + border-top-width: 1px; + height: calc(100% / 3); + left: 0; + top: calc(100% / 3); + width: 100%; + } + + &.dashed-v { + border-left-width: 1px; + border-right-width: 1px; + height: 100%; + left: calc(100% / 3); + top: 0; + width: calc(100% / 3); + } + } + + &-center { + display: block; + height: 0; + left: 50%; + opacity: 0.75; + position: absolute; + top: 50%; + width: 0; + + &::before, + &::after { + background-color: #eee; + content: ' '; + display: block; + position: absolute; + } + + &::before { + height: 1px; + left: -3px; + top: 0; + width: 7px; + } + + &::after { + height: 7px; + left: 0; + top: -3px; + width: 1px; + } + } + + &-face, + &-line, + &-point { + display: block; + height: 100%; + opacity: 0.1; + position: absolute; + width: 100%; + } + + &-face { + background-color: #fff; + left: 0; + top: 0; + } + + &-line { + background-color: #39f; + + &.line-e { + cursor: ew-resize; + right: -3px; + top: 0; + width: 5px; + } + + &.line-n { + cursor: ns-resize; + height: 5px; + left: 0; + top: -3px; + } + + &.line-w { + cursor: ew-resize; + left: -3px; + top: 0; + width: 5px; + } + + &.line-s { + bottom: -3px; + cursor: ns-resize; + height: 5px; + left: 0; + } + } + + &-point { + background-color: #39f; + height: 5px; + opacity: 0.75; + width: 5px; + + &.point-e { + cursor: ew-resize; + margin-top: -3px; + right: -3px; + top: 50%; + } + + &.point-n { + cursor: ns-resize; + left: 50%; + margin-left: -3px; + top: -3px; + } + + &.point-w { + cursor: ew-resize; + left: -3px; + margin-top: -3px; + top: 50%; + } + + &.point-s { + bottom: -3px; + cursor: s-resize; + left: 50%; + margin-left: -3px; + } + + &.point-ne { + cursor: nesw-resize; + right: -3px; + top: -3px; + } + + &.point-nw { + cursor: nwse-resize; + left: -3px; + top: -3px; + } + + &.point-sw { + bottom: -3px; + cursor: nesw-resize; + left: -3px; + } + + &.point-se { + bottom: -3px; + cursor: nwse-resize; + height: 20px; + opacity: 1; + right: -3px; + width: 20px; + + @media (min-width: 768px) { + height: 15px; + width: 15px; + } + + @media (min-width: 992px) { + height: 10px; + width: 10px; + } + + @media (min-width: 1200px) { + height: 5px; + opacity: 0.75; + width: 5px; + } + } + + &.point-se::before { + background-color: #39f; + bottom: -50%; + content: ' '; + display: block; + height: 200%; + opacity: 0; + position: absolute; + right: -50%; + width: 200%; + } + } + + &-invisible { + opacity: 0; + } + + &-bg { + background-image: url('../images/bg.png'); + } + + &-hide { + display: block; + height: 0; + position: absolute; + width: 0; + } + + &-hidden { + display: none !important; + } + + &-move { + cursor: move; + } + + &-crop { + cursor: crosshair; + } + + &-disabled &-drag-box, + &-disabled &-face, + &-disabled &-line, + &-disabled &-point { + cursor: not-allowed; + } +} -- cgit v1.2.3