@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
@@ -453,7 +453,7 @@ $pv-annotation-opacity-popup-box-shadow: 0 3px 8px 0 $content-bg-color-hover !de
453
453
  $pv-annotation-opacity-slider-width: 172px !default;
454
454
  $pv-annotation-opacity-slider-width-rtl: 140px !default;
455
455
  $pv-annotation-opacity-slider-margin-left: 11px !default;
456
- $pv-annotation-opacity-slider-margin-right: 10px !default;
456
+ $pv-annotation-opacity-slider-margin-right: 20px !default;
457
457
  $pv-annotation-opacity-slider-height: 16px !default;
458
458
  $pv-annotation-drop-down-caret-font-size: $text-base !default;
459
459
  $pv-annotation-drop-down-height: 32px !default;
@@ -1313,7 +1313,9 @@ $lg-desktop: 1399.98;
1313
1313
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
1314
1314
  height: $pv-toolbar-btn-height;
1315
1315
  min-width: $pv-toolbar-btn-width;
1316
- width: $pv-toolbar-btn-width;
1316
+ @if ($skin-name != 'fluent2') {
1317
+ width: $pv-toolbar-btn-width;
1318
+ }
1317
1319
  @if $skin-name == 'FluentUI' {
1318
1320
  line-height: $pv-toolbar-btn-height;
1319
1321
  min-width: 40px;
@@ -2231,7 +2233,8 @@ $lg-desktop: 1399.98;
2231
2233
  padding: $pv-thumbnail-view-button-selection-padding;
2232
2234
  }
2233
2235
 
2234
- .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus
2236
+ .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus,
2237
+ .e-pv-tbar-btn.e-pv-organize-view-button.e-btn:focus
2235
2238
  {
2236
2239
  background: $pv-thumbnail-view-button-selection-background;
2237
2240
  border: $pv-thumbnail-view-button-selection-border;
@@ -2594,7 +2597,9 @@ $lg-desktop: 1399.98;
2594
2597
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
2595
2598
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
2596
2599
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
2597
- .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
2600
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret,
2601
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn,
2602
+ .e-pv-comment-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon {
2598
2603
  color: $pv-icon-color;
2599
2604
  @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
2600
2605
  box-shadow: none;
@@ -2658,13 +2663,18 @@ $lg-desktop: 1399.98;
2658
2663
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
2659
2664
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:not(.e-input-focus):hover,
2660
2665
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:focus,
2661
- .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover {
2666
+ .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover,
2667
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:hover,
2668
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:focus {
2662
2669
  @if $skin-name == 'bootstrap4' {
2663
2670
  color: $pv-icon-color-hover;
2664
2671
  }
2665
2672
  @if $skin-name == 'bootstrap5' {
2666
2673
  color: $white;
2667
2674
  }
2675
+ @if $skin-name == 'fluent2' {
2676
+ color: var(--color-sf-toolbar-icon-color);
2677
+ }
2668
2678
  @if $skin-name == 'FluentUI' {
2669
2679
  color: $pv-item-selection-color;
2670
2680
  }
@@ -2676,7 +2686,7 @@ $lg-desktop: 1399.98;
2676
2686
  @if $skin-name == 'bootstrap4' {
2677
2687
  color: $pv-icon-color-hover;
2678
2688
  }
2679
- @if $skin-name == 'bootstrap5' {
2689
+ @if ($skin-name == 'bootstrap5') {
2680
2690
  color: $pv-icon-color;
2681
2691
  }
2682
2692
  @if $skin-name == 'FluentUI' {
@@ -2684,12 +2694,23 @@ $lg-desktop: 1399.98;
2684
2694
  }
2685
2695
  }
2686
2696
 
2697
+ .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2698
+ .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2699
+ .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible {
2700
+ @if ($skin-name == 'fluent2') {
2701
+ color: $pv-icon-color;
2702
+ }
2703
+ }
2704
+
2687
2705
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
2688
2706
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,
2689
2707
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-caret {
2690
2708
  @if $skin-name == 'bootstrap4' {
2691
2709
  color: $pv-icon-color-hover;
2692
2710
  }
2711
+ @if $skin-name == 'fluent2' {
2712
+ color: var(--color-sf-toolbar-icon-color);
2713
+ }
2693
2714
  }
2694
2715
 
2695
2716
  .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
@@ -3041,10 +3062,13 @@ $lg-desktop: 1399.98;
3041
3062
  border-bottom: 2px solid;
3042
3063
  margin-top: 0;
3043
3064
  padding-top: 5px;
3044
- @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
3065
+ @if ($skin-name=='bootstrap5') {
3045
3066
  margin-top: -4px;
3046
3067
  padding-top: 0;
3047
3068
  }
3069
+ @if ($theme-name=='fluent2') {
3070
+ padding-top: 0;
3071
+ }
3048
3072
  @if $skin-name == 'FluentUI' {
3049
3073
  line-height: 11px;
3050
3074
  }
@@ -3056,7 +3080,12 @@ $lg-desktop: 1399.98;
3056
3080
  line-height: 1.71em;
3057
3081
  }
3058
3082
  border-bottom: 2px solid;
3059
- margin-top: 0;
3083
+ @if ($skin-name == 'fluent2') {
3084
+ margin-top: 5px;
3085
+ }
3086
+ @else {
3087
+ margin-top: 0;
3088
+ }
3060
3089
  padding-top: 1px;
3061
3090
  vertical-align: initial;
3062
3091
  @if $skin-name == 'FluentUI' {
@@ -3068,9 +3097,12 @@ $lg-desktop: 1399.98;
3068
3097
  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
3069
3098
  margin-top: 0;
3070
3099
  padding-top: 7px;
3071
- @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
3100
+ @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
3072
3101
  padding-top: 0;
3073
3102
  }
3103
+ @if ( or $theme-name == 'fluent2'){
3104
+ padding-top: 5px;
3105
+ }
3074
3106
  vertical-align: initial;
3075
3107
  }
3076
3108
 
@@ -3082,6 +3114,13 @@ $lg-desktop: 1399.98;
3082
3114
  vertical-align: initial;
3083
3115
  }
3084
3116
 
3117
+ .e-pv-annotation-thickness-popup-container-mobile,
3118
+ .e-pv-annotation-opacity-popup-container-mobile {
3119
+ @if $skin-name != 'Material3' {
3120
+ background-color: $pv-annotation-opacity-popup-background-color;
3121
+ }
3122
+ }
3123
+
3085
3124
  .e-pv-annotation-opacity-popup-container,
3086
3125
  .e-pv-annotation-thickness-popup-container {
3087
3126
  @if $skin-name != 'Material3' {
@@ -3440,13 +3479,6 @@ $lg-desktop: 1399.98;
3440
3479
  }
3441
3480
  }
3442
3481
 
3443
- .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
3444
- .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
3445
- @if ($theme-name == 'fluent2') {
3446
- line-height: 28px;
3447
- }
3448
- }
3449
-
3450
3482
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
3451
3483
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
3452
3484
  @if ($skin-name == 'bootstrap5') {
@@ -3529,7 +3561,6 @@ $lg-desktop: 1399.98;
3529
3561
  line-height: $pv-prop-color-picker-line-height;
3530
3562
  @if ($skin-name == 'bootstrap5') {
3531
3563
  background: $transparent;
3532
- border: 1px solid $border-light;
3533
3564
  border-radius: 4px;
3534
3565
  box-sizing: border-box;
3535
3566
  color: $content-text-color;
@@ -3544,6 +3575,13 @@ $lg-desktop: 1399.98;
3544
3575
  }
3545
3576
  }
3546
3577
 
3578
+ .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:disabled,
3579
+ .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:disabled{
3580
+ @if ($skin-name == 'bootstrap5') {
3581
+ color: $pv-icon-color;
3582
+ }
3583
+ }
3584
+
3547
3585
  .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
3548
3586
  .e-bigger .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
3549
3587
  @if $skin-name == 'FluentUI' {
@@ -4075,7 +4113,7 @@ $lg-desktop: 1399.98;
4075
4113
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item,
4076
4114
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-pv-stamp-icon,
4077
4115
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-caret {
4078
- @if $skin-name != 'Material3' {
4116
+ @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
4079
4117
  line-height: $pv-annot-toolbar-dropdown-btn-line-height;
4080
4118
  }
4081
4119
  }
@@ -4179,14 +4217,6 @@ $lg-desktop: 1399.98;
4179
4217
  padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
4180
4218
  }
4181
4219
 
4182
- .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
4183
- .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
4184
- @if $theme-name == 'fluent2' {
4185
- padding-left: 24px !important;/* stylelint-disable-line declaration-no-important */
4186
- padding-top: 24px !important;/* stylelint-disable-line declaration-no-important */
4187
- }
4188
- }
4189
-
4190
4220
  .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
4191
4221
  @if $theme-name == 'fluent2' {
4192
4222
  padding: 8px !important;/* stylelint-disable-line declaration-no-important */
@@ -4529,6 +4559,8 @@ $lg-desktop: 1399.98;
4529
4559
  padding-right: 7px;
4530
4560
  @if $skin-name == 'Material3' {
4531
4561
  font-size: $text-xs;
4562
+ padding-left: 12px;
4563
+ padding-right: 12px;
4532
4564
  }
4533
4565
  }
4534
4566
 
@@ -4671,7 +4703,7 @@ $lg-desktop: 1399.98;
4671
4703
  .e-pv-comments-panel-text {
4672
4704
  font-size: 15px;
4673
4705
  padding-left: 85px;
4674
- color: rgba(var(--color-sf-on-surface-variant));
4706
+ color: var(--color-sf-content-text-color-alt1);
4675
4707
  }
4676
4708
 
4677
4709
  .e-pv-comments-content-container {
@@ -4859,8 +4891,34 @@ $lg-desktop: 1399.98;
4859
4891
  }
4860
4892
  }
4861
4893
 
4894
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
4895
+ @if ($skin-name == 'fluent2') {
4896
+ margin-top: -4px;
4897
+ }
4898
+ }
4899
+
4900
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
4901
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
4902
+ @if ($skin-name == 'fluent2') {
4903
+ margin-top: -5px;
4904
+ }
4905
+ }
4906
+
4907
+ .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
4908
+ .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
4909
+ .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
4910
+ @if ($skin-name == 'fluent2') {
4911
+ padding-top: 8px;
4912
+ }
4913
+ }
4914
+
4862
4915
  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
4863
- margin-top: $pv-stamp-icon-margin-top;
4916
+ @if ($skin-name == 'fluent2') {
4917
+ margin-top: -4px;
4918
+ }
4919
+ @else {
4920
+ margin-top: $pv-stamp-icon-margin-top;
4921
+ }
4864
4922
  @if $theme-name != 'fluent2'{
4865
4923
  padding-left: 7px;
4866
4924
  }
@@ -5184,7 +5242,9 @@ $lg-desktop: 1399.98;
5184
5242
  @if $skin-name == 'bootstrap5' {
5185
5243
  color: $pv-icon-color;
5186
5244
  height: 32px;
5187
- line-height: 32px;
5245
+ @if ($theme-name != 'fluent2') {
5246
+ line-height: 32px;
5247
+ }
5188
5248
  }
5189
5249
  @else {
5190
5250
  color: $pv-icon-color;
@@ -5241,13 +5301,6 @@ $lg-desktop: 1399.98;
5241
5301
  border-color: $pv-annotation-dropdown-border-color;
5242
5302
  }
5243
5303
 
5244
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
5245
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
5246
- @if $theme-name == 'fluent2' {
5247
- margin-top: -10px;
5248
- }
5249
- }
5250
-
5251
5304
  .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
5252
5305
  .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
5253
5306
  @if $skin-name == 'bootstrap4' {
@@ -5816,6 +5869,7 @@ $lg-desktop: 1399.98;
5816
5869
 
5817
5870
  .e-pv-properties-form-field-group-btn-div {
5818
5871
  display: grid;
5872
+ align-content: space-between;
5819
5873
  }
5820
5874
 
5821
5875
  .e-pv-properties-form-field-option-dropdown-list-div {
@@ -6174,7 +6228,6 @@ $lg-desktop: 1399.98;
6174
6228
  }
6175
6229
  @if $theme-name == 'fluent2'{
6176
6230
  font-family: $font-family;
6177
- margin-left: 7px;
6178
6231
  }
6179
6232
  }
6180
6233
 
@@ -453,7 +453,7 @@ $pv-annotation-opacity-popup-box-shadow: 0 3px 8px 0 $content-bg-color-hover !de
453
453
  $pv-annotation-opacity-slider-width: 172px !default;
454
454
  $pv-annotation-opacity-slider-width-rtl: 140px !default;
455
455
  $pv-annotation-opacity-slider-margin-left: 11px !default;
456
- $pv-annotation-opacity-slider-margin-right: 10px !default;
456
+ $pv-annotation-opacity-slider-margin-right: 20px !default;
457
457
  $pv-annotation-opacity-slider-height: 16px !default;
458
458
  $pv-annotation-drop-down-caret-font-size: $text-base !default;
459
459
  $pv-annotation-drop-down-height: 32px !default;
@@ -1313,7 +1313,9 @@ $lg-desktop: 1399.98;
1313
1313
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
1314
1314
  height: $pv-toolbar-btn-height;
1315
1315
  min-width: $pv-toolbar-btn-width;
1316
- width: $pv-toolbar-btn-width;
1316
+ @if ($skin-name != 'fluent2') {
1317
+ width: $pv-toolbar-btn-width;
1318
+ }
1317
1319
  @if $skin-name == 'FluentUI' {
1318
1320
  line-height: $pv-toolbar-btn-height;
1319
1321
  min-width: 40px;
@@ -2231,7 +2233,8 @@ $lg-desktop: 1399.98;
2231
2233
  padding: $pv-thumbnail-view-button-selection-padding;
2232
2234
  }
2233
2235
 
2234
- .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus
2236
+ .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus,
2237
+ .e-pv-tbar-btn.e-pv-organize-view-button.e-btn:focus
2235
2238
  {
2236
2239
  background: $pv-thumbnail-view-button-selection-background;
2237
2240
  border: $pv-thumbnail-view-button-selection-border;
@@ -2594,7 +2597,9 @@ $lg-desktop: 1399.98;
2594
2597
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
2595
2598
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
2596
2599
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
2597
- .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
2600
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret,
2601
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn,
2602
+ .e-pv-comment-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon {
2598
2603
  color: $pv-icon-color;
2599
2604
  @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
2600
2605
  box-shadow: none;
@@ -2658,13 +2663,18 @@ $lg-desktop: 1399.98;
2658
2663
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
2659
2664
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:not(.e-input-focus):hover,
2660
2665
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:focus,
2661
- .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover {
2666
+ .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover,
2667
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:hover,
2668
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:focus {
2662
2669
  @if $skin-name == 'bootstrap4' {
2663
2670
  color: $pv-icon-color-hover;
2664
2671
  }
2665
2672
  @if $skin-name == 'bootstrap5' {
2666
2673
  color: $white;
2667
2674
  }
2675
+ @if $skin-name == 'fluent2' {
2676
+ color: var(--color-sf-toolbar-icon-color);
2677
+ }
2668
2678
  @if $skin-name == 'FluentUI' {
2669
2679
  color: $pv-item-selection-color;
2670
2680
  }
@@ -2676,7 +2686,7 @@ $lg-desktop: 1399.98;
2676
2686
  @if $skin-name == 'bootstrap4' {
2677
2687
  color: $pv-icon-color-hover;
2678
2688
  }
2679
- @if $skin-name == 'bootstrap5' {
2689
+ @if ($skin-name == 'bootstrap5') {
2680
2690
  color: $pv-icon-color;
2681
2691
  }
2682
2692
  @if $skin-name == 'FluentUI' {
@@ -2684,12 +2694,23 @@ $lg-desktop: 1399.98;
2684
2694
  }
2685
2695
  }
2686
2696
 
2697
+ .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2698
+ .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2699
+ .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible {
2700
+ @if ($skin-name == 'fluent2') {
2701
+ color: $pv-icon-color;
2702
+ }
2703
+ }
2704
+
2687
2705
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
2688
2706
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,
2689
2707
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-caret {
2690
2708
  @if $skin-name == 'bootstrap4' {
2691
2709
  color: $pv-icon-color-hover;
2692
2710
  }
2711
+ @if $skin-name == 'fluent2' {
2712
+ color: var(--color-sf-toolbar-icon-color);
2713
+ }
2693
2714
  }
2694
2715
 
2695
2716
  .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
@@ -3041,10 +3062,13 @@ $lg-desktop: 1399.98;
3041
3062
  border-bottom: 2px solid;
3042
3063
  margin-top: 0;
3043
3064
  padding-top: 5px;
3044
- @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
3065
+ @if ($skin-name=='bootstrap5') {
3045
3066
  margin-top: -4px;
3046
3067
  padding-top: 0;
3047
3068
  }
3069
+ @if ($theme-name=='fluent2') {
3070
+ padding-top: 0;
3071
+ }
3048
3072
  @if $skin-name == 'FluentUI' {
3049
3073
  line-height: 11px;
3050
3074
  }
@@ -3056,7 +3080,12 @@ $lg-desktop: 1399.98;
3056
3080
  line-height: 1.71em;
3057
3081
  }
3058
3082
  border-bottom: 2px solid;
3059
- margin-top: 0;
3083
+ @if ($skin-name == 'fluent2') {
3084
+ margin-top: 5px;
3085
+ }
3086
+ @else {
3087
+ margin-top: 0;
3088
+ }
3060
3089
  padding-top: 1px;
3061
3090
  vertical-align: initial;
3062
3091
  @if $skin-name == 'FluentUI' {
@@ -3068,9 +3097,12 @@ $lg-desktop: 1399.98;
3068
3097
  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
3069
3098
  margin-top: 0;
3070
3099
  padding-top: 7px;
3071
- @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
3100
+ @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
3072
3101
  padding-top: 0;
3073
3102
  }
3103
+ @if ( or $theme-name == 'fluent2'){
3104
+ padding-top: 5px;
3105
+ }
3074
3106
  vertical-align: initial;
3075
3107
  }
3076
3108
 
@@ -3082,6 +3114,13 @@ $lg-desktop: 1399.98;
3082
3114
  vertical-align: initial;
3083
3115
  }
3084
3116
 
3117
+ .e-pv-annotation-thickness-popup-container-mobile,
3118
+ .e-pv-annotation-opacity-popup-container-mobile {
3119
+ @if $skin-name != 'Material3' {
3120
+ background-color: $pv-annotation-opacity-popup-background-color;
3121
+ }
3122
+ }
3123
+
3085
3124
  .e-pv-annotation-opacity-popup-container,
3086
3125
  .e-pv-annotation-thickness-popup-container {
3087
3126
  @if $skin-name != 'Material3' {
@@ -3440,13 +3479,6 @@ $lg-desktop: 1399.98;
3440
3479
  }
3441
3480
  }
3442
3481
 
3443
- .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
3444
- .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
3445
- @if ($theme-name == 'fluent2') {
3446
- line-height: 28px;
3447
- }
3448
- }
3449
-
3450
3482
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
3451
3483
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
3452
3484
  @if ($skin-name == 'bootstrap5') {
@@ -3529,7 +3561,6 @@ $lg-desktop: 1399.98;
3529
3561
  line-height: $pv-prop-color-picker-line-height;
3530
3562
  @if ($skin-name == 'bootstrap5') {
3531
3563
  background: $transparent;
3532
- border: 1px solid $border-light;
3533
3564
  border-radius: 4px;
3534
3565
  box-sizing: border-box;
3535
3566
  color: $content-text-color;
@@ -3544,6 +3575,13 @@ $lg-desktop: 1399.98;
3544
3575
  }
3545
3576
  }
3546
3577
 
3578
+ .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:disabled,
3579
+ .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:disabled{
3580
+ @if ($skin-name == 'bootstrap5') {
3581
+ color: $pv-icon-color;
3582
+ }
3583
+ }
3584
+
3547
3585
  .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
3548
3586
  .e-bigger .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
3549
3587
  @if $skin-name == 'FluentUI' {
@@ -4075,7 +4113,7 @@ $lg-desktop: 1399.98;
4075
4113
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item,
4076
4114
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-pv-stamp-icon,
4077
4115
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-caret {
4078
- @if $skin-name != 'Material3' {
4116
+ @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
4079
4117
  line-height: $pv-annot-toolbar-dropdown-btn-line-height;
4080
4118
  }
4081
4119
  }
@@ -4179,14 +4217,6 @@ $lg-desktop: 1399.98;
4179
4217
  padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
4180
4218
  }
4181
4219
 
4182
- .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
4183
- .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
4184
- @if $theme-name == 'fluent2' {
4185
- padding-left: 24px !important;/* stylelint-disable-line declaration-no-important */
4186
- padding-top: 24px !important;/* stylelint-disable-line declaration-no-important */
4187
- }
4188
- }
4189
-
4190
4220
  .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
4191
4221
  @if $theme-name == 'fluent2' {
4192
4222
  padding: 8px !important;/* stylelint-disable-line declaration-no-important */
@@ -4529,6 +4559,8 @@ $lg-desktop: 1399.98;
4529
4559
  padding-right: 7px;
4530
4560
  @if $skin-name == 'Material3' {
4531
4561
  font-size: $text-xs;
4562
+ padding-left: 12px;
4563
+ padding-right: 12px;
4532
4564
  }
4533
4565
  }
4534
4566
 
@@ -4671,7 +4703,7 @@ $lg-desktop: 1399.98;
4671
4703
  .e-pv-comments-panel-text {
4672
4704
  font-size: 15px;
4673
4705
  padding-left: 85px;
4674
- color: rgba(var(--color-sf-on-surface-variant));
4706
+ color: var(--color-sf-content-text-color-alt1);
4675
4707
  }
4676
4708
 
4677
4709
  .e-pv-comments-content-container {
@@ -4859,8 +4891,34 @@ $lg-desktop: 1399.98;
4859
4891
  }
4860
4892
  }
4861
4893
 
4894
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
4895
+ @if ($skin-name == 'fluent2') {
4896
+ margin-top: -4px;
4897
+ }
4898
+ }
4899
+
4900
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
4901
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
4902
+ @if ($skin-name == 'fluent2') {
4903
+ margin-top: -5px;
4904
+ }
4905
+ }
4906
+
4907
+ .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
4908
+ .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
4909
+ .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
4910
+ @if ($skin-name == 'fluent2') {
4911
+ padding-top: 8px;
4912
+ }
4913
+ }
4914
+
4862
4915
  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
4863
- margin-top: $pv-stamp-icon-margin-top;
4916
+ @if ($skin-name == 'fluent2') {
4917
+ margin-top: -4px;
4918
+ }
4919
+ @else {
4920
+ margin-top: $pv-stamp-icon-margin-top;
4921
+ }
4864
4922
  @if $theme-name != 'fluent2'{
4865
4923
  padding-left: 7px;
4866
4924
  }
@@ -5184,7 +5242,9 @@ $lg-desktop: 1399.98;
5184
5242
  @if $skin-name == 'bootstrap5' {
5185
5243
  color: $pv-icon-color;
5186
5244
  height: 32px;
5187
- line-height: 32px;
5245
+ @if ($theme-name != 'fluent2') {
5246
+ line-height: 32px;
5247
+ }
5188
5248
  }
5189
5249
  @else {
5190
5250
  color: $pv-icon-color;
@@ -5241,13 +5301,6 @@ $lg-desktop: 1399.98;
5241
5301
  border-color: $pv-annotation-dropdown-border-color;
5242
5302
  }
5243
5303
 
5244
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
5245
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
5246
- @if $theme-name == 'fluent2' {
5247
- margin-top: -10px;
5248
- }
5249
- }
5250
-
5251
5304
  .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
5252
5305
  .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
5253
5306
  @if $skin-name == 'bootstrap4' {
@@ -5816,6 +5869,7 @@ $lg-desktop: 1399.98;
5816
5869
 
5817
5870
  .e-pv-properties-form-field-group-btn-div {
5818
5871
  display: grid;
5872
+ align-content: space-between;
5819
5873
  }
5820
5874
 
5821
5875
  .e-pv-properties-form-field-option-dropdown-list-div {
@@ -6174,7 +6228,6 @@ $lg-desktop: 1399.98;
6174
6228
  }
6175
6229
  @if $theme-name == 'fluent2'{
6176
6230
  font-family: $font-family;
6177
- margin-left: 7px;
6178
6231
  }
6179
6232
  }
6180
6233