Skip to content

Commit 9e26efd

Browse files
13twelveifox
authored andcommitted
increase cropping point hit area
to make image cropping easier on touch devices
1 parent dcc1508 commit 9e26efd

File tree

2 files changed

+31
-0
lines changed

2 files changed

+31
-0
lines changed

frontend/scss/_imports.scss

+1
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979

8080
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ sections */
8181

82+
@import 'vendor/cropperjs';
8283
@import 'vendor/flatpickr';
8384
@import 'vendor/vselect';
8485

frontend/scss/vendor/_cropperjs.scss

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* make hit area for cropping points larger to help touch users crop images */
2+
3+
.cropper-crop-box {
4+
container-type: inline-size;
5+
container-name: cropbox;
6+
}
7+
8+
.cropper-point::after {
9+
content: '';
10+
position: absolute;
11+
inset: -2px;
12+
}
13+
14+
@container cropbox (min-width: 40px) {
15+
.cropper-point::after {
16+
inset: -5px;
17+
}
18+
}
19+
20+
@container cropbox (min-width: 60px) {
21+
.cropper-point::after {
22+
inset: -10px;
23+
}
24+
}
25+
26+
@container cropbox (min-width: 100px) {
27+
.cropper-point::after {
28+
inset: -20px;
29+
}
30+
}

0 commit comments

Comments
 (0)