diff --git a/frontend/scss/_imports.scss b/frontend/scss/_imports.scss index dc0dcf251..a752521cf 100644 --- a/frontend/scss/_imports.scss +++ b/frontend/scss/_imports.scss @@ -79,6 +79,7 @@ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ sections */ +@import 'vendor/cropperjs'; @import 'vendor/flatpickr'; @import 'vendor/vselect'; diff --git a/frontend/scss/vendor/_cropperjs.scss b/frontend/scss/vendor/_cropperjs.scss new file mode 100644 index 000000000..e3ca1b7f7 --- /dev/null +++ b/frontend/scss/vendor/_cropperjs.scss @@ -0,0 +1,30 @@ +/* make hit area for cropping points larger to help touch users crop images */ + +.cropper-crop-box { + container-type: inline-size; + container-name: cropbox; +} + +.cropper-point::after { + content: ''; + position: absolute; + inset: -2px; +} + +@container cropbox (min-width: 40px) { + .cropper-point::after { + inset: -5px; + } +} + +@container cropbox (min-width: 60px) { + .cropper-point::after { + inset: -10px; + } +} + +@container cropbox (min-width: 100px) { + .cropper-point::after { + inset: -20px; + } +}