@syncfusion/blazor-themes 27.1.50 → 27.1.51

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 (152) hide show
  1. package/SCSS-Themes/bds-dark.scss +331 -218
  2. package/SCSS-Themes/bds.scss +331 -218
  3. package/SCSS-Themes/bootstrap-dark.scss +330 -218
  4. package/SCSS-Themes/bootstrap.scss +330 -218
  5. package/SCSS-Themes/bootstrap4.scss +331 -218
  6. package/SCSS-Themes/bootstrap5-dark.scss +332 -220
  7. package/SCSS-Themes/bootstrap5.3.scss +332 -220
  8. package/SCSS-Themes/bootstrap5.scss +331 -219
  9. package/SCSS-Themes/buttons/radio-button/bds-dark.scss +2 -1
  10. package/SCSS-Themes/buttons/radio-button/bds.scss +2 -1
  11. package/SCSS-Themes/buttons/radio-button/bootstrap-dark.scss +1 -1
  12. package/SCSS-Themes/buttons/radio-button/bootstrap.scss +1 -1
  13. package/SCSS-Themes/buttons/radio-button/bootstrap4.scss +2 -1
  14. package/SCSS-Themes/buttons/radio-button/bootstrap5-dark.scss +1 -1
  15. package/SCSS-Themes/buttons/radio-button/bootstrap5.3.scss +1 -1
  16. package/SCSS-Themes/buttons/radio-button/bootstrap5.scss +2 -2
  17. package/SCSS-Themes/buttons/radio-button/fabric-dark.scss +1 -1
  18. package/SCSS-Themes/buttons/radio-button/fabric.scss +1 -1
  19. package/SCSS-Themes/buttons/radio-button/fluent-dark.scss +1 -1
  20. package/SCSS-Themes/buttons/radio-button/fluent.scss +1 -1
  21. package/SCSS-Themes/buttons/radio-button/fluent2-dark.scss +1 -1
  22. package/SCSS-Themes/buttons/radio-button/fluent2.scss +1 -1
  23. package/SCSS-Themes/buttons/radio-button/highcontrast.scss +1 -1
  24. package/SCSS-Themes/buttons/radio-button/material-dark.scss +1 -1
  25. package/SCSS-Themes/buttons/radio-button/material.scss +1 -1
  26. package/SCSS-Themes/buttons/radio-button/material3-dark.scss +1 -1
  27. package/SCSS-Themes/buttons/radio-button/material3.scss +1 -1
  28. package/SCSS-Themes/buttons/radio-button/tailwind-dark.scss +2 -1
  29. package/SCSS-Themes/buttons/radio-button/tailwind.scss +2 -1
  30. package/SCSS-Themes/dropdowns/multi-select/bds-dark.scss +4 -0
  31. package/SCSS-Themes/dropdowns/multi-select/bds.scss +4 -0
  32. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +4 -0
  33. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +4 -0
  34. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +4 -0
  35. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +4 -0
  36. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.3.scss +4 -0
  37. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +4 -0
  38. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +4 -0
  39. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +4 -0
  40. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +4 -0
  41. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +4 -0
  42. package/SCSS-Themes/dropdowns/multi-select/fluent2-dark.scss +4 -0
  43. package/SCSS-Themes/dropdowns/multi-select/fluent2.scss +4 -0
  44. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +4 -0
  45. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +4 -0
  46. package/SCSS-Themes/dropdowns/multi-select/material.scss +4 -0
  47. package/SCSS-Themes/dropdowns/multi-select/material3-dark.scss +4 -0
  48. package/SCSS-Themes/dropdowns/multi-select/material3.scss +4 -0
  49. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +4 -0
  50. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +4 -0
  51. package/SCSS-Themes/fabric-dark.scss +330 -218
  52. package/SCSS-Themes/fabric.scss +330 -218
  53. package/SCSS-Themes/fluent-dark.scss +331 -219
  54. package/SCSS-Themes/fluent.scss +331 -219
  55. package/SCSS-Themes/fluent2-dark.scss +330 -218
  56. package/SCSS-Themes/fluent2.scss +330 -218
  57. package/SCSS-Themes/grids/grid/bds-dark.scss +22 -6
  58. package/SCSS-Themes/grids/grid/bds.scss +22 -6
  59. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +22 -6
  60. package/SCSS-Themes/grids/grid/bootstrap.scss +22 -6
  61. package/SCSS-Themes/grids/grid/bootstrap4.scss +22 -6
  62. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +22 -6
  63. package/SCSS-Themes/grids/grid/bootstrap5.3.scss +22 -6
  64. package/SCSS-Themes/grids/grid/bootstrap5.scss +22 -6
  65. package/SCSS-Themes/grids/grid/fabric-dark.scss +22 -6
  66. package/SCSS-Themes/grids/grid/fabric.scss +22 -6
  67. package/SCSS-Themes/grids/grid/fluent-dark.scss +23 -7
  68. package/SCSS-Themes/grids/grid/fluent.scss +23 -7
  69. package/SCSS-Themes/grids/grid/fluent2-dark.scss +22 -6
  70. package/SCSS-Themes/grids/grid/fluent2.scss +22 -6
  71. package/SCSS-Themes/grids/grid/highcontrast.scss +22 -6
  72. package/SCSS-Themes/grids/grid/material-dark.scss +22 -6
  73. package/SCSS-Themes/grids/grid/material.scss +22 -6
  74. package/SCSS-Themes/grids/grid/material3-dark.scss +22 -6
  75. package/SCSS-Themes/grids/grid/material3.scss +22 -6
  76. package/SCSS-Themes/grids/grid/tailwind-dark.scss +22 -6
  77. package/SCSS-Themes/grids/grid/tailwind.scss +22 -6
  78. package/SCSS-Themes/highcontrast.scss +331 -219
  79. package/SCSS-Themes/inputs/input/tailwind-dark.scss +1 -1
  80. package/SCSS-Themes/inputs/input/tailwind.scss +1 -1
  81. package/SCSS-Themes/inputs/slider/bds-dark.scss +5 -7
  82. package/SCSS-Themes/inputs/slider/bds.scss +5 -7
  83. package/SCSS-Themes/inputs/slider/bootstrap-dark.scss +5 -7
  84. package/SCSS-Themes/inputs/slider/bootstrap.scss +5 -7
  85. package/SCSS-Themes/inputs/slider/bootstrap4.scss +5 -7
  86. package/SCSS-Themes/inputs/slider/bootstrap5-dark.scss +5 -7
  87. package/SCSS-Themes/inputs/slider/bootstrap5.3.scss +5 -7
  88. package/SCSS-Themes/inputs/slider/bootstrap5.scss +5 -7
  89. package/SCSS-Themes/inputs/slider/fabric-dark.scss +5 -7
  90. package/SCSS-Themes/inputs/slider/fabric.scss +5 -7
  91. package/SCSS-Themes/inputs/slider/fluent-dark.scss +5 -7
  92. package/SCSS-Themes/inputs/slider/fluent.scss +5 -7
  93. package/SCSS-Themes/inputs/slider/fluent2-dark.scss +5 -7
  94. package/SCSS-Themes/inputs/slider/fluent2.scss +5 -7
  95. package/SCSS-Themes/inputs/slider/highcontrast.scss +5 -7
  96. package/SCSS-Themes/inputs/slider/material-dark.scss +5 -7
  97. package/SCSS-Themes/inputs/slider/material.scss +5 -7
  98. package/SCSS-Themes/inputs/slider/material3-dark.scss +5 -7
  99. package/SCSS-Themes/inputs/slider/material3.scss +5 -7
  100. package/SCSS-Themes/inputs/slider/tailwind-dark.scss +5 -7
  101. package/SCSS-Themes/inputs/slider/tailwind.scss +5 -7
  102. package/SCSS-Themes/interactive-chat/ai-assist-view/bds-dark.scss +294 -204
  103. package/SCSS-Themes/interactive-chat/ai-assist-view/bds.scss +294 -204
  104. package/SCSS-Themes/interactive-chat/ai-assist-view/bootstrap-dark.scss +294 -204
  105. package/SCSS-Themes/interactive-chat/ai-assist-view/bootstrap.scss +294 -204
  106. package/SCSS-Themes/interactive-chat/ai-assist-view/bootstrap4.scss +294 -204
  107. package/SCSS-Themes/interactive-chat/ai-assist-view/bootstrap5-dark.scss +294 -204
  108. package/SCSS-Themes/interactive-chat/ai-assist-view/bootstrap5.3.scss +294 -204
  109. package/SCSS-Themes/interactive-chat/ai-assist-view/bootstrap5.scss +294 -204
  110. package/SCSS-Themes/interactive-chat/ai-assist-view/fabric-dark.scss +294 -204
  111. package/SCSS-Themes/interactive-chat/ai-assist-view/fabric.scss +294 -204
  112. package/SCSS-Themes/interactive-chat/ai-assist-view/fluent-dark.scss +294 -204
  113. package/SCSS-Themes/interactive-chat/ai-assist-view/fluent.scss +294 -204
  114. package/SCSS-Themes/interactive-chat/ai-assist-view/fluent2-dark.scss +294 -204
  115. package/SCSS-Themes/interactive-chat/ai-assist-view/fluent2.scss +294 -204
  116. package/SCSS-Themes/interactive-chat/ai-assist-view/highcontrast.scss +295 -205
  117. package/SCSS-Themes/interactive-chat/ai-assist-view/material-dark.scss +294 -204
  118. package/SCSS-Themes/interactive-chat/ai-assist-view/material.scss +294 -204
  119. package/SCSS-Themes/interactive-chat/ai-assist-view/material3-dark.scss +294 -204
  120. package/SCSS-Themes/interactive-chat/ai-assist-view/material3.scss +294 -204
  121. package/SCSS-Themes/interactive-chat/ai-assist-view/tailwind-dark.scss +294 -204
  122. package/SCSS-Themes/interactive-chat/ai-assist-view/tailwind.scss +294 -204
  123. package/SCSS-Themes/lists/list-view/bds-dark.scss +4 -0
  124. package/SCSS-Themes/lists/list-view/bds.scss +4 -0
  125. package/SCSS-Themes/lists/list-view/bootstrap-dark.scss +4 -0
  126. package/SCSS-Themes/lists/list-view/bootstrap.scss +4 -0
  127. package/SCSS-Themes/lists/list-view/bootstrap4.scss +4 -0
  128. package/SCSS-Themes/lists/list-view/bootstrap5-dark.scss +4 -0
  129. package/SCSS-Themes/lists/list-view/bootstrap5.3.scss +4 -0
  130. package/SCSS-Themes/lists/list-view/bootstrap5.scss +4 -0
  131. package/SCSS-Themes/lists/list-view/fabric-dark.scss +4 -0
  132. package/SCSS-Themes/lists/list-view/fabric.scss +4 -0
  133. package/SCSS-Themes/lists/list-view/fluent-dark.scss +4 -0
  134. package/SCSS-Themes/lists/list-view/fluent.scss +4 -0
  135. package/SCSS-Themes/lists/list-view/fluent2-dark.scss +4 -0
  136. package/SCSS-Themes/lists/list-view/fluent2.scss +4 -0
  137. package/SCSS-Themes/lists/list-view/highcontrast.scss +4 -0
  138. package/SCSS-Themes/lists/list-view/material-dark.scss +4 -0
  139. package/SCSS-Themes/lists/list-view/material.scss +4 -0
  140. package/SCSS-Themes/lists/list-view/material3-dark.scss +4 -0
  141. package/SCSS-Themes/lists/list-view/material3.scss +4 -0
  142. package/SCSS-Themes/lists/list-view/tailwind-dark.scss +4 -0
  143. package/SCSS-Themes/lists/list-view/tailwind.scss +4 -0
  144. package/SCSS-Themes/material-dark.scss +330 -218
  145. package/SCSS-Themes/material.scss +330 -218
  146. package/SCSS-Themes/material3-dark.scss +330 -218
  147. package/SCSS-Themes/material3.scss +330 -218
  148. package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +2 -2
  149. package/SCSS-Themes/navigations/treeview/bootstrap5.3.scss +2 -2
  150. package/SCSS-Themes/tailwind-dark.scss +332 -219
  151. package/SCSS-Themes/tailwind.scss +332 -219
  152. package/package.json +1 -1
@@ -36152,13 +36152,11 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
36152
36152
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
36153
36153
  @include alignment(6px, calc(50% - 3px), 'vertical');
36154
36154
  }
36155
- @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
36156
- @if ($skin-name == 'tailwind') {
36157
- left: calc(50%);
36158
- }
36159
- @else {
36160
- @include alignment(4px, calc(50% - 2px), 'vertical');
36161
- }
36155
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
36156
+ @include alignment(4px, calc(50% - 2px), 'vertical');
36157
+ }
36158
+ @if ($skin-name == 'tailwind') {
36159
+ @include alignment(4px, calc(50%), 'vertical');
36162
36160
  }
36163
36161
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
36164
36162
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -41920,7 +41918,7 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
41920
41918
  }
41921
41919
 
41922
41920
  &::before {
41923
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
41921
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
41924
41922
  background-color: $radio-btn-disabled-not-checked-bg-color;
41925
41923
  }
41926
41924
  @else {
@@ -44007,6 +44005,10 @@ $listview-template-focused-multiline-content-color: $content-text-color-selected
44007
44005
  }
44008
44006
  }
44009
44007
 
44008
+ &.e-virtualization .e-list-container{
44009
+ overflow: unset;
44010
+ }
44011
+
44010
44012
  & .e-list-container {
44011
44013
  overflow: hidden;
44012
44014
  position: relative;
@@ -58674,7 +58676,7 @@ $treeview-rtl-icon-margin: 0 -20px 0 0 !default;
58674
58676
  $treeview-icon-padding: 0px !default;
58675
58677
  $treeview-text-padding: 0 8px !default;
58676
58678
  $treeview-text-margin: 0 !default;
58677
- $treeview-image-size: 16px !default;
58679
+ $treeview-image-size: 18px !default;
58678
58680
  $treeview-image-margin: 0 0 0 8px !default;
58679
58681
  $treeview-navigable-icon-image-anchor-margin-bigger: 0 12px 0 8px !default;
58680
58682
  $treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 6px 0 10px !default;
@@ -58682,7 +58684,7 @@ $treeview-navigable-icon-image-anchor-margin: 0 8px 0 0 !default;
58682
58684
  $treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 8px !default;
58683
58685
  $treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
58684
58686
  $treeview-rtl-image-margin: 0 8px 0 0 !default;
58685
- $treeview-image-text-padding: 0 8px !default;
58687
+ $treeview-image-text-padding: 0 12px !default;
58686
58688
  $treeview-icon-image-margin: 0 0 0 8px !default;
58687
58689
  $treeview-rtl-icon-image-margin: 0 8px 0 0 !default;
58688
58690
  $treeview-check-margin: 0 0 0 8px !default;
@@ -67121,6 +67123,10 @@ $ddl-close-down-icon-left: 35px !default;
67121
67123
  display: block;
67122
67124
  }
67123
67125
 
67126
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
67127
+ margin-right: 30px;
67128
+ }
67129
+
67124
67130
  .e-multi-select-wrapper .e-multi-hidden {
67125
67131
  border: 0;
67126
67132
  height: 0;
@@ -84217,7 +84223,12 @@ $grid-checkmark-color: $primary-text-color !default;
84217
84223
  /* stylelint-enable */
84218
84224
 
84219
84225
  .e-dlg-content {
84220
- padding: 24px 27px;
84226
+ @if $grid-skin == 'fluent2' {
84227
+ padding: 24px 27px;
84228
+ }
84229
+ @else {
84230
+ padding: 8px 16px 8px 8px;
84231
+ }
84221
84232
  overflow-y: hidden;
84222
84233
  }
84223
84234
 
@@ -85072,7 +85083,7 @@ $grid-checkmark-color: $primary-text-color !default;
85072
85083
  }
85073
85084
 
85074
85085
  .e-grid-popup {
85075
- position: relative;
85086
+ position: absolute;
85076
85087
  }
85077
85088
 
85078
85089
  #{&}.e-grid,
@@ -87392,6 +87403,12 @@ $grid-checkmark-color: $primary-text-color !default;
87392
87403
  padding: $grid-columnchooser-toolbardiv-padding;
87393
87404
  }
87394
87405
 
87406
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
87407
+ @if $grid-skin == 'fluent' {
87408
+ padding-bottom: 1px;
87409
+ }
87410
+ }
87411
+
87395
87412
  .e-edit-dialog {
87396
87413
  min-height: 350px;
87397
87414
  .e-dlg-content {
@@ -88206,14 +88223,17 @@ $grid-checkmark-color: $primary-text-color !default;
88206
88223
  }
88207
88224
 
88208
88225
  &.e-wrap {
88209
- & .e-gridheader .e-rowcell,
88210
- & .e-gridcontent .e-rowcell,
88226
+ & .e-rowcell,
88211
88227
  & .e-columnheader .e-stackedheadercelldiv,
88212
88228
  & .e-columnheader .e-headercelldiv,
88213
88229
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
88214
88230
  @include wrap-styles;
88215
88231
  }
88216
88232
 
88233
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
88234
+ white-space: nowrap;
88235
+ }
88236
+
88217
88237
  & .e-stackedheader .e-columnheader {
88218
88238
  .e-stackedheadercelldiv,
88219
88239
  .e-headercelldiv {
@@ -88771,7 +88791,8 @@ $grid-checkmark-color: $primary-text-color !default;
88771
88791
  }
88772
88792
 
88773
88793
  @if $grid-skin == 'fluent2' {
88774
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
88794
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
88795
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
88775
88796
  padding: 0 6px;
88776
88797
  }
88777
88798
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -89685,7 +89706,8 @@ $grid-checkmark-color: $primary-text-color !default;
89685
89706
  }
89686
89707
 
89687
89708
  @if $grid-skin == 'fluent2' {
89688
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
89709
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
89710
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
89689
89711
  color: $flyout-text-color-hover;
89690
89712
  }
89691
89713
  }
@@ -137767,6 +137789,8 @@ $aiassist-header-height: 46px !default;
137767
137789
  $aiassist-icon-height: 30px !default;
137768
137790
  $aiassist-icon-width: 30px !default;
137769
137791
  $send-icon-size: 14px !default;
137792
+ $send-icon-bottom: 9px !default;
137793
+ $send-icon-bigger-bottom: 11px !default;
137770
137794
  $aiassist-bigger-header-height: 50px !default;
137771
137795
  $aiassist-bigger-icon-height: 40px !default;
137772
137796
  $aiassist-bigger-icon-width: 40px !default;
@@ -137807,63 +137831,86 @@ $rating-selected-bg-color: $rating-selected-color !default;
137807
137831
  $send-icon-color: $icon-color !default;
137808
137832
  $send-icon-disabled-color: $icon-color-disabled !default;
137809
137833
  $prompt-text-border-color: $flyout-border !default;
137834
+ $tbar-header-btn-focus-box-shadow: $secondary-shadow-focus !default;
137835
+ $tbar-header-hover-bg-color: transparent !default;
137810
137836
 
137811
137837
  @include export-module('aiassistview-bigger') {
137812
137838
  .e-bigger.e-aiassistview,
137813
137839
  .e-bigger .e-aiassistview {
137814
137840
  .e-view-header {
137815
137841
  height: $aiassist-bigger-header-height;
137842
+ .e-toolbar {
137843
+ .e-toolbar-items {
137844
+ .e-toolbar-left {
137845
+ height: calc($aiassist-bigger-header-height - 1px);
137846
+ }
137847
+ .e-toolbar-item {
137848
+ &.e-assist-view-header,
137849
+ &.e-custom-view-header {
137850
+ @if ($skin-name == 'highcontrast') {
137851
+ // To apply box-shadow styling during keyboard navigation
137852
+ padding: 1.5px;
137853
+ }
137854
+ @else {
137855
+ padding: 0;
137856
+ }
137857
+ .e-tbar-btn {
137858
+ padding: 0;
137859
+ .e-btn-icon {
137860
+ padding: 4px 4px 4px 2px;
137861
+ }
137862
+ }
137863
+ }
137864
+ }
137865
+ }
137866
+ }
137816
137867
  }
137817
137868
  .e-view-content {
137818
137869
  height: calc(100% - $aiassist-bigger-header-height);
137819
137870
  }
137820
- .e-views {
137821
- .e-prompt-icon {
137822
- min-height: $aiassist-bigger-icon-height;
137823
- }
137824
- .e-output-icon {
137825
- height: $aiassist-bigger-icon-height;
137826
- }
137827
- .e-prompt-icon,
137828
- .e-output-icon {
137829
- min-width: $aiassist-bigger-icon-width;
137830
- }
137831
- .e-loading-body,
137832
- .e-content-body,
137833
- .e-loading-footer {
137834
- padding: 2px 0 0 10px;
137835
- }
137836
- .e-content-container {
137837
- font-size: 16px;
137838
- .e-prompt-text {
137839
- padding: $prompt-text-bigger-padding;
137840
- line-height: 22px;
137841
- }
137871
+ .e-prompt-icon {
137872
+ min-height: $aiassist-bigger-icon-height;
137873
+ }
137874
+ .e-output-icon {
137875
+ height: $aiassist-bigger-icon-height;
137876
+ }
137877
+ .e-prompt-icon,
137878
+ .e-output-icon {
137879
+ min-width: $aiassist-bigger-icon-width;
137880
+ }
137881
+ .e-loading-body,
137882
+ .e-content-body,
137883
+ .e-loading-footer {
137884
+ padding: 6px 0 0 6px;
137885
+ }
137886
+ .e-prompt-text {
137887
+ padding: $prompt-text-bigger-padding;
137888
+ line-height: 22px;
137889
+ }
137890
+ .e-content-container {
137891
+ font-size: 16px;
137892
+ }
137893
+ .e-suggestion-header {
137894
+ font-size: 16px;
137895
+ font-weight: $suggesstions-header-bigger-font-weight;
137896
+ margin-bottom: 15px;
137897
+ }
137898
+ .e-suggestions {
137899
+ &.e-suggestion-item-template ul li {
137900
+ padding: 0;
137842
137901
  }
137843
- .e-suggestions {
137844
- &.e-suggestion-item-template ul li {
137845
- padding: 0;
137846
- }
137847
- .e-suggestion-header {
137848
- font-size: 16px;
137849
- font-weight: $suggesstions-header-bigger-font-weight;
137850
- margin-bottom: 15px;
137851
- }
137852
- ul {
137853
- li {
137854
- line-height: 22px;
137855
- font-weight: $suggesstions-bigger-font-weight;
137856
- padding: $suggesstions-bigger-list-padding;
137857
- margin: $suggesstions-bigger-list-margin;
137858
- }
137859
- }
137902
+ li {
137903
+ line-height: 22px;
137904
+ font-weight: $suggesstions-bigger-font-weight;
137905
+ padding: $suggesstions-bigger-list-padding;
137906
+ margin: $suggesstions-bigger-list-margin;
137860
137907
  }
137861
137908
  }
137909
+ .e-assist-send {
137910
+ font-size: $send-icon-size-bigger;
137911
+ bottom: $send-icon-bigger-bottom;
137912
+ }
137862
137913
  .e-footer {
137863
- .e-assist-send {
137864
- font-size: $send-icon-size-bigger;
137865
- bottom: 9px;
137866
- }
137867
137914
  .e-input-group.e-control-wrapper.e-multi-line-input {
137868
137915
  .e-textarea {
137869
137916
  min-height: 38px;
@@ -137872,6 +137919,11 @@ $prompt-text-border-color: $flyout-border !default;
137872
137919
  min-height: 28px;
137873
137920
  }
137874
137921
  }
137922
+ &.e-rtl .e-textarea {
137923
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
137924
+ padding: 6px 16px 6px 12px;
137925
+ }
137926
+ }
137875
137927
  }
137876
137928
  }
137877
137929
  .e-stop-response.e-btn-active {
@@ -137883,13 +137935,24 @@ $prompt-text-border-color: $flyout-border !default;
137883
137935
  font-size: $response-stopper-bigger-font-size;
137884
137936
  }
137885
137937
  &.e-rtl {
137886
- .e-views {
137887
- .e-suggestions {
137888
- li {
137889
- margin: $suggesstions-bigger-list-margin-rtl;
137938
+ .e-view-header .e-toolbar-item {
137939
+ &.e-assist-view-header,
137940
+ &.e-custom-view-header {
137941
+ .e-tbar-btn .e-btn-icon {
137942
+ padding: 4px 2px 4px 4px;
137890
137943
  }
137891
137944
  }
137892
137945
  }
137946
+ .e-suggestions {
137947
+ li {
137948
+ margin: $suggesstions-bigger-list-margin-rtl;
137949
+ }
137950
+ }
137951
+ .e-loading-body,
137952
+ .e-content-body,
137953
+ .e-loading-footer {
137954
+ padding: 6px 6px 0 0;
137955
+ }
137893
137956
  }
137894
137957
  }
137895
137958
  }
@@ -137917,14 +137980,29 @@ $prompt-text-border-color: $flyout-border !default;
137917
137980
  width: 100%;
137918
137981
  border-radius: 4px;
137919
137982
  }
137920
- .e-tbar-btn {
137921
- padding: 0;
137983
+ &.e-assist-view-header,
137984
+ &.e-custom-view-header {
137985
+ @if ($skin-name == 'highcontrast') {
137986
+ // To apply box-shadow styling during keyboard navigation
137987
+ padding: 1px;
137988
+ }
137989
+ @else {
137990
+ padding: 0;
137991
+ }
137992
+ .e-tbar-btn {
137993
+ padding: 0;
137994
+ .e-btn-icon {
137995
+ padding: 4px 4px 4px 2px;
137996
+ }
137997
+ }
137998
+ }
137999
+ &.e-active .e-btn {
138000
+ cursor: pointer;
137922
138001
  }
137923
138002
  }
137924
- }
137925
- .e-view-header .e-toolbar-item.e-active .e-btn {
137926
- border-radius: 0;
137927
- cursor: pointer;
138003
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
138004
+ height: calc($aiassist-header-height - 1px);
138005
+ }
137928
138006
  }
137929
138007
  .e-view-container,
137930
138008
  .e-footer {
@@ -137974,36 +138052,94 @@ $prompt-text-border-color: $flyout-border !default;
137974
138052
  }
137975
138053
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
137976
138054
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
137977
- @if $theme-name == 'highcontrast' {
137978
- padding: 6px 0 6px 5px;
137979
- }
137980
- @else {
137981
- padding: 6px 0 6px 2px;
137982
- }
138055
+ padding: 6px 2px;
137983
138056
  }
137984
138057
  }
137985
- .e-views {
138058
+ .e-output-container {
138059
+ width: 90%;
137986
138060
  display: flex;
137987
- justify-content: space-around;
137988
- .e-output-container {
137989
- width: 90%;
137990
- display: flex;
137991
- align-self: flex-start;
137992
- margin: 10px 0;
138061
+ align-self: flex-start;
138062
+ margin: 10px 0;
138063
+ }
138064
+ .e-prompt-icon {
138065
+ margin: 0 0 0 8px;
138066
+ min-height: $aiassist-icon-height;
138067
+ }
138068
+ .e-output-icon {
138069
+ height: $aiassist-icon-height;
138070
+ margin: 0 4px 0 8px;
138071
+ }
138072
+ .e-prompt-icon,
138073
+ .e-output-icon {
138074
+ border-radius: 50%;
138075
+ min-width: $aiassist-icon-width;
138076
+ }
138077
+ .e-loading-body,
138078
+ .e-content-body,
138079
+ .e-loading-footer {
138080
+ padding: 2px 0 0 6px;
138081
+ }
138082
+ .e-content-container {
138083
+ margin-top: 16px;
138084
+ font-size: 14px;
138085
+ justify-content: space-between;
138086
+ }
138087
+ .e-prompt-text {
138088
+ white-space: pre-wrap;
138089
+ height: fit-content;
138090
+ border-radius: $prompt-text-border-radius;
138091
+ padding: $prompt-text-padding;
138092
+ line-height: 20px;
138093
+ }
138094
+ .e-content-footer,
138095
+ .e-prompt-toolbar {
138096
+ opacity: 0;
138097
+ }
138098
+ .e-prompt-container {
138099
+ gap: 2px;
138100
+ align-self: flex-end;
138101
+ max-width: 70%;
138102
+ margin-bottom: 5px;
138103
+ flex-direction: column;
138104
+ &:hover .e-assist-edit-icon {
138105
+ opacity: 1;
138106
+ cursor: pointer;
137993
138107
  }
137994
- .e-prompt-icon {
137995
- margin: 0 8px;
137996
- min-height: $aiassist-icon-height;
138108
+ }
138109
+ .e-suggestion-header {
138110
+ font-size: 14px;
138111
+ font-weight: $suggesstions-header-font-weight;
138112
+ margin: 0 2px 8px 8px;
138113
+ text-align: right;
138114
+ }
138115
+ .e-suggestions {
138116
+ width: 100%;
138117
+ &.e-suggestion-item-template li {
138118
+ padding: 0;
137997
138119
  }
137998
- .e-output-icon {
137999
- height: $aiassist-icon-height;
138000
- margin-left: 10px;
138120
+ ul {
138121
+ list-style-type: none;
138122
+ padding: 0;
138123
+ margin: 0;
138124
+ display: flex;
138125
+ flex-wrap: wrap;
138126
+ justify-content: end;
138001
138127
  }
138002
- .e-prompt-icon,
138003
- .e-output-icon {
138004
- border-radius: 50%;
138005
- min-width: $aiassist-icon-width;
138128
+ li {
138129
+ line-height: 20px;
138130
+ font-weight: $suggesstions-font-weight;
138131
+ padding: $suggesstions-list-padding;
138132
+ margin: $suggesstions-list-margin;
138133
+ border-radius: $suggesstions-list-border-radius;
138134
+ cursor: pointer;
138135
+ white-space: nowrap;
138136
+ overflow: hidden;
138137
+ text-overflow: ellipsis;
138006
138138
  }
138139
+ }
138140
+ .e-views {
138141
+ display: flex;
138142
+ justify-content: space-around;
138007
138143
  .e-content-body {
138008
138144
  line-height: 25px;
138009
138145
  border-radius: 4px;
@@ -138089,85 +138225,36 @@ $prompt-text-border-color: $flyout-border !default;
138089
138225
  .e-content-body > *:first-child {
138090
138226
  margin-block-start: 0;
138091
138227
  }
138092
- .e-loading-body,
138093
- .e-content-body,
138094
- .e-loading-footer {
138095
- padding: 2px 0 0 8px;
138096
- }
138097
- .e-content-footer,
138098
- .e-prompt-toolbar {
138099
- opacity: 0;
138100
- }
138101
- .e-content-container {
138102
- margin-top: 16px;
138103
- font-size: 14px;
138104
- justify-content: space-between;
138105
- .e-prompt-text {
138106
- white-space: pre-wrap;
138107
- height: fit-content;
138108
- border-radius: $prompt-text-border-radius;
138109
- padding: $prompt-text-padding;
138110
- margin-right: 2px;
138111
- line-height: 20px;
138112
- }
138113
- }
138114
- .e-suggestions {
138115
- width: 100%;
138116
- &.e-suggestion-item-template li {
138117
- padding: 0;
138118
- }
138119
- .e-suggestion-header {
138120
- font-size: 14px;
138121
- font-weight: $suggesstions-header-font-weight;
138122
- margin: 0 2px 8px 8px;
138123
- text-align: right;
138124
- }
138125
- ul {
138126
- list-style-type: none;
138127
- padding: 0;
138128
- margin: 0;
138129
- display: flex;
138130
- flex-wrap: wrap;
138131
- justify-content: end;
138132
- }
138133
- li {
138134
- line-height: 20px;
138135
- font-weight: $suggesstions-font-weight;
138136
- padding: $suggesstions-list-padding;
138137
- margin: $suggesstions-list-margin;
138138
- border-radius: $suggesstions-list-border-radius;
138139
- cursor: pointer;
138140
- white-space: nowrap;
138141
- overflow: hidden;
138142
- text-overflow: ellipsis;
138143
- }
138144
- }
138145
- .e-prompt-container {
138146
- gap: 2px;
138147
- align-self: flex-end;
138148
- max-width: 70%;
138149
- margin-bottom: 5px;
138150
- flex-direction: column;
138151
- &:hover .e-assist-edit-icon {
138152
- opacity: 1;
138153
- cursor: pointer;
138154
- }
138155
- }
138156
138228
  }
138157
138229
  .e-views,
138158
138230
  .e-custom-view,
138159
- .e-aiassist-view-content-section {
138231
+ .e-assistview-content-section {
138160
138232
  height: 100%;
138161
- overflow-y: scroll;
138233
+ overflow: scroll;
138162
138234
  &::-webkit-scrollbar {
138163
138235
  width: $ai-assist-scrollbar-width;
138236
+ height: $ai-assist-scrollbar-width;
138164
138237
  }
138165
138238
  &::-webkit-scrollbar-thumb {
138166
138239
  border-radius: 10px;
138167
138240
  }
138168
138241
  }
138169
- .e-content {
138170
- margin-right: 8px;
138242
+ .e-assist-send {
138243
+ position: absolute;
138244
+ right: 20px;
138245
+ font-size: $send-icon-size;
138246
+ bottom: $send-icon-bottom;
138247
+ padding-top: 2px;
138248
+ }
138249
+ .e-assist-send.disabled {
138250
+ pointer-events: none;
138251
+ opacity: .5;
138252
+ cursor: not-allowed;
138253
+ }
138254
+ .e-assist-send.enabled {
138255
+ pointer-events: auto;
138256
+ opacity: 1;
138257
+ cursor: pointer;
138171
138258
  }
138172
138259
  .e-footer {
138173
138260
  position: relative;
@@ -138186,23 +138273,6 @@ $prompt-text-border-color: $flyout-border !default;
138186
138273
  .hide-scrollbar textarea {
138187
138274
  scrollbar-width: none;
138188
138275
  }
138189
- .e-assist-send {
138190
- position: absolute;
138191
- right: 20px;
138192
- font-size: $send-icon-size;
138193
- bottom: 8px;
138194
- padding-top: 2px;
138195
- }
138196
- .e-assist-send.disabled {
138197
- pointer-events: none;
138198
- opacity: .5;
138199
- cursor: not-allowed;
138200
- }
138201
- .e-assist-send.enabled {
138202
- pointer-events: auto;
138203
- opacity: 1;
138204
- cursor: pointer;
138205
- }
138206
138276
  &:has(.e-rtl) .e-assist-send {
138207
138277
  right: unset;
138208
138278
  left: 20px;
@@ -138214,6 +138284,13 @@ $prompt-text-border-color: $flyout-border !default;
138214
138284
  .e-multi-line-input.e-rtl {
138215
138285
  padding-left: 35px;
138216
138286
  padding-right: unset;
138287
+ &.e-input-group.e-control-wrapper {
138288
+ .e-textarea {
138289
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
138290
+ padding: 4px 12px 4px 8px;
138291
+ }
138292
+ }
138293
+ }
138217
138294
  }
138218
138295
  .e-input-group.e-multi-line-input {
138219
138296
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -138295,16 +138372,24 @@ $prompt-text-border-color: $flyout-border !default;
138295
138372
  outline: 1px solid;
138296
138373
  }
138297
138374
  &.e-rtl {
138298
- .e-views {
138299
- .e-suggestions {
138300
- .e-suggestion-header {
138301
- text-align: left;
138302
- margin: 0 8px 8px 2px;
138303
- }
138304
- li {
138305
- margin: $suggesstions-list-margin-rtl;
138375
+ .e-view-header .e-toolbar-item {
138376
+ &.e-assist-view-header,
138377
+ &.e-custom-view-header {
138378
+ .e-tbar-btn .e-btn-icon {
138379
+ padding: 4px 2px 4px 4px;
138306
138380
  }
138307
138381
  }
138382
+ }
138383
+ .e-suggestion-header {
138384
+ text-align: left;
138385
+ margin: 0 8px 8px 2px;
138386
+ }
138387
+ .e-suggestions {
138388
+ li {
138389
+ margin: $suggesstions-list-margin-rtl;
138390
+ }
138391
+ }
138392
+ .e-views {
138308
138393
  .e-content-body {
138309
138394
  blockquote {
138310
138395
  padding-left: unset;
@@ -138319,6 +138404,17 @@ $prompt-text-border-color: $flyout-border !default;
138319
138404
  }
138320
138405
  }
138321
138406
  }
138407
+ .e-loading-body,
138408
+ .e-content-body,
138409
+ .e-loading-footer {
138410
+ padding: 2px 6px 0 0;
138411
+ }
138412
+ .e-prompt-icon {
138413
+ margin: 0 8px 0 0;
138414
+ }
138415
+ .e-output-icon {
138416
+ margin: 0 8px 0 4px;
138417
+ }
138322
138418
  }
138323
138419
  }
138324
138420
  @media (max-width: 760px) {
@@ -138327,12 +138423,14 @@ $prompt-text-border-color: $flyout-border !default;
138327
138423
  .e-footer {
138328
138424
  width: 100%;
138329
138425
  }
138330
- .e-view-container .e-suggestions {
138426
+ .e-view-container .e-suggestions,
138427
+ .e-prompt-content {
138331
138428
  padding-right: 8px;
138332
138429
  }
138333
138430
  &.e-rtl {
138334
- .e-view-container .e-suggestions {
138335
- padding-left: 8px;
138431
+ .e-view-container .e-suggestions,
138432
+ .e-prompt-content {
138433
+ padding: 0 0 0 8px;
138336
138434
  }
138337
138435
  }
138338
138436
  }
@@ -138370,26 +138468,55 @@ $prompt-text-border-color: $flyout-border !default;
138370
138468
  }
138371
138469
  .e-tbar-btn {
138372
138470
  background: transparent;
138471
+ &:focus {
138472
+ box-shadow: none;
138473
+ }
138474
+ &:focus-visible {
138475
+ box-shadow: $tbar-header-btn-focus-box-shadow;
138476
+ @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
138477
+ background: $tbar-header-hover-bg-color;
138478
+ }
138479
+ }
138373
138480
  }
138374
138481
  }
138375
138482
  }
138376
- .e-views {
138377
- .e-prompt-icon,
138378
- .e-output-icon {
138379
- border: 1px solid $icon-border-color;
138380
- color: $user-logo-color;
138381
- background-color: $user-logo-bg-color;
138382
- }
138383
- .e-prompt-text {
138384
- background: $suggested-content-bg-color;
138483
+ .e-suggestion-header {
138484
+ color: $suggesstions-header-color;
138485
+ }
138486
+ .e-suggestions {
138487
+ li {
138385
138488
  color: $suggested-content-text-color;
138489
+ box-shadow: $suggestion-li-box-shadow;
138386
138490
  @if ($skin-name == 'bootstrap5.3') {
138387
138491
  border: none;
138388
138492
  }
138389
138493
  @else {
138390
- border: 1px solid $prompt-text-border-color;
138494
+ border: 1px solid $suggestion-li-border-color;
138391
138495
  }
138392
138496
  }
138497
+ }
138498
+ .e-prompt-icon,
138499
+ .e-output-icon {
138500
+ border: 1px solid $icon-border-color;
138501
+ color: $user-logo-color;
138502
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
138503
+ background: $user-logo-bg-color;
138504
+ }
138505
+ @else {
138506
+ background-color: $user-logo-bg-color;
138507
+ }
138508
+ }
138509
+ .e-prompt-text {
138510
+ background: $suggested-content-bg-color;
138511
+ color: $suggested-content-text-color;
138512
+ @if ($skin-name == 'bootstrap5.3') {
138513
+ border: none;
138514
+ }
138515
+ @else {
138516
+ border: 1px solid $prompt-text-border-color;
138517
+ }
138518
+ }
138519
+ .e-views {
138393
138520
  .e-content-body {
138394
138521
  color: $response-text-color;
138395
138522
  a {
@@ -138429,21 +138556,6 @@ $prompt-text-border-color: $flyout-border !default;
138429
138556
  color: rgba(255, 212, 212, 1);
138430
138557
  }
138431
138558
  }
138432
- .e-suggestions {
138433
- .e-suggestion-header {
138434
- color: $suggesstions-header-color;
138435
- }
138436
- li {
138437
- color: $suggested-content-text-color;
138438
- box-shadow: $suggestion-li-box-shadow;
138439
- @if ($skin-name == 'bootstrap5.3') {
138440
- border: none;
138441
- }
138442
- @else {
138443
- border: 1px solid $suggestion-li-border-color;
138444
- }
138445
- }
138446
- }
138447
138559
  }
138448
138560
  .e-stop-response {
138449
138561
  border-color: $response-stopper-border-color;
@@ -138453,21 +138565,21 @@ $prompt-text-border-color: $flyout-border !default;
138453
138565
  }
138454
138566
  .e-views,
138455
138567
  .e-custom-view,
138456
- .e-aiassist-view-content-section {
138568
+ .e-assistview-content-section {
138457
138569
  &::-webkit-scrollbar-thumb {
138458
138570
  background: $scrollbar-color;
138459
138571
  }
138460
138572
  }
138573
+ .e-assist-send {
138574
+ color: $send-icon-color;
138575
+ &.disabled {
138576
+ color: $send-icon-disabled-color;
138577
+ }
138578
+ }
138461
138579
  .e-footer {
138462
138580
  textarea::-webkit-scrollbar-thumb {
138463
138581
  background: $scrollbar-color;
138464
138582
  }
138465
- .e-assist-send {
138466
- color: $send-icon-color;
138467
- &.disabled {
138468
- color: $send-icon-disabled-color;
138469
- }
138470
- }
138471
138583
  // To override the default border style of the textarea component for the Material and Material3 themes.
138472
138584
  .e-input-group.e-multi-line-input {
138473
138585
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {