@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
@@ -494,14 +494,17 @@
494
494
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
495
495
  }
496
496
  .e-ie-straighten-value-span,
497
- .e-ie-straighten-span {
498
- font-size: 14px;
497
+ .e-ie-straighten-span,
498
+ .e-ie-toolbar-straighten {
499
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
499
500
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
500
501
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
501
502
  }
502
503
 
503
504
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
504
505
  height: auto;
506
+ margin-left: 8px;
507
+ padding-right: 2px;
505
508
  }
506
509
 
507
510
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -517,6 +520,26 @@
517
520
  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
518
521
  }
519
522
 
523
+ .e-ie-finetune-value-span {
524
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
525
+ }
526
+
527
+ .e-ie-finetune-slider-label {
528
+ top: 31% !important; /* stylelint-disable-line declaration-no-important */
529
+ }
530
+
531
+ .e-ie-finetune-slider-wrap {
532
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
533
+ }
534
+
535
+ .e-transparency-slider-wrap {
536
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
537
+ }
538
+
539
+ .e-ie-slider-wrap {
540
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
541
+ }
542
+
520
543
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
521
544
  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
522
545
  }
@@ -530,6 +553,10 @@
530
553
  background: none !important; /* stylelint-disable-line declaration-no-important */
531
554
  }
532
555
 
556
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
557
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
558
+ }
559
+
533
560
  .e-image-editor {
534
561
  background: #e9ecef;
535
562
  }
@@ -512,14 +512,17 @@
512
512
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
513
513
  }
514
514
  .e-ie-straighten-value-span,
515
- .e-ie-straighten-span {
516
- font-size: 14px;
515
+ .e-ie-straighten-span,
516
+ .e-ie-toolbar-straighten {
517
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
517
518
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
518
519
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
519
520
  }
520
521
 
521
522
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
522
523
  height: auto;
524
+ margin-left: 8px;
525
+ padding-right: 2px;
523
526
  }
524
527
 
525
528
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -535,6 +538,26 @@
535
538
  top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
536
539
  }
537
540
 
541
+ .e-ie-finetune-value-span {
542
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-finetune-slider-label {
546
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
547
+ }
548
+
549
+ .e-ie-finetune-slider-wrap {
550
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
551
+ }
552
+
553
+ .e-transparency-slider-wrap {
554
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
555
+ }
556
+
557
+ .e-ie-slider-wrap {
558
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
559
+ }
560
+
538
561
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
539
562
  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
540
563
  }
@@ -548,6 +571,10 @@
548
571
  background: none !important; /* stylelint-disable-line declaration-no-important */
549
572
  }
550
573
 
574
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
575
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
576
+ }
577
+
551
578
  .e-image-editor {
552
579
  background: #444c54;
553
580
  }
@@ -512,14 +512,17 @@
512
512
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
513
513
  }
514
514
  .e-ie-straighten-value-span,
515
- .e-ie-straighten-span {
516
- font-size: 14px;
515
+ .e-ie-straighten-span,
516
+ .e-ie-toolbar-straighten {
517
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
517
518
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
518
519
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
519
520
  }
520
521
 
521
522
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
522
523
  height: auto;
524
+ margin-left: 8px;
525
+ padding-right: 2px;
523
526
  }
524
527
 
525
528
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -535,6 +538,26 @@
535
538
  top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
536
539
  }
537
540
 
541
+ .e-ie-finetune-value-span {
542
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
545
+ .e-ie-finetune-slider-label {
546
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
547
+ }
548
+
549
+ .e-ie-finetune-slider-wrap {
550
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
551
+ }
552
+
553
+ .e-transparency-slider-wrap {
554
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
555
+ }
556
+
557
+ .e-ie-slider-wrap {
558
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
559
+ }
560
+
538
561
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
539
562
  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
540
563
  }
@@ -548,6 +571,10 @@
548
571
  background: none !important; /* stylelint-disable-line declaration-no-important */
549
572
  }
550
573
 
574
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
575
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
576
+ }
577
+
551
578
  .e-image-editor {
552
579
  background: #dee2e6;
553
580
  }
@@ -496,14 +496,17 @@
496
496
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
497
497
  }
498
498
  .e-ie-straighten-value-span,
499
- .e-ie-straighten-span {
500
- font-size: 14px;
499
+ .e-ie-straighten-span,
500
+ .e-ie-toolbar-straighten {
501
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
501
502
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
502
503
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
503
504
  }
504
505
 
505
506
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
506
507
  height: auto;
508
+ margin-left: 8px;
509
+ padding-right: 2px;
507
510
  }
508
511
 
509
512
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -519,6 +522,26 @@
519
522
  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
520
523
  }
521
524
 
525
+ .e-ie-finetune-value-span {
526
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
527
+ }
528
+
529
+ .e-ie-finetune-slider-label {
530
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-wrap {
534
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-transparency-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-ie-slider-wrap {
542
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
522
545
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
523
546
  top: calc(50% - 9px) !important; /* stylelint-disable-line declaration-no-important */
524
547
  }
@@ -532,6 +555,10 @@
532
555
  background: none !important; /* stylelint-disable-line declaration-no-important */
533
556
  }
534
557
 
558
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
559
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
560
+ }
561
+
535
562
  .e-image-editor {
536
563
  background: #201f1f;
537
564
  }
@@ -496,14 +496,17 @@
496
496
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
497
497
  }
498
498
  .e-ie-straighten-value-span,
499
- .e-ie-straighten-span {
500
- font-size: 14px;
499
+ .e-ie-straighten-span,
500
+ .e-ie-toolbar-straighten {
501
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
501
502
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
502
503
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
503
504
  }
504
505
 
505
506
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
506
507
  height: auto;
508
+ margin-left: 8px;
509
+ padding-right: 2px;
507
510
  }
508
511
 
509
512
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -519,6 +522,26 @@
519
522
  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
520
523
  }
521
524
 
525
+ .e-ie-finetune-value-span {
526
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
527
+ }
528
+
529
+ .e-ie-finetune-slider-label {
530
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
531
+ }
532
+
533
+ .e-ie-finetune-slider-wrap {
534
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
535
+ }
536
+
537
+ .e-transparency-slider-wrap {
538
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
539
+ }
540
+
541
+ .e-ie-slider-wrap {
542
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
543
+ }
544
+
522
545
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
523
546
  top: calc(50% - 9px) !important; /* stylelint-disable-line declaration-no-important */
524
547
  }
@@ -532,6 +555,10 @@
532
555
  background: none !important; /* stylelint-disable-line declaration-no-important */
533
556
  }
534
557
 
558
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
559
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
560
+ }
561
+
535
562
  .e-image-editor {
536
563
  background: #fff;
537
564
  }
@@ -507,14 +507,17 @@
507
507
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
508
508
  }
509
509
  .e-ie-straighten-value-span,
510
- .e-ie-straighten-span {
511
- font-size: 14px;
510
+ .e-ie-straighten-span,
511
+ .e-ie-toolbar-straighten {
512
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
512
513
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
513
514
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
514
515
  }
515
516
 
516
517
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
517
518
  height: auto;
519
+ margin-left: 8px;
520
+ padding-right: 2px;
518
521
  }
519
522
 
520
523
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -530,6 +533,26 @@
530
533
  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
531
534
  }
532
535
 
536
+ .e-ie-finetune-value-span {
537
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
538
+ }
539
+
540
+ .e-ie-finetune-slider-label {
541
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
542
+ }
543
+
544
+ .e-ie-finetune-slider-wrap {
545
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
546
+ }
547
+
548
+ .e-transparency-slider-wrap {
549
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
550
+ }
551
+
552
+ .e-ie-slider-wrap {
553
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
554
+ }
555
+
533
556
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
534
557
  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
535
558
  }
@@ -543,6 +566,10 @@
543
566
  background: none !important; /* stylelint-disable-line declaration-no-important */
544
567
  }
545
568
 
569
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
570
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
571
+ }
572
+
546
573
  .e-image-editor {
547
574
  background: #201f1e;
548
575
  }
@@ -507,14 +507,17 @@
507
507
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
508
508
  }
509
509
  .e-ie-straighten-value-span,
510
- .e-ie-straighten-span {
511
- font-size: 14px;
510
+ .e-ie-straighten-span,
511
+ .e-ie-toolbar-straighten {
512
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
512
513
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
513
514
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
514
515
  }
515
516
 
516
517
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
517
518
  height: auto;
519
+ margin-left: 8px;
520
+ padding-right: 2px;
518
521
  }
519
522
 
520
523
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -530,6 +533,26 @@
530
533
  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
531
534
  }
532
535
 
536
+ .e-ie-finetune-value-span {
537
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
538
+ }
539
+
540
+ .e-ie-finetune-slider-label {
541
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
542
+ }
543
+
544
+ .e-ie-finetune-slider-wrap {
545
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
546
+ }
547
+
548
+ .e-transparency-slider-wrap {
549
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
550
+ }
551
+
552
+ .e-ie-slider-wrap {
553
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
554
+ }
555
+
533
556
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
534
557
  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
535
558
  }
@@ -543,6 +566,10 @@
543
566
  background: none !important; /* stylelint-disable-line declaration-no-important */
544
567
  }
545
568
 
569
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
570
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
571
+ }
572
+
546
573
  .e-image-editor {
547
574
  background: #faf9f8;
548
575
  }
@@ -494,14 +494,17 @@
494
494
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
495
495
  }
496
496
  .e-ie-straighten-value-span,
497
- .e-ie-straighten-span {
498
- font-size: 14px;
497
+ .e-ie-straighten-span,
498
+ .e-ie-toolbar-straighten {
499
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
499
500
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
500
501
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
501
502
  }
502
503
 
503
504
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
504
505
  height: auto;
506
+ margin-left: 8px;
507
+ padding-right: 2px;
505
508
  }
506
509
 
507
510
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -517,6 +520,26 @@
517
520
  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
518
521
  }
519
522
 
523
+ .e-ie-finetune-value-span {
524
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
525
+ }
526
+
527
+ .e-ie-finetune-slider-label {
528
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
529
+ }
530
+
531
+ .e-ie-finetune-slider-wrap {
532
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
533
+ }
534
+
535
+ .e-transparency-slider-wrap {
536
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
537
+ }
538
+
539
+ .e-ie-slider-wrap {
540
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
541
+ }
542
+
520
543
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
521
544
  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
522
545
  }
@@ -530,6 +553,10 @@
530
553
  background: none !important; /* stylelint-disable-line declaration-no-important */
531
554
  }
532
555
 
556
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
557
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
558
+ }
559
+
533
560
  .e-image-editor {
534
561
  background: #fff;
535
562
  }
@@ -498,14 +498,17 @@
498
498
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
499
499
  }
500
500
  .e-ie-straighten-value-span,
501
- .e-ie-straighten-span {
502
- font-size: 14px;
501
+ .e-ie-straighten-span,
502
+ .e-ie-toolbar-straighten {
503
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
503
504
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
504
505
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
505
506
  }
506
507
 
507
508
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
508
509
  height: auto;
510
+ margin-left: 8px;
511
+ padding-right: 2px;
509
512
  }
510
513
 
511
514
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -521,6 +524,26 @@
521
524
  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
522
525
  }
523
526
 
527
+ .e-ie-finetune-value-span {
528
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
529
+ }
530
+
531
+ .e-ie-finetune-slider-label {
532
+ top: 29% !important; /* stylelint-disable-line declaration-no-important */
533
+ }
534
+
535
+ .e-ie-finetune-slider-wrap {
536
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
537
+ }
538
+
539
+ .e-transparency-slider-wrap {
540
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
541
+ }
542
+
543
+ .e-ie-slider-wrap {
544
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
545
+ }
546
+
524
547
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
525
548
  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
526
549
  }
@@ -534,6 +557,10 @@
534
557
  background: none !important; /* stylelint-disable-line declaration-no-important */
535
558
  }
536
559
 
560
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
561
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
562
+ }
563
+
537
564
  .e-image-editor {
538
565
  background: #000;
539
566
  }
@@ -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
  }
@@ -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
  }
@@ -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
  }