@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
@@ -35056,13 +35056,11 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
35056
35056
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
35057
35057
  @include alignment(6px, calc(50% - 3px), 'vertical');
35058
35058
  }
35059
- @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' ) {
35060
- @if ($skin-name == 'tailwind') {
35061
- left: calc(50%);
35062
- }
35063
- @else {
35064
- @include alignment(4px, calc(50% - 2px), 'vertical');
35065
- }
35059
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
35060
+ @include alignment(4px, calc(50% - 2px), 'vertical');
35061
+ }
35062
+ @if ($skin-name == 'tailwind') {
35063
+ @include alignment(4px, calc(50%), 'vertical');
35066
35064
  }
35067
35065
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
35068
35066
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -40824,7 +40822,7 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
40824
40822
  }
40825
40823
 
40826
40824
  &::before {
40827
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
40825
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
40828
40826
  background-color: $radio-btn-disabled-not-checked-bg-color;
40829
40827
  }
40830
40828
  @else {
@@ -42911,6 +42909,10 @@ $listview-template-focused-multiline-content-color: $content-text-color-selected
42911
42909
  }
42912
42910
  }
42913
42911
 
42912
+ &.e-virtualization .e-list-container{
42913
+ overflow: unset;
42914
+ }
42915
+
42914
42916
  & .e-list-container {
42915
42917
  overflow: hidden;
42916
42918
  position: relative;
@@ -57578,7 +57580,7 @@ $treeview-rtl-icon-margin: 0 -20px 0 0 !default;
57578
57580
  $treeview-icon-padding: 0px !default;
57579
57581
  $treeview-text-padding: 0 8px !default;
57580
57582
  $treeview-text-margin: 0 !default;
57581
- $treeview-image-size: 16px !default;
57583
+ $treeview-image-size: 18px !default;
57582
57584
  $treeview-image-margin: 0 0 0 8px !default;
57583
57585
  $treeview-navigable-icon-image-anchor-margin-bigger: 0 12px 0 8px !default;
57584
57586
  $treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 6px 0 10px !default;
@@ -57586,7 +57588,7 @@ $treeview-navigable-icon-image-anchor-margin: 0 8px 0 0 !default;
57586
57588
  $treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 8px !default;
57587
57589
  $treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
57588
57590
  $treeview-rtl-image-margin: 0 8px 0 0 !default;
57589
- $treeview-image-text-padding: 0 8px !default;
57591
+ $treeview-image-text-padding: 0 12px !default;
57590
57592
  $treeview-icon-image-margin: 0 0 0 8px !default;
57591
57593
  $treeview-rtl-icon-image-margin: 0 8px 0 0 !default;
57592
57594
  $treeview-check-margin: 0 0 0 8px !default;
@@ -66025,6 +66027,10 @@ $ddl-close-down-icon-left: 35px !default;
66025
66027
  display: block;
66026
66028
  }
66027
66029
 
66030
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
66031
+ margin-right: 30px;
66032
+ }
66033
+
66028
66034
  .e-multi-select-wrapper .e-multi-hidden {
66029
66035
  border: 0;
66030
66036
  height: 0;
@@ -83121,7 +83127,12 @@ $grid-checkmark-color: $primary-text-color !default;
83121
83127
  /* stylelint-enable */
83122
83128
 
83123
83129
  .e-dlg-content {
83124
- padding: 24px 27px;
83130
+ @if $grid-skin == 'fluent2' {
83131
+ padding: 24px 27px;
83132
+ }
83133
+ @else {
83134
+ padding: 8px 16px 8px 8px;
83135
+ }
83125
83136
  overflow-y: hidden;
83126
83137
  }
83127
83138
 
@@ -83976,7 +83987,7 @@ $grid-checkmark-color: $primary-text-color !default;
83976
83987
  }
83977
83988
 
83978
83989
  .e-grid-popup {
83979
- position: relative;
83990
+ position: absolute;
83980
83991
  }
83981
83992
 
83982
83993
  #{&}.e-grid,
@@ -86296,6 +86307,12 @@ $grid-checkmark-color: $primary-text-color !default;
86296
86307
  padding: $grid-columnchooser-toolbardiv-padding;
86297
86308
  }
86298
86309
 
86310
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
86311
+ @if $grid-skin == 'fluent' {
86312
+ padding-bottom: 1px;
86313
+ }
86314
+ }
86315
+
86299
86316
  .e-edit-dialog {
86300
86317
  min-height: 350px;
86301
86318
  .e-dlg-content {
@@ -87110,14 +87127,17 @@ $grid-checkmark-color: $primary-text-color !default;
87110
87127
  }
87111
87128
 
87112
87129
  &.e-wrap {
87113
- & .e-gridheader .e-rowcell,
87114
- & .e-gridcontent .e-rowcell,
87130
+ & .e-rowcell,
87115
87131
  & .e-columnheader .e-stackedheadercelldiv,
87116
87132
  & .e-columnheader .e-headercelldiv,
87117
87133
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
87118
87134
  @include wrap-styles;
87119
87135
  }
87120
87136
 
87137
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
87138
+ white-space: nowrap;
87139
+ }
87140
+
87121
87141
  & .e-stackedheader .e-columnheader {
87122
87142
  .e-stackedheadercelldiv,
87123
87143
  .e-headercelldiv {
@@ -87675,7 +87695,8 @@ $grid-checkmark-color: $primary-text-color !default;
87675
87695
  }
87676
87696
 
87677
87697
  @if $grid-skin == 'fluent2' {
87678
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
87698
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
87699
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
87679
87700
  padding: 0 6px;
87680
87701
  }
87681
87702
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -88589,7 +88610,8 @@ $grid-checkmark-color: $primary-text-color !default;
88589
88610
  }
88590
88611
 
88591
88612
  @if $grid-skin == 'fluent2' {
88592
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
88613
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
88614
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
88593
88615
  color: $flyout-text-color-hover;
88594
88616
  }
88595
88617
  }
@@ -136671,6 +136693,8 @@ $aiassist-header-height: 46px !default;
136671
136693
  $aiassist-icon-height: 30px !default;
136672
136694
  $aiassist-icon-width: 30px !default;
136673
136695
  $send-icon-size: 14px !default;
136696
+ $send-icon-bottom: 9px !default;
136697
+ $send-icon-bigger-bottom: 11px !default;
136674
136698
  $aiassist-bigger-header-height: 50px !default;
136675
136699
  $aiassist-bigger-icon-height: 40px !default;
136676
136700
  $aiassist-bigger-icon-width: 40px !default;
@@ -136711,63 +136735,86 @@ $rating-selected-bg-color: $rating-selected-color !default;
136711
136735
  $send-icon-color: $icon-color !default;
136712
136736
  $send-icon-disabled-color: $icon-color-disabled !default;
136713
136737
  $prompt-text-border-color: $flyout-border !default;
136738
+ $tbar-header-btn-focus-box-shadow: $secondary-shadow-focus !default;
136739
+ $tbar-header-hover-bg-color: transparent !default;
136714
136740
 
136715
136741
  @include export-module('aiassistview-bigger') {
136716
136742
  .e-bigger.e-aiassistview,
136717
136743
  .e-bigger .e-aiassistview {
136718
136744
  .e-view-header {
136719
136745
  height: $aiassist-bigger-header-height;
136746
+ .e-toolbar {
136747
+ .e-toolbar-items {
136748
+ .e-toolbar-left {
136749
+ height: calc($aiassist-bigger-header-height - 1px);
136750
+ }
136751
+ .e-toolbar-item {
136752
+ &.e-assist-view-header,
136753
+ &.e-custom-view-header {
136754
+ @if ($skin-name == 'highcontrast') {
136755
+ // To apply box-shadow styling during keyboard navigation
136756
+ padding: 1.5px;
136757
+ }
136758
+ @else {
136759
+ padding: 0;
136760
+ }
136761
+ .e-tbar-btn {
136762
+ padding: 0;
136763
+ .e-btn-icon {
136764
+ padding: 4px 4px 4px 2px;
136765
+ }
136766
+ }
136767
+ }
136768
+ }
136769
+ }
136770
+ }
136720
136771
  }
136721
136772
  .e-view-content {
136722
136773
  height: calc(100% - $aiassist-bigger-header-height);
136723
136774
  }
136724
- .e-views {
136725
- .e-prompt-icon {
136726
- min-height: $aiassist-bigger-icon-height;
136727
- }
136728
- .e-output-icon {
136729
- height: $aiassist-bigger-icon-height;
136730
- }
136731
- .e-prompt-icon,
136732
- .e-output-icon {
136733
- min-width: $aiassist-bigger-icon-width;
136734
- }
136735
- .e-loading-body,
136736
- .e-content-body,
136737
- .e-loading-footer {
136738
- padding: 2px 0 0 10px;
136739
- }
136740
- .e-content-container {
136741
- font-size: 16px;
136742
- .e-prompt-text {
136743
- padding: $prompt-text-bigger-padding;
136744
- line-height: 22px;
136745
- }
136775
+ .e-prompt-icon {
136776
+ min-height: $aiassist-bigger-icon-height;
136777
+ }
136778
+ .e-output-icon {
136779
+ height: $aiassist-bigger-icon-height;
136780
+ }
136781
+ .e-prompt-icon,
136782
+ .e-output-icon {
136783
+ min-width: $aiassist-bigger-icon-width;
136784
+ }
136785
+ .e-loading-body,
136786
+ .e-content-body,
136787
+ .e-loading-footer {
136788
+ padding: 6px 0 0 6px;
136789
+ }
136790
+ .e-prompt-text {
136791
+ padding: $prompt-text-bigger-padding;
136792
+ line-height: 22px;
136793
+ }
136794
+ .e-content-container {
136795
+ font-size: 16px;
136796
+ }
136797
+ .e-suggestion-header {
136798
+ font-size: 16px;
136799
+ font-weight: $suggesstions-header-bigger-font-weight;
136800
+ margin-bottom: 15px;
136801
+ }
136802
+ .e-suggestions {
136803
+ &.e-suggestion-item-template ul li {
136804
+ padding: 0;
136746
136805
  }
136747
- .e-suggestions {
136748
- &.e-suggestion-item-template ul li {
136749
- padding: 0;
136750
- }
136751
- .e-suggestion-header {
136752
- font-size: 16px;
136753
- font-weight: $suggesstions-header-bigger-font-weight;
136754
- margin-bottom: 15px;
136755
- }
136756
- ul {
136757
- li {
136758
- line-height: 22px;
136759
- font-weight: $suggesstions-bigger-font-weight;
136760
- padding: $suggesstions-bigger-list-padding;
136761
- margin: $suggesstions-bigger-list-margin;
136762
- }
136763
- }
136806
+ li {
136807
+ line-height: 22px;
136808
+ font-weight: $suggesstions-bigger-font-weight;
136809
+ padding: $suggesstions-bigger-list-padding;
136810
+ margin: $suggesstions-bigger-list-margin;
136764
136811
  }
136765
136812
  }
136813
+ .e-assist-send {
136814
+ font-size: $send-icon-size-bigger;
136815
+ bottom: $send-icon-bigger-bottom;
136816
+ }
136766
136817
  .e-footer {
136767
- .e-assist-send {
136768
- font-size: $send-icon-size-bigger;
136769
- bottom: 9px;
136770
- }
136771
136818
  .e-input-group.e-control-wrapper.e-multi-line-input {
136772
136819
  .e-textarea {
136773
136820
  min-height: 38px;
@@ -136776,6 +136823,11 @@ $prompt-text-border-color: $flyout-border !default;
136776
136823
  min-height: 28px;
136777
136824
  }
136778
136825
  }
136826
+ &.e-rtl .e-textarea {
136827
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136828
+ padding: 6px 16px 6px 12px;
136829
+ }
136830
+ }
136779
136831
  }
136780
136832
  }
136781
136833
  .e-stop-response.e-btn-active {
@@ -136787,13 +136839,24 @@ $prompt-text-border-color: $flyout-border !default;
136787
136839
  font-size: $response-stopper-bigger-font-size;
136788
136840
  }
136789
136841
  &.e-rtl {
136790
- .e-views {
136791
- .e-suggestions {
136792
- li {
136793
- margin: $suggesstions-bigger-list-margin-rtl;
136842
+ .e-view-header .e-toolbar-item {
136843
+ &.e-assist-view-header,
136844
+ &.e-custom-view-header {
136845
+ .e-tbar-btn .e-btn-icon {
136846
+ padding: 4px 2px 4px 4px;
136794
136847
  }
136795
136848
  }
136796
136849
  }
136850
+ .e-suggestions {
136851
+ li {
136852
+ margin: $suggesstions-bigger-list-margin-rtl;
136853
+ }
136854
+ }
136855
+ .e-loading-body,
136856
+ .e-content-body,
136857
+ .e-loading-footer {
136858
+ padding: 6px 6px 0 0;
136859
+ }
136797
136860
  }
136798
136861
  }
136799
136862
  }
@@ -136821,14 +136884,29 @@ $prompt-text-border-color: $flyout-border !default;
136821
136884
  width: 100%;
136822
136885
  border-radius: 4px;
136823
136886
  }
136824
- .e-tbar-btn {
136825
- padding: 0;
136887
+ &.e-assist-view-header,
136888
+ &.e-custom-view-header {
136889
+ @if ($skin-name == 'highcontrast') {
136890
+ // To apply box-shadow styling during keyboard navigation
136891
+ padding: 1px;
136892
+ }
136893
+ @else {
136894
+ padding: 0;
136895
+ }
136896
+ .e-tbar-btn {
136897
+ padding: 0;
136898
+ .e-btn-icon {
136899
+ padding: 4px 4px 4px 2px;
136900
+ }
136901
+ }
136902
+ }
136903
+ &.e-active .e-btn {
136904
+ cursor: pointer;
136826
136905
  }
136827
136906
  }
136828
- }
136829
- .e-view-header .e-toolbar-item.e-active .e-btn {
136830
- border-radius: 0;
136831
- cursor: pointer;
136907
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
136908
+ height: calc($aiassist-header-height - 1px);
136909
+ }
136832
136910
  }
136833
136911
  .e-view-container,
136834
136912
  .e-footer {
@@ -136878,36 +136956,94 @@ $prompt-text-border-color: $flyout-border !default;
136878
136956
  }
136879
136957
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
136880
136958
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
136881
- @if $theme-name == 'highcontrast' {
136882
- padding: 6px 0 6px 5px;
136883
- }
136884
- @else {
136885
- padding: 6px 0 6px 2px;
136886
- }
136959
+ padding: 6px 2px;
136887
136960
  }
136888
136961
  }
136889
- .e-views {
136962
+ .e-output-container {
136963
+ width: 90%;
136890
136964
  display: flex;
136891
- justify-content: space-around;
136892
- .e-output-container {
136893
- width: 90%;
136894
- display: flex;
136895
- align-self: flex-start;
136896
- margin: 10px 0;
136965
+ align-self: flex-start;
136966
+ margin: 10px 0;
136967
+ }
136968
+ .e-prompt-icon {
136969
+ margin: 0 0 0 8px;
136970
+ min-height: $aiassist-icon-height;
136971
+ }
136972
+ .e-output-icon {
136973
+ height: $aiassist-icon-height;
136974
+ margin: 0 4px 0 8px;
136975
+ }
136976
+ .e-prompt-icon,
136977
+ .e-output-icon {
136978
+ border-radius: 50%;
136979
+ min-width: $aiassist-icon-width;
136980
+ }
136981
+ .e-loading-body,
136982
+ .e-content-body,
136983
+ .e-loading-footer {
136984
+ padding: 2px 0 0 6px;
136985
+ }
136986
+ .e-content-container {
136987
+ margin-top: 16px;
136988
+ font-size: 14px;
136989
+ justify-content: space-between;
136990
+ }
136991
+ .e-prompt-text {
136992
+ white-space: pre-wrap;
136993
+ height: fit-content;
136994
+ border-radius: $prompt-text-border-radius;
136995
+ padding: $prompt-text-padding;
136996
+ line-height: 20px;
136997
+ }
136998
+ .e-content-footer,
136999
+ .e-prompt-toolbar {
137000
+ opacity: 0;
137001
+ }
137002
+ .e-prompt-container {
137003
+ gap: 2px;
137004
+ align-self: flex-end;
137005
+ max-width: 70%;
137006
+ margin-bottom: 5px;
137007
+ flex-direction: column;
137008
+ &:hover .e-assist-edit-icon {
137009
+ opacity: 1;
137010
+ cursor: pointer;
136897
137011
  }
136898
- .e-prompt-icon {
136899
- margin: 0 8px;
136900
- min-height: $aiassist-icon-height;
137012
+ }
137013
+ .e-suggestion-header {
137014
+ font-size: 14px;
137015
+ font-weight: $suggesstions-header-font-weight;
137016
+ margin: 0 2px 8px 8px;
137017
+ text-align: right;
137018
+ }
137019
+ .e-suggestions {
137020
+ width: 100%;
137021
+ &.e-suggestion-item-template li {
137022
+ padding: 0;
136901
137023
  }
136902
- .e-output-icon {
136903
- height: $aiassist-icon-height;
136904
- margin-left: 10px;
137024
+ ul {
137025
+ list-style-type: none;
137026
+ padding: 0;
137027
+ margin: 0;
137028
+ display: flex;
137029
+ flex-wrap: wrap;
137030
+ justify-content: end;
136905
137031
  }
136906
- .e-prompt-icon,
136907
- .e-output-icon {
136908
- border-radius: 50%;
136909
- min-width: $aiassist-icon-width;
137032
+ li {
137033
+ line-height: 20px;
137034
+ font-weight: $suggesstions-font-weight;
137035
+ padding: $suggesstions-list-padding;
137036
+ margin: $suggesstions-list-margin;
137037
+ border-radius: $suggesstions-list-border-radius;
137038
+ cursor: pointer;
137039
+ white-space: nowrap;
137040
+ overflow: hidden;
137041
+ text-overflow: ellipsis;
136910
137042
  }
137043
+ }
137044
+ .e-views {
137045
+ display: flex;
137046
+ justify-content: space-around;
136911
137047
  .e-content-body {
136912
137048
  line-height: 25px;
136913
137049
  border-radius: 4px;
@@ -136993,85 +137129,36 @@ $prompt-text-border-color: $flyout-border !default;
136993
137129
  .e-content-body > *:first-child {
136994
137130
  margin-block-start: 0;
136995
137131
  }
136996
- .e-loading-body,
136997
- .e-content-body,
136998
- .e-loading-footer {
136999
- padding: 2px 0 0 8px;
137000
- }
137001
- .e-content-footer,
137002
- .e-prompt-toolbar {
137003
- opacity: 0;
137004
- }
137005
- .e-content-container {
137006
- margin-top: 16px;
137007
- font-size: 14px;
137008
- justify-content: space-between;
137009
- .e-prompt-text {
137010
- white-space: pre-wrap;
137011
- height: fit-content;
137012
- border-radius: $prompt-text-border-radius;
137013
- padding: $prompt-text-padding;
137014
- margin-right: 2px;
137015
- line-height: 20px;
137016
- }
137017
- }
137018
- .e-suggestions {
137019
- width: 100%;
137020
- &.e-suggestion-item-template li {
137021
- padding: 0;
137022
- }
137023
- .e-suggestion-header {
137024
- font-size: 14px;
137025
- font-weight: $suggesstions-header-font-weight;
137026
- margin: 0 2px 8px 8px;
137027
- text-align: right;
137028
- }
137029
- ul {
137030
- list-style-type: none;
137031
- padding: 0;
137032
- margin: 0;
137033
- display: flex;
137034
- flex-wrap: wrap;
137035
- justify-content: end;
137036
- }
137037
- li {
137038
- line-height: 20px;
137039
- font-weight: $suggesstions-font-weight;
137040
- padding: $suggesstions-list-padding;
137041
- margin: $suggesstions-list-margin;
137042
- border-radius: $suggesstions-list-border-radius;
137043
- cursor: pointer;
137044
- white-space: nowrap;
137045
- overflow: hidden;
137046
- text-overflow: ellipsis;
137047
- }
137048
- }
137049
- .e-prompt-container {
137050
- gap: 2px;
137051
- align-self: flex-end;
137052
- max-width: 70%;
137053
- margin-bottom: 5px;
137054
- flex-direction: column;
137055
- &:hover .e-assist-edit-icon {
137056
- opacity: 1;
137057
- cursor: pointer;
137058
- }
137059
- }
137060
137132
  }
137061
137133
  .e-views,
137062
137134
  .e-custom-view,
137063
- .e-aiassist-view-content-section {
137135
+ .e-assistview-content-section {
137064
137136
  height: 100%;
137065
- overflow-y: scroll;
137137
+ overflow: scroll;
137066
137138
  &::-webkit-scrollbar {
137067
137139
  width: $ai-assist-scrollbar-width;
137140
+ height: $ai-assist-scrollbar-width;
137068
137141
  }
137069
137142
  &::-webkit-scrollbar-thumb {
137070
137143
  border-radius: 10px;
137071
137144
  }
137072
137145
  }
137073
- .e-content {
137074
- margin-right: 8px;
137146
+ .e-assist-send {
137147
+ position: absolute;
137148
+ right: 20px;
137149
+ font-size: $send-icon-size;
137150
+ bottom: $send-icon-bottom;
137151
+ padding-top: 2px;
137152
+ }
137153
+ .e-assist-send.disabled {
137154
+ pointer-events: none;
137155
+ opacity: .5;
137156
+ cursor: not-allowed;
137157
+ }
137158
+ .e-assist-send.enabled {
137159
+ pointer-events: auto;
137160
+ opacity: 1;
137161
+ cursor: pointer;
137075
137162
  }
137076
137163
  .e-footer {
137077
137164
  position: relative;
@@ -137090,23 +137177,6 @@ $prompt-text-border-color: $flyout-border !default;
137090
137177
  .hide-scrollbar textarea {
137091
137178
  scrollbar-width: none;
137092
137179
  }
137093
- .e-assist-send {
137094
- position: absolute;
137095
- right: 20px;
137096
- font-size: $send-icon-size;
137097
- bottom: 8px;
137098
- padding-top: 2px;
137099
- }
137100
- .e-assist-send.disabled {
137101
- pointer-events: none;
137102
- opacity: .5;
137103
- cursor: not-allowed;
137104
- }
137105
- .e-assist-send.enabled {
137106
- pointer-events: auto;
137107
- opacity: 1;
137108
- cursor: pointer;
137109
- }
137110
137180
  &:has(.e-rtl) .e-assist-send {
137111
137181
  right: unset;
137112
137182
  left: 20px;
@@ -137118,6 +137188,13 @@ $prompt-text-border-color: $flyout-border !default;
137118
137188
  .e-multi-line-input.e-rtl {
137119
137189
  padding-left: 35px;
137120
137190
  padding-right: unset;
137191
+ &.e-input-group.e-control-wrapper {
137192
+ .e-textarea {
137193
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
137194
+ padding: 4px 12px 4px 8px;
137195
+ }
137196
+ }
137197
+ }
137121
137198
  }
137122
137199
  .e-input-group.e-multi-line-input {
137123
137200
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -137199,16 +137276,24 @@ $prompt-text-border-color: $flyout-border !default;
137199
137276
  outline: 1px solid;
137200
137277
  }
137201
137278
  &.e-rtl {
137202
- .e-views {
137203
- .e-suggestions {
137204
- .e-suggestion-header {
137205
- text-align: left;
137206
- margin: 0 8px 8px 2px;
137207
- }
137208
- li {
137209
- margin: $suggesstions-list-margin-rtl;
137279
+ .e-view-header .e-toolbar-item {
137280
+ &.e-assist-view-header,
137281
+ &.e-custom-view-header {
137282
+ .e-tbar-btn .e-btn-icon {
137283
+ padding: 4px 2px 4px 4px;
137210
137284
  }
137211
137285
  }
137286
+ }
137287
+ .e-suggestion-header {
137288
+ text-align: left;
137289
+ margin: 0 8px 8px 2px;
137290
+ }
137291
+ .e-suggestions {
137292
+ li {
137293
+ margin: $suggesstions-list-margin-rtl;
137294
+ }
137295
+ }
137296
+ .e-views {
137212
137297
  .e-content-body {
137213
137298
  blockquote {
137214
137299
  padding-left: unset;
@@ -137223,6 +137308,17 @@ $prompt-text-border-color: $flyout-border !default;
137223
137308
  }
137224
137309
  }
137225
137310
  }
137311
+ .e-loading-body,
137312
+ .e-content-body,
137313
+ .e-loading-footer {
137314
+ padding: 2px 6px 0 0;
137315
+ }
137316
+ .e-prompt-icon {
137317
+ margin: 0 8px 0 0;
137318
+ }
137319
+ .e-output-icon {
137320
+ margin: 0 8px 0 4px;
137321
+ }
137226
137322
  }
137227
137323
  }
137228
137324
  @media (max-width: 760px) {
@@ -137231,12 +137327,14 @@ $prompt-text-border-color: $flyout-border !default;
137231
137327
  .e-footer {
137232
137328
  width: 100%;
137233
137329
  }
137234
- .e-view-container .e-suggestions {
137330
+ .e-view-container .e-suggestions,
137331
+ .e-prompt-content {
137235
137332
  padding-right: 8px;
137236
137333
  }
137237
137334
  &.e-rtl {
137238
- .e-view-container .e-suggestions {
137239
- padding-left: 8px;
137335
+ .e-view-container .e-suggestions,
137336
+ .e-prompt-content {
137337
+ padding: 0 0 0 8px;
137240
137338
  }
137241
137339
  }
137242
137340
  }
@@ -137274,26 +137372,55 @@ $prompt-text-border-color: $flyout-border !default;
137274
137372
  }
137275
137373
  .e-tbar-btn {
137276
137374
  background: transparent;
137375
+ &:focus {
137376
+ box-shadow: none;
137377
+ }
137378
+ &:focus-visible {
137379
+ box-shadow: $tbar-header-btn-focus-box-shadow;
137380
+ @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') {
137381
+ background: $tbar-header-hover-bg-color;
137382
+ }
137383
+ }
137277
137384
  }
137278
137385
  }
137279
137386
  }
137280
- .e-views {
137281
- .e-prompt-icon,
137282
- .e-output-icon {
137283
- border: 1px solid $icon-border-color;
137284
- color: $user-logo-color;
137285
- background-color: $user-logo-bg-color;
137286
- }
137287
- .e-prompt-text {
137288
- background: $suggested-content-bg-color;
137387
+ .e-suggestion-header {
137388
+ color: $suggesstions-header-color;
137389
+ }
137390
+ .e-suggestions {
137391
+ li {
137289
137392
  color: $suggested-content-text-color;
137393
+ box-shadow: $suggestion-li-box-shadow;
137290
137394
  @if ($skin-name == 'bootstrap5.3') {
137291
137395
  border: none;
137292
137396
  }
137293
137397
  @else {
137294
- border: 1px solid $prompt-text-border-color;
137398
+ border: 1px solid $suggestion-li-border-color;
137295
137399
  }
137296
137400
  }
137401
+ }
137402
+ .e-prompt-icon,
137403
+ .e-output-icon {
137404
+ border: 1px solid $icon-border-color;
137405
+ color: $user-logo-color;
137406
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
137407
+ background: $user-logo-bg-color;
137408
+ }
137409
+ @else {
137410
+ background-color: $user-logo-bg-color;
137411
+ }
137412
+ }
137413
+ .e-prompt-text {
137414
+ background: $suggested-content-bg-color;
137415
+ color: $suggested-content-text-color;
137416
+ @if ($skin-name == 'bootstrap5.3') {
137417
+ border: none;
137418
+ }
137419
+ @else {
137420
+ border: 1px solid $prompt-text-border-color;
137421
+ }
137422
+ }
137423
+ .e-views {
137297
137424
  .e-content-body {
137298
137425
  color: $response-text-color;
137299
137426
  a {
@@ -137333,21 +137460,6 @@ $prompt-text-border-color: $flyout-border !default;
137333
137460
  color: rgba(255, 212, 212, 1);
137334
137461
  }
137335
137462
  }
137336
- .e-suggestions {
137337
- .e-suggestion-header {
137338
- color: $suggesstions-header-color;
137339
- }
137340
- li {
137341
- color: $suggested-content-text-color;
137342
- box-shadow: $suggestion-li-box-shadow;
137343
- @if ($skin-name == 'bootstrap5.3') {
137344
- border: none;
137345
- }
137346
- @else {
137347
- border: 1px solid $suggestion-li-border-color;
137348
- }
137349
- }
137350
- }
137351
137463
  }
137352
137464
  .e-stop-response {
137353
137465
  border-color: $response-stopper-border-color;
@@ -137357,21 +137469,21 @@ $prompt-text-border-color: $flyout-border !default;
137357
137469
  }
137358
137470
  .e-views,
137359
137471
  .e-custom-view,
137360
- .e-aiassist-view-content-section {
137472
+ .e-assistview-content-section {
137361
137473
  &::-webkit-scrollbar-thumb {
137362
137474
  background: $scrollbar-color;
137363
137475
  }
137364
137476
  }
137477
+ .e-assist-send {
137478
+ color: $send-icon-color;
137479
+ &.disabled {
137480
+ color: $send-icon-disabled-color;
137481
+ }
137482
+ }
137365
137483
  .e-footer {
137366
137484
  textarea::-webkit-scrollbar-thumb {
137367
137485
  background: $scrollbar-color;
137368
137486
  }
137369
- .e-assist-send {
137370
- color: $send-icon-color;
137371
- &.disabled {
137372
- color: $send-icon-disabled-color;
137373
- }
137374
- }
137375
137487
  // To override the default border style of the textarea component for the Material and Material3 themes.
137376
137488
  .e-input-group.e-multi-line-input {
137377
137489
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {