@syncfusion/blazor-themes 26.1.41 → 26.1.42

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 (141) hide show
  1. package/SCSS-Themes/bds-dark.scss +150 -52
  2. package/SCSS-Themes/bds.scss +150 -52
  3. package/SCSS-Themes/bootstrap-dark.scss +150 -52
  4. package/SCSS-Themes/bootstrap.scss +157 -59
  5. package/SCSS-Themes/bootstrap4.scss +157 -59
  6. package/SCSS-Themes/bootstrap5-dark.scss +161 -63
  7. package/SCSS-Themes/bootstrap5.scss +161 -63
  8. package/SCSS-Themes/documenteditor/document-editor-container/bds-dark.scss +1 -1
  9. package/SCSS-Themes/documenteditor/document-editor-container/bds.scss +1 -1
  10. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap-dark.scss +1 -1
  11. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap.scss +1 -1
  12. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap4.scss +1 -1
  13. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap5-dark.scss +1 -1
  14. package/SCSS-Themes/documenteditor/document-editor-container/bootstrap5.scss +1 -1
  15. package/SCSS-Themes/documenteditor/document-editor-container/fabric-dark.scss +1 -1
  16. package/SCSS-Themes/documenteditor/document-editor-container/fabric.scss +1 -1
  17. package/SCSS-Themes/documenteditor/document-editor-container/fluent-dark.scss +1 -1
  18. package/SCSS-Themes/documenteditor/document-editor-container/fluent.scss +1 -1
  19. package/SCSS-Themes/documenteditor/document-editor-container/fluent2-dark.scss +1 -1
  20. package/SCSS-Themes/documenteditor/document-editor-container/fluent2.scss +1 -1
  21. package/SCSS-Themes/documenteditor/document-editor-container/highcontrast.scss +1 -1
  22. package/SCSS-Themes/documenteditor/document-editor-container/material-dark.scss +1 -1
  23. package/SCSS-Themes/documenteditor/document-editor-container/material.scss +1 -1
  24. package/SCSS-Themes/documenteditor/document-editor-container/material3-dark.scss +1 -1
  25. package/SCSS-Themes/documenteditor/document-editor-container/material3.scss +1 -1
  26. package/SCSS-Themes/documenteditor/document-editor-container/tailwind-dark.scss +1 -1
  27. package/SCSS-Themes/documenteditor/document-editor-container/tailwind.scss +1 -1
  28. package/SCSS-Themes/fabric-dark.scss +150 -52
  29. package/SCSS-Themes/fabric.scss +154 -56
  30. package/SCSS-Themes/fluent-dark.scss +158 -60
  31. package/SCSS-Themes/fluent.scss +158 -60
  32. package/SCSS-Themes/fluent2-dark.scss +167 -69
  33. package/SCSS-Themes/fluent2.scss +167 -69
  34. package/SCSS-Themes/grids/grid/bds-dark.scss +23 -7
  35. package/SCSS-Themes/grids/grid/bds.scss +23 -7
  36. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +23 -7
  37. package/SCSS-Themes/grids/grid/bootstrap.scss +30 -14
  38. package/SCSS-Themes/grids/grid/bootstrap4.scss +30 -14
  39. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +33 -17
  40. package/SCSS-Themes/grids/grid/bootstrap5.scss +33 -17
  41. package/SCSS-Themes/grids/grid/fabric-dark.scss +23 -7
  42. package/SCSS-Themes/grids/grid/fabric.scss +27 -11
  43. package/SCSS-Themes/grids/grid/fluent-dark.scss +30 -14
  44. package/SCSS-Themes/grids/grid/fluent.scss +30 -14
  45. package/SCSS-Themes/grids/grid/fluent2-dark.scss +36 -20
  46. package/SCSS-Themes/grids/grid/fluent2.scss +36 -20
  47. package/SCSS-Themes/grids/grid/highcontrast.scss +30 -14
  48. package/SCSS-Themes/grids/grid/material-dark.scss +23 -7
  49. package/SCSS-Themes/grids/grid/material.scss +24 -8
  50. package/SCSS-Themes/grids/grid/material3-dark.scss +29 -13
  51. package/SCSS-Themes/grids/grid/material3.scss +29 -13
  52. package/SCSS-Themes/grids/grid/tailwind-dark.scss +33 -17
  53. package/SCSS-Themes/grids/grid/tailwind.scss +33 -17
  54. package/SCSS-Themes/highcontrast.scss +157 -59
  55. package/SCSS-Themes/inputs/slider/bds-dark.scss +34 -7
  56. package/SCSS-Themes/inputs/slider/bds.scss +34 -7
  57. package/SCSS-Themes/inputs/slider/bootstrap-dark.scss +34 -7
  58. package/SCSS-Themes/inputs/slider/bootstrap.scss +34 -7
  59. package/SCSS-Themes/inputs/slider/bootstrap4.scss +34 -7
  60. package/SCSS-Themes/inputs/slider/bootstrap5-dark.scss +34 -7
  61. package/SCSS-Themes/inputs/slider/bootstrap5.scss +34 -7
  62. package/SCSS-Themes/inputs/slider/fabric-dark.scss +34 -7
  63. package/SCSS-Themes/inputs/slider/fabric.scss +34 -7
  64. package/SCSS-Themes/inputs/slider/fluent-dark.scss +34 -7
  65. package/SCSS-Themes/inputs/slider/fluent.scss +34 -7
  66. package/SCSS-Themes/inputs/slider/fluent2-dark.scss +34 -7
  67. package/SCSS-Themes/inputs/slider/fluent2.scss +34 -7
  68. package/SCSS-Themes/inputs/slider/highcontrast.scss +34 -7
  69. package/SCSS-Themes/inputs/slider/material-dark.scss +44 -16
  70. package/SCSS-Themes/inputs/slider/material.scss +34 -7
  71. package/SCSS-Themes/inputs/slider/material3-dark.scss +34 -7
  72. package/SCSS-Themes/inputs/slider/material3.scss +34 -7
  73. package/SCSS-Themes/inputs/slider/tailwind-dark.scss +34 -7
  74. package/SCSS-Themes/inputs/slider/tailwind.scss +34 -7
  75. package/SCSS-Themes/material-dark.scss +161 -62
  76. package/SCSS-Themes/material.scss +152 -54
  77. package/SCSS-Themes/material3-dark.scss +157 -59
  78. package/SCSS-Themes/material3.scss +157 -59
  79. package/SCSS-Themes/navigations/treeview/bds-dark.scss +2 -1
  80. package/SCSS-Themes/navigations/treeview/bds.scss +2 -1
  81. package/SCSS-Themes/navigations/treeview/bootstrap-dark.scss +2 -1
  82. package/SCSS-Themes/navigations/treeview/bootstrap.scss +2 -1
  83. package/SCSS-Themes/navigations/treeview/bootstrap4.scss +2 -1
  84. package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +2 -1
  85. package/SCSS-Themes/navigations/treeview/bootstrap5.scss +2 -1
  86. package/SCSS-Themes/navigations/treeview/fabric-dark.scss +2 -1
  87. package/SCSS-Themes/navigations/treeview/fabric.scss +2 -1
  88. package/SCSS-Themes/navigations/treeview/fluent-dark.scss +2 -1
  89. package/SCSS-Themes/navigations/treeview/fluent.scss +2 -1
  90. package/SCSS-Themes/navigations/treeview/fluent2-dark.scss +2 -1
  91. package/SCSS-Themes/navigations/treeview/fluent2.scss +2 -1
  92. package/SCSS-Themes/navigations/treeview/highcontrast.scss +2 -1
  93. package/SCSS-Themes/navigations/treeview/material-dark.scss +2 -1
  94. package/SCSS-Themes/navigations/treeview/material.scss +2 -1
  95. package/SCSS-Themes/navigations/treeview/material3-dark.scss +2 -1
  96. package/SCSS-Themes/navigations/treeview/material3.scss +2 -1
  97. package/SCSS-Themes/navigations/treeview/tailwind-dark.scss +2 -1
  98. package/SCSS-Themes/navigations/treeview/tailwind.scss +2 -1
  99. package/SCSS-Themes/pdfviewer/pdfviewer/bds-dark.scss +89 -36
  100. package/SCSS-Themes/pdfviewer/pdfviewer/bds.scss +89 -36
  101. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap-dark.scss +89 -36
  102. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap.scss +89 -36
  103. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap4.scss +89 -36
  104. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap5-dark.scss +90 -37
  105. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap5.scss +90 -37
  106. package/SCSS-Themes/pdfviewer/pdfviewer/fabric-dark.scss +89 -36
  107. package/SCSS-Themes/pdfviewer/pdfviewer/fabric.scss +89 -36
  108. package/SCSS-Themes/pdfviewer/pdfviewer/fluent-dark.scss +90 -37
  109. package/SCSS-Themes/pdfviewer/pdfviewer/fluent.scss +90 -37
  110. package/SCSS-Themes/pdfviewer/pdfviewer/fluent2-dark.scss +93 -40
  111. package/SCSS-Themes/pdfviewer/pdfviewer/fluent2.scss +93 -40
  112. package/SCSS-Themes/pdfviewer/pdfviewer/highcontrast.scss +89 -36
  113. package/SCSS-Themes/pdfviewer/pdfviewer/material-dark.scss +90 -37
  114. package/SCSS-Themes/pdfviewer/pdfviewer/material.scss +90 -37
  115. package/SCSS-Themes/pdfviewer/pdfviewer/material3-dark.scss +90 -37
  116. package/SCSS-Themes/pdfviewer/pdfviewer/material3.scss +90 -37
  117. package/SCSS-Themes/pdfviewer/pdfviewer/tailwind-dark.scss +90 -37
  118. package/SCSS-Themes/pdfviewer/pdfviewer/tailwind.scss +90 -37
  119. package/SCSS-Themes/ribbon/ribbon/bds-dark.scss +1 -0
  120. package/SCSS-Themes/ribbon/ribbon/bds.scss +1 -0
  121. package/SCSS-Themes/ribbon/ribbon/bootstrap-dark.scss +1 -0
  122. package/SCSS-Themes/ribbon/ribbon/bootstrap.scss +1 -0
  123. package/SCSS-Themes/ribbon/ribbon/bootstrap4.scss +1 -0
  124. package/SCSS-Themes/ribbon/ribbon/bootstrap5-dark.scss +1 -0
  125. package/SCSS-Themes/ribbon/ribbon/bootstrap5.scss +1 -0
  126. package/SCSS-Themes/ribbon/ribbon/fabric-dark.scss +1 -0
  127. package/SCSS-Themes/ribbon/ribbon/fabric.scss +1 -0
  128. package/SCSS-Themes/ribbon/ribbon/fluent-dark.scss +1 -0
  129. package/SCSS-Themes/ribbon/ribbon/fluent.scss +1 -0
  130. package/SCSS-Themes/ribbon/ribbon/fluent2-dark.scss +1 -0
  131. package/SCSS-Themes/ribbon/ribbon/fluent2.scss +1 -0
  132. package/SCSS-Themes/ribbon/ribbon/highcontrast.scss +1 -0
  133. package/SCSS-Themes/ribbon/ribbon/material-dark.scss +1 -0
  134. package/SCSS-Themes/ribbon/ribbon/material.scss +1 -0
  135. package/SCSS-Themes/ribbon/ribbon/material3-dark.scss +1 -0
  136. package/SCSS-Themes/ribbon/ribbon/material3.scss +1 -0
  137. package/SCSS-Themes/ribbon/ribbon/tailwind-dark.scss +1 -0
  138. package/SCSS-Themes/ribbon/ribbon/tailwind.scss +1 -0
  139. package/SCSS-Themes/tailwind-dark.scss +161 -63
  140. package/SCSS-Themes/tailwind.scss +161 -63
  141. package/package.json +1 -1
@@ -1310,7 +1310,9 @@ $lg-desktop: 1399.98;
1310
1310
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
1311
1311
  height: $pv-toolbar-btn-height;
1312
1312
  min-width: $pv-toolbar-btn-width;
1313
- width: $pv-toolbar-btn-width;
1313
+ @if ($skin-name != 'fluent2') {
1314
+ width: $pv-toolbar-btn-width;
1315
+ }
1314
1316
  @if $skin-name == 'FluentUI' {
1315
1317
  line-height: $pv-toolbar-btn-height;
1316
1318
  min-width: 40px;
@@ -2228,7 +2230,8 @@ $lg-desktop: 1399.98;
2228
2230
  padding: $pv-thumbnail-view-button-selection-padding;
2229
2231
  }
2230
2232
 
2231
- .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus
2233
+ .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus,
2234
+ .e-pv-tbar-btn.e-pv-organize-view-button.e-btn:focus
2232
2235
  {
2233
2236
  background: $pv-thumbnail-view-button-selection-background;
2234
2237
  border: $pv-thumbnail-view-button-selection-border;
@@ -2591,7 +2594,9 @@ $lg-desktop: 1399.98;
2591
2594
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
2592
2595
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
2593
2596
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
2594
- .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
2597
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret,
2598
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn,
2599
+ .e-pv-comment-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon {
2595
2600
  color: $pv-icon-color;
2596
2601
  @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
2597
2602
  box-shadow: none;
@@ -2655,13 +2660,18 @@ $lg-desktop: 1399.98;
2655
2660
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
2656
2661
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:not(.e-input-focus):hover,
2657
2662
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:focus,
2658
- .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover {
2663
+ .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover,
2664
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:hover,
2665
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:focus {
2659
2666
  @if $skin-name == 'bootstrap4' {
2660
2667
  color: $pv-icon-color-hover;
2661
2668
  }
2662
2669
  @if $skin-name == 'bootstrap5' {
2663
2670
  color: $white;
2664
2671
  }
2672
+ @if $skin-name == 'fluent2' {
2673
+ color: var(--color-sf-toolbar-icon-color);
2674
+ }
2665
2675
  @if $skin-name == 'FluentUI' {
2666
2676
  color: $pv-item-selection-color;
2667
2677
  }
@@ -2673,7 +2683,7 @@ $lg-desktop: 1399.98;
2673
2683
  @if $skin-name == 'bootstrap4' {
2674
2684
  color: $pv-icon-color-hover;
2675
2685
  }
2676
- @if $skin-name == 'bootstrap5' {
2686
+ @if ($skin-name == 'bootstrap5') {
2677
2687
  color: $pv-icon-color;
2678
2688
  }
2679
2689
  @if $skin-name == 'FluentUI' {
@@ -2681,12 +2691,23 @@ $lg-desktop: 1399.98;
2681
2691
  }
2682
2692
  }
2683
2693
 
2694
+ .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2695
+ .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2696
+ .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible {
2697
+ @if ($skin-name == 'fluent2') {
2698
+ color: $pv-icon-color;
2699
+ }
2700
+ }
2701
+
2684
2702
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
2685
2703
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,
2686
2704
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-caret {
2687
2705
  @if $skin-name == 'bootstrap4' {
2688
2706
  color: $pv-icon-color-hover;
2689
2707
  }
2708
+ @if $skin-name == 'fluent2' {
2709
+ color: var(--color-sf-toolbar-icon-color);
2710
+ }
2690
2711
  }
2691
2712
 
2692
2713
  .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
@@ -3038,10 +3059,13 @@ $lg-desktop: 1399.98;
3038
3059
  border-bottom: 2px solid;
3039
3060
  margin-top: 0;
3040
3061
  padding-top: 5px;
3041
- @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
3062
+ @if ($skin-name=='bootstrap5') {
3042
3063
  margin-top: -4px;
3043
3064
  padding-top: 0;
3044
3065
  }
3066
+ @if ($theme-name=='fluent2') {
3067
+ padding-top: 0;
3068
+ }
3045
3069
  @if $skin-name == 'FluentUI' {
3046
3070
  line-height: 11px;
3047
3071
  }
@@ -3053,7 +3077,12 @@ $lg-desktop: 1399.98;
3053
3077
  line-height: 1.71em;
3054
3078
  }
3055
3079
  border-bottom: 2px solid;
3056
- margin-top: 0;
3080
+ @if ($skin-name == 'fluent2') {
3081
+ margin-top: 5px;
3082
+ }
3083
+ @else {
3084
+ margin-top: 0;
3085
+ }
3057
3086
  padding-top: 1px;
3058
3087
  vertical-align: initial;
3059
3088
  @if $skin-name == 'FluentUI' {
@@ -3065,9 +3094,12 @@ $lg-desktop: 1399.98;
3065
3094
  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
3066
3095
  margin-top: 0;
3067
3096
  padding-top: 7px;
3068
- @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
3097
+ @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
3069
3098
  padding-top: 0;
3070
3099
  }
3100
+ @if ( or $theme-name == 'fluent2'){
3101
+ padding-top: 5px;
3102
+ }
3071
3103
  vertical-align: initial;
3072
3104
  }
3073
3105
 
@@ -3079,6 +3111,13 @@ $lg-desktop: 1399.98;
3079
3111
  vertical-align: initial;
3080
3112
  }
3081
3113
 
3114
+ .e-pv-annotation-thickness-popup-container-mobile,
3115
+ .e-pv-annotation-opacity-popup-container-mobile {
3116
+ @if $skin-name != 'Material3' {
3117
+ background-color: $pv-annotation-opacity-popup-background-color;
3118
+ }
3119
+ }
3120
+
3082
3121
  .e-pv-annotation-opacity-popup-container,
3083
3122
  .e-pv-annotation-thickness-popup-container {
3084
3123
  @if $skin-name != 'Material3' {
@@ -3437,13 +3476,6 @@ $lg-desktop: 1399.98;
3437
3476
  }
3438
3477
  }
3439
3478
 
3440
- .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
3441
- .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
3442
- @if ($theme-name == 'fluent2') {
3443
- line-height: 28px;
3444
- }
3445
- }
3446
-
3447
3479
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
3448
3480
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
3449
3481
  @if ($skin-name == 'bootstrap5') {
@@ -3526,7 +3558,6 @@ $lg-desktop: 1399.98;
3526
3558
  line-height: $pv-prop-color-picker-line-height;
3527
3559
  @if ($skin-name == 'bootstrap5') {
3528
3560
  background: $transparent;
3529
- border: 1px solid $border-light;
3530
3561
  border-radius: 4px;
3531
3562
  box-sizing: border-box;
3532
3563
  color: $content-text-color;
@@ -3541,6 +3572,13 @@ $lg-desktop: 1399.98;
3541
3572
  }
3542
3573
  }
3543
3574
 
3575
+ .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:disabled,
3576
+ .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:disabled{
3577
+ @if ($skin-name == 'bootstrap5') {
3578
+ color: $pv-icon-color;
3579
+ }
3580
+ }
3581
+
3544
3582
  .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
3545
3583
  .e-bigger .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
3546
3584
  @if $skin-name == 'FluentUI' {
@@ -4072,7 +4110,7 @@ $lg-desktop: 1399.98;
4072
4110
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item,
4073
4111
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-pv-stamp-icon,
4074
4112
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-caret {
4075
- @if $skin-name != 'Material3' {
4113
+ @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
4076
4114
  line-height: $pv-annot-toolbar-dropdown-btn-line-height;
4077
4115
  }
4078
4116
  }
@@ -4176,14 +4214,6 @@ $lg-desktop: 1399.98;
4176
4214
  padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
4177
4215
  }
4178
4216
 
4179
- .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
4180
- .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
4181
- @if $theme-name == 'fluent2' {
4182
- padding-left: 24px !important;/* stylelint-disable-line declaration-no-important */
4183
- padding-top: 24px !important;/* stylelint-disable-line declaration-no-important */
4184
- }
4185
- }
4186
-
4187
4217
  .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
4188
4218
  @if $theme-name == 'fluent2' {
4189
4219
  padding: 8px !important;/* stylelint-disable-line declaration-no-important */
@@ -4526,6 +4556,8 @@ $lg-desktop: 1399.98;
4526
4556
  padding-right: 7px;
4527
4557
  @if $skin-name == 'Material3' {
4528
4558
  font-size: $text-xs;
4559
+ padding-left: 12px;
4560
+ padding-right: 12px;
4529
4561
  }
4530
4562
  }
4531
4563
 
@@ -4668,7 +4700,7 @@ $lg-desktop: 1399.98;
4668
4700
  .e-pv-comments-panel-text {
4669
4701
  font-size: 15px;
4670
4702
  padding-left: 85px;
4671
- color: rgba(var(--color-sf-on-surface-variant));
4703
+ color: var(--color-sf-content-text-color-alt1);
4672
4704
  }
4673
4705
 
4674
4706
  .e-pv-comments-content-container {
@@ -4856,8 +4888,34 @@ $lg-desktop: 1399.98;
4856
4888
  }
4857
4889
  }
4858
4890
 
4891
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
4892
+ @if ($skin-name == 'fluent2') {
4893
+ margin-top: -4px;
4894
+ }
4895
+ }
4896
+
4897
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
4898
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
4899
+ @if ($skin-name == 'fluent2') {
4900
+ margin-top: -5px;
4901
+ }
4902
+ }
4903
+
4904
+ .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
4905
+ .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
4906
+ .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
4907
+ @if ($skin-name == 'fluent2') {
4908
+ padding-top: 8px;
4909
+ }
4910
+ }
4911
+
4859
4912
  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
4860
- margin-top: $pv-stamp-icon-margin-top;
4913
+ @if ($skin-name == 'fluent2') {
4914
+ margin-top: -4px;
4915
+ }
4916
+ @else {
4917
+ margin-top: $pv-stamp-icon-margin-top;
4918
+ }
4861
4919
  @if $theme-name != 'fluent2'{
4862
4920
  padding-left: 7px;
4863
4921
  }
@@ -5181,7 +5239,9 @@ $lg-desktop: 1399.98;
5181
5239
  @if $skin-name == 'bootstrap5' {
5182
5240
  color: $pv-icon-color;
5183
5241
  height: 32px;
5184
- line-height: 32px;
5242
+ @if ($theme-name != 'fluent2') {
5243
+ line-height: 32px;
5244
+ }
5185
5245
  }
5186
5246
  @else {
5187
5247
  color: $pv-icon-color;
@@ -5238,13 +5298,6 @@ $lg-desktop: 1399.98;
5238
5298
  border-color: $pv-annotation-dropdown-border-color;
5239
5299
  }
5240
5300
 
5241
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
5242
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
5243
- @if $theme-name == 'fluent2' {
5244
- margin-top: -10px;
5245
- }
5246
- }
5247
-
5248
5301
  .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
5249
5302
  .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
5250
5303
  @if $skin-name == 'bootstrap4' {
@@ -5813,6 +5866,7 @@ $lg-desktop: 1399.98;
5813
5866
 
5814
5867
  .e-pv-properties-form-field-group-btn-div {
5815
5868
  display: grid;
5869
+ align-content: space-between;
5816
5870
  }
5817
5871
 
5818
5872
  .e-pv-properties-form-field-option-dropdown-list-div {
@@ -6171,7 +6225,6 @@ $lg-desktop: 1399.98;
6171
6225
  }
6172
6226
  @if $theme-name == 'fluent2'{
6173
6227
  font-family: $font-family;
6174
- margin-left: 7px;
6175
6228
  }
6176
6229
  }
6177
6230
 
@@ -448,7 +448,7 @@ $pv-toolbar-btn-width-mobile: 36px !default;
448
448
  $pv-toolbar-btn-height-mobile: 30px !default;
449
449
  $pv-bookmark-container-border: 1px solid $primary !default;
450
450
  $pv-bookmark-list-border-bottom: 1px solid $primary !default;
451
- $pv-annotation-opacity-popup-background-color: $white !default;
451
+ $pv-annotation-opacity-popup-background-color: $content-bg-color-alt1 !default;
452
452
  $pv-annotation-opacity-popup-color: $content-text-color !default;
453
453
  $pv-annotation-opacity-popup-padding: 16px !default;
454
454
  $pv-annotation-opacity-popup-min-height: 48px !default;
@@ -1312,7 +1312,9 @@ $lg-desktop: 1399.98;
1312
1312
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
1313
1313
  height: $pv-toolbar-btn-height;
1314
1314
  min-width: $pv-toolbar-btn-width;
1315
- width: $pv-toolbar-btn-width;
1315
+ @if ($skin-name != 'fluent2') {
1316
+ width: $pv-toolbar-btn-width;
1317
+ }
1316
1318
  @if $skin-name == 'FluentUI' {
1317
1319
  line-height: $pv-toolbar-btn-height;
1318
1320
  min-width: 40px;
@@ -2230,7 +2232,8 @@ $lg-desktop: 1399.98;
2230
2232
  padding: $pv-thumbnail-view-button-selection-padding;
2231
2233
  }
2232
2234
 
2233
- .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus
2235
+ .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus,
2236
+ .e-pv-tbar-btn.e-pv-organize-view-button.e-btn:focus
2234
2237
  {
2235
2238
  background: $pv-thumbnail-view-button-selection-background;
2236
2239
  border: $pv-thumbnail-view-button-selection-border;
@@ -2593,7 +2596,9 @@ $lg-desktop: 1399.98;
2593
2596
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
2594
2597
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
2595
2598
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
2596
- .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
2599
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret,
2600
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn,
2601
+ .e-pv-comment-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon {
2597
2602
  color: $pv-icon-color;
2598
2603
  @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
2599
2604
  box-shadow: none;
@@ -2657,13 +2662,18 @@ $lg-desktop: 1399.98;
2657
2662
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
2658
2663
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:not(.e-input-focus):hover,
2659
2664
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:focus,
2660
- .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover {
2665
+ .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover,
2666
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:hover,
2667
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:focus {
2661
2668
  @if $skin-name == 'bootstrap4' {
2662
2669
  color: $pv-icon-color-hover;
2663
2670
  }
2664
2671
  @if $skin-name == 'bootstrap5' {
2665
2672
  color: $white;
2666
2673
  }
2674
+ @if $skin-name == 'fluent2' {
2675
+ color: var(--color-sf-toolbar-icon-color);
2676
+ }
2667
2677
  @if $skin-name == 'FluentUI' {
2668
2678
  color: $pv-item-selection-color;
2669
2679
  }
@@ -2675,7 +2685,7 @@ $lg-desktop: 1399.98;
2675
2685
  @if $skin-name == 'bootstrap4' {
2676
2686
  color: $pv-icon-color-hover;
2677
2687
  }
2678
- @if $skin-name == 'bootstrap5' {
2688
+ @if ($skin-name == 'bootstrap5') {
2679
2689
  color: $pv-icon-color;
2680
2690
  }
2681
2691
  @if $skin-name == 'FluentUI' {
@@ -2683,12 +2693,23 @@ $lg-desktop: 1399.98;
2683
2693
  }
2684
2694
  }
2685
2695
 
2696
+ .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2697
+ .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2698
+ .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible {
2699
+ @if ($skin-name == 'fluent2') {
2700
+ color: $pv-icon-color;
2701
+ }
2702
+ }
2703
+
2686
2704
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
2687
2705
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,
2688
2706
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-caret {
2689
2707
  @if $skin-name == 'bootstrap4' {
2690
2708
  color: $pv-icon-color-hover;
2691
2709
  }
2710
+ @if $skin-name == 'fluent2' {
2711
+ color: var(--color-sf-toolbar-icon-color);
2712
+ }
2692
2713
  }
2693
2714
 
2694
2715
  .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
@@ -3040,10 +3061,13 @@ $lg-desktop: 1399.98;
3040
3061
  border-bottom: 2px solid;
3041
3062
  margin-top: 0;
3042
3063
  padding-top: 5px;
3043
- @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
3064
+ @if ($skin-name=='bootstrap5') {
3044
3065
  margin-top: -4px;
3045
3066
  padding-top: 0;
3046
3067
  }
3068
+ @if ($theme-name=='fluent2') {
3069
+ padding-top: 0;
3070
+ }
3047
3071
  @if $skin-name == 'FluentUI' {
3048
3072
  line-height: 11px;
3049
3073
  }
@@ -3055,7 +3079,12 @@ $lg-desktop: 1399.98;
3055
3079
  line-height: 1.71em;
3056
3080
  }
3057
3081
  border-bottom: 2px solid;
3058
- margin-top: 0;
3082
+ @if ($skin-name == 'fluent2') {
3083
+ margin-top: 5px;
3084
+ }
3085
+ @else {
3086
+ margin-top: 0;
3087
+ }
3059
3088
  padding-top: 1px;
3060
3089
  vertical-align: initial;
3061
3090
  @if $skin-name == 'FluentUI' {
@@ -3067,9 +3096,12 @@ $lg-desktop: 1399.98;
3067
3096
  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
3068
3097
  margin-top: 0;
3069
3098
  padding-top: 7px;
3070
- @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
3099
+ @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
3071
3100
  padding-top: 0;
3072
3101
  }
3102
+ @if ( or $theme-name == 'fluent2'){
3103
+ padding-top: 5px;
3104
+ }
3073
3105
  vertical-align: initial;
3074
3106
  }
3075
3107
 
@@ -3081,6 +3113,13 @@ $lg-desktop: 1399.98;
3081
3113
  vertical-align: initial;
3082
3114
  }
3083
3115
 
3116
+ .e-pv-annotation-thickness-popup-container-mobile,
3117
+ .e-pv-annotation-opacity-popup-container-mobile {
3118
+ @if $skin-name != 'Material3' {
3119
+ background-color: $pv-annotation-opacity-popup-background-color;
3120
+ }
3121
+ }
3122
+
3084
3123
  .e-pv-annotation-opacity-popup-container,
3085
3124
  .e-pv-annotation-thickness-popup-container {
3086
3125
  @if $skin-name != 'Material3' {
@@ -3439,13 +3478,6 @@ $lg-desktop: 1399.98;
3439
3478
  }
3440
3479
  }
3441
3480
 
3442
- .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
3443
- .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
3444
- @if ($theme-name == 'fluent2') {
3445
- line-height: 28px;
3446
- }
3447
- }
3448
-
3449
3481
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
3450
3482
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
3451
3483
  @if ($skin-name == 'bootstrap5') {
@@ -3528,7 +3560,6 @@ $lg-desktop: 1399.98;
3528
3560
  line-height: $pv-prop-color-picker-line-height;
3529
3561
  @if ($skin-name == 'bootstrap5') {
3530
3562
  background: $transparent;
3531
- border: 1px solid $border-light;
3532
3563
  border-radius: 4px;
3533
3564
  box-sizing: border-box;
3534
3565
  color: $content-text-color;
@@ -3543,6 +3574,13 @@ $lg-desktop: 1399.98;
3543
3574
  }
3544
3575
  }
3545
3576
 
3577
+ .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:disabled,
3578
+ .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:disabled{
3579
+ @if ($skin-name == 'bootstrap5') {
3580
+ color: $pv-icon-color;
3581
+ }
3582
+ }
3583
+
3546
3584
  .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
3547
3585
  .e-bigger .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
3548
3586
  @if $skin-name == 'FluentUI' {
@@ -4074,7 +4112,7 @@ $lg-desktop: 1399.98;
4074
4112
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item,
4075
4113
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-pv-stamp-icon,
4076
4114
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-caret {
4077
- @if $skin-name != 'Material3' {
4115
+ @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
4078
4116
  line-height: $pv-annot-toolbar-dropdown-btn-line-height;
4079
4117
  }
4080
4118
  }
@@ -4178,14 +4216,6 @@ $lg-desktop: 1399.98;
4178
4216
  padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
4179
4217
  }
4180
4218
 
4181
- .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
4182
- .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
4183
- @if $theme-name == 'fluent2' {
4184
- padding-left: 24px !important;/* stylelint-disable-line declaration-no-important */
4185
- padding-top: 24px !important;/* stylelint-disable-line declaration-no-important */
4186
- }
4187
- }
4188
-
4189
4219
  .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
4190
4220
  @if $theme-name == 'fluent2' {
4191
4221
  padding: 8px !important;/* stylelint-disable-line declaration-no-important */
@@ -4528,6 +4558,8 @@ $lg-desktop: 1399.98;
4528
4558
  padding-right: 7px;
4529
4559
  @if $skin-name == 'Material3' {
4530
4560
  font-size: $text-xs;
4561
+ padding-left: 12px;
4562
+ padding-right: 12px;
4531
4563
  }
4532
4564
  }
4533
4565
 
@@ -4670,7 +4702,7 @@ $lg-desktop: 1399.98;
4670
4702
  .e-pv-comments-panel-text {
4671
4703
  font-size: 15px;
4672
4704
  padding-left: 85px;
4673
- color: rgba(var(--color-sf-on-surface-variant));
4705
+ color: var(--color-sf-content-text-color-alt1);
4674
4706
  }
4675
4707
 
4676
4708
  .e-pv-comments-content-container {
@@ -4858,8 +4890,34 @@ $lg-desktop: 1399.98;
4858
4890
  }
4859
4891
  }
4860
4892
 
4893
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
4894
+ @if ($skin-name == 'fluent2') {
4895
+ margin-top: -4px;
4896
+ }
4897
+ }
4898
+
4899
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
4900
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
4901
+ @if ($skin-name == 'fluent2') {
4902
+ margin-top: -5px;
4903
+ }
4904
+ }
4905
+
4906
+ .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
4907
+ .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
4908
+ .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
4909
+ @if ($skin-name == 'fluent2') {
4910
+ padding-top: 8px;
4911
+ }
4912
+ }
4913
+
4861
4914
  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
4862
- margin-top: $pv-stamp-icon-margin-top;
4915
+ @if ($skin-name == 'fluent2') {
4916
+ margin-top: -4px;
4917
+ }
4918
+ @else {
4919
+ margin-top: $pv-stamp-icon-margin-top;
4920
+ }
4863
4921
  @if $theme-name != 'fluent2'{
4864
4922
  padding-left: 7px;
4865
4923
  }
@@ -5183,7 +5241,9 @@ $lg-desktop: 1399.98;
5183
5241
  @if $skin-name == 'bootstrap5' {
5184
5242
  color: $pv-icon-color;
5185
5243
  height: 32px;
5186
- line-height: 32px;
5244
+ @if ($theme-name != 'fluent2') {
5245
+ line-height: 32px;
5246
+ }
5187
5247
  }
5188
5248
  @else {
5189
5249
  color: $pv-icon-color;
@@ -5240,13 +5300,6 @@ $lg-desktop: 1399.98;
5240
5300
  border-color: $pv-annotation-dropdown-border-color;
5241
5301
  }
5242
5302
 
5243
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
5244
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
5245
- @if $theme-name == 'fluent2' {
5246
- margin-top: -10px;
5247
- }
5248
- }
5249
-
5250
5303
  .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
5251
5304
  .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
5252
5305
  @if $skin-name == 'bootstrap4' {
@@ -5815,6 +5868,7 @@ $lg-desktop: 1399.98;
5815
5868
 
5816
5869
  .e-pv-properties-form-field-group-btn-div {
5817
5870
  display: grid;
5871
+ align-content: space-between;
5818
5872
  }
5819
5873
 
5820
5874
  .e-pv-properties-form-field-option-dropdown-list-div {
@@ -6173,7 +6227,6 @@ $lg-desktop: 1399.98;
6173
6227
  }
6174
6228
  @if $theme-name == 'fluent2'{
6175
6229
  font-family: $font-family;
6176
- margin-left: 7px;
6177
6230
  }
6178
6231
  }
6179
6232