@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
@@ -34850,13 +34850,11 @@ $slider-limit-bar-color: rgba($bg-base-0, .25) !default;
34850
34850
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
34851
34851
  @include alignment(6px, calc(50% - 3px), 'vertical');
34852
34852
  }
34853
- @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' ) {
34854
- @if ($skin-name == 'tailwind') {
34855
- left: calc(50%);
34856
- }
34857
- @else {
34858
- @include alignment(4px, calc(50% - 2px), 'vertical');
34859
- }
34853
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
34854
+ @include alignment(4px, calc(50% - 2px), 'vertical');
34855
+ }
34856
+ @if ($skin-name == 'tailwind') {
34857
+ @include alignment(4px, calc(50%), 'vertical');
34860
34858
  }
34861
34859
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
34862
34860
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -40588,7 +40586,7 @@ $radio-btn-checked-ripple-bgcolor: #ff4081 !default;
40588
40586
  }
40589
40587
 
40590
40588
  &::before {
40591
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
40589
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
40592
40590
  background-color: $radio-btn-disabled-not-checked-bg-color;
40593
40591
  }
40594
40592
  @else {
@@ -42657,6 +42655,10 @@ $listview-template-multiline-avatar-top: .6153em !default;
42657
42655
  }
42658
42656
  }
42659
42657
 
42658
+ &.e-virtualization .e-list-container{
42659
+ overflow: unset;
42660
+ }
42661
+
42660
42662
  & .e-list-container {
42661
42663
  overflow: hidden;
42662
42664
  position: relative;
@@ -65808,6 +65810,10 @@ $ddl-closer-margin-top-bigger-small: -3.4em !default;
65808
65810
  display: block;
65809
65811
  }
65810
65812
 
65813
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
65814
+ margin-right: 30px;
65815
+ }
65816
+
65811
65817
  .e-multi-select-wrapper .e-multi-hidden {
65812
65818
  border: 0;
65813
65819
  height: 0;
@@ -82749,7 +82755,12 @@ $grid-checkmark-color: $selection-font !default;
82749
82755
  /* stylelint-enable */
82750
82756
 
82751
82757
  .e-dlg-content {
82752
- padding: 24px 27px;
82758
+ @if $grid-skin == 'fluent2' {
82759
+ padding: 24px 27px;
82760
+ }
82761
+ @else {
82762
+ padding: 8px 16px 8px 8px;
82763
+ }
82753
82764
  overflow-y: hidden;
82754
82765
  }
82755
82766
 
@@ -83604,7 +83615,7 @@ $grid-checkmark-color: $selection-font !default;
83604
83615
  }
83605
83616
 
83606
83617
  .e-grid-popup {
83607
- position: relative;
83618
+ position: absolute;
83608
83619
  }
83609
83620
 
83610
83621
  #{&}.e-grid,
@@ -85924,6 +85935,12 @@ $grid-checkmark-color: $selection-font !default;
85924
85935
  padding: $grid-columnchooser-toolbardiv-padding;
85925
85936
  }
85926
85937
 
85938
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
85939
+ @if $grid-skin == 'fluent' {
85940
+ padding-bottom: 1px;
85941
+ }
85942
+ }
85943
+
85927
85944
  .e-edit-dialog {
85928
85945
  min-height: 350px;
85929
85946
  .e-dlg-content {
@@ -86738,14 +86755,17 @@ $grid-checkmark-color: $selection-font !default;
86738
86755
  }
86739
86756
 
86740
86757
  &.e-wrap {
86741
- & .e-gridheader .e-rowcell,
86742
- & .e-gridcontent .e-rowcell,
86758
+ & .e-rowcell,
86743
86759
  & .e-columnheader .e-stackedheadercelldiv,
86744
86760
  & .e-columnheader .e-headercelldiv,
86745
86761
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
86746
86762
  @include wrap-styles;
86747
86763
  }
86748
86764
 
86765
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
86766
+ white-space: nowrap;
86767
+ }
86768
+
86749
86769
  & .e-stackedheader .e-columnheader {
86750
86770
  .e-stackedheadercelldiv,
86751
86771
  .e-headercelldiv {
@@ -87303,7 +87323,8 @@ $grid-checkmark-color: $selection-font !default;
87303
87323
  }
87304
87324
 
87305
87325
  @if $grid-skin == 'fluent2' {
87306
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
87326
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
87327
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
87307
87328
  padding: 0 6px;
87308
87329
  }
87309
87330
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -88217,7 +88238,8 @@ $grid-checkmark-color: $selection-font !default;
88217
88238
  }
88218
88239
 
88219
88240
  @if $grid-skin == 'fluent2' {
88220
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
88241
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
88242
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
88221
88243
  color: $flyout-text-color-hover;
88222
88244
  }
88223
88245
  }
@@ -136294,7 +136316,9 @@ $aiassist-header-height: 46px !default;
136294
136316
  $aiassist-icon-height: 30px !default;
136295
136317
  $aiassist-icon-width: 30px !default;
136296
136318
  $send-icon-size: 14px !default;
136297
- $aiassist-bigger-header-height: 50px !default;
136319
+ $send-icon-bottom: 8px !default;
136320
+ $send-icon-bigger-bottom: 11px !default;
136321
+ $aiassist-bigger-header-height: 56px !default;
136298
136322
  $aiassist-bigger-icon-height: 40px !default;
136299
136323
  $aiassist-bigger-icon-width: 40px !default;
136300
136324
  $send-icon-size-bigger: 18px !default;
@@ -136334,63 +136358,86 @@ $rating-selected-bg-color: $content-font !default;
136334
136358
  $send-icon-color: $content-font !default;
136335
136359
  $send-icon-disabled-color: $send-icon-color !default;
136336
136360
  $prompt-text-border-color: $border-default !default;
136361
+ $tbar-header-btn-focus-box-shadow: 0 0 0 2px $bg-base-100 !default;
136362
+ $tbar-header-hover-bg-color: transparent !default;
136337
136363
 
136338
136364
  @include export-module('aiassistview-bigger') {
136339
136365
  .e-bigger.e-aiassistview,
136340
136366
  .e-bigger .e-aiassistview {
136341
136367
  .e-view-header {
136342
136368
  height: $aiassist-bigger-header-height;
136369
+ .e-toolbar {
136370
+ .e-toolbar-items {
136371
+ .e-toolbar-left {
136372
+ height: calc($aiassist-bigger-header-height - 1px);
136373
+ }
136374
+ .e-toolbar-item {
136375
+ &.e-assist-view-header,
136376
+ &.e-custom-view-header {
136377
+ @if ($skin-name == 'highcontrast') {
136378
+ // To apply box-shadow styling during keyboard navigation
136379
+ padding: 1.5px;
136380
+ }
136381
+ @else {
136382
+ padding: 0;
136383
+ }
136384
+ .e-tbar-btn {
136385
+ padding: 0;
136386
+ .e-btn-icon {
136387
+ padding: 4px 4px 4px 2px;
136388
+ }
136389
+ }
136390
+ }
136391
+ }
136392
+ }
136393
+ }
136343
136394
  }
136344
136395
  .e-view-content {
136345
136396
  height: calc(100% - $aiassist-bigger-header-height);
136346
136397
  }
136347
- .e-views {
136348
- .e-prompt-icon {
136349
- min-height: $aiassist-bigger-icon-height;
136350
- }
136351
- .e-output-icon {
136352
- height: $aiassist-bigger-icon-height;
136353
- }
136354
- .e-prompt-icon,
136355
- .e-output-icon {
136356
- min-width: $aiassist-bigger-icon-width;
136357
- }
136358
- .e-loading-body,
136359
- .e-content-body,
136360
- .e-loading-footer {
136361
- padding: 2px 0 0 10px;
136362
- }
136363
- .e-content-container {
136364
- font-size: 16px;
136365
- .e-prompt-text {
136366
- padding: $prompt-text-bigger-padding;
136367
- line-height: 22px;
136368
- }
136398
+ .e-prompt-icon {
136399
+ min-height: $aiassist-bigger-icon-height;
136400
+ }
136401
+ .e-output-icon {
136402
+ height: $aiassist-bigger-icon-height;
136403
+ }
136404
+ .e-prompt-icon,
136405
+ .e-output-icon {
136406
+ min-width: $aiassist-bigger-icon-width;
136407
+ }
136408
+ .e-loading-body,
136409
+ .e-content-body,
136410
+ .e-loading-footer {
136411
+ padding: 6px 0 0 6px;
136412
+ }
136413
+ .e-prompt-text {
136414
+ padding: $prompt-text-bigger-padding;
136415
+ line-height: 22px;
136416
+ }
136417
+ .e-content-container {
136418
+ font-size: 16px;
136419
+ }
136420
+ .e-suggestion-header {
136421
+ font-size: 16px;
136422
+ font-weight: $suggesstions-header-bigger-font-weight;
136423
+ margin-bottom: 15px;
136424
+ }
136425
+ .e-suggestions {
136426
+ &.e-suggestion-item-template ul li {
136427
+ padding: 0;
136369
136428
  }
136370
- .e-suggestions {
136371
- &.e-suggestion-item-template ul li {
136372
- padding: 0;
136373
- }
136374
- .e-suggestion-header {
136375
- font-size: 16px;
136376
- font-weight: $suggesstions-header-bigger-font-weight;
136377
- margin-bottom: 15px;
136378
- }
136379
- ul {
136380
- li {
136381
- line-height: 22px;
136382
- font-weight: $suggesstions-bigger-font-weight;
136383
- padding: $suggesstions-bigger-list-padding;
136384
- margin: $suggesstions-bigger-list-margin;
136385
- }
136386
- }
136429
+ li {
136430
+ line-height: 22px;
136431
+ font-weight: $suggesstions-bigger-font-weight;
136432
+ padding: $suggesstions-bigger-list-padding;
136433
+ margin: $suggesstions-bigger-list-margin;
136387
136434
  }
136388
136435
  }
136436
+ .e-assist-send {
136437
+ font-size: $send-icon-size-bigger;
136438
+ bottom: $send-icon-bigger-bottom;
136439
+ }
136389
136440
  .e-footer {
136390
- .e-assist-send {
136391
- font-size: $send-icon-size-bigger;
136392
- bottom: 9px;
136393
- }
136394
136441
  .e-input-group.e-control-wrapper.e-multi-line-input {
136395
136442
  .e-textarea {
136396
136443
  min-height: 38px;
@@ -136399,6 +136446,11 @@ $prompt-text-border-color: $border-default !default;
136399
136446
  min-height: 28px;
136400
136447
  }
136401
136448
  }
136449
+ &.e-rtl .e-textarea {
136450
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136451
+ padding: 6px 16px 6px 12px;
136452
+ }
136453
+ }
136402
136454
  }
136403
136455
  }
136404
136456
  .e-stop-response.e-btn-active {
@@ -136410,13 +136462,24 @@ $prompt-text-border-color: $border-default !default;
136410
136462
  font-size: $response-stopper-bigger-font-size;
136411
136463
  }
136412
136464
  &.e-rtl {
136413
- .e-views {
136414
- .e-suggestions {
136415
- li {
136416
- margin: $suggesstions-bigger-list-margin-rtl;
136465
+ .e-view-header .e-toolbar-item {
136466
+ &.e-assist-view-header,
136467
+ &.e-custom-view-header {
136468
+ .e-tbar-btn .e-btn-icon {
136469
+ padding: 4px 2px 4px 4px;
136417
136470
  }
136418
136471
  }
136419
136472
  }
136473
+ .e-suggestions {
136474
+ li {
136475
+ margin: $suggesstions-bigger-list-margin-rtl;
136476
+ }
136477
+ }
136478
+ .e-loading-body,
136479
+ .e-content-body,
136480
+ .e-loading-footer {
136481
+ padding: 6px 6px 0 0;
136482
+ }
136420
136483
  }
136421
136484
  }
136422
136485
  }
@@ -136444,14 +136507,29 @@ $prompt-text-border-color: $border-default !default;
136444
136507
  width: 100%;
136445
136508
  border-radius: 4px;
136446
136509
  }
136447
- .e-tbar-btn {
136448
- padding: 0;
136510
+ &.e-assist-view-header,
136511
+ &.e-custom-view-header {
136512
+ @if ($skin-name == 'highcontrast') {
136513
+ // To apply box-shadow styling during keyboard navigation
136514
+ padding: 1px;
136515
+ }
136516
+ @else {
136517
+ padding: 0;
136518
+ }
136519
+ .e-tbar-btn {
136520
+ padding: 0;
136521
+ .e-btn-icon {
136522
+ padding: 4px 4px 4px 2px;
136523
+ }
136524
+ }
136525
+ }
136526
+ &.e-active .e-btn {
136527
+ cursor: pointer;
136449
136528
  }
136450
136529
  }
136451
- }
136452
- .e-view-header .e-toolbar-item.e-active .e-btn {
136453
- border-radius: 0;
136454
- cursor: pointer;
136530
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
136531
+ height: calc($aiassist-header-height - 1px);
136532
+ }
136455
136533
  }
136456
136534
  .e-view-container,
136457
136535
  .e-footer {
@@ -136501,36 +136579,94 @@ $prompt-text-border-color: $border-default !default;
136501
136579
  }
136502
136580
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
136503
136581
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
136504
- @if $theme-name == 'highcontrast' {
136505
- padding: 6px 0 6px 5px;
136506
- }
136507
- @else {
136508
- padding: 6px 0 6px 2px;
136509
- }
136582
+ padding: 6px 2px;
136510
136583
  }
136511
136584
  }
136512
- .e-views {
136585
+ .e-output-container {
136586
+ width: 90%;
136513
136587
  display: flex;
136514
- justify-content: space-around;
136515
- .e-output-container {
136516
- width: 90%;
136517
- display: flex;
136518
- align-self: flex-start;
136519
- margin: 10px 0;
136588
+ align-self: flex-start;
136589
+ margin: 10px 0;
136590
+ }
136591
+ .e-prompt-icon {
136592
+ margin: 0 0 0 8px;
136593
+ min-height: $aiassist-icon-height;
136594
+ }
136595
+ .e-output-icon {
136596
+ height: $aiassist-icon-height;
136597
+ margin: 0 4px 0 8px;
136598
+ }
136599
+ .e-prompt-icon,
136600
+ .e-output-icon {
136601
+ border-radius: 50%;
136602
+ min-width: $aiassist-icon-width;
136603
+ }
136604
+ .e-loading-body,
136605
+ .e-content-body,
136606
+ .e-loading-footer {
136607
+ padding: 2px 0 0 6px;
136608
+ }
136609
+ .e-content-container {
136610
+ margin-top: 16px;
136611
+ font-size: 14px;
136612
+ justify-content: space-between;
136613
+ }
136614
+ .e-prompt-text {
136615
+ white-space: pre-wrap;
136616
+ height: fit-content;
136617
+ border-radius: $prompt-text-border-radius;
136618
+ padding: $prompt-text-padding;
136619
+ line-height: 20px;
136620
+ }
136621
+ .e-content-footer,
136622
+ .e-prompt-toolbar {
136623
+ opacity: 0;
136624
+ }
136625
+ .e-prompt-container {
136626
+ gap: 2px;
136627
+ align-self: flex-end;
136628
+ max-width: 70%;
136629
+ margin-bottom: 5px;
136630
+ flex-direction: column;
136631
+ &:hover .e-assist-edit-icon {
136632
+ opacity: 1;
136633
+ cursor: pointer;
136520
136634
  }
136521
- .e-prompt-icon {
136522
- margin: 0 8px;
136523
- min-height: $aiassist-icon-height;
136635
+ }
136636
+ .e-suggestion-header {
136637
+ font-size: 14px;
136638
+ font-weight: $suggesstions-header-font-weight;
136639
+ margin: 0 2px 8px 8px;
136640
+ text-align: right;
136641
+ }
136642
+ .e-suggestions {
136643
+ width: 100%;
136644
+ &.e-suggestion-item-template li {
136645
+ padding: 0;
136524
136646
  }
136525
- .e-output-icon {
136526
- height: $aiassist-icon-height;
136527
- margin-left: 10px;
136647
+ ul {
136648
+ list-style-type: none;
136649
+ padding: 0;
136650
+ margin: 0;
136651
+ display: flex;
136652
+ flex-wrap: wrap;
136653
+ justify-content: end;
136528
136654
  }
136529
- .e-prompt-icon,
136530
- .e-output-icon {
136531
- border-radius: 50%;
136532
- min-width: $aiassist-icon-width;
136655
+ li {
136656
+ line-height: 20px;
136657
+ font-weight: $suggesstions-font-weight;
136658
+ padding: $suggesstions-list-padding;
136659
+ margin: $suggesstions-list-margin;
136660
+ border-radius: $suggesstions-list-border-radius;
136661
+ cursor: pointer;
136662
+ white-space: nowrap;
136663
+ overflow: hidden;
136664
+ text-overflow: ellipsis;
136533
136665
  }
136666
+ }
136667
+ .e-views {
136668
+ display: flex;
136669
+ justify-content: space-around;
136534
136670
  .e-content-body {
136535
136671
  line-height: 25px;
136536
136672
  border-radius: 4px;
@@ -136616,85 +136752,36 @@ $prompt-text-border-color: $border-default !default;
136616
136752
  .e-content-body > *:first-child {
136617
136753
  margin-block-start: 0;
136618
136754
  }
136619
- .e-loading-body,
136620
- .e-content-body,
136621
- .e-loading-footer {
136622
- padding: 2px 0 0 8px;
136623
- }
136624
- .e-content-footer,
136625
- .e-prompt-toolbar {
136626
- opacity: 0;
136627
- }
136628
- .e-content-container {
136629
- margin-top: 16px;
136630
- font-size: 14px;
136631
- justify-content: space-between;
136632
- .e-prompt-text {
136633
- white-space: pre-wrap;
136634
- height: fit-content;
136635
- border-radius: $prompt-text-border-radius;
136636
- padding: $prompt-text-padding;
136637
- margin-right: 2px;
136638
- line-height: 20px;
136639
- }
136640
- }
136641
- .e-suggestions {
136642
- width: 100%;
136643
- &.e-suggestion-item-template li {
136644
- padding: 0;
136645
- }
136646
- .e-suggestion-header {
136647
- font-size: 14px;
136648
- font-weight: $suggesstions-header-font-weight;
136649
- margin: 0 2px 8px 8px;
136650
- text-align: right;
136651
- }
136652
- ul {
136653
- list-style-type: none;
136654
- padding: 0;
136655
- margin: 0;
136656
- display: flex;
136657
- flex-wrap: wrap;
136658
- justify-content: end;
136659
- }
136660
- li {
136661
- line-height: 20px;
136662
- font-weight: $suggesstions-font-weight;
136663
- padding: $suggesstions-list-padding;
136664
- margin: $suggesstions-list-margin;
136665
- border-radius: $suggesstions-list-border-radius;
136666
- cursor: pointer;
136667
- white-space: nowrap;
136668
- overflow: hidden;
136669
- text-overflow: ellipsis;
136670
- }
136671
- }
136672
- .e-prompt-container {
136673
- gap: 2px;
136674
- align-self: flex-end;
136675
- max-width: 70%;
136676
- margin-bottom: 5px;
136677
- flex-direction: column;
136678
- &:hover .e-assist-edit-icon {
136679
- opacity: 1;
136680
- cursor: pointer;
136681
- }
136682
- }
136683
136755
  }
136684
136756
  .e-views,
136685
136757
  .e-custom-view,
136686
- .e-aiassist-view-content-section {
136758
+ .e-assistview-content-section {
136687
136759
  height: 100%;
136688
- overflow-y: scroll;
136760
+ overflow: scroll;
136689
136761
  &::-webkit-scrollbar {
136690
136762
  width: $ai-assist-scrollbar-width;
136763
+ height: $ai-assist-scrollbar-width;
136691
136764
  }
136692
136765
  &::-webkit-scrollbar-thumb {
136693
136766
  border-radius: 10px;
136694
136767
  }
136695
136768
  }
136696
- .e-content {
136697
- margin-right: 8px;
136769
+ .e-assist-send {
136770
+ position: absolute;
136771
+ right: 20px;
136772
+ font-size: $send-icon-size;
136773
+ bottom: $send-icon-bottom;
136774
+ padding-top: 2px;
136775
+ }
136776
+ .e-assist-send.disabled {
136777
+ pointer-events: none;
136778
+ opacity: .5;
136779
+ cursor: not-allowed;
136780
+ }
136781
+ .e-assist-send.enabled {
136782
+ pointer-events: auto;
136783
+ opacity: 1;
136784
+ cursor: pointer;
136698
136785
  }
136699
136786
  .e-footer {
136700
136787
  position: relative;
@@ -136713,23 +136800,6 @@ $prompt-text-border-color: $border-default !default;
136713
136800
  .hide-scrollbar textarea {
136714
136801
  scrollbar-width: none;
136715
136802
  }
136716
- .e-assist-send {
136717
- position: absolute;
136718
- right: 20px;
136719
- font-size: $send-icon-size;
136720
- bottom: 8px;
136721
- padding-top: 2px;
136722
- }
136723
- .e-assist-send.disabled {
136724
- pointer-events: none;
136725
- opacity: .5;
136726
- cursor: not-allowed;
136727
- }
136728
- .e-assist-send.enabled {
136729
- pointer-events: auto;
136730
- opacity: 1;
136731
- cursor: pointer;
136732
- }
136733
136803
  &:has(.e-rtl) .e-assist-send {
136734
136804
  right: unset;
136735
136805
  left: 20px;
@@ -136741,6 +136811,13 @@ $prompt-text-border-color: $border-default !default;
136741
136811
  .e-multi-line-input.e-rtl {
136742
136812
  padding-left: 35px;
136743
136813
  padding-right: unset;
136814
+ &.e-input-group.e-control-wrapper {
136815
+ .e-textarea {
136816
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136817
+ padding: 4px 12px 4px 8px;
136818
+ }
136819
+ }
136820
+ }
136744
136821
  }
136745
136822
  .e-input-group.e-multi-line-input {
136746
136823
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -136822,16 +136899,24 @@ $prompt-text-border-color: $border-default !default;
136822
136899
  outline: 1px solid;
136823
136900
  }
136824
136901
  &.e-rtl {
136825
- .e-views {
136826
- .e-suggestions {
136827
- .e-suggestion-header {
136828
- text-align: left;
136829
- margin: 0 8px 8px 2px;
136830
- }
136831
- li {
136832
- margin: $suggesstions-list-margin-rtl;
136902
+ .e-view-header .e-toolbar-item {
136903
+ &.e-assist-view-header,
136904
+ &.e-custom-view-header {
136905
+ .e-tbar-btn .e-btn-icon {
136906
+ padding: 4px 2px 4px 4px;
136833
136907
  }
136834
136908
  }
136909
+ }
136910
+ .e-suggestion-header {
136911
+ text-align: left;
136912
+ margin: 0 8px 8px 2px;
136913
+ }
136914
+ .e-suggestions {
136915
+ li {
136916
+ margin: $suggesstions-list-margin-rtl;
136917
+ }
136918
+ }
136919
+ .e-views {
136835
136920
  .e-content-body {
136836
136921
  blockquote {
136837
136922
  padding-left: unset;
@@ -136846,6 +136931,17 @@ $prompt-text-border-color: $border-default !default;
136846
136931
  }
136847
136932
  }
136848
136933
  }
136934
+ .e-loading-body,
136935
+ .e-content-body,
136936
+ .e-loading-footer {
136937
+ padding: 2px 6px 0 0;
136938
+ }
136939
+ .e-prompt-icon {
136940
+ margin: 0 8px 0 0;
136941
+ }
136942
+ .e-output-icon {
136943
+ margin: 0 8px 0 4px;
136944
+ }
136849
136945
  }
136850
136946
  }
136851
136947
  @media (max-width: 760px) {
@@ -136854,12 +136950,14 @@ $prompt-text-border-color: $border-default !default;
136854
136950
  .e-footer {
136855
136951
  width: 100%;
136856
136952
  }
136857
- .e-view-container .e-suggestions {
136953
+ .e-view-container .e-suggestions,
136954
+ .e-prompt-content {
136858
136955
  padding-right: 8px;
136859
136956
  }
136860
136957
  &.e-rtl {
136861
- .e-view-container .e-suggestions {
136862
- padding-left: 8px;
136958
+ .e-view-container .e-suggestions,
136959
+ .e-prompt-content {
136960
+ padding: 0 0 0 8px;
136863
136961
  }
136864
136962
  }
136865
136963
  }
@@ -136897,26 +136995,55 @@ $prompt-text-border-color: $border-default !default;
136897
136995
  }
136898
136996
  .e-tbar-btn {
136899
136997
  background: transparent;
136998
+ &:focus {
136999
+ box-shadow: none;
137000
+ }
137001
+ &:focus-visible {
137002
+ box-shadow: $tbar-header-btn-focus-box-shadow;
137003
+ @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') {
137004
+ background: $tbar-header-hover-bg-color;
137005
+ }
137006
+ }
136900
137007
  }
136901
137008
  }
136902
137009
  }
136903
- .e-views {
136904
- .e-prompt-icon,
136905
- .e-output-icon {
136906
- border: 1px solid $icon-border-color;
136907
- color: $user-logo-color;
136908
- background-color: $user-logo-bg-color;
136909
- }
136910
- .e-prompt-text {
136911
- background: $suggested-content-bg-color;
137010
+ .e-suggestion-header {
137011
+ color: $suggesstions-header-color;
137012
+ }
137013
+ .e-suggestions {
137014
+ li {
136912
137015
  color: $suggested-content-text-color;
137016
+ box-shadow: $suggestion-li-box-shadow;
136913
137017
  @if ($skin-name == 'bootstrap5.3') {
136914
137018
  border: none;
136915
137019
  }
136916
137020
  @else {
136917
- border: 1px solid $prompt-text-border-color;
137021
+ border: 1px solid $suggestion-li-border-color;
136918
137022
  }
136919
137023
  }
137024
+ }
137025
+ .e-prompt-icon,
137026
+ .e-output-icon {
137027
+ border: 1px solid $icon-border-color;
137028
+ color: $user-logo-color;
137029
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
137030
+ background: $user-logo-bg-color;
137031
+ }
137032
+ @else {
137033
+ background-color: $user-logo-bg-color;
137034
+ }
137035
+ }
137036
+ .e-prompt-text {
137037
+ background: $suggested-content-bg-color;
137038
+ color: $suggested-content-text-color;
137039
+ @if ($skin-name == 'bootstrap5.3') {
137040
+ border: none;
137041
+ }
137042
+ @else {
137043
+ border: 1px solid $prompt-text-border-color;
137044
+ }
137045
+ }
137046
+ .e-views {
136920
137047
  .e-content-body {
136921
137048
  color: $response-text-color;
136922
137049
  a {
@@ -136956,21 +137083,6 @@ $prompt-text-border-color: $border-default !default;
136956
137083
  color: rgba(255, 212, 212, 1);
136957
137084
  }
136958
137085
  }
136959
- .e-suggestions {
136960
- .e-suggestion-header {
136961
- color: $suggesstions-header-color;
136962
- }
136963
- li {
136964
- color: $suggested-content-text-color;
136965
- box-shadow: $suggestion-li-box-shadow;
136966
- @if ($skin-name == 'bootstrap5.3') {
136967
- border: none;
136968
- }
136969
- @else {
136970
- border: 1px solid $suggestion-li-border-color;
136971
- }
136972
- }
136973
- }
136974
137086
  }
136975
137087
  .e-stop-response {
136976
137088
  border-color: $response-stopper-border-color;
@@ -136980,21 +137092,21 @@ $prompt-text-border-color: $border-default !default;
136980
137092
  }
136981
137093
  .e-views,
136982
137094
  .e-custom-view,
136983
- .e-aiassist-view-content-section {
137095
+ .e-assistview-content-section {
136984
137096
  &::-webkit-scrollbar-thumb {
136985
137097
  background: $scrollbar-color;
136986
137098
  }
136987
137099
  }
137100
+ .e-assist-send {
137101
+ color: $send-icon-color;
137102
+ &.disabled {
137103
+ color: $send-icon-disabled-color;
137104
+ }
137105
+ }
136988
137106
  .e-footer {
136989
137107
  textarea::-webkit-scrollbar-thumb {
136990
137108
  background: $scrollbar-color;
136991
137109
  }
136992
- .e-assist-send {
136993
- color: $send-icon-color;
136994
- &.disabled {
136995
- color: $send-icon-disabled-color;
136996
- }
136997
- }
136998
137110
  // To override the default border style of the textarea component for the Material and Material3 themes.
136999
137111
  .e-input-group.e-multi-line-input {
137000
137112
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {