@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
@@ -35046,13 +35046,11 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
35046
35046
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
35047
35047
  @include alignment(6px, calc(50% - 3px), 'vertical');
35048
35048
  }
35049
- @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' ) {
35050
- @if ($skin-name == 'tailwind') {
35051
- left: calc(50%);
35052
- }
35053
- @else {
35054
- @include alignment(4px, calc(50% - 2px), 'vertical');
35055
- }
35049
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
35050
+ @include alignment(4px, calc(50% - 2px), 'vertical');
35051
+ }
35052
+ @if ($skin-name == 'tailwind') {
35053
+ @include alignment(4px, calc(50%), 'vertical');
35056
35054
  }
35057
35055
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
35058
35056
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -40001,7 +39999,7 @@ $radio-btn-check-transition: none !default;
40001
39999
  $radio-btn-disabled-border-color: $border-light !default;
40002
40000
  $radio-btn-disabled-checked-border-color: transparent !default;
40003
40001
  $radio-btn-disabled-background-color: $primary-light !default;
40004
- $radio-btn-disabled-not-checked-bg-color: $primary-light !default;
40002
+ $radio-btn-disabled-not-checked-bg-color: transparent !default;
40005
40003
  $radio-btn-disabled-color: $content-text-color-disabled !default;
40006
40004
  $radio-btn-disabled-checked-color: $primary-text-color !default;
40007
40005
  $radio-btn-font-color: $content-text-color !default;
@@ -40813,7 +40811,7 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
40813
40811
  }
40814
40812
 
40815
40813
  &::before {
40816
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
40814
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
40817
40815
  background-color: $radio-btn-disabled-not-checked-bg-color;
40818
40816
  }
40819
40817
  @else {
@@ -42900,6 +42898,10 @@ $listview-template-focused-multiline-content-color: $content-text-color-selected
42900
42898
  }
42901
42899
  }
42902
42900
 
42901
+ &.e-virtualization .e-list-container{
42902
+ overflow: unset;
42903
+ }
42904
+
42903
42905
  & .e-list-container {
42904
42906
  overflow: hidden;
42905
42907
  position: relative;
@@ -66012,6 +66014,10 @@ $ddl-close-down-icon-left: 35px !default;
66012
66014
  display: block;
66013
66015
  }
66014
66016
 
66017
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
66018
+ margin-right: 30px;
66019
+ }
66020
+
66015
66021
  .e-multi-select-wrapper .e-multi-hidden {
66016
66022
  border: 0;
66017
66023
  height: 0;
@@ -83075,7 +83081,12 @@ $grid-checkmark-color: $primary-text-color !default;
83075
83081
  /* stylelint-enable */
83076
83082
 
83077
83083
  .e-dlg-content {
83078
- padding: 24px 27px;
83084
+ @if $grid-skin == 'fluent2' {
83085
+ padding: 24px 27px;
83086
+ }
83087
+ @else {
83088
+ padding: 8px 16px 8px 8px;
83089
+ }
83079
83090
  overflow-y: hidden;
83080
83091
  }
83081
83092
 
@@ -83930,7 +83941,7 @@ $grid-checkmark-color: $primary-text-color !default;
83930
83941
  }
83931
83942
 
83932
83943
  .e-grid-popup {
83933
- position: relative;
83944
+ position: absolute;
83934
83945
  }
83935
83946
 
83936
83947
  #{&}.e-grid,
@@ -86250,6 +86261,12 @@ $grid-checkmark-color: $primary-text-color !default;
86250
86261
  padding: $grid-columnchooser-toolbardiv-padding;
86251
86262
  }
86252
86263
 
86264
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
86265
+ @if $grid-skin == 'fluent' {
86266
+ padding-bottom: 1px;
86267
+ }
86268
+ }
86269
+
86253
86270
  .e-edit-dialog {
86254
86271
  min-height: 350px;
86255
86272
  .e-dlg-content {
@@ -87064,14 +87081,17 @@ $grid-checkmark-color: $primary-text-color !default;
87064
87081
  }
87065
87082
 
87066
87083
  &.e-wrap {
87067
- & .e-gridheader .e-rowcell,
87068
- & .e-gridcontent .e-rowcell,
87084
+ & .e-rowcell,
87069
87085
  & .e-columnheader .e-stackedheadercelldiv,
87070
87086
  & .e-columnheader .e-headercelldiv,
87071
87087
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
87072
87088
  @include wrap-styles;
87073
87089
  }
87074
87090
 
87091
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
87092
+ white-space: nowrap;
87093
+ }
87094
+
87075
87095
  & .e-stackedheader .e-columnheader {
87076
87096
  .e-stackedheadercelldiv,
87077
87097
  .e-headercelldiv {
@@ -87629,7 +87649,8 @@ $grid-checkmark-color: $primary-text-color !default;
87629
87649
  }
87630
87650
 
87631
87651
  @if $grid-skin == 'fluent2' {
87632
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
87652
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
87653
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
87633
87654
  padding: 0 6px;
87634
87655
  }
87635
87656
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -88543,7 +88564,8 @@ $grid-checkmark-color: $primary-text-color !default;
88543
88564
  }
88544
88565
 
88545
88566
  @if $grid-skin == 'fluent2' {
88546
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
88567
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
88568
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
88547
88569
  color: $flyout-text-color-hover;
88548
88570
  }
88549
88571
  }
@@ -136632,6 +136654,8 @@ $aiassist-header-height: 46px !default;
136632
136654
  $aiassist-icon-height: 30px !default;
136633
136655
  $aiassist-icon-width: 30px !default;
136634
136656
  $send-icon-size: 14px !default;
136657
+ $send-icon-bottom: 9px !default;
136658
+ $send-icon-bigger-bottom: 11px !default;
136635
136659
  $aiassist-bigger-header-height: 50px !default;
136636
136660
  $aiassist-bigger-icon-height: 40px !default;
136637
136661
  $aiassist-bigger-icon-width: 40px !default;
@@ -136672,63 +136696,86 @@ $rating-selected-bg-color: $rating-selected-color !default;
136672
136696
  $send-icon-color: $icon-color !default;
136673
136697
  $send-icon-disabled-color: $icon-color-disabled !default;
136674
136698
  $prompt-text-border-color: $content-bg-color !default;
136699
+ $tbar-header-btn-focus-box-shadow: $secondary-shadow-focus !default;
136700
+ $tbar-header-hover-bg-color: transparent !default;
136675
136701
 
136676
136702
  @include export-module('aiassistview-bigger') {
136677
136703
  .e-bigger.e-aiassistview,
136678
136704
  .e-bigger .e-aiassistview {
136679
136705
  .e-view-header {
136680
136706
  height: $aiassist-bigger-header-height;
136707
+ .e-toolbar {
136708
+ .e-toolbar-items {
136709
+ .e-toolbar-left {
136710
+ height: calc($aiassist-bigger-header-height - 1px);
136711
+ }
136712
+ .e-toolbar-item {
136713
+ &.e-assist-view-header,
136714
+ &.e-custom-view-header {
136715
+ @if ($skin-name == 'highcontrast') {
136716
+ // To apply box-shadow styling during keyboard navigation
136717
+ padding: 1.5px;
136718
+ }
136719
+ @else {
136720
+ padding: 0;
136721
+ }
136722
+ .e-tbar-btn {
136723
+ padding: 0;
136724
+ .e-btn-icon {
136725
+ padding: 4px 4px 4px 2px;
136726
+ }
136727
+ }
136728
+ }
136729
+ }
136730
+ }
136731
+ }
136681
136732
  }
136682
136733
  .e-view-content {
136683
136734
  height: calc(100% - $aiassist-bigger-header-height);
136684
136735
  }
136685
- .e-views {
136686
- .e-prompt-icon {
136687
- min-height: $aiassist-bigger-icon-height;
136688
- }
136689
- .e-output-icon {
136690
- height: $aiassist-bigger-icon-height;
136691
- }
136692
- .e-prompt-icon,
136693
- .e-output-icon {
136694
- min-width: $aiassist-bigger-icon-width;
136695
- }
136696
- .e-loading-body,
136697
- .e-content-body,
136698
- .e-loading-footer {
136699
- padding: 2px 0 0 10px;
136700
- }
136701
- .e-content-container {
136702
- font-size: 16px;
136703
- .e-prompt-text {
136704
- padding: $prompt-text-bigger-padding;
136705
- line-height: 22px;
136706
- }
136736
+ .e-prompt-icon {
136737
+ min-height: $aiassist-bigger-icon-height;
136738
+ }
136739
+ .e-output-icon {
136740
+ height: $aiassist-bigger-icon-height;
136741
+ }
136742
+ .e-prompt-icon,
136743
+ .e-output-icon {
136744
+ min-width: $aiassist-bigger-icon-width;
136745
+ }
136746
+ .e-loading-body,
136747
+ .e-content-body,
136748
+ .e-loading-footer {
136749
+ padding: 6px 0 0 6px;
136750
+ }
136751
+ .e-prompt-text {
136752
+ padding: $prompt-text-bigger-padding;
136753
+ line-height: 22px;
136754
+ }
136755
+ .e-content-container {
136756
+ font-size: 16px;
136757
+ }
136758
+ .e-suggestion-header {
136759
+ font-size: 16px;
136760
+ font-weight: $suggesstions-header-bigger-font-weight;
136761
+ margin-bottom: 15px;
136762
+ }
136763
+ .e-suggestions {
136764
+ &.e-suggestion-item-template ul li {
136765
+ padding: 0;
136707
136766
  }
136708
- .e-suggestions {
136709
- &.e-suggestion-item-template ul li {
136710
- padding: 0;
136711
- }
136712
- .e-suggestion-header {
136713
- font-size: 16px;
136714
- font-weight: $suggesstions-header-bigger-font-weight;
136715
- margin-bottom: 15px;
136716
- }
136717
- ul {
136718
- li {
136719
- line-height: 22px;
136720
- font-weight: $suggesstions-bigger-font-weight;
136721
- padding: $suggesstions-bigger-list-padding;
136722
- margin: $suggesstions-bigger-list-margin;
136723
- }
136724
- }
136767
+ li {
136768
+ line-height: 22px;
136769
+ font-weight: $suggesstions-bigger-font-weight;
136770
+ padding: $suggesstions-bigger-list-padding;
136771
+ margin: $suggesstions-bigger-list-margin;
136725
136772
  }
136726
136773
  }
136774
+ .e-assist-send {
136775
+ font-size: $send-icon-size-bigger;
136776
+ bottom: $send-icon-bigger-bottom;
136777
+ }
136727
136778
  .e-footer {
136728
- .e-assist-send {
136729
- font-size: $send-icon-size-bigger;
136730
- bottom: 9px;
136731
- }
136732
136779
  .e-input-group.e-control-wrapper.e-multi-line-input {
136733
136780
  .e-textarea {
136734
136781
  min-height: 38px;
@@ -136737,6 +136784,11 @@ $prompt-text-border-color: $content-bg-color !default;
136737
136784
  min-height: 28px;
136738
136785
  }
136739
136786
  }
136787
+ &.e-rtl .e-textarea {
136788
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136789
+ padding: 6px 16px 6px 12px;
136790
+ }
136791
+ }
136740
136792
  }
136741
136793
  }
136742
136794
  .e-stop-response.e-btn-active {
@@ -136748,13 +136800,24 @@ $prompt-text-border-color: $content-bg-color !default;
136748
136800
  font-size: $response-stopper-bigger-font-size;
136749
136801
  }
136750
136802
  &.e-rtl {
136751
- .e-views {
136752
- .e-suggestions {
136753
- li {
136754
- margin: $suggesstions-bigger-list-margin-rtl;
136803
+ .e-view-header .e-toolbar-item {
136804
+ &.e-assist-view-header,
136805
+ &.e-custom-view-header {
136806
+ .e-tbar-btn .e-btn-icon {
136807
+ padding: 4px 2px 4px 4px;
136755
136808
  }
136756
136809
  }
136757
136810
  }
136811
+ .e-suggestions {
136812
+ li {
136813
+ margin: $suggesstions-bigger-list-margin-rtl;
136814
+ }
136815
+ }
136816
+ .e-loading-body,
136817
+ .e-content-body,
136818
+ .e-loading-footer {
136819
+ padding: 6px 6px 0 0;
136820
+ }
136758
136821
  }
136759
136822
  }
136760
136823
  }
@@ -136782,14 +136845,29 @@ $prompt-text-border-color: $content-bg-color !default;
136782
136845
  width: 100%;
136783
136846
  border-radius: 4px;
136784
136847
  }
136785
- .e-tbar-btn {
136786
- padding: 0;
136848
+ &.e-assist-view-header,
136849
+ &.e-custom-view-header {
136850
+ @if ($skin-name == 'highcontrast') {
136851
+ // To apply box-shadow styling during keyboard navigation
136852
+ padding: 1px;
136853
+ }
136854
+ @else {
136855
+ padding: 0;
136856
+ }
136857
+ .e-tbar-btn {
136858
+ padding: 0;
136859
+ .e-btn-icon {
136860
+ padding: 4px 4px 4px 2px;
136861
+ }
136862
+ }
136863
+ }
136864
+ &.e-active .e-btn {
136865
+ cursor: pointer;
136787
136866
  }
136788
136867
  }
136789
- }
136790
- .e-view-header .e-toolbar-item.e-active .e-btn {
136791
- border-radius: 0;
136792
- cursor: pointer;
136868
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
136869
+ height: calc($aiassist-header-height - 1px);
136870
+ }
136793
136871
  }
136794
136872
  .e-view-container,
136795
136873
  .e-footer {
@@ -136839,36 +136917,94 @@ $prompt-text-border-color: $content-bg-color !default;
136839
136917
  }
136840
136918
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
136841
136919
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
136842
- @if $theme-name == 'highcontrast' {
136843
- padding: 6px 0 6px 5px;
136844
- }
136845
- @else {
136846
- padding: 6px 0 6px 2px;
136847
- }
136920
+ padding: 6px 2px;
136848
136921
  }
136849
136922
  }
136850
- .e-views {
136923
+ .e-output-container {
136924
+ width: 90%;
136851
136925
  display: flex;
136852
- justify-content: space-around;
136853
- .e-output-container {
136854
- width: 90%;
136855
- display: flex;
136856
- align-self: flex-start;
136857
- margin: 10px 0;
136926
+ align-self: flex-start;
136927
+ margin: 10px 0;
136928
+ }
136929
+ .e-prompt-icon {
136930
+ margin: 0 0 0 8px;
136931
+ min-height: $aiassist-icon-height;
136932
+ }
136933
+ .e-output-icon {
136934
+ height: $aiassist-icon-height;
136935
+ margin: 0 4px 0 8px;
136936
+ }
136937
+ .e-prompt-icon,
136938
+ .e-output-icon {
136939
+ border-radius: 50%;
136940
+ min-width: $aiassist-icon-width;
136941
+ }
136942
+ .e-loading-body,
136943
+ .e-content-body,
136944
+ .e-loading-footer {
136945
+ padding: 2px 0 0 6px;
136946
+ }
136947
+ .e-content-container {
136948
+ margin-top: 16px;
136949
+ font-size: 14px;
136950
+ justify-content: space-between;
136951
+ }
136952
+ .e-prompt-text {
136953
+ white-space: pre-wrap;
136954
+ height: fit-content;
136955
+ border-radius: $prompt-text-border-radius;
136956
+ padding: $prompt-text-padding;
136957
+ line-height: 20px;
136958
+ }
136959
+ .e-content-footer,
136960
+ .e-prompt-toolbar {
136961
+ opacity: 0;
136962
+ }
136963
+ .e-prompt-container {
136964
+ gap: 2px;
136965
+ align-self: flex-end;
136966
+ max-width: 70%;
136967
+ margin-bottom: 5px;
136968
+ flex-direction: column;
136969
+ &:hover .e-assist-edit-icon {
136970
+ opacity: 1;
136971
+ cursor: pointer;
136858
136972
  }
136859
- .e-prompt-icon {
136860
- margin: 0 8px;
136861
- min-height: $aiassist-icon-height;
136973
+ }
136974
+ .e-suggestion-header {
136975
+ font-size: 14px;
136976
+ font-weight: $suggesstions-header-font-weight;
136977
+ margin: 0 2px 8px 8px;
136978
+ text-align: right;
136979
+ }
136980
+ .e-suggestions {
136981
+ width: 100%;
136982
+ &.e-suggestion-item-template li {
136983
+ padding: 0;
136862
136984
  }
136863
- .e-output-icon {
136864
- height: $aiassist-icon-height;
136865
- margin-left: 10px;
136985
+ ul {
136986
+ list-style-type: none;
136987
+ padding: 0;
136988
+ margin: 0;
136989
+ display: flex;
136990
+ flex-wrap: wrap;
136991
+ justify-content: end;
136866
136992
  }
136867
- .e-prompt-icon,
136868
- .e-output-icon {
136869
- border-radius: 50%;
136870
- min-width: $aiassist-icon-width;
136993
+ li {
136994
+ line-height: 20px;
136995
+ font-weight: $suggesstions-font-weight;
136996
+ padding: $suggesstions-list-padding;
136997
+ margin: $suggesstions-list-margin;
136998
+ border-radius: $suggesstions-list-border-radius;
136999
+ cursor: pointer;
137000
+ white-space: nowrap;
137001
+ overflow: hidden;
137002
+ text-overflow: ellipsis;
136871
137003
  }
137004
+ }
137005
+ .e-views {
137006
+ display: flex;
137007
+ justify-content: space-around;
136872
137008
  .e-content-body {
136873
137009
  line-height: 25px;
136874
137010
  border-radius: 4px;
@@ -136954,85 +137090,36 @@ $prompt-text-border-color: $content-bg-color !default;
136954
137090
  .e-content-body > *:first-child {
136955
137091
  margin-block-start: 0;
136956
137092
  }
136957
- .e-loading-body,
136958
- .e-content-body,
136959
- .e-loading-footer {
136960
- padding: 2px 0 0 8px;
136961
- }
136962
- .e-content-footer,
136963
- .e-prompt-toolbar {
136964
- opacity: 0;
136965
- }
136966
- .e-content-container {
136967
- margin-top: 16px;
136968
- font-size: 14px;
136969
- justify-content: space-between;
136970
- .e-prompt-text {
136971
- white-space: pre-wrap;
136972
- height: fit-content;
136973
- border-radius: $prompt-text-border-radius;
136974
- padding: $prompt-text-padding;
136975
- margin-right: 2px;
136976
- line-height: 20px;
136977
- }
136978
- }
136979
- .e-suggestions {
136980
- width: 100%;
136981
- &.e-suggestion-item-template li {
136982
- padding: 0;
136983
- }
136984
- .e-suggestion-header {
136985
- font-size: 14px;
136986
- font-weight: $suggesstions-header-font-weight;
136987
- margin: 0 2px 8px 8px;
136988
- text-align: right;
136989
- }
136990
- ul {
136991
- list-style-type: none;
136992
- padding: 0;
136993
- margin: 0;
136994
- display: flex;
136995
- flex-wrap: wrap;
136996
- justify-content: end;
136997
- }
136998
- li {
136999
- line-height: 20px;
137000
- font-weight: $suggesstions-font-weight;
137001
- padding: $suggesstions-list-padding;
137002
- margin: $suggesstions-list-margin;
137003
- border-radius: $suggesstions-list-border-radius;
137004
- cursor: pointer;
137005
- white-space: nowrap;
137006
- overflow: hidden;
137007
- text-overflow: ellipsis;
137008
- }
137009
- }
137010
- .e-prompt-container {
137011
- gap: 2px;
137012
- align-self: flex-end;
137013
- max-width: 70%;
137014
- margin-bottom: 5px;
137015
- flex-direction: column;
137016
- &:hover .e-assist-edit-icon {
137017
- opacity: 1;
137018
- cursor: pointer;
137019
- }
137020
- }
137021
137093
  }
137022
137094
  .e-views,
137023
137095
  .e-custom-view,
137024
- .e-aiassist-view-content-section {
137096
+ .e-assistview-content-section {
137025
137097
  height: 100%;
137026
- overflow-y: scroll;
137098
+ overflow: scroll;
137027
137099
  &::-webkit-scrollbar {
137028
137100
  width: $ai-assist-scrollbar-width;
137101
+ height: $ai-assist-scrollbar-width;
137029
137102
  }
137030
137103
  &::-webkit-scrollbar-thumb {
137031
137104
  border-radius: 10px;
137032
137105
  }
137033
137106
  }
137034
- .e-content {
137035
- margin-right: 8px;
137107
+ .e-assist-send {
137108
+ position: absolute;
137109
+ right: 20px;
137110
+ font-size: $send-icon-size;
137111
+ bottom: $send-icon-bottom;
137112
+ padding-top: 2px;
137113
+ }
137114
+ .e-assist-send.disabled {
137115
+ pointer-events: none;
137116
+ opacity: .5;
137117
+ cursor: not-allowed;
137118
+ }
137119
+ .e-assist-send.enabled {
137120
+ pointer-events: auto;
137121
+ opacity: 1;
137122
+ cursor: pointer;
137036
137123
  }
137037
137124
  .e-footer {
137038
137125
  position: relative;
@@ -137051,23 +137138,6 @@ $prompt-text-border-color: $content-bg-color !default;
137051
137138
  .hide-scrollbar textarea {
137052
137139
  scrollbar-width: none;
137053
137140
  }
137054
- .e-assist-send {
137055
- position: absolute;
137056
- right: 20px;
137057
- font-size: $send-icon-size;
137058
- bottom: 8px;
137059
- padding-top: 2px;
137060
- }
137061
- .e-assist-send.disabled {
137062
- pointer-events: none;
137063
- opacity: .5;
137064
- cursor: not-allowed;
137065
- }
137066
- .e-assist-send.enabled {
137067
- pointer-events: auto;
137068
- opacity: 1;
137069
- cursor: pointer;
137070
- }
137071
137141
  &:has(.e-rtl) .e-assist-send {
137072
137142
  right: unset;
137073
137143
  left: 20px;
@@ -137079,6 +137149,13 @@ $prompt-text-border-color: $content-bg-color !default;
137079
137149
  .e-multi-line-input.e-rtl {
137080
137150
  padding-left: 35px;
137081
137151
  padding-right: unset;
137152
+ &.e-input-group.e-control-wrapper {
137153
+ .e-textarea {
137154
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
137155
+ padding: 4px 12px 4px 8px;
137156
+ }
137157
+ }
137158
+ }
137082
137159
  }
137083
137160
  .e-input-group.e-multi-line-input {
137084
137161
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -137160,16 +137237,24 @@ $prompt-text-border-color: $content-bg-color !default;
137160
137237
  outline: 1px solid;
137161
137238
  }
137162
137239
  &.e-rtl {
137163
- .e-views {
137164
- .e-suggestions {
137165
- .e-suggestion-header {
137166
- text-align: left;
137167
- margin: 0 8px 8px 2px;
137168
- }
137169
- li {
137170
- margin: $suggesstions-list-margin-rtl;
137240
+ .e-view-header .e-toolbar-item {
137241
+ &.e-assist-view-header,
137242
+ &.e-custom-view-header {
137243
+ .e-tbar-btn .e-btn-icon {
137244
+ padding: 4px 2px 4px 4px;
137171
137245
  }
137172
137246
  }
137247
+ }
137248
+ .e-suggestion-header {
137249
+ text-align: left;
137250
+ margin: 0 8px 8px 2px;
137251
+ }
137252
+ .e-suggestions {
137253
+ li {
137254
+ margin: $suggesstions-list-margin-rtl;
137255
+ }
137256
+ }
137257
+ .e-views {
137173
137258
  .e-content-body {
137174
137259
  blockquote {
137175
137260
  padding-left: unset;
@@ -137184,6 +137269,17 @@ $prompt-text-border-color: $content-bg-color !default;
137184
137269
  }
137185
137270
  }
137186
137271
  }
137272
+ .e-loading-body,
137273
+ .e-content-body,
137274
+ .e-loading-footer {
137275
+ padding: 2px 6px 0 0;
137276
+ }
137277
+ .e-prompt-icon {
137278
+ margin: 0 8px 0 0;
137279
+ }
137280
+ .e-output-icon {
137281
+ margin: 0 8px 0 4px;
137282
+ }
137187
137283
  }
137188
137284
  }
137189
137285
  @media (max-width: 760px) {
@@ -137192,12 +137288,14 @@ $prompt-text-border-color: $content-bg-color !default;
137192
137288
  .e-footer {
137193
137289
  width: 100%;
137194
137290
  }
137195
- .e-view-container .e-suggestions {
137291
+ .e-view-container .e-suggestions,
137292
+ .e-prompt-content {
137196
137293
  padding-right: 8px;
137197
137294
  }
137198
137295
  &.e-rtl {
137199
- .e-view-container .e-suggestions {
137200
- padding-left: 8px;
137296
+ .e-view-container .e-suggestions,
137297
+ .e-prompt-content {
137298
+ padding: 0 0 0 8px;
137201
137299
  }
137202
137300
  }
137203
137301
  }
@@ -137235,26 +137333,55 @@ $prompt-text-border-color: $content-bg-color !default;
137235
137333
  }
137236
137334
  .e-tbar-btn {
137237
137335
  background: transparent;
137336
+ &:focus {
137337
+ box-shadow: none;
137338
+ }
137339
+ &:focus-visible {
137340
+ box-shadow: $tbar-header-btn-focus-box-shadow;
137341
+ @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') {
137342
+ background: $tbar-header-hover-bg-color;
137343
+ }
137344
+ }
137238
137345
  }
137239
137346
  }
137240
137347
  }
137241
- .e-views {
137242
- .e-prompt-icon,
137243
- .e-output-icon {
137244
- border: 1px solid $icon-border-color;
137245
- color: $user-logo-color;
137246
- background-color: $user-logo-bg-color;
137247
- }
137248
- .e-prompt-text {
137249
- background: $suggested-content-bg-color;
137348
+ .e-suggestion-header {
137349
+ color: $suggesstions-header-color;
137350
+ }
137351
+ .e-suggestions {
137352
+ li {
137250
137353
  color: $suggested-content-text-color;
137354
+ box-shadow: $suggestion-li-box-shadow;
137251
137355
  @if ($skin-name == 'bootstrap5.3') {
137252
137356
  border: none;
137253
137357
  }
137254
137358
  @else {
137255
- border: 1px solid $prompt-text-border-color;
137359
+ border: 1px solid $suggestion-li-border-color;
137256
137360
  }
137257
137361
  }
137362
+ }
137363
+ .e-prompt-icon,
137364
+ .e-output-icon {
137365
+ border: 1px solid $icon-border-color;
137366
+ color: $user-logo-color;
137367
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
137368
+ background: $user-logo-bg-color;
137369
+ }
137370
+ @else {
137371
+ background-color: $user-logo-bg-color;
137372
+ }
137373
+ }
137374
+ .e-prompt-text {
137375
+ background: $suggested-content-bg-color;
137376
+ color: $suggested-content-text-color;
137377
+ @if ($skin-name == 'bootstrap5.3') {
137378
+ border: none;
137379
+ }
137380
+ @else {
137381
+ border: 1px solid $prompt-text-border-color;
137382
+ }
137383
+ }
137384
+ .e-views {
137258
137385
  .e-content-body {
137259
137386
  color: $response-text-color;
137260
137387
  a {
@@ -137294,21 +137421,6 @@ $prompt-text-border-color: $content-bg-color !default;
137294
137421
  color: rgba(255, 212, 212, 1);
137295
137422
  }
137296
137423
  }
137297
- .e-suggestions {
137298
- .e-suggestion-header {
137299
- color: $suggesstions-header-color;
137300
- }
137301
- li {
137302
- color: $suggested-content-text-color;
137303
- box-shadow: $suggestion-li-box-shadow;
137304
- @if ($skin-name == 'bootstrap5.3') {
137305
- border: none;
137306
- }
137307
- @else {
137308
- border: 1px solid $suggestion-li-border-color;
137309
- }
137310
- }
137311
- }
137312
137424
  }
137313
137425
  .e-stop-response {
137314
137426
  border-color: $response-stopper-border-color;
@@ -137318,21 +137430,21 @@ $prompt-text-border-color: $content-bg-color !default;
137318
137430
  }
137319
137431
  .e-views,
137320
137432
  .e-custom-view,
137321
- .e-aiassist-view-content-section {
137433
+ .e-assistview-content-section {
137322
137434
  &::-webkit-scrollbar-thumb {
137323
137435
  background: $scrollbar-color;
137324
137436
  }
137325
137437
  }
137438
+ .e-assist-send {
137439
+ color: $send-icon-color;
137440
+ &.disabled {
137441
+ color: $send-icon-disabled-color;
137442
+ }
137443
+ }
137326
137444
  .e-footer {
137327
137445
  textarea::-webkit-scrollbar-thumb {
137328
137446
  background: $scrollbar-color;
137329
137447
  }
137330
- .e-assist-send {
137331
- color: $send-icon-color;
137332
- &.disabled {
137333
- color: $send-icon-disabled-color;
137334
- }
137335
- }
137336
137448
  // To override the default border style of the textarea component for the Material and Material3 themes.
137337
137449
  .e-input-group.e-multi-line-input {
137338
137450
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {