@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
@@ -34948,13 +34948,11 @@ $slider-limit-bar-horizontal-height: 4px !default;
34948
34948
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
34949
34949
  @include alignment(6px, calc(50% - 3px), 'vertical');
34950
34950
  }
34951
- @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' ) {
34952
- @if ($skin-name == 'tailwind') {
34953
- left: calc(50%);
34954
- }
34955
- @else {
34956
- @include alignment(4px, calc(50% - 2px), 'vertical');
34957
- }
34951
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
34952
+ @include alignment(4px, calc(50% - 2px), 'vertical');
34953
+ }
34954
+ @if ($skin-name == 'tailwind') {
34955
+ @include alignment(4px, calc(50%), 'vertical');
34958
34956
  }
34959
34957
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
34960
34958
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -40685,7 +40683,7 @@ $radio-btn-ripple-bgcolor: rgba(0, 0, 0, .3) !default;
40685
40683
  }
40686
40684
 
40687
40685
  &::before {
40688
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
40686
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
40689
40687
  background-color: $radio-btn-disabled-not-checked-bg-color;
40690
40688
  }
40691
40689
  @else {
@@ -42758,6 +42756,10 @@ $listview-template-multiline-avatar-top: .6153em !default;
42758
42756
  }
42759
42757
  }
42760
42758
 
42759
+ &.e-virtualization .e-list-container{
42760
+ overflow: unset;
42761
+ }
42762
+
42761
42763
  & .e-list-container {
42762
42764
  overflow: hidden;
42763
42765
  position: relative;
@@ -65783,6 +65785,10 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
65783
65785
  display: block;
65784
65786
  }
65785
65787
 
65788
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
65789
+ margin-right: 30px;
65790
+ }
65791
+
65786
65792
  .e-multi-select-wrapper .e-multi-hidden {
65787
65793
  border: 0;
65788
65794
  height: 0;
@@ -82736,7 +82742,12 @@ $grid-checkmark-color: $theme-dark-font !default;
82736
82742
  /* stylelint-enable */
82737
82743
 
82738
82744
  .e-dlg-content {
82739
- padding: 24px 27px;
82745
+ @if $grid-skin == 'fluent2' {
82746
+ padding: 24px 27px;
82747
+ }
82748
+ @else {
82749
+ padding: 8px 16px 8px 8px;
82750
+ }
82740
82751
  overflow-y: hidden;
82741
82752
  }
82742
82753
 
@@ -83591,7 +83602,7 @@ $grid-checkmark-color: $theme-dark-font !default;
83591
83602
  }
83592
83603
 
83593
83604
  .e-grid-popup {
83594
- position: relative;
83605
+ position: absolute;
83595
83606
  }
83596
83607
 
83597
83608
  #{&}.e-grid,
@@ -85911,6 +85922,12 @@ $grid-checkmark-color: $theme-dark-font !default;
85911
85922
  padding: $grid-columnchooser-toolbardiv-padding;
85912
85923
  }
85913
85924
 
85925
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
85926
+ @if $grid-skin == 'fluent' {
85927
+ padding-bottom: 1px;
85928
+ }
85929
+ }
85930
+
85914
85931
  .e-edit-dialog {
85915
85932
  min-height: 350px;
85916
85933
  .e-dlg-content {
@@ -86725,14 +86742,17 @@ $grid-checkmark-color: $theme-dark-font !default;
86725
86742
  }
86726
86743
 
86727
86744
  &.e-wrap {
86728
- & .e-gridheader .e-rowcell,
86729
- & .e-gridcontent .e-rowcell,
86745
+ & .e-rowcell,
86730
86746
  & .e-columnheader .e-stackedheadercelldiv,
86731
86747
  & .e-columnheader .e-headercelldiv,
86732
86748
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
86733
86749
  @include wrap-styles;
86734
86750
  }
86735
86751
 
86752
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
86753
+ white-space: nowrap;
86754
+ }
86755
+
86736
86756
  & .e-stackedheader .e-columnheader {
86737
86757
  .e-stackedheadercelldiv,
86738
86758
  .e-headercelldiv {
@@ -87290,7 +87310,8 @@ $grid-checkmark-color: $theme-dark-font !default;
87290
87310
  }
87291
87311
 
87292
87312
  @if $grid-skin == 'fluent2' {
87293
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
87313
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
87314
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
87294
87315
  padding: 0 6px;
87295
87316
  }
87296
87317
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -88204,7 +88225,8 @@ $grid-checkmark-color: $theme-dark-font !default;
88204
88225
  }
88205
88226
 
88206
88227
  @if $grid-skin == 'fluent2' {
88207
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
88228
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
88229
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
88208
88230
  color: $flyout-text-color-hover;
88209
88231
  }
88210
88232
  }
@@ -136284,6 +136306,8 @@ $aiassist-header-height: 46px !default;
136284
136306
  $aiassist-icon-height: 30px !default;
136285
136307
  $aiassist-icon-width: 30px !default;
136286
136308
  $send-icon-size: 14px !default;
136309
+ $send-icon-bottom: 8px !default;
136310
+ $send-icon-bigger-bottom: 12px !default;
136287
136311
  $aiassist-bigger-header-height: 50px !default;
136288
136312
  $aiassist-bigger-icon-height: 40px !default;
136289
136313
  $aiassist-bigger-icon-width: 40px !default;
@@ -136324,63 +136348,86 @@ $rating-selected-bg-color: $neutral-primary !default;
136324
136348
  $send-icon-color: $neutral-light-font !default;
136325
136349
  $send-icon-disabled-color: $neutral-tertiary !default;
136326
136350
  $prompt-text-border-color: $neutral-white !default;
136351
+ $tbar-header-btn-focus-box-shadow: none !default;
136352
+ $tbar-header-hover-bg-color: $neutral-light !default;
136327
136353
 
136328
136354
  @include export-module('aiassistview-bigger') {
136329
136355
  .e-bigger.e-aiassistview,
136330
136356
  .e-bigger .e-aiassistview {
136331
136357
  .e-view-header {
136332
136358
  height: $aiassist-bigger-header-height;
136359
+ .e-toolbar {
136360
+ .e-toolbar-items {
136361
+ .e-toolbar-left {
136362
+ height: calc($aiassist-bigger-header-height - 1px);
136363
+ }
136364
+ .e-toolbar-item {
136365
+ &.e-assist-view-header,
136366
+ &.e-custom-view-header {
136367
+ @if ($skin-name == 'highcontrast') {
136368
+ // To apply box-shadow styling during keyboard navigation
136369
+ padding: 1.5px;
136370
+ }
136371
+ @else {
136372
+ padding: 0;
136373
+ }
136374
+ .e-tbar-btn {
136375
+ padding: 0;
136376
+ .e-btn-icon {
136377
+ padding: 4px 4px 4px 2px;
136378
+ }
136379
+ }
136380
+ }
136381
+ }
136382
+ }
136383
+ }
136333
136384
  }
136334
136385
  .e-view-content {
136335
136386
  height: calc(100% - $aiassist-bigger-header-height);
136336
136387
  }
136337
- .e-views {
136338
- .e-prompt-icon {
136339
- min-height: $aiassist-bigger-icon-height;
136340
- }
136341
- .e-output-icon {
136342
- height: $aiassist-bigger-icon-height;
136343
- }
136344
- .e-prompt-icon,
136345
- .e-output-icon {
136346
- min-width: $aiassist-bigger-icon-width;
136347
- }
136348
- .e-loading-body,
136349
- .e-content-body,
136350
- .e-loading-footer {
136351
- padding: 2px 0 0 10px;
136352
- }
136353
- .e-content-container {
136354
- font-size: 16px;
136355
- .e-prompt-text {
136356
- padding: $prompt-text-bigger-padding;
136357
- line-height: 22px;
136358
- }
136388
+ .e-prompt-icon {
136389
+ min-height: $aiassist-bigger-icon-height;
136390
+ }
136391
+ .e-output-icon {
136392
+ height: $aiassist-bigger-icon-height;
136393
+ }
136394
+ .e-prompt-icon,
136395
+ .e-output-icon {
136396
+ min-width: $aiassist-bigger-icon-width;
136397
+ }
136398
+ .e-loading-body,
136399
+ .e-content-body,
136400
+ .e-loading-footer {
136401
+ padding: 6px 0 0 6px;
136402
+ }
136403
+ .e-prompt-text {
136404
+ padding: $prompt-text-bigger-padding;
136405
+ line-height: 22px;
136406
+ }
136407
+ .e-content-container {
136408
+ font-size: 16px;
136409
+ }
136410
+ .e-suggestion-header {
136411
+ font-size: 16px;
136412
+ font-weight: $suggesstions-header-bigger-font-weight;
136413
+ margin-bottom: 15px;
136414
+ }
136415
+ .e-suggestions {
136416
+ &.e-suggestion-item-template ul li {
136417
+ padding: 0;
136359
136418
  }
136360
- .e-suggestions {
136361
- &.e-suggestion-item-template ul li {
136362
- padding: 0;
136363
- }
136364
- .e-suggestion-header {
136365
- font-size: 16px;
136366
- font-weight: $suggesstions-header-bigger-font-weight;
136367
- margin-bottom: 15px;
136368
- }
136369
- ul {
136370
- li {
136371
- line-height: 22px;
136372
- font-weight: $suggesstions-bigger-font-weight;
136373
- padding: $suggesstions-bigger-list-padding;
136374
- margin: $suggesstions-bigger-list-margin;
136375
- }
136376
- }
136419
+ li {
136420
+ line-height: 22px;
136421
+ font-weight: $suggesstions-bigger-font-weight;
136422
+ padding: $suggesstions-bigger-list-padding;
136423
+ margin: $suggesstions-bigger-list-margin;
136377
136424
  }
136378
136425
  }
136426
+ .e-assist-send {
136427
+ font-size: $send-icon-size-bigger;
136428
+ bottom: $send-icon-bigger-bottom;
136429
+ }
136379
136430
  .e-footer {
136380
- .e-assist-send {
136381
- font-size: $send-icon-size-bigger;
136382
- bottom: 9px;
136383
- }
136384
136431
  .e-input-group.e-control-wrapper.e-multi-line-input {
136385
136432
  .e-textarea {
136386
136433
  min-height: 38px;
@@ -136389,6 +136436,11 @@ $prompt-text-border-color: $neutral-white !default;
136389
136436
  min-height: 28px;
136390
136437
  }
136391
136438
  }
136439
+ &.e-rtl .e-textarea {
136440
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136441
+ padding: 6px 16px 6px 12px;
136442
+ }
136443
+ }
136392
136444
  }
136393
136445
  }
136394
136446
  .e-stop-response.e-btn-active {
@@ -136400,13 +136452,24 @@ $prompt-text-border-color: $neutral-white !default;
136400
136452
  font-size: $response-stopper-bigger-font-size;
136401
136453
  }
136402
136454
  &.e-rtl {
136403
- .e-views {
136404
- .e-suggestions {
136405
- li {
136406
- margin: $suggesstions-bigger-list-margin-rtl;
136455
+ .e-view-header .e-toolbar-item {
136456
+ &.e-assist-view-header,
136457
+ &.e-custom-view-header {
136458
+ .e-tbar-btn .e-btn-icon {
136459
+ padding: 4px 2px 4px 4px;
136407
136460
  }
136408
136461
  }
136409
136462
  }
136463
+ .e-suggestions {
136464
+ li {
136465
+ margin: $suggesstions-bigger-list-margin-rtl;
136466
+ }
136467
+ }
136468
+ .e-loading-body,
136469
+ .e-content-body,
136470
+ .e-loading-footer {
136471
+ padding: 6px 6px 0 0;
136472
+ }
136410
136473
  }
136411
136474
  }
136412
136475
  }
@@ -136434,14 +136497,29 @@ $prompt-text-border-color: $neutral-white !default;
136434
136497
  width: 100%;
136435
136498
  border-radius: 4px;
136436
136499
  }
136437
- .e-tbar-btn {
136438
- padding: 0;
136500
+ &.e-assist-view-header,
136501
+ &.e-custom-view-header {
136502
+ @if ($skin-name == 'highcontrast') {
136503
+ // To apply box-shadow styling during keyboard navigation
136504
+ padding: 1px;
136505
+ }
136506
+ @else {
136507
+ padding: 0;
136508
+ }
136509
+ .e-tbar-btn {
136510
+ padding: 0;
136511
+ .e-btn-icon {
136512
+ padding: 4px 4px 4px 2px;
136513
+ }
136514
+ }
136515
+ }
136516
+ &.e-active .e-btn {
136517
+ cursor: pointer;
136439
136518
  }
136440
136519
  }
136441
- }
136442
- .e-view-header .e-toolbar-item.e-active .e-btn {
136443
- border-radius: 0;
136444
- cursor: pointer;
136520
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
136521
+ height: calc($aiassist-header-height - 1px);
136522
+ }
136445
136523
  }
136446
136524
  .e-view-container,
136447
136525
  .e-footer {
@@ -136491,36 +136569,94 @@ $prompt-text-border-color: $neutral-white !default;
136491
136569
  }
136492
136570
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
136493
136571
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
136494
- @if $theme-name == 'highcontrast' {
136495
- padding: 6px 0 6px 5px;
136496
- }
136497
- @else {
136498
- padding: 6px 0 6px 2px;
136499
- }
136572
+ padding: 6px 2px;
136500
136573
  }
136501
136574
  }
136502
- .e-views {
136575
+ .e-output-container {
136576
+ width: 90%;
136503
136577
  display: flex;
136504
- justify-content: space-around;
136505
- .e-output-container {
136506
- width: 90%;
136507
- display: flex;
136508
- align-self: flex-start;
136509
- margin: 10px 0;
136578
+ align-self: flex-start;
136579
+ margin: 10px 0;
136580
+ }
136581
+ .e-prompt-icon {
136582
+ margin: 0 0 0 8px;
136583
+ min-height: $aiassist-icon-height;
136584
+ }
136585
+ .e-output-icon {
136586
+ height: $aiassist-icon-height;
136587
+ margin: 0 4px 0 8px;
136588
+ }
136589
+ .e-prompt-icon,
136590
+ .e-output-icon {
136591
+ border-radius: 50%;
136592
+ min-width: $aiassist-icon-width;
136593
+ }
136594
+ .e-loading-body,
136595
+ .e-content-body,
136596
+ .e-loading-footer {
136597
+ padding: 2px 0 0 6px;
136598
+ }
136599
+ .e-content-container {
136600
+ margin-top: 16px;
136601
+ font-size: 14px;
136602
+ justify-content: space-between;
136603
+ }
136604
+ .e-prompt-text {
136605
+ white-space: pre-wrap;
136606
+ height: fit-content;
136607
+ border-radius: $prompt-text-border-radius;
136608
+ padding: $prompt-text-padding;
136609
+ line-height: 20px;
136610
+ }
136611
+ .e-content-footer,
136612
+ .e-prompt-toolbar {
136613
+ opacity: 0;
136614
+ }
136615
+ .e-prompt-container {
136616
+ gap: 2px;
136617
+ align-self: flex-end;
136618
+ max-width: 70%;
136619
+ margin-bottom: 5px;
136620
+ flex-direction: column;
136621
+ &:hover .e-assist-edit-icon {
136622
+ opacity: 1;
136623
+ cursor: pointer;
136510
136624
  }
136511
- .e-prompt-icon {
136512
- margin: 0 8px;
136513
- min-height: $aiassist-icon-height;
136625
+ }
136626
+ .e-suggestion-header {
136627
+ font-size: 14px;
136628
+ font-weight: $suggesstions-header-font-weight;
136629
+ margin: 0 2px 8px 8px;
136630
+ text-align: right;
136631
+ }
136632
+ .e-suggestions {
136633
+ width: 100%;
136634
+ &.e-suggestion-item-template li {
136635
+ padding: 0;
136514
136636
  }
136515
- .e-output-icon {
136516
- height: $aiassist-icon-height;
136517
- margin-left: 10px;
136637
+ ul {
136638
+ list-style-type: none;
136639
+ padding: 0;
136640
+ margin: 0;
136641
+ display: flex;
136642
+ flex-wrap: wrap;
136643
+ justify-content: end;
136518
136644
  }
136519
- .e-prompt-icon,
136520
- .e-output-icon {
136521
- border-radius: 50%;
136522
- min-width: $aiassist-icon-width;
136645
+ li {
136646
+ line-height: 20px;
136647
+ font-weight: $suggesstions-font-weight;
136648
+ padding: $suggesstions-list-padding;
136649
+ margin: $suggesstions-list-margin;
136650
+ border-radius: $suggesstions-list-border-radius;
136651
+ cursor: pointer;
136652
+ white-space: nowrap;
136653
+ overflow: hidden;
136654
+ text-overflow: ellipsis;
136523
136655
  }
136656
+ }
136657
+ .e-views {
136658
+ display: flex;
136659
+ justify-content: space-around;
136524
136660
  .e-content-body {
136525
136661
  line-height: 25px;
136526
136662
  border-radius: 4px;
@@ -136606,85 +136742,36 @@ $prompt-text-border-color: $neutral-white !default;
136606
136742
  .e-content-body > *:first-child {
136607
136743
  margin-block-start: 0;
136608
136744
  }
136609
- .e-loading-body,
136610
- .e-content-body,
136611
- .e-loading-footer {
136612
- padding: 2px 0 0 8px;
136613
- }
136614
- .e-content-footer,
136615
- .e-prompt-toolbar {
136616
- opacity: 0;
136617
- }
136618
- .e-content-container {
136619
- margin-top: 16px;
136620
- font-size: 14px;
136621
- justify-content: space-between;
136622
- .e-prompt-text {
136623
- white-space: pre-wrap;
136624
- height: fit-content;
136625
- border-radius: $prompt-text-border-radius;
136626
- padding: $prompt-text-padding;
136627
- margin-right: 2px;
136628
- line-height: 20px;
136629
- }
136630
- }
136631
- .e-suggestions {
136632
- width: 100%;
136633
- &.e-suggestion-item-template li {
136634
- padding: 0;
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
- ul {
136643
- list-style-type: none;
136644
- padding: 0;
136645
- margin: 0;
136646
- display: flex;
136647
- flex-wrap: wrap;
136648
- justify-content: end;
136649
- }
136650
- li {
136651
- line-height: 20px;
136652
- font-weight: $suggesstions-font-weight;
136653
- padding: $suggesstions-list-padding;
136654
- margin: $suggesstions-list-margin;
136655
- border-radius: $suggesstions-list-border-radius;
136656
- cursor: pointer;
136657
- white-space: nowrap;
136658
- overflow: hidden;
136659
- text-overflow: ellipsis;
136660
- }
136661
- }
136662
- .e-prompt-container {
136663
- gap: 2px;
136664
- align-self: flex-end;
136665
- max-width: 70%;
136666
- margin-bottom: 5px;
136667
- flex-direction: column;
136668
- &:hover .e-assist-edit-icon {
136669
- opacity: 1;
136670
- cursor: pointer;
136671
- }
136672
- }
136673
136745
  }
136674
136746
  .e-views,
136675
136747
  .e-custom-view,
136676
- .e-aiassist-view-content-section {
136748
+ .e-assistview-content-section {
136677
136749
  height: 100%;
136678
- overflow-y: scroll;
136750
+ overflow: scroll;
136679
136751
  &::-webkit-scrollbar {
136680
136752
  width: $ai-assist-scrollbar-width;
136753
+ height: $ai-assist-scrollbar-width;
136681
136754
  }
136682
136755
  &::-webkit-scrollbar-thumb {
136683
136756
  border-radius: 10px;
136684
136757
  }
136685
136758
  }
136686
- .e-content {
136687
- margin-right: 8px;
136759
+ .e-assist-send {
136760
+ position: absolute;
136761
+ right: 20px;
136762
+ font-size: $send-icon-size;
136763
+ bottom: $send-icon-bottom;
136764
+ padding-top: 2px;
136765
+ }
136766
+ .e-assist-send.disabled {
136767
+ pointer-events: none;
136768
+ opacity: .5;
136769
+ cursor: not-allowed;
136770
+ }
136771
+ .e-assist-send.enabled {
136772
+ pointer-events: auto;
136773
+ opacity: 1;
136774
+ cursor: pointer;
136688
136775
  }
136689
136776
  .e-footer {
136690
136777
  position: relative;
@@ -136703,23 +136790,6 @@ $prompt-text-border-color: $neutral-white !default;
136703
136790
  .hide-scrollbar textarea {
136704
136791
  scrollbar-width: none;
136705
136792
  }
136706
- .e-assist-send {
136707
- position: absolute;
136708
- right: 20px;
136709
- font-size: $send-icon-size;
136710
- bottom: 8px;
136711
- padding-top: 2px;
136712
- }
136713
- .e-assist-send.disabled {
136714
- pointer-events: none;
136715
- opacity: .5;
136716
- cursor: not-allowed;
136717
- }
136718
- .e-assist-send.enabled {
136719
- pointer-events: auto;
136720
- opacity: 1;
136721
- cursor: pointer;
136722
- }
136723
136793
  &:has(.e-rtl) .e-assist-send {
136724
136794
  right: unset;
136725
136795
  left: 20px;
@@ -136731,6 +136801,13 @@ $prompt-text-border-color: $neutral-white !default;
136731
136801
  .e-multi-line-input.e-rtl {
136732
136802
  padding-left: 35px;
136733
136803
  padding-right: unset;
136804
+ &.e-input-group.e-control-wrapper {
136805
+ .e-textarea {
136806
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136807
+ padding: 4px 12px 4px 8px;
136808
+ }
136809
+ }
136810
+ }
136734
136811
  }
136735
136812
  .e-input-group.e-multi-line-input {
136736
136813
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -136812,16 +136889,24 @@ $prompt-text-border-color: $neutral-white !default;
136812
136889
  outline: 1px solid;
136813
136890
  }
136814
136891
  &.e-rtl {
136815
- .e-views {
136816
- .e-suggestions {
136817
- .e-suggestion-header {
136818
- text-align: left;
136819
- margin: 0 8px 8px 2px;
136820
- }
136821
- li {
136822
- margin: $suggesstions-list-margin-rtl;
136892
+ .e-view-header .e-toolbar-item {
136893
+ &.e-assist-view-header,
136894
+ &.e-custom-view-header {
136895
+ .e-tbar-btn .e-btn-icon {
136896
+ padding: 4px 2px 4px 4px;
136823
136897
  }
136824
136898
  }
136899
+ }
136900
+ .e-suggestion-header {
136901
+ text-align: left;
136902
+ margin: 0 8px 8px 2px;
136903
+ }
136904
+ .e-suggestions {
136905
+ li {
136906
+ margin: $suggesstions-list-margin-rtl;
136907
+ }
136908
+ }
136909
+ .e-views {
136825
136910
  .e-content-body {
136826
136911
  blockquote {
136827
136912
  padding-left: unset;
@@ -136836,6 +136921,17 @@ $prompt-text-border-color: $neutral-white !default;
136836
136921
  }
136837
136922
  }
136838
136923
  }
136924
+ .e-loading-body,
136925
+ .e-content-body,
136926
+ .e-loading-footer {
136927
+ padding: 2px 6px 0 0;
136928
+ }
136929
+ .e-prompt-icon {
136930
+ margin: 0 8px 0 0;
136931
+ }
136932
+ .e-output-icon {
136933
+ margin: 0 8px 0 4px;
136934
+ }
136839
136935
  }
136840
136936
  }
136841
136937
  @media (max-width: 760px) {
@@ -136844,12 +136940,14 @@ $prompt-text-border-color: $neutral-white !default;
136844
136940
  .e-footer {
136845
136941
  width: 100%;
136846
136942
  }
136847
- .e-view-container .e-suggestions {
136943
+ .e-view-container .e-suggestions,
136944
+ .e-prompt-content {
136848
136945
  padding-right: 8px;
136849
136946
  }
136850
136947
  &.e-rtl {
136851
- .e-view-container .e-suggestions {
136852
- padding-left: 8px;
136948
+ .e-view-container .e-suggestions,
136949
+ .e-prompt-content {
136950
+ padding: 0 0 0 8px;
136853
136951
  }
136854
136952
  }
136855
136953
  }
@@ -136887,26 +136985,55 @@ $prompt-text-border-color: $neutral-white !default;
136887
136985
  }
136888
136986
  .e-tbar-btn {
136889
136987
  background: transparent;
136988
+ &:focus {
136989
+ box-shadow: none;
136990
+ }
136991
+ &:focus-visible {
136992
+ box-shadow: $tbar-header-btn-focus-box-shadow;
136993
+ @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') {
136994
+ background: $tbar-header-hover-bg-color;
136995
+ }
136996
+ }
136890
136997
  }
136891
136998
  }
136892
136999
  }
136893
- .e-views {
136894
- .e-prompt-icon,
136895
- .e-output-icon {
136896
- border: 1px solid $icon-border-color;
136897
- color: $user-logo-color;
136898
- background-color: $user-logo-bg-color;
136899
- }
136900
- .e-prompt-text {
136901
- background: $suggested-content-bg-color;
137000
+ .e-suggestion-header {
137001
+ color: $suggesstions-header-color;
137002
+ }
137003
+ .e-suggestions {
137004
+ li {
136902
137005
  color: $suggested-content-text-color;
137006
+ box-shadow: $suggestion-li-box-shadow;
136903
137007
  @if ($skin-name == 'bootstrap5.3') {
136904
137008
  border: none;
136905
137009
  }
136906
137010
  @else {
136907
- border: 1px solid $prompt-text-border-color;
137011
+ border: 1px solid $suggestion-li-border-color;
136908
137012
  }
136909
137013
  }
137014
+ }
137015
+ .e-prompt-icon,
137016
+ .e-output-icon {
137017
+ border: 1px solid $icon-border-color;
137018
+ color: $user-logo-color;
137019
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
137020
+ background: $user-logo-bg-color;
137021
+ }
137022
+ @else {
137023
+ background-color: $user-logo-bg-color;
137024
+ }
137025
+ }
137026
+ .e-prompt-text {
137027
+ background: $suggested-content-bg-color;
137028
+ color: $suggested-content-text-color;
137029
+ @if ($skin-name == 'bootstrap5.3') {
137030
+ border: none;
137031
+ }
137032
+ @else {
137033
+ border: 1px solid $prompt-text-border-color;
137034
+ }
137035
+ }
137036
+ .e-views {
136910
137037
  .e-content-body {
136911
137038
  color: $response-text-color;
136912
137039
  a {
@@ -136946,21 +137073,6 @@ $prompt-text-border-color: $neutral-white !default;
136946
137073
  color: rgba(255, 212, 212, 1);
136947
137074
  }
136948
137075
  }
136949
- .e-suggestions {
136950
- .e-suggestion-header {
136951
- color: $suggesstions-header-color;
136952
- }
136953
- li {
136954
- color: $suggested-content-text-color;
136955
- box-shadow: $suggestion-li-box-shadow;
136956
- @if ($skin-name == 'bootstrap5.3') {
136957
- border: none;
136958
- }
136959
- @else {
136960
- border: 1px solid $suggestion-li-border-color;
136961
- }
136962
- }
136963
- }
136964
137076
  }
136965
137077
  .e-stop-response {
136966
137078
  border-color: $response-stopper-border-color;
@@ -136970,21 +137082,21 @@ $prompt-text-border-color: $neutral-white !default;
136970
137082
  }
136971
137083
  .e-views,
136972
137084
  .e-custom-view,
136973
- .e-aiassist-view-content-section {
137085
+ .e-assistview-content-section {
136974
137086
  &::-webkit-scrollbar-thumb {
136975
137087
  background: $scrollbar-color;
136976
137088
  }
136977
137089
  }
137090
+ .e-assist-send {
137091
+ color: $send-icon-color;
137092
+ &.disabled {
137093
+ color: $send-icon-disabled-color;
137094
+ }
137095
+ }
136978
137096
  .e-footer {
136979
137097
  textarea::-webkit-scrollbar-thumb {
136980
137098
  background: $scrollbar-color;
136981
137099
  }
136982
- .e-assist-send {
136983
- color: $send-icon-color;
136984
- &.disabled {
136985
- color: $send-icon-disabled-color;
136986
- }
136987
- }
136988
137100
  // To override the default border style of the textarea component for the Material and Material3 themes.
136989
137101
  .e-input-group.e-multi-line-input {
136990
137102
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {