diff options
author | Mario <mario@mariovavti.com> | 2020-01-11 10:30:12 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2020-01-11 10:30:12 +0000 |
commit | f645c6f3a57bf5f53bbb2bde362b2447f725c977 (patch) | |
tree | 9b37650aad46296c5d98a55969348ebb4ee2d097 /library/cropperjs/src/css | |
parent | 4c1c6908165e5c4fb1b7238f66764f89faa2301a (diff) | |
download | volse-hubzilla-f645c6f3a57bf5f53bbb2bde362b2447f725c977.tar.gz volse-hubzilla-f645c6f3a57bf5f53bbb2bde362b2447f725c977.tar.bz2 volse-hubzilla-f645c6f3a57bf5f53bbb2bde362b2447f725c977.zip |
update cropperjs to the recent version
Diffstat (limited to 'library/cropperjs/src/css')
-rw-r--r-- | library/cropperjs/src/css/cropper.css | 46 | ||||
-rw-r--r-- | library/cropperjs/src/css/cropper.scss | 286 |
2 files changed, 306 insertions, 26 deletions
diff --git a/library/cropperjs/src/css/cropper.css b/library/cropperjs/src/css/cropper.css index d09c4f182..756a7e1c1 100644 --- a/library/cropperjs/src/css/cropper.css +++ b/library/cropperjs/src/css/cropper.css @@ -1,7 +1,3 @@ -:root { - --blue: #39f; -} - .cropper-container { direction: ltr; font-size: 0; @@ -11,7 +7,6 @@ user-select: none; & img { - /* Avoid margin top issue (Occur only when margin-top <= -height) */ display: block; height: 100%; image-orientation: 0deg; @@ -47,14 +42,14 @@ .cropper-modal { background-color: #000; - opacity: .5; + opacity: 0.5; } .cropper-view-box { display: block; height: 100%; - outline-color: color(var(--blue) alpha(75%)); - outline: 1px solid var(--blue); + outline: 1px solid #39f; + outline-color: rgba(51, 153, 255, 0.75); overflow: hidden; width: 100%; } @@ -62,15 +57,15 @@ .cropper-dashed { border: 0 dashed #eee; display: block; - opacity: .5; + opacity: 0.5; position: absolute; &.dashed-h { border-bottom-width: 1px; border-top-width: 1px; - height: calc(100 / 3)%; + height: calc(100% / 3); left: 0; - top: calc(100 / 3)%; + top: calc(100% / 3); width: 100%; } @@ -78,9 +73,9 @@ border-left-width: 1px; border-right-width: 1px; height: 100%; - left: calc(100 / 3)%; + left: calc(100% / 3); top: 0; - width: calc(100 / 3)%; + width: calc(100% / 3); } } @@ -88,27 +83,27 @@ display: block; height: 0; left: 50%; - opacity: .75; + opacity: 0.75; position: absolute; top: 50%; width: 0; - &:before, - &:after { + &::before, + &::after { background-color: #eee; content: ' '; display: block; position: absolute; } - &:before { + &::before { height: 1px; left: -3px; top: 0; width: 7px; } - &:after { + &::after { height: 7px; left: 0; top: -3px; @@ -121,7 +116,7 @@ .cropper-point { display: block; height: 100%; - opacity: .1; + opacity: 0.1; position: absolute; width: 100%; } @@ -133,7 +128,7 @@ } .cropper-line { - background-color: var(--blue); + background-color: #39f; &.line-e { cursor: ew-resize; @@ -165,9 +160,9 @@ } .cropper-point { - background-color: var(--blue); + background-color: #39f; height: 5px; - opacity: .75; + opacity: 0.75; width: 5px; &.point-e { @@ -236,13 +231,13 @@ @media (min-width: 1200px) { height: 5px; - opacity: .75; + opacity: 0.75; width: 5px; } } - &.point-se:before { - background-color: var(--blue); + &.point-se::before { + background-color: #39f; bottom: -50%; content: ' '; display: block; @@ -287,4 +282,3 @@ .cropper-disabled .cropper-point { cursor: not-allowed; } - 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; + } +} |