@syncfusion/ej2-image-editor 22.2.10 → 23.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/ej2-image-editor.umd.min.js +2 -2
  3. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-image-editor.es2015.js +4272 -687
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +4234 -640
  7. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  8. package/dist/global/ej2-image-editor.min.js +2 -2
  9. package/dist/global/ej2-image-editor.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +12 -12
  12. package/src/image-editor/action/crop.js +47 -30
  13. package/src/image-editor/action/draw.d.ts +16 -0
  14. package/src/image-editor/action/draw.js +827 -81
  15. package/src/image-editor/action/export.d.ts +3 -0
  16. package/src/image-editor/action/export.js +84 -20
  17. package/src/image-editor/action/filter.d.ts +0 -1
  18. package/src/image-editor/action/filter.js +28 -41
  19. package/src/image-editor/action/freehand-draw.js +45 -32
  20. package/src/image-editor/action/selection.d.ts +6 -0
  21. package/src/image-editor/action/selection.js +380 -66
  22. package/src/image-editor/action/shape.d.ts +8 -0
  23. package/src/image-editor/action/shape.js +286 -91
  24. package/src/image-editor/action/transform.d.ts +9 -0
  25. package/src/image-editor/action/transform.js +402 -52
  26. package/src/image-editor/action/undo-redo.d.ts +1 -0
  27. package/src/image-editor/action/undo-redo.js +138 -10
  28. package/src/image-editor/base/enum.d.ts +38 -1
  29. package/src/image-editor/base/enum.js +39 -0
  30. package/src/image-editor/base/image-editor-model.d.ts +16 -2
  31. package/src/image-editor/base/image-editor.d.ts +134 -7
  32. package/src/image-editor/base/image-editor.js +611 -69
  33. package/src/image-editor/base/interface.d.ts +233 -2
  34. package/src/image-editor/renderer/toolbar.d.ts +25 -0
  35. package/src/image-editor/renderer/toolbar.js +1273 -72
  36. package/styles/bootstrap-dark.css +68 -1
  37. package/styles/bootstrap.css +68 -1
  38. package/styles/bootstrap4.css +68 -1
  39. package/styles/bootstrap5-dark.css +68 -1
  40. package/styles/bootstrap5.css +68 -1
  41. package/styles/fabric-dark.css +68 -1
  42. package/styles/fabric.css +68 -1
  43. package/styles/fluent-dark.css +68 -1
  44. package/styles/fluent.css +68 -1
  45. package/styles/highcontrast-light.css +70 -3
  46. package/styles/highcontrast.css +69 -7
  47. package/styles/image-editor/_bootstrap-dark-definition.scss +1 -0
  48. package/styles/image-editor/_bootstrap-definition.scss +1 -0
  49. package/styles/image-editor/_bootstrap4-definition.scss +1 -0
  50. package/styles/image-editor/_bootstrap5-definition.scss +1 -0
  51. package/styles/image-editor/_fabric-dark-definition.scss +1 -0
  52. package/styles/image-editor/_fabric-definition.scss +1 -0
  53. package/styles/image-editor/_fluent-definition.scss +1 -0
  54. package/styles/image-editor/_fusionnew-definition.scss +1 -0
  55. package/styles/image-editor/_highcontrast-definition.scss +2 -1
  56. package/styles/image-editor/_highcontrast-light-definition.scss +2 -1
  57. package/styles/image-editor/_layout.scss +92 -0
  58. package/styles/image-editor/_material-dark-definition.scss +1 -0
  59. package/styles/image-editor/_material-definition.scss +1 -0
  60. package/styles/image-editor/_material3-definition.scss +2 -1
  61. package/styles/image-editor/_tailwind-definition.scss +1 -0
  62. package/styles/image-editor/_theme.scss +4 -2
  63. package/styles/image-editor/bootstrap-dark.css +68 -1
  64. package/styles/image-editor/bootstrap-dark.scss +1 -1
  65. package/styles/image-editor/bootstrap.css +68 -1
  66. package/styles/image-editor/bootstrap.scss +1 -1
  67. package/styles/image-editor/bootstrap4.css +68 -1
  68. package/styles/image-editor/bootstrap4.scss +1 -1
  69. package/styles/image-editor/bootstrap5-dark.css +68 -1
  70. package/styles/image-editor/bootstrap5-dark.scss +1 -1
  71. package/styles/image-editor/bootstrap5.css +68 -1
  72. package/styles/image-editor/bootstrap5.scss +1 -1
  73. package/styles/image-editor/fabric-dark.css +68 -1
  74. package/styles/image-editor/fabric-dark.scss +1 -1
  75. package/styles/image-editor/fabric.css +68 -1
  76. package/styles/image-editor/fabric.scss +1 -1
  77. package/styles/image-editor/fluent-dark.css +68 -1
  78. package/styles/image-editor/fluent-dark.scss +1 -1
  79. package/styles/image-editor/fluent.css +68 -1
  80. package/styles/image-editor/fluent.scss +1 -1
  81. package/styles/image-editor/highcontrast-light.css +70 -3
  82. package/styles/image-editor/highcontrast-light.scss +1 -1
  83. package/styles/image-editor/highcontrast.css +69 -7
  84. package/styles/image-editor/highcontrast.scss +1 -1
  85. package/styles/image-editor/icons/_bootstrap-dark.scss +1 -0
  86. package/styles/image-editor/icons/_bootstrap.scss +1 -0
  87. package/styles/image-editor/icons/_bootstrap4.scss +1 -0
  88. package/styles/image-editor/icons/_bootstrap5.scss +1 -0
  89. package/styles/image-editor/icons/_fabric-dark.scss +1 -0
  90. package/styles/image-editor/icons/_fabric.scss +1 -0
  91. package/styles/image-editor/icons/_fluent.scss +1 -0
  92. package/styles/image-editor/icons/_fusionnew.scss +1 -0
  93. package/styles/image-editor/icons/_highcontrast-light.scss +1 -0
  94. package/styles/image-editor/icons/_highcontrast.scss +1 -0
  95. package/styles/image-editor/icons/_material-dark.scss +1 -0
  96. package/styles/image-editor/icons/_material.scss +1 -0
  97. package/styles/image-editor/icons/_material3.scss +1 -0
  98. package/styles/image-editor/icons/_tailwind.scss +1 -0
  99. package/styles/image-editor/material-dark.css +68 -2
  100. package/styles/image-editor/material-dark.scss +1 -1
  101. package/styles/image-editor/material.css +68 -2
  102. package/styles/image-editor/material.scss +1 -1
  103. package/styles/image-editor/material3-dark.css +73 -4
  104. package/styles/image-editor/material3-dark.scss +1 -1
  105. package/styles/image-editor/material3.css +73 -4
  106. package/styles/image-editor/material3.scss +1 -1
  107. package/styles/image-editor/tailwind-dark.css +68 -2
  108. package/styles/image-editor/tailwind-dark.scss +1 -1
  109. package/styles/image-editor/tailwind.css +68 -2
  110. package/styles/image-editor/tailwind.scss +1 -1
  111. package/styles/material-dark.css +68 -2
  112. package/styles/material.css +68 -2
  113. package/styles/material3-dark.css +73 -4
  114. package/styles/material3-dark.scss +1 -1
  115. package/styles/material3.css +73 -4
  116. package/styles/material3.scss +1 -1
  117. package/styles/tailwind-dark.css +68 -2
  118. package/styles/tailwind.css +68 -2
package/styles/material3-dark.scss CHANGED
@@ -1,3 +1,3 @@
1
1
 
2
- @import 'ej2-base/styles/material3-dark-definition.scss';
2
+
3
3
  @import 'image-editor/material3-dark.scss';
package/styles/material3.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -177,7 +176,7 @@
177
176
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
178
177
  content: "\e76f";
179
178
  }
180
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
179
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
181
180
  content: "\e739";
182
181
  }
183
182
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -326,6 +325,14 @@
326
325
  height: 56px !important; /* stylelint-disable-line declaration-no-important */
327
326
  min-height: 56px !important; /* stylelint-disable-line declaration-no-important */
328
327
  }
328
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
329
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
330
+ font-size: 16px;
331
+ }
332
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
333
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
334
+ font-size: 16px;
335
+ }
329
336
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
330
337
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
331
338
  font-size: 18px;
@@ -376,9 +383,47 @@
376
383
  position: relative;
377
384
  display: block;
378
385
  }
386
+ .e-image-editor .e-quick-access-toolbar-area .e-toolbar {
387
+ border-radius: 4px;
388
+ }
389
+ .e-image-editor .e-ie-drop-area {
390
+ height: calc(100% - 18px);
391
+ width: calc(100% - 20px);
392
+ border: 2px dashed rgba(var(--color-sf-on-surface-variant));
393
+ border-radius: 10px;
394
+ margin: 10px;
395
+ }
396
+ .e-image-editor .e-ie-drop-area .e-upload {
397
+ display: none;
398
+ }
399
+ .e-image-editor .e-ie-drop-area .e-image::before {
400
+ font-size: 50px;
401
+ }
402
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
403
+ top: calc(50% - 60px);
404
+ left: calc(50% - 25px);
405
+ }
406
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
407
+ top: 50%;
408
+ left: calc(50% - 160px);
409
+ font-size: 14px;
410
+ }
411
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
412
+ top: calc(50% + 40px);
413
+ left: calc(50% - 100px);
414
+ position: absolute;
415
+ font-size: 14px;
416
+ }
379
417
  .e-image-editor .e-toolbar {
380
418
  border: none;
381
419
  }
420
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
421
+ margin-left: 20px;
422
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
423
+ }
424
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
425
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
426
+ }
382
427
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
383
428
  font-size: 16px;
384
429
  }
@@ -439,6 +484,30 @@
439
484
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
440
485
  height: 140px !important; /* stylelint-disable-line declaration-no-important */
441
486
  }
487
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
488
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
489
+ }
490
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
491
+ display: -ms-inline-grid;
492
+ display: inline-grid;
493
+ }
494
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
495
+ font-weight: 500;
496
+ margin: 4px;
497
+ text-align: center;
498
+ }
499
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
500
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
501
+ }
502
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
503
+ display: -ms-inline-grid;
504
+ display: inline-grid;
505
+ }
506
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
507
+ font-weight: 500;
508
+ margin: 4px;
509
+ text-align: center;
510
+ }
442
511
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
443
512
  display: none;
444
513
  }
@@ -472,7 +541,7 @@
472
541
  color: rgba(var(--color-sf-on-surface-variant));
473
542
  }
474
543
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
475
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
544
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.16), rgba(var(--color-sf-primary), 0.16)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
476
545
  }
477
546
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn {
478
547
  background: inherit;
@@ -517,5 +586,5 @@
517
586
  }
518
587
 
519
588
  .e-dropdown-popup .e-selected-btn {
520
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
589
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.16), rgba(var(--color-sf-primary), 0.16)), rgba(var(--color-sf-surface)) !important; /* stylelint-disable-line declaration-no-important */
521
590
  }
package/styles/material3.scss CHANGED
@@ -1,3 +1,3 @@
1
1
 
2
- @import 'ej2-base/styles/material3-definition.scss';
2
+
3
3
  @import 'image-editor/material3.scss';
package/styles/tailwind-dark.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /* stylelint-disable-line no-empty-source */
3
2
  .e-upload .e-upload-actions,
4
3
  .e-bigger.e-small .e-upload .e-upload-actions {
@@ -65,7 +64,7 @@
65
64
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
66
65
  content: "\e76f";
67
66
  }
68
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
67
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
69
68
  content: "\e739";
70
69
  }
71
70
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -214,6 +213,14 @@
214
213
  height: 48px !important; /* stylelint-disable-line declaration-no-important */
215
214
  min-height: 48px !important; /* stylelint-disable-line declaration-no-important */
216
215
  }
216
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
217
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
218
+ font-size: 16px;
219
+ }
220
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
221
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
222
+ font-size: 16px;
223
+ }
217
224
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
218
225
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
219
226
  font-size: 20px;
@@ -264,11 +271,46 @@
264
271
  position: relative;
265
272
  display: block;
266
273
  }
274
+ .e-image-editor .e-ie-drop-area {
275
+ height: calc(100% - 18px);
276
+ width: calc(100% - 20px);
277
+ border: 2px dashed #d1d5db;
278
+ border-radius: 10px;
279
+ margin: 10px;
280
+ }
281
+ .e-image-editor .e-ie-drop-area .e-upload {
282
+ display: none;
283
+ }
284
+ .e-image-editor .e-ie-drop-area .e-image::before {
285
+ font-size: 50px;
286
+ }
287
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
288
+ top: calc(50% - 60px);
289
+ left: calc(50% - 25px);
290
+ }
291
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
292
+ top: 50%;
293
+ left: calc(50% - 160px);
294
+ font-size: 14px;
295
+ }
296
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
297
+ top: calc(50% + 40px);
298
+ left: calc(50% - 100px);
299
+ position: absolute;
300
+ font-size: 14px;
301
+ }
267
302
  .e-image-editor .e-toolbar {
268
303
  border: none;
269
304
  height: 38px !important; /* stylelint-disable-line declaration-no-important */
270
305
  min-height: 38px !important; /* stylelint-disable-line declaration-no-important */
271
306
  }
307
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
308
+ margin-left: 20px;
309
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
310
+ }
311
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
312
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
313
+ }
272
314
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
273
315
  font-size: 18px;
274
316
  }
@@ -329,6 +371,30 @@
329
371
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
330
372
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
331
373
  }
374
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
375
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
376
+ }
377
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
378
+ display: -ms-inline-grid;
379
+ display: inline-grid;
380
+ }
381
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
382
+ font-weight: 500;
383
+ margin: 4px;
384
+ text-align: center;
385
+ }
386
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
387
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
388
+ }
389
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
390
+ display: -ms-inline-grid;
391
+ display: inline-grid;
392
+ }
393
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
394
+ font-weight: 500;
395
+ margin: 4px;
396
+ text-align: center;
397
+ }
332
398
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
333
399
  display: none;
334
400
  }
package/styles/tailwind.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /* stylelint-disable-line no-empty-source */
3
2
  .e-upload .e-upload-actions,
4
3
  .e-bigger.e-small .e-upload .e-upload-actions {
@@ -65,7 +64,7 @@
65
64
  .e-image-editor .e-text-font-color.e-template .e-caret::before {
66
65
  content: "\e76f";
67
66
  }
68
- .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
67
+ .e-image-editor .e-stroke.e-template .e-caret::before, .e-image-editor .e-frame-stroke.e-template .e-caret::before, .e-image-editor .e-pen-stroke-color.e-template .e-caret::before {
69
68
  content: "\e739";
70
69
  }
71
70
  .e-image-editor .e-fill.e-template .e-caret::before {
@@ -214,6 +213,14 @@
214
213
  height: 48px !important; /* stylelint-disable-line declaration-no-important */
215
214
  min-height: 48px !important; /* stylelint-disable-line declaration-no-important */
216
215
  }
216
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span,
217
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height span {
218
+ font-size: 16px;
219
+ }
220
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span,
221
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width span {
222
+ font-size: 16px;
223
+ }
217
224
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
218
225
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
219
226
  font-size: 20px;
@@ -264,11 +271,46 @@
264
271
  position: relative;
265
272
  display: block;
266
273
  }
274
+ .e-image-editor .e-ie-drop-area {
275
+ height: calc(100% - 18px);
276
+ width: calc(100% - 20px);
277
+ border: 2px dashed #6b7280;
278
+ border-radius: 10px;
279
+ margin: 10px;
280
+ }
281
+ .e-image-editor .e-ie-drop-area .e-upload {
282
+ display: none;
283
+ }
284
+ .e-image-editor .e-ie-drop-area .e-image::before {
285
+ font-size: 50px;
286
+ }
287
+ .e-image-editor .e-ie-drop-area .e-ie-drop-icon {
288
+ top: calc(50% - 60px);
289
+ left: calc(50% - 25px);
290
+ }
291
+ .e-image-editor .e-ie-drop-area .e-ie-drop-content {
292
+ top: 50%;
293
+ left: calc(50% - 160px);
294
+ font-size: 14px;
295
+ }
296
+ .e-image-editor .e-ie-drop-area .e-ie-drop-info {
297
+ top: calc(50% + 40px);
298
+ left: calc(50% - 100px);
299
+ position: absolute;
300
+ font-size: 14px;
301
+ }
267
302
  .e-image-editor .e-toolbar {
268
303
  border: none;
269
304
  height: 38px !important; /* stylelint-disable-line declaration-no-important */
270
305
  min-height: 38px !important; /* stylelint-disable-line declaration-no-important */
271
306
  }
307
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
308
+ margin-left: 20px;
309
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
310
+ }
311
+ .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-width {
312
+ min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
313
+ }
272
314
  .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
273
315
  font-size: 18px;
274
316
  }
@@ -329,6 +371,30 @@
329
371
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
330
372
  height: 130px !important; /* stylelint-disable-line declaration-no-important */
331
373
  }
374
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
375
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
376
+ }
377
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item {
378
+ display: -ms-inline-grid;
379
+ display: inline-grid;
380
+ }
381
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar-item > span {
382
+ font-weight: 500;
383
+ margin: 4px;
384
+ text-align: center;
385
+ }
386
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
387
+ height: inherit !important; /* stylelint-disable-line declaration-no-important */
388
+ }
389
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item:not(.e-hidden) {
390
+ display: -ms-inline-grid;
391
+ display: inline-grid;
392
+ }
393
+ .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar-item > span {
394
+ font-weight: 500;
395
+ margin: 4px;
396
+ text-align: center;
397
+ }
332
398
  .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
333
399
  display: none;
334
400
  }