@syncfusion/ej2-image-editor 23.1.43 → 23.2.5

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 (68) hide show
  1. package/CHANGELOG.md +8 -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 +330 -163
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +328 -161
  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 +11 -11
  12. package/src/image-editor/action/draw.js +177 -133
  13. package/src/image-editor/action/selection.js +37 -1
  14. package/src/image-editor/action/shape.d.ts +1 -0
  15. package/src/image-editor/action/shape.js +14 -0
  16. package/src/image-editor/action/transform.d.ts +1 -0
  17. package/src/image-editor/action/transform.js +29 -1
  18. package/src/image-editor/base/image-editor.js +3 -1
  19. package/src/image-editor/renderer/toolbar.js +69 -26
  20. package/styles/bootstrap-dark.css +14 -3
  21. package/styles/bootstrap.css +14 -3
  22. package/styles/bootstrap4.css +14 -3
  23. package/styles/bootstrap5-dark.css +14 -3
  24. package/styles/bootstrap5.css +14 -3
  25. package/styles/fabric-dark.css +14 -3
  26. package/styles/fabric.css +14 -3
  27. package/styles/fluent-dark.css +14 -3
  28. package/styles/fluent.css +14 -3
  29. package/styles/highcontrast-light.css +14 -3
  30. package/styles/highcontrast.css +14 -3
  31. package/styles/image-editor/_bootstrap-dark-definition.scss +4 -0
  32. package/styles/image-editor/_bootstrap-definition.scss +4 -0
  33. package/styles/image-editor/_bootstrap4-definition.scss +4 -0
  34. package/styles/image-editor/_bootstrap5-definition.scss +4 -0
  35. package/styles/image-editor/_fabric-dark-definition.scss +4 -0
  36. package/styles/image-editor/_fabric-definition.scss +4 -0
  37. package/styles/image-editor/_fluent-definition.scss +4 -0
  38. package/styles/image-editor/_fusionnew-definition.scss +4 -0
  39. package/styles/image-editor/_highcontrast-definition.scss +4 -0
  40. package/styles/image-editor/_highcontrast-light-definition.scss +4 -0
  41. package/styles/image-editor/_layout.scss +21 -7
  42. package/styles/image-editor/_material-dark-definition.scss +4 -0
  43. package/styles/image-editor/_material-definition.scss +4 -0
  44. package/styles/image-editor/_material3-definition.scss +4 -0
  45. package/styles/image-editor/_tailwind-definition.scss +4 -0
  46. package/styles/image-editor/bootstrap-dark.css +14 -3
  47. package/styles/image-editor/bootstrap.css +14 -3
  48. package/styles/image-editor/bootstrap4.css +14 -3
  49. package/styles/image-editor/bootstrap5-dark.css +14 -3
  50. package/styles/image-editor/bootstrap5.css +14 -3
  51. package/styles/image-editor/fabric-dark.css +14 -3
  52. package/styles/image-editor/fabric.css +14 -3
  53. package/styles/image-editor/fluent-dark.css +14 -3
  54. package/styles/image-editor/fluent.css +14 -3
  55. package/styles/image-editor/highcontrast-light.css +14 -3
  56. package/styles/image-editor/highcontrast.css +14 -3
  57. package/styles/image-editor/material-dark.css +14 -3
  58. package/styles/image-editor/material.css +14 -3
  59. package/styles/image-editor/material3-dark.css +19 -4
  60. package/styles/image-editor/material3.css +19 -4
  61. package/styles/image-editor/tailwind-dark.css +14 -3
  62. package/styles/image-editor/tailwind.css +14 -3
  63. package/styles/material-dark.css +14 -3
  64. package/styles/material.css +14 -3
  65. package/styles/material3-dark.css +19 -4
  66. package/styles/material3.css +19 -4
  67. package/styles/tailwind-dark.css +14 -3
  68. package/styles/tailwind.css +14 -3
package/styles/fluent-dark.css CHANGED
@@ -232,9 +232,10 @@
232
232
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
233
233
  font-size: 20px;
234
234
  }
235
- .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
235
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
236
236
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
237
237
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
238
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
238
239
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
239
240
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
240
241
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -244,6 +245,11 @@
244
245
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
245
246
  margin-top: -4px;
246
247
  }
248
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
249
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
250
+ margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
251
+ margin-left: -4px;
252
+ }
247
253
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
248
254
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
249
255
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -337,7 +343,7 @@
337
343
  .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
338
344
  border: none;
339
345
  }
340
- .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
346
+ .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
341
347
  font-size: 18px;
342
348
  }
343
349
  .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -346,7 +352,8 @@
346
352
  .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
347
353
  height: 18px;
348
354
  width: 18px;
349
- margin-top: -4px;
355
+ margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
356
+ margin-left: -4px;
350
357
  }
351
358
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
352
359
  font-size: 18px;
@@ -391,6 +398,10 @@
391
398
  margin: 4px;
392
399
  text-align: center;
393
400
  }
401
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
402
+ margin: 0 auto;
403
+ width: max-content;
404
+ }
394
405
  .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
395
406
  height: inherit !important; /* stylelint-disable-line declaration-no-important */
396
407
  }
package/styles/fluent.css CHANGED
@@ -232,9 +232,10 @@
232
232
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
233
233
  font-size: 20px;
234
234
  }
235
- .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
235
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
236
236
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
237
237
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
238
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
238
239
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
239
240
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
240
241
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -244,6 +245,11 @@
244
245
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
245
246
  margin-top: -4px;
246
247
  }
248
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
249
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
250
+ margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
251
+ margin-left: -4px;
252
+ }
247
253
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
248
254
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
249
255
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -337,7 +343,7 @@
337
343
  .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
338
344
  border: none;
339
345
  }
340
- .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
346
+ .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
341
347
  font-size: 18px;
342
348
  }
343
349
  .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -346,7 +352,8 @@
346
352
  .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
347
353
  height: 18px;
348
354
  width: 18px;
349
- margin-top: -4px;
355
+ margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
356
+ margin-left: -4px;
350
357
  }
351
358
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
352
359
  font-size: 18px;
@@ -391,6 +398,10 @@
391
398
  margin: 4px;
392
399
  text-align: center;
393
400
  }
401
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
402
+ margin: 0 auto;
403
+ width: max-content;
404
+ }
394
405
  .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
395
406
  height: inherit !important; /* stylelint-disable-line declaration-no-important */
396
407
  }
package/styles/highcontrast-light.css CHANGED
@@ -223,9 +223,10 @@
223
223
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
224
224
  font-size: 18px;
225
225
  }
226
- .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
226
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
227
227
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
228
228
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
229
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
229
230
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
230
231
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
231
232
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -235,6 +236,11 @@
235
236
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
236
237
  margin-top: -4px;
237
238
  }
239
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
240
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
241
+ margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
242
+ margin-left: -1px;
243
+ }
238
244
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
239
245
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
240
246
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -328,7 +334,7 @@
328
334
  .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
329
335
  border: none;
330
336
  }
331
- .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
337
+ .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
332
338
  font-size: 16px;
333
339
  }
334
340
  .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -337,7 +343,8 @@
337
343
  .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
338
344
  height: 18px;
339
345
  width: 18px;
340
- margin-top: -4px;
346
+ margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
347
+ margin-left: -1px;
341
348
  }
342
349
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
343
350
  font-size: 16px;
@@ -382,6 +389,10 @@
382
389
  margin: 4px;
383
390
  text-align: center;
384
391
  }
392
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
393
+ margin: 0 auto;
394
+ width: max-content;
395
+ }
385
396
  .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
386
397
  height: inherit !important; /* stylelint-disable-line declaration-no-important */
387
398
  }
package/styles/highcontrast.css CHANGED
@@ -223,9 +223,10 @@
223
223
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
224
224
  font-size: 18px;
225
225
  }
226
- .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
226
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
227
227
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
228
228
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
229
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
229
230
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
230
231
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
231
232
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -235,6 +236,11 @@
235
236
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
236
237
  margin-top: -4px;
237
238
  }
239
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
240
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
241
+ margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
242
+ margin-left: -1px;
243
+ }
238
244
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
239
245
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
240
246
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -328,7 +334,7 @@
328
334
  .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
329
335
  border: none;
330
336
  }
331
- .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
337
+ .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
332
338
  font-size: 16px;
333
339
  }
334
340
  .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -337,7 +343,8 @@
337
343
  .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
338
344
  height: 18px;
339
345
  width: 18px;
340
- margin-top: -4px;
346
+ margin-top: -4px !important; /* stylelint-disable-line declaration-no-important */
347
+ margin-left: -1px;
341
348
  }
342
349
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
343
350
  font-size: 16px;
@@ -382,6 +389,10 @@
382
389
  margin: 4px;
383
390
  text-align: center;
384
391
  }
392
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
393
+ margin: 0 auto;
394
+ width: max-content;
395
+ }
385
396
  .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
386
397
  height: inherit !important; /* stylelint-disable-line declaration-no-important */
387
398
  }
package/styles/image-editor/_bootstrap-dark-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: 16px !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: 18px !default;
11
11
  $image-editor-contextual-toolbar: $grey-darker !default;
12
12
  $image-editor-drop-border: 2px dashed $grey-dark-font !default;
13
+ $image-editor-dropdown-btn-preview-top: -2px !default;
14
+ $image-editor-dropdown-btn-preview-left: 0 !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -1px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
package/styles/image-editor/_bootstrap-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: 16px !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: 18px !default;
11
11
  $image-editor-contextual-toolbar: $grey-f8 !default;
12
12
  $image-editor-drop-border: 2px dashed $gray-dark !default;
13
+ $image-editor-dropdown-btn-preview-top: -2px !default;
14
+ $image-editor-dropdown-btn-preview-left: 0 !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -1px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
package/styles/image-editor/_bootstrap4-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: 16px !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: 18px !default;
11
11
  $image-editor-contextual-toolbar: $gray-100 !default;
12
12
  $image-editor-drop-border: 2px dashed $gray-700 !default;
13
+ $image-editor-dropdown-btn-preview-top: -2px !default;
14
+ $image-editor-dropdown-btn-preview-left: 0 !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -1px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
package/styles/image-editor/_bootstrap5-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: $text-lg !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
11
11
  $image-editor-contextual-toolbar: $content-bg-color-alt1 !default;
12
12
  $image-editor-drop-border: 2px dashed $icon-color !default;
13
+ $image-editor-dropdown-btn-preview-top: -4px !default;
14
+ $image-editor-dropdown-btn-preview-left: -4px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -4px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
package/styles/image-editor/_fabric-dark-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: 16px !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: 18px !default;
11
11
  $image-editor-contextual-toolbar: $neutral-lighter !default;
12
12
  $image-editor-drop-border: 2px dashed $neutral-light-font !default;
13
+ $image-editor-dropdown-btn-preview-top: -4px !default;
14
+ $image-editor-dropdown-btn-preview-left: -1px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -4px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
package/styles/image-editor/_fabric-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: 16px !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: 18px !default;
11
11
  $image-editor-contextual-toolbar: $neutral-white !default;
12
12
  $image-editor-drop-border: 2px dashed $neutral-light-font !default;
13
+ $image-editor-dropdown-btn-preview-top: -4px !default;
14
+ $image-editor-dropdown-btn-preview-left: -1px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -4px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
package/styles/image-editor/_fluent-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: $text-lg !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
11
11
  $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
12
12
  $image-editor-drop-border: 2px dashed $icon-color !default;
13
+ $image-editor-dropdown-btn-preview-top: -4px !default;
14
+ $image-editor-dropdown-btn-preview-left: -4px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -4px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
package/styles/image-editor/_fusionnew-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: $text-lg !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
11
11
  $image-editor-contextual-toolbar: $content-bg-color-alt1 !default;
12
12
  $image-editor-drop-border: 2px dashed $icon-color !default;
13
+ $image-editor-dropdown-btn-preview-top: -2px !default;
14
+ $image-editor-dropdown-btn-preview-left: -9px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -1px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -7px !default;
package/styles/image-editor/_highcontrast-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: 16px !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: 18px !default;
11
11
  $image-editor-contextual-toolbar: $bg-base-0 !default;
12
12
  $image-editor-drop-border: 2px dashed $content-font !default;
13
+ $image-editor-dropdown-btn-preview-top: -4px !default;
14
+ $image-editor-dropdown-btn-preview-left: -1px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -4px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
package/styles/image-editor/_highcontrast-light-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: 16px !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: 18px !default;
11
11
  $image-editor-contextual-toolbar: $bg-base-0 !default;
12
12
  $image-editor-drop-border: 2px dashed $content-font !default;
13
+ $image-editor-dropdown-btn-preview-top: -4px !default;
14
+ $image-editor-dropdown-btn-preview-left: -1px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -4px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
package/styles/image-editor/_layout.scss CHANGED
@@ -64,6 +64,7 @@
64
64
 
65
65
  & .e-fill.e-template,
66
66
  & .e-stroke.e-template,
67
+ & .e-frame-stroke.e-template,
67
68
  & .e-pen-stroke-color.e-template,
68
69
  & .e-text-font-color.e-template,
69
70
  & .e-save.e-template {
@@ -82,6 +83,17 @@
82
83
  }
83
84
  }
84
85
 
86
+ & .e-btn-icon.e-dropdownbtn-preview {
87
+ margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
88
+ margin-left: $image-editor-bigger-dropdown-btn-preview-left;
89
+ }
90
+
91
+ & .e-dropdown-btn.e-icon-btn {
92
+ @if $skin-name == 'Material3' {
93
+ padding: 7px 15px;
94
+ }
95
+ }
96
+
85
97
  & .e-dropdown-btn.e-image-popup {
86
98
  & .e-select,
87
99
  & .e-annotation,
@@ -228,6 +240,7 @@
228
240
 
229
241
  & .e-fill.e-template,
230
242
  & .e-stroke.e-template,
243
+ & .e-frame-stroke.e-template,
231
244
  & .e-pen-stroke-color.e-template,
232
245
  & .e-text-font-color.e-template,
233
246
  & .e-save.e-template {
@@ -249,7 +262,8 @@
249
262
  & .e-btn-icon.e-dropdownbtn-preview {
250
263
  height: 18px;
251
264
  width: 18px;
252
- margin-top: -4px;
265
+ margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
266
+ margin-left: $image-editor-dropdown-btn-preview-left;
253
267
  }
254
268
 
255
269
  & .e-dropdown-btn.e-image-popup {
@@ -321,6 +335,11 @@
321
335
  margin: 4px;
322
336
  text-align: center;
323
337
  }
338
+
339
+ & .e-dropdown-btn {
340
+ margin: 0 auto;
341
+ width: max-content;
342
+ }
324
343
  }
325
344
 
326
345
  &.e-frame-wrapper {
@@ -362,12 +381,7 @@
362
381
 
363
382
  & .e-slider-container {
364
383
  margin-left: calc(50% - 137px);
365
- @if $skin-name == 'Material3' {
366
- height: 70px !important; /* stylelint-disable-line declaration-no-important */
367
- }
368
- @else {
369
- height: 54px !important; /* stylelint-disable-line declaration-no-important */
370
- }
384
+ height: 54px !important; /* stylelint-disable-line declaration-no-important */
371
385
  }
372
386
  }
373
387
  }
package/styles/image-editor/_material-dark-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: 16px !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: 18px !default;
11
11
  $image-editor-contextual-toolbar: $grey-900 !default;
12
12
  $image-editor-drop-border: 2px dashed $grey-dark-font !default;
13
+ $image-editor-dropdown-btn-preview-top: -4px !default;
14
+ $image-editor-dropdown-btn-preview-left: -1px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -3px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
package/styles/image-editor/_material-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: 16px !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: 18px !default;
11
11
  $image-editor-contextual-toolbar: $grey-50 !default;
12
12
  $image-editor-drop-border: 2px dashed $grey-600 !default;
13
+ $image-editor-dropdown-btn-preview-top: -4px !default;
14
+ $image-editor-dropdown-btn-preview-left: -1px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -3px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
package/styles/image-editor/_material3-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: $text-base !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: $text-lg !default;
11
11
  $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
12
12
  $image-editor-drop-border: 2px dashed rgba($icon-color);
13
+ $image-editor-dropdown-btn-preview-top: -2px !default;
14
+ $image-editor-dropdown-btn-preview-left: -9px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -1px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -7px !default;
package/styles/image-editor/_tailwind-definition.scss CHANGED
@@ -10,3 +10,7 @@ $image-editor-tbar-btn-fontsize: $text-lg !default;
10
10
  $image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
11
11
  $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
12
12
  $image-editor-drop-border: 2px dashed $icon-color !default;
13
+ $image-editor-dropdown-btn-preview-top: -2px !default;
14
+ $image-editor-dropdown-btn-preview-left: -6px !default;
15
+ $image-editor-bigger-dropdown-btn-preview-top: -2px !default;
16
+ $image-editor-bigger-dropdown-btn-preview-left: -6px !default;
package/styles/image-editor/bootstrap-dark.css CHANGED
@@ -224,9 +224,10 @@
224
224
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
225
225
  font-size: 18px;
226
226
  }
227
- .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
227
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
228
228
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
229
229
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
230
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
230
231
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
231
232
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
232
233
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -236,6 +237,11 @@
236
237
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
237
238
  margin-top: -4px;
238
239
  }
240
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
241
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
242
+ margin-top: -1px !important; /* stylelint-disable-line declaration-no-important */
243
+ margin-left: 0;
244
+ }
239
245
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
240
246
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
241
247
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -330,7 +336,7 @@
330
336
  .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
331
337
  border: none;
332
338
  }
333
- .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
339
+ .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
334
340
  font-size: 16px;
335
341
  }
336
342
  .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -339,7 +345,8 @@
339
345
  .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
340
346
  height: 18px;
341
347
  width: 18px;
342
- margin-top: -4px;
348
+ margin-top: -2px !important; /* stylelint-disable-line declaration-no-important */
349
+ margin-left: 0;
343
350
  }
344
351
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
345
352
  font-size: 16px;
@@ -384,6 +391,10 @@
384
391
  margin: 4px;
385
392
  text-align: center;
386
393
  }
394
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
395
+ margin: 0 auto;
396
+ width: max-content;
397
+ }
387
398
  .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
388
399
  height: inherit !important; /* stylelint-disable-line declaration-no-important */
389
400
  }
package/styles/image-editor/bootstrap.css CHANGED
@@ -224,9 +224,10 @@
224
224
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
225
225
  font-size: 18px;
226
226
  }
227
- .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
227
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
228
228
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
229
229
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
230
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
230
231
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
231
232
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
232
233
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -236,6 +237,11 @@
236
237
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
237
238
  margin-top: -4px;
238
239
  }
240
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
241
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
242
+ margin-top: -1px !important; /* stylelint-disable-line declaration-no-important */
243
+ margin-left: 0;
244
+ }
239
245
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
240
246
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
241
247
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -330,7 +336,7 @@
330
336
  .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
331
337
  border: none;
332
338
  }
333
- .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
339
+ .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
334
340
  font-size: 16px;
335
341
  }
336
342
  .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -339,7 +345,8 @@
339
345
  .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
340
346
  height: 18px;
341
347
  width: 18px;
342
- margin-top: -4px;
348
+ margin-top: -2px !important; /* stylelint-disable-line declaration-no-important */
349
+ margin-left: 0;
343
350
  }
344
351
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
345
352
  font-size: 16px;
@@ -384,6 +391,10 @@
384
391
  margin: 4px;
385
392
  text-align: center;
386
393
  }
394
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
395
+ margin: 0 auto;
396
+ width: max-content;
397
+ }
387
398
  .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
388
399
  height: inherit !important; /* stylelint-disable-line declaration-no-important */
389
400
  }
package/styles/image-editor/bootstrap4.css CHANGED
@@ -223,9 +223,10 @@
223
223
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
224
224
  font-size: 18px;
225
225
  }
226
- .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
226
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret,
227
227
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret,
228
228
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
229
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret,
229
230
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret,
230
231
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret,
231
232
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -235,6 +236,11 @@
235
236
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
236
237
  margin-top: -4px;
237
238
  }
239
+ .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview,
240
+ .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
241
+ margin-top: -1px !important; /* stylelint-disable-line declaration-no-important */
242
+ margin-left: 0;
243
+ }
238
244
  .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-bigger .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform,
239
245
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select,
240
246
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation,
@@ -328,7 +334,7 @@
328
334
  .e-image-editor .e-toolbar .e-toolbar-items .e-image-upload .e-image-upload .e-upload {
329
335
  border: none;
330
336
  }
331
- .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
337
+ .e-image-editor .e-toolbar .e-toolbar-items .e-fill.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-frame-stroke.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-pen-stroke-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret, .e-image-editor .e-toolbar .e-toolbar-items .e-save.e-template .e-dropdown-btn .e-icons.e-caret {
332
338
  font-size: 16px;
333
339
  }
334
340
  .e-image-editor .e-toolbar .e-toolbar-items .e-text-font-color.e-template .e-dropdown-btn .e-icons.e-caret {
@@ -337,7 +343,8 @@
337
343
  .e-image-editor .e-toolbar .e-toolbar-items .e-btn-icon.e-dropdownbtn-preview {
338
344
  height: 18px;
339
345
  width: 18px;
340
- margin-top: -4px;
346
+ margin-top: -2px !important; /* stylelint-disable-line declaration-no-important */
347
+ margin-left: 0;
341
348
  }
342
349
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-select, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-annotation, .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-image-popup .e-transform {
343
350
  font-size: 16px;
@@ -382,6 +389,10 @@
382
389
  margin: 4px;
383
390
  text-align: center;
384
391
  }
392
+ .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-dropdown-btn {
393
+ margin: 0 auto;
394
+ width: max-content;
395
+ }
385
396
  .e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-toolbar {
386
397
  height: inherit !important; /* stylelint-disable-line declaration-no-important */
387
398
  }