@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
@@ -1311,7 +1311,9 @@ $lg-desktop: 1399.98;
1311
1311
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
1312
1312
  height: $pv-toolbar-btn-height;
1313
1313
  min-width: $pv-toolbar-btn-width;
1314
- width: $pv-toolbar-btn-width;
1314
+ @if ($skin-name != 'fluent2') {
1315
+ width: $pv-toolbar-btn-width;
1316
+ }
1315
1317
  @if $skin-name == 'FluentUI' {
1316
1318
  line-height: $pv-toolbar-btn-height;
1317
1319
  min-width: 40px;
@@ -2229,7 +2231,8 @@ $lg-desktop: 1399.98;
2229
2231
  padding: $pv-thumbnail-view-button-selection-padding;
2230
2232
  }
2231
2233
 
2232
- .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus
2234
+ .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus,
2235
+ .e-pv-tbar-btn.e-pv-organize-view-button.e-btn:focus
2233
2236
  {
2234
2237
  background: $pv-thumbnail-view-button-selection-background;
2235
2238
  border: $pv-thumbnail-view-button-selection-border;
@@ -2592,7 +2595,9 @@ $lg-desktop: 1399.98;
2592
2595
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
2593
2596
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
2594
2597
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
2595
- .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
2598
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret,
2599
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn,
2600
+ .e-pv-comment-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon {
2596
2601
  color: $pv-icon-color;
2597
2602
  @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
2598
2603
  box-shadow: none;
@@ -2656,13 +2661,18 @@ $lg-desktop: 1399.98;
2656
2661
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
2657
2662
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:not(.e-input-focus):hover,
2658
2663
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:focus,
2659
- .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover {
2664
+ .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover,
2665
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:hover,
2666
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:focus {
2660
2667
  @if $skin-name == 'bootstrap4' {
2661
2668
  color: $pv-icon-color-hover;
2662
2669
  }
2663
2670
  @if $skin-name == 'bootstrap5' {
2664
2671
  color: $white;
2665
2672
  }
2673
+ @if $skin-name == 'fluent2' {
2674
+ color: var(--color-sf-toolbar-icon-color);
2675
+ }
2666
2676
  @if $skin-name == 'FluentUI' {
2667
2677
  color: $pv-item-selection-color;
2668
2678
  }
@@ -2674,7 +2684,7 @@ $lg-desktop: 1399.98;
2674
2684
  @if $skin-name == 'bootstrap4' {
2675
2685
  color: $pv-icon-color-hover;
2676
2686
  }
2677
- @if $skin-name == 'bootstrap5' {
2687
+ @if ($skin-name == 'bootstrap5') {
2678
2688
  color: $pv-icon-color;
2679
2689
  }
2680
2690
  @if $skin-name == 'FluentUI' {
@@ -2682,12 +2692,23 @@ $lg-desktop: 1399.98;
2682
2692
  }
2683
2693
  }
2684
2694
 
2695
+ .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2696
+ .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2697
+ .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible {
2698
+ @if ($skin-name == 'fluent2') {
2699
+ color: $pv-icon-color;
2700
+ }
2701
+ }
2702
+
2685
2703
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
2686
2704
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,
2687
2705
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-caret {
2688
2706
  @if $skin-name == 'bootstrap4' {
2689
2707
  color: $pv-icon-color-hover;
2690
2708
  }
2709
+ @if $skin-name == 'fluent2' {
2710
+ color: var(--color-sf-toolbar-icon-color);
2711
+ }
2691
2712
  }
2692
2713
 
2693
2714
  .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
@@ -3039,10 +3060,13 @@ $lg-desktop: 1399.98;
3039
3060
  border-bottom: 2px solid;
3040
3061
  margin-top: 0;
3041
3062
  padding-top: 5px;
3042
- @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
3063
+ @if ($skin-name=='bootstrap5') {
3043
3064
  margin-top: -4px;
3044
3065
  padding-top: 0;
3045
3066
  }
3067
+ @if ($theme-name=='fluent2') {
3068
+ padding-top: 0;
3069
+ }
3046
3070
  @if $skin-name == 'FluentUI' {
3047
3071
  line-height: 11px;
3048
3072
  }
@@ -3054,7 +3078,12 @@ $lg-desktop: 1399.98;
3054
3078
  line-height: 1.71em;
3055
3079
  }
3056
3080
  border-bottom: 2px solid;
3057
- margin-top: 0;
3081
+ @if ($skin-name == 'fluent2') {
3082
+ margin-top: 5px;
3083
+ }
3084
+ @else {
3085
+ margin-top: 0;
3086
+ }
3058
3087
  padding-top: 1px;
3059
3088
  vertical-align: initial;
3060
3089
  @if $skin-name == 'FluentUI' {
@@ -3066,9 +3095,12 @@ $lg-desktop: 1399.98;
3066
3095
  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
3067
3096
  margin-top: 0;
3068
3097
  padding-top: 7px;
3069
- @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
3098
+ @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
3070
3099
  padding-top: 0;
3071
3100
  }
3101
+ @if ( or $theme-name == 'fluent2'){
3102
+ padding-top: 5px;
3103
+ }
3072
3104
  vertical-align: initial;
3073
3105
  }
3074
3106
 
@@ -3080,6 +3112,13 @@ $lg-desktop: 1399.98;
3080
3112
  vertical-align: initial;
3081
3113
  }
3082
3114
 
3115
+ .e-pv-annotation-thickness-popup-container-mobile,
3116
+ .e-pv-annotation-opacity-popup-container-mobile {
3117
+ @if $skin-name != 'Material3' {
3118
+ background-color: $pv-annotation-opacity-popup-background-color;
3119
+ }
3120
+ }
3121
+
3083
3122
  .e-pv-annotation-opacity-popup-container,
3084
3123
  .e-pv-annotation-thickness-popup-container {
3085
3124
  @if $skin-name != 'Material3' {
@@ -3438,13 +3477,6 @@ $lg-desktop: 1399.98;
3438
3477
  }
3439
3478
  }
3440
3479
 
3441
- .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
3442
- .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
3443
- @if ($theme-name == 'fluent2') {
3444
- line-height: 28px;
3445
- }
3446
- }
3447
-
3448
3480
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
3449
3481
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
3450
3482
  @if ($skin-name == 'bootstrap5') {
@@ -3527,7 +3559,6 @@ $lg-desktop: 1399.98;
3527
3559
  line-height: $pv-prop-color-picker-line-height;
3528
3560
  @if ($skin-name == 'bootstrap5') {
3529
3561
  background: $transparent;
3530
- border: 1px solid $border-light;
3531
3562
  border-radius: 4px;
3532
3563
  box-sizing: border-box;
3533
3564
  color: $content-text-color;
@@ -3542,6 +3573,13 @@ $lg-desktop: 1399.98;
3542
3573
  }
3543
3574
  }
3544
3575
 
3576
+ .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:disabled,
3577
+ .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:disabled{
3578
+ @if ($skin-name == 'bootstrap5') {
3579
+ color: $pv-icon-color;
3580
+ }
3581
+ }
3582
+
3545
3583
  .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
3546
3584
  .e-bigger .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
3547
3585
  @if $skin-name == 'FluentUI' {
@@ -4073,7 +4111,7 @@ $lg-desktop: 1399.98;
4073
4111
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item,
4074
4112
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-pv-stamp-icon,
4075
4113
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-caret {
4076
- @if $skin-name != 'Material3' {
4114
+ @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
4077
4115
  line-height: $pv-annot-toolbar-dropdown-btn-line-height;
4078
4116
  }
4079
4117
  }
@@ -4177,14 +4215,6 @@ $lg-desktop: 1399.98;
4177
4215
  padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
4178
4216
  }
4179
4217
 
4180
- .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
4181
- .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
4182
- @if $theme-name == 'fluent2' {
4183
- padding-left: 24px !important;/* stylelint-disable-line declaration-no-important */
4184
- padding-top: 24px !important;/* stylelint-disable-line declaration-no-important */
4185
- }
4186
- }
4187
-
4188
4218
  .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
4189
4219
  @if $theme-name == 'fluent2' {
4190
4220
  padding: 8px !important;/* stylelint-disable-line declaration-no-important */
@@ -4527,6 +4557,8 @@ $lg-desktop: 1399.98;
4527
4557
  padding-right: 7px;
4528
4558
  @if $skin-name == 'Material3' {
4529
4559
  font-size: $text-xs;
4560
+ padding-left: 12px;
4561
+ padding-right: 12px;
4530
4562
  }
4531
4563
  }
4532
4564
 
@@ -4669,7 +4701,7 @@ $lg-desktop: 1399.98;
4669
4701
  .e-pv-comments-panel-text {
4670
4702
  font-size: 15px;
4671
4703
  padding-left: 85px;
4672
- color: rgba(var(--color-sf-on-surface-variant));
4704
+ color: var(--color-sf-content-text-color-alt1);
4673
4705
  }
4674
4706
 
4675
4707
  .e-pv-comments-content-container {
@@ -4857,8 +4889,34 @@ $lg-desktop: 1399.98;
4857
4889
  }
4858
4890
  }
4859
4891
 
4892
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
4893
+ @if ($skin-name == 'fluent2') {
4894
+ margin-top: -4px;
4895
+ }
4896
+ }
4897
+
4898
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
4899
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
4900
+ @if ($skin-name == 'fluent2') {
4901
+ margin-top: -5px;
4902
+ }
4903
+ }
4904
+
4905
+ .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
4906
+ .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
4907
+ .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
4908
+ @if ($skin-name == 'fluent2') {
4909
+ padding-top: 8px;
4910
+ }
4911
+ }
4912
+
4860
4913
  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
4861
- margin-top: $pv-stamp-icon-margin-top;
4914
+ @if ($skin-name == 'fluent2') {
4915
+ margin-top: -4px;
4916
+ }
4917
+ @else {
4918
+ margin-top: $pv-stamp-icon-margin-top;
4919
+ }
4862
4920
  @if $theme-name != 'fluent2'{
4863
4921
  padding-left: 7px;
4864
4922
  }
@@ -5182,7 +5240,9 @@ $lg-desktop: 1399.98;
5182
5240
  @if $skin-name == 'bootstrap5' {
5183
5241
  color: $pv-icon-color;
5184
5242
  height: 32px;
5185
- line-height: 32px;
5243
+ @if ($theme-name != 'fluent2') {
5244
+ line-height: 32px;
5245
+ }
5186
5246
  }
5187
5247
  @else {
5188
5248
  color: $pv-icon-color;
@@ -5239,13 +5299,6 @@ $lg-desktop: 1399.98;
5239
5299
  border-color: $pv-annotation-dropdown-border-color;
5240
5300
  }
5241
5301
 
5242
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
5243
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
5244
- @if $theme-name == 'fluent2' {
5245
- margin-top: -10px;
5246
- }
5247
- }
5248
-
5249
5302
  .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
5250
5303
  .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
5251
5304
  @if $skin-name == 'bootstrap4' {
@@ -5814,6 +5867,7 @@ $lg-desktop: 1399.98;
5814
5867
 
5815
5868
  .e-pv-properties-form-field-group-btn-div {
5816
5869
  display: grid;
5870
+ align-content: space-between;
5817
5871
  }
5818
5872
 
5819
5873
  .e-pv-properties-form-field-option-dropdown-list-div {
@@ -6172,7 +6226,6 @@ $lg-desktop: 1399.98;
6172
6226
  }
6173
6227
  @if $theme-name == 'fluent2'{
6174
6228
  font-family: $font-family;
6175
- margin-left: 7px;
6176
6229
  }
6177
6230
  }
6178
6231
 
@@ -1311,7 +1311,9 @@ $lg-desktop: 1399.98;
1311
1311
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
1312
1312
  height: $pv-toolbar-btn-height;
1313
1313
  min-width: $pv-toolbar-btn-width;
1314
- width: $pv-toolbar-btn-width;
1314
+ @if ($skin-name != 'fluent2') {
1315
+ width: $pv-toolbar-btn-width;
1316
+ }
1315
1317
  @if $skin-name == 'FluentUI' {
1316
1318
  line-height: $pv-toolbar-btn-height;
1317
1319
  min-width: 40px;
@@ -2229,7 +2231,8 @@ $lg-desktop: 1399.98;
2229
2231
  padding: $pv-thumbnail-view-button-selection-padding;
2230
2232
  }
2231
2233
 
2232
- .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus
2234
+ .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus,
2235
+ .e-pv-tbar-btn.e-pv-organize-view-button.e-btn:focus
2233
2236
  {
2234
2237
  background: $pv-thumbnail-view-button-selection-background;
2235
2238
  border: $pv-thumbnail-view-button-selection-border;
@@ -2592,7 +2595,9 @@ $lg-desktop: 1399.98;
2592
2595
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
2593
2596
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
2594
2597
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
2595
- .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
2598
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret,
2599
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn,
2600
+ .e-pv-comment-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon {
2596
2601
  color: $pv-icon-color;
2597
2602
  @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
2598
2603
  box-shadow: none;
@@ -2656,13 +2661,18 @@ $lg-desktop: 1399.98;
2656
2661
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
2657
2662
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:not(.e-input-focus):hover,
2658
2663
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:focus,
2659
- .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover {
2664
+ .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover,
2665
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:hover,
2666
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:focus {
2660
2667
  @if $skin-name == 'bootstrap4' {
2661
2668
  color: $pv-icon-color-hover;
2662
2669
  }
2663
2670
  @if $skin-name == 'bootstrap5' {
2664
2671
  color: $white;
2665
2672
  }
2673
+ @if $skin-name == 'fluent2' {
2674
+ color: var(--color-sf-toolbar-icon-color);
2675
+ }
2666
2676
  @if $skin-name == 'FluentUI' {
2667
2677
  color: $pv-item-selection-color;
2668
2678
  }
@@ -2674,7 +2684,7 @@ $lg-desktop: 1399.98;
2674
2684
  @if $skin-name == 'bootstrap4' {
2675
2685
  color: $pv-icon-color-hover;
2676
2686
  }
2677
- @if $skin-name == 'bootstrap5' {
2687
+ @if ($skin-name == 'bootstrap5') {
2678
2688
  color: $pv-icon-color;
2679
2689
  }
2680
2690
  @if $skin-name == 'FluentUI' {
@@ -2682,12 +2692,23 @@ $lg-desktop: 1399.98;
2682
2692
  }
2683
2693
  }
2684
2694
 
2695
+ .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2696
+ .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2697
+ .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible {
2698
+ @if ($skin-name == 'fluent2') {
2699
+ color: $pv-icon-color;
2700
+ }
2701
+ }
2702
+
2685
2703
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
2686
2704
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,
2687
2705
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-caret {
2688
2706
  @if $skin-name == 'bootstrap4' {
2689
2707
  color: $pv-icon-color-hover;
2690
2708
  }
2709
+ @if $skin-name == 'fluent2' {
2710
+ color: var(--color-sf-toolbar-icon-color);
2711
+ }
2691
2712
  }
2692
2713
 
2693
2714
  .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
@@ -3039,10 +3060,13 @@ $lg-desktop: 1399.98;
3039
3060
  border-bottom: 2px solid;
3040
3061
  margin-top: 0;
3041
3062
  padding-top: 5px;
3042
- @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
3063
+ @if ($skin-name=='bootstrap5') {
3043
3064
  margin-top: -4px;
3044
3065
  padding-top: 0;
3045
3066
  }
3067
+ @if ($theme-name=='fluent2') {
3068
+ padding-top: 0;
3069
+ }
3046
3070
  @if $skin-name == 'FluentUI' {
3047
3071
  line-height: 11px;
3048
3072
  }
@@ -3054,7 +3078,12 @@ $lg-desktop: 1399.98;
3054
3078
  line-height: 1.71em;
3055
3079
  }
3056
3080
  border-bottom: 2px solid;
3057
- margin-top: 0;
3081
+ @if ($skin-name == 'fluent2') {
3082
+ margin-top: 5px;
3083
+ }
3084
+ @else {
3085
+ margin-top: 0;
3086
+ }
3058
3087
  padding-top: 1px;
3059
3088
  vertical-align: initial;
3060
3089
  @if $skin-name == 'FluentUI' {
@@ -3066,9 +3095,12 @@ $lg-desktop: 1399.98;
3066
3095
  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
3067
3096
  margin-top: 0;
3068
3097
  padding-top: 7px;
3069
- @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
3098
+ @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
3070
3099
  padding-top: 0;
3071
3100
  }
3101
+ @if ( or $theme-name == 'fluent2'){
3102
+ padding-top: 5px;
3103
+ }
3072
3104
  vertical-align: initial;
3073
3105
  }
3074
3106
 
@@ -3080,6 +3112,13 @@ $lg-desktop: 1399.98;
3080
3112
  vertical-align: initial;
3081
3113
  }
3082
3114
 
3115
+ .e-pv-annotation-thickness-popup-container-mobile,
3116
+ .e-pv-annotation-opacity-popup-container-mobile {
3117
+ @if $skin-name != 'Material3' {
3118
+ background-color: $pv-annotation-opacity-popup-background-color;
3119
+ }
3120
+ }
3121
+
3083
3122
  .e-pv-annotation-opacity-popup-container,
3084
3123
  .e-pv-annotation-thickness-popup-container {
3085
3124
  @if $skin-name != 'Material3' {
@@ -3438,13 +3477,6 @@ $lg-desktop: 1399.98;
3438
3477
  }
3439
3478
  }
3440
3479
 
3441
- .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
3442
- .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
3443
- @if ($theme-name == 'fluent2') {
3444
- line-height: 28px;
3445
- }
3446
- }
3447
-
3448
3480
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
3449
3481
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
3450
3482
  @if ($skin-name == 'bootstrap5') {
@@ -3527,7 +3559,6 @@ $lg-desktop: 1399.98;
3527
3559
  line-height: $pv-prop-color-picker-line-height;
3528
3560
  @if ($skin-name == 'bootstrap5') {
3529
3561
  background: $transparent;
3530
- border: 1px solid $border-light;
3531
3562
  border-radius: 4px;
3532
3563
  box-sizing: border-box;
3533
3564
  color: $content-text-color;
@@ -3542,6 +3573,13 @@ $lg-desktop: 1399.98;
3542
3573
  }
3543
3574
  }
3544
3575
 
3576
+ .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:disabled,
3577
+ .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:disabled{
3578
+ @if ($skin-name == 'bootstrap5') {
3579
+ color: $pv-icon-color;
3580
+ }
3581
+ }
3582
+
3545
3583
  .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
3546
3584
  .e-bigger .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
3547
3585
  @if $skin-name == 'FluentUI' {
@@ -4073,7 +4111,7 @@ $lg-desktop: 1399.98;
4073
4111
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item,
4074
4112
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-pv-stamp-icon,
4075
4113
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-caret {
4076
- @if $skin-name != 'Material3' {
4114
+ @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
4077
4115
  line-height: $pv-annot-toolbar-dropdown-btn-line-height;
4078
4116
  }
4079
4117
  }
@@ -4177,14 +4215,6 @@ $lg-desktop: 1399.98;
4177
4215
  padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
4178
4216
  }
4179
4217
 
4180
- .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
4181
- .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
4182
- @if $theme-name == 'fluent2' {
4183
- padding-left: 24px !important;/* stylelint-disable-line declaration-no-important */
4184
- padding-top: 24px !important;/* stylelint-disable-line declaration-no-important */
4185
- }
4186
- }
4187
-
4188
4218
  .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
4189
4219
  @if $theme-name == 'fluent2' {
4190
4220
  padding: 8px !important;/* stylelint-disable-line declaration-no-important */
@@ -4527,6 +4557,8 @@ $lg-desktop: 1399.98;
4527
4557
  padding-right: 7px;
4528
4558
  @if $skin-name == 'Material3' {
4529
4559
  font-size: $text-xs;
4560
+ padding-left: 12px;
4561
+ padding-right: 12px;
4530
4562
  }
4531
4563
  }
4532
4564
 
@@ -4669,7 +4701,7 @@ $lg-desktop: 1399.98;
4669
4701
  .e-pv-comments-panel-text {
4670
4702
  font-size: 15px;
4671
4703
  padding-left: 85px;
4672
- color: rgba(var(--color-sf-on-surface-variant));
4704
+ color: var(--color-sf-content-text-color-alt1);
4673
4705
  }
4674
4706
 
4675
4707
  .e-pv-comments-content-container {
@@ -4857,8 +4889,34 @@ $lg-desktop: 1399.98;
4857
4889
  }
4858
4890
  }
4859
4891
 
4892
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
4893
+ @if ($skin-name == 'fluent2') {
4894
+ margin-top: -4px;
4895
+ }
4896
+ }
4897
+
4898
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
4899
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
4900
+ @if ($skin-name == 'fluent2') {
4901
+ margin-top: -5px;
4902
+ }
4903
+ }
4904
+
4905
+ .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
4906
+ .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
4907
+ .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
4908
+ @if ($skin-name == 'fluent2') {
4909
+ padding-top: 8px;
4910
+ }
4911
+ }
4912
+
4860
4913
  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
4861
- margin-top: $pv-stamp-icon-margin-top;
4914
+ @if ($skin-name == 'fluent2') {
4915
+ margin-top: -4px;
4916
+ }
4917
+ @else {
4918
+ margin-top: $pv-stamp-icon-margin-top;
4919
+ }
4862
4920
  @if $theme-name != 'fluent2'{
4863
4921
  padding-left: 7px;
4864
4922
  }
@@ -5182,7 +5240,9 @@ $lg-desktop: 1399.98;
5182
5240
  @if $skin-name == 'bootstrap5' {
5183
5241
  color: $pv-icon-color;
5184
5242
  height: 32px;
5185
- line-height: 32px;
5243
+ @if ($theme-name != 'fluent2') {
5244
+ line-height: 32px;
5245
+ }
5186
5246
  }
5187
5247
  @else {
5188
5248
  color: $pv-icon-color;
@@ -5239,13 +5299,6 @@ $lg-desktop: 1399.98;
5239
5299
  border-color: $pv-annotation-dropdown-border-color;
5240
5300
  }
5241
5301
 
5242
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
5243
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
5244
- @if $theme-name == 'fluent2' {
5245
- margin-top: -10px;
5246
- }
5247
- }
5248
-
5249
5302
  .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
5250
5303
  .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
5251
5304
  @if $skin-name == 'bootstrap4' {
@@ -5814,6 +5867,7 @@ $lg-desktop: 1399.98;
5814
5867
 
5815
5868
  .e-pv-properties-form-field-group-btn-div {
5816
5869
  display: grid;
5870
+ align-content: space-between;
5817
5871
  }
5818
5872
 
5819
5873
  .e-pv-properties-form-field-option-dropdown-list-div {
@@ -6172,7 +6226,6 @@ $lg-desktop: 1399.98;
6172
6226
  }
6173
6227
  @if $theme-name == 'fluent2'{
6174
6228
  font-family: $font-family;
6175
- margin-left: 7px;
6176
6229
  }
6177
6230
  }
6178
6231