@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
@@ -35107,13 +35107,11 @@ $slider-button-vup-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
35107
35107
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
35108
35108
  @include alignment(6px, calc(50% - 3px), 'vertical');
35109
35109
  }
35110
- @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' ) {
35111
- @if ($skin-name == 'tailwind') {
35112
- left: calc(50%);
35113
- }
35114
- @else {
35115
- @include alignment(4px, calc(50% - 2px), 'vertical');
35116
- }
35110
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
35111
+ @include alignment(4px, calc(50% - 2px), 'vertical');
35112
+ }
35113
+ @if ($skin-name == 'tailwind') {
35114
+ @include alignment(4px, calc(50%), 'vertical');
35117
35115
  }
35118
35116
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
35119
35117
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -40865,7 +40863,7 @@ $radio-btn-focus-outline-offset: 0 !default;
40865
40863
  }
40866
40864
 
40867
40865
  &::before {
40868
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
40866
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
40869
40867
  background-color: $radio-btn-disabled-not-checked-bg-color;
40870
40868
  }
40871
40869
  @else {
@@ -42936,6 +42934,10 @@ $listview-template-multiline-avatar-top: 1.0666em !default;
42936
42934
  }
42937
42935
  }
42938
42936
 
42937
+ &.e-virtualization .e-list-container{
42938
+ overflow: unset;
42939
+ }
42940
+
42939
42941
  & .e-list-container {
42940
42942
  overflow: hidden;
42941
42943
  position: relative;
@@ -66114,6 +66116,10 @@ $filled-multiselect-chip-hover-bg-color: darken($grey-300, 7%) !default;
66114
66116
  display: block;
66115
66117
  }
66116
66118
 
66119
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
66120
+ margin-right: 30px;
66121
+ }
66122
+
66117
66123
  .e-multi-select-wrapper .e-multi-hidden {
66118
66124
  border: 0;
66119
66125
  height: 0;
@@ -83390,7 +83396,12 @@ $grid-checkmark-color: $accent-font !default;
83390
83396
  /* stylelint-enable */
83391
83397
 
83392
83398
  .e-dlg-content {
83393
- padding: 24px 27px;
83399
+ @if $grid-skin == 'fluent2' {
83400
+ padding: 24px 27px;
83401
+ }
83402
+ @else {
83403
+ padding: 8px 16px 8px 8px;
83404
+ }
83394
83405
  overflow-y: hidden;
83395
83406
  }
83396
83407
 
@@ -84245,7 +84256,7 @@ $grid-checkmark-color: $accent-font !default;
84245
84256
  }
84246
84257
 
84247
84258
  .e-grid-popup {
84248
- position: relative;
84259
+ position: absolute;
84249
84260
  }
84250
84261
 
84251
84262
  #{&}.e-grid,
@@ -86565,6 +86576,12 @@ $grid-checkmark-color: $accent-font !default;
86565
86576
  padding: $grid-columnchooser-toolbardiv-padding;
86566
86577
  }
86567
86578
 
86579
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
86580
+ @if $grid-skin == 'fluent' {
86581
+ padding-bottom: 1px;
86582
+ }
86583
+ }
86584
+
86568
86585
  .e-edit-dialog {
86569
86586
  min-height: 350px;
86570
86587
  .e-dlg-content {
@@ -87379,14 +87396,17 @@ $grid-checkmark-color: $accent-font !default;
87379
87396
  }
87380
87397
 
87381
87398
  &.e-wrap {
87382
- & .e-gridheader .e-rowcell,
87383
- & .e-gridcontent .e-rowcell,
87399
+ & .e-rowcell,
87384
87400
  & .e-columnheader .e-stackedheadercelldiv,
87385
87401
  & .e-columnheader .e-headercelldiv,
87386
87402
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
87387
87403
  @include wrap-styles;
87388
87404
  }
87389
87405
 
87406
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
87407
+ white-space: nowrap;
87408
+ }
87409
+
87390
87410
  & .e-stackedheader .e-columnheader {
87391
87411
  .e-stackedheadercelldiv,
87392
87412
  .e-headercelldiv {
@@ -87944,7 +87964,8 @@ $grid-checkmark-color: $accent-font !default;
87944
87964
  }
87945
87965
 
87946
87966
  @if $grid-skin == 'fluent2' {
87947
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
87967
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
87968
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
87948
87969
  padding: 0 6px;
87949
87970
  }
87950
87971
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -88858,7 +88879,8 @@ $grid-checkmark-color: $accent-font !default;
88858
88879
  }
88859
88880
 
88860
88881
  @if $grid-skin == 'fluent2' {
88861
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
88882
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
88883
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
88862
88884
  color: $flyout-text-color-hover;
88863
88885
  }
88864
88886
  }
@@ -136981,6 +137003,8 @@ $aiassist-header-height: 46px !default;
136981
137003
  $aiassist-icon-height: 30px !default;
136982
137004
  $aiassist-icon-width: 30px !default;
136983
137005
  $send-icon-size: 14px !default;
137006
+ $send-icon-bottom: 7px !default;
137007
+ $send-icon-bigger-bottom: 13px !default;
136984
137008
  $aiassist-bigger-header-height: 58px !default;
136985
137009
  $aiassist-bigger-icon-height: 40px !default;
136986
137010
  $aiassist-bigger-icon-width: 40px !default;
@@ -137021,63 +137045,86 @@ $rating-selected-bg-color: $grey-900 !default;
137021
137045
  $send-icon-color: rgba($grey-light-font, .54) !default;
137022
137046
  $send-icon-disabled-color: $send-icon-color !default;
137023
137047
  $prompt-text-border-color: $grey-white !default;
137048
+ $tbar-header-btn-focus-box-shadow: none !default;
137049
+ $tbar-header-hover-bg-color: rgba($grey-black, .12) !default;
137024
137050
 
137025
137051
  @include export-module('aiassistview-bigger') {
137026
137052
  .e-bigger.e-aiassistview,
137027
137053
  .e-bigger .e-aiassistview {
137028
137054
  .e-view-header {
137029
137055
  height: $aiassist-bigger-header-height;
137056
+ .e-toolbar {
137057
+ .e-toolbar-items {
137058
+ .e-toolbar-left {
137059
+ height: calc($aiassist-bigger-header-height - 1px);
137060
+ }
137061
+ .e-toolbar-item {
137062
+ &.e-assist-view-header,
137063
+ &.e-custom-view-header {
137064
+ @if ($skin-name == 'highcontrast') {
137065
+ // To apply box-shadow styling during keyboard navigation
137066
+ padding: 1.5px;
137067
+ }
137068
+ @else {
137069
+ padding: 0;
137070
+ }
137071
+ .e-tbar-btn {
137072
+ padding: 0;
137073
+ .e-btn-icon {
137074
+ padding: 4px 4px 4px 2px;
137075
+ }
137076
+ }
137077
+ }
137078
+ }
137079
+ }
137080
+ }
137030
137081
  }
137031
137082
  .e-view-content {
137032
137083
  height: calc(100% - $aiassist-bigger-header-height);
137033
137084
  }
137034
- .e-views {
137035
- .e-prompt-icon {
137036
- min-height: $aiassist-bigger-icon-height;
137037
- }
137038
- .e-output-icon {
137039
- height: $aiassist-bigger-icon-height;
137040
- }
137041
- .e-prompt-icon,
137042
- .e-output-icon {
137043
- min-width: $aiassist-bigger-icon-width;
137044
- }
137045
- .e-loading-body,
137046
- .e-content-body,
137047
- .e-loading-footer {
137048
- padding: 2px 0 0 10px;
137049
- }
137050
- .e-content-container {
137051
- font-size: 16px;
137052
- .e-prompt-text {
137053
- padding: $prompt-text-bigger-padding;
137054
- line-height: 22px;
137055
- }
137085
+ .e-prompt-icon {
137086
+ min-height: $aiassist-bigger-icon-height;
137087
+ }
137088
+ .e-output-icon {
137089
+ height: $aiassist-bigger-icon-height;
137090
+ }
137091
+ .e-prompt-icon,
137092
+ .e-output-icon {
137093
+ min-width: $aiassist-bigger-icon-width;
137094
+ }
137095
+ .e-loading-body,
137096
+ .e-content-body,
137097
+ .e-loading-footer {
137098
+ padding: 6px 0 0 6px;
137099
+ }
137100
+ .e-prompt-text {
137101
+ padding: $prompt-text-bigger-padding;
137102
+ line-height: 22px;
137103
+ }
137104
+ .e-content-container {
137105
+ font-size: 16px;
137106
+ }
137107
+ .e-suggestion-header {
137108
+ font-size: 16px;
137109
+ font-weight: $suggesstions-header-bigger-font-weight;
137110
+ margin-bottom: 15px;
137111
+ }
137112
+ .e-suggestions {
137113
+ &.e-suggestion-item-template ul li {
137114
+ padding: 0;
137056
137115
  }
137057
- .e-suggestions {
137058
- &.e-suggestion-item-template ul li {
137059
- padding: 0;
137060
- }
137061
- .e-suggestion-header {
137062
- font-size: 16px;
137063
- font-weight: $suggesstions-header-bigger-font-weight;
137064
- margin-bottom: 15px;
137065
- }
137066
- ul {
137067
- li {
137068
- line-height: 22px;
137069
- font-weight: $suggesstions-bigger-font-weight;
137070
- padding: $suggesstions-bigger-list-padding;
137071
- margin: $suggesstions-bigger-list-margin;
137072
- }
137073
- }
137116
+ li {
137117
+ line-height: 22px;
137118
+ font-weight: $suggesstions-bigger-font-weight;
137119
+ padding: $suggesstions-bigger-list-padding;
137120
+ margin: $suggesstions-bigger-list-margin;
137074
137121
  }
137075
137122
  }
137123
+ .e-assist-send {
137124
+ font-size: $send-icon-size-bigger;
137125
+ bottom: $send-icon-bigger-bottom;
137126
+ }
137076
137127
  .e-footer {
137077
- .e-assist-send {
137078
- font-size: $send-icon-size-bigger;
137079
- bottom: 9px;
137080
- }
137081
137128
  .e-input-group.e-control-wrapper.e-multi-line-input {
137082
137129
  .e-textarea {
137083
137130
  min-height: 38px;
@@ -137086,6 +137133,11 @@ $prompt-text-border-color: $grey-white !default;
137086
137133
  min-height: 28px;
137087
137134
  }
137088
137135
  }
137136
+ &.e-rtl .e-textarea {
137137
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
137138
+ padding: 6px 16px 6px 12px;
137139
+ }
137140
+ }
137089
137141
  }
137090
137142
  }
137091
137143
  .e-stop-response.e-btn-active {
@@ -137097,13 +137149,24 @@ $prompt-text-border-color: $grey-white !default;
137097
137149
  font-size: $response-stopper-bigger-font-size;
137098
137150
  }
137099
137151
  &.e-rtl {
137100
- .e-views {
137101
- .e-suggestions {
137102
- li {
137103
- margin: $suggesstions-bigger-list-margin-rtl;
137152
+ .e-view-header .e-toolbar-item {
137153
+ &.e-assist-view-header,
137154
+ &.e-custom-view-header {
137155
+ .e-tbar-btn .e-btn-icon {
137156
+ padding: 4px 2px 4px 4px;
137104
137157
  }
137105
137158
  }
137106
137159
  }
137160
+ .e-suggestions {
137161
+ li {
137162
+ margin: $suggesstions-bigger-list-margin-rtl;
137163
+ }
137164
+ }
137165
+ .e-loading-body,
137166
+ .e-content-body,
137167
+ .e-loading-footer {
137168
+ padding: 6px 6px 0 0;
137169
+ }
137107
137170
  }
137108
137171
  }
137109
137172
  }
@@ -137131,14 +137194,29 @@ $prompt-text-border-color: $grey-white !default;
137131
137194
  width: 100%;
137132
137195
  border-radius: 4px;
137133
137196
  }
137134
- .e-tbar-btn {
137135
- padding: 0;
137197
+ &.e-assist-view-header,
137198
+ &.e-custom-view-header {
137199
+ @if ($skin-name == 'highcontrast') {
137200
+ // To apply box-shadow styling during keyboard navigation
137201
+ padding: 1px;
137202
+ }
137203
+ @else {
137204
+ padding: 0;
137205
+ }
137206
+ .e-tbar-btn {
137207
+ padding: 0;
137208
+ .e-btn-icon {
137209
+ padding: 4px 4px 4px 2px;
137210
+ }
137211
+ }
137212
+ }
137213
+ &.e-active .e-btn {
137214
+ cursor: pointer;
137136
137215
  }
137137
137216
  }
137138
- }
137139
- .e-view-header .e-toolbar-item.e-active .e-btn {
137140
- border-radius: 0;
137141
- cursor: pointer;
137217
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
137218
+ height: calc($aiassist-header-height - 1px);
137219
+ }
137142
137220
  }
137143
137221
  .e-view-container,
137144
137222
  .e-footer {
@@ -137188,36 +137266,94 @@ $prompt-text-border-color: $grey-white !default;
137188
137266
  }
137189
137267
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
137190
137268
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
137191
- @if $theme-name == 'highcontrast' {
137192
- padding: 6px 0 6px 5px;
137193
- }
137194
- @else {
137195
- padding: 6px 0 6px 2px;
137196
- }
137269
+ padding: 6px 2px;
137197
137270
  }
137198
137271
  }
137199
- .e-views {
137272
+ .e-output-container {
137273
+ width: 90%;
137200
137274
  display: flex;
137201
- justify-content: space-around;
137202
- .e-output-container {
137203
- width: 90%;
137204
- display: flex;
137205
- align-self: flex-start;
137206
- margin: 10px 0;
137275
+ align-self: flex-start;
137276
+ margin: 10px 0;
137277
+ }
137278
+ .e-prompt-icon {
137279
+ margin: 0 0 0 8px;
137280
+ min-height: $aiassist-icon-height;
137281
+ }
137282
+ .e-output-icon {
137283
+ height: $aiassist-icon-height;
137284
+ margin: 0 4px 0 8px;
137285
+ }
137286
+ .e-prompt-icon,
137287
+ .e-output-icon {
137288
+ border-radius: 50%;
137289
+ min-width: $aiassist-icon-width;
137290
+ }
137291
+ .e-loading-body,
137292
+ .e-content-body,
137293
+ .e-loading-footer {
137294
+ padding: 2px 0 0 6px;
137295
+ }
137296
+ .e-content-container {
137297
+ margin-top: 16px;
137298
+ font-size: 14px;
137299
+ justify-content: space-between;
137300
+ }
137301
+ .e-prompt-text {
137302
+ white-space: pre-wrap;
137303
+ height: fit-content;
137304
+ border-radius: $prompt-text-border-radius;
137305
+ padding: $prompt-text-padding;
137306
+ line-height: 20px;
137307
+ }
137308
+ .e-content-footer,
137309
+ .e-prompt-toolbar {
137310
+ opacity: 0;
137311
+ }
137312
+ .e-prompt-container {
137313
+ gap: 2px;
137314
+ align-self: flex-end;
137315
+ max-width: 70%;
137316
+ margin-bottom: 5px;
137317
+ flex-direction: column;
137318
+ &:hover .e-assist-edit-icon {
137319
+ opacity: 1;
137320
+ cursor: pointer;
137207
137321
  }
137208
- .e-prompt-icon {
137209
- margin: 0 8px;
137210
- min-height: $aiassist-icon-height;
137322
+ }
137323
+ .e-suggestion-header {
137324
+ font-size: 14px;
137325
+ font-weight: $suggesstions-header-font-weight;
137326
+ margin: 0 2px 8px 8px;
137327
+ text-align: right;
137328
+ }
137329
+ .e-suggestions {
137330
+ width: 100%;
137331
+ &.e-suggestion-item-template li {
137332
+ padding: 0;
137211
137333
  }
137212
- .e-output-icon {
137213
- height: $aiassist-icon-height;
137214
- margin-left: 10px;
137334
+ ul {
137335
+ list-style-type: none;
137336
+ padding: 0;
137337
+ margin: 0;
137338
+ display: flex;
137339
+ flex-wrap: wrap;
137340
+ justify-content: end;
137215
137341
  }
137216
- .e-prompt-icon,
137217
- .e-output-icon {
137218
- border-radius: 50%;
137219
- min-width: $aiassist-icon-width;
137342
+ li {
137343
+ line-height: 20px;
137344
+ font-weight: $suggesstions-font-weight;
137345
+ padding: $suggesstions-list-padding;
137346
+ margin: $suggesstions-list-margin;
137347
+ border-radius: $suggesstions-list-border-radius;
137348
+ cursor: pointer;
137349
+ white-space: nowrap;
137350
+ overflow: hidden;
137351
+ text-overflow: ellipsis;
137220
137352
  }
137353
+ }
137354
+ .e-views {
137355
+ display: flex;
137356
+ justify-content: space-around;
137221
137357
  .e-content-body {
137222
137358
  line-height: 25px;
137223
137359
  border-radius: 4px;
@@ -137303,85 +137439,36 @@ $prompt-text-border-color: $grey-white !default;
137303
137439
  .e-content-body > *:first-child {
137304
137440
  margin-block-start: 0;
137305
137441
  }
137306
- .e-loading-body,
137307
- .e-content-body,
137308
- .e-loading-footer {
137309
- padding: 2px 0 0 8px;
137310
- }
137311
- .e-content-footer,
137312
- .e-prompt-toolbar {
137313
- opacity: 0;
137314
- }
137315
- .e-content-container {
137316
- margin-top: 16px;
137317
- font-size: 14px;
137318
- justify-content: space-between;
137319
- .e-prompt-text {
137320
- white-space: pre-wrap;
137321
- height: fit-content;
137322
- border-radius: $prompt-text-border-radius;
137323
- padding: $prompt-text-padding;
137324
- margin-right: 2px;
137325
- line-height: 20px;
137326
- }
137327
- }
137328
- .e-suggestions {
137329
- width: 100%;
137330
- &.e-suggestion-item-template li {
137331
- padding: 0;
137332
- }
137333
- .e-suggestion-header {
137334
- font-size: 14px;
137335
- font-weight: $suggesstions-header-font-weight;
137336
- margin: 0 2px 8px 8px;
137337
- text-align: right;
137338
- }
137339
- ul {
137340
- list-style-type: none;
137341
- padding: 0;
137342
- margin: 0;
137343
- display: flex;
137344
- flex-wrap: wrap;
137345
- justify-content: end;
137346
- }
137347
- li {
137348
- line-height: 20px;
137349
- font-weight: $suggesstions-font-weight;
137350
- padding: $suggesstions-list-padding;
137351
- margin: $suggesstions-list-margin;
137352
- border-radius: $suggesstions-list-border-radius;
137353
- cursor: pointer;
137354
- white-space: nowrap;
137355
- overflow: hidden;
137356
- text-overflow: ellipsis;
137357
- }
137358
- }
137359
- .e-prompt-container {
137360
- gap: 2px;
137361
- align-self: flex-end;
137362
- max-width: 70%;
137363
- margin-bottom: 5px;
137364
- flex-direction: column;
137365
- &:hover .e-assist-edit-icon {
137366
- opacity: 1;
137367
- cursor: pointer;
137368
- }
137369
- }
137370
137442
  }
137371
137443
  .e-views,
137372
137444
  .e-custom-view,
137373
- .e-aiassist-view-content-section {
137445
+ .e-assistview-content-section {
137374
137446
  height: 100%;
137375
- overflow-y: scroll;
137447
+ overflow: scroll;
137376
137448
  &::-webkit-scrollbar {
137377
137449
  width: $ai-assist-scrollbar-width;
137450
+ height: $ai-assist-scrollbar-width;
137378
137451
  }
137379
137452
  &::-webkit-scrollbar-thumb {
137380
137453
  border-radius: 10px;
137381
137454
  }
137382
137455
  }
137383
- .e-content {
137384
- margin-right: 8px;
137456
+ .e-assist-send {
137457
+ position: absolute;
137458
+ right: 20px;
137459
+ font-size: $send-icon-size;
137460
+ bottom: $send-icon-bottom;
137461
+ padding-top: 2px;
137462
+ }
137463
+ .e-assist-send.disabled {
137464
+ pointer-events: none;
137465
+ opacity: .5;
137466
+ cursor: not-allowed;
137467
+ }
137468
+ .e-assist-send.enabled {
137469
+ pointer-events: auto;
137470
+ opacity: 1;
137471
+ cursor: pointer;
137385
137472
  }
137386
137473
  .e-footer {
137387
137474
  position: relative;
@@ -137400,23 +137487,6 @@ $prompt-text-border-color: $grey-white !default;
137400
137487
  .hide-scrollbar textarea {
137401
137488
  scrollbar-width: none;
137402
137489
  }
137403
- .e-assist-send {
137404
- position: absolute;
137405
- right: 20px;
137406
- font-size: $send-icon-size;
137407
- bottom: 8px;
137408
- padding-top: 2px;
137409
- }
137410
- .e-assist-send.disabled {
137411
- pointer-events: none;
137412
- opacity: .5;
137413
- cursor: not-allowed;
137414
- }
137415
- .e-assist-send.enabled {
137416
- pointer-events: auto;
137417
- opacity: 1;
137418
- cursor: pointer;
137419
- }
137420
137490
  &:has(.e-rtl) .e-assist-send {
137421
137491
  right: unset;
137422
137492
  left: 20px;
@@ -137428,6 +137498,13 @@ $prompt-text-border-color: $grey-white !default;
137428
137498
  .e-multi-line-input.e-rtl {
137429
137499
  padding-left: 35px;
137430
137500
  padding-right: unset;
137501
+ &.e-input-group.e-control-wrapper {
137502
+ .e-textarea {
137503
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
137504
+ padding: 4px 12px 4px 8px;
137505
+ }
137506
+ }
137507
+ }
137431
137508
  }
137432
137509
  .e-input-group.e-multi-line-input {
137433
137510
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -137509,16 +137586,24 @@ $prompt-text-border-color: $grey-white !default;
137509
137586
  outline: 1px solid;
137510
137587
  }
137511
137588
  &.e-rtl {
137512
- .e-views {
137513
- .e-suggestions {
137514
- .e-suggestion-header {
137515
- text-align: left;
137516
- margin: 0 8px 8px 2px;
137517
- }
137518
- li {
137519
- margin: $suggesstions-list-margin-rtl;
137589
+ .e-view-header .e-toolbar-item {
137590
+ &.e-assist-view-header,
137591
+ &.e-custom-view-header {
137592
+ .e-tbar-btn .e-btn-icon {
137593
+ padding: 4px 2px 4px 4px;
137520
137594
  }
137521
137595
  }
137596
+ }
137597
+ .e-suggestion-header {
137598
+ text-align: left;
137599
+ margin: 0 8px 8px 2px;
137600
+ }
137601
+ .e-suggestions {
137602
+ li {
137603
+ margin: $suggesstions-list-margin-rtl;
137604
+ }
137605
+ }
137606
+ .e-views {
137522
137607
  .e-content-body {
137523
137608
  blockquote {
137524
137609
  padding-left: unset;
@@ -137533,6 +137618,17 @@ $prompt-text-border-color: $grey-white !default;
137533
137618
  }
137534
137619
  }
137535
137620
  }
137621
+ .e-loading-body,
137622
+ .e-content-body,
137623
+ .e-loading-footer {
137624
+ padding: 2px 6px 0 0;
137625
+ }
137626
+ .e-prompt-icon {
137627
+ margin: 0 8px 0 0;
137628
+ }
137629
+ .e-output-icon {
137630
+ margin: 0 8px 0 4px;
137631
+ }
137536
137632
  }
137537
137633
  }
137538
137634
  @media (max-width: 760px) {
@@ -137541,12 +137637,14 @@ $prompt-text-border-color: $grey-white !default;
137541
137637
  .e-footer {
137542
137638
  width: 100%;
137543
137639
  }
137544
- .e-view-container .e-suggestions {
137640
+ .e-view-container .e-suggestions,
137641
+ .e-prompt-content {
137545
137642
  padding-right: 8px;
137546
137643
  }
137547
137644
  &.e-rtl {
137548
- .e-view-container .e-suggestions {
137549
- padding-left: 8px;
137645
+ .e-view-container .e-suggestions,
137646
+ .e-prompt-content {
137647
+ padding: 0 0 0 8px;
137550
137648
  }
137551
137649
  }
137552
137650
  }
@@ -137584,26 +137682,55 @@ $prompt-text-border-color: $grey-white !default;
137584
137682
  }
137585
137683
  .e-tbar-btn {
137586
137684
  background: transparent;
137685
+ &:focus {
137686
+ box-shadow: none;
137687
+ }
137688
+ &:focus-visible {
137689
+ box-shadow: $tbar-header-btn-focus-box-shadow;
137690
+ @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') {
137691
+ background: $tbar-header-hover-bg-color;
137692
+ }
137693
+ }
137587
137694
  }
137588
137695
  }
137589
137696
  }
137590
- .e-views {
137591
- .e-prompt-icon,
137592
- .e-output-icon {
137593
- border: 1px solid $icon-border-color;
137594
- color: $user-logo-color;
137595
- background-color: $user-logo-bg-color;
137596
- }
137597
- .e-prompt-text {
137598
- background: $suggested-content-bg-color;
137697
+ .e-suggestion-header {
137698
+ color: $suggesstions-header-color;
137699
+ }
137700
+ .e-suggestions {
137701
+ li {
137599
137702
  color: $suggested-content-text-color;
137703
+ box-shadow: $suggestion-li-box-shadow;
137600
137704
  @if ($skin-name == 'bootstrap5.3') {
137601
137705
  border: none;
137602
137706
  }
137603
137707
  @else {
137604
- border: 1px solid $prompt-text-border-color;
137708
+ border: 1px solid $suggestion-li-border-color;
137605
137709
  }
137606
137710
  }
137711
+ }
137712
+ .e-prompt-icon,
137713
+ .e-output-icon {
137714
+ border: 1px solid $icon-border-color;
137715
+ color: $user-logo-color;
137716
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
137717
+ background: $user-logo-bg-color;
137718
+ }
137719
+ @else {
137720
+ background-color: $user-logo-bg-color;
137721
+ }
137722
+ }
137723
+ .e-prompt-text {
137724
+ background: $suggested-content-bg-color;
137725
+ color: $suggested-content-text-color;
137726
+ @if ($skin-name == 'bootstrap5.3') {
137727
+ border: none;
137728
+ }
137729
+ @else {
137730
+ border: 1px solid $prompt-text-border-color;
137731
+ }
137732
+ }
137733
+ .e-views {
137607
137734
  .e-content-body {
137608
137735
  color: $response-text-color;
137609
137736
  a {
@@ -137643,21 +137770,6 @@ $prompt-text-border-color: $grey-white !default;
137643
137770
  color: rgba(255, 212, 212, 1);
137644
137771
  }
137645
137772
  }
137646
- .e-suggestions {
137647
- .e-suggestion-header {
137648
- color: $suggesstions-header-color;
137649
- }
137650
- li {
137651
- color: $suggested-content-text-color;
137652
- box-shadow: $suggestion-li-box-shadow;
137653
- @if ($skin-name == 'bootstrap5.3') {
137654
- border: none;
137655
- }
137656
- @else {
137657
- border: 1px solid $suggestion-li-border-color;
137658
- }
137659
- }
137660
- }
137661
137773
  }
137662
137774
  .e-stop-response {
137663
137775
  border-color: $response-stopper-border-color;
@@ -137667,21 +137779,21 @@ $prompt-text-border-color: $grey-white !default;
137667
137779
  }
137668
137780
  .e-views,
137669
137781
  .e-custom-view,
137670
- .e-aiassist-view-content-section {
137782
+ .e-assistview-content-section {
137671
137783
  &::-webkit-scrollbar-thumb {
137672
137784
  background: $scrollbar-color;
137673
137785
  }
137674
137786
  }
137787
+ .e-assist-send {
137788
+ color: $send-icon-color;
137789
+ &.disabled {
137790
+ color: $send-icon-disabled-color;
137791
+ }
137792
+ }
137675
137793
  .e-footer {
137676
137794
  textarea::-webkit-scrollbar-thumb {
137677
137795
  background: $scrollbar-color;
137678
137796
  }
137679
- .e-assist-send {
137680
- color: $send-icon-color;
137681
- &.disabled {
137682
- color: $send-icon-disabled-color;
137683
- }
137684
- }
137685
137797
  // To override the default border style of the textarea component for the Material and Material3 themes.
137686
137798
  .e-input-group.e-multi-line-input {
137687
137799
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {