@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
@@ -35323,13 +35323,11 @@ $slider-button-vup-bg-image: none !default;
35323
35323
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
35324
35324
  @include alignment(6px, calc(50% - 3px), 'vertical');
35325
35325
  }
35326
- @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' ) {
35327
- @if ($skin-name == 'tailwind') {
35328
- left: calc(50%);
35329
- }
35330
- @else {
35331
- @include alignment(4px, calc(50% - 2px), 'vertical');
35332
- }
35326
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
35327
+ @include alignment(4px, calc(50% - 2px), 'vertical');
35328
+ }
35329
+ @if ($skin-name == 'tailwind') {
35330
+ @include alignment(4px, calc(50%), 'vertical');
35333
35331
  }
35334
35332
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
35335
35333
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -41087,7 +41085,7 @@ $radio-btn-focus-outline-offset: 0 !default;
41087
41085
  }
41088
41086
 
41089
41087
  &::before {
41090
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
41088
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
41091
41089
  background-color: $radio-btn-disabled-not-checked-bg-color;
41092
41090
  }
41093
41091
  @else {
@@ -43169,6 +43167,10 @@ $listview-template-multiline-avatar-top: 1.0666em !default;
43169
43167
  }
43170
43168
  }
43171
43169
 
43170
+ &.e-virtualization .e-list-container{
43171
+ overflow: unset;
43172
+ }
43173
+
43172
43174
  & .e-list-container {
43173
43175
  overflow: hidden;
43174
43176
  position: relative;
@@ -66378,6 +66380,10 @@ $filled-multiselect-chip-hover-bg-color: $grey-700 !default;
66378
66380
  display: block;
66379
66381
  }
66380
66382
 
66383
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
66384
+ margin-right: 30px;
66385
+ }
66386
+
66381
66387
  .e-multi-select-wrapper .e-multi-hidden {
66382
66388
  border: 0;
66383
66389
  height: 0;
@@ -83662,7 +83668,12 @@ $grid-checkmark-color: $accent-font !default;
83662
83668
  /* stylelint-enable */
83663
83669
 
83664
83670
  .e-dlg-content {
83665
- padding: 24px 27px;
83671
+ @if $grid-skin == 'fluent2' {
83672
+ padding: 24px 27px;
83673
+ }
83674
+ @else {
83675
+ padding: 8px 16px 8px 8px;
83676
+ }
83666
83677
  overflow-y: hidden;
83667
83678
  }
83668
83679
 
@@ -84517,7 +84528,7 @@ $grid-checkmark-color: $accent-font !default;
84517
84528
  }
84518
84529
 
84519
84530
  .e-grid-popup {
84520
- position: relative;
84531
+ position: absolute;
84521
84532
  }
84522
84533
 
84523
84534
  #{&}.e-grid,
@@ -86837,6 +86848,12 @@ $grid-checkmark-color: $accent-font !default;
86837
86848
  padding: $grid-columnchooser-toolbardiv-padding;
86838
86849
  }
86839
86850
 
86851
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
86852
+ @if $grid-skin == 'fluent' {
86853
+ padding-bottom: 1px;
86854
+ }
86855
+ }
86856
+
86840
86857
  .e-edit-dialog {
86841
86858
  min-height: 350px;
86842
86859
  .e-dlg-content {
@@ -87651,14 +87668,17 @@ $grid-checkmark-color: $accent-font !default;
87651
87668
  }
87652
87669
 
87653
87670
  &.e-wrap {
87654
- & .e-gridheader .e-rowcell,
87655
- & .e-gridcontent .e-rowcell,
87671
+ & .e-rowcell,
87656
87672
  & .e-columnheader .e-stackedheadercelldiv,
87657
87673
  & .e-columnheader .e-headercelldiv,
87658
87674
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
87659
87675
  @include wrap-styles;
87660
87676
  }
87661
87677
 
87678
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
87679
+ white-space: nowrap;
87680
+ }
87681
+
87662
87682
  & .e-stackedheader .e-columnheader {
87663
87683
  .e-stackedheadercelldiv,
87664
87684
  .e-headercelldiv {
@@ -88216,7 +88236,8 @@ $grid-checkmark-color: $accent-font !default;
88216
88236
  }
88217
88237
 
88218
88238
  @if $grid-skin == 'fluent2' {
88219
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
88239
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
88240
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
88220
88241
  padding: 0 6px;
88221
88242
  }
88222
88243
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -89130,7 +89151,8 @@ $grid-checkmark-color: $accent-font !default;
89130
89151
  }
89131
89152
 
89132
89153
  @if $grid-skin == 'fluent2' {
89133
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
89154
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
89155
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
89134
89156
  color: $flyout-text-color-hover;
89135
89157
  }
89136
89158
  }
@@ -137255,6 +137277,8 @@ $aiassist-header-height: 46px !default;
137255
137277
  $aiassist-icon-height: 30px !default;
137256
137278
  $aiassist-icon-width: 30px !default;
137257
137279
  $send-icon-size: 14px !default;
137280
+ $send-icon-bottom: 7px !default;
137281
+ $send-icon-bigger-bottom: 13px !default;
137258
137282
  $aiassist-bigger-header-height: 58px !default;
137259
137283
  $aiassist-bigger-icon-height: 40px !default;
137260
137284
  $aiassist-bigger-icon-width: 40px !default;
@@ -137295,63 +137319,86 @@ $rating-selected-bg-color: $grey-300 !default;
137295
137319
  $send-icon-color: $grey-dark-font !default;
137296
137320
  $send-icon-disabled-color: $send-icon-color !default;
137297
137321
  $prompt-text-border-color: $grey-dark !default;
137322
+ $tbar-header-btn-focus-box-shadow: none !default;
137323
+ $tbar-header-hover-bg-color: rgba($grey-white, .1) !default;
137298
137324
 
137299
137325
  @include export-module('aiassistview-bigger') {
137300
137326
  .e-bigger.e-aiassistview,
137301
137327
  .e-bigger .e-aiassistview {
137302
137328
  .e-view-header {
137303
137329
  height: $aiassist-bigger-header-height;
137330
+ .e-toolbar {
137331
+ .e-toolbar-items {
137332
+ .e-toolbar-left {
137333
+ height: calc($aiassist-bigger-header-height - 1px);
137334
+ }
137335
+ .e-toolbar-item {
137336
+ &.e-assist-view-header,
137337
+ &.e-custom-view-header {
137338
+ @if ($skin-name == 'highcontrast') {
137339
+ // To apply box-shadow styling during keyboard navigation
137340
+ padding: 1.5px;
137341
+ }
137342
+ @else {
137343
+ padding: 0;
137344
+ }
137345
+ .e-tbar-btn {
137346
+ padding: 0;
137347
+ .e-btn-icon {
137348
+ padding: 4px 4px 4px 2px;
137349
+ }
137350
+ }
137351
+ }
137352
+ }
137353
+ }
137354
+ }
137304
137355
  }
137305
137356
  .e-view-content {
137306
137357
  height: calc(100% - $aiassist-bigger-header-height);
137307
137358
  }
137308
- .e-views {
137309
- .e-prompt-icon {
137310
- min-height: $aiassist-bigger-icon-height;
137311
- }
137312
- .e-output-icon {
137313
- height: $aiassist-bigger-icon-height;
137314
- }
137315
- .e-prompt-icon,
137316
- .e-output-icon {
137317
- min-width: $aiassist-bigger-icon-width;
137318
- }
137319
- .e-loading-body,
137320
- .e-content-body,
137321
- .e-loading-footer {
137322
- padding: 2px 0 0 10px;
137323
- }
137324
- .e-content-container {
137325
- font-size: 16px;
137326
- .e-prompt-text {
137327
- padding: $prompt-text-bigger-padding;
137328
- line-height: 22px;
137329
- }
137359
+ .e-prompt-icon {
137360
+ min-height: $aiassist-bigger-icon-height;
137361
+ }
137362
+ .e-output-icon {
137363
+ height: $aiassist-bigger-icon-height;
137364
+ }
137365
+ .e-prompt-icon,
137366
+ .e-output-icon {
137367
+ min-width: $aiassist-bigger-icon-width;
137368
+ }
137369
+ .e-loading-body,
137370
+ .e-content-body,
137371
+ .e-loading-footer {
137372
+ padding: 6px 0 0 6px;
137373
+ }
137374
+ .e-prompt-text {
137375
+ padding: $prompt-text-bigger-padding;
137376
+ line-height: 22px;
137377
+ }
137378
+ .e-content-container {
137379
+ font-size: 16px;
137380
+ }
137381
+ .e-suggestion-header {
137382
+ font-size: 16px;
137383
+ font-weight: $suggesstions-header-bigger-font-weight;
137384
+ margin-bottom: 15px;
137385
+ }
137386
+ .e-suggestions {
137387
+ &.e-suggestion-item-template ul li {
137388
+ padding: 0;
137330
137389
  }
137331
- .e-suggestions {
137332
- &.e-suggestion-item-template ul li {
137333
- padding: 0;
137334
- }
137335
- .e-suggestion-header {
137336
- font-size: 16px;
137337
- font-weight: $suggesstions-header-bigger-font-weight;
137338
- margin-bottom: 15px;
137339
- }
137340
- ul {
137341
- li {
137342
- line-height: 22px;
137343
- font-weight: $suggesstions-bigger-font-weight;
137344
- padding: $suggesstions-bigger-list-padding;
137345
- margin: $suggesstions-bigger-list-margin;
137346
- }
137347
- }
137390
+ li {
137391
+ line-height: 22px;
137392
+ font-weight: $suggesstions-bigger-font-weight;
137393
+ padding: $suggesstions-bigger-list-padding;
137394
+ margin: $suggesstions-bigger-list-margin;
137348
137395
  }
137349
137396
  }
137397
+ .e-assist-send {
137398
+ font-size: $send-icon-size-bigger;
137399
+ bottom: $send-icon-bigger-bottom;
137400
+ }
137350
137401
  .e-footer {
137351
- .e-assist-send {
137352
- font-size: $send-icon-size-bigger;
137353
- bottom: 9px;
137354
- }
137355
137402
  .e-input-group.e-control-wrapper.e-multi-line-input {
137356
137403
  .e-textarea {
137357
137404
  min-height: 38px;
@@ -137360,6 +137407,11 @@ $prompt-text-border-color: $grey-dark !default;
137360
137407
  min-height: 28px;
137361
137408
  }
137362
137409
  }
137410
+ &.e-rtl .e-textarea {
137411
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
137412
+ padding: 6px 16px 6px 12px;
137413
+ }
137414
+ }
137363
137415
  }
137364
137416
  }
137365
137417
  .e-stop-response.e-btn-active {
@@ -137371,13 +137423,24 @@ $prompt-text-border-color: $grey-dark !default;
137371
137423
  font-size: $response-stopper-bigger-font-size;
137372
137424
  }
137373
137425
  &.e-rtl {
137374
- .e-views {
137375
- .e-suggestions {
137376
- li {
137377
- margin: $suggesstions-bigger-list-margin-rtl;
137426
+ .e-view-header .e-toolbar-item {
137427
+ &.e-assist-view-header,
137428
+ &.e-custom-view-header {
137429
+ .e-tbar-btn .e-btn-icon {
137430
+ padding: 4px 2px 4px 4px;
137378
137431
  }
137379
137432
  }
137380
137433
  }
137434
+ .e-suggestions {
137435
+ li {
137436
+ margin: $suggesstions-bigger-list-margin-rtl;
137437
+ }
137438
+ }
137439
+ .e-loading-body,
137440
+ .e-content-body,
137441
+ .e-loading-footer {
137442
+ padding: 6px 6px 0 0;
137443
+ }
137381
137444
  }
137382
137445
  }
137383
137446
  }
@@ -137405,14 +137468,29 @@ $prompt-text-border-color: $grey-dark !default;
137405
137468
  width: 100%;
137406
137469
  border-radius: 4px;
137407
137470
  }
137408
- .e-tbar-btn {
137409
- padding: 0;
137471
+ &.e-assist-view-header,
137472
+ &.e-custom-view-header {
137473
+ @if ($skin-name == 'highcontrast') {
137474
+ // To apply box-shadow styling during keyboard navigation
137475
+ padding: 1px;
137476
+ }
137477
+ @else {
137478
+ padding: 0;
137479
+ }
137480
+ .e-tbar-btn {
137481
+ padding: 0;
137482
+ .e-btn-icon {
137483
+ padding: 4px 4px 4px 2px;
137484
+ }
137485
+ }
137486
+ }
137487
+ &.e-active .e-btn {
137488
+ cursor: pointer;
137410
137489
  }
137411
137490
  }
137412
- }
137413
- .e-view-header .e-toolbar-item.e-active .e-btn {
137414
- border-radius: 0;
137415
- cursor: pointer;
137491
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
137492
+ height: calc($aiassist-header-height - 1px);
137493
+ }
137416
137494
  }
137417
137495
  .e-view-container,
137418
137496
  .e-footer {
@@ -137462,36 +137540,94 @@ $prompt-text-border-color: $grey-dark !default;
137462
137540
  }
137463
137541
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
137464
137542
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
137465
- @if $theme-name == 'highcontrast' {
137466
- padding: 6px 0 6px 5px;
137467
- }
137468
- @else {
137469
- padding: 6px 0 6px 2px;
137470
- }
137543
+ padding: 6px 2px;
137471
137544
  }
137472
137545
  }
137473
- .e-views {
137546
+ .e-output-container {
137547
+ width: 90%;
137474
137548
  display: flex;
137475
- justify-content: space-around;
137476
- .e-output-container {
137477
- width: 90%;
137478
- display: flex;
137479
- align-self: flex-start;
137480
- margin: 10px 0;
137549
+ align-self: flex-start;
137550
+ margin: 10px 0;
137551
+ }
137552
+ .e-prompt-icon {
137553
+ margin: 0 0 0 8px;
137554
+ min-height: $aiassist-icon-height;
137555
+ }
137556
+ .e-output-icon {
137557
+ height: $aiassist-icon-height;
137558
+ margin: 0 4px 0 8px;
137559
+ }
137560
+ .e-prompt-icon,
137561
+ .e-output-icon {
137562
+ border-radius: 50%;
137563
+ min-width: $aiassist-icon-width;
137564
+ }
137565
+ .e-loading-body,
137566
+ .e-content-body,
137567
+ .e-loading-footer {
137568
+ padding: 2px 0 0 6px;
137569
+ }
137570
+ .e-content-container {
137571
+ margin-top: 16px;
137572
+ font-size: 14px;
137573
+ justify-content: space-between;
137574
+ }
137575
+ .e-prompt-text {
137576
+ white-space: pre-wrap;
137577
+ height: fit-content;
137578
+ border-radius: $prompt-text-border-radius;
137579
+ padding: $prompt-text-padding;
137580
+ line-height: 20px;
137581
+ }
137582
+ .e-content-footer,
137583
+ .e-prompt-toolbar {
137584
+ opacity: 0;
137585
+ }
137586
+ .e-prompt-container {
137587
+ gap: 2px;
137588
+ align-self: flex-end;
137589
+ max-width: 70%;
137590
+ margin-bottom: 5px;
137591
+ flex-direction: column;
137592
+ &:hover .e-assist-edit-icon {
137593
+ opacity: 1;
137594
+ cursor: pointer;
137481
137595
  }
137482
- .e-prompt-icon {
137483
- margin: 0 8px;
137484
- min-height: $aiassist-icon-height;
137596
+ }
137597
+ .e-suggestion-header {
137598
+ font-size: 14px;
137599
+ font-weight: $suggesstions-header-font-weight;
137600
+ margin: 0 2px 8px 8px;
137601
+ text-align: right;
137602
+ }
137603
+ .e-suggestions {
137604
+ width: 100%;
137605
+ &.e-suggestion-item-template li {
137606
+ padding: 0;
137485
137607
  }
137486
- .e-output-icon {
137487
- height: $aiassist-icon-height;
137488
- margin-left: 10px;
137608
+ ul {
137609
+ list-style-type: none;
137610
+ padding: 0;
137611
+ margin: 0;
137612
+ display: flex;
137613
+ flex-wrap: wrap;
137614
+ justify-content: end;
137489
137615
  }
137490
- .e-prompt-icon,
137491
- .e-output-icon {
137492
- border-radius: 50%;
137493
- min-width: $aiassist-icon-width;
137616
+ li {
137617
+ line-height: 20px;
137618
+ font-weight: $suggesstions-font-weight;
137619
+ padding: $suggesstions-list-padding;
137620
+ margin: $suggesstions-list-margin;
137621
+ border-radius: $suggesstions-list-border-radius;
137622
+ cursor: pointer;
137623
+ white-space: nowrap;
137624
+ overflow: hidden;
137625
+ text-overflow: ellipsis;
137494
137626
  }
137627
+ }
137628
+ .e-views {
137629
+ display: flex;
137630
+ justify-content: space-around;
137495
137631
  .e-content-body {
137496
137632
  line-height: 25px;
137497
137633
  border-radius: 4px;
@@ -137577,85 +137713,36 @@ $prompt-text-border-color: $grey-dark !default;
137577
137713
  .e-content-body > *:first-child {
137578
137714
  margin-block-start: 0;
137579
137715
  }
137580
- .e-loading-body,
137581
- .e-content-body,
137582
- .e-loading-footer {
137583
- padding: 2px 0 0 8px;
137584
- }
137585
- .e-content-footer,
137586
- .e-prompt-toolbar {
137587
- opacity: 0;
137588
- }
137589
- .e-content-container {
137590
- margin-top: 16px;
137591
- font-size: 14px;
137592
- justify-content: space-between;
137593
- .e-prompt-text {
137594
- white-space: pre-wrap;
137595
- height: fit-content;
137596
- border-radius: $prompt-text-border-radius;
137597
- padding: $prompt-text-padding;
137598
- margin-right: 2px;
137599
- line-height: 20px;
137600
- }
137601
- }
137602
- .e-suggestions {
137603
- width: 100%;
137604
- &.e-suggestion-item-template li {
137605
- padding: 0;
137606
- }
137607
- .e-suggestion-header {
137608
- font-size: 14px;
137609
- font-weight: $suggesstions-header-font-weight;
137610
- margin: 0 2px 8px 8px;
137611
- text-align: right;
137612
- }
137613
- ul {
137614
- list-style-type: none;
137615
- padding: 0;
137616
- margin: 0;
137617
- display: flex;
137618
- flex-wrap: wrap;
137619
- justify-content: end;
137620
- }
137621
- li {
137622
- line-height: 20px;
137623
- font-weight: $suggesstions-font-weight;
137624
- padding: $suggesstions-list-padding;
137625
- margin: $suggesstions-list-margin;
137626
- border-radius: $suggesstions-list-border-radius;
137627
- cursor: pointer;
137628
- white-space: nowrap;
137629
- overflow: hidden;
137630
- text-overflow: ellipsis;
137631
- }
137632
- }
137633
- .e-prompt-container {
137634
- gap: 2px;
137635
- align-self: flex-end;
137636
- max-width: 70%;
137637
- margin-bottom: 5px;
137638
- flex-direction: column;
137639
- &:hover .e-assist-edit-icon {
137640
- opacity: 1;
137641
- cursor: pointer;
137642
- }
137643
- }
137644
137716
  }
137645
137717
  .e-views,
137646
137718
  .e-custom-view,
137647
- .e-aiassist-view-content-section {
137719
+ .e-assistview-content-section {
137648
137720
  height: 100%;
137649
- overflow-y: scroll;
137721
+ overflow: scroll;
137650
137722
  &::-webkit-scrollbar {
137651
137723
  width: $ai-assist-scrollbar-width;
137724
+ height: $ai-assist-scrollbar-width;
137652
137725
  }
137653
137726
  &::-webkit-scrollbar-thumb {
137654
137727
  border-radius: 10px;
137655
137728
  }
137656
137729
  }
137657
- .e-content {
137658
- margin-right: 8px;
137730
+ .e-assist-send {
137731
+ position: absolute;
137732
+ right: 20px;
137733
+ font-size: $send-icon-size;
137734
+ bottom: $send-icon-bottom;
137735
+ padding-top: 2px;
137736
+ }
137737
+ .e-assist-send.disabled {
137738
+ pointer-events: none;
137739
+ opacity: .5;
137740
+ cursor: not-allowed;
137741
+ }
137742
+ .e-assist-send.enabled {
137743
+ pointer-events: auto;
137744
+ opacity: 1;
137745
+ cursor: pointer;
137659
137746
  }
137660
137747
  .e-footer {
137661
137748
  position: relative;
@@ -137674,23 +137761,6 @@ $prompt-text-border-color: $grey-dark !default;
137674
137761
  .hide-scrollbar textarea {
137675
137762
  scrollbar-width: none;
137676
137763
  }
137677
- .e-assist-send {
137678
- position: absolute;
137679
- right: 20px;
137680
- font-size: $send-icon-size;
137681
- bottom: 8px;
137682
- padding-top: 2px;
137683
- }
137684
- .e-assist-send.disabled {
137685
- pointer-events: none;
137686
- opacity: .5;
137687
- cursor: not-allowed;
137688
- }
137689
- .e-assist-send.enabled {
137690
- pointer-events: auto;
137691
- opacity: 1;
137692
- cursor: pointer;
137693
- }
137694
137764
  &:has(.e-rtl) .e-assist-send {
137695
137765
  right: unset;
137696
137766
  left: 20px;
@@ -137702,6 +137772,13 @@ $prompt-text-border-color: $grey-dark !default;
137702
137772
  .e-multi-line-input.e-rtl {
137703
137773
  padding-left: 35px;
137704
137774
  padding-right: unset;
137775
+ &.e-input-group.e-control-wrapper {
137776
+ .e-textarea {
137777
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
137778
+ padding: 4px 12px 4px 8px;
137779
+ }
137780
+ }
137781
+ }
137705
137782
  }
137706
137783
  .e-input-group.e-multi-line-input {
137707
137784
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -137783,16 +137860,24 @@ $prompt-text-border-color: $grey-dark !default;
137783
137860
  outline: 1px solid;
137784
137861
  }
137785
137862
  &.e-rtl {
137786
- .e-views {
137787
- .e-suggestions {
137788
- .e-suggestion-header {
137789
- text-align: left;
137790
- margin: 0 8px 8px 2px;
137791
- }
137792
- li {
137793
- margin: $suggesstions-list-margin-rtl;
137863
+ .e-view-header .e-toolbar-item {
137864
+ &.e-assist-view-header,
137865
+ &.e-custom-view-header {
137866
+ .e-tbar-btn .e-btn-icon {
137867
+ padding: 4px 2px 4px 4px;
137794
137868
  }
137795
137869
  }
137870
+ }
137871
+ .e-suggestion-header {
137872
+ text-align: left;
137873
+ margin: 0 8px 8px 2px;
137874
+ }
137875
+ .e-suggestions {
137876
+ li {
137877
+ margin: $suggesstions-list-margin-rtl;
137878
+ }
137879
+ }
137880
+ .e-views {
137796
137881
  .e-content-body {
137797
137882
  blockquote {
137798
137883
  padding-left: unset;
@@ -137807,6 +137892,17 @@ $prompt-text-border-color: $grey-dark !default;
137807
137892
  }
137808
137893
  }
137809
137894
  }
137895
+ .e-loading-body,
137896
+ .e-content-body,
137897
+ .e-loading-footer {
137898
+ padding: 2px 6px 0 0;
137899
+ }
137900
+ .e-prompt-icon {
137901
+ margin: 0 8px 0 0;
137902
+ }
137903
+ .e-output-icon {
137904
+ margin: 0 8px 0 4px;
137905
+ }
137810
137906
  }
137811
137907
  }
137812
137908
  @media (max-width: 760px) {
@@ -137815,12 +137911,14 @@ $prompt-text-border-color: $grey-dark !default;
137815
137911
  .e-footer {
137816
137912
  width: 100%;
137817
137913
  }
137818
- .e-view-container .e-suggestions {
137914
+ .e-view-container .e-suggestions,
137915
+ .e-prompt-content {
137819
137916
  padding-right: 8px;
137820
137917
  }
137821
137918
  &.e-rtl {
137822
- .e-view-container .e-suggestions {
137823
- padding-left: 8px;
137919
+ .e-view-container .e-suggestions,
137920
+ .e-prompt-content {
137921
+ padding: 0 0 0 8px;
137824
137922
  }
137825
137923
  }
137826
137924
  }
@@ -137858,26 +137956,55 @@ $prompt-text-border-color: $grey-dark !default;
137858
137956
  }
137859
137957
  .e-tbar-btn {
137860
137958
  background: transparent;
137959
+ &:focus {
137960
+ box-shadow: none;
137961
+ }
137962
+ &:focus-visible {
137963
+ box-shadow: $tbar-header-btn-focus-box-shadow;
137964
+ @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') {
137965
+ background: $tbar-header-hover-bg-color;
137966
+ }
137967
+ }
137861
137968
  }
137862
137969
  }
137863
137970
  }
137864
- .e-views {
137865
- .e-prompt-icon,
137866
- .e-output-icon {
137867
- border: 1px solid $icon-border-color;
137868
- color: $user-logo-color;
137869
- background-color: $user-logo-bg-color;
137870
- }
137871
- .e-prompt-text {
137872
- background: $suggested-content-bg-color;
137971
+ .e-suggestion-header {
137972
+ color: $suggesstions-header-color;
137973
+ }
137974
+ .e-suggestions {
137975
+ li {
137873
137976
  color: $suggested-content-text-color;
137977
+ box-shadow: $suggestion-li-box-shadow;
137874
137978
  @if ($skin-name == 'bootstrap5.3') {
137875
137979
  border: none;
137876
137980
  }
137877
137981
  @else {
137878
- border: 1px solid $prompt-text-border-color;
137982
+ border: 1px solid $suggestion-li-border-color;
137879
137983
  }
137880
137984
  }
137985
+ }
137986
+ .e-prompt-icon,
137987
+ .e-output-icon {
137988
+ border: 1px solid $icon-border-color;
137989
+ color: $user-logo-color;
137990
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
137991
+ background: $user-logo-bg-color;
137992
+ }
137993
+ @else {
137994
+ background-color: $user-logo-bg-color;
137995
+ }
137996
+ }
137997
+ .e-prompt-text {
137998
+ background: $suggested-content-bg-color;
137999
+ color: $suggested-content-text-color;
138000
+ @if ($skin-name == 'bootstrap5.3') {
138001
+ border: none;
138002
+ }
138003
+ @else {
138004
+ border: 1px solid $prompt-text-border-color;
138005
+ }
138006
+ }
138007
+ .e-views {
137881
138008
  .e-content-body {
137882
138009
  color: $response-text-color;
137883
138010
  a {
@@ -137917,21 +138044,6 @@ $prompt-text-border-color: $grey-dark !default;
137917
138044
  color: rgba(255, 212, 212, 1);
137918
138045
  }
137919
138046
  }
137920
- .e-suggestions {
137921
- .e-suggestion-header {
137922
- color: $suggesstions-header-color;
137923
- }
137924
- li {
137925
- color: $suggested-content-text-color;
137926
- box-shadow: $suggestion-li-box-shadow;
137927
- @if ($skin-name == 'bootstrap5.3') {
137928
- border: none;
137929
- }
137930
- @else {
137931
- border: 1px solid $suggestion-li-border-color;
137932
- }
137933
- }
137934
- }
137935
138047
  }
137936
138048
  .e-stop-response {
137937
138049
  border-color: $response-stopper-border-color;
@@ -137941,21 +138053,21 @@ $prompt-text-border-color: $grey-dark !default;
137941
138053
  }
137942
138054
  .e-views,
137943
138055
  .e-custom-view,
137944
- .e-aiassist-view-content-section {
138056
+ .e-assistview-content-section {
137945
138057
  &::-webkit-scrollbar-thumb {
137946
138058
  background: $scrollbar-color;
137947
138059
  }
137948
138060
  }
138061
+ .e-assist-send {
138062
+ color: $send-icon-color;
138063
+ &.disabled {
138064
+ color: $send-icon-disabled-color;
138065
+ }
138066
+ }
137949
138067
  .e-footer {
137950
138068
  textarea::-webkit-scrollbar-thumb {
137951
138069
  background: $scrollbar-color;
137952
138070
  }
137953
- .e-assist-send {
137954
- color: $send-icon-color;
137955
- &.disabled {
137956
- color: $send-icon-disabled-color;
137957
- }
137958
- }
137959
138071
  // To override the default border style of the textarea component for the Material and Material3 themes.
137960
138072
  .e-input-group.e-multi-line-input {
137961
138073
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {