@syncfusion/ej2-image-editor 24.1.43 → 24.1.45

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 (65) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +1 -1
  3. package/dist/ej2-image-editor.umd.min.js +2 -2
  4. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-image-editor.es2015.js +74 -38
  6. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-image-editor.es5.js +74 -38
  8. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  9. package/dist/global/ej2-image-editor.min.js +2 -2
  10. package/dist/global/ej2-image-editor.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +9 -9
  13. package/src/image-editor/action/draw.js +29 -18
  14. package/src/image-editor/action/selection.js +8 -0
  15. package/src/image-editor/action/transform.js +5 -7
  16. package/src/image-editor/action/undo-redo.js +11 -1
  17. package/src/image-editor/renderer/toolbar.js +21 -12
  18. package/styles/bootstrap-dark.css +29 -2
  19. package/styles/bootstrap.css +29 -2
  20. package/styles/bootstrap4.css +29 -2
  21. package/styles/bootstrap5-dark.css +29 -2
  22. package/styles/bootstrap5.css +29 -2
  23. package/styles/fabric-dark.css +29 -2
  24. package/styles/fabric.css +29 -2
  25. package/styles/fluent-dark.css +29 -2
  26. package/styles/fluent.css +29 -2
  27. package/styles/highcontrast-light.css +29 -2
  28. package/styles/highcontrast.css +29 -2
  29. package/styles/image-editor/_bootstrap-dark-definition.scss +2 -0
  30. package/styles/image-editor/_bootstrap-definition.scss +2 -0
  31. package/styles/image-editor/_bootstrap4-definition.scss +2 -0
  32. package/styles/image-editor/_bootstrap5-definition.scss +2 -0
  33. package/styles/image-editor/_fabric-dark-definition.scss +2 -0
  34. package/styles/image-editor/_fabric-definition.scss +2 -0
  35. package/styles/image-editor/_fluent-definition.scss +2 -0
  36. package/styles/image-editor/_highcontrast-definition.scss +2 -0
  37. package/styles/image-editor/_highcontrast-light-definition.scss +2 -0
  38. package/styles/image-editor/_layout.scss +37 -6
  39. package/styles/image-editor/_material-dark-definition.scss +3 -1
  40. package/styles/image-editor/_material-definition.scss +3 -1
  41. package/styles/image-editor/_material3-definition.scss +2 -0
  42. package/styles/image-editor/_tailwind-definition.scss +2 -0
  43. package/styles/image-editor/bootstrap-dark.css +29 -2
  44. package/styles/image-editor/bootstrap.css +29 -2
  45. package/styles/image-editor/bootstrap4.css +29 -2
  46. package/styles/image-editor/bootstrap5-dark.css +29 -2
  47. package/styles/image-editor/bootstrap5.css +29 -2
  48. package/styles/image-editor/fabric-dark.css +29 -2
  49. package/styles/image-editor/fabric.css +29 -2
  50. package/styles/image-editor/fluent-dark.css +29 -2
  51. package/styles/image-editor/fluent.css +29 -2
  52. package/styles/image-editor/highcontrast-light.css +29 -2
  53. package/styles/image-editor/highcontrast.css +29 -2
  54. package/styles/image-editor/material-dark.css +30 -3
  55. package/styles/image-editor/material.css +30 -3
  56. package/styles/image-editor/material3-dark.css +27 -2
  57. package/styles/image-editor/material3.css +27 -2
  58. package/styles/image-editor/tailwind-dark.css +29 -2
  59. package/styles/image-editor/tailwind.css +29 -2
  60. package/styles/material-dark.css +30 -3
  61. package/styles/material.css +30 -3
  62. package/styles/material3-dark.css +27 -2
  63. package/styles/material3.css +27 -2
  64. package/styles/tailwind-dark.css +29 -2
  65. package/styles/tailwind.css +29 -2
package/styles/image-editor/material3.css CHANGED
@@ -623,8 +623,9 @@
623
623
  }
624
624
 
625
625
  .e-ie-straighten-value-span,
626
- .e-ie-straighten-span {
627
- font-size: 14px;
626
+ .e-ie-straighten-span,
627
+ .e-ie-toolbar-straighten {
628
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
628
629
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
629
630
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
630
631
  }
@@ -650,6 +651,26 @@
650
651
  width: 16px !important; /* stylelint-disable-line declaration-no-important */
651
652
  }
652
653
 
654
+ .e-ie-finetune-value-span {
655
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
656
+ }
657
+
658
+ .e-ie-finetune-slider-label {
659
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
660
+ }
661
+
662
+ .e-ie-finetune-slider-wrap {
663
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
664
+ }
665
+
666
+ .e-transparency-slider-wrap {
667
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
668
+ }
669
+
670
+ .e-ie-slider-wrap {
671
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
672
+ }
673
+
653
674
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
654
675
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
655
676
  width: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -665,6 +686,10 @@
665
686
  background: none !important; /* stylelint-disable-line declaration-no-important */
666
687
  }
667
688
 
689
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
690
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
691
+ }
692
+
668
693
  .e-image-editor {
669
694
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
670
695
  }
package/styles/image-editor/tailwind-dark.css CHANGED
@@ -500,14 +500,17 @@
500
500
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
501
501
  }
502
502
  .e-ie-straighten-value-span,
503
- .e-ie-straighten-span {
504
- font-size: 14px;
503
+ .e-ie-straighten-span,
504
+ .e-ie-toolbar-straighten {
505
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
505
506
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
506
507
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
507
508
  }
508
509
 
509
510
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
510
511
  height: auto;
512
+ margin-left: 8px;
513
+ padding-right: 2px;
511
514
  }
512
515
 
513
516
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -523,6 +526,26 @@
523
526
  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
524
527
  }
525
528
 
529
+ .e-ie-finetune-value-span {
530
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-label {
534
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-ie-finetune-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-transparency-slider-wrap {
542
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-slider-wrap {
546
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
547
+ }
548
+
526
549
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
527
550
  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
528
551
  }
@@ -536,6 +559,10 @@
536
559
  background: none !important; /* stylelint-disable-line declaration-no-important */
537
560
  }
538
561
 
562
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
563
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
564
+ }
565
+
539
566
  .e-image-editor {
540
567
  background: #4b5563;
541
568
  }
package/styles/image-editor/tailwind.css CHANGED
@@ -500,14 +500,17 @@
500
500
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
501
501
  }
502
502
  .e-ie-straighten-value-span,
503
- .e-ie-straighten-span {
504
- font-size: 14px;
503
+ .e-ie-straighten-span,
504
+ .e-ie-toolbar-straighten {
505
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
505
506
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
506
507
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
507
508
  }
508
509
 
509
510
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
510
511
  height: auto;
512
+ margin-left: 8px;
513
+ padding-right: 2px;
511
514
  }
512
515
 
513
516
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -523,6 +526,26 @@
523
526
  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
524
527
  }
525
528
 
529
+ .e-ie-finetune-value-span {
530
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-label {
534
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-ie-finetune-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-transparency-slider-wrap {
542
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-slider-wrap {
546
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
547
+ }
548
+
526
549
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
527
550
  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
528
551
  }
@@ -536,6 +559,10 @@
536
559
  background: none !important; /* stylelint-disable-line declaration-no-important */
537
560
  }
538
561
 
562
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
563
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
564
+ }
565
+
539
566
  .e-image-editor {
540
567
  background: #e5e7eb;
541
568
  }
package/styles/material-dark.css CHANGED
@@ -503,14 +503,17 @@
503
503
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
504
504
  }
505
505
  .e-ie-straighten-value-span,
506
- .e-ie-straighten-span {
507
- font-size: 14px;
506
+ .e-ie-straighten-span,
507
+ .e-ie-toolbar-straighten {
508
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
508
509
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
509
510
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
510
511
  }
511
512
 
512
513
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
513
514
  height: auto;
515
+ margin-left: 8px;
516
+ padding-right: 2px;
514
517
  }
515
518
 
516
519
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -523,7 +526,27 @@
523
526
  }
524
527
 
525
528
  .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
526
- top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
529
+ top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
530
+ }
531
+
532
+ .e-ie-finetune-value-span {
533
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
534
+ }
535
+
536
+ .e-ie-finetune-slider-label {
537
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
538
+ }
539
+
540
+ .e-ie-finetune-slider-wrap {
541
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
542
+ }
543
+
544
+ .e-transparency-slider-wrap {
545
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
546
+ }
547
+
548
+ .e-ie-slider-wrap {
549
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
527
550
  }
528
551
 
529
552
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -539,6 +562,10 @@
539
562
  background: none !important; /* stylelint-disable-line declaration-no-important */
540
563
  }
541
564
 
565
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
566
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
567
+ }
568
+
542
569
  .e-image-editor {
543
570
  background: #292929;
544
571
  }
package/styles/material.css CHANGED
@@ -508,14 +508,17 @@
508
508
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
509
509
  }
510
510
  .e-ie-straighten-value-span,
511
- .e-ie-straighten-span {
512
- font-size: 14px;
511
+ .e-ie-straighten-span,
512
+ .e-ie-toolbar-straighten {
513
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
513
514
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
514
515
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
515
516
  }
516
517
 
517
518
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
518
519
  height: auto;
520
+ margin-left: 8px;
521
+ padding-right: 2px;
519
522
  }
520
523
 
521
524
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -528,7 +531,27 @@
528
531
  }
529
532
 
530
533
  .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
531
- top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
534
+ top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-ie-finetune-value-span {
538
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-ie-finetune-slider-label {
542
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-finetune-slider-wrap {
546
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
547
+ }
548
+
549
+ .e-transparency-slider-wrap {
550
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
551
+ }
552
+
553
+ .e-ie-slider-wrap {
554
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
532
555
  }
533
556
 
534
557
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
@@ -544,6 +567,10 @@
544
567
  background: none !important; /* stylelint-disable-line declaration-no-important */
545
568
  }
546
569
 
570
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
571
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
572
+ }
573
+
547
574
  .e-image-editor {
548
575
  background: #eee;
549
576
  }
package/styles/material3-dark.css CHANGED
@@ -567,8 +567,9 @@
567
567
  }
568
568
 
569
569
  .e-ie-straighten-value-span,
570
- .e-ie-straighten-span {
571
- font-size: 14px;
570
+ .e-ie-straighten-span,
571
+ .e-ie-toolbar-straighten {
572
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
572
573
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
573
574
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
574
575
  }
@@ -594,6 +595,26 @@
594
595
  width: 16px !important; /* stylelint-disable-line declaration-no-important */
595
596
  }
596
597
 
598
+ .e-ie-finetune-value-span {
599
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
600
+ }
601
+
602
+ .e-ie-finetune-slider-label {
603
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
604
+ }
605
+
606
+ .e-ie-finetune-slider-wrap {
607
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
608
+ }
609
+
610
+ .e-transparency-slider-wrap {
611
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
612
+ }
613
+
614
+ .e-ie-slider-wrap {
615
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
616
+ }
617
+
597
618
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
598
619
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
599
620
  width: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -609,6 +630,10 @@
609
630
  background: none !important; /* stylelint-disable-line declaration-no-important */
610
631
  }
611
632
 
633
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
634
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
635
+ }
636
+
612
637
  .e-image-editor {
613
638
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
614
639
  }
package/styles/material3.css CHANGED
@@ -623,8 +623,9 @@
623
623
  }
624
624
 
625
625
  .e-ie-straighten-value-span,
626
- .e-ie-straighten-span {
627
- font-size: 14px;
626
+ .e-ie-straighten-span,
627
+ .e-ie-toolbar-straighten {
628
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
628
629
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
629
630
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
630
631
  }
@@ -650,6 +651,26 @@
650
651
  width: 16px !important; /* stylelint-disable-line declaration-no-important */
651
652
  }
652
653
 
654
+ .e-ie-finetune-value-span {
655
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
656
+ }
657
+
658
+ .e-ie-finetune-slider-label {
659
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
660
+ }
661
+
662
+ .e-ie-finetune-slider-wrap {
663
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
664
+ }
665
+
666
+ .e-transparency-slider-wrap {
667
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
668
+ }
669
+
670
+ .e-ie-slider-wrap {
671
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
672
+ }
673
+
653
674
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
654
675
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
655
676
  width: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -665,6 +686,10 @@
665
686
  background: none !important; /* stylelint-disable-line declaration-no-important */
666
687
  }
667
688
 
689
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
690
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
691
+ }
692
+
668
693
  .e-image-editor {
669
694
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
670
695
  }
package/styles/tailwind-dark.css CHANGED
@@ -500,14 +500,17 @@
500
500
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
501
501
  }
502
502
  .e-ie-straighten-value-span,
503
- .e-ie-straighten-span {
504
- font-size: 14px;
503
+ .e-ie-straighten-span,
504
+ .e-ie-toolbar-straighten {
505
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
505
506
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
506
507
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
507
508
  }
508
509
 
509
510
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
510
511
  height: auto;
512
+ margin-left: 8px;
513
+ padding-right: 2px;
511
514
  }
512
515
 
513
516
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -523,6 +526,26 @@
523
526
  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
524
527
  }
525
528
 
529
+ .e-ie-finetune-value-span {
530
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-label {
534
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-ie-finetune-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-transparency-slider-wrap {
542
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-slider-wrap {
546
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
547
+ }
548
+
526
549
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
527
550
  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
528
551
  }
@@ -536,6 +559,10 @@
536
559
  background: none !important; /* stylelint-disable-line declaration-no-important */
537
560
  }
538
561
 
562
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
563
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
564
+ }
565
+
539
566
  .e-image-editor {
540
567
  background: #4b5563;
541
568
  }
package/styles/tailwind.css CHANGED
@@ -500,14 +500,17 @@
500
500
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
501
501
  }
502
502
  .e-ie-straighten-value-span,
503
- .e-ie-straighten-span {
504
- font-size: 14px;
503
+ .e-ie-straighten-span,
504
+ .e-ie-toolbar-straighten {
505
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
505
506
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
506
507
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
507
508
  }
508
509
 
509
510
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
510
511
  height: auto;
512
+ margin-left: 8px;
513
+ padding-right: 2px;
511
514
  }
512
515
 
513
516
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -523,6 +526,26 @@
523
526
  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
524
527
  }
525
528
 
529
+ .e-ie-finetune-value-span {
530
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-label {
534
+ top: 28% !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-ie-finetune-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-transparency-slider-wrap {
542
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-slider-wrap {
546
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
547
+ }
548
+
526
549
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
527
550
  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
528
551
  }
@@ -536,6 +559,10 @@
536
559
  background: none !important; /* stylelint-disable-line declaration-no-important */
537
560
  }
538
561
 
562
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
563
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
564
+ }
565
+
539
566
  .e-image-editor {
540
567
  background: #e5e7eb;
541
568
  }