@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
@@ -36466,13 +36466,11 @@ $slider-button-vup-bg-image: none !default;
36466
36466
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
36467
36467
  @include alignment(6px, calc(50% - 3px), 'vertical');
36468
36468
  }
36469
- @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' ) {
36470
- @if ($skin-name == 'tailwind') {
36471
- left: calc(50%);
36472
- }
36473
- @else {
36474
- @include alignment(4px, calc(50% - 2px), 'vertical');
36475
- }
36469
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
36470
+ @include alignment(4px, calc(50% - 2px), 'vertical');
36471
+ }
36472
+ @if ($skin-name == 'tailwind') {
36473
+ @include alignment(4px, calc(50%), 'vertical');
36476
36474
  }
36477
36475
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
36478
36476
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -41446,6 +41444,7 @@ $radio-btn-check-transition: none !default;
41446
41444
  $radio-btn-disabled-border-color: $border !default;
41447
41445
  $radio-btn-disabled-checked-border-color: transparent !default;
41448
41446
  $radio-btn-disabled-background-color: $content-bg-color-alt3 !default;
41447
+ $radio-btn-disabled-not-checked-bg-color: transparent !default;
41449
41448
  $radio-btn-disabled-color: $border !default;
41450
41449
  $radio-btn-disabled-checked-color: $content-text-color-disabled !default;
41451
41450
  $radio-btn-font-color: $content-text-color !default;
@@ -42257,7 +42256,7 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
42257
42256
  }
42258
42257
 
42259
42258
  &::before {
42260
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
42259
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
42261
42260
  background-color: $radio-btn-disabled-not-checked-bg-color;
42262
42261
  }
42263
42262
  @else {
@@ -44350,6 +44349,10 @@ $listview-template-multiline-content-color: $content-text-color-alt2 !default;
44350
44349
  }
44351
44350
  }
44352
44351
 
44352
+ &.e-virtualization .e-list-container{
44353
+ overflow: unset;
44354
+ }
44355
+
44353
44356
  & .e-list-container {
44354
44357
  overflow: hidden;
44355
44358
  position: relative;
@@ -67579,6 +67582,10 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
67579
67582
  display: block;
67580
67583
  }
67581
67584
 
67585
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
67586
+ margin-right: 30px;
67587
+ }
67588
+
67582
67589
  .e-multi-select-wrapper .e-multi-hidden {
67583
67590
  border: 0;
67584
67591
  height: 0;
@@ -84646,7 +84653,12 @@ $grid-checkmark-color: $primary !default;
84646
84653
  /* stylelint-enable */
84647
84654
 
84648
84655
  .e-dlg-content {
84649
- padding: 24px 27px;
84656
+ @if $grid-skin == 'fluent2' {
84657
+ padding: 24px 27px;
84658
+ }
84659
+ @else {
84660
+ padding: 8px 16px 8px 8px;
84661
+ }
84650
84662
  overflow-y: hidden;
84651
84663
  }
84652
84664
 
@@ -85501,7 +85513,7 @@ $grid-checkmark-color: $primary !default;
85501
85513
  }
85502
85514
 
85503
85515
  .e-grid-popup {
85504
- position: relative;
85516
+ position: absolute;
85505
85517
  }
85506
85518
 
85507
85519
  #{&}.e-grid,
@@ -87821,6 +87833,12 @@ $grid-checkmark-color: $primary !default;
87821
87833
  padding: $grid-columnchooser-toolbardiv-padding;
87822
87834
  }
87823
87835
 
87836
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
87837
+ @if $grid-skin == 'fluent' {
87838
+ padding-bottom: 1px;
87839
+ }
87840
+ }
87841
+
87824
87842
  .e-edit-dialog {
87825
87843
  min-height: 350px;
87826
87844
  .e-dlg-content {
@@ -88635,14 +88653,17 @@ $grid-checkmark-color: $primary !default;
88635
88653
  }
88636
88654
 
88637
88655
  &.e-wrap {
88638
- & .e-gridheader .e-rowcell,
88639
- & .e-gridcontent .e-rowcell,
88656
+ & .e-rowcell,
88640
88657
  & .e-columnheader .e-stackedheadercelldiv,
88641
88658
  & .e-columnheader .e-headercelldiv,
88642
88659
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
88643
88660
  @include wrap-styles;
88644
88661
  }
88645
88662
 
88663
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
88664
+ white-space: nowrap;
88665
+ }
88666
+
88646
88667
  & .e-stackedheader .e-columnheader {
88647
88668
  .e-stackedheadercelldiv,
88648
88669
  .e-headercelldiv {
@@ -89200,7 +89221,8 @@ $grid-checkmark-color: $primary !default;
89200
89221
  }
89201
89222
 
89202
89223
  @if $grid-skin == 'fluent2' {
89203
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
89224
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
89225
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
89204
89226
  padding: 0 6px;
89205
89227
  }
89206
89228
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -90114,7 +90136,8 @@ $grid-checkmark-color: $primary !default;
90114
90136
  }
90115
90137
 
90116
90138
  @if $grid-skin == 'fluent2' {
90117
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
90139
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
90140
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
90118
90141
  color: $flyout-text-color-hover;
90119
90142
  }
90120
90143
  }
@@ -138237,6 +138260,8 @@ $aiassist-header-height: 46px !default;
138237
138260
  $aiassist-icon-height: 30px !default;
138238
138261
  $aiassist-icon-width: 30px !default;
138239
138262
  $send-icon-size: 14px !default;
138263
+ $send-icon-bottom: 8px !default;
138264
+ $send-icon-bigger-bottom: 11px !default;
138240
138265
  $aiassist-bigger-header-height: 50px !default;
138241
138266
  $aiassist-bigger-icon-height: 40px !default;
138242
138267
  $aiassist-bigger-icon-width: 40px !default;
@@ -138277,63 +138302,86 @@ $rating-selected-bg-color: $rating-selected-color !default;
138277
138302
  $send-icon-color: rgba(255, 255, 255, 1) !default;
138278
138303
  $send-icon-disabled-color: $send-icon-color !default;
138279
138304
  $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138305
+ $tbar-header-btn-focus-box-shadow: none !default;
138306
+ $tbar-header-hover-bg-color: transparent !default;
138280
138307
 
138281
138308
  @include export-module('aiassistview-bigger') {
138282
138309
  .e-bigger.e-aiassistview,
138283
138310
  .e-bigger .e-aiassistview {
138284
138311
  .e-view-header {
138285
138312
  height: $aiassist-bigger-header-height;
138313
+ .e-toolbar {
138314
+ .e-toolbar-items {
138315
+ .e-toolbar-left {
138316
+ height: calc($aiassist-bigger-header-height - 1px);
138317
+ }
138318
+ .e-toolbar-item {
138319
+ &.e-assist-view-header,
138320
+ &.e-custom-view-header {
138321
+ @if ($skin-name == 'highcontrast') {
138322
+ // To apply box-shadow styling during keyboard navigation
138323
+ padding: 1.5px;
138324
+ }
138325
+ @else {
138326
+ padding: 0;
138327
+ }
138328
+ .e-tbar-btn {
138329
+ padding: 0;
138330
+ .e-btn-icon {
138331
+ padding: 4px 4px 4px 2px;
138332
+ }
138333
+ }
138334
+ }
138335
+ }
138336
+ }
138337
+ }
138286
138338
  }
138287
138339
  .e-view-content {
138288
138340
  height: calc(100% - $aiassist-bigger-header-height);
138289
138341
  }
138290
- .e-views {
138291
- .e-prompt-icon {
138292
- min-height: $aiassist-bigger-icon-height;
138293
- }
138294
- .e-output-icon {
138295
- height: $aiassist-bigger-icon-height;
138296
- }
138297
- .e-prompt-icon,
138298
- .e-output-icon {
138299
- min-width: $aiassist-bigger-icon-width;
138300
- }
138301
- .e-loading-body,
138302
- .e-content-body,
138303
- .e-loading-footer {
138304
- padding: 2px 0 0 10px;
138305
- }
138306
- .e-content-container {
138307
- font-size: 16px;
138308
- .e-prompt-text {
138309
- padding: $prompt-text-bigger-padding;
138310
- line-height: 22px;
138311
- }
138342
+ .e-prompt-icon {
138343
+ min-height: $aiassist-bigger-icon-height;
138344
+ }
138345
+ .e-output-icon {
138346
+ height: $aiassist-bigger-icon-height;
138347
+ }
138348
+ .e-prompt-icon,
138349
+ .e-output-icon {
138350
+ min-width: $aiassist-bigger-icon-width;
138351
+ }
138352
+ .e-loading-body,
138353
+ .e-content-body,
138354
+ .e-loading-footer {
138355
+ padding: 6px 0 0 6px;
138356
+ }
138357
+ .e-prompt-text {
138358
+ padding: $prompt-text-bigger-padding;
138359
+ line-height: 22px;
138360
+ }
138361
+ .e-content-container {
138362
+ font-size: 16px;
138363
+ }
138364
+ .e-suggestion-header {
138365
+ font-size: 16px;
138366
+ font-weight: $suggesstions-header-bigger-font-weight;
138367
+ margin-bottom: 15px;
138368
+ }
138369
+ .e-suggestions {
138370
+ &.e-suggestion-item-template ul li {
138371
+ padding: 0;
138312
138372
  }
138313
- .e-suggestions {
138314
- &.e-suggestion-item-template ul li {
138315
- padding: 0;
138316
- }
138317
- .e-suggestion-header {
138318
- font-size: 16px;
138319
- font-weight: $suggesstions-header-bigger-font-weight;
138320
- margin-bottom: 15px;
138321
- }
138322
- ul {
138323
- li {
138324
- line-height: 22px;
138325
- font-weight: $suggesstions-bigger-font-weight;
138326
- padding: $suggesstions-bigger-list-padding;
138327
- margin: $suggesstions-bigger-list-margin;
138328
- }
138329
- }
138373
+ li {
138374
+ line-height: 22px;
138375
+ font-weight: $suggesstions-bigger-font-weight;
138376
+ padding: $suggesstions-bigger-list-padding;
138377
+ margin: $suggesstions-bigger-list-margin;
138330
138378
  }
138331
138379
  }
138380
+ .e-assist-send {
138381
+ font-size: $send-icon-size-bigger;
138382
+ bottom: $send-icon-bigger-bottom;
138383
+ }
138332
138384
  .e-footer {
138333
- .e-assist-send {
138334
- font-size: $send-icon-size-bigger;
138335
- bottom: 9px;
138336
- }
138337
138385
  .e-input-group.e-control-wrapper.e-multi-line-input {
138338
138386
  .e-textarea {
138339
138387
  min-height: 38px;
@@ -138342,6 +138390,11 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138342
138390
  min-height: 28px;
138343
138391
  }
138344
138392
  }
138393
+ &.e-rtl .e-textarea {
138394
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
138395
+ padding: 6px 16px 6px 12px;
138396
+ }
138397
+ }
138345
138398
  }
138346
138399
  }
138347
138400
  .e-stop-response.e-btn-active {
@@ -138353,13 +138406,24 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138353
138406
  font-size: $response-stopper-bigger-font-size;
138354
138407
  }
138355
138408
  &.e-rtl {
138356
- .e-views {
138357
- .e-suggestions {
138358
- li {
138359
- margin: $suggesstions-bigger-list-margin-rtl;
138409
+ .e-view-header .e-toolbar-item {
138410
+ &.e-assist-view-header,
138411
+ &.e-custom-view-header {
138412
+ .e-tbar-btn .e-btn-icon {
138413
+ padding: 4px 2px 4px 4px;
138360
138414
  }
138361
138415
  }
138362
138416
  }
138417
+ .e-suggestions {
138418
+ li {
138419
+ margin: $suggesstions-bigger-list-margin-rtl;
138420
+ }
138421
+ }
138422
+ .e-loading-body,
138423
+ .e-content-body,
138424
+ .e-loading-footer {
138425
+ padding: 6px 6px 0 0;
138426
+ }
138363
138427
  }
138364
138428
  }
138365
138429
  }
@@ -138387,14 +138451,29 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138387
138451
  width: 100%;
138388
138452
  border-radius: 4px;
138389
138453
  }
138390
- .e-tbar-btn {
138391
- padding: 0;
138454
+ &.e-assist-view-header,
138455
+ &.e-custom-view-header {
138456
+ @if ($skin-name == 'highcontrast') {
138457
+ // To apply box-shadow styling during keyboard navigation
138458
+ padding: 1px;
138459
+ }
138460
+ @else {
138461
+ padding: 0;
138462
+ }
138463
+ .e-tbar-btn {
138464
+ padding: 0;
138465
+ .e-btn-icon {
138466
+ padding: 4px 4px 4px 2px;
138467
+ }
138468
+ }
138469
+ }
138470
+ &.e-active .e-btn {
138471
+ cursor: pointer;
138392
138472
  }
138393
138473
  }
138394
- }
138395
- .e-view-header .e-toolbar-item.e-active .e-btn {
138396
- border-radius: 0;
138397
- cursor: pointer;
138474
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
138475
+ height: calc($aiassist-header-height - 1px);
138476
+ }
138398
138477
  }
138399
138478
  .e-view-container,
138400
138479
  .e-footer {
@@ -138444,36 +138523,94 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138444
138523
  }
138445
138524
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
138446
138525
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
138447
- @if $theme-name == 'highcontrast' {
138448
- padding: 6px 0 6px 5px;
138449
- }
138450
- @else {
138451
- padding: 6px 0 6px 2px;
138452
- }
138526
+ padding: 6px 2px;
138453
138527
  }
138454
138528
  }
138455
- .e-views {
138529
+ .e-output-container {
138530
+ width: 90%;
138456
138531
  display: flex;
138457
- justify-content: space-around;
138458
- .e-output-container {
138459
- width: 90%;
138460
- display: flex;
138461
- align-self: flex-start;
138462
- margin: 10px 0;
138532
+ align-self: flex-start;
138533
+ margin: 10px 0;
138534
+ }
138535
+ .e-prompt-icon {
138536
+ margin: 0 0 0 8px;
138537
+ min-height: $aiassist-icon-height;
138538
+ }
138539
+ .e-output-icon {
138540
+ height: $aiassist-icon-height;
138541
+ margin: 0 4px 0 8px;
138542
+ }
138543
+ .e-prompt-icon,
138544
+ .e-output-icon {
138545
+ border-radius: 50%;
138546
+ min-width: $aiassist-icon-width;
138547
+ }
138548
+ .e-loading-body,
138549
+ .e-content-body,
138550
+ .e-loading-footer {
138551
+ padding: 2px 0 0 6px;
138552
+ }
138553
+ .e-content-container {
138554
+ margin-top: 16px;
138555
+ font-size: 14px;
138556
+ justify-content: space-between;
138557
+ }
138558
+ .e-prompt-text {
138559
+ white-space: pre-wrap;
138560
+ height: fit-content;
138561
+ border-radius: $prompt-text-border-radius;
138562
+ padding: $prompt-text-padding;
138563
+ line-height: 20px;
138564
+ }
138565
+ .e-content-footer,
138566
+ .e-prompt-toolbar {
138567
+ opacity: 0;
138568
+ }
138569
+ .e-prompt-container {
138570
+ gap: 2px;
138571
+ align-self: flex-end;
138572
+ max-width: 70%;
138573
+ margin-bottom: 5px;
138574
+ flex-direction: column;
138575
+ &:hover .e-assist-edit-icon {
138576
+ opacity: 1;
138577
+ cursor: pointer;
138463
138578
  }
138464
- .e-prompt-icon {
138465
- margin: 0 8px;
138466
- min-height: $aiassist-icon-height;
138579
+ }
138580
+ .e-suggestion-header {
138581
+ font-size: 14px;
138582
+ font-weight: $suggesstions-header-font-weight;
138583
+ margin: 0 2px 8px 8px;
138584
+ text-align: right;
138585
+ }
138586
+ .e-suggestions {
138587
+ width: 100%;
138588
+ &.e-suggestion-item-template li {
138589
+ padding: 0;
138467
138590
  }
138468
- .e-output-icon {
138469
- height: $aiassist-icon-height;
138470
- margin-left: 10px;
138591
+ ul {
138592
+ list-style-type: none;
138593
+ padding: 0;
138594
+ margin: 0;
138595
+ display: flex;
138596
+ flex-wrap: wrap;
138597
+ justify-content: end;
138471
138598
  }
138472
- .e-prompt-icon,
138473
- .e-output-icon {
138474
- border-radius: 50%;
138475
- min-width: $aiassist-icon-width;
138599
+ li {
138600
+ line-height: 20px;
138601
+ font-weight: $suggesstions-font-weight;
138602
+ padding: $suggesstions-list-padding;
138603
+ margin: $suggesstions-list-margin;
138604
+ border-radius: $suggesstions-list-border-radius;
138605
+ cursor: pointer;
138606
+ white-space: nowrap;
138607
+ overflow: hidden;
138608
+ text-overflow: ellipsis;
138476
138609
  }
138610
+ }
138611
+ .e-views {
138612
+ display: flex;
138613
+ justify-content: space-around;
138477
138614
  .e-content-body {
138478
138615
  line-height: 25px;
138479
138616
  border-radius: 4px;
@@ -138559,85 +138696,36 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138559
138696
  .e-content-body > *:first-child {
138560
138697
  margin-block-start: 0;
138561
138698
  }
138562
- .e-loading-body,
138563
- .e-content-body,
138564
- .e-loading-footer {
138565
- padding: 2px 0 0 8px;
138566
- }
138567
- .e-content-footer,
138568
- .e-prompt-toolbar {
138569
- opacity: 0;
138570
- }
138571
- .e-content-container {
138572
- margin-top: 16px;
138573
- font-size: 14px;
138574
- justify-content: space-between;
138575
- .e-prompt-text {
138576
- white-space: pre-wrap;
138577
- height: fit-content;
138578
- border-radius: $prompt-text-border-radius;
138579
- padding: $prompt-text-padding;
138580
- margin-right: 2px;
138581
- line-height: 20px;
138582
- }
138583
- }
138584
- .e-suggestions {
138585
- width: 100%;
138586
- &.e-suggestion-item-template li {
138587
- padding: 0;
138588
- }
138589
- .e-suggestion-header {
138590
- font-size: 14px;
138591
- font-weight: $suggesstions-header-font-weight;
138592
- margin: 0 2px 8px 8px;
138593
- text-align: right;
138594
- }
138595
- ul {
138596
- list-style-type: none;
138597
- padding: 0;
138598
- margin: 0;
138599
- display: flex;
138600
- flex-wrap: wrap;
138601
- justify-content: end;
138602
- }
138603
- li {
138604
- line-height: 20px;
138605
- font-weight: $suggesstions-font-weight;
138606
- padding: $suggesstions-list-padding;
138607
- margin: $suggesstions-list-margin;
138608
- border-radius: $suggesstions-list-border-radius;
138609
- cursor: pointer;
138610
- white-space: nowrap;
138611
- overflow: hidden;
138612
- text-overflow: ellipsis;
138613
- }
138614
- }
138615
- .e-prompt-container {
138616
- gap: 2px;
138617
- align-self: flex-end;
138618
- max-width: 70%;
138619
- margin-bottom: 5px;
138620
- flex-direction: column;
138621
- &:hover .e-assist-edit-icon {
138622
- opacity: 1;
138623
- cursor: pointer;
138624
- }
138625
- }
138626
138699
  }
138627
138700
  .e-views,
138628
138701
  .e-custom-view,
138629
- .e-aiassist-view-content-section {
138702
+ .e-assistview-content-section {
138630
138703
  height: 100%;
138631
- overflow-y: scroll;
138704
+ overflow: scroll;
138632
138705
  &::-webkit-scrollbar {
138633
138706
  width: $ai-assist-scrollbar-width;
138707
+ height: $ai-assist-scrollbar-width;
138634
138708
  }
138635
138709
  &::-webkit-scrollbar-thumb {
138636
138710
  border-radius: 10px;
138637
138711
  }
138638
138712
  }
138639
- .e-content {
138640
- margin-right: 8px;
138713
+ .e-assist-send {
138714
+ position: absolute;
138715
+ right: 20px;
138716
+ font-size: $send-icon-size;
138717
+ bottom: $send-icon-bottom;
138718
+ padding-top: 2px;
138719
+ }
138720
+ .e-assist-send.disabled {
138721
+ pointer-events: none;
138722
+ opacity: .5;
138723
+ cursor: not-allowed;
138724
+ }
138725
+ .e-assist-send.enabled {
138726
+ pointer-events: auto;
138727
+ opacity: 1;
138728
+ cursor: pointer;
138641
138729
  }
138642
138730
  .e-footer {
138643
138731
  position: relative;
@@ -138656,23 +138744,6 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138656
138744
  .hide-scrollbar textarea {
138657
138745
  scrollbar-width: none;
138658
138746
  }
138659
- .e-assist-send {
138660
- position: absolute;
138661
- right: 20px;
138662
- font-size: $send-icon-size;
138663
- bottom: 8px;
138664
- padding-top: 2px;
138665
- }
138666
- .e-assist-send.disabled {
138667
- pointer-events: none;
138668
- opacity: .5;
138669
- cursor: not-allowed;
138670
- }
138671
- .e-assist-send.enabled {
138672
- pointer-events: auto;
138673
- opacity: 1;
138674
- cursor: pointer;
138675
- }
138676
138747
  &:has(.e-rtl) .e-assist-send {
138677
138748
  right: unset;
138678
138749
  left: 20px;
@@ -138684,6 +138755,13 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138684
138755
  .e-multi-line-input.e-rtl {
138685
138756
  padding-left: 35px;
138686
138757
  padding-right: unset;
138758
+ &.e-input-group.e-control-wrapper {
138759
+ .e-textarea {
138760
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
138761
+ padding: 4px 12px 4px 8px;
138762
+ }
138763
+ }
138764
+ }
138687
138765
  }
138688
138766
  .e-input-group.e-multi-line-input {
138689
138767
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -138765,16 +138843,24 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138765
138843
  outline: 1px solid;
138766
138844
  }
138767
138845
  &.e-rtl {
138768
- .e-views {
138769
- .e-suggestions {
138770
- .e-suggestion-header {
138771
- text-align: left;
138772
- margin: 0 8px 8px 2px;
138773
- }
138774
- li {
138775
- margin: $suggesstions-list-margin-rtl;
138846
+ .e-view-header .e-toolbar-item {
138847
+ &.e-assist-view-header,
138848
+ &.e-custom-view-header {
138849
+ .e-tbar-btn .e-btn-icon {
138850
+ padding: 4px 2px 4px 4px;
138776
138851
  }
138777
138852
  }
138853
+ }
138854
+ .e-suggestion-header {
138855
+ text-align: left;
138856
+ margin: 0 8px 8px 2px;
138857
+ }
138858
+ .e-suggestions {
138859
+ li {
138860
+ margin: $suggesstions-list-margin-rtl;
138861
+ }
138862
+ }
138863
+ .e-views {
138778
138864
  .e-content-body {
138779
138865
  blockquote {
138780
138866
  padding-left: unset;
@@ -138789,6 +138875,17 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138789
138875
  }
138790
138876
  }
138791
138877
  }
138878
+ .e-loading-body,
138879
+ .e-content-body,
138880
+ .e-loading-footer {
138881
+ padding: 2px 6px 0 0;
138882
+ }
138883
+ .e-prompt-icon {
138884
+ margin: 0 8px 0 0;
138885
+ }
138886
+ .e-output-icon {
138887
+ margin: 0 8px 0 4px;
138888
+ }
138792
138889
  }
138793
138890
  }
138794
138891
  @media (max-width: 760px) {
@@ -138797,12 +138894,14 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138797
138894
  .e-footer {
138798
138895
  width: 100%;
138799
138896
  }
138800
- .e-view-container .e-suggestions {
138897
+ .e-view-container .e-suggestions,
138898
+ .e-prompt-content {
138801
138899
  padding-right: 8px;
138802
138900
  }
138803
138901
  &.e-rtl {
138804
- .e-view-container .e-suggestions {
138805
- padding-left: 8px;
138902
+ .e-view-container .e-suggestions,
138903
+ .e-prompt-content {
138904
+ padding: 0 0 0 8px;
138806
138905
  }
138807
138906
  }
138808
138907
  }
@@ -138840,26 +138939,55 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138840
138939
  }
138841
138940
  .e-tbar-btn {
138842
138941
  background: transparent;
138942
+ &:focus {
138943
+ box-shadow: none;
138944
+ }
138945
+ &:focus-visible {
138946
+ box-shadow: $tbar-header-btn-focus-box-shadow;
138947
+ @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') {
138948
+ background: $tbar-header-hover-bg-color;
138949
+ }
138950
+ }
138843
138951
  }
138844
138952
  }
138845
138953
  }
138846
- .e-views {
138847
- .e-prompt-icon,
138848
- .e-output-icon {
138849
- border: 1px solid $icon-border-color;
138850
- color: $user-logo-color;
138851
- background-color: $user-logo-bg-color;
138852
- }
138853
- .e-prompt-text {
138854
- background: $suggested-content-bg-color;
138954
+ .e-suggestion-header {
138955
+ color: $suggesstions-header-color;
138956
+ }
138957
+ .e-suggestions {
138958
+ li {
138855
138959
  color: $suggested-content-text-color;
138960
+ box-shadow: $suggestion-li-box-shadow;
138856
138961
  @if ($skin-name == 'bootstrap5.3') {
138857
138962
  border: none;
138858
138963
  }
138859
138964
  @else {
138860
- border: 1px solid $prompt-text-border-color;
138965
+ border: 1px solid $suggestion-li-border-color;
138861
138966
  }
138862
138967
  }
138968
+ }
138969
+ .e-prompt-icon,
138970
+ .e-output-icon {
138971
+ border: 1px solid $icon-border-color;
138972
+ color: $user-logo-color;
138973
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
138974
+ background: $user-logo-bg-color;
138975
+ }
138976
+ @else {
138977
+ background-color: $user-logo-bg-color;
138978
+ }
138979
+ }
138980
+ .e-prompt-text {
138981
+ background: $suggested-content-bg-color;
138982
+ color: $suggested-content-text-color;
138983
+ @if ($skin-name == 'bootstrap5.3') {
138984
+ border: none;
138985
+ }
138986
+ @else {
138987
+ border: 1px solid $prompt-text-border-color;
138988
+ }
138989
+ }
138990
+ .e-views {
138863
138991
  .e-content-body {
138864
138992
  color: $response-text-color;
138865
138993
  a {
@@ -138899,21 +139027,6 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138899
139027
  color: rgba(255, 212, 212, 1);
138900
139028
  }
138901
139029
  }
138902
- .e-suggestions {
138903
- .e-suggestion-header {
138904
- color: $suggesstions-header-color;
138905
- }
138906
- li {
138907
- color: $suggested-content-text-color;
138908
- box-shadow: $suggestion-li-box-shadow;
138909
- @if ($skin-name == 'bootstrap5.3') {
138910
- border: none;
138911
- }
138912
- @else {
138913
- border: 1px solid $suggestion-li-border-color;
138914
- }
138915
- }
138916
- }
138917
139030
  }
138918
139031
  .e-stop-response {
138919
139032
  border-color: $response-stopper-border-color;
@@ -138923,21 +139036,21 @@ $prompt-text-border-color: rgba(150, 150, 150, 1) !default;
138923
139036
  }
138924
139037
  .e-views,
138925
139038
  .e-custom-view,
138926
- .e-aiassist-view-content-section {
139039
+ .e-assistview-content-section {
138927
139040
  &::-webkit-scrollbar-thumb {
138928
139041
  background: $scrollbar-color;
138929
139042
  }
138930
139043
  }
139044
+ .e-assist-send {
139045
+ color: $send-icon-color;
139046
+ &.disabled {
139047
+ color: $send-icon-disabled-color;
139048
+ }
139049
+ }
138931
139050
  .e-footer {
138932
139051
  textarea::-webkit-scrollbar-thumb {
138933
139052
  background: $scrollbar-color;
138934
139053
  }
138935
- .e-assist-send {
138936
- color: $send-icon-color;
138937
- &.disabled {
138938
- color: $send-icon-disabled-color;
138939
- }
138940
- }
138941
139054
  // To override the default border style of the textarea component for the Material and Material3 themes.
138942
139055
  .e-input-group.e-multi-line-input {
138943
139056
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {