@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
@@ -36171,13 +36171,11 @@ $slider-button-vup-bg-image: none !default;
36171
36171
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
36172
36172
  @include alignment(6px, calc(50% - 3px), 'vertical');
36173
36173
  }
36174
- @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' ) {
36175
- @if ($skin-name == 'tailwind') {
36176
- left: calc(50%);
36177
- }
36178
- @else {
36179
- @include alignment(4px, calc(50% - 2px), 'vertical');
36180
- }
36174
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
36175
+ @include alignment(4px, calc(50% - 2px), 'vertical');
36176
+ }
36177
+ @if ($skin-name == 'tailwind') {
36178
+ @include alignment(4px, calc(50%), 'vertical');
36181
36179
  }
36182
36180
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
36183
36181
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -41151,6 +41149,7 @@ $radio-btn-check-transition: none !default;
41151
41149
  $radio-btn-disabled-border-color: $border !default;
41152
41150
  $radio-btn-disabled-checked-border-color: transparent !default;
41153
41151
  $radio-btn-disabled-background-color: $content-bg-color-alt3 !default;
41152
+ $radio-btn-disabled-not-checked-bg-color: transparent !default;
41154
41153
  $radio-btn-disabled-color: $border !default;
41155
41154
  $radio-btn-disabled-checked-color: $content-text-color-disabled !default;
41156
41155
  $radio-btn-font-color: $content-text-color !default;
@@ -41962,7 +41961,7 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
41962
41961
  }
41963
41962
 
41964
41963
  &::before {
41965
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
41964
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
41966
41965
  background-color: $radio-btn-disabled-not-checked-bg-color;
41967
41966
  }
41968
41967
  @else {
@@ -44055,6 +44054,10 @@ $listview-template-multiline-content-color: $content-text-color-alt2 !default;
44055
44054
  }
44056
44055
  }
44057
44056
 
44057
+ &.e-virtualization .e-list-container{
44058
+ overflow: unset;
44059
+ }
44060
+
44058
44061
  & .e-list-container {
44059
44062
  overflow: hidden;
44060
44063
  position: relative;
@@ -67284,6 +67287,10 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
67284
67287
  display: block;
67285
67288
  }
67286
67289
 
67290
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
67291
+ margin-right: 30px;
67292
+ }
67293
+
67287
67294
  .e-multi-select-wrapper .e-multi-hidden {
67288
67295
  border: 0;
67289
67296
  height: 0;
@@ -84351,7 +84358,12 @@ $grid-checkmark-color: $primary !default;
84351
84358
  /* stylelint-enable */
84352
84359
 
84353
84360
  .e-dlg-content {
84354
- padding: 24px 27px;
84361
+ @if $grid-skin == 'fluent2' {
84362
+ padding: 24px 27px;
84363
+ }
84364
+ @else {
84365
+ padding: 8px 16px 8px 8px;
84366
+ }
84355
84367
  overflow-y: hidden;
84356
84368
  }
84357
84369
 
@@ -85206,7 +85218,7 @@ $grid-checkmark-color: $primary !default;
85206
85218
  }
85207
85219
 
85208
85220
  .e-grid-popup {
85209
- position: relative;
85221
+ position: absolute;
85210
85222
  }
85211
85223
 
85212
85224
  #{&}.e-grid,
@@ -87526,6 +87538,12 @@ $grid-checkmark-color: $primary !default;
87526
87538
  padding: $grid-columnchooser-toolbardiv-padding;
87527
87539
  }
87528
87540
 
87541
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
87542
+ @if $grid-skin == 'fluent' {
87543
+ padding-bottom: 1px;
87544
+ }
87545
+ }
87546
+
87529
87547
  .e-edit-dialog {
87530
87548
  min-height: 350px;
87531
87549
  .e-dlg-content {
@@ -88340,14 +88358,17 @@ $grid-checkmark-color: $primary !default;
88340
88358
  }
88341
88359
 
88342
88360
  &.e-wrap {
88343
- & .e-gridheader .e-rowcell,
88344
- & .e-gridcontent .e-rowcell,
88361
+ & .e-rowcell,
88345
88362
  & .e-columnheader .e-stackedheadercelldiv,
88346
88363
  & .e-columnheader .e-headercelldiv,
88347
88364
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
88348
88365
  @include wrap-styles;
88349
88366
  }
88350
88367
 
88368
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
88369
+ white-space: nowrap;
88370
+ }
88371
+
88351
88372
  & .e-stackedheader .e-columnheader {
88352
88373
  .e-stackedheadercelldiv,
88353
88374
  .e-headercelldiv {
@@ -88905,7 +88926,8 @@ $grid-checkmark-color: $primary !default;
88905
88926
  }
88906
88927
 
88907
88928
  @if $grid-skin == 'fluent2' {
88908
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
88929
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
88930
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
88909
88931
  padding: 0 6px;
88910
88932
  }
88911
88933
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -89819,7 +89841,8 @@ $grid-checkmark-color: $primary !default;
89819
89841
  }
89820
89842
 
89821
89843
  @if $grid-skin == 'fluent2' {
89822
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
89844
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
89845
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
89823
89846
  color: $flyout-text-color-hover;
89824
89847
  }
89825
89848
  }
@@ -137942,6 +137965,8 @@ $aiassist-header-height: 46px !default;
137942
137965
  $aiassist-icon-height: 30px !default;
137943
137966
  $aiassist-icon-width: 30px !default;
137944
137967
  $send-icon-size: 14px !default;
137968
+ $send-icon-bottom: 8px !default;
137969
+ $send-icon-bigger-bottom: 11px !default;
137945
137970
  $aiassist-bigger-header-height: 50px !default;
137946
137971
  $aiassist-bigger-icon-height: 40px !default;
137947
137972
  $aiassist-bigger-icon-width: 40px !default;
@@ -137982,63 +138007,86 @@ $rating-selected-bg-color: $rating-selected-color !default;
137982
138007
  $send-icon-color: rgba(255, 255, 255, 1) !default;
137983
138008
  $send-icon-disabled-color: $send-icon-color !default;
137984
138009
  $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138010
+ $tbar-header-btn-focus-box-shadow: none !default;
138011
+ $tbar-header-hover-bg-color: transparent !default;
137985
138012
 
137986
138013
  @include export-module('aiassistview-bigger') {
137987
138014
  .e-bigger.e-aiassistview,
137988
138015
  .e-bigger .e-aiassistview {
137989
138016
  .e-view-header {
137990
138017
  height: $aiassist-bigger-header-height;
138018
+ .e-toolbar {
138019
+ .e-toolbar-items {
138020
+ .e-toolbar-left {
138021
+ height: calc($aiassist-bigger-header-height - 1px);
138022
+ }
138023
+ .e-toolbar-item {
138024
+ &.e-assist-view-header,
138025
+ &.e-custom-view-header {
138026
+ @if ($skin-name == 'highcontrast') {
138027
+ // To apply box-shadow styling during keyboard navigation
138028
+ padding: 1.5px;
138029
+ }
138030
+ @else {
138031
+ padding: 0;
138032
+ }
138033
+ .e-tbar-btn {
138034
+ padding: 0;
138035
+ .e-btn-icon {
138036
+ padding: 4px 4px 4px 2px;
138037
+ }
138038
+ }
138039
+ }
138040
+ }
138041
+ }
138042
+ }
137991
138043
  }
137992
138044
  .e-view-content {
137993
138045
  height: calc(100% - $aiassist-bigger-header-height);
137994
138046
  }
137995
- .e-views {
137996
- .e-prompt-icon {
137997
- min-height: $aiassist-bigger-icon-height;
137998
- }
137999
- .e-output-icon {
138000
- height: $aiassist-bigger-icon-height;
138001
- }
138002
- .e-prompt-icon,
138003
- .e-output-icon {
138004
- min-width: $aiassist-bigger-icon-width;
138005
- }
138006
- .e-loading-body,
138007
- .e-content-body,
138008
- .e-loading-footer {
138009
- padding: 2px 0 0 10px;
138010
- }
138011
- .e-content-container {
138012
- font-size: 16px;
138013
- .e-prompt-text {
138014
- padding: $prompt-text-bigger-padding;
138015
- line-height: 22px;
138016
- }
138047
+ .e-prompt-icon {
138048
+ min-height: $aiassist-bigger-icon-height;
138049
+ }
138050
+ .e-output-icon {
138051
+ height: $aiassist-bigger-icon-height;
138052
+ }
138053
+ .e-prompt-icon,
138054
+ .e-output-icon {
138055
+ min-width: $aiassist-bigger-icon-width;
138056
+ }
138057
+ .e-loading-body,
138058
+ .e-content-body,
138059
+ .e-loading-footer {
138060
+ padding: 6px 0 0 6px;
138061
+ }
138062
+ .e-prompt-text {
138063
+ padding: $prompt-text-bigger-padding;
138064
+ line-height: 22px;
138065
+ }
138066
+ .e-content-container {
138067
+ font-size: 16px;
138068
+ }
138069
+ .e-suggestion-header {
138070
+ font-size: 16px;
138071
+ font-weight: $suggesstions-header-bigger-font-weight;
138072
+ margin-bottom: 15px;
138073
+ }
138074
+ .e-suggestions {
138075
+ &.e-suggestion-item-template ul li {
138076
+ padding: 0;
138017
138077
  }
138018
- .e-suggestions {
138019
- &.e-suggestion-item-template ul li {
138020
- padding: 0;
138021
- }
138022
- .e-suggestion-header {
138023
- font-size: 16px;
138024
- font-weight: $suggesstions-header-bigger-font-weight;
138025
- margin-bottom: 15px;
138026
- }
138027
- ul {
138028
- li {
138029
- line-height: 22px;
138030
- font-weight: $suggesstions-bigger-font-weight;
138031
- padding: $suggesstions-bigger-list-padding;
138032
- margin: $suggesstions-bigger-list-margin;
138033
- }
138034
- }
138078
+ li {
138079
+ line-height: 22px;
138080
+ font-weight: $suggesstions-bigger-font-weight;
138081
+ padding: $suggesstions-bigger-list-padding;
138082
+ margin: $suggesstions-bigger-list-margin;
138035
138083
  }
138036
138084
  }
138085
+ .e-assist-send {
138086
+ font-size: $send-icon-size-bigger;
138087
+ bottom: $send-icon-bigger-bottom;
138088
+ }
138037
138089
  .e-footer {
138038
- .e-assist-send {
138039
- font-size: $send-icon-size-bigger;
138040
- bottom: 9px;
138041
- }
138042
138090
  .e-input-group.e-control-wrapper.e-multi-line-input {
138043
138091
  .e-textarea {
138044
138092
  min-height: 38px;
@@ -138047,6 +138095,11 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138047
138095
  min-height: 28px;
138048
138096
  }
138049
138097
  }
138098
+ &.e-rtl .e-textarea {
138099
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
138100
+ padding: 6px 16px 6px 12px;
138101
+ }
138102
+ }
138050
138103
  }
138051
138104
  }
138052
138105
  .e-stop-response.e-btn-active {
@@ -138058,13 +138111,24 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138058
138111
  font-size: $response-stopper-bigger-font-size;
138059
138112
  }
138060
138113
  &.e-rtl {
138061
- .e-views {
138062
- .e-suggestions {
138063
- li {
138064
- margin: $suggesstions-bigger-list-margin-rtl;
138114
+ .e-view-header .e-toolbar-item {
138115
+ &.e-assist-view-header,
138116
+ &.e-custom-view-header {
138117
+ .e-tbar-btn .e-btn-icon {
138118
+ padding: 4px 2px 4px 4px;
138065
138119
  }
138066
138120
  }
138067
138121
  }
138122
+ .e-suggestions {
138123
+ li {
138124
+ margin: $suggesstions-bigger-list-margin-rtl;
138125
+ }
138126
+ }
138127
+ .e-loading-body,
138128
+ .e-content-body,
138129
+ .e-loading-footer {
138130
+ padding: 6px 6px 0 0;
138131
+ }
138068
138132
  }
138069
138133
  }
138070
138134
  }
@@ -138092,14 +138156,29 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138092
138156
  width: 100%;
138093
138157
  border-radius: 4px;
138094
138158
  }
138095
- .e-tbar-btn {
138096
- padding: 0;
138159
+ &.e-assist-view-header,
138160
+ &.e-custom-view-header {
138161
+ @if ($skin-name == 'highcontrast') {
138162
+ // To apply box-shadow styling during keyboard navigation
138163
+ padding: 1px;
138164
+ }
138165
+ @else {
138166
+ padding: 0;
138167
+ }
138168
+ .e-tbar-btn {
138169
+ padding: 0;
138170
+ .e-btn-icon {
138171
+ padding: 4px 4px 4px 2px;
138172
+ }
138173
+ }
138174
+ }
138175
+ &.e-active .e-btn {
138176
+ cursor: pointer;
138097
138177
  }
138098
138178
  }
138099
- }
138100
- .e-view-header .e-toolbar-item.e-active .e-btn {
138101
- border-radius: 0;
138102
- cursor: pointer;
138179
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
138180
+ height: calc($aiassist-header-height - 1px);
138181
+ }
138103
138182
  }
138104
138183
  .e-view-container,
138105
138184
  .e-footer {
@@ -138149,36 +138228,94 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138149
138228
  }
138150
138229
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
138151
138230
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
138152
- @if $theme-name == 'highcontrast' {
138153
- padding: 6px 0 6px 5px;
138154
- }
138155
- @else {
138156
- padding: 6px 0 6px 2px;
138157
- }
138231
+ padding: 6px 2px;
138158
138232
  }
138159
138233
  }
138160
- .e-views {
138234
+ .e-output-container {
138235
+ width: 90%;
138161
138236
  display: flex;
138162
- justify-content: space-around;
138163
- .e-output-container {
138164
- width: 90%;
138165
- display: flex;
138166
- align-self: flex-start;
138167
- margin: 10px 0;
138237
+ align-self: flex-start;
138238
+ margin: 10px 0;
138239
+ }
138240
+ .e-prompt-icon {
138241
+ margin: 0 0 0 8px;
138242
+ min-height: $aiassist-icon-height;
138243
+ }
138244
+ .e-output-icon {
138245
+ height: $aiassist-icon-height;
138246
+ margin: 0 4px 0 8px;
138247
+ }
138248
+ .e-prompt-icon,
138249
+ .e-output-icon {
138250
+ border-radius: 50%;
138251
+ min-width: $aiassist-icon-width;
138252
+ }
138253
+ .e-loading-body,
138254
+ .e-content-body,
138255
+ .e-loading-footer {
138256
+ padding: 2px 0 0 6px;
138257
+ }
138258
+ .e-content-container {
138259
+ margin-top: 16px;
138260
+ font-size: 14px;
138261
+ justify-content: space-between;
138262
+ }
138263
+ .e-prompt-text {
138264
+ white-space: pre-wrap;
138265
+ height: fit-content;
138266
+ border-radius: $prompt-text-border-radius;
138267
+ padding: $prompt-text-padding;
138268
+ line-height: 20px;
138269
+ }
138270
+ .e-content-footer,
138271
+ .e-prompt-toolbar {
138272
+ opacity: 0;
138273
+ }
138274
+ .e-prompt-container {
138275
+ gap: 2px;
138276
+ align-self: flex-end;
138277
+ max-width: 70%;
138278
+ margin-bottom: 5px;
138279
+ flex-direction: column;
138280
+ &:hover .e-assist-edit-icon {
138281
+ opacity: 1;
138282
+ cursor: pointer;
138168
138283
  }
138169
- .e-prompt-icon {
138170
- margin: 0 8px;
138171
- min-height: $aiassist-icon-height;
138284
+ }
138285
+ .e-suggestion-header {
138286
+ font-size: 14px;
138287
+ font-weight: $suggesstions-header-font-weight;
138288
+ margin: 0 2px 8px 8px;
138289
+ text-align: right;
138290
+ }
138291
+ .e-suggestions {
138292
+ width: 100%;
138293
+ &.e-suggestion-item-template li {
138294
+ padding: 0;
138172
138295
  }
138173
- .e-output-icon {
138174
- height: $aiassist-icon-height;
138175
- margin-left: 10px;
138296
+ ul {
138297
+ list-style-type: none;
138298
+ padding: 0;
138299
+ margin: 0;
138300
+ display: flex;
138301
+ flex-wrap: wrap;
138302
+ justify-content: end;
138176
138303
  }
138177
- .e-prompt-icon,
138178
- .e-output-icon {
138179
- border-radius: 50%;
138180
- min-width: $aiassist-icon-width;
138304
+ li {
138305
+ line-height: 20px;
138306
+ font-weight: $suggesstions-font-weight;
138307
+ padding: $suggesstions-list-padding;
138308
+ margin: $suggesstions-list-margin;
138309
+ border-radius: $suggesstions-list-border-radius;
138310
+ cursor: pointer;
138311
+ white-space: nowrap;
138312
+ overflow: hidden;
138313
+ text-overflow: ellipsis;
138181
138314
  }
138315
+ }
138316
+ .e-views {
138317
+ display: flex;
138318
+ justify-content: space-around;
138182
138319
  .e-content-body {
138183
138320
  line-height: 25px;
138184
138321
  border-radius: 4px;
@@ -138264,85 +138401,36 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138264
138401
  .e-content-body > *:first-child {
138265
138402
  margin-block-start: 0;
138266
138403
  }
138267
- .e-loading-body,
138268
- .e-content-body,
138269
- .e-loading-footer {
138270
- padding: 2px 0 0 8px;
138271
- }
138272
- .e-content-footer,
138273
- .e-prompt-toolbar {
138274
- opacity: 0;
138275
- }
138276
- .e-content-container {
138277
- margin-top: 16px;
138278
- font-size: 14px;
138279
- justify-content: space-between;
138280
- .e-prompt-text {
138281
- white-space: pre-wrap;
138282
- height: fit-content;
138283
- border-radius: $prompt-text-border-radius;
138284
- padding: $prompt-text-padding;
138285
- margin-right: 2px;
138286
- line-height: 20px;
138287
- }
138288
- }
138289
- .e-suggestions {
138290
- width: 100%;
138291
- &.e-suggestion-item-template li {
138292
- padding: 0;
138293
- }
138294
- .e-suggestion-header {
138295
- font-size: 14px;
138296
- font-weight: $suggesstions-header-font-weight;
138297
- margin: 0 2px 8px 8px;
138298
- text-align: right;
138299
- }
138300
- ul {
138301
- list-style-type: none;
138302
- padding: 0;
138303
- margin: 0;
138304
- display: flex;
138305
- flex-wrap: wrap;
138306
- justify-content: end;
138307
- }
138308
- li {
138309
- line-height: 20px;
138310
- font-weight: $suggesstions-font-weight;
138311
- padding: $suggesstions-list-padding;
138312
- margin: $suggesstions-list-margin;
138313
- border-radius: $suggesstions-list-border-radius;
138314
- cursor: pointer;
138315
- white-space: nowrap;
138316
- overflow: hidden;
138317
- text-overflow: ellipsis;
138318
- }
138319
- }
138320
- .e-prompt-container {
138321
- gap: 2px;
138322
- align-self: flex-end;
138323
- max-width: 70%;
138324
- margin-bottom: 5px;
138325
- flex-direction: column;
138326
- &:hover .e-assist-edit-icon {
138327
- opacity: 1;
138328
- cursor: pointer;
138329
- }
138330
- }
138331
138404
  }
138332
138405
  .e-views,
138333
138406
  .e-custom-view,
138334
- .e-aiassist-view-content-section {
138407
+ .e-assistview-content-section {
138335
138408
  height: 100%;
138336
- overflow-y: scroll;
138409
+ overflow: scroll;
138337
138410
  &::-webkit-scrollbar {
138338
138411
  width: $ai-assist-scrollbar-width;
138412
+ height: $ai-assist-scrollbar-width;
138339
138413
  }
138340
138414
  &::-webkit-scrollbar-thumb {
138341
138415
  border-radius: 10px;
138342
138416
  }
138343
138417
  }
138344
- .e-content {
138345
- margin-right: 8px;
138418
+ .e-assist-send {
138419
+ position: absolute;
138420
+ right: 20px;
138421
+ font-size: $send-icon-size;
138422
+ bottom: $send-icon-bottom;
138423
+ padding-top: 2px;
138424
+ }
138425
+ .e-assist-send.disabled {
138426
+ pointer-events: none;
138427
+ opacity: .5;
138428
+ cursor: not-allowed;
138429
+ }
138430
+ .e-assist-send.enabled {
138431
+ pointer-events: auto;
138432
+ opacity: 1;
138433
+ cursor: pointer;
138346
138434
  }
138347
138435
  .e-footer {
138348
138436
  position: relative;
@@ -138361,23 +138449,6 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138361
138449
  .hide-scrollbar textarea {
138362
138450
  scrollbar-width: none;
138363
138451
  }
138364
- .e-assist-send {
138365
- position: absolute;
138366
- right: 20px;
138367
- font-size: $send-icon-size;
138368
- bottom: 8px;
138369
- padding-top: 2px;
138370
- }
138371
- .e-assist-send.disabled {
138372
- pointer-events: none;
138373
- opacity: .5;
138374
- cursor: not-allowed;
138375
- }
138376
- .e-assist-send.enabled {
138377
- pointer-events: auto;
138378
- opacity: 1;
138379
- cursor: pointer;
138380
- }
138381
138452
  &:has(.e-rtl) .e-assist-send {
138382
138453
  right: unset;
138383
138454
  left: 20px;
@@ -138389,6 +138460,13 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138389
138460
  .e-multi-line-input.e-rtl {
138390
138461
  padding-left: 35px;
138391
138462
  padding-right: unset;
138463
+ &.e-input-group.e-control-wrapper {
138464
+ .e-textarea {
138465
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
138466
+ padding: 4px 12px 4px 8px;
138467
+ }
138468
+ }
138469
+ }
138392
138470
  }
138393
138471
  .e-input-group.e-multi-line-input {
138394
138472
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -138470,16 +138548,24 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138470
138548
  outline: 1px solid;
138471
138549
  }
138472
138550
  &.e-rtl {
138473
- .e-views {
138474
- .e-suggestions {
138475
- .e-suggestion-header {
138476
- text-align: left;
138477
- margin: 0 8px 8px 2px;
138478
- }
138479
- li {
138480
- margin: $suggesstions-list-margin-rtl;
138551
+ .e-view-header .e-toolbar-item {
138552
+ &.e-assist-view-header,
138553
+ &.e-custom-view-header {
138554
+ .e-tbar-btn .e-btn-icon {
138555
+ padding: 4px 2px 4px 4px;
138481
138556
  }
138482
138557
  }
138558
+ }
138559
+ .e-suggestion-header {
138560
+ text-align: left;
138561
+ margin: 0 8px 8px 2px;
138562
+ }
138563
+ .e-suggestions {
138564
+ li {
138565
+ margin: $suggesstions-list-margin-rtl;
138566
+ }
138567
+ }
138568
+ .e-views {
138483
138569
  .e-content-body {
138484
138570
  blockquote {
138485
138571
  padding-left: unset;
@@ -138494,6 +138580,17 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138494
138580
  }
138495
138581
  }
138496
138582
  }
138583
+ .e-loading-body,
138584
+ .e-content-body,
138585
+ .e-loading-footer {
138586
+ padding: 2px 6px 0 0;
138587
+ }
138588
+ .e-prompt-icon {
138589
+ margin: 0 8px 0 0;
138590
+ }
138591
+ .e-output-icon {
138592
+ margin: 0 8px 0 4px;
138593
+ }
138497
138594
  }
138498
138595
  }
138499
138596
  @media (max-width: 760px) {
@@ -138502,12 +138599,14 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138502
138599
  .e-footer {
138503
138600
  width: 100%;
138504
138601
  }
138505
- .e-view-container .e-suggestions {
138602
+ .e-view-container .e-suggestions,
138603
+ .e-prompt-content {
138506
138604
  padding-right: 8px;
138507
138605
  }
138508
138606
  &.e-rtl {
138509
- .e-view-container .e-suggestions {
138510
- padding-left: 8px;
138607
+ .e-view-container .e-suggestions,
138608
+ .e-prompt-content {
138609
+ padding: 0 0 0 8px;
138511
138610
  }
138512
138611
  }
138513
138612
  }
@@ -138545,26 +138644,55 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138545
138644
  }
138546
138645
  .e-tbar-btn {
138547
138646
  background: transparent;
138647
+ &:focus {
138648
+ box-shadow: none;
138649
+ }
138650
+ &:focus-visible {
138651
+ box-shadow: $tbar-header-btn-focus-box-shadow;
138652
+ @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') {
138653
+ background: $tbar-header-hover-bg-color;
138654
+ }
138655
+ }
138548
138656
  }
138549
138657
  }
138550
138658
  }
138551
- .e-views {
138552
- .e-prompt-icon,
138553
- .e-output-icon {
138554
- border: 1px solid $icon-border-color;
138555
- color: $user-logo-color;
138556
- background-color: $user-logo-bg-color;
138557
- }
138558
- .e-prompt-text {
138559
- background: $suggested-content-bg-color;
138659
+ .e-suggestion-header {
138660
+ color: $suggesstions-header-color;
138661
+ }
138662
+ .e-suggestions {
138663
+ li {
138560
138664
  color: $suggested-content-text-color;
138665
+ box-shadow: $suggestion-li-box-shadow;
138561
138666
  @if ($skin-name == 'bootstrap5.3') {
138562
138667
  border: none;
138563
138668
  }
138564
138669
  @else {
138565
- border: 1px solid $prompt-text-border-color;
138670
+ border: 1px solid $suggestion-li-border-color;
138566
138671
  }
138567
138672
  }
138673
+ }
138674
+ .e-prompt-icon,
138675
+ .e-output-icon {
138676
+ border: 1px solid $icon-border-color;
138677
+ color: $user-logo-color;
138678
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
138679
+ background: $user-logo-bg-color;
138680
+ }
138681
+ @else {
138682
+ background-color: $user-logo-bg-color;
138683
+ }
138684
+ }
138685
+ .e-prompt-text {
138686
+ background: $suggested-content-bg-color;
138687
+ color: $suggested-content-text-color;
138688
+ @if ($skin-name == 'bootstrap5.3') {
138689
+ border: none;
138690
+ }
138691
+ @else {
138692
+ border: 1px solid $prompt-text-border-color;
138693
+ }
138694
+ }
138695
+ .e-views {
138568
138696
  .e-content-body {
138569
138697
  color: $response-text-color;
138570
138698
  a {
@@ -138604,21 +138732,6 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138604
138732
  color: rgba(255, 212, 212, 1);
138605
138733
  }
138606
138734
  }
138607
- .e-suggestions {
138608
- .e-suggestion-header {
138609
- color: $suggesstions-header-color;
138610
- }
138611
- li {
138612
- color: $suggested-content-text-color;
138613
- box-shadow: $suggestion-li-box-shadow;
138614
- @if ($skin-name == 'bootstrap5.3') {
138615
- border: none;
138616
- }
138617
- @else {
138618
- border: 1px solid $suggestion-li-border-color;
138619
- }
138620
- }
138621
- }
138622
138735
  }
138623
138736
  .e-stop-response {
138624
138737
  border-color: $response-stopper-border-color;
@@ -138628,21 +138741,21 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138628
138741
  }
138629
138742
  .e-views,
138630
138743
  .e-custom-view,
138631
- .e-aiassist-view-content-section {
138744
+ .e-assistview-content-section {
138632
138745
  &::-webkit-scrollbar-thumb {
138633
138746
  background: $scrollbar-color;
138634
138747
  }
138635
138748
  }
138749
+ .e-assist-send {
138750
+ color: $send-icon-color;
138751
+ &.disabled {
138752
+ color: $send-icon-disabled-color;
138753
+ }
138754
+ }
138636
138755
  .e-footer {
138637
138756
  textarea::-webkit-scrollbar-thumb {
138638
138757
  background: $scrollbar-color;
138639
138758
  }
138640
- .e-assist-send {
138641
- color: $send-icon-color;
138642
- &.disabled {
138643
- color: $send-icon-disabled-color;
138644
- }
138645
- }
138646
138759
  // To override the default border style of the textarea component for the Material and Material3 themes.
138647
138760
  .e-input-group.e-multi-line-input {
138648
138761
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {