@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
@@ -3986,7 +3986,7 @@ $float-label-disbale-font-color: $input-disable-font-color !default;
3986
3986
  $input-placeholder-color: $placeholder-text-color !default;
3987
3987
  $input-group-disabled-color: $icon-color-disabled !default;
3988
3988
  $input-group-hovered-color: $icon-color-hover !default;
3989
- $input-readonly-bg-color: $content-bg-color-alt1 !default;
3989
+ $input-readonly-bg-color: none !default;
3990
3990
  $input-readonly-color: $cool-gray-600 !default;
3991
3991
  $input-icon-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
3992
3992
  $input-border-shadow: 0 0 0 3px rgba($primary, .25) !default;
@@ -34968,13 +34968,11 @@ $slider-tick-font-color: $content-text-color-alt1 !default;
34968
34968
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
34969
34969
  @include alignment(6px, calc(50% - 3px), 'vertical');
34970
34970
  }
34971
- @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' ) {
34972
- @if ($skin-name == 'tailwind') {
34973
- left: calc(50%);
34974
- }
34975
- @else {
34976
- @include alignment(4px, calc(50% - 2px), 'vertical');
34977
- }
34971
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
34972
+ @include alignment(4px, calc(50% - 2px), 'vertical');
34973
+ }
34974
+ @if ($skin-name == 'tailwind') {
34975
+ @include alignment(4px, calc(50%), 'vertical');
34978
34976
  }
34979
34977
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
34980
34978
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -39921,6 +39919,7 @@ $radio-btn-check-transition: none !default;
39921
39919
  $radio-btn-disabled-border-color: $border-light !default;
39922
39920
  $radio-btn-disabled-checked-border-color: transparent !default;
39923
39921
  $radio-btn-disabled-background-color: $primary-light !default;
39922
+ $radio-btn-disabled-not-checked-bg-color: transparent !default;
39924
39923
  $radio-btn-disabled-color: $content-text-color-disabled !default;
39925
39924
  $radio-btn-disabled-checked-color: $primary-text-color !default;
39926
39925
  $radio-btn-font-color: $content-text-color !default;
@@ -40732,7 +40731,7 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
40732
40731
  }
40733
40732
 
40734
40733
  &::before {
40735
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
40734
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
40736
40735
  background-color: $radio-btn-disabled-not-checked-bg-color;
40737
40736
  }
40738
40737
  @else {
@@ -42811,6 +42810,10 @@ $listview-template-multiline-content-color: $content-text-color-alt2 !default;
42811
42810
  }
42812
42811
  }
42813
42812
 
42813
+ &.e-virtualization .e-list-container{
42814
+ overflow: unset;
42815
+ }
42816
+
42814
42817
  & .e-list-container {
42815
42818
  overflow: hidden;
42816
42819
  position: relative;
@@ -65950,6 +65953,10 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
65950
65953
  display: block;
65951
65954
  }
65952
65955
 
65956
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
65957
+ margin-right: 30px;
65958
+ }
65959
+
65953
65960
  .e-multi-select-wrapper .e-multi-hidden {
65954
65961
  border: 0;
65955
65962
  height: 0;
@@ -82995,7 +83002,12 @@ $grid-checkmark-color: $primary-text-color !default;
82995
83002
  /* stylelint-enable */
82996
83003
 
82997
83004
  .e-dlg-content {
82998
- padding: 24px 27px;
83005
+ @if $grid-skin == 'fluent2' {
83006
+ padding: 24px 27px;
83007
+ }
83008
+ @else {
83009
+ padding: 8px 16px 8px 8px;
83010
+ }
82999
83011
  overflow-y: hidden;
83000
83012
  }
83001
83013
 
@@ -83850,7 +83862,7 @@ $grid-checkmark-color: $primary-text-color !default;
83850
83862
  }
83851
83863
 
83852
83864
  .e-grid-popup {
83853
- position: relative;
83865
+ position: absolute;
83854
83866
  }
83855
83867
 
83856
83868
  #{&}.e-grid,
@@ -86170,6 +86182,12 @@ $grid-checkmark-color: $primary-text-color !default;
86170
86182
  padding: $grid-columnchooser-toolbardiv-padding;
86171
86183
  }
86172
86184
 
86185
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
86186
+ @if $grid-skin == 'fluent' {
86187
+ padding-bottom: 1px;
86188
+ }
86189
+ }
86190
+
86173
86191
  .e-edit-dialog {
86174
86192
  min-height: 350px;
86175
86193
  .e-dlg-content {
@@ -86984,14 +87002,17 @@ $grid-checkmark-color: $primary-text-color !default;
86984
87002
  }
86985
87003
 
86986
87004
  &.e-wrap {
86987
- & .e-gridheader .e-rowcell,
86988
- & .e-gridcontent .e-rowcell,
87005
+ & .e-rowcell,
86989
87006
  & .e-columnheader .e-stackedheadercelldiv,
86990
87007
  & .e-columnheader .e-headercelldiv,
86991
87008
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
86992
87009
  @include wrap-styles;
86993
87010
  }
86994
87011
 
87012
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
87013
+ white-space: nowrap;
87014
+ }
87015
+
86995
87016
  & .e-stackedheader .e-columnheader {
86996
87017
  .e-stackedheadercelldiv,
86997
87018
  .e-headercelldiv {
@@ -87549,7 +87570,8 @@ $grid-checkmark-color: $primary-text-color !default;
87549
87570
  }
87550
87571
 
87551
87572
  @if $grid-skin == 'fluent2' {
87552
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
87573
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
87574
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
87553
87575
  padding: 0 6px;
87554
87576
  }
87555
87577
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -88463,7 +88485,8 @@ $grid-checkmark-color: $primary-text-color !default;
88463
88485
  }
88464
88486
 
88465
88487
  @if $grid-skin == 'fluent2' {
88466
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
88488
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
88489
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
88467
88490
  color: $flyout-text-color-hover;
88468
88491
  }
88469
88492
  }
@@ -136549,6 +136572,8 @@ $aiassist-header-height: 46px !default;
136549
136572
  $aiassist-icon-height: 30px !default;
136550
136573
  $aiassist-icon-width: 30px !default;
136551
136574
  $send-icon-size: 14px !default;
136575
+ $send-icon-bottom: 9px !default;
136576
+ $send-icon-bigger-bottom: 10px !default;
136552
136577
  $aiassist-bigger-header-height: 50px !default;
136553
136578
  $aiassist-bigger-icon-height: 40px !default;
136554
136579
  $aiassist-bigger-icon-width: 40px !default;
@@ -136589,63 +136614,86 @@ $rating-selected-bg-color: $rating-selected-color !default;
136589
136614
  $send-icon-color: $icon-color !default;
136590
136615
  $send-icon-disabled-color: $icon-color-disabled !default;
136591
136616
  $prompt-text-border-color: $content-bg-color !default;
136617
+ $tbar-header-btn-focus-box-shadow: $shadow-focus-ring1 !default;
136618
+ $tbar-header-hover-bg-color: transparent !default;
136592
136619
 
136593
136620
  @include export-module('aiassistview-bigger') {
136594
136621
  .e-bigger.e-aiassistview,
136595
136622
  .e-bigger .e-aiassistview {
136596
136623
  .e-view-header {
136597
136624
  height: $aiassist-bigger-header-height;
136625
+ .e-toolbar {
136626
+ .e-toolbar-items {
136627
+ .e-toolbar-left {
136628
+ height: calc($aiassist-bigger-header-height - 1px);
136629
+ }
136630
+ .e-toolbar-item {
136631
+ &.e-assist-view-header,
136632
+ &.e-custom-view-header {
136633
+ @if ($skin-name == 'highcontrast') {
136634
+ // To apply box-shadow styling during keyboard navigation
136635
+ padding: 1.5px;
136636
+ }
136637
+ @else {
136638
+ padding: 0;
136639
+ }
136640
+ .e-tbar-btn {
136641
+ padding: 0;
136642
+ .e-btn-icon {
136643
+ padding: 4px 4px 4px 2px;
136644
+ }
136645
+ }
136646
+ }
136647
+ }
136648
+ }
136649
+ }
136598
136650
  }
136599
136651
  .e-view-content {
136600
136652
  height: calc(100% - $aiassist-bigger-header-height);
136601
136653
  }
136602
- .e-views {
136603
- .e-prompt-icon {
136604
- min-height: $aiassist-bigger-icon-height;
136605
- }
136606
- .e-output-icon {
136607
- height: $aiassist-bigger-icon-height;
136608
- }
136609
- .e-prompt-icon,
136610
- .e-output-icon {
136611
- min-width: $aiassist-bigger-icon-width;
136612
- }
136613
- .e-loading-body,
136614
- .e-content-body,
136615
- .e-loading-footer {
136616
- padding: 2px 0 0 10px;
136617
- }
136618
- .e-content-container {
136619
- font-size: 16px;
136620
- .e-prompt-text {
136621
- padding: $prompt-text-bigger-padding;
136622
- line-height: 22px;
136623
- }
136654
+ .e-prompt-icon {
136655
+ min-height: $aiassist-bigger-icon-height;
136656
+ }
136657
+ .e-output-icon {
136658
+ height: $aiassist-bigger-icon-height;
136659
+ }
136660
+ .e-prompt-icon,
136661
+ .e-output-icon {
136662
+ min-width: $aiassist-bigger-icon-width;
136663
+ }
136664
+ .e-loading-body,
136665
+ .e-content-body,
136666
+ .e-loading-footer {
136667
+ padding: 6px 0 0 6px;
136668
+ }
136669
+ .e-prompt-text {
136670
+ padding: $prompt-text-bigger-padding;
136671
+ line-height: 22px;
136672
+ }
136673
+ .e-content-container {
136674
+ font-size: 16px;
136675
+ }
136676
+ .e-suggestion-header {
136677
+ font-size: 16px;
136678
+ font-weight: $suggesstions-header-bigger-font-weight;
136679
+ margin-bottom: 15px;
136680
+ }
136681
+ .e-suggestions {
136682
+ &.e-suggestion-item-template ul li {
136683
+ padding: 0;
136624
136684
  }
136625
- .e-suggestions {
136626
- &.e-suggestion-item-template ul li {
136627
- padding: 0;
136628
- }
136629
- .e-suggestion-header {
136630
- font-size: 16px;
136631
- font-weight: $suggesstions-header-bigger-font-weight;
136632
- margin-bottom: 15px;
136633
- }
136634
- ul {
136635
- li {
136636
- line-height: 22px;
136637
- font-weight: $suggesstions-bigger-font-weight;
136638
- padding: $suggesstions-bigger-list-padding;
136639
- margin: $suggesstions-bigger-list-margin;
136640
- }
136641
- }
136685
+ li {
136686
+ line-height: 22px;
136687
+ font-weight: $suggesstions-bigger-font-weight;
136688
+ padding: $suggesstions-bigger-list-padding;
136689
+ margin: $suggesstions-bigger-list-margin;
136642
136690
  }
136643
136691
  }
136692
+ .e-assist-send {
136693
+ font-size: $send-icon-size-bigger;
136694
+ bottom: $send-icon-bigger-bottom;
136695
+ }
136644
136696
  .e-footer {
136645
- .e-assist-send {
136646
- font-size: $send-icon-size-bigger;
136647
- bottom: 9px;
136648
- }
136649
136697
  .e-input-group.e-control-wrapper.e-multi-line-input {
136650
136698
  .e-textarea {
136651
136699
  min-height: 38px;
@@ -136654,6 +136702,11 @@ $prompt-text-border-color: $content-bg-color !default;
136654
136702
  min-height: 28px;
136655
136703
  }
136656
136704
  }
136705
+ &.e-rtl .e-textarea {
136706
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136707
+ padding: 6px 16px 6px 12px;
136708
+ }
136709
+ }
136657
136710
  }
136658
136711
  }
136659
136712
  .e-stop-response.e-btn-active {
@@ -136665,13 +136718,24 @@ $prompt-text-border-color: $content-bg-color !default;
136665
136718
  font-size: $response-stopper-bigger-font-size;
136666
136719
  }
136667
136720
  &.e-rtl {
136668
- .e-views {
136669
- .e-suggestions {
136670
- li {
136671
- margin: $suggesstions-bigger-list-margin-rtl;
136721
+ .e-view-header .e-toolbar-item {
136722
+ &.e-assist-view-header,
136723
+ &.e-custom-view-header {
136724
+ .e-tbar-btn .e-btn-icon {
136725
+ padding: 4px 2px 4px 4px;
136672
136726
  }
136673
136727
  }
136674
136728
  }
136729
+ .e-suggestions {
136730
+ li {
136731
+ margin: $suggesstions-bigger-list-margin-rtl;
136732
+ }
136733
+ }
136734
+ .e-loading-body,
136735
+ .e-content-body,
136736
+ .e-loading-footer {
136737
+ padding: 6px 6px 0 0;
136738
+ }
136675
136739
  }
136676
136740
  }
136677
136741
  }
@@ -136699,14 +136763,29 @@ $prompt-text-border-color: $content-bg-color !default;
136699
136763
  width: 100%;
136700
136764
  border-radius: 4px;
136701
136765
  }
136702
- .e-tbar-btn {
136703
- padding: 0;
136766
+ &.e-assist-view-header,
136767
+ &.e-custom-view-header {
136768
+ @if ($skin-name == 'highcontrast') {
136769
+ // To apply box-shadow styling during keyboard navigation
136770
+ padding: 1px;
136771
+ }
136772
+ @else {
136773
+ padding: 0;
136774
+ }
136775
+ .e-tbar-btn {
136776
+ padding: 0;
136777
+ .e-btn-icon {
136778
+ padding: 4px 4px 4px 2px;
136779
+ }
136780
+ }
136781
+ }
136782
+ &.e-active .e-btn {
136783
+ cursor: pointer;
136704
136784
  }
136705
136785
  }
136706
- }
136707
- .e-view-header .e-toolbar-item.e-active .e-btn {
136708
- border-radius: 0;
136709
- cursor: pointer;
136786
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
136787
+ height: calc($aiassist-header-height - 1px);
136788
+ }
136710
136789
  }
136711
136790
  .e-view-container,
136712
136791
  .e-footer {
@@ -136756,36 +136835,94 @@ $prompt-text-border-color: $content-bg-color !default;
136756
136835
  }
136757
136836
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
136758
136837
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
136759
- @if $theme-name == 'highcontrast' {
136760
- padding: 6px 0 6px 5px;
136761
- }
136762
- @else {
136763
- padding: 6px 0 6px 2px;
136764
- }
136838
+ padding: 6px 2px;
136765
136839
  }
136766
136840
  }
136767
- .e-views {
136841
+ .e-output-container {
136842
+ width: 90%;
136768
136843
  display: flex;
136769
- justify-content: space-around;
136770
- .e-output-container {
136771
- width: 90%;
136772
- display: flex;
136773
- align-self: flex-start;
136774
- margin: 10px 0;
136844
+ align-self: flex-start;
136845
+ margin: 10px 0;
136846
+ }
136847
+ .e-prompt-icon {
136848
+ margin: 0 0 0 8px;
136849
+ min-height: $aiassist-icon-height;
136850
+ }
136851
+ .e-output-icon {
136852
+ height: $aiassist-icon-height;
136853
+ margin: 0 4px 0 8px;
136854
+ }
136855
+ .e-prompt-icon,
136856
+ .e-output-icon {
136857
+ border-radius: 50%;
136858
+ min-width: $aiassist-icon-width;
136859
+ }
136860
+ .e-loading-body,
136861
+ .e-content-body,
136862
+ .e-loading-footer {
136863
+ padding: 2px 0 0 6px;
136864
+ }
136865
+ .e-content-container {
136866
+ margin-top: 16px;
136867
+ font-size: 14px;
136868
+ justify-content: space-between;
136869
+ }
136870
+ .e-prompt-text {
136871
+ white-space: pre-wrap;
136872
+ height: fit-content;
136873
+ border-radius: $prompt-text-border-radius;
136874
+ padding: $prompt-text-padding;
136875
+ line-height: 20px;
136876
+ }
136877
+ .e-content-footer,
136878
+ .e-prompt-toolbar {
136879
+ opacity: 0;
136880
+ }
136881
+ .e-prompt-container {
136882
+ gap: 2px;
136883
+ align-self: flex-end;
136884
+ max-width: 70%;
136885
+ margin-bottom: 5px;
136886
+ flex-direction: column;
136887
+ &:hover .e-assist-edit-icon {
136888
+ opacity: 1;
136889
+ cursor: pointer;
136775
136890
  }
136776
- .e-prompt-icon {
136777
- margin: 0 8px;
136778
- min-height: $aiassist-icon-height;
136891
+ }
136892
+ .e-suggestion-header {
136893
+ font-size: 14px;
136894
+ font-weight: $suggesstions-header-font-weight;
136895
+ margin: 0 2px 8px 8px;
136896
+ text-align: right;
136897
+ }
136898
+ .e-suggestions {
136899
+ width: 100%;
136900
+ &.e-suggestion-item-template li {
136901
+ padding: 0;
136779
136902
  }
136780
- .e-output-icon {
136781
- height: $aiassist-icon-height;
136782
- margin-left: 10px;
136903
+ ul {
136904
+ list-style-type: none;
136905
+ padding: 0;
136906
+ margin: 0;
136907
+ display: flex;
136908
+ flex-wrap: wrap;
136909
+ justify-content: end;
136783
136910
  }
136784
- .e-prompt-icon,
136785
- .e-output-icon {
136786
- border-radius: 50%;
136787
- min-width: $aiassist-icon-width;
136911
+ li {
136912
+ line-height: 20px;
136913
+ font-weight: $suggesstions-font-weight;
136914
+ padding: $suggesstions-list-padding;
136915
+ margin: $suggesstions-list-margin;
136916
+ border-radius: $suggesstions-list-border-radius;
136917
+ cursor: pointer;
136918
+ white-space: nowrap;
136919
+ overflow: hidden;
136920
+ text-overflow: ellipsis;
136788
136921
  }
136922
+ }
136923
+ .e-views {
136924
+ display: flex;
136925
+ justify-content: space-around;
136789
136926
  .e-content-body {
136790
136927
  line-height: 25px;
136791
136928
  border-radius: 4px;
@@ -136871,85 +137008,36 @@ $prompt-text-border-color: $content-bg-color !default;
136871
137008
  .e-content-body > *:first-child {
136872
137009
  margin-block-start: 0;
136873
137010
  }
136874
- .e-loading-body,
136875
- .e-content-body,
136876
- .e-loading-footer {
136877
- padding: 2px 0 0 8px;
136878
- }
136879
- .e-content-footer,
136880
- .e-prompt-toolbar {
136881
- opacity: 0;
136882
- }
136883
- .e-content-container {
136884
- margin-top: 16px;
136885
- font-size: 14px;
136886
- justify-content: space-between;
136887
- .e-prompt-text {
136888
- white-space: pre-wrap;
136889
- height: fit-content;
136890
- border-radius: $prompt-text-border-radius;
136891
- padding: $prompt-text-padding;
136892
- margin-right: 2px;
136893
- line-height: 20px;
136894
- }
136895
- }
136896
- .e-suggestions {
136897
- width: 100%;
136898
- &.e-suggestion-item-template li {
136899
- padding: 0;
136900
- }
136901
- .e-suggestion-header {
136902
- font-size: 14px;
136903
- font-weight: $suggesstions-header-font-weight;
136904
- margin: 0 2px 8px 8px;
136905
- text-align: right;
136906
- }
136907
- ul {
136908
- list-style-type: none;
136909
- padding: 0;
136910
- margin: 0;
136911
- display: flex;
136912
- flex-wrap: wrap;
136913
- justify-content: end;
136914
- }
136915
- li {
136916
- line-height: 20px;
136917
- font-weight: $suggesstions-font-weight;
136918
- padding: $suggesstions-list-padding;
136919
- margin: $suggesstions-list-margin;
136920
- border-radius: $suggesstions-list-border-radius;
136921
- cursor: pointer;
136922
- white-space: nowrap;
136923
- overflow: hidden;
136924
- text-overflow: ellipsis;
136925
- }
136926
- }
136927
- .e-prompt-container {
136928
- gap: 2px;
136929
- align-self: flex-end;
136930
- max-width: 70%;
136931
- margin-bottom: 5px;
136932
- flex-direction: column;
136933
- &:hover .e-assist-edit-icon {
136934
- opacity: 1;
136935
- cursor: pointer;
136936
- }
136937
- }
136938
137011
  }
136939
137012
  .e-views,
136940
137013
  .e-custom-view,
136941
- .e-aiassist-view-content-section {
137014
+ .e-assistview-content-section {
136942
137015
  height: 100%;
136943
- overflow-y: scroll;
137016
+ overflow: scroll;
136944
137017
  &::-webkit-scrollbar {
136945
137018
  width: $ai-assist-scrollbar-width;
137019
+ height: $ai-assist-scrollbar-width;
136946
137020
  }
136947
137021
  &::-webkit-scrollbar-thumb {
136948
137022
  border-radius: 10px;
136949
137023
  }
136950
137024
  }
136951
- .e-content {
136952
- margin-right: 8px;
137025
+ .e-assist-send {
137026
+ position: absolute;
137027
+ right: 20px;
137028
+ font-size: $send-icon-size;
137029
+ bottom: $send-icon-bottom;
137030
+ padding-top: 2px;
137031
+ }
137032
+ .e-assist-send.disabled {
137033
+ pointer-events: none;
137034
+ opacity: .5;
137035
+ cursor: not-allowed;
137036
+ }
137037
+ .e-assist-send.enabled {
137038
+ pointer-events: auto;
137039
+ opacity: 1;
137040
+ cursor: pointer;
136953
137041
  }
136954
137042
  .e-footer {
136955
137043
  position: relative;
@@ -136968,23 +137056,6 @@ $prompt-text-border-color: $content-bg-color !default;
136968
137056
  .hide-scrollbar textarea {
136969
137057
  scrollbar-width: none;
136970
137058
  }
136971
- .e-assist-send {
136972
- position: absolute;
136973
- right: 20px;
136974
- font-size: $send-icon-size;
136975
- bottom: 8px;
136976
- padding-top: 2px;
136977
- }
136978
- .e-assist-send.disabled {
136979
- pointer-events: none;
136980
- opacity: .5;
136981
- cursor: not-allowed;
136982
- }
136983
- .e-assist-send.enabled {
136984
- pointer-events: auto;
136985
- opacity: 1;
136986
- cursor: pointer;
136987
- }
136988
137059
  &:has(.e-rtl) .e-assist-send {
136989
137060
  right: unset;
136990
137061
  left: 20px;
@@ -136996,6 +137067,13 @@ $prompt-text-border-color: $content-bg-color !default;
136996
137067
  .e-multi-line-input.e-rtl {
136997
137068
  padding-left: 35px;
136998
137069
  padding-right: unset;
137070
+ &.e-input-group.e-control-wrapper {
137071
+ .e-textarea {
137072
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
137073
+ padding: 4px 12px 4px 8px;
137074
+ }
137075
+ }
137076
+ }
136999
137077
  }
137000
137078
  .e-input-group.e-multi-line-input {
137001
137079
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -137077,16 +137155,24 @@ $prompt-text-border-color: $content-bg-color !default;
137077
137155
  outline: 1px solid;
137078
137156
  }
137079
137157
  &.e-rtl {
137080
- .e-views {
137081
- .e-suggestions {
137082
- .e-suggestion-header {
137083
- text-align: left;
137084
- margin: 0 8px 8px 2px;
137085
- }
137086
- li {
137087
- margin: $suggesstions-list-margin-rtl;
137158
+ .e-view-header .e-toolbar-item {
137159
+ &.e-assist-view-header,
137160
+ &.e-custom-view-header {
137161
+ .e-tbar-btn .e-btn-icon {
137162
+ padding: 4px 2px 4px 4px;
137088
137163
  }
137089
137164
  }
137165
+ }
137166
+ .e-suggestion-header {
137167
+ text-align: left;
137168
+ margin: 0 8px 8px 2px;
137169
+ }
137170
+ .e-suggestions {
137171
+ li {
137172
+ margin: $suggesstions-list-margin-rtl;
137173
+ }
137174
+ }
137175
+ .e-views {
137090
137176
  .e-content-body {
137091
137177
  blockquote {
137092
137178
  padding-left: unset;
@@ -137101,6 +137187,17 @@ $prompt-text-border-color: $content-bg-color !default;
137101
137187
  }
137102
137188
  }
137103
137189
  }
137190
+ .e-loading-body,
137191
+ .e-content-body,
137192
+ .e-loading-footer {
137193
+ padding: 2px 6px 0 0;
137194
+ }
137195
+ .e-prompt-icon {
137196
+ margin: 0 8px 0 0;
137197
+ }
137198
+ .e-output-icon {
137199
+ margin: 0 8px 0 4px;
137200
+ }
137104
137201
  }
137105
137202
  }
137106
137203
  @media (max-width: 760px) {
@@ -137109,12 +137206,14 @@ $prompt-text-border-color: $content-bg-color !default;
137109
137206
  .e-footer {
137110
137207
  width: 100%;
137111
137208
  }
137112
- .e-view-container .e-suggestions {
137209
+ .e-view-container .e-suggestions,
137210
+ .e-prompt-content {
137113
137211
  padding-right: 8px;
137114
137212
  }
137115
137213
  &.e-rtl {
137116
- .e-view-container .e-suggestions {
137117
- padding-left: 8px;
137214
+ .e-view-container .e-suggestions,
137215
+ .e-prompt-content {
137216
+ padding: 0 0 0 8px;
137118
137217
  }
137119
137218
  }
137120
137219
  }
@@ -137152,26 +137251,55 @@ $prompt-text-border-color: $content-bg-color !default;
137152
137251
  }
137153
137252
  .e-tbar-btn {
137154
137253
  background: transparent;
137254
+ &:focus {
137255
+ box-shadow: none;
137256
+ }
137257
+ &:focus-visible {
137258
+ box-shadow: $tbar-header-btn-focus-box-shadow;
137259
+ @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') {
137260
+ background: $tbar-header-hover-bg-color;
137261
+ }
137262
+ }
137155
137263
  }
137156
137264
  }
137157
137265
  }
137158
- .e-views {
137159
- .e-prompt-icon,
137160
- .e-output-icon {
137161
- border: 1px solid $icon-border-color;
137162
- color: $user-logo-color;
137163
- background-color: $user-logo-bg-color;
137164
- }
137165
- .e-prompt-text {
137166
- background: $suggested-content-bg-color;
137266
+ .e-suggestion-header {
137267
+ color: $suggesstions-header-color;
137268
+ }
137269
+ .e-suggestions {
137270
+ li {
137167
137271
  color: $suggested-content-text-color;
137272
+ box-shadow: $suggestion-li-box-shadow;
137168
137273
  @if ($skin-name == 'bootstrap5.3') {
137169
137274
  border: none;
137170
137275
  }
137171
137276
  @else {
137172
- border: 1px solid $prompt-text-border-color;
137277
+ border: 1px solid $suggestion-li-border-color;
137173
137278
  }
137174
137279
  }
137280
+ }
137281
+ .e-prompt-icon,
137282
+ .e-output-icon {
137283
+ border: 1px solid $icon-border-color;
137284
+ color: $user-logo-color;
137285
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
137286
+ background: $user-logo-bg-color;
137287
+ }
137288
+ @else {
137289
+ background-color: $user-logo-bg-color;
137290
+ }
137291
+ }
137292
+ .e-prompt-text {
137293
+ background: $suggested-content-bg-color;
137294
+ color: $suggested-content-text-color;
137295
+ @if ($skin-name == 'bootstrap5.3') {
137296
+ border: none;
137297
+ }
137298
+ @else {
137299
+ border: 1px solid $prompt-text-border-color;
137300
+ }
137301
+ }
137302
+ .e-views {
137175
137303
  .e-content-body {
137176
137304
  color: $response-text-color;
137177
137305
  a {
@@ -137211,21 +137339,6 @@ $prompt-text-border-color: $content-bg-color !default;
137211
137339
  color: rgba(255, 212, 212, 1);
137212
137340
  }
137213
137341
  }
137214
- .e-suggestions {
137215
- .e-suggestion-header {
137216
- color: $suggesstions-header-color;
137217
- }
137218
- li {
137219
- color: $suggested-content-text-color;
137220
- box-shadow: $suggestion-li-box-shadow;
137221
- @if ($skin-name == 'bootstrap5.3') {
137222
- border: none;
137223
- }
137224
- @else {
137225
- border: 1px solid $suggestion-li-border-color;
137226
- }
137227
- }
137228
- }
137229
137342
  }
137230
137343
  .e-stop-response {
137231
137344
  border-color: $response-stopper-border-color;
@@ -137235,21 +137348,21 @@ $prompt-text-border-color: $content-bg-color !default;
137235
137348
  }
137236
137349
  .e-views,
137237
137350
  .e-custom-view,
137238
- .e-aiassist-view-content-section {
137351
+ .e-assistview-content-section {
137239
137352
  &::-webkit-scrollbar-thumb {
137240
137353
  background: $scrollbar-color;
137241
137354
  }
137242
137355
  }
137356
+ .e-assist-send {
137357
+ color: $send-icon-color;
137358
+ &.disabled {
137359
+ color: $send-icon-disabled-color;
137360
+ }
137361
+ }
137243
137362
  .e-footer {
137244
137363
  textarea::-webkit-scrollbar-thumb {
137245
137364
  background: $scrollbar-color;
137246
137365
  }
137247
- .e-assist-send {
137248
- color: $send-icon-color;
137249
- &.disabled {
137250
- color: $send-icon-disabled-color;
137251
- }
137252
- }
137253
137366
  // To override the default border style of the textarea component for the Material and Material3 themes.
137254
137367
  .e-input-group.e-multi-line-input {
137255
137368
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {