@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
@@ -350,7 +350,7 @@ $pv-corrupted-pop-content-margin-right: 53px !default;
350
350
  $pv-corrupted-pop-header-rtl-text-align: right !default;
351
351
  $pv-toolbar-btn-width-mobile: 36px !default;
352
352
  $pv-toolbar-btn-height-mobile: 30px !default;
353
- $pv-annotation-opacity-popup-background-color: $white !default;
353
+ $pv-annotation-opacity-popup-background-color: $content-bg-color-alt1 !default;
354
354
  $pv-annotation-opacity-popup-color: $content-text-color !default;
355
355
  $pv-annotation-opacity-popup-padding: 16px !default;
356
356
  $pv-annotation-opacity-popup-min-height: 48px !default;
@@ -533,14 +533,14 @@ $pv-input-active-color: rgba($primary, .54) !default;
533
533
  $pv-input-hover-background: $transparent !default;
534
534
  $pv-input-hover-color: rgba($primary, .54) !default;
535
535
  $pv-input-background: $transparent !default;
536
- $pv-bookmark-container-background-color: var(--color-sf-white) !default;
536
+ $pv-bookmark-container-background-color: $content-bg-color-alt1 !default;
537
537
  $pv-nav-toolbar-text-color: rgba($primary, .87) !default;
538
- $pv-bookmark-container-border: 1px solid $primary !default;
538
+ $pv-bookmark-container-border: 1px solid $border-light !default;
539
539
  $pv-bookmark-list-border-bottom: 1px solid var(--color-sf-border-alt) !default;
540
540
  $pv-annotation-opacity-popup-box-shadow: 0 3px 8px 0 $content-bg-color-hover !default;
541
541
  $pv-annotation-dropdown-background-color: $transparent !default;
542
542
  $pv-annotation-dropdown-border-color: $transparent !default;
543
- $pv-annotation-dropdown-background-color-hover: $content-bg-color-alt3 !default;
543
+ $pv-annotation-dropdown-background-color-hover: var(--color-sf-content-bg-color-hover) !default;
544
544
  $pv-annotation-dropdown-border-color-hover: $content-bg-color-alt3 !default;
545
545
  $pv-annotation-dropdown-background-color-active: $content-bg-color-alt2 !default;
546
546
  $pv-annotation-dropdown-border-color-active: $transparent !default;
@@ -1315,7 +1315,9 @@ $lg-desktop: 1399.98;
1315
1315
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
1316
1316
  height: $pv-toolbar-btn-height;
1317
1317
  min-width: $pv-toolbar-btn-width;
1318
- width: $pv-toolbar-btn-width;
1318
+ @if ($skin-name != 'fluent2') {
1319
+ width: $pv-toolbar-btn-width;
1320
+ }
1319
1321
  @if $skin-name == 'FluentUI' {
1320
1322
  line-height: $pv-toolbar-btn-height;
1321
1323
  min-width: 40px;
@@ -2233,7 +2235,8 @@ $lg-desktop: 1399.98;
2233
2235
  padding: $pv-thumbnail-view-button-selection-padding;
2234
2236
  }
2235
2237
 
2236
- .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus
2238
+ .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus,
2239
+ .e-pv-tbar-btn.e-pv-organize-view-button.e-btn:focus
2237
2240
  {
2238
2241
  background: $pv-thumbnail-view-button-selection-background;
2239
2242
  border: $pv-thumbnail-view-button-selection-border;
@@ -2596,7 +2599,9 @@ $lg-desktop: 1399.98;
2596
2599
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
2597
2600
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
2598
2601
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
2599
- .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
2602
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret,
2603
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn,
2604
+ .e-pv-comment-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon {
2600
2605
  color: $pv-icon-color;
2601
2606
  @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
2602
2607
  box-shadow: none;
@@ -2660,13 +2665,18 @@ $lg-desktop: 1399.98;
2660
2665
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
2661
2666
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:not(.e-input-focus):hover,
2662
2667
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:focus,
2663
- .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover {
2668
+ .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover,
2669
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:hover,
2670
+ .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:focus {
2664
2671
  @if $skin-name == 'bootstrap4' {
2665
2672
  color: $pv-icon-color-hover;
2666
2673
  }
2667
2674
  @if $skin-name == 'bootstrap5' {
2668
2675
  color: $white;
2669
2676
  }
2677
+ @if $skin-name == 'fluent2' {
2678
+ color: var(--color-sf-toolbar-icon-color);
2679
+ }
2670
2680
  @if $skin-name == 'FluentUI' {
2671
2681
  color: $pv-item-selection-color;
2672
2682
  }
@@ -2678,7 +2688,7 @@ $lg-desktop: 1399.98;
2678
2688
  @if $skin-name == 'bootstrap4' {
2679
2689
  color: $pv-icon-color-hover;
2680
2690
  }
2681
- @if $skin-name == 'bootstrap5' {
2691
+ @if ($skin-name == 'bootstrap5') {
2682
2692
  color: $pv-icon-color;
2683
2693
  }
2684
2694
  @if $skin-name == 'FluentUI' {
@@ -2686,12 +2696,23 @@ $lg-desktop: 1399.98;
2686
2696
  }
2687
2697
  }
2688
2698
 
2699
+ .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2700
+ .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
2701
+ .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible {
2702
+ @if ($skin-name == 'fluent2') {
2703
+ color: $pv-icon-color;
2704
+ }
2705
+ }
2706
+
2689
2707
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
2690
2708
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,
2691
2709
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-caret {
2692
2710
  @if $skin-name == 'bootstrap4' {
2693
2711
  color: $pv-icon-color-hover;
2694
2712
  }
2713
+ @if $skin-name == 'fluent2' {
2714
+ color: var(--color-sf-toolbar-icon-color);
2715
+ }
2695
2716
  }
2696
2717
 
2697
2718
  .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
@@ -3043,10 +3064,13 @@ $lg-desktop: 1399.98;
3043
3064
  border-bottom: 2px solid;
3044
3065
  margin-top: 0;
3045
3066
  padding-top: 5px;
3046
- @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
3067
+ @if ($skin-name=='bootstrap5') {
3047
3068
  margin-top: -4px;
3048
3069
  padding-top: 0;
3049
3070
  }
3071
+ @if ($theme-name=='fluent2') {
3072
+ padding-top: 0;
3073
+ }
3050
3074
  @if $skin-name == 'FluentUI' {
3051
3075
  line-height: 11px;
3052
3076
  }
@@ -3058,7 +3082,12 @@ $lg-desktop: 1399.98;
3058
3082
  line-height: 1.71em;
3059
3083
  }
3060
3084
  border-bottom: 2px solid;
3061
- margin-top: 0;
3085
+ @if ($skin-name == 'fluent2') {
3086
+ margin-top: 5px;
3087
+ }
3088
+ @else {
3089
+ margin-top: 0;
3090
+ }
3062
3091
  padding-top: 1px;
3063
3092
  vertical-align: initial;
3064
3093
  @if $skin-name == 'FluentUI' {
@@ -3070,9 +3099,12 @@ $lg-desktop: 1399.98;
3070
3099
  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
3071
3100
  margin-top: 0;
3072
3101
  padding-top: 7px;
3073
- @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
3102
+ @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
3074
3103
  padding-top: 0;
3075
3104
  }
3105
+ @if ( or $theme-name == 'fluent2'){
3106
+ padding-top: 5px;
3107
+ }
3076
3108
  vertical-align: initial;
3077
3109
  }
3078
3110
 
@@ -3084,6 +3116,13 @@ $lg-desktop: 1399.98;
3084
3116
  vertical-align: initial;
3085
3117
  }
3086
3118
 
3119
+ .e-pv-annotation-thickness-popup-container-mobile,
3120
+ .e-pv-annotation-opacity-popup-container-mobile {
3121
+ @if $skin-name != 'Material3' {
3122
+ background-color: $pv-annotation-opacity-popup-background-color;
3123
+ }
3124
+ }
3125
+
3087
3126
  .e-pv-annotation-opacity-popup-container,
3088
3127
  .e-pv-annotation-thickness-popup-container {
3089
3128
  @if $skin-name != 'Material3' {
@@ -3442,13 +3481,6 @@ $lg-desktop: 1399.98;
3442
3481
  }
3443
3482
  }
3444
3483
 
3445
- .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
3446
- .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
3447
- @if ($theme-name == 'fluent2') {
3448
- line-height: 28px;
3449
- }
3450
- }
3451
-
3452
3484
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
3453
3485
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
3454
3486
  @if ($skin-name == 'bootstrap5') {
@@ -3531,7 +3563,6 @@ $lg-desktop: 1399.98;
3531
3563
  line-height: $pv-prop-color-picker-line-height;
3532
3564
  @if ($skin-name == 'bootstrap5') {
3533
3565
  background: $transparent;
3534
- border: 1px solid $border-light;
3535
3566
  border-radius: 4px;
3536
3567
  box-sizing: border-box;
3537
3568
  color: $content-text-color;
@@ -3546,6 +3577,13 @@ $lg-desktop: 1399.98;
3546
3577
  }
3547
3578
  }
3548
3579
 
3580
+ .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:disabled,
3581
+ .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:disabled{
3582
+ @if ($skin-name == 'bootstrap5') {
3583
+ color: $pv-icon-color;
3584
+ }
3585
+ }
3586
+
3549
3587
  .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
3550
3588
  .e-bigger .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
3551
3589
  @if $skin-name == 'FluentUI' {
@@ -4077,7 +4115,7 @@ $lg-desktop: 1399.98;
4077
4115
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item,
4078
4116
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-pv-stamp-icon,
4079
4117
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-caret {
4080
- @if $skin-name != 'Material3' {
4118
+ @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
4081
4119
  line-height: $pv-annot-toolbar-dropdown-btn-line-height;
4082
4120
  }
4083
4121
  }
@@ -4181,14 +4219,6 @@ $lg-desktop: 1399.98;
4181
4219
  padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
4182
4220
  }
4183
4221
 
4184
- .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
4185
- .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
4186
- @if $theme-name == 'fluent2' {
4187
- padding-left: 24px !important;/* stylelint-disable-line declaration-no-important */
4188
- padding-top: 24px !important;/* stylelint-disable-line declaration-no-important */
4189
- }
4190
- }
4191
-
4192
4222
  .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
4193
4223
  @if $theme-name == 'fluent2' {
4194
4224
  padding: 8px !important;/* stylelint-disable-line declaration-no-important */
@@ -4531,6 +4561,8 @@ $lg-desktop: 1399.98;
4531
4561
  padding-right: 7px;
4532
4562
  @if $skin-name == 'Material3' {
4533
4563
  font-size: $text-xs;
4564
+ padding-left: 12px;
4565
+ padding-right: 12px;
4534
4566
  }
4535
4567
  }
4536
4568
 
@@ -4673,7 +4705,7 @@ $lg-desktop: 1399.98;
4673
4705
  .e-pv-comments-panel-text {
4674
4706
  font-size: 15px;
4675
4707
  padding-left: 85px;
4676
- color: rgba(var(--color-sf-on-surface-variant));
4708
+ color: var(--color-sf-content-text-color-alt1);
4677
4709
  }
4678
4710
 
4679
4711
  .e-pv-comments-content-container {
@@ -4861,8 +4893,34 @@ $lg-desktop: 1399.98;
4861
4893
  }
4862
4894
  }
4863
4895
 
4896
+ .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
4897
+ @if ($skin-name == 'fluent2') {
4898
+ margin-top: -4px;
4899
+ }
4900
+ }
4901
+
4902
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
4903
+ .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
4904
+ @if ($skin-name == 'fluent2') {
4905
+ margin-top: -5px;
4906
+ }
4907
+ }
4908
+
4909
+ .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
4910
+ .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
4911
+ .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
4912
+ @if ($skin-name == 'fluent2') {
4913
+ padding-top: 8px;
4914
+ }
4915
+ }
4916
+
4864
4917
  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
4865
- margin-top: $pv-stamp-icon-margin-top;
4918
+ @if ($skin-name == 'fluent2') {
4919
+ margin-top: -4px;
4920
+ }
4921
+ @else {
4922
+ margin-top: $pv-stamp-icon-margin-top;
4923
+ }
4866
4924
  @if $theme-name != 'fluent2'{
4867
4925
  padding-left: 7px;
4868
4926
  }
@@ -5186,7 +5244,9 @@ $lg-desktop: 1399.98;
5186
5244
  @if $skin-name == 'bootstrap5' {
5187
5245
  color: $pv-icon-color;
5188
5246
  height: 32px;
5189
- line-height: 32px;
5247
+ @if ($theme-name != 'fluent2') {
5248
+ line-height: 32px;
5249
+ }
5190
5250
  }
5191
5251
  @else {
5192
5252
  color: $pv-icon-color;
@@ -5243,13 +5303,6 @@ $lg-desktop: 1399.98;
5243
5303
  border-color: $pv-annotation-dropdown-border-color;
5244
5304
  }
5245
5305
 
5246
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
5247
- .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
5248
- @if $theme-name == 'fluent2' {
5249
- margin-top: -10px;
5250
- }
5251
- }
5252
-
5253
5306
  .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
5254
5307
  .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
5255
5308
  @if $skin-name == 'bootstrap4' {
@@ -5818,6 +5871,7 @@ $lg-desktop: 1399.98;
5818
5871
 
5819
5872
  .e-pv-properties-form-field-group-btn-div {
5820
5873
  display: grid;
5874
+ align-content: space-between;
5821
5875
  }
5822
5876
 
5823
5877
  .e-pv-properties-form-field-option-dropdown-list-div {
@@ -6176,7 +6230,6 @@ $lg-desktop: 1399.98;
6176
6230
  }
6177
6231
  @if $theme-name == 'fluent2'{
6178
6232
  font-family: $font-family;
6179
- margin-left: 7px;
6180
6233
  }
6181
6234
  }
6182
6235
 
@@ -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