@syncfusion/blazor-themes 23.1.38 → 23.1.40

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 (97) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +49 -12
  2. package/SCSS-Themes/bootstrap.scss +49 -12
  3. package/SCSS-Themes/bootstrap4.scss +50 -13
  4. package/SCSS-Themes/bootstrap5-dark.scss +49 -12
  5. package/SCSS-Themes/bootstrap5.scss +49 -12
  6. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +14 -1
  7. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +14 -1
  8. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +14 -1
  9. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +14 -1
  10. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +14 -1
  11. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +15 -2
  12. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +15 -2
  13. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +14 -1
  14. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +14 -1
  15. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +14 -1
  16. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +14 -1
  17. package/SCSS-Themes/dropdowns/multi-select/material.scss +14 -1
  18. package/SCSS-Themes/dropdowns/multi-select/material3-dark.scss +12 -1
  19. package/SCSS-Themes/dropdowns/multi-select/material3.scss +12 -1
  20. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +14 -1
  21. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +14 -1
  22. package/SCSS-Themes/fabric-dark.scss +50 -13
  23. package/SCSS-Themes/fabric.scss +50 -13
  24. package/SCSS-Themes/fluent-dark.scss +49 -12
  25. package/SCSS-Themes/fluent.scss +49 -12
  26. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +9 -0
  27. package/SCSS-Themes/grids/grid/bootstrap.scss +9 -0
  28. package/SCSS-Themes/grids/grid/bootstrap4.scss +10 -1
  29. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +9 -0
  30. package/SCSS-Themes/grids/grid/bootstrap5.scss +9 -0
  31. package/SCSS-Themes/grids/grid/fabric-dark.scss +9 -0
  32. package/SCSS-Themes/grids/grid/fabric.scss +9 -0
  33. package/SCSS-Themes/grids/grid/fluent-dark.scss +9 -0
  34. package/SCSS-Themes/grids/grid/fluent.scss +9 -0
  35. package/SCSS-Themes/grids/grid/highcontrast.scss +9 -0
  36. package/SCSS-Themes/grids/grid/material-dark.scss +9 -0
  37. package/SCSS-Themes/grids/grid/material.scss +9 -0
  38. package/SCSS-Themes/grids/grid/material3-dark.scss +9 -0
  39. package/SCSS-Themes/grids/grid/material3.scss +9 -0
  40. package/SCSS-Themes/grids/grid/tailwind-dark.scss +9 -0
  41. package/SCSS-Themes/grids/grid/tailwind.scss +9 -0
  42. package/SCSS-Themes/highcontrast.scss +49 -12
  43. package/SCSS-Themes/material-dark.scss +49 -12
  44. package/SCSS-Themes/material.scss +49 -12
  45. package/SCSS-Themes/material3-dark.scss +48 -12
  46. package/SCSS-Themes/material3.scss +48 -12
  47. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap-dark.scss +21 -9
  48. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap.scss +21 -9
  49. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap4.scss +21 -9
  50. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap5-dark.scss +21 -9
  51. package/SCSS-Themes/pdfviewer/pdfviewer/bootstrap5.scss +21 -9
  52. package/SCSS-Themes/pdfviewer/pdfviewer/fabric-dark.scss +21 -9
  53. package/SCSS-Themes/pdfviewer/pdfviewer/fabric.scss +21 -9
  54. package/SCSS-Themes/pdfviewer/pdfviewer/fluent-dark.scss +21 -9
  55. package/SCSS-Themes/pdfviewer/pdfviewer/fluent.scss +21 -9
  56. package/SCSS-Themes/pdfviewer/pdfviewer/highcontrast.scss +21 -9
  57. package/SCSS-Themes/pdfviewer/pdfviewer/material-dark.scss +21 -9
  58. package/SCSS-Themes/pdfviewer/pdfviewer/material.scss +21 -9
  59. package/SCSS-Themes/pdfviewer/pdfviewer/material3-dark.scss +22 -9
  60. package/SCSS-Themes/pdfviewer/pdfviewer/material3.scss +22 -9
  61. package/SCSS-Themes/pdfviewer/pdfviewer/tailwind-dark.scss +21 -9
  62. package/SCSS-Themes/pdfviewer/pdfviewer/tailwind.scss +21 -9
  63. package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss +3 -0
  64. package/SCSS-Themes/pivotview/pivotview/bootstrap.scss +3 -0
  65. package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss +3 -0
  66. package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss +3 -0
  67. package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss +3 -0
  68. package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss +3 -0
  69. package/SCSS-Themes/pivotview/pivotview/fabric.scss +3 -0
  70. package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss +3 -0
  71. package/SCSS-Themes/pivotview/pivotview/fluent.scss +3 -0
  72. package/SCSS-Themes/pivotview/pivotview/highcontrast.scss +3 -0
  73. package/SCSS-Themes/pivotview/pivotview/material-dark.scss +3 -0
  74. package/SCSS-Themes/pivotview/pivotview/material.scss +3 -0
  75. package/SCSS-Themes/pivotview/pivotview/material3-dark.scss +3 -0
  76. package/SCSS-Themes/pivotview/pivotview/material3.scss +3 -0
  77. package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss +3 -0
  78. package/SCSS-Themes/pivotview/pivotview/tailwind.scss +3 -0
  79. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap-dark.scss +2 -2
  80. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap.scss +2 -2
  81. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap4.scss +2 -2
  82. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5-dark.scss +2 -2
  83. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5.scss +2 -2
  84. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric-dark.scss +2 -2
  85. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric.scss +2 -2
  86. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent-dark.scss +2 -2
  87. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent.scss +2 -2
  88. package/SCSS-Themes/richtexteditor/rich-text-editor/highcontrast.scss +2 -2
  89. package/SCSS-Themes/richtexteditor/rich-text-editor/material-dark.scss +2 -2
  90. package/SCSS-Themes/richtexteditor/rich-text-editor/material.scss +2 -2
  91. package/SCSS-Themes/richtexteditor/rich-text-editor/material3-dark.scss +2 -2
  92. package/SCSS-Themes/richtexteditor/rich-text-editor/material3.scss +2 -2
  93. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind-dark.scss +2 -2
  94. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind.scss +2 -2
  95. package/SCSS-Themes/tailwind-dark.scss +49 -12
  96. package/SCSS-Themes/tailwind.scss +49 -12
  97. package/package.json +1 -1
@@ -3931,6 +3931,22 @@ $pv-comment-text-cursor-color: $black !default;
3931
3931
  text-align: left;
3932
3932
  }
3933
3933
 
3934
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3935
+ @if $skin-name == 'Material3' {
3936
+ background: $content-bg-color-alt2;
3937
+ border: $border-light;
3938
+ border-width: 0 0 1px 1px;
3939
+ font-size: $text-base;
3940
+ font-weight: $pv-comment-tile-font-weight;
3941
+ line-height: 16px;
3942
+ padding: 0;
3943
+ left: 15px;
3944
+ top: 14px;
3945
+ position: absolute;
3946
+ text-align: left;
3947
+ }
3948
+ }
3949
+
3934
3950
  .e-pv-comment-panel-title-close-div.e-btn {
3935
3951
  background: $pv-title-close-background;
3936
3952
  border: $pv-title-close-border;
@@ -3940,17 +3956,12 @@ $pv-comment-text-cursor-color: $black !default;
3940
3956
  }
3941
3957
  height: $pv-title-close-height;
3942
3958
  position: $pv-title-close-position;
3943
- @if $skin-name != 'Material3' {
3944
- right: 11px;
3945
- top: 5px;
3946
- }
3959
+ right: 11px;
3960
+ top: 5px;
3947
3961
  width: $pv-title-close-width;
3948
3962
  @if $skin-name == 'FluentUI' {
3949
3963
  padding: 4px;
3950
3964
  }
3951
- @if $skin-name == 'Material3' {
3952
- padding: 12px 12px 12px 270px;
3953
- }
3954
3965
  }
3955
3966
 
3956
3967
  @if $skin-name == 'Material3' {
@@ -3963,7 +3974,7 @@ $pv-comment-text-cursor-color: $black !default;
3963
3974
  @if $skin-name != 'bootstrap5' {
3964
3975
  color: $pv-comment-text-color;
3965
3976
  }
3966
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3977
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3967
3978
  color: $icon-color;
3968
3979
  }
3969
3980
  }
@@ -3971,6 +3982,7 @@ $pv-comment-text-cursor-color: $black !default;
3971
3982
  .e-pv-comments-panel-text {
3972
3983
  font-size: 15px;
3973
3984
  padding-left: 85px;
3985
+ color: rgba(var(--color-sf-on-surface-variant));
3974
3986
  }
3975
3987
 
3976
3988
  .e-pv-comments-content-container {
@@ -5447,7 +5459,7 @@ $pv-comment-text-cursor-color: $black !default;
5447
5459
  }
5448
5460
 
5449
5461
  .e-bigger .e-pv-signature-dialog-height {
5450
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5462
+ @if ($skin-name == 'FluentUI') {
5451
5463
  min-height: 592px;
5452
5464
  }
5453
5465
  }
@@ -3931,6 +3931,22 @@ $pv-comment-text-cursor-color: $black !default;
3931
3931
  text-align: left;
3932
3932
  }
3933
3933
 
3934
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3935
+ @if $skin-name == 'Material3' {
3936
+ background: $content-bg-color-alt2;
3937
+ border: $border-light;
3938
+ border-width: 0 0 1px 1px;
3939
+ font-size: $text-base;
3940
+ font-weight: $pv-comment-tile-font-weight;
3941
+ line-height: 16px;
3942
+ padding: 0;
3943
+ left: 15px;
3944
+ top: 14px;
3945
+ position: absolute;
3946
+ text-align: left;
3947
+ }
3948
+ }
3949
+
3934
3950
  .e-pv-comment-panel-title-close-div.e-btn {
3935
3951
  background: $pv-title-close-background;
3936
3952
  border: $pv-title-close-border;
@@ -3940,17 +3956,12 @@ $pv-comment-text-cursor-color: $black !default;
3940
3956
  }
3941
3957
  height: $pv-title-close-height;
3942
3958
  position: $pv-title-close-position;
3943
- @if $skin-name != 'Material3' {
3944
- right: 11px;
3945
- top: 5px;
3946
- }
3959
+ right: 11px;
3960
+ top: 5px;
3947
3961
  width: $pv-title-close-width;
3948
3962
  @if $skin-name == 'FluentUI' {
3949
3963
  padding: 4px;
3950
3964
  }
3951
- @if $skin-name == 'Material3' {
3952
- padding: 12px 12px 12px 270px;
3953
- }
3954
3965
  }
3955
3966
 
3956
3967
  @if $skin-name == 'Material3' {
@@ -3963,7 +3974,7 @@ $pv-comment-text-cursor-color: $black !default;
3963
3974
  @if $skin-name != 'bootstrap5' {
3964
3975
  color: $pv-comment-text-color;
3965
3976
  }
3966
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3977
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3967
3978
  color: $icon-color;
3968
3979
  }
3969
3980
  }
@@ -3971,6 +3982,7 @@ $pv-comment-text-cursor-color: $black !default;
3971
3982
  .e-pv-comments-panel-text {
3972
3983
  font-size: 15px;
3973
3984
  padding-left: 85px;
3985
+ color: rgba(var(--color-sf-on-surface-variant));
3974
3986
  }
3975
3987
 
3976
3988
  .e-pv-comments-content-container {
@@ -5447,7 +5459,7 @@ $pv-comment-text-cursor-color: $black !default;
5447
5459
  }
5448
5460
 
5449
5461
  .e-bigger .e-pv-signature-dialog-height {
5450
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5462
+ @if ($skin-name == 'FluentUI') {
5451
5463
  min-height: 592px;
5452
5464
  }
5453
5465
  }
@@ -3929,6 +3929,22 @@ $pv-eye-icon-margin-top: 3px !default;
3929
3929
  text-align: left;
3930
3930
  }
3931
3931
 
3932
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3933
+ @if $skin-name == 'Material3' {
3934
+ background: $content-bg-color-alt2;
3935
+ border: $border-light;
3936
+ border-width: 0 0 1px 1px;
3937
+ font-size: $text-base;
3938
+ font-weight: $pv-comment-tile-font-weight;
3939
+ line-height: 16px;
3940
+ padding: 0;
3941
+ left: 15px;
3942
+ top: 14px;
3943
+ position: absolute;
3944
+ text-align: left;
3945
+ }
3946
+ }
3947
+
3932
3948
  .e-pv-comment-panel-title-close-div.e-btn {
3933
3949
  background: $pv-title-close-background;
3934
3950
  border: $pv-title-close-border;
@@ -3938,17 +3954,12 @@ $pv-eye-icon-margin-top: 3px !default;
3938
3954
  }
3939
3955
  height: $pv-title-close-height;
3940
3956
  position: $pv-title-close-position;
3941
- @if $skin-name != 'Material3' {
3942
- right: 11px;
3943
- top: 5px;
3944
- }
3957
+ right: 11px;
3958
+ top: 5px;
3945
3959
  width: $pv-title-close-width;
3946
3960
  @if $skin-name == 'FluentUI' {
3947
3961
  padding: 4px;
3948
3962
  }
3949
- @if $skin-name == 'Material3' {
3950
- padding: 12px 12px 12px 270px;
3951
- }
3952
3963
  }
3953
3964
 
3954
3965
  @if $skin-name == 'Material3' {
@@ -3961,7 +3972,7 @@ $pv-eye-icon-margin-top: 3px !default;
3961
3972
  @if $skin-name != 'bootstrap5' {
3962
3973
  color: $pv-comment-text-color;
3963
3974
  }
3964
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3975
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3965
3976
  color: $icon-color;
3966
3977
  }
3967
3978
  }
@@ -3969,6 +3980,7 @@ $pv-eye-icon-margin-top: 3px !default;
3969
3980
  .e-pv-comments-panel-text {
3970
3981
  font-size: 15px;
3971
3982
  padding-left: 85px;
3983
+ color: rgba(var(--color-sf-on-surface-variant));
3972
3984
  }
3973
3985
 
3974
3986
  .e-pv-comments-content-container {
@@ -5445,7 +5457,7 @@ $pv-eye-icon-margin-top: 3px !default;
5445
5457
  }
5446
5458
 
5447
5459
  .e-bigger .e-pv-signature-dialog-height {
5448
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5460
+ @if ($skin-name == 'FluentUI') {
5449
5461
  min-height: 592px;
5450
5462
  }
5451
5463
  }
@@ -3928,6 +3928,22 @@ $pv-eye-icon-margin-top: 3px !default;
3928
3928
  text-align: left;
3929
3929
  }
3930
3930
 
3931
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3932
+ @if $skin-name == 'Material3' {
3933
+ background: $content-bg-color-alt2;
3934
+ border: $border-light;
3935
+ border-width: 0 0 1px 1px;
3936
+ font-size: $text-base;
3937
+ font-weight: $pv-comment-tile-font-weight;
3938
+ line-height: 16px;
3939
+ padding: 0;
3940
+ left: 15px;
3941
+ top: 14px;
3942
+ position: absolute;
3943
+ text-align: left;
3944
+ }
3945
+ }
3946
+
3931
3947
  .e-pv-comment-panel-title-close-div.e-btn {
3932
3948
  background: $pv-title-close-background;
3933
3949
  border: $pv-title-close-border;
@@ -3937,17 +3953,12 @@ $pv-eye-icon-margin-top: 3px !default;
3937
3953
  }
3938
3954
  height: $pv-title-close-height;
3939
3955
  position: $pv-title-close-position;
3940
- @if $skin-name != 'Material3' {
3941
- right: 11px;
3942
- top: 5px;
3943
- }
3956
+ right: 11px;
3957
+ top: 5px;
3944
3958
  width: $pv-title-close-width;
3945
3959
  @if $skin-name == 'FluentUI' {
3946
3960
  padding: 4px;
3947
3961
  }
3948
- @if $skin-name == 'Material3' {
3949
- padding: 12px 12px 12px 270px;
3950
- }
3951
3962
  }
3952
3963
 
3953
3964
  @if $skin-name == 'Material3' {
@@ -3960,7 +3971,7 @@ $pv-eye-icon-margin-top: 3px !default;
3960
3971
  @if $skin-name != 'bootstrap5' {
3961
3972
  color: $pv-comment-text-color;
3962
3973
  }
3963
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3974
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3964
3975
  color: $icon-color;
3965
3976
  }
3966
3977
  }
@@ -3968,6 +3979,7 @@ $pv-eye-icon-margin-top: 3px !default;
3968
3979
  .e-pv-comments-panel-text {
3969
3980
  font-size: 15px;
3970
3981
  padding-left: 85px;
3982
+ color: rgba(var(--color-sf-on-surface-variant));
3971
3983
  }
3972
3984
 
3973
3985
  .e-pv-comments-content-container {
@@ -5444,7 +5456,7 @@ $pv-eye-icon-margin-top: 3px !default;
5444
5456
  }
5445
5457
 
5446
5458
  .e-bigger .e-pv-signature-dialog-height {
5447
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5459
+ @if ($skin-name == 'FluentUI') {
5448
5460
  min-height: 592px;
5449
5461
  }
5450
5462
  }
@@ -3926,6 +3926,22 @@ $pv-eye-icon-margin-top: 3px !default;
3926
3926
  text-align: left;
3927
3927
  }
3928
3928
 
3929
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3930
+ @if $skin-name == 'Material3' {
3931
+ background: $content-bg-color-alt2;
3932
+ border: $border-light;
3933
+ border-width: 0 0 1px 1px;
3934
+ font-size: $text-base;
3935
+ font-weight: $pv-comment-tile-font-weight;
3936
+ line-height: 16px;
3937
+ padding: 0;
3938
+ left: 15px;
3939
+ top: 14px;
3940
+ position: absolute;
3941
+ text-align: left;
3942
+ }
3943
+ }
3944
+
3929
3945
  .e-pv-comment-panel-title-close-div.e-btn {
3930
3946
  background: $pv-title-close-background;
3931
3947
  border: $pv-title-close-border;
@@ -3935,17 +3951,12 @@ $pv-eye-icon-margin-top: 3px !default;
3935
3951
  }
3936
3952
  height: $pv-title-close-height;
3937
3953
  position: $pv-title-close-position;
3938
- @if $skin-name != 'Material3' {
3939
- right: 11px;
3940
- top: 5px;
3941
- }
3954
+ right: 11px;
3955
+ top: 5px;
3942
3956
  width: $pv-title-close-width;
3943
3957
  @if $skin-name == 'FluentUI' {
3944
3958
  padding: 4px;
3945
3959
  }
3946
- @if $skin-name == 'Material3' {
3947
- padding: 12px 12px 12px 270px;
3948
- }
3949
3960
  }
3950
3961
 
3951
3962
  @if $skin-name == 'Material3' {
@@ -3958,7 +3969,7 @@ $pv-eye-icon-margin-top: 3px !default;
3958
3969
  @if $skin-name != 'bootstrap5' {
3959
3970
  color: $pv-comment-text-color;
3960
3971
  }
3961
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3972
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3962
3973
  color: $icon-color;
3963
3974
  }
3964
3975
  }
@@ -3966,6 +3977,7 @@ $pv-eye-icon-margin-top: 3px !default;
3966
3977
  .e-pv-comments-panel-text {
3967
3978
  font-size: 15px;
3968
3979
  padding-left: 85px;
3980
+ color: rgba(var(--color-sf-on-surface-variant));
3969
3981
  }
3970
3982
 
3971
3983
  .e-pv-comments-content-container {
@@ -5442,7 +5454,7 @@ $pv-eye-icon-margin-top: 3px !default;
5442
5454
  }
5443
5455
 
5444
5456
  .e-bigger .e-pv-signature-dialog-height {
5445
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5457
+ @if ($skin-name == 'FluentUI') {
5446
5458
  min-height: 592px;
5447
5459
  }
5448
5460
  }
@@ -3932,6 +3932,22 @@ $pv-search-btn-width-big: 32px !default;
3932
3932
  text-align: left;
3933
3933
  }
3934
3934
 
3935
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3936
+ @if $skin-name == 'Material3' {
3937
+ background: $content-bg-color-alt2;
3938
+ border: $border-light;
3939
+ border-width: 0 0 1px 1px;
3940
+ font-size: $text-base;
3941
+ font-weight: $pv-comment-tile-font-weight;
3942
+ line-height: 16px;
3943
+ padding: 0;
3944
+ left: 15px;
3945
+ top: 14px;
3946
+ position: absolute;
3947
+ text-align: left;
3948
+ }
3949
+ }
3950
+
3935
3951
  .e-pv-comment-panel-title-close-div.e-btn {
3936
3952
  background: $pv-title-close-background;
3937
3953
  border: $pv-title-close-border;
@@ -3941,17 +3957,12 @@ $pv-search-btn-width-big: 32px !default;
3941
3957
  }
3942
3958
  height: $pv-title-close-height;
3943
3959
  position: $pv-title-close-position;
3944
- @if $skin-name != 'Material3' {
3945
- right: 11px;
3946
- top: 5px;
3947
- }
3960
+ right: 11px;
3961
+ top: 5px;
3948
3962
  width: $pv-title-close-width;
3949
3963
  @if $skin-name == 'FluentUI' {
3950
3964
  padding: 4px;
3951
3965
  }
3952
- @if $skin-name == 'Material3' {
3953
- padding: 12px 12px 12px 270px;
3954
- }
3955
3966
  }
3956
3967
 
3957
3968
  @if $skin-name == 'Material3' {
@@ -3964,7 +3975,7 @@ $pv-search-btn-width-big: 32px !default;
3964
3975
  @if $skin-name != 'bootstrap5' {
3965
3976
  color: $pv-comment-text-color;
3966
3977
  }
3967
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3978
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3968
3979
  color: $icon-color;
3969
3980
  }
3970
3981
  }
@@ -3972,6 +3983,7 @@ $pv-search-btn-width-big: 32px !default;
3972
3983
  .e-pv-comments-panel-text {
3973
3984
  font-size: 15px;
3974
3985
  padding-left: 85px;
3986
+ color: rgba(var(--color-sf-on-surface-variant));
3975
3987
  }
3976
3988
 
3977
3989
  .e-pv-comments-content-container {
@@ -5448,7 +5460,7 @@ $pv-search-btn-width-big: 32px !default;
5448
5460
  }
5449
5461
 
5450
5462
  .e-bigger .e-pv-signature-dialog-height {
5451
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5463
+ @if ($skin-name == 'FluentUI') {
5452
5464
  min-height: 592px;
5453
5465
  }
5454
5466
  }
@@ -5617,6 +5629,7 @@ $pv-search-btn-width-big: 32px !default;
5617
5629
  .e-pv-title-close-icon::before,
5618
5630
  .e-pv-annotation-tools-close-icon::before,
5619
5631
  .e-pv-annotation-popup-close::before {
5632
+ color: $pv-icon-color;
5620
5633
  content: '\e7e7';
5621
5634
  }
5622
5635
 
@@ -3932,6 +3932,22 @@ $pv-search-btn-width-big: 32px !default;
3932
3932
  text-align: left;
3933
3933
  }
3934
3934
 
3935
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3936
+ @if $skin-name == 'Material3' {
3937
+ background: $content-bg-color-alt2;
3938
+ border: $border-light;
3939
+ border-width: 0 0 1px 1px;
3940
+ font-size: $text-base;
3941
+ font-weight: $pv-comment-tile-font-weight;
3942
+ line-height: 16px;
3943
+ padding: 0;
3944
+ left: 15px;
3945
+ top: 14px;
3946
+ position: absolute;
3947
+ text-align: left;
3948
+ }
3949
+ }
3950
+
3935
3951
  .e-pv-comment-panel-title-close-div.e-btn {
3936
3952
  background: $pv-title-close-background;
3937
3953
  border: $pv-title-close-border;
@@ -3941,17 +3957,12 @@ $pv-search-btn-width-big: 32px !default;
3941
3957
  }
3942
3958
  height: $pv-title-close-height;
3943
3959
  position: $pv-title-close-position;
3944
- @if $skin-name != 'Material3' {
3945
- right: 11px;
3946
- top: 5px;
3947
- }
3960
+ right: 11px;
3961
+ top: 5px;
3948
3962
  width: $pv-title-close-width;
3949
3963
  @if $skin-name == 'FluentUI' {
3950
3964
  padding: 4px;
3951
3965
  }
3952
- @if $skin-name == 'Material3' {
3953
- padding: 12px 12px 12px 270px;
3954
- }
3955
3966
  }
3956
3967
 
3957
3968
  @if $skin-name == 'Material3' {
@@ -3964,7 +3975,7 @@ $pv-search-btn-width-big: 32px !default;
3964
3975
  @if $skin-name != 'bootstrap5' {
3965
3976
  color: $pv-comment-text-color;
3966
3977
  }
3967
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3978
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3968
3979
  color: $icon-color;
3969
3980
  }
3970
3981
  }
@@ -3972,6 +3983,7 @@ $pv-search-btn-width-big: 32px !default;
3972
3983
  .e-pv-comments-panel-text {
3973
3984
  font-size: 15px;
3974
3985
  padding-left: 85px;
3986
+ color: rgba(var(--color-sf-on-surface-variant));
3975
3987
  }
3976
3988
 
3977
3989
  .e-pv-comments-content-container {
@@ -5448,7 +5460,7 @@ $pv-search-btn-width-big: 32px !default;
5448
5460
  }
5449
5461
 
5450
5462
  .e-bigger .e-pv-signature-dialog-height {
5451
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5463
+ @if ($skin-name == 'FluentUI') {
5452
5464
  min-height: 592px;
5453
5465
  }
5454
5466
  }
@@ -5617,6 +5629,7 @@ $pv-search-btn-width-big: 32px !default;
5617
5629
  .e-pv-title-close-icon::before,
5618
5630
  .e-pv-annotation-tools-close-icon::before,
5619
5631
  .e-pv-annotation-popup-close::before {
5632
+ color: $pv-icon-color;
5620
5633
  content: '\e7e7';
5621
5634
  }
5622
5635
 
@@ -3933,6 +3933,22 @@ $pv-eye-icon-margin-top: 3px !default;
3933
3933
  text-align: left;
3934
3934
  }
3935
3935
 
3936
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3937
+ @if $skin-name == 'Material3' {
3938
+ background: $content-bg-color-alt2;
3939
+ border: $border-light;
3940
+ border-width: 0 0 1px 1px;
3941
+ font-size: $text-base;
3942
+ font-weight: $pv-comment-tile-font-weight;
3943
+ line-height: 16px;
3944
+ padding: 0;
3945
+ left: 15px;
3946
+ top: 14px;
3947
+ position: absolute;
3948
+ text-align: left;
3949
+ }
3950
+ }
3951
+
3936
3952
  .e-pv-comment-panel-title-close-div.e-btn {
3937
3953
  background: $pv-title-close-background;
3938
3954
  border: $pv-title-close-border;
@@ -3942,17 +3958,12 @@ $pv-eye-icon-margin-top: 3px !default;
3942
3958
  }
3943
3959
  height: $pv-title-close-height;
3944
3960
  position: $pv-title-close-position;
3945
- @if $skin-name != 'Material3' {
3946
- right: 11px;
3947
- top: 5px;
3948
- }
3961
+ right: 11px;
3962
+ top: 5px;
3949
3963
  width: $pv-title-close-width;
3950
3964
  @if $skin-name == 'FluentUI' {
3951
3965
  padding: 4px;
3952
3966
  }
3953
- @if $skin-name == 'Material3' {
3954
- padding: 12px 12px 12px 270px;
3955
- }
3956
3967
  }
3957
3968
 
3958
3969
  @if $skin-name == 'Material3' {
@@ -3965,7 +3976,7 @@ $pv-eye-icon-margin-top: 3px !default;
3965
3976
  @if $skin-name != 'bootstrap5' {
3966
3977
  color: $pv-comment-text-color;
3967
3978
  }
3968
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3979
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3969
3980
  color: $icon-color;
3970
3981
  }
3971
3982
  }
@@ -3973,6 +3984,7 @@ $pv-eye-icon-margin-top: 3px !default;
3973
3984
  .e-pv-comments-panel-text {
3974
3985
  font-size: 15px;
3975
3986
  padding-left: 85px;
3987
+ color: rgba(var(--color-sf-on-surface-variant));
3976
3988
  }
3977
3989
 
3978
3990
  .e-pv-comments-content-container {
@@ -5449,7 +5461,7 @@ $pv-eye-icon-margin-top: 3px !default;
5449
5461
  }
5450
5462
 
5451
5463
  .e-bigger .e-pv-signature-dialog-height {
5452
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5464
+ @if ($skin-name == 'FluentUI') {
5453
5465
  min-height: 592px;
5454
5466
  }
5455
5467
  }
@@ -3933,6 +3933,22 @@ $pv-eye-icon-margin-top: 3px !default;
3933
3933
  text-align: left;
3934
3934
  }
3935
3935
 
3936
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3937
+ @if $skin-name == 'Material3' {
3938
+ background: $content-bg-color-alt2;
3939
+ border: $border-light;
3940
+ border-width: 0 0 1px 1px;
3941
+ font-size: $text-base;
3942
+ font-weight: $pv-comment-tile-font-weight;
3943
+ line-height: 16px;
3944
+ padding: 0;
3945
+ left: 15px;
3946
+ top: 14px;
3947
+ position: absolute;
3948
+ text-align: left;
3949
+ }
3950
+ }
3951
+
3936
3952
  .e-pv-comment-panel-title-close-div.e-btn {
3937
3953
  background: $pv-title-close-background;
3938
3954
  border: $pv-title-close-border;
@@ -3942,17 +3958,12 @@ $pv-eye-icon-margin-top: 3px !default;
3942
3958
  }
3943
3959
  height: $pv-title-close-height;
3944
3960
  position: $pv-title-close-position;
3945
- @if $skin-name != 'Material3' {
3946
- right: 11px;
3947
- top: 5px;
3948
- }
3961
+ right: 11px;
3962
+ top: 5px;
3949
3963
  width: $pv-title-close-width;
3950
3964
  @if $skin-name == 'FluentUI' {
3951
3965
  padding: 4px;
3952
3966
  }
3953
- @if $skin-name == 'Material3' {
3954
- padding: 12px 12px 12px 270px;
3955
- }
3956
3967
  }
3957
3968
 
3958
3969
  @if $skin-name == 'Material3' {
@@ -3965,7 +3976,7 @@ $pv-eye-icon-margin-top: 3px !default;
3965
3976
  @if $skin-name != 'bootstrap5' {
3966
3977
  color: $pv-comment-text-color;
3967
3978
  }
3968
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3979
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3969
3980
  color: $icon-color;
3970
3981
  }
3971
3982
  }
@@ -3973,6 +3984,7 @@ $pv-eye-icon-margin-top: 3px !default;
3973
3984
  .e-pv-comments-panel-text {
3974
3985
  font-size: 15px;
3975
3986
  padding-left: 85px;
3987
+ color: rgba(var(--color-sf-on-surface-variant));
3976
3988
  }
3977
3989
 
3978
3990
  .e-pv-comments-content-container {
@@ -5449,7 +5461,7 @@ $pv-eye-icon-margin-top: 3px !default;
5449
5461
  }
5450
5462
 
5451
5463
  .e-bigger .e-pv-signature-dialog-height {
5452
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5464
+ @if ($skin-name == 'FluentUI') {
5453
5465
  min-height: 592px;
5454
5466
  }
5455
5467
  }
@@ -1404,10 +1404,12 @@ $pivotpager-single-size-title-padding: 8px !default;
1404
1404
  .e-pivotcell-container {
1405
1405
  align-items: center;
1406
1406
  display: flex;
1407
+ max-height: inherit;
1407
1408
 
1408
1409
  .e-stackedheadertext,
1409
1410
  .e-headertext {
1410
1411
  &.e-cellvalue {
1412
+ align-self: stretch;
1411
1413
  overflow: hidden;
1412
1414
  text-overflow: ellipsis;
1413
1415
  width: 100%;
@@ -2161,6 +2163,7 @@ $pivotpager-single-size-title-padding: 8px !default;
2161
2163
  display: inline-block;
2162
2164
  height: 100%;
2163
2165
  vertical-align: top;
2166
+ width: 100%;
2164
2167
  }
2165
2168
 
2166
2169
  /* stylelint-disable */
@@ -1401,10 +1401,12 @@ $pivotpager-single-size-title-padding: 8px !default;
1401
1401
  .e-pivotcell-container {
1402
1402
  align-items: center;
1403
1403
  display: flex;
1404
+ max-height: inherit;
1404
1405
 
1405
1406
  .e-stackedheadertext,
1406
1407
  .e-headertext {
1407
1408
  &.e-cellvalue {
1409
+ align-self: stretch;
1408
1410
  overflow: hidden;
1409
1411
  text-overflow: ellipsis;
1410
1412
  width: 100%;
@@ -2158,6 +2160,7 @@ $pivotpager-single-size-title-padding: 8px !default;
2158
2160
  display: inline-block;
2159
2161
  height: 100%;
2160
2162
  vertical-align: top;
2163
+ width: 100%;
2161
2164
  }
2162
2165
 
2163
2166
  /* stylelint-disable */
@@ -1401,10 +1401,12 @@ $pivotpager-single-size-title-padding: 8px !default;
1401
1401
  .e-pivotcell-container {
1402
1402
  align-items: center;
1403
1403
  display: flex;
1404
+ max-height: inherit;
1404
1405
 
1405
1406
  .e-stackedheadertext,
1406
1407
  .e-headertext {
1407
1408
  &.e-cellvalue {
1409
+ align-self: stretch;
1408
1410
  overflow: hidden;
1409
1411
  text-overflow: ellipsis;
1410
1412
  width: 100%;
@@ -2158,6 +2160,7 @@ $pivotpager-single-size-title-padding: 8px !default;
2158
2160
  display: inline-block;
2159
2161
  height: 100%;
2160
2162
  vertical-align: top;
2163
+ width: 100%;
2161
2164
  }
2162
2165
 
2163
2166
  /* stylelint-disable */