@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
@@ -34785,13 +34785,11 @@ $slider-tick-font-color: $message-font !default;
34785
34785
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
34786
34786
  @include alignment(6px, calc(50% - 3px), 'vertical');
34787
34787
  }
34788
- @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' ) {
34789
- @if ($skin-name == 'tailwind') {
34790
- left: calc(50%);
34791
- }
34792
- @else {
34793
- @include alignment(4px, calc(50% - 2px), 'vertical');
34794
- }
34788
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
34789
+ @include alignment(4px, calc(50% - 2px), 'vertical');
34790
+ }
34791
+ @if ($skin-name == 'tailwind') {
34792
+ @include alignment(4px, calc(50%), 'vertical');
34795
34793
  }
34796
34794
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
34797
34795
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -40517,7 +40515,7 @@ $radio-btn-checked-ripple-bgcolor: #ff4081 !default;
40517
40515
  }
40518
40516
 
40519
40517
  &::before {
40520
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
40518
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
40521
40519
  background-color: $radio-btn-disabled-not-checked-bg-color;
40522
40520
  }
40523
40521
  @else {
@@ -42584,6 +42582,10 @@ $listview-template-multiline-avatar-top: .6153em !default;
42584
42582
  }
42585
42583
  }
42586
42584
 
42585
+ &.e-virtualization .e-list-container{
42586
+ overflow: unset;
42587
+ }
42588
+
42587
42589
  & .e-list-container {
42588
42590
  overflow: hidden;
42589
42591
  position: relative;
@@ -65561,6 +65563,10 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
65561
65563
  display: block;
65562
65564
  }
65563
65565
 
65566
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
65567
+ margin-right: 30px;
65568
+ }
65569
+
65564
65570
  .e-multi-select-wrapper .e-multi-hidden {
65565
65571
  border: 0;
65566
65572
  height: 0;
@@ -82510,7 +82516,12 @@ $grid-checkmark-color: $theme-primary-font !default;
82510
82516
  /* stylelint-enable */
82511
82517
 
82512
82518
  .e-dlg-content {
82513
- padding: 24px 27px;
82519
+ @if $grid-skin == 'fluent2' {
82520
+ padding: 24px 27px;
82521
+ }
82522
+ @else {
82523
+ padding: 8px 16px 8px 8px;
82524
+ }
82514
82525
  overflow-y: hidden;
82515
82526
  }
82516
82527
 
@@ -83365,7 +83376,7 @@ $grid-checkmark-color: $theme-primary-font !default;
83365
83376
  }
83366
83377
 
83367
83378
  .e-grid-popup {
83368
- position: relative;
83379
+ position: absolute;
83369
83380
  }
83370
83381
 
83371
83382
  #{&}.e-grid,
@@ -85685,6 +85696,12 @@ $grid-checkmark-color: $theme-primary-font !default;
85685
85696
  padding: $grid-columnchooser-toolbardiv-padding;
85686
85697
  }
85687
85698
 
85699
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
85700
+ @if $grid-skin == 'fluent' {
85701
+ padding-bottom: 1px;
85702
+ }
85703
+ }
85704
+
85688
85705
  .e-edit-dialog {
85689
85706
  min-height: 350px;
85690
85707
  .e-dlg-content {
@@ -86499,14 +86516,17 @@ $grid-checkmark-color: $theme-primary-font !default;
86499
86516
  }
86500
86517
 
86501
86518
  &.e-wrap {
86502
- & .e-gridheader .e-rowcell,
86503
- & .e-gridcontent .e-rowcell,
86519
+ & .e-rowcell,
86504
86520
  & .e-columnheader .e-stackedheadercelldiv,
86505
86521
  & .e-columnheader .e-headercelldiv,
86506
86522
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
86507
86523
  @include wrap-styles;
86508
86524
  }
86509
86525
 
86526
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
86527
+ white-space: nowrap;
86528
+ }
86529
+
86510
86530
  & .e-stackedheader .e-columnheader {
86511
86531
  .e-stackedheadercelldiv,
86512
86532
  .e-headercelldiv {
@@ -87064,7 +87084,8 @@ $grid-checkmark-color: $theme-primary-font !default;
87064
87084
  }
87065
87085
 
87066
87086
  @if $grid-skin == 'fluent2' {
87067
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
87087
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
87088
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
87068
87089
  padding: 0 6px;
87069
87090
  }
87070
87091
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -87978,7 +87999,8 @@ $grid-checkmark-color: $theme-primary-font !default;
87978
87999
  }
87979
88000
 
87980
88001
  @if $grid-skin == 'fluent2' {
87981
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
88002
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
88003
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
87982
88004
  color: $flyout-text-color-hover;
87983
88005
  }
87984
88006
  }
@@ -136062,6 +136084,8 @@ $aiassist-header-height: 46px !default;
136062
136084
  $aiassist-icon-height: 30px !default;
136063
136085
  $aiassist-icon-width: 30px !default;
136064
136086
  $send-icon-size: 14px !default;
136087
+ $send-icon-bottom: 8px !default;
136088
+ $send-icon-bigger-bottom: 12px !default;
136065
136089
  $aiassist-bigger-header-height: 50px !default;
136066
136090
  $aiassist-bigger-icon-height: 40px !default;
136067
136091
  $aiassist-bigger-icon-width: 40px !default;
@@ -136102,63 +136126,86 @@ $rating-selected-bg-color: $neutral-primary !default;
136102
136126
  $send-icon-color: $neutral-light-font !default;
136103
136127
  $send-icon-disabled-color: $neutral-tertiary !default;
136104
136128
  $prompt-text-border-color: $neutral-white !default;
136129
+ $tbar-header-btn-focus-box-shadow: none !default;
136130
+ $tbar-header-hover-bg-color: $neutral-lighter !default;
136105
136131
 
136106
136132
  @include export-module('aiassistview-bigger') {
136107
136133
  .e-bigger.e-aiassistview,
136108
136134
  .e-bigger .e-aiassistview {
136109
136135
  .e-view-header {
136110
136136
  height: $aiassist-bigger-header-height;
136137
+ .e-toolbar {
136138
+ .e-toolbar-items {
136139
+ .e-toolbar-left {
136140
+ height: calc($aiassist-bigger-header-height - 1px);
136141
+ }
136142
+ .e-toolbar-item {
136143
+ &.e-assist-view-header,
136144
+ &.e-custom-view-header {
136145
+ @if ($skin-name == 'highcontrast') {
136146
+ // To apply box-shadow styling during keyboard navigation
136147
+ padding: 1.5px;
136148
+ }
136149
+ @else {
136150
+ padding: 0;
136151
+ }
136152
+ .e-tbar-btn {
136153
+ padding: 0;
136154
+ .e-btn-icon {
136155
+ padding: 4px 4px 4px 2px;
136156
+ }
136157
+ }
136158
+ }
136159
+ }
136160
+ }
136161
+ }
136111
136162
  }
136112
136163
  .e-view-content {
136113
136164
  height: calc(100% - $aiassist-bigger-header-height);
136114
136165
  }
136115
- .e-views {
136116
- .e-prompt-icon {
136117
- min-height: $aiassist-bigger-icon-height;
136118
- }
136119
- .e-output-icon {
136120
- height: $aiassist-bigger-icon-height;
136121
- }
136122
- .e-prompt-icon,
136123
- .e-output-icon {
136124
- min-width: $aiassist-bigger-icon-width;
136125
- }
136126
- .e-loading-body,
136127
- .e-content-body,
136128
- .e-loading-footer {
136129
- padding: 2px 0 0 10px;
136130
- }
136131
- .e-content-container {
136132
- font-size: 16px;
136133
- .e-prompt-text {
136134
- padding: $prompt-text-bigger-padding;
136135
- line-height: 22px;
136136
- }
136166
+ .e-prompt-icon {
136167
+ min-height: $aiassist-bigger-icon-height;
136168
+ }
136169
+ .e-output-icon {
136170
+ height: $aiassist-bigger-icon-height;
136171
+ }
136172
+ .e-prompt-icon,
136173
+ .e-output-icon {
136174
+ min-width: $aiassist-bigger-icon-width;
136175
+ }
136176
+ .e-loading-body,
136177
+ .e-content-body,
136178
+ .e-loading-footer {
136179
+ padding: 6px 0 0 6px;
136180
+ }
136181
+ .e-prompt-text {
136182
+ padding: $prompt-text-bigger-padding;
136183
+ line-height: 22px;
136184
+ }
136185
+ .e-content-container {
136186
+ font-size: 16px;
136187
+ }
136188
+ .e-suggestion-header {
136189
+ font-size: 16px;
136190
+ font-weight: $suggesstions-header-bigger-font-weight;
136191
+ margin-bottom: 15px;
136192
+ }
136193
+ .e-suggestions {
136194
+ &.e-suggestion-item-template ul li {
136195
+ padding: 0;
136137
136196
  }
136138
- .e-suggestions {
136139
- &.e-suggestion-item-template ul li {
136140
- padding: 0;
136141
- }
136142
- .e-suggestion-header {
136143
- font-size: 16px;
136144
- font-weight: $suggesstions-header-bigger-font-weight;
136145
- margin-bottom: 15px;
136146
- }
136147
- ul {
136148
- li {
136149
- line-height: 22px;
136150
- font-weight: $suggesstions-bigger-font-weight;
136151
- padding: $suggesstions-bigger-list-padding;
136152
- margin: $suggesstions-bigger-list-margin;
136153
- }
136154
- }
136197
+ li {
136198
+ line-height: 22px;
136199
+ font-weight: $suggesstions-bigger-font-weight;
136200
+ padding: $suggesstions-bigger-list-padding;
136201
+ margin: $suggesstions-bigger-list-margin;
136155
136202
  }
136156
136203
  }
136204
+ .e-assist-send {
136205
+ font-size: $send-icon-size-bigger;
136206
+ bottom: $send-icon-bigger-bottom;
136207
+ }
136157
136208
  .e-footer {
136158
- .e-assist-send {
136159
- font-size: $send-icon-size-bigger;
136160
- bottom: 9px;
136161
- }
136162
136209
  .e-input-group.e-control-wrapper.e-multi-line-input {
136163
136210
  .e-textarea {
136164
136211
  min-height: 38px;
@@ -136167,6 +136214,11 @@ $prompt-text-border-color: $neutral-white !default;
136167
136214
  min-height: 28px;
136168
136215
  }
136169
136216
  }
136217
+ &.e-rtl .e-textarea {
136218
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136219
+ padding: 6px 16px 6px 12px;
136220
+ }
136221
+ }
136170
136222
  }
136171
136223
  }
136172
136224
  .e-stop-response.e-btn-active {
@@ -136178,13 +136230,24 @@ $prompt-text-border-color: $neutral-white !default;
136178
136230
  font-size: $response-stopper-bigger-font-size;
136179
136231
  }
136180
136232
  &.e-rtl {
136181
- .e-views {
136182
- .e-suggestions {
136183
- li {
136184
- margin: $suggesstions-bigger-list-margin-rtl;
136233
+ .e-view-header .e-toolbar-item {
136234
+ &.e-assist-view-header,
136235
+ &.e-custom-view-header {
136236
+ .e-tbar-btn .e-btn-icon {
136237
+ padding: 4px 2px 4px 4px;
136185
136238
  }
136186
136239
  }
136187
136240
  }
136241
+ .e-suggestions {
136242
+ li {
136243
+ margin: $suggesstions-bigger-list-margin-rtl;
136244
+ }
136245
+ }
136246
+ .e-loading-body,
136247
+ .e-content-body,
136248
+ .e-loading-footer {
136249
+ padding: 6px 6px 0 0;
136250
+ }
136188
136251
  }
136189
136252
  }
136190
136253
  }
@@ -136212,14 +136275,29 @@ $prompt-text-border-color: $neutral-white !default;
136212
136275
  width: 100%;
136213
136276
  border-radius: 4px;
136214
136277
  }
136215
- .e-tbar-btn {
136216
- padding: 0;
136278
+ &.e-assist-view-header,
136279
+ &.e-custom-view-header {
136280
+ @if ($skin-name == 'highcontrast') {
136281
+ // To apply box-shadow styling during keyboard navigation
136282
+ padding: 1px;
136283
+ }
136284
+ @else {
136285
+ padding: 0;
136286
+ }
136287
+ .e-tbar-btn {
136288
+ padding: 0;
136289
+ .e-btn-icon {
136290
+ padding: 4px 4px 4px 2px;
136291
+ }
136292
+ }
136293
+ }
136294
+ &.e-active .e-btn {
136295
+ cursor: pointer;
136217
136296
  }
136218
136297
  }
136219
- }
136220
- .e-view-header .e-toolbar-item.e-active .e-btn {
136221
- border-radius: 0;
136222
- cursor: pointer;
136298
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
136299
+ height: calc($aiassist-header-height - 1px);
136300
+ }
136223
136301
  }
136224
136302
  .e-view-container,
136225
136303
  .e-footer {
@@ -136269,36 +136347,94 @@ $prompt-text-border-color: $neutral-white !default;
136269
136347
  }
136270
136348
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
136271
136349
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
136272
- @if $theme-name == 'highcontrast' {
136273
- padding: 6px 0 6px 5px;
136274
- }
136275
- @else {
136276
- padding: 6px 0 6px 2px;
136277
- }
136350
+ padding: 6px 2px;
136278
136351
  }
136279
136352
  }
136280
- .e-views {
136353
+ .e-output-container {
136354
+ width: 90%;
136281
136355
  display: flex;
136282
- justify-content: space-around;
136283
- .e-output-container {
136284
- width: 90%;
136285
- display: flex;
136286
- align-self: flex-start;
136287
- margin: 10px 0;
136356
+ align-self: flex-start;
136357
+ margin: 10px 0;
136358
+ }
136359
+ .e-prompt-icon {
136360
+ margin: 0 0 0 8px;
136361
+ min-height: $aiassist-icon-height;
136362
+ }
136363
+ .e-output-icon {
136364
+ height: $aiassist-icon-height;
136365
+ margin: 0 4px 0 8px;
136366
+ }
136367
+ .e-prompt-icon,
136368
+ .e-output-icon {
136369
+ border-radius: 50%;
136370
+ min-width: $aiassist-icon-width;
136371
+ }
136372
+ .e-loading-body,
136373
+ .e-content-body,
136374
+ .e-loading-footer {
136375
+ padding: 2px 0 0 6px;
136376
+ }
136377
+ .e-content-container {
136378
+ margin-top: 16px;
136379
+ font-size: 14px;
136380
+ justify-content: space-between;
136381
+ }
136382
+ .e-prompt-text {
136383
+ white-space: pre-wrap;
136384
+ height: fit-content;
136385
+ border-radius: $prompt-text-border-radius;
136386
+ padding: $prompt-text-padding;
136387
+ line-height: 20px;
136388
+ }
136389
+ .e-content-footer,
136390
+ .e-prompt-toolbar {
136391
+ opacity: 0;
136392
+ }
136393
+ .e-prompt-container {
136394
+ gap: 2px;
136395
+ align-self: flex-end;
136396
+ max-width: 70%;
136397
+ margin-bottom: 5px;
136398
+ flex-direction: column;
136399
+ &:hover .e-assist-edit-icon {
136400
+ opacity: 1;
136401
+ cursor: pointer;
136288
136402
  }
136289
- .e-prompt-icon {
136290
- margin: 0 8px;
136291
- min-height: $aiassist-icon-height;
136403
+ }
136404
+ .e-suggestion-header {
136405
+ font-size: 14px;
136406
+ font-weight: $suggesstions-header-font-weight;
136407
+ margin: 0 2px 8px 8px;
136408
+ text-align: right;
136409
+ }
136410
+ .e-suggestions {
136411
+ width: 100%;
136412
+ &.e-suggestion-item-template li {
136413
+ padding: 0;
136292
136414
  }
136293
- .e-output-icon {
136294
- height: $aiassist-icon-height;
136295
- margin-left: 10px;
136415
+ ul {
136416
+ list-style-type: none;
136417
+ padding: 0;
136418
+ margin: 0;
136419
+ display: flex;
136420
+ flex-wrap: wrap;
136421
+ justify-content: end;
136296
136422
  }
136297
- .e-prompt-icon,
136298
- .e-output-icon {
136299
- border-radius: 50%;
136300
- min-width: $aiassist-icon-width;
136423
+ li {
136424
+ line-height: 20px;
136425
+ font-weight: $suggesstions-font-weight;
136426
+ padding: $suggesstions-list-padding;
136427
+ margin: $suggesstions-list-margin;
136428
+ border-radius: $suggesstions-list-border-radius;
136429
+ cursor: pointer;
136430
+ white-space: nowrap;
136431
+ overflow: hidden;
136432
+ text-overflow: ellipsis;
136301
136433
  }
136434
+ }
136435
+ .e-views {
136436
+ display: flex;
136437
+ justify-content: space-around;
136302
136438
  .e-content-body {
136303
136439
  line-height: 25px;
136304
136440
  border-radius: 4px;
@@ -136384,85 +136520,36 @@ $prompt-text-border-color: $neutral-white !default;
136384
136520
  .e-content-body > *:first-child {
136385
136521
  margin-block-start: 0;
136386
136522
  }
136387
- .e-loading-body,
136388
- .e-content-body,
136389
- .e-loading-footer {
136390
- padding: 2px 0 0 8px;
136391
- }
136392
- .e-content-footer,
136393
- .e-prompt-toolbar {
136394
- opacity: 0;
136395
- }
136396
- .e-content-container {
136397
- margin-top: 16px;
136398
- font-size: 14px;
136399
- justify-content: space-between;
136400
- .e-prompt-text {
136401
- white-space: pre-wrap;
136402
- height: fit-content;
136403
- border-radius: $prompt-text-border-radius;
136404
- padding: $prompt-text-padding;
136405
- margin-right: 2px;
136406
- line-height: 20px;
136407
- }
136408
- }
136409
- .e-suggestions {
136410
- width: 100%;
136411
- &.e-suggestion-item-template li {
136412
- padding: 0;
136413
- }
136414
- .e-suggestion-header {
136415
- font-size: 14px;
136416
- font-weight: $suggesstions-header-font-weight;
136417
- margin: 0 2px 8px 8px;
136418
- text-align: right;
136419
- }
136420
- ul {
136421
- list-style-type: none;
136422
- padding: 0;
136423
- margin: 0;
136424
- display: flex;
136425
- flex-wrap: wrap;
136426
- justify-content: end;
136427
- }
136428
- li {
136429
- line-height: 20px;
136430
- font-weight: $suggesstions-font-weight;
136431
- padding: $suggesstions-list-padding;
136432
- margin: $suggesstions-list-margin;
136433
- border-radius: $suggesstions-list-border-radius;
136434
- cursor: pointer;
136435
- white-space: nowrap;
136436
- overflow: hidden;
136437
- text-overflow: ellipsis;
136438
- }
136439
- }
136440
- .e-prompt-container {
136441
- gap: 2px;
136442
- align-self: flex-end;
136443
- max-width: 70%;
136444
- margin-bottom: 5px;
136445
- flex-direction: column;
136446
- &:hover .e-assist-edit-icon {
136447
- opacity: 1;
136448
- cursor: pointer;
136449
- }
136450
- }
136451
136523
  }
136452
136524
  .e-views,
136453
136525
  .e-custom-view,
136454
- .e-aiassist-view-content-section {
136526
+ .e-assistview-content-section {
136455
136527
  height: 100%;
136456
- overflow-y: scroll;
136528
+ overflow: scroll;
136457
136529
  &::-webkit-scrollbar {
136458
136530
  width: $ai-assist-scrollbar-width;
136531
+ height: $ai-assist-scrollbar-width;
136459
136532
  }
136460
136533
  &::-webkit-scrollbar-thumb {
136461
136534
  border-radius: 10px;
136462
136535
  }
136463
136536
  }
136464
- .e-content {
136465
- margin-right: 8px;
136537
+ .e-assist-send {
136538
+ position: absolute;
136539
+ right: 20px;
136540
+ font-size: $send-icon-size;
136541
+ bottom: $send-icon-bottom;
136542
+ padding-top: 2px;
136543
+ }
136544
+ .e-assist-send.disabled {
136545
+ pointer-events: none;
136546
+ opacity: .5;
136547
+ cursor: not-allowed;
136548
+ }
136549
+ .e-assist-send.enabled {
136550
+ pointer-events: auto;
136551
+ opacity: 1;
136552
+ cursor: pointer;
136466
136553
  }
136467
136554
  .e-footer {
136468
136555
  position: relative;
@@ -136481,23 +136568,6 @@ $prompt-text-border-color: $neutral-white !default;
136481
136568
  .hide-scrollbar textarea {
136482
136569
  scrollbar-width: none;
136483
136570
  }
136484
- .e-assist-send {
136485
- position: absolute;
136486
- right: 20px;
136487
- font-size: $send-icon-size;
136488
- bottom: 8px;
136489
- padding-top: 2px;
136490
- }
136491
- .e-assist-send.disabled {
136492
- pointer-events: none;
136493
- opacity: .5;
136494
- cursor: not-allowed;
136495
- }
136496
- .e-assist-send.enabled {
136497
- pointer-events: auto;
136498
- opacity: 1;
136499
- cursor: pointer;
136500
- }
136501
136571
  &:has(.e-rtl) .e-assist-send {
136502
136572
  right: unset;
136503
136573
  left: 20px;
@@ -136509,6 +136579,13 @@ $prompt-text-border-color: $neutral-white !default;
136509
136579
  .e-multi-line-input.e-rtl {
136510
136580
  padding-left: 35px;
136511
136581
  padding-right: unset;
136582
+ &.e-input-group.e-control-wrapper {
136583
+ .e-textarea {
136584
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136585
+ padding: 4px 12px 4px 8px;
136586
+ }
136587
+ }
136588
+ }
136512
136589
  }
136513
136590
  .e-input-group.e-multi-line-input {
136514
136591
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -136590,16 +136667,24 @@ $prompt-text-border-color: $neutral-white !default;
136590
136667
  outline: 1px solid;
136591
136668
  }
136592
136669
  &.e-rtl {
136593
- .e-views {
136594
- .e-suggestions {
136595
- .e-suggestion-header {
136596
- text-align: left;
136597
- margin: 0 8px 8px 2px;
136598
- }
136599
- li {
136600
- margin: $suggesstions-list-margin-rtl;
136670
+ .e-view-header .e-toolbar-item {
136671
+ &.e-assist-view-header,
136672
+ &.e-custom-view-header {
136673
+ .e-tbar-btn .e-btn-icon {
136674
+ padding: 4px 2px 4px 4px;
136601
136675
  }
136602
136676
  }
136677
+ }
136678
+ .e-suggestion-header {
136679
+ text-align: left;
136680
+ margin: 0 8px 8px 2px;
136681
+ }
136682
+ .e-suggestions {
136683
+ li {
136684
+ margin: $suggesstions-list-margin-rtl;
136685
+ }
136686
+ }
136687
+ .e-views {
136603
136688
  .e-content-body {
136604
136689
  blockquote {
136605
136690
  padding-left: unset;
@@ -136614,6 +136699,17 @@ $prompt-text-border-color: $neutral-white !default;
136614
136699
  }
136615
136700
  }
136616
136701
  }
136702
+ .e-loading-body,
136703
+ .e-content-body,
136704
+ .e-loading-footer {
136705
+ padding: 2px 6px 0 0;
136706
+ }
136707
+ .e-prompt-icon {
136708
+ margin: 0 8px 0 0;
136709
+ }
136710
+ .e-output-icon {
136711
+ margin: 0 8px 0 4px;
136712
+ }
136617
136713
  }
136618
136714
  }
136619
136715
  @media (max-width: 760px) {
@@ -136622,12 +136718,14 @@ $prompt-text-border-color: $neutral-white !default;
136622
136718
  .e-footer {
136623
136719
  width: 100%;
136624
136720
  }
136625
- .e-view-container .e-suggestions {
136721
+ .e-view-container .e-suggestions,
136722
+ .e-prompt-content {
136626
136723
  padding-right: 8px;
136627
136724
  }
136628
136725
  &.e-rtl {
136629
- .e-view-container .e-suggestions {
136630
- padding-left: 8px;
136726
+ .e-view-container .e-suggestions,
136727
+ .e-prompt-content {
136728
+ padding: 0 0 0 8px;
136631
136729
  }
136632
136730
  }
136633
136731
  }
@@ -136665,26 +136763,55 @@ $prompt-text-border-color: $neutral-white !default;
136665
136763
  }
136666
136764
  .e-tbar-btn {
136667
136765
  background: transparent;
136766
+ &:focus {
136767
+ box-shadow: none;
136768
+ }
136769
+ &:focus-visible {
136770
+ box-shadow: $tbar-header-btn-focus-box-shadow;
136771
+ @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') {
136772
+ background: $tbar-header-hover-bg-color;
136773
+ }
136774
+ }
136668
136775
  }
136669
136776
  }
136670
136777
  }
136671
- .e-views {
136672
- .e-prompt-icon,
136673
- .e-output-icon {
136674
- border: 1px solid $icon-border-color;
136675
- color: $user-logo-color;
136676
- background-color: $user-logo-bg-color;
136677
- }
136678
- .e-prompt-text {
136679
- background: $suggested-content-bg-color;
136778
+ .e-suggestion-header {
136779
+ color: $suggesstions-header-color;
136780
+ }
136781
+ .e-suggestions {
136782
+ li {
136680
136783
  color: $suggested-content-text-color;
136784
+ box-shadow: $suggestion-li-box-shadow;
136681
136785
  @if ($skin-name == 'bootstrap5.3') {
136682
136786
  border: none;
136683
136787
  }
136684
136788
  @else {
136685
- border: 1px solid $prompt-text-border-color;
136789
+ border: 1px solid $suggestion-li-border-color;
136686
136790
  }
136687
136791
  }
136792
+ }
136793
+ .e-prompt-icon,
136794
+ .e-output-icon {
136795
+ border: 1px solid $icon-border-color;
136796
+ color: $user-logo-color;
136797
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
136798
+ background: $user-logo-bg-color;
136799
+ }
136800
+ @else {
136801
+ background-color: $user-logo-bg-color;
136802
+ }
136803
+ }
136804
+ .e-prompt-text {
136805
+ background: $suggested-content-bg-color;
136806
+ color: $suggested-content-text-color;
136807
+ @if ($skin-name == 'bootstrap5.3') {
136808
+ border: none;
136809
+ }
136810
+ @else {
136811
+ border: 1px solid $prompt-text-border-color;
136812
+ }
136813
+ }
136814
+ .e-views {
136688
136815
  .e-content-body {
136689
136816
  color: $response-text-color;
136690
136817
  a {
@@ -136724,21 +136851,6 @@ $prompt-text-border-color: $neutral-white !default;
136724
136851
  color: rgba(255, 212, 212, 1);
136725
136852
  }
136726
136853
  }
136727
- .e-suggestions {
136728
- .e-suggestion-header {
136729
- color: $suggesstions-header-color;
136730
- }
136731
- li {
136732
- color: $suggested-content-text-color;
136733
- box-shadow: $suggestion-li-box-shadow;
136734
- @if ($skin-name == 'bootstrap5.3') {
136735
- border: none;
136736
- }
136737
- @else {
136738
- border: 1px solid $suggestion-li-border-color;
136739
- }
136740
- }
136741
- }
136742
136854
  }
136743
136855
  .e-stop-response {
136744
136856
  border-color: $response-stopper-border-color;
@@ -136748,21 +136860,21 @@ $prompt-text-border-color: $neutral-white !default;
136748
136860
  }
136749
136861
  .e-views,
136750
136862
  .e-custom-view,
136751
- .e-aiassist-view-content-section {
136863
+ .e-assistview-content-section {
136752
136864
  &::-webkit-scrollbar-thumb {
136753
136865
  background: $scrollbar-color;
136754
136866
  }
136755
136867
  }
136868
+ .e-assist-send {
136869
+ color: $send-icon-color;
136870
+ &.disabled {
136871
+ color: $send-icon-disabled-color;
136872
+ }
136873
+ }
136756
136874
  .e-footer {
136757
136875
  textarea::-webkit-scrollbar-thumb {
136758
136876
  background: $scrollbar-color;
136759
136877
  }
136760
- .e-assist-send {
136761
- color: $send-icon-color;
136762
- &.disabled {
136763
- color: $send-icon-disabled-color;
136764
- }
136765
- }
136766
136878
  // To override the default border style of the textarea component for the Material and Material3 themes.
136767
136879
  .e-input-group.e-multi-line-input {
136768
136880
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {