@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
@@ -35073,13 +35073,11 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
35073
35073
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
35074
35074
  @include alignment(6px, calc(50% - 3px), 'vertical');
35075
35075
  }
35076
- @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' ) {
35077
- @if ($skin-name == 'tailwind') {
35078
- left: calc(50%);
35079
- }
35080
- @else {
35081
- @include alignment(4px, calc(50% - 2px), 'vertical');
35082
- }
35076
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
35077
+ @include alignment(4px, calc(50% - 2px), 'vertical');
35078
+ }
35079
+ @if ($skin-name == 'tailwind') {
35080
+ @include alignment(4px, calc(50%), 'vertical');
35083
35081
  }
35084
35082
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
35085
35083
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -40814,7 +40812,7 @@ $radio-btn-focus-outline-offset: 0 !default;
40814
40812
  }
40815
40813
 
40816
40814
  &::before {
40817
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
40815
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
40818
40816
  background-color: $radio-btn-disabled-not-checked-bg-color;
40819
40817
  }
40820
40818
  @else {
@@ -42882,6 +42880,10 @@ $listview-template-multiline-avatar-top: .7142em !default;
42882
42880
  }
42883
42881
  }
42884
42882
 
42883
+ &.e-virtualization .e-list-container{
42884
+ overflow: unset;
42885
+ }
42886
+
42885
42887
  & .e-list-container {
42886
42888
  overflow: hidden;
42887
42889
  position: relative;
@@ -65881,6 +65883,10 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
65881
65883
  display: block;
65882
65884
  }
65883
65885
 
65886
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
65887
+ margin-right: 30px;
65888
+ }
65889
+
65884
65890
  .e-multi-select-wrapper .e-multi-hidden {
65885
65891
  border: 0;
65886
65892
  height: 0;
@@ -82833,7 +82839,12 @@ $grid-checkmark-color: $grey-light-font !default;
82833
82839
  /* stylelint-enable */
82834
82840
 
82835
82841
  .e-dlg-content {
82836
- padding: 24px 27px;
82842
+ @if $grid-skin == 'fluent2' {
82843
+ padding: 24px 27px;
82844
+ }
82845
+ @else {
82846
+ padding: 8px 16px 8px 8px;
82847
+ }
82837
82848
  overflow-y: hidden;
82838
82849
  }
82839
82850
 
@@ -83688,7 +83699,7 @@ $grid-checkmark-color: $grey-light-font !default;
83688
83699
  }
83689
83700
 
83690
83701
  .e-grid-popup {
83691
- position: relative;
83702
+ position: absolute;
83692
83703
  }
83693
83704
 
83694
83705
  #{&}.e-grid,
@@ -86008,6 +86019,12 @@ $grid-checkmark-color: $grey-light-font !default;
86008
86019
  padding: $grid-columnchooser-toolbardiv-padding;
86009
86020
  }
86010
86021
 
86022
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
86023
+ @if $grid-skin == 'fluent' {
86024
+ padding-bottom: 1px;
86025
+ }
86026
+ }
86027
+
86011
86028
  .e-edit-dialog {
86012
86029
  min-height: 350px;
86013
86030
  .e-dlg-content {
@@ -86822,14 +86839,17 @@ $grid-checkmark-color: $grey-light-font !default;
86822
86839
  }
86823
86840
 
86824
86841
  &.e-wrap {
86825
- & .e-gridheader .e-rowcell,
86826
- & .e-gridcontent .e-rowcell,
86842
+ & .e-rowcell,
86827
86843
  & .e-columnheader .e-stackedheadercelldiv,
86828
86844
  & .e-columnheader .e-headercelldiv,
86829
86845
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
86830
86846
  @include wrap-styles;
86831
86847
  }
86832
86848
 
86849
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
86850
+ white-space: nowrap;
86851
+ }
86852
+
86833
86853
  & .e-stackedheader .e-columnheader {
86834
86854
  .e-stackedheadercelldiv,
86835
86855
  .e-headercelldiv {
@@ -87387,7 +87407,8 @@ $grid-checkmark-color: $grey-light-font !default;
87387
87407
  }
87388
87408
 
87389
87409
  @if $grid-skin == 'fluent2' {
87390
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
87410
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
87411
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
87391
87412
  padding: 0 6px;
87392
87413
  }
87393
87414
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -88301,7 +88322,8 @@ $grid-checkmark-color: $grey-light-font !default;
88301
88322
  }
88302
88323
 
88303
88324
  @if $grid-skin == 'fluent2' {
88304
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
88325
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
88326
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
88305
88327
  color: $flyout-text-color-hover;
88306
88328
  }
88307
88329
  }
@@ -136428,6 +136450,8 @@ $aiassist-header-height: 46px !default;
136428
136450
  $aiassist-icon-height: 30px !default;
136429
136451
  $aiassist-icon-width: 30px !default;
136430
136452
  $send-icon-size: 14px !default;
136453
+ $send-icon-bottom: 10px !default;
136454
+ $send-icon-bigger-bottom: 11px !default;
136431
136455
  $aiassist-bigger-header-height: 50px !default;
136432
136456
  $aiassist-bigger-icon-height: 40px !default;
136433
136457
  $aiassist-bigger-icon-width: 40px !default;
@@ -136468,63 +136492,86 @@ $rating-selected-bg-color: $grey-cc !default;
136468
136492
  $send-icon-color: $grey-light-font !default;
136469
136493
  $send-icon-disabled-color: $grey-f5 !default;
136470
136494
  $prompt-text-border-color: $gray-base !default;
136495
+ $tbar-header-btn-focus-box-shadow: none !default;
136496
+ $tbar-header-hover-bg-color: $grey-dark !default;
136471
136497
 
136472
136498
  @include export-module('aiassistview-bigger') {
136473
136499
  .e-bigger.e-aiassistview,
136474
136500
  .e-bigger .e-aiassistview {
136475
136501
  .e-view-header {
136476
136502
  height: $aiassist-bigger-header-height;
136503
+ .e-toolbar {
136504
+ .e-toolbar-items {
136505
+ .e-toolbar-left {
136506
+ height: calc($aiassist-bigger-header-height - 1px);
136507
+ }
136508
+ .e-toolbar-item {
136509
+ &.e-assist-view-header,
136510
+ &.e-custom-view-header {
136511
+ @if ($skin-name == 'highcontrast') {
136512
+ // To apply box-shadow styling during keyboard navigation
136513
+ padding: 1.5px;
136514
+ }
136515
+ @else {
136516
+ padding: 0;
136517
+ }
136518
+ .e-tbar-btn {
136519
+ padding: 0;
136520
+ .e-btn-icon {
136521
+ padding: 4px 4px 4px 2px;
136522
+ }
136523
+ }
136524
+ }
136525
+ }
136526
+ }
136527
+ }
136477
136528
  }
136478
136529
  .e-view-content {
136479
136530
  height: calc(100% - $aiassist-bigger-header-height);
136480
136531
  }
136481
- .e-views {
136482
- .e-prompt-icon {
136483
- min-height: $aiassist-bigger-icon-height;
136484
- }
136485
- .e-output-icon {
136486
- height: $aiassist-bigger-icon-height;
136487
- }
136488
- .e-prompt-icon,
136489
- .e-output-icon {
136490
- min-width: $aiassist-bigger-icon-width;
136491
- }
136492
- .e-loading-body,
136493
- .e-content-body,
136494
- .e-loading-footer {
136495
- padding: 2px 0 0 10px;
136496
- }
136497
- .e-content-container {
136498
- font-size: 16px;
136499
- .e-prompt-text {
136500
- padding: $prompt-text-bigger-padding;
136501
- line-height: 22px;
136502
- }
136532
+ .e-prompt-icon {
136533
+ min-height: $aiassist-bigger-icon-height;
136534
+ }
136535
+ .e-output-icon {
136536
+ height: $aiassist-bigger-icon-height;
136537
+ }
136538
+ .e-prompt-icon,
136539
+ .e-output-icon {
136540
+ min-width: $aiassist-bigger-icon-width;
136541
+ }
136542
+ .e-loading-body,
136543
+ .e-content-body,
136544
+ .e-loading-footer {
136545
+ padding: 6px 0 0 6px;
136546
+ }
136547
+ .e-prompt-text {
136548
+ padding: $prompt-text-bigger-padding;
136549
+ line-height: 22px;
136550
+ }
136551
+ .e-content-container {
136552
+ font-size: 16px;
136553
+ }
136554
+ .e-suggestion-header {
136555
+ font-size: 16px;
136556
+ font-weight: $suggesstions-header-bigger-font-weight;
136557
+ margin-bottom: 15px;
136558
+ }
136559
+ .e-suggestions {
136560
+ &.e-suggestion-item-template ul li {
136561
+ padding: 0;
136503
136562
  }
136504
- .e-suggestions {
136505
- &.e-suggestion-item-template ul li {
136506
- padding: 0;
136507
- }
136508
- .e-suggestion-header {
136509
- font-size: 16px;
136510
- font-weight: $suggesstions-header-bigger-font-weight;
136511
- margin-bottom: 15px;
136512
- }
136513
- ul {
136514
- li {
136515
- line-height: 22px;
136516
- font-weight: $suggesstions-bigger-font-weight;
136517
- padding: $suggesstions-bigger-list-padding;
136518
- margin: $suggesstions-bigger-list-margin;
136519
- }
136520
- }
136563
+ li {
136564
+ line-height: 22px;
136565
+ font-weight: $suggesstions-bigger-font-weight;
136566
+ padding: $suggesstions-bigger-list-padding;
136567
+ margin: $suggesstions-bigger-list-margin;
136521
136568
  }
136522
136569
  }
136570
+ .e-assist-send {
136571
+ font-size: $send-icon-size-bigger;
136572
+ bottom: $send-icon-bigger-bottom;
136573
+ }
136523
136574
  .e-footer {
136524
- .e-assist-send {
136525
- font-size: $send-icon-size-bigger;
136526
- bottom: 9px;
136527
- }
136528
136575
  .e-input-group.e-control-wrapper.e-multi-line-input {
136529
136576
  .e-textarea {
136530
136577
  min-height: 38px;
@@ -136533,6 +136580,11 @@ $prompt-text-border-color: $gray-base !default;
136533
136580
  min-height: 28px;
136534
136581
  }
136535
136582
  }
136583
+ &.e-rtl .e-textarea {
136584
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136585
+ padding: 6px 16px 6px 12px;
136586
+ }
136587
+ }
136536
136588
  }
136537
136589
  }
136538
136590
  .e-stop-response.e-btn-active {
@@ -136544,13 +136596,24 @@ $prompt-text-border-color: $gray-base !default;
136544
136596
  font-size: $response-stopper-bigger-font-size;
136545
136597
  }
136546
136598
  &.e-rtl {
136547
- .e-views {
136548
- .e-suggestions {
136549
- li {
136550
- margin: $suggesstions-bigger-list-margin-rtl;
136599
+ .e-view-header .e-toolbar-item {
136600
+ &.e-assist-view-header,
136601
+ &.e-custom-view-header {
136602
+ .e-tbar-btn .e-btn-icon {
136603
+ padding: 4px 2px 4px 4px;
136551
136604
  }
136552
136605
  }
136553
136606
  }
136607
+ .e-suggestions {
136608
+ li {
136609
+ margin: $suggesstions-bigger-list-margin-rtl;
136610
+ }
136611
+ }
136612
+ .e-loading-body,
136613
+ .e-content-body,
136614
+ .e-loading-footer {
136615
+ padding: 6px 6px 0 0;
136616
+ }
136554
136617
  }
136555
136618
  }
136556
136619
  }
@@ -136578,14 +136641,29 @@ $prompt-text-border-color: $gray-base !default;
136578
136641
  width: 100%;
136579
136642
  border-radius: 4px;
136580
136643
  }
136581
- .e-tbar-btn {
136582
- padding: 0;
136644
+ &.e-assist-view-header,
136645
+ &.e-custom-view-header {
136646
+ @if ($skin-name == 'highcontrast') {
136647
+ // To apply box-shadow styling during keyboard navigation
136648
+ padding: 1px;
136649
+ }
136650
+ @else {
136651
+ padding: 0;
136652
+ }
136653
+ .e-tbar-btn {
136654
+ padding: 0;
136655
+ .e-btn-icon {
136656
+ padding: 4px 4px 4px 2px;
136657
+ }
136658
+ }
136659
+ }
136660
+ &.e-active .e-btn {
136661
+ cursor: pointer;
136583
136662
  }
136584
136663
  }
136585
- }
136586
- .e-view-header .e-toolbar-item.e-active .e-btn {
136587
- border-radius: 0;
136588
- cursor: pointer;
136664
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
136665
+ height: calc($aiassist-header-height - 1px);
136666
+ }
136589
136667
  }
136590
136668
  .e-view-container,
136591
136669
  .e-footer {
@@ -136635,36 +136713,94 @@ $prompt-text-border-color: $gray-base !default;
136635
136713
  }
136636
136714
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
136637
136715
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
136638
- @if $theme-name == 'highcontrast' {
136639
- padding: 6px 0 6px 5px;
136640
- }
136641
- @else {
136642
- padding: 6px 0 6px 2px;
136643
- }
136716
+ padding: 6px 2px;
136644
136717
  }
136645
136718
  }
136646
- .e-views {
136719
+ .e-output-container {
136720
+ width: 90%;
136647
136721
  display: flex;
136648
- justify-content: space-around;
136649
- .e-output-container {
136650
- width: 90%;
136651
- display: flex;
136652
- align-self: flex-start;
136653
- margin: 10px 0;
136722
+ align-self: flex-start;
136723
+ margin: 10px 0;
136724
+ }
136725
+ .e-prompt-icon {
136726
+ margin: 0 0 0 8px;
136727
+ min-height: $aiassist-icon-height;
136728
+ }
136729
+ .e-output-icon {
136730
+ height: $aiassist-icon-height;
136731
+ margin: 0 4px 0 8px;
136732
+ }
136733
+ .e-prompt-icon,
136734
+ .e-output-icon {
136735
+ border-radius: 50%;
136736
+ min-width: $aiassist-icon-width;
136737
+ }
136738
+ .e-loading-body,
136739
+ .e-content-body,
136740
+ .e-loading-footer {
136741
+ padding: 2px 0 0 6px;
136742
+ }
136743
+ .e-content-container {
136744
+ margin-top: 16px;
136745
+ font-size: 14px;
136746
+ justify-content: space-between;
136747
+ }
136748
+ .e-prompt-text {
136749
+ white-space: pre-wrap;
136750
+ height: fit-content;
136751
+ border-radius: $prompt-text-border-radius;
136752
+ padding: $prompt-text-padding;
136753
+ line-height: 20px;
136754
+ }
136755
+ .e-content-footer,
136756
+ .e-prompt-toolbar {
136757
+ opacity: 0;
136758
+ }
136759
+ .e-prompt-container {
136760
+ gap: 2px;
136761
+ align-self: flex-end;
136762
+ max-width: 70%;
136763
+ margin-bottom: 5px;
136764
+ flex-direction: column;
136765
+ &:hover .e-assist-edit-icon {
136766
+ opacity: 1;
136767
+ cursor: pointer;
136654
136768
  }
136655
- .e-prompt-icon {
136656
- margin: 0 8px;
136657
- min-height: $aiassist-icon-height;
136769
+ }
136770
+ .e-suggestion-header {
136771
+ font-size: 14px;
136772
+ font-weight: $suggesstions-header-font-weight;
136773
+ margin: 0 2px 8px 8px;
136774
+ text-align: right;
136775
+ }
136776
+ .e-suggestions {
136777
+ width: 100%;
136778
+ &.e-suggestion-item-template li {
136779
+ padding: 0;
136658
136780
  }
136659
- .e-output-icon {
136660
- height: $aiassist-icon-height;
136661
- margin-left: 10px;
136781
+ ul {
136782
+ list-style-type: none;
136783
+ padding: 0;
136784
+ margin: 0;
136785
+ display: flex;
136786
+ flex-wrap: wrap;
136787
+ justify-content: end;
136662
136788
  }
136663
- .e-prompt-icon,
136664
- .e-output-icon {
136665
- border-radius: 50%;
136666
- min-width: $aiassist-icon-width;
136789
+ li {
136790
+ line-height: 20px;
136791
+ font-weight: $suggesstions-font-weight;
136792
+ padding: $suggesstions-list-padding;
136793
+ margin: $suggesstions-list-margin;
136794
+ border-radius: $suggesstions-list-border-radius;
136795
+ cursor: pointer;
136796
+ white-space: nowrap;
136797
+ overflow: hidden;
136798
+ text-overflow: ellipsis;
136667
136799
  }
136800
+ }
136801
+ .e-views {
136802
+ display: flex;
136803
+ justify-content: space-around;
136668
136804
  .e-content-body {
136669
136805
  line-height: 25px;
136670
136806
  border-radius: 4px;
@@ -136750,85 +136886,36 @@ $prompt-text-border-color: $gray-base !default;
136750
136886
  .e-content-body > *:first-child {
136751
136887
  margin-block-start: 0;
136752
136888
  }
136753
- .e-loading-body,
136754
- .e-content-body,
136755
- .e-loading-footer {
136756
- padding: 2px 0 0 8px;
136757
- }
136758
- .e-content-footer,
136759
- .e-prompt-toolbar {
136760
- opacity: 0;
136761
- }
136762
- .e-content-container {
136763
- margin-top: 16px;
136764
- font-size: 14px;
136765
- justify-content: space-between;
136766
- .e-prompt-text {
136767
- white-space: pre-wrap;
136768
- height: fit-content;
136769
- border-radius: $prompt-text-border-radius;
136770
- padding: $prompt-text-padding;
136771
- margin-right: 2px;
136772
- line-height: 20px;
136773
- }
136774
- }
136775
- .e-suggestions {
136776
- width: 100%;
136777
- &.e-suggestion-item-template li {
136778
- padding: 0;
136779
- }
136780
- .e-suggestion-header {
136781
- font-size: 14px;
136782
- font-weight: $suggesstions-header-font-weight;
136783
- margin: 0 2px 8px 8px;
136784
- text-align: right;
136785
- }
136786
- ul {
136787
- list-style-type: none;
136788
- padding: 0;
136789
- margin: 0;
136790
- display: flex;
136791
- flex-wrap: wrap;
136792
- justify-content: end;
136793
- }
136794
- li {
136795
- line-height: 20px;
136796
- font-weight: $suggesstions-font-weight;
136797
- padding: $suggesstions-list-padding;
136798
- margin: $suggesstions-list-margin;
136799
- border-radius: $suggesstions-list-border-radius;
136800
- cursor: pointer;
136801
- white-space: nowrap;
136802
- overflow: hidden;
136803
- text-overflow: ellipsis;
136804
- }
136805
- }
136806
- .e-prompt-container {
136807
- gap: 2px;
136808
- align-self: flex-end;
136809
- max-width: 70%;
136810
- margin-bottom: 5px;
136811
- flex-direction: column;
136812
- &:hover .e-assist-edit-icon {
136813
- opacity: 1;
136814
- cursor: pointer;
136815
- }
136816
- }
136817
136889
  }
136818
136890
  .e-views,
136819
136891
  .e-custom-view,
136820
- .e-aiassist-view-content-section {
136892
+ .e-assistview-content-section {
136821
136893
  height: 100%;
136822
- overflow-y: scroll;
136894
+ overflow: scroll;
136823
136895
  &::-webkit-scrollbar {
136824
136896
  width: $ai-assist-scrollbar-width;
136897
+ height: $ai-assist-scrollbar-width;
136825
136898
  }
136826
136899
  &::-webkit-scrollbar-thumb {
136827
136900
  border-radius: 10px;
136828
136901
  }
136829
136902
  }
136830
- .e-content {
136831
- margin-right: 8px;
136903
+ .e-assist-send {
136904
+ position: absolute;
136905
+ right: 20px;
136906
+ font-size: $send-icon-size;
136907
+ bottom: $send-icon-bottom;
136908
+ padding-top: 2px;
136909
+ }
136910
+ .e-assist-send.disabled {
136911
+ pointer-events: none;
136912
+ opacity: .5;
136913
+ cursor: not-allowed;
136914
+ }
136915
+ .e-assist-send.enabled {
136916
+ pointer-events: auto;
136917
+ opacity: 1;
136918
+ cursor: pointer;
136832
136919
  }
136833
136920
  .e-footer {
136834
136921
  position: relative;
@@ -136847,23 +136934,6 @@ $prompt-text-border-color: $gray-base !default;
136847
136934
  .hide-scrollbar textarea {
136848
136935
  scrollbar-width: none;
136849
136936
  }
136850
- .e-assist-send {
136851
- position: absolute;
136852
- right: 20px;
136853
- font-size: $send-icon-size;
136854
- bottom: 8px;
136855
- padding-top: 2px;
136856
- }
136857
- .e-assist-send.disabled {
136858
- pointer-events: none;
136859
- opacity: .5;
136860
- cursor: not-allowed;
136861
- }
136862
- .e-assist-send.enabled {
136863
- pointer-events: auto;
136864
- opacity: 1;
136865
- cursor: pointer;
136866
- }
136867
136937
  &:has(.e-rtl) .e-assist-send {
136868
136938
  right: unset;
136869
136939
  left: 20px;
@@ -136875,6 +136945,13 @@ $prompt-text-border-color: $gray-base !default;
136875
136945
  .e-multi-line-input.e-rtl {
136876
136946
  padding-left: 35px;
136877
136947
  padding-right: unset;
136948
+ &.e-input-group.e-control-wrapper {
136949
+ .e-textarea {
136950
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136951
+ padding: 4px 12px 4px 8px;
136952
+ }
136953
+ }
136954
+ }
136878
136955
  }
136879
136956
  .e-input-group.e-multi-line-input {
136880
136957
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -136956,16 +137033,24 @@ $prompt-text-border-color: $gray-base !default;
136956
137033
  outline: 1px solid;
136957
137034
  }
136958
137035
  &.e-rtl {
136959
- .e-views {
136960
- .e-suggestions {
136961
- .e-suggestion-header {
136962
- text-align: left;
136963
- margin: 0 8px 8px 2px;
136964
- }
136965
- li {
136966
- margin: $suggesstions-list-margin-rtl;
137036
+ .e-view-header .e-toolbar-item {
137037
+ &.e-assist-view-header,
137038
+ &.e-custom-view-header {
137039
+ .e-tbar-btn .e-btn-icon {
137040
+ padding: 4px 2px 4px 4px;
136967
137041
  }
136968
137042
  }
137043
+ }
137044
+ .e-suggestion-header {
137045
+ text-align: left;
137046
+ margin: 0 8px 8px 2px;
137047
+ }
137048
+ .e-suggestions {
137049
+ li {
137050
+ margin: $suggesstions-list-margin-rtl;
137051
+ }
137052
+ }
137053
+ .e-views {
136969
137054
  .e-content-body {
136970
137055
  blockquote {
136971
137056
  padding-left: unset;
@@ -136980,6 +137065,17 @@ $prompt-text-border-color: $gray-base !default;
136980
137065
  }
136981
137066
  }
136982
137067
  }
137068
+ .e-loading-body,
137069
+ .e-content-body,
137070
+ .e-loading-footer {
137071
+ padding: 2px 6px 0 0;
137072
+ }
137073
+ .e-prompt-icon {
137074
+ margin: 0 8px 0 0;
137075
+ }
137076
+ .e-output-icon {
137077
+ margin: 0 8px 0 4px;
137078
+ }
136983
137079
  }
136984
137080
  }
136985
137081
  @media (max-width: 760px) {
@@ -136988,12 +137084,14 @@ $prompt-text-border-color: $gray-base !default;
136988
137084
  .e-footer {
136989
137085
  width: 100%;
136990
137086
  }
136991
- .e-view-container .e-suggestions {
137087
+ .e-view-container .e-suggestions,
137088
+ .e-prompt-content {
136992
137089
  padding-right: 8px;
136993
137090
  }
136994
137091
  &.e-rtl {
136995
- .e-view-container .e-suggestions {
136996
- padding-left: 8px;
137092
+ .e-view-container .e-suggestions,
137093
+ .e-prompt-content {
137094
+ padding: 0 0 0 8px;
136997
137095
  }
136998
137096
  }
136999
137097
  }
@@ -137031,26 +137129,55 @@ $prompt-text-border-color: $gray-base !default;
137031
137129
  }
137032
137130
  .e-tbar-btn {
137033
137131
  background: transparent;
137132
+ &:focus {
137133
+ box-shadow: none;
137134
+ }
137135
+ &:focus-visible {
137136
+ box-shadow: $tbar-header-btn-focus-box-shadow;
137137
+ @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') {
137138
+ background: $tbar-header-hover-bg-color;
137139
+ }
137140
+ }
137034
137141
  }
137035
137142
  }
137036
137143
  }
137037
- .e-views {
137038
- .e-prompt-icon,
137039
- .e-output-icon {
137040
- border: 1px solid $icon-border-color;
137041
- color: $user-logo-color;
137042
- background-color: $user-logo-bg-color;
137043
- }
137044
- .e-prompt-text {
137045
- background: $suggested-content-bg-color;
137144
+ .e-suggestion-header {
137145
+ color: $suggesstions-header-color;
137146
+ }
137147
+ .e-suggestions {
137148
+ li {
137046
137149
  color: $suggested-content-text-color;
137150
+ box-shadow: $suggestion-li-box-shadow;
137047
137151
  @if ($skin-name == 'bootstrap5.3') {
137048
137152
  border: none;
137049
137153
  }
137050
137154
  @else {
137051
- border: 1px solid $prompt-text-border-color;
137155
+ border: 1px solid $suggestion-li-border-color;
137052
137156
  }
137053
137157
  }
137158
+ }
137159
+ .e-prompt-icon,
137160
+ .e-output-icon {
137161
+ border: 1px solid $icon-border-color;
137162
+ color: $user-logo-color;
137163
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
137164
+ background: $user-logo-bg-color;
137165
+ }
137166
+ @else {
137167
+ background-color: $user-logo-bg-color;
137168
+ }
137169
+ }
137170
+ .e-prompt-text {
137171
+ background: $suggested-content-bg-color;
137172
+ color: $suggested-content-text-color;
137173
+ @if ($skin-name == 'bootstrap5.3') {
137174
+ border: none;
137175
+ }
137176
+ @else {
137177
+ border: 1px solid $prompt-text-border-color;
137178
+ }
137179
+ }
137180
+ .e-views {
137054
137181
  .e-content-body {
137055
137182
  color: $response-text-color;
137056
137183
  a {
@@ -137090,21 +137217,6 @@ $prompt-text-border-color: $gray-base !default;
137090
137217
  color: rgba(255, 212, 212, 1);
137091
137218
  }
137092
137219
  }
137093
- .e-suggestions {
137094
- .e-suggestion-header {
137095
- color: $suggesstions-header-color;
137096
- }
137097
- li {
137098
- color: $suggested-content-text-color;
137099
- box-shadow: $suggestion-li-box-shadow;
137100
- @if ($skin-name == 'bootstrap5.3') {
137101
- border: none;
137102
- }
137103
- @else {
137104
- border: 1px solid $suggestion-li-border-color;
137105
- }
137106
- }
137107
- }
137108
137220
  }
137109
137221
  .e-stop-response {
137110
137222
  border-color: $response-stopper-border-color;
@@ -137114,21 +137226,21 @@ $prompt-text-border-color: $gray-base !default;
137114
137226
  }
137115
137227
  .e-views,
137116
137228
  .e-custom-view,
137117
- .e-aiassist-view-content-section {
137229
+ .e-assistview-content-section {
137118
137230
  &::-webkit-scrollbar-thumb {
137119
137231
  background: $scrollbar-color;
137120
137232
  }
137121
137233
  }
137234
+ .e-assist-send {
137235
+ color: $send-icon-color;
137236
+ &.disabled {
137237
+ color: $send-icon-disabled-color;
137238
+ }
137239
+ }
137122
137240
  .e-footer {
137123
137241
  textarea::-webkit-scrollbar-thumb {
137124
137242
  background: $scrollbar-color;
137125
137243
  }
137126
- .e-assist-send {
137127
- color: $send-icon-color;
137128
- &.disabled {
137129
- color: $send-icon-disabled-color;
137130
- }
137131
- }
137132
137244
  // To override the default border style of the textarea component for the Material and Material3 themes.
137133
137245
  .e-input-group.e-multi-line-input {
137134
137246
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {