@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
@@ -60634,7 +60634,8 @@ $ddl-chip-bigger-content-padding: 0 !default;
60634
60634
  }
60635
60635
  }
60636
60636
 
60637
- .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
60637
+ .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon,
60638
+ .e-bigger.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
60638
60639
  @if $ddl-multiselect-skin-name != 'Material3' {
60639
60640
  margin-top: $ddl-icon-margin-top-bigger;
60640
60641
  }
@@ -61666,6 +61667,11 @@ ejs-multiselect {
61666
61667
  }
61667
61668
  }
61668
61669
 
61670
+ .e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
61671
+ .e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
61672
+ margin-top: $ddl-small-ddl-icon-top;
61673
+ }
61674
+
61669
61675
  .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
61670
61676
  @if ddl-multiselect-skin-name == 'Material3' {
61671
61677
  height: $ddl-small-clear-icon-height;
@@ -61697,6 +61703,11 @@ ejs-multiselect {
61697
61703
  }
61698
61704
  }
61699
61705
 
61706
+ .e-bigger.e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
61707
+ .e-bigger.e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
61708
+ margin-top: $ddl-bigger-small-ddl-icon-top;
61709
+ }
61710
+
61700
61711
  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
61701
61712
  height: $ddl-bigger-small-chip-close-square;
61702
61713
  width: $ddl-bigger-small-chip-close-width;
@@ -78457,6 +78468,11 @@ $grid-dropitems-count-margin-left: -9px !default;
78457
78468
  overflow: visible;
78458
78469
  }
78459
78470
 
78471
+ .e-headercell.e-templatecell .e-headercelldiv {
78472
+ height: auto;
78473
+ min-height: $grid-header-height;
78474
+ }
78475
+
78460
78476
  .e-gridheader .e-headercontent .e-rightalign .e-headercelldiv.e-headerchkcelldiv {
78461
78477
  padding: 0 .6em;
78462
78478
  }
@@ -82608,6 +82624,10 @@ $grid-dropitems-count-margin-left: -9px !default;
82608
82624
  cursor: move;
82609
82625
  }
82610
82626
 
82627
+ & .e-notallowedcur .e-row:hover .e-rowdragdrop {
82628
+ cursor: not-allowed;
82629
+ }
82630
+
82611
82631
  .e-sortnumber {
82612
82632
  @if $grid-skin == 'material3' {
82613
82633
  background: $grid-sortnumber-bg-color;
@@ -90239,7 +90259,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
90239
90259
 
90240
90260
  .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
90241
90261
  display: grid;
90242
- grid-template-columns: repeat(6, 1fr);
90262
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
90243
90263
  gap: 6px;
90244
90264
 
90245
90265
  .e-btn.e-control {
@@ -90256,7 +90276,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
90256
90276
 
90257
90277
  .e-rte-emojisearch-btn {
90258
90278
  display: grid;
90259
- grid-template-columns: repeat(6, 1fr);
90279
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
90260
90280
  gap: 6px;
90261
90281
  height: 0;
90262
90282
 
@@ -102436,6 +102456,22 @@ $pv-search-btn-width-big: 32px !default;
102436
102456
  text-align: left;
102437
102457
  }
102438
102458
 
102459
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
102460
+ @if $skin-name == 'Material3' {
102461
+ background: $content-bg-color-alt2;
102462
+ border: $border-light;
102463
+ border-width: 0 0 1px 1px;
102464
+ font-size: $text-base;
102465
+ font-weight: $pv-comment-tile-font-weight;
102466
+ line-height: 16px;
102467
+ padding: 0;
102468
+ left: 15px;
102469
+ top: 14px;
102470
+ position: absolute;
102471
+ text-align: left;
102472
+ }
102473
+ }
102474
+
102439
102475
  .e-pv-comment-panel-title-close-div.e-btn {
102440
102476
  background: $pv-title-close-background;
102441
102477
  border: $pv-title-close-border;
@@ -102445,17 +102481,12 @@ $pv-search-btn-width-big: 32px !default;
102445
102481
  }
102446
102482
  height: $pv-title-close-height;
102447
102483
  position: $pv-title-close-position;
102448
- @if $skin-name != 'Material3' {
102449
- right: 11px;
102450
- top: 5px;
102451
- }
102484
+ right: 11px;
102485
+ top: 5px;
102452
102486
  width: $pv-title-close-width;
102453
102487
  @if $skin-name == 'FluentUI' {
102454
102488
  padding: 4px;
102455
102489
  }
102456
- @if $skin-name == 'Material3' {
102457
- padding: 12px 12px 12px 270px;
102458
- }
102459
102490
  }
102460
102491
 
102461
102492
  @if $skin-name == 'Material3' {
@@ -102468,7 +102499,7 @@ $pv-search-btn-width-big: 32px !default;
102468
102499
  @if $skin-name != 'bootstrap5' {
102469
102500
  color: $pv-comment-text-color;
102470
102501
  }
102471
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
102502
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
102472
102503
  color: $icon-color;
102473
102504
  }
102474
102505
  }
@@ -102476,6 +102507,7 @@ $pv-search-btn-width-big: 32px !default;
102476
102507
  .e-pv-comments-panel-text {
102477
102508
  font-size: 15px;
102478
102509
  padding-left: 85px;
102510
+ color: rgba(var(--color-sf-on-surface-variant));
102479
102511
  }
102480
102512
 
102481
102513
  .e-pv-comments-content-container {
@@ -103952,7 +103984,7 @@ $pv-search-btn-width-big: 32px !default;
103952
103984
  }
103953
103985
 
103954
103986
  .e-bigger .e-pv-signature-dialog-height {
103955
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
103987
+ @if ($skin-name == 'FluentUI') {
103956
103988
  min-height: 592px;
103957
103989
  }
103958
103990
  }
@@ -104121,6 +104153,7 @@ $pv-search-btn-width-big: 32px !default;
104121
104153
  .e-pv-title-close-icon::before,
104122
104154
  .e-pv-annotation-tools-close-icon::before,
104123
104155
  .e-pv-annotation-popup-close::before {
104156
+ color: $pv-icon-color;
104124
104157
  content: '\e7e7';
104125
104158
  }
104126
104159
 
@@ -111036,10 +111069,12 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
111036
111069
  .e-pivotcell-container {
111037
111070
  align-items: center;
111038
111071
  display: flex;
111072
+ max-height: inherit;
111039
111073
 
111040
111074
  .e-stackedheadertext,
111041
111075
  .e-headertext {
111042
111076
  &.e-cellvalue {
111077
+ align-self: stretch;
111043
111078
  overflow: hidden;
111044
111079
  text-overflow: ellipsis;
111045
111080
  width: 100%;
@@ -111793,6 +111828,7 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
111793
111828
  display: inline-block;
111794
111829
  height: 100%;
111795
111830
  vertical-align: top;
111831
+ width: 100%;
111796
111832
  }
111797
111833
 
111798
111834
  /* stylelint-disable */
@@ -3930,6 +3930,22 @@ $pv-eye-icon-margin-top: 3px !default;
3930
3930
  text-align: left;
3931
3931
  }
3932
3932
 
3933
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3934
+ @if $skin-name == 'Material3' {
3935
+ background: $content-bg-color-alt2;
3936
+ border: $border-light;
3937
+ border-width: 0 0 1px 1px;
3938
+ font-size: $text-base;
3939
+ font-weight: $pv-comment-tile-font-weight;
3940
+ line-height: 16px;
3941
+ padding: 0;
3942
+ left: 15px;
3943
+ top: 14px;
3944
+ position: absolute;
3945
+ text-align: left;
3946
+ }
3947
+ }
3948
+
3933
3949
  .e-pv-comment-panel-title-close-div.e-btn {
3934
3950
  background: $pv-title-close-background;
3935
3951
  border: $pv-title-close-border;
@@ -3939,17 +3955,12 @@ $pv-eye-icon-margin-top: 3px !default;
3939
3955
  }
3940
3956
  height: $pv-title-close-height;
3941
3957
  position: $pv-title-close-position;
3942
- @if $skin-name != 'Material3' {
3943
- right: 11px;
3944
- top: 5px;
3945
- }
3958
+ right: 11px;
3959
+ top: 5px;
3946
3960
  width: $pv-title-close-width;
3947
3961
  @if $skin-name == 'FluentUI' {
3948
3962
  padding: 4px;
3949
3963
  }
3950
- @if $skin-name == 'Material3' {
3951
- padding: 12px 12px 12px 270px;
3952
- }
3953
3964
  }
3954
3965
 
3955
3966
  @if $skin-name == 'Material3' {
@@ -3962,7 +3973,7 @@ $pv-eye-icon-margin-top: 3px !default;
3962
3973
  @if $skin-name != 'bootstrap5' {
3963
3974
  color: $pv-comment-text-color;
3964
3975
  }
3965
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3976
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3966
3977
  color: $icon-color;
3967
3978
  }
3968
3979
  }
@@ -3970,6 +3981,7 @@ $pv-eye-icon-margin-top: 3px !default;
3970
3981
  .e-pv-comments-panel-text {
3971
3982
  font-size: 15px;
3972
3983
  padding-left: 85px;
3984
+ color: rgba(var(--color-sf-on-surface-variant));
3973
3985
  }
3974
3986
 
3975
3987
  .e-pv-comments-content-container {
@@ -5446,7 +5458,7 @@ $pv-eye-icon-margin-top: 3px !default;
5446
5458
  }
5447
5459
 
5448
5460
  .e-bigger .e-pv-signature-dialog-height {
5449
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5461
+ @if ($skin-name == 'FluentUI') {
5450
5462
  min-height: 592px;
5451
5463
  }
5452
5464
  }
@@ -3930,6 +3930,22 @@ $pv-eye-icon-margin-top: 3px !default;
3930
3930
  text-align: left;
3931
3931
  }
3932
3932
 
3933
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3934
+ @if $skin-name == 'Material3' {
3935
+ background: $content-bg-color-alt2;
3936
+ border: $border-light;
3937
+ border-width: 0 0 1px 1px;
3938
+ font-size: $text-base;
3939
+ font-weight: $pv-comment-tile-font-weight;
3940
+ line-height: 16px;
3941
+ padding: 0;
3942
+ left: 15px;
3943
+ top: 14px;
3944
+ position: absolute;
3945
+ text-align: left;
3946
+ }
3947
+ }
3948
+
3933
3949
  .e-pv-comment-panel-title-close-div.e-btn {
3934
3950
  background: $pv-title-close-background;
3935
3951
  border: $pv-title-close-border;
@@ -3939,17 +3955,12 @@ $pv-eye-icon-margin-top: 3px !default;
3939
3955
  }
3940
3956
  height: $pv-title-close-height;
3941
3957
  position: $pv-title-close-position;
3942
- @if $skin-name != 'Material3' {
3943
- right: 11px;
3944
- top: 5px;
3945
- }
3958
+ right: 11px;
3959
+ top: 5px;
3946
3960
  width: $pv-title-close-width;
3947
3961
  @if $skin-name == 'FluentUI' {
3948
3962
  padding: 4px;
3949
3963
  }
3950
- @if $skin-name == 'Material3' {
3951
- padding: 12px 12px 12px 270px;
3952
- }
3953
3964
  }
3954
3965
 
3955
3966
  @if $skin-name == 'Material3' {
@@ -3962,7 +3973,7 @@ $pv-eye-icon-margin-top: 3px !default;
3962
3973
  @if $skin-name != 'bootstrap5' {
3963
3974
  color: $pv-comment-text-color;
3964
3975
  }
3965
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3976
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3966
3977
  color: $icon-color;
3967
3978
  }
3968
3979
  }
@@ -3970,6 +3981,7 @@ $pv-eye-icon-margin-top: 3px !default;
3970
3981
  .e-pv-comments-panel-text {
3971
3982
  font-size: 15px;
3972
3983
  padding-left: 85px;
3984
+ color: rgba(var(--color-sf-on-surface-variant));
3973
3985
  }
3974
3986
 
3975
3987
  .e-pv-comments-content-container {
@@ -5446,7 +5458,7 @@ $pv-eye-icon-margin-top: 3px !default;
5446
5458
  }
5447
5459
 
5448
5460
  .e-bigger .e-pv-signature-dialog-height {
5449
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5461
+ @if ($skin-name == 'FluentUI') {
5450
5462
  min-height: 592px;
5451
5463
  }
5452
5464
  }
@@ -3976,6 +3976,22 @@ $pv-eye-icon-margin-top: 3px !default;
3976
3976
  text-align: left;
3977
3977
  }
3978
3978
 
3979
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3980
+ @if $skin-name == 'Material3' {
3981
+ background: $content-bg-color-alt2;
3982
+ border: $border-light;
3983
+ border-width: 0 0 1px 1px;
3984
+ font-size: $text-base;
3985
+ font-weight: $pv-comment-tile-font-weight;
3986
+ line-height: 16px;
3987
+ padding: 0;
3988
+ left: 15px;
3989
+ top: 14px;
3990
+ position: absolute;
3991
+ text-align: left;
3992
+ }
3993
+ }
3994
+
3979
3995
  .e-pv-comment-panel-title-close-div.e-btn {
3980
3996
  background: $pv-title-close-background;
3981
3997
  border: $pv-title-close-border;
@@ -3985,17 +4001,12 @@ $pv-eye-icon-margin-top: 3px !default;
3985
4001
  }
3986
4002
  height: $pv-title-close-height;
3987
4003
  position: $pv-title-close-position;
3988
- @if $skin-name != 'Material3' {
3989
- right: 11px;
3990
- top: 5px;
3991
- }
4004
+ right: 11px;
4005
+ top: 5px;
3992
4006
  width: $pv-title-close-width;
3993
4007
  @if $skin-name == 'FluentUI' {
3994
4008
  padding: 4px;
3995
4009
  }
3996
- @if $skin-name == 'Material3' {
3997
- padding: 12px 12px 12px 270px;
3998
- }
3999
4010
  }
4000
4011
 
4001
4012
  @if $skin-name == 'Material3' {
@@ -4008,7 +4019,7 @@ $pv-eye-icon-margin-top: 3px !default;
4008
4019
  @if $skin-name != 'bootstrap5' {
4009
4020
  color: $pv-comment-text-color;
4010
4021
  }
4011
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
4022
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
4012
4023
  color: $icon-color;
4013
4024
  }
4014
4025
  }
@@ -4016,6 +4027,7 @@ $pv-eye-icon-margin-top: 3px !default;
4016
4027
  .e-pv-comments-panel-text {
4017
4028
  font-size: 15px;
4018
4029
  padding-left: 85px;
4030
+ color: rgba(var(--color-sf-on-surface-variant));
4019
4031
  }
4020
4032
 
4021
4033
  .e-pv-comments-content-container {
@@ -5492,7 +5504,7 @@ $pv-eye-icon-margin-top: 3px !default;
5492
5504
  }
5493
5505
 
5494
5506
  .e-bigger .e-pv-signature-dialog-height {
5495
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5507
+ @if ($skin-name == 'FluentUI') {
5496
5508
  min-height: 592px;
5497
5509
  }
5498
5510
  }
@@ -3924,6 +3924,22 @@ $pv-eye-icon-margin-top: 3px !default;
3924
3924
  text-align: left;
3925
3925
  }
3926
3926
 
3927
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3928
+ @if $skin-name == 'Material3' {
3929
+ background: $content-bg-color-alt2;
3930
+ border: $border-light;
3931
+ border-width: 0 0 1px 1px;
3932
+ font-size: $text-base;
3933
+ font-weight: $pv-comment-tile-font-weight;
3934
+ line-height: 16px;
3935
+ padding: 0;
3936
+ left: 15px;
3937
+ top: 14px;
3938
+ position: absolute;
3939
+ text-align: left;
3940
+ }
3941
+ }
3942
+
3927
3943
  .e-pv-comment-panel-title-close-div.e-btn {
3928
3944
  background: $pv-title-close-background;
3929
3945
  border: $pv-title-close-border;
@@ -3933,17 +3949,12 @@ $pv-eye-icon-margin-top: 3px !default;
3933
3949
  }
3934
3950
  height: $pv-title-close-height;
3935
3951
  position: $pv-title-close-position;
3936
- @if $skin-name != 'Material3' {
3937
- right: 11px;
3938
- top: 5px;
3939
- }
3952
+ right: 11px;
3953
+ top: 5px;
3940
3954
  width: $pv-title-close-width;
3941
3955
  @if $skin-name == 'FluentUI' {
3942
3956
  padding: 4px;
3943
3957
  }
3944
- @if $skin-name == 'Material3' {
3945
- padding: 12px 12px 12px 270px;
3946
- }
3947
3958
  }
3948
3959
 
3949
3960
  @if $skin-name == 'Material3' {
@@ -3956,7 +3967,7 @@ $pv-eye-icon-margin-top: 3px !default;
3956
3967
  @if $skin-name != 'bootstrap5' {
3957
3968
  color: $pv-comment-text-color;
3958
3969
  }
3959
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3970
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3960
3971
  color: $icon-color;
3961
3972
  }
3962
3973
  }
@@ -3964,6 +3975,7 @@ $pv-eye-icon-margin-top: 3px !default;
3964
3975
  .e-pv-comments-panel-text {
3965
3976
  font-size: 15px;
3966
3977
  padding-left: 85px;
3978
+ color: rgba(var(--color-sf-on-surface-variant));
3967
3979
  }
3968
3980
 
3969
3981
  .e-pv-comments-content-container {
@@ -5440,7 +5452,7 @@ $pv-eye-icon-margin-top: 3px !default;
5440
5452
  }
5441
5453
 
5442
5454
  .e-bigger .e-pv-signature-dialog-height {
5443
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5455
+ @if ($skin-name == 'FluentUI') {
5444
5456
  min-height: 592px;
5445
5457
  }
5446
5458
  }
@@ -3924,6 +3924,22 @@ $pv-eye-icon-margin-top: 3px !default;
3924
3924
  text-align: left;
3925
3925
  }
3926
3926
 
3927
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3928
+ @if $skin-name == 'Material3' {
3929
+ background: $content-bg-color-alt2;
3930
+ border: $border-light;
3931
+ border-width: 0 0 1px 1px;
3932
+ font-size: $text-base;
3933
+ font-weight: $pv-comment-tile-font-weight;
3934
+ line-height: 16px;
3935
+ padding: 0;
3936
+ left: 15px;
3937
+ top: 14px;
3938
+ position: absolute;
3939
+ text-align: left;
3940
+ }
3941
+ }
3942
+
3927
3943
  .e-pv-comment-panel-title-close-div.e-btn {
3928
3944
  background: $pv-title-close-background;
3929
3945
  border: $pv-title-close-border;
@@ -3933,17 +3949,12 @@ $pv-eye-icon-margin-top: 3px !default;
3933
3949
  }
3934
3950
  height: $pv-title-close-height;
3935
3951
  position: $pv-title-close-position;
3936
- @if $skin-name != 'Material3' {
3937
- right: 11px;
3938
- top: 5px;
3939
- }
3952
+ right: 11px;
3953
+ top: 5px;
3940
3954
  width: $pv-title-close-width;
3941
3955
  @if $skin-name == 'FluentUI' {
3942
3956
  padding: 4px;
3943
3957
  }
3944
- @if $skin-name == 'Material3' {
3945
- padding: 12px 12px 12px 270px;
3946
- }
3947
3958
  }
3948
3959
 
3949
3960
  @if $skin-name == 'Material3' {
@@ -3956,7 +3967,7 @@ $pv-eye-icon-margin-top: 3px !default;
3956
3967
  @if $skin-name != 'bootstrap5' {
3957
3968
  color: $pv-comment-text-color;
3958
3969
  }
3959
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3970
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3960
3971
  color: $icon-color;
3961
3972
  }
3962
3973
  }
@@ -3964,6 +3975,7 @@ $pv-eye-icon-margin-top: 3px !default;
3964
3975
  .e-pv-comments-panel-text {
3965
3976
  font-size: 15px;
3966
3977
  padding-left: 85px;
3978
+ color: rgba(var(--color-sf-on-surface-variant));
3967
3979
  }
3968
3980
 
3969
3981
  .e-pv-comments-content-container {
@@ -5440,7 +5452,7 @@ $pv-eye-icon-margin-top: 3px !default;
5440
5452
  }
5441
5453
 
5442
5454
  .e-bigger .e-pv-signature-dialog-height {
5443
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5455
+ @if ($skin-name == 'FluentUI') {
5444
5456
  min-height: 592px;
5445
5457
  }
5446
5458
  }
@@ -3927,6 +3927,22 @@ $pv-eye-icon-margin-top: 3px !default;
3927
3927
  text-align: left;
3928
3928
  }
3929
3929
 
3930
+ .e-pv-mobile-comments-container .e-pv-comment-panel-title {
3931
+ @if $skin-name == 'Material3' {
3932
+ background: $content-bg-color-alt2;
3933
+ border: $border-light;
3934
+ border-width: 0 0 1px 1px;
3935
+ font-size: $text-base;
3936
+ font-weight: $pv-comment-tile-font-weight;
3937
+ line-height: 16px;
3938
+ padding: 0;
3939
+ left: 15px;
3940
+ top: 14px;
3941
+ position: absolute;
3942
+ text-align: left;
3943
+ }
3944
+ }
3945
+
3930
3946
  .e-pv-comment-panel-title-close-div.e-btn {
3931
3947
  background: $pv-title-close-background;
3932
3948
  border: $pv-title-close-border;
@@ -3936,17 +3952,12 @@ $pv-eye-icon-margin-top: 3px !default;
3936
3952
  }
3937
3953
  height: $pv-title-close-height;
3938
3954
  position: $pv-title-close-position;
3939
- @if $skin-name != 'Material3' {
3940
- right: 11px;
3941
- top: 5px;
3942
- }
3955
+ right: 11px;
3956
+ top: 5px;
3943
3957
  width: $pv-title-close-width;
3944
3958
  @if $skin-name == 'FluentUI' {
3945
3959
  padding: 4px;
3946
3960
  }
3947
- @if $skin-name == 'Material3' {
3948
- padding: 12px 12px 12px 270px;
3949
- }
3950
3961
  }
3951
3962
 
3952
3963
  @if $skin-name == 'Material3' {
@@ -3959,7 +3970,7 @@ $pv-eye-icon-margin-top: 3px !default;
3959
3970
  @if $skin-name != 'bootstrap5' {
3960
3971
  color: $pv-comment-text-color;
3961
3972
  }
3962
- @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
3973
+ @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
3963
3974
  color: $icon-color;
3964
3975
  }
3965
3976
  }
@@ -3967,6 +3978,7 @@ $pv-eye-icon-margin-top: 3px !default;
3967
3978
  .e-pv-comments-panel-text {
3968
3979
  font-size: 15px;
3969
3980
  padding-left: 85px;
3981
+ color: rgba(var(--color-sf-on-surface-variant));
3970
3982
  }
3971
3983
 
3972
3984
  .e-pv-comments-content-container {
@@ -5443,7 +5455,7 @@ $pv-eye-icon-margin-top: 3px !default;
5443
5455
  }
5444
5456
 
5445
5457
  .e-bigger .e-pv-signature-dialog-height {
5446
- @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
5458
+ @if ($skin-name == 'FluentUI') {
5447
5459
  min-height: 592px;
5448
5460
  }
5449
5461
  }
@@ -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
  }