@syncfusion/ej2-pdfviewer 17.3.58-4568 → 17.3.59-4568

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 (71) hide show
  1. package/dist/ej2-pdfviewer.umd.min.js +1 -1
  2. package/dist/ej2-pdfviewer.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-pdfviewer.es2015.js +38 -42
  4. package/dist/es6/ej2-pdfviewer.es2015.js.map +1 -1
  5. package/dist/es6/ej2-pdfviewer.es5.js +38 -42
  6. package/dist/es6/ej2-pdfviewer.es5.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/pdfviewer/annotation/annotation.js +3 -0
  9. package/src/pdfviewer/base/pdfviewer-base.d.ts +2 -0
  10. package/src/pdfviewer/base/pdfviewer-base.js +33 -10
  11. package/src/pdfviewer/magnification/magnification.d.ts +0 -1
  12. package/src/pdfviewer/magnification/magnification.js +2 -32
  13. package/styles/bootstrap-dark.css +10 -6
  14. package/styles/bootstrap-dark.scss +4 -1
  15. package/styles/bootstrap.css +10 -6
  16. package/styles/bootstrap.scss +4 -1
  17. package/styles/bootstrap4.css +10 -6
  18. package/styles/bootstrap4.scss +4 -1
  19. package/styles/bootstrap5-dark.css +15 -8
  20. package/styles/bootstrap5-dark.scss +4 -1
  21. package/styles/bootstrap5.css +15 -8
  22. package/styles/bootstrap5.scss +4 -1
  23. package/styles/fabric-dark.css +10 -6
  24. package/styles/fabric-dark.scss +4 -1
  25. package/styles/fabric.css +10 -6
  26. package/styles/fabric.scss +4 -1
  27. package/styles/fluent-dark.css +10 -6
  28. package/styles/fluent-dark.scss +4 -1
  29. package/styles/fluent.css +10 -6
  30. package/styles/fluent.scss +4 -1
  31. package/styles/fluent2.css +4876 -0
  32. package/styles/fluent2.scss +4 -0
  33. package/styles/highcontrast-light.css +10 -6
  34. package/styles/highcontrast-light.scss +4 -1
  35. package/styles/highcontrast.css +10 -6
  36. package/styles/highcontrast.scss +4 -1
  37. package/styles/material-dark.css +10 -6
  38. package/styles/material-dark.scss +4 -1
  39. package/styles/material.css +10 -6
  40. package/styles/material.scss +4 -1
  41. package/styles/material3-dark.css +12 -9
  42. package/styles/material3-dark.scss +4 -1
  43. package/styles/material3.css +12 -9
  44. package/styles/material3.scss +4 -1
  45. package/styles/pdfviewer/_fluent2-definition.scss +40 -39
  46. package/styles/pdfviewer/_theme.scss +428 -28
  47. package/styles/pdfviewer/bootstrap-dark.css +10 -6
  48. package/styles/pdfviewer/bootstrap.css +10 -6
  49. package/styles/pdfviewer/bootstrap4.css +10 -6
  50. package/styles/pdfviewer/bootstrap5-dark.css +15 -8
  51. package/styles/pdfviewer/bootstrap5.css +15 -8
  52. package/styles/pdfviewer/fabric-dark.css +10 -6
  53. package/styles/pdfviewer/fabric.css +10 -6
  54. package/styles/pdfviewer/fluent-dark.css +10 -6
  55. package/styles/pdfviewer/fluent.css +10 -6
  56. package/styles/pdfviewer/fluent2.css +4876 -0
  57. package/styles/pdfviewer/fluent2.scss +4 -0
  58. package/styles/pdfviewer/highcontrast-light.css +10 -6
  59. package/styles/pdfviewer/highcontrast.css +10 -6
  60. package/styles/pdfviewer/icons/_bootstrap5.scss +0 -2
  61. package/styles/pdfviewer/icons/_fluent2.scss +510 -0
  62. package/styles/pdfviewer/material-dark.css +10 -6
  63. package/styles/pdfviewer/material.css +10 -6
  64. package/styles/pdfviewer/material3-dark.css +12 -9
  65. package/styles/pdfviewer/material3.css +12 -9
  66. package/styles/pdfviewer/tailwind-dark.css +10 -6
  67. package/styles/pdfviewer/tailwind.css +10 -6
  68. package/styles/tailwind-dark.css +10 -6
  69. package/styles/tailwind-dark.scss +4 -1
  70. package/styles/tailwind.css +10 -6
  71. package/styles/tailwind.scss +4 -1
@@ -140,6 +140,30 @@ $lg-desktop: 1399.98;
140
140
  }
141
141
  }
142
142
 
143
+ .e-bigger .e-pv-mobile-annotation-toolbar .e-pv-tbar-btn {
144
+ @if $theme-name=='fluent2' {
145
+ margin-left: 8px !important;/* stylelint-disable-line declaration-no-important */
146
+ }
147
+ }
148
+
149
+ .e-bigger .e-pv-mobile-annotation-toolbar .e-toolbar-item {
150
+ @if $theme-name=='fluent2' {
151
+ padding: 4px !important;/* stylelint-disable-line declaration-no-important */
152
+ }
153
+ }
154
+
155
+ .e-dropdown-popup.e-lib.e-popup.e-control.e-pv-handwritten-popup.e-popup-open ul .e-primary{
156
+ @if $theme-name == 'fluent2' {
157
+ padding: 0 16px;
158
+ }
159
+ }
160
+
161
+ .e-pv-handwritten-popup ul .e-item {
162
+ @if $theme-name=='fluent2' {
163
+ padding: 2px !important;/* stylelint-disable-line declaration-no-important */
164
+ }
165
+ }
166
+
143
167
  .e-pv-mobilescroll-container {
144
168
  @if $skin-name == 'Material3' {
145
169
  background: $pv-background;
@@ -168,6 +192,19 @@ $lg-desktop: 1399.98;
168
192
  box-shadow: $pv-page-div-focus-style;
169
193
  }
170
194
 
195
+ .e-pv-diagram-resize-handle{
196
+ @if $theme-name == 'fluent2' {
197
+ fill: $pv-selection-touch-element-background-color !important/* stylelint-disable-line declaration-no-important */
198
+ }
199
+ }
200
+
201
+ .e-pv-diagram-border,
202
+ .e-pv-diagram-resize-handle {
203
+ @if $theme-name=='fluent2' {
204
+ stroke: $pv-selection-touch-element-background-color !important;/* stylelint-disable-line declaration-no-important */
205
+ }
206
+ }
207
+
171
208
  .e-pv-viewer-container.e-focused
172
209
  {
173
210
  box-shadow: $pv-page-div-focus-style inset;
@@ -209,6 +246,18 @@ $lg-desktop: 1399.98;
209
246
  width: $pv-zoom-dropdown-width;
210
247
  }
211
248
 
249
+ .e-pv-zoom-drop-down-container .e-control.e-combobox{
250
+ @if $theme-name == 'fluent2' {
251
+ padding-left: 11px !important;/* stylelint-disable-line declaration-no-important */
252
+ }
253
+ }
254
+
255
+ .e-toolbar.e-pv-toolbar .e-pv-zoom-drop-down-container .e-control-container {
256
+ @if $theme-name == 'fluent2' {
257
+ width: 86px !important;/* stylelint-disable-line declaration-no-important */
258
+ }
259
+ }
260
+
212
261
  .e-toolbar.e-pv-toolbar .e-toolbar-pop .e-pv-zoom-drop-down-container {
213
262
  display: block;
214
263
  padding-left: 10px;
@@ -396,12 +445,18 @@ $lg-desktop: 1399.98;
396
445
  }
397
446
  }
398
447
 
448
+ .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item {
449
+ @if $theme-name == 'fluent2'{
450
+ padding-top: 2px;
451
+ }
452
+ }
453
+
399
454
  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
400
455
  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
401
- @if $skin-name == 'FluentUI' {
456
+ @if ($skin-name == 'FluentUI') {
402
457
  padding-bottom: 2px;
403
458
  }
404
- @else if $skin-name == 'Material3' {
459
+ @else if $skin-name == 'Material3'{
405
460
  padding: 0 !important;/* stylelint-disable-line declaration-no-important */
406
461
  }
407
462
  @else {
@@ -556,9 +611,18 @@ $lg-desktop: 1399.98;
556
611
  @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
557
612
  padding-top: 0;
558
613
  }
614
+ @if $theme-name == 'fluent2'{
615
+ font-size: $pv-toolbar-total-page-number-font-size !important;/* stylelint-disable-line declaration-no-important */
616
+ }
559
617
  position: relative;
560
618
  }
561
619
 
620
+ .e-pv-match-case-container span:not(.e-label):not(.e-icons) {
621
+ @if $theme-name == 'fluent2' {
622
+ margin-top: -5px;
623
+ }
624
+ }
625
+
562
626
  .e-pv-total-page {
563
627
  color: $pv-toolbar-total-page-font-color;
564
628
  font-size: inherit;
@@ -586,6 +650,19 @@ $lg-desktop: 1399.98;
586
650
  padding: $pv-toolbar-zoom-drop-down-padding;
587
651
  }
588
652
 
653
+ .e-pv-fontfamily-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input{
654
+ width: $pv-thumbnail-width;
655
+ @if $theme-name == 'fluent2' {
656
+ height: $pv-annotation-drop-down-height;
657
+ }
658
+ }
659
+
660
+ .e-pv-fontsize-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input {
661
+ @if $theme-name == 'fluent2' {
662
+ height: $pv-annotation-drop-down-height;
663
+ }
664
+ }
665
+
589
666
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
590
667
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
591
668
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
@@ -685,14 +762,20 @@ $lg-desktop: 1399.98;
685
762
  }
686
763
 
687
764
  .e-input-group.e-control-wrapper.e-pv-current-page-box:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
688
- @if $skin-name == 'Material3' {
765
+ @if $skin-name=='Material3' {
689
766
  border-bottom: $pv-current-page-border;
690
767
  }
768
+
769
+ @else if $theme-name=='fluent2' {
770
+ border: $pv-current-page-border;
771
+ border-bottom: $pv-current-page-border-bottom;
772
+ }
773
+
691
774
  @else {
692
775
  border: $pv-current-page-border;
693
776
  }
694
777
  border-radius: $pv-current-page-border-radius;
695
- @if $skin-name == 'bootstrap5' {
778
+ @if $skin-name=='bootstrap5' {
696
779
  box-shadow: none;
697
780
  }
698
781
  }
@@ -755,6 +838,12 @@ $lg-desktop: 1399.98;
755
838
  border-top: $pv-corrupted-dialog-footer-border-top;
756
839
  }
757
840
 
841
+ .e-pv-notification-large-content.e-dialog .e-footer-content{
842
+ @if $theme-name == 'fluent2' {
843
+ padding-top: 8px !important;/* stylelint-disable-line declaration-no-important */
844
+ }
845
+ }
846
+
758
847
  .e-pv-corrupted-popup.e-dialog .e-dlg-content {
759
848
  @if $skin-name != 'Material3' {
760
849
  padding-bottom: $pv-corrupted-dialog-pop-content-padding-bottom;
@@ -961,6 +1050,9 @@ $lg-desktop: 1399.98;
961
1050
  @if $skin-name == 'FluentUI' {
962
1051
  padding: 8px;
963
1052
  }
1053
+ @if $theme-name == 'fluent2' {
1054
+ margin-top: 10px;
1055
+ }
964
1056
  }
965
1057
 
966
1058
  .e-bigger .e-pv-sidebar-title {
@@ -992,7 +1084,12 @@ $lg-desktop: 1399.98;
992
1084
  }
993
1085
 
994
1086
  .e-pv-sidebar-toolbar {
995
- background: $pv-sidebar-toolbar-background;
1087
+ @if $theme-name == 'fluent2' {
1088
+ background: $pv-sidebar-title-container-background;
1089
+ }
1090
+ @else{
1091
+ background: $pv-sidebar-toolbar-background;
1092
+ }
996
1093
  border: $pv-sidebar-toolbar-border;
997
1094
  border-width: $pv-sidebar-toolbar-border-width;
998
1095
  bottom: $pv-sidebar-toolbar-bottom;
@@ -1175,6 +1272,12 @@ $lg-desktop: 1399.98;
1175
1272
  top: calc(-100% - 12px + ($pv-organize-anchor-node-border-width / 2));
1176
1273
  }
1177
1274
 
1275
+ .e-pv-organize-buttondiv .e-pv-icon {
1276
+ @if $theme-name=='fluent2' {
1277
+ font-weight: normal;
1278
+ }
1279
+ }
1280
+
1178
1281
  .e-pv-organize-anchor-node.e-pv-organize-node-selection-ring {
1179
1282
  border: $pv-organize-page-select-border;
1180
1283
  border-radius: 2px;
@@ -1961,6 +2064,9 @@ $lg-desktop: 1399.98;
1961
2064
  padding: 16px;
1962
2065
  width: 368px;
1963
2066
  }
2067
+ @if $theme-name == 'fluent2' {
2068
+ width: 368px;
2069
+ }
1964
2070
  }
1965
2071
 
1966
2072
  .e-pv-search-input {
@@ -1968,6 +2074,18 @@ $lg-desktop: 1399.98;
1968
2074
  width: $pv-search-input-width;
1969
2075
  }
1970
2076
 
2077
+ .e-bigger .e-input-group.e-pv-search-input-mobile .e-input {
2078
+ @if $theme-name == 'fluent2' {
2079
+ height: 28px;
2080
+ }
2081
+ }
2082
+
2083
+ .e-bigger .e-input-group.e-pv-search-input .e-input {
2084
+ @if $theme-name == 'fluent2' {
2085
+ height: 28px;
2086
+ }
2087
+ }
2088
+
1971
2089
  .e-bigger .e-pv-search-input {
1972
2090
  @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
1973
2091
  height: $pv-search-input-height-big;
@@ -1990,7 +2108,7 @@ $lg-desktop: 1399.98;
1990
2108
 
1991
2109
  .e-pv-search-btn.e-btn {
1992
2110
  background-color: transparent;
1993
- @if $skin-name == 'bootstrap4' {
2111
+ @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
1994
2112
  color: $pv-icon-color;
1995
2113
  }
1996
2114
  border: 0;
@@ -1998,7 +2116,7 @@ $lg-desktop: 1399.98;
1998
2116
  height: $pv-search-btn-height;
1999
2117
  margin-top: $pv-search-btn-margin-top;
2000
2118
  width: $pv-search-btn-width;
2001
- @if $skin-name == 'FluentUI' {
2119
+ @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' or $theme-name == 'fluent2') {
2002
2120
  padding-bottom: 0;
2003
2121
  padding-left: 1px;
2004
2122
  padding-right: 1px;
@@ -2034,6 +2152,13 @@ $lg-desktop: 1399.98;
2034
2152
  }
2035
2153
  }
2036
2154
 
2155
+ .e-pv-search-btn.e-btn:hover,
2156
+ .e-pv-sidebar-toolbar .e-pv-tbar-btn:hover:not(:disabled) {
2157
+ @if $theme-name == 'fluent2' {
2158
+ background-color: var(--color-sf-secondary-bg-color-pressed);
2159
+ }
2160
+ }
2161
+
2037
2162
  .e-pv-search-btn.e-btn:disabled {
2038
2163
  @if $skin-name == 'bootstrap4' {
2039
2164
  color: $pv-thumbnail-icon-disable-color;
@@ -2047,7 +2172,7 @@ $lg-desktop: 1399.98;
2047
2172
  .e-pv-search-bar:not(.e-rtl) .e-pv-next-search {
2048
2173
  margin-left: $pv-search-next-margin-left;
2049
2174
  }
2050
-
2175
+
2051
2176
  .e-pv-search-bar.e-rtl .e-pv-prev-search {
2052
2177
  margin-right: $pv-search-prev-margin-left;
2053
2178
  }
@@ -2296,9 +2421,14 @@ $lg-desktop: 1399.98;
2296
2421
 
2297
2422
  .e-pv-organize-total-page-button {
2298
2423
  float: left;
2299
- font-size: 12;
2300
2424
  font-weight: normal;
2301
2425
  color: $pv-toolbar-total-page-number-color;
2426
+ @if $theme-name=='fluent2' {
2427
+ font-size: 16;
2428
+ }
2429
+ @else {
2430
+ font-size: 12;
2431
+ }
2302
2432
  }
2303
2433
 
2304
2434
  .e-pdfviewer .e-pv-organize-window .e-footer-content .e-btn.e-flat:disabled{
@@ -2507,6 +2637,26 @@ $lg-desktop: 1399.98;
2507
2637
  }
2508
2638
  }
2509
2639
 
2640
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item{
2641
+ @if ($theme-name == 'fluent2') {
2642
+ height: 32px;
2643
+ }
2644
+ }
2645
+
2646
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
2647
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
2648
+ @if ($theme-name == 'fluent2') {
2649
+ margin-top: -4px;
2650
+ }
2651
+ }
2652
+
2653
+ .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
2654
+ .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
2655
+ @if ($theme-name == 'fluent2') {
2656
+ line-height: 28px;
2657
+ }
2658
+ }
2659
+
2510
2660
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
2511
2661
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
2512
2662
  @if ($skin-name == 'bootstrap5') {
@@ -2601,6 +2751,10 @@ $lg-desktop: 1399.98;
2601
2751
  @if ($skin-name == 'Material3') {
2602
2752
  padding: 7px;
2603
2753
  }
2754
+ @if ($theme-name == 'fluent2') {
2755
+ width: 54px;
2756
+ padding: 4px;
2757
+ }
2604
2758
  }
2605
2759
 
2606
2760
  .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
@@ -2692,7 +2846,9 @@ $lg-desktop: 1399.98;
2692
2846
  .e-pv-scale-ratio-dest-unit .e-caret,
2693
2847
  .e-pv-depth-unit .e-caret {
2694
2848
  margin-left: $pv-scale-ratio-win-drop-down-caret-margin-left;
2695
- margin-top: $pv-scale-ratio-win-drop-down-caret-margin-top;
2849
+ @if $theme-name != 'fluent2' {
2850
+ margin-top: $pv-scale-ratio-win-drop-down-caret-margin-top;
2851
+ }
2696
2852
  }
2697
2853
 
2698
2854
  .e-bigger .e-pv-scale-ratio-src-unit .e-caret,
@@ -2715,7 +2871,6 @@ $lg-desktop: 1399.98;
2715
2871
  .e-pv-properties-line-stroke-color-label,
2716
2872
  .e-pv-properties-line-opacity-label,
2717
2873
  .e-pv-properties-line-leader-length-label {
2718
- margin-bottom: 8px;
2719
2874
  @if ($skin-name == 'FluentUI') {
2720
2875
  font-weight: 600;
2721
2876
  }
@@ -2726,6 +2881,13 @@ $lg-desktop: 1399.98;
2726
2881
  @else {
2727
2882
  font-size: 14px;
2728
2883
  }
2884
+ @if ($theme-name == 'fluent2') {
2885
+ margin-bottom: 4px;
2886
+ }
2887
+ @else
2888
+ {
2889
+ margin-bottom: 8px;
2890
+ }
2729
2891
  }
2730
2892
 
2731
2893
  .e-pv-properties-line-end-container,
@@ -2743,6 +2905,10 @@ $lg-desktop: 1399.98;
2743
2905
 
2744
2906
  .e-pv-properties-line-leader-length-container {
2745
2907
  margin-left: $pv-line-leader-length-margin-left;
2908
+ @if ($theme-name == 'fluent2') {
2909
+ margin-top: 10px;
2910
+ width: $pv-scale-ratio-container-max-width;
2911
+ }
2746
2912
  }
2747
2913
 
2748
2914
  .e-bigger .e-pv-properties-line-leader-length-container {
@@ -2786,6 +2952,9 @@ $lg-desktop: 1399.98;
2786
2952
  .e-pv-scale-ratio-dest-input,
2787
2953
  .e-pv-depth-input {
2788
2954
  max-width: $pv-scale-ratio-container-max-width;
2955
+ @if $theme-name == 'fluent2' {
2956
+ max-width: 176px;
2957
+ }
2789
2958
  }
2790
2959
 
2791
2960
  .e-bigger .e-pv-scale-ratio-src-input,
@@ -2794,6 +2963,9 @@ $lg-desktop: 1399.98;
2794
2963
  @if $skin-name == 'FluentUI' {
2795
2964
  max-width: 248px;
2796
2965
  }
2966
+ @if $theme-name == 'fluent2' {
2967
+ max-width: 200px;
2968
+ }
2797
2969
  }
2798
2970
 
2799
2971
  .e-pv-properties-line-start,
@@ -2918,6 +3090,9 @@ $lg-desktop: 1399.98;
2918
3090
  line-height: 0;
2919
3091
  padding: $pv-properties-line-style-padding;
2920
3092
  white-space: pre;
3093
+ @if ($theme-name =='fluent2'){
3094
+ padding-top: 11px;
3095
+ }
2921
3096
  }
2922
3097
 
2923
3098
  .e-pv-properties-line-start.e-btn .e-caret,
@@ -2925,6 +3100,9 @@ $lg-desktop: 1399.98;
2925
3100
  @if $skin-name == 'bootstrap4' {
2926
3101
  display: block;
2927
3102
  }
3103
+ @else if $theme-name == 'fluent2' {
3104
+ display: block;
3105
+ }
2928
3106
  @else {
2929
3107
  display: inline;
2930
3108
  }
@@ -2951,6 +3129,9 @@ $lg-desktop: 1399.98;
2951
3129
  width: 155px;
2952
3130
  padding-top: 6px;
2953
3131
  }
3132
+ @else if ($theme-name == 'fluent2'){
3133
+ width: 128px;
3134
+ }
2954
3135
  @else {
2955
3136
  width: 138px;
2956
3137
  }
@@ -3020,13 +3201,18 @@ $lg-desktop: 1399.98;
3020
3201
  .e-pv-annotation-shape-icon,
3021
3202
  .e-pv-annotation-calibrate-icon,
3022
3203
  .e-pv-handwritten-icon {
3023
- margin-right: 4px;
3204
+ @if $theme-name != 'fluent2' {
3205
+ margin-right: 4px;
3206
+ }
3024
3207
  }
3025
3208
 
3026
3209
  .e-pv-stamp-template-container .e-menu-item.e-menu-caret-icon {
3027
- @if $skin-name == 'bootstrap5' {
3210
+ @if ($skin-name == 'bootstrap5') {
3028
3211
  padding: 0 26px 0 8px;
3029
3212
  }
3213
+ @if $theme-name == 'fluent2'{
3214
+ padding: 0 26px 0 6px !important;/* stylelint-disable-line declaration-no-important */
3215
+ }
3030
3216
  }
3031
3217
 
3032
3218
  .e-pv-properties-opacity-indicator {
@@ -3151,6 +3337,31 @@ $lg-desktop: 1399.98;
3151
3337
  padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
3152
3338
  }
3153
3339
 
3340
+ .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
3341
+ .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
3342
+ @if $theme-name == 'fluent2' {
3343
+ padding: 12px 8px !important;/* stylelint-disable-line declaration-no-important */
3344
+ }
3345
+ }
3346
+
3347
+ .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
3348
+ @if $theme-name == 'fluent2' {
3349
+ padding: 8px !important;/* stylelint-disable-line declaration-no-important */
3350
+ }
3351
+ }
3352
+
3353
+ .e-pv-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center{
3354
+ @if $theme-name == 'fluent2' {
3355
+ margin-left: 710px !important;/* stylelint-disable-line declaration-no-important */
3356
+ }
3357
+ }
3358
+
3359
+ .e-bigger .e-pv-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center {
3360
+ @if $theme-name == 'fluent2' {
3361
+ margin-left: 109px !important;/* stylelint-disable-line declaration-no-important */
3362
+ }
3363
+ }
3364
+
3154
3365
  .e-pv-zoom-drop-down-container .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
3155
3366
  .e-pv-zoom-drop-down-container .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
3156
3367
  @if $skin-name == 'bootstrap4' {
@@ -3584,7 +3795,7 @@ $lg-desktop: 1399.98;
3584
3795
  font-size: 16px;
3585
3796
  font-weight: 500;
3586
3797
  }
3587
- @if $skin-name == 'FluentUI' {
3798
+ @if ($skin-name == 'FluentUI' or $theme-name == 'fluent2') {
3588
3799
  font-weight: $pv-comment-tile-font-weight;
3589
3800
  }
3590
3801
  @if $skin-name != 'Material3' {
@@ -3713,6 +3924,9 @@ $lg-desktop: 1399.98;
3713
3924
  @if $skin-name == 'FluentUI' {
3714
3925
  font-weight: $pv-comment-tile-font-weight;
3715
3926
  }
3927
+ @if $theme-name == 'fluent2' {
3928
+ font-weight: normal;
3929
+ }
3716
3930
  @if $skin-name == 'Material3' {
3717
3931
  font-size: $text-xs;
3718
3932
  padding-left: 40px;
@@ -3750,6 +3964,9 @@ $lg-desktop: 1399.98;
3750
3964
  @if $skin-name == 'Material3' {
3751
3965
  font-size: $text-xs;
3752
3966
  }
3967
+ @if $theme-name == 'fluent2' {
3968
+ font-weight: normal;
3969
+ }
3753
3970
  padding-left: 8px;
3754
3971
  padding-top: $pv-comment-title-padding-top;
3755
3972
  position: absolute;
@@ -3792,7 +4009,7 @@ $lg-desktop: 1399.98;
3792
4009
 
3793
4010
  .e-menu-wrapper.e-custom-scroll.e-lib.e-keyboard.e-pv-stamp {
3794
4011
  border: 0;
3795
- @if $skin-name == 'bootstrap5' {
4012
+ @if ($skin-name == 'bootstrap5' or $theme-name == 'fluent2') {
3796
4013
  background-color: $transparent;
3797
4014
  }
3798
4015
  @if $skin-name != 'Material3' {
@@ -3820,7 +4037,9 @@ $lg-desktop: 1399.98;
3820
4037
 
3821
4038
  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
3822
4039
  margin-top: $pv-stamp-icon-margin-top;
3823
- padding-left: 7px;
4040
+ @if $theme-name != 'fluent2'{
4041
+ padding-left: 7px;
4042
+ }
3824
4043
  @if $skin-name == 'fabric' {
3825
4044
  margin-top: -7px;
3826
4045
  padding-left: 10px;
@@ -3830,6 +4049,24 @@ $lg-desktop: 1399.98;
3830
4049
  }
3831
4050
  }
3832
4051
 
4052
+ .e-bigger .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
4053
+ @if $theme-name == 'fluent2'{
4054
+ margin-right: 30px !important;/* stylelint-disable-line declaration-no-important */
4055
+ }
4056
+ }
4057
+
4058
+ .e-bigger .e-pv-stamp.e-menu-wrapper ul .e-menu-item{
4059
+ @if $theme-name == 'fluent2'{
4060
+ padding: 0 8px;
4061
+ }
4062
+ }
4063
+
4064
+ .e-bigger .e-pv-annotation-thickness-container{
4065
+ @if $theme-name == 'fluent2'{
4066
+ padding-top: 7px !important;/* stylelint-disable-line declaration-no-important */
4067
+ }
4068
+ }
4069
+
3833
4070
  .e-pv-annotation-stamp-container .e-rtl.e-menu-wrapper ul .e-menu-item .e-menu-icon {
3834
4071
  @if $skin-name == 'bootstrap5' {
3835
4072
  margin-left: 1px;
@@ -3893,7 +4130,7 @@ $lg-desktop: 1399.98;
3893
4130
  .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,
3894
4131
  .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
3895
4132
  background: $pv-comment-panel-bg;
3896
- @if $skin-name != 'FluentUI' {
4133
+ @if ($skin-name != 'FluentUI' and $theme-name != 'fluent2') {
3897
4134
  border: 1px solid $pv-comment-panel-border-color;
3898
4135
  }
3899
4136
  @if $skin-name == 'Material3' {
@@ -3933,11 +4170,16 @@ $lg-desktop: 1399.98;
3933
4170
  }
3934
4171
 
3935
4172
  .e-pdfviewer .e-pv-signature-apperance .e-checkbox-wrapper {
3936
- margin-top: 10px;
3937
4173
  padding-bottom: $pv-signature-appearance-checkbox;
3938
4174
  @if $skin-name == 'Material3' {
3939
4175
  margin-top: 12px;
3940
4176
  }
4177
+ @else if $theme-name == 'fluent2' {
4178
+ margin-top: 26px;
4179
+ }
4180
+ @else{
4181
+ margin-top: 10px;
4182
+ }
3941
4183
  }
3942
4184
 
3943
4185
  .e-pdfviewer .e-pv-signature-window .e-footer-content {
@@ -3950,6 +4192,10 @@ $lg-desktop: 1399.98;
3950
4192
  height: 30px;
3951
4193
  min-height: 30px;
3952
4194
  }
4195
+ @if $theme-name == 'fluent2' {
4196
+ height: 32px;
4197
+ min-height: 32px;
4198
+ }
3953
4199
  }
3954
4200
  .e-pv-signature-dialog-height .e-pv-cancelbtn{
3955
4201
  @if $skin-name != 'Material3' {
@@ -3959,7 +4205,11 @@ $lg-desktop: 1399.98;
3959
4205
  }
3960
4206
 
3961
4207
  .e-pv-signature-dialog-height .e-pv-createbtn{
3962
- @if $skin-name != 'Material3' {
4208
+ @if $theme-name == 'fluent2' {
4209
+ height: 32px;
4210
+ min-height: 32px;
4211
+ }
4212
+ @else if $skin-name != 'Material3' {
3963
4213
  height: 30px;
3964
4214
  min-height: 30px;
3965
4215
  }
@@ -4057,16 +4307,25 @@ $lg-desktop: 1399.98;
4057
4307
  border-radius: 5px;
4058
4308
  display: inline-block;
4059
4309
  font-size: 13px;
4060
- height: 88px;
4061
- margin: 15px;
4062
4310
  padding-top: 40px;
4063
4311
  text-align: center;
4064
- width: 311px;
4065
4312
  word-wrap: break-word;
4066
4313
  @if $skin-name == 'FluentUI' {
4067
4314
  max-width: 300px;
4068
4315
  padding-top: 36px;
4069
4316
  }
4317
+ @if $theme-name=='fluent2' {
4318
+ height: 98px;
4319
+ width: 45% !important;/* stylelint-disable-line declaration-no-important */
4320
+ border: $pv-sidebar-toolbar-border;
4321
+ margin-left: 16px;
4322
+ margin-top: 17px;
4323
+ }
4324
+ @else{
4325
+ height: 88px;
4326
+ width: 311px;
4327
+ margin: 15px;
4328
+ }
4070
4329
  @if $skin-name == 'Material3' {
4071
4330
  border: 1px dashed rgba($primary);
4072
4331
  border-radius: 4px;
@@ -4077,6 +4336,18 @@ $lg-desktop: 1399.98;
4077
4336
  }
4078
4337
  }
4079
4338
 
4339
+ .e-pv-font-sign:active {
4340
+ @if $theme-name=='fluent2' {
4341
+ border: 1px solid rgba($primary) !important;/* stylelint-disable-line declaration-no-important */
4342
+ }
4343
+ }
4344
+
4345
+ .e-bigger .e-pv-font-sign{
4346
+ @if $theme-name=='fluent2' {
4347
+ width: 40% !important;/* stylelint-disable-line declaration-no-important */
4348
+ }
4349
+ }
4350
+
4080
4351
  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused {
4081
4352
  @if $skin-name == 'bootstrap5' {
4082
4353
  color: $white;
@@ -4182,6 +4453,13 @@ $lg-desktop: 1399.98;
4182
4453
  border-color: $pv-annotation-dropdown-border-color;
4183
4454
  }
4184
4455
 
4456
+ .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
4457
+ .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
4458
+ @if $theme-name == 'fluent2' {
4459
+ margin-top: -10px;
4460
+ }
4461
+ }
4462
+
4185
4463
  .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
4186
4464
  .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
4187
4465
  @if $skin-name == 'bootstrap4' {
@@ -4486,6 +4764,10 @@ $lg-desktop: 1399.98;
4486
4764
  padding: 0 11px;
4487
4765
  width: inherit;
4488
4766
  }
4767
+ @if ($theme-name=='fluent2') {
4768
+ width: 59px;
4769
+ border-radius: 4px;
4770
+ }
4489
4771
  @if ($skin-name == 'Material3') {
4490
4772
  align-content: center;
4491
4773
  align-items: center;
@@ -4536,6 +4818,13 @@ $lg-desktop: 1399.98;
4536
4818
  border-bottom: 1px solid $transparent;
4537
4819
  box-sizing: border-box;
4538
4820
  }
4821
+ @else if $theme-name == 'fluent2' {
4822
+ border-right-color: $transparent;
4823
+ height: 32px;
4824
+ border-bottom: 1px solid $transparent;
4825
+ box-sizing: border-box;
4826
+ padding: 0;
4827
+ }
4539
4828
  @else {
4540
4829
  border-right-color: $pv-comment-panel-bottom-color;
4541
4830
  border-right-style: solid;
@@ -4626,6 +4915,10 @@ $lg-desktop: 1399.98;
4626
4915
  @if ($skin-name == 'FluentUI') {
4627
4916
  height: auto;
4628
4917
  }
4918
+ @if ($theme-name == 'fluent2') {
4919
+ border-radius: 4px;
4920
+ width: 65px;
4921
+ }
4629
4922
  }
4630
4923
 
4631
4924
  .e-pv-properties-formfield-maxlength-text-label,
@@ -4673,6 +4966,19 @@ $lg-desktop: 1399.98;
4673
4966
  }
4674
4967
  }
4675
4968
 
4969
+ .e-pv-properties-form-field-window .e-dlg-content .e-tab-header {
4970
+ @if ($theme-name == 'fluent2') {
4971
+ width: $pv-properties-form-field-win-max-width !important;/* stylelint-disable-line declaration-no-important */
4972
+ margin-left: -20px !important;/* stylelint-disable-line declaration-no-important */
4973
+ }
4974
+ }
4975
+
4976
+ .e-pv-properties-form-field-window .e-dlg-content .e-tab-header .e-toolbar-items {
4977
+ @if ($theme-name == 'fluent2') {
4978
+ margin-left: 34px;
4979
+ }
4980
+ }
4981
+
4676
4982
  .e-pv-properties-formfield-textarea {
4677
4983
  @if $skin-name == 'FluentUI' {
4678
4984
  min-width: 318px;
@@ -4840,18 +5146,23 @@ $lg-desktop: 1399.98;
4840
5146
  vertical-align: top;
4841
5147
  white-space: nowrap;
4842
5148
  width: $pv-form-field-property-header-width;
4843
- @if $skin-name == 'Material3' {
5149
+ @if $skin-name=='Material3' {
4844
5150
  height: 20px;
4845
5151
  font-family: $font-family;
4846
5152
  }
5153
+ @if $theme-name=='fluent2' {
5154
+ height: 28px;
5155
+ font-family: $font-family;
5156
+ }
4847
5157
  }
4848
5158
 
4849
5159
  .e-pv-form-field-property-header-general {
4850
- @if $skin-name == 'FluentUI' {
5160
+ @if $skin-name=='FluentUI' {
4851
5161
  font-family: 'Segoe UI';
4852
5162
  height: 24px;
4853
5163
  }
4854
- @if $skin-name == 'Material3' {
5164
+
5165
+ @if ($skin-name=='Material3'or $theme-name == 'fluent2') {
4855
5166
  font-family: $font-family;
4856
5167
  }
4857
5168
  @else {
@@ -5039,6 +5350,9 @@ $lg-desktop: 1399.98;
5039
5350
  height: 12px;
5040
5351
  font-family: $font-family;
5041
5352
  }
5353
+ @if $theme-name == 'fluent2'{
5354
+ font-family: $font-family;
5355
+ }
5042
5356
  }
5043
5357
 
5044
5358
  .e-pv-formfield-maxlength .e-input-group.e-control-wrapper .e-input-group-icon {
@@ -5128,10 +5442,52 @@ $lg-desktop: 1399.98;
5128
5442
  }
5129
5443
  }
5130
5444
 
5445
+ .e-pv-signature-window {
5446
+ @if ($theme-name=='fluent2') {
5447
+ width: 655px !important;/* stylelint-disable-line declaration-no-important */
5448
+ height: 621px !important;/* stylelint-disable-line declaration-no-important */
5449
+ }
5450
+ }
5451
+
5452
+ .e-pv-signature-apperance .e-float-input.e-control-wrapper.e-input-group {
5453
+ @if ($theme-name =='fluent2') {
5454
+ margin-left: 5.4%;
5455
+ width: 91.45%;
5456
+ }
5457
+ }
5458
+
5459
+ .e-bigger .e-pv-signature-apperance .e-float-input.e-control-wrapper.e-input-group {
5460
+ @if ($theme-name=='fluent2') {
5461
+ width: 93%;
5462
+ }
5463
+ }
5464
+
5465
+ .e-pv-signature-apperance .e-checkbox-wrapper{
5466
+ @if ($theme-name == 'fluent2') {
5467
+ margin-left: $pv-toolbar-btn-height;
5468
+ }
5469
+ }
5470
+
5131
5471
  .e-pv-signature-window .e-dlg-content {
5132
- @if ($skin-name == 'highcontrast') {
5472
+ @if ($skin-name=='highcontrast') {
5133
5473
  padding: 16px;
5134
5474
  }
5475
+
5476
+ @if ($theme-name=='fluent2') {
5477
+ width: 100% !important;/* stylelint-disable-line declaration-no-important */
5478
+ padding-left: 0 !important;/* stylelint-disable-line declaration-no-important */
5479
+ }
5480
+ }
5481
+ .e-pv-signature-window .e-dlg-content .e-tab-header{
5482
+ @if ($theme-name == 'fluent2') {
5483
+ width: 655px !important; /* stylelint-disable-line declaration-no-important */
5484
+ }
5485
+ }
5486
+
5487
+ .e-pv-signature-window .e-dlg-content .e-tab-header .e-toolbar-items{
5488
+ @if ($theme-name == 'fluent2') {
5489
+ margin-left: 28px;
5490
+ }
5135
5491
  }
5136
5492
 
5137
5493
  .e-pv-signatureimage {
@@ -5214,15 +5570,59 @@ $lg-desktop: 1399.98;
5214
5570
 
5215
5571
  .e-pv-canvas-signature {
5216
5572
  width: $pv-canvas-sign-width;
5217
- @if $skin-name == 'FluentUI' {
5573
+
5574
+ @if $skin-name=='FluentUI'{
5218
5575
  max-width: $pv-canvas-sign-width;
5219
5576
  }
5220
- @if $skin-name == 'Material3' {
5577
+
5578
+ @if $theme-name =='fluent2' {
5579
+ width: 91.45%;
5580
+ max-width: 91.45%;
5581
+ height: 349px !important;/* stylelint-disable-line declaration-no-important */
5582
+ margin-left: 5.5%;
5583
+ margin-right: 5.5%;
5584
+ border: 2px dotted var(--color-sf-border-dark) !important;/* stylelint-disable-line declaration-no-important */
5585
+ }
5586
+
5587
+ @if $skin-name=='Material3' {
5221
5588
  width: 100%;
5222
5589
  max-width: $pv-canvas-sign-width;
5223
5590
  }
5224
5591
  }
5225
5592
 
5593
+ .e-device .e-pv-canvas-signature {
5594
+ @if $theme-name =='fluent2' {
5595
+ margin-left: 7%;
5596
+ margin-right: 7%;
5597
+ }
5598
+ }
5599
+ .e-pv-font-appearance-style.e-pv-canvas-signature{
5600
+ @if $theme-name =='fluent2' {
5601
+ height: 270px !important;/* stylelint-disable-line declaration-no-important */
5602
+ margin-top: 20px !important;/* stylelint-disable-line declaration-no-important */
5603
+ }
5604
+ }
5605
+
5606
+ .e-pv-sign-upload{
5607
+ @if $theme-name =='fluent2' {
5608
+ left: 43% !important;/* stylelint-disable-line declaration-no-important */
5609
+ margin-top: 6px !important;/* stylelint-disable-line declaration-no-important */
5610
+ }
5611
+ }
5612
+
5613
+ .e-bigger .e-pv-sign-upload{
5614
+ @if $theme-name =='fluent2' {
5615
+ left: 39% !important;/* stylelint-disable-line declaration-no-important */
5616
+ }
5617
+ }
5618
+
5619
+ .e-pv-notification-popup .e-dlg-content {
5620
+ @if $theme-name == 'fluent2' {
5621
+ overflow: hidden;
5622
+ overflow-x: hidden;
5623
+ }
5624
+ }
5625
+
5226
5626
  .e-pv-canvas-signature-blazor {
5227
5627
  width: $pv-canvas-sign-width-blazor;
5228
5628
  }