@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
@@ -34859,13 +34859,11 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
34859
34859
  @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
34860
34860
  @include alignment(6px, calc(50% - 3px), 'vertical');
34861
34861
  }
34862
- @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' ) {
34863
- @if ($skin-name == 'tailwind') {
34864
- left: calc(50%);
34865
- }
34866
- @else {
34867
- @include alignment(4px, calc(50% - 2px), 'vertical');
34868
- }
34862
+ @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
34863
+ @include alignment(4px, calc(50% - 2px), 'vertical');
34864
+ }
34865
+ @if ($skin-name == 'tailwind') {
34866
+ @include alignment(4px, calc(50%), 'vertical');
34869
34867
  }
34870
34868
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
34871
34869
  @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -40600,7 +40598,7 @@ $radio-btn-focus-outline-offset: 0 !default;
40600
40598
  }
40601
40599
 
40602
40600
  &::before {
40603
- @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
40601
+ @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
40604
40602
  background-color: $radio-btn-disabled-not-checked-bg-color;
40605
40603
  }
40606
40604
  @else {
@@ -42662,6 +42660,10 @@ $listview-template-multiline-avatar-top: .7142em !default;
42662
42660
  }
42663
42661
  }
42664
42662
 
42663
+ &.e-virtualization .e-list-container{
42664
+ overflow: unset;
42665
+ }
42666
+
42665
42667
  & .e-list-container {
42666
42668
  overflow: hidden;
42667
42669
  position: relative;
@@ -65642,6 +65644,10 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
65642
65644
  display: block;
65643
65645
  }
65644
65646
 
65647
+ .e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
65648
+ margin-right: 30px;
65649
+ }
65650
+
65645
65651
  .e-multi-select-wrapper .e-multi-hidden {
65646
65652
  border: 0;
65647
65653
  height: 0;
@@ -82592,7 +82598,12 @@ $grid-checkmark-color: $grey !default;
82592
82598
  /* stylelint-enable */
82593
82599
 
82594
82600
  .e-dlg-content {
82595
- padding: 24px 27px;
82601
+ @if $grid-skin == 'fluent2' {
82602
+ padding: 24px 27px;
82603
+ }
82604
+ @else {
82605
+ padding: 8px 16px 8px 8px;
82606
+ }
82596
82607
  overflow-y: hidden;
82597
82608
  }
82598
82609
 
@@ -83447,7 +83458,7 @@ $grid-checkmark-color: $grey !default;
83447
83458
  }
83448
83459
 
83449
83460
  .e-grid-popup {
83450
- position: relative;
83461
+ position: absolute;
83451
83462
  }
83452
83463
 
83453
83464
  #{&}.e-grid,
@@ -85767,6 +85778,12 @@ $grid-checkmark-color: $grey !default;
85767
85778
  padding: $grid-columnchooser-toolbardiv-padding;
85768
85779
  }
85769
85780
 
85781
+ &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
85782
+ @if $grid-skin == 'fluent' {
85783
+ padding-bottom: 1px;
85784
+ }
85785
+ }
85786
+
85770
85787
  .e-edit-dialog {
85771
85788
  min-height: 350px;
85772
85789
  .e-dlg-content {
@@ -86581,14 +86598,17 @@ $grid-checkmark-color: $grey !default;
86581
86598
  }
86582
86599
 
86583
86600
  &.e-wrap {
86584
- & .e-gridheader .e-rowcell,
86585
- & .e-gridcontent .e-rowcell,
86601
+ & .e-rowcell,
86586
86602
  & .e-columnheader .e-stackedheadercelldiv,
86587
86603
  & .e-columnheader .e-headercelldiv,
86588
86604
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
86589
86605
  @include wrap-styles;
86590
86606
  }
86591
86607
 
86608
+ & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
86609
+ white-space: nowrap;
86610
+ }
86611
+
86592
86612
  & .e-stackedheader .e-columnheader {
86593
86613
  .e-stackedheadercelldiv,
86594
86614
  .e-headercelldiv {
@@ -87146,7 +87166,8 @@ $grid-checkmark-color: $grey !default;
87146
87166
  }
87147
87167
 
87148
87168
  @if $grid-skin == 'fluent2' {
87149
- .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
87169
+ .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
87170
+ .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
87150
87171
  padding: 0 6px;
87151
87172
  }
87152
87173
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -88060,7 +88081,8 @@ $grid-checkmark-color: $grey !default;
88060
88081
  }
88061
88082
 
88062
88083
  @if $grid-skin == 'fluent2' {
88063
- .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
88084
+ .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
88085
+ .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
88064
88086
  color: $flyout-text-color-hover;
88065
88087
  }
88066
88088
  }
@@ -136230,6 +136252,8 @@ $aiassist-header-height: 46px !default;
136230
136252
  $aiassist-icon-height: 30px !default;
136231
136253
  $aiassist-icon-width: 30px !default;
136232
136254
  $send-icon-size: 14px !default;
136255
+ $send-icon-bottom: 10px !default;
136256
+ $send-icon-bigger-bottom: 11px !default;
136233
136257
  $aiassist-bigger-header-height: 50px !default;
136234
136258
  $aiassist-bigger-icon-height: 40px !default;
136235
136259
  $aiassist-bigger-icon-width: 40px !default;
@@ -136270,63 +136294,86 @@ $rating-selected-bg-color: $grey-44 !default;
136270
136294
  $send-icon-color: $gray-dark !default;
136271
136295
  $send-icon-disabled-color: $grey-88 !default;
136272
136296
  $prompt-text-border-color: $grey-white !default;
136297
+ $tbar-header-btn-focus-box-shadow: none !default;
136298
+ $tbar-header-hover-bg-color: $grey-e6 !default;
136273
136299
 
136274
136300
  @include export-module('aiassistview-bigger') {
136275
136301
  .e-bigger.e-aiassistview,
136276
136302
  .e-bigger .e-aiassistview {
136277
136303
  .e-view-header {
136278
136304
  height: $aiassist-bigger-header-height;
136305
+ .e-toolbar {
136306
+ .e-toolbar-items {
136307
+ .e-toolbar-left {
136308
+ height: calc($aiassist-bigger-header-height - 1px);
136309
+ }
136310
+ .e-toolbar-item {
136311
+ &.e-assist-view-header,
136312
+ &.e-custom-view-header {
136313
+ @if ($skin-name == 'highcontrast') {
136314
+ // To apply box-shadow styling during keyboard navigation
136315
+ padding: 1.5px;
136316
+ }
136317
+ @else {
136318
+ padding: 0;
136319
+ }
136320
+ .e-tbar-btn {
136321
+ padding: 0;
136322
+ .e-btn-icon {
136323
+ padding: 4px 4px 4px 2px;
136324
+ }
136325
+ }
136326
+ }
136327
+ }
136328
+ }
136329
+ }
136279
136330
  }
136280
136331
  .e-view-content {
136281
136332
  height: calc(100% - $aiassist-bigger-header-height);
136282
136333
  }
136283
- .e-views {
136284
- .e-prompt-icon {
136285
- min-height: $aiassist-bigger-icon-height;
136286
- }
136287
- .e-output-icon {
136288
- height: $aiassist-bigger-icon-height;
136289
- }
136290
- .e-prompt-icon,
136291
- .e-output-icon {
136292
- min-width: $aiassist-bigger-icon-width;
136293
- }
136294
- .e-loading-body,
136295
- .e-content-body,
136296
- .e-loading-footer {
136297
- padding: 2px 0 0 10px;
136298
- }
136299
- .e-content-container {
136300
- font-size: 16px;
136301
- .e-prompt-text {
136302
- padding: $prompt-text-bigger-padding;
136303
- line-height: 22px;
136304
- }
136334
+ .e-prompt-icon {
136335
+ min-height: $aiassist-bigger-icon-height;
136336
+ }
136337
+ .e-output-icon {
136338
+ height: $aiassist-bigger-icon-height;
136339
+ }
136340
+ .e-prompt-icon,
136341
+ .e-output-icon {
136342
+ min-width: $aiassist-bigger-icon-width;
136343
+ }
136344
+ .e-loading-body,
136345
+ .e-content-body,
136346
+ .e-loading-footer {
136347
+ padding: 6px 0 0 6px;
136348
+ }
136349
+ .e-prompt-text {
136350
+ padding: $prompt-text-bigger-padding;
136351
+ line-height: 22px;
136352
+ }
136353
+ .e-content-container {
136354
+ font-size: 16px;
136355
+ }
136356
+ .e-suggestion-header {
136357
+ font-size: 16px;
136358
+ font-weight: $suggesstions-header-bigger-font-weight;
136359
+ margin-bottom: 15px;
136360
+ }
136361
+ .e-suggestions {
136362
+ &.e-suggestion-item-template ul li {
136363
+ padding: 0;
136305
136364
  }
136306
- .e-suggestions {
136307
- &.e-suggestion-item-template ul li {
136308
- padding: 0;
136309
- }
136310
- .e-suggestion-header {
136311
- font-size: 16px;
136312
- font-weight: $suggesstions-header-bigger-font-weight;
136313
- margin-bottom: 15px;
136314
- }
136315
- ul {
136316
- li {
136317
- line-height: 22px;
136318
- font-weight: $suggesstions-bigger-font-weight;
136319
- padding: $suggesstions-bigger-list-padding;
136320
- margin: $suggesstions-bigger-list-margin;
136321
- }
136322
- }
136365
+ li {
136366
+ line-height: 22px;
136367
+ font-weight: $suggesstions-bigger-font-weight;
136368
+ padding: $suggesstions-bigger-list-padding;
136369
+ margin: $suggesstions-bigger-list-margin;
136323
136370
  }
136324
136371
  }
136372
+ .e-assist-send {
136373
+ font-size: $send-icon-size-bigger;
136374
+ bottom: $send-icon-bigger-bottom;
136375
+ }
136325
136376
  .e-footer {
136326
- .e-assist-send {
136327
- font-size: $send-icon-size-bigger;
136328
- bottom: 9px;
136329
- }
136330
136377
  .e-input-group.e-control-wrapper.e-multi-line-input {
136331
136378
  .e-textarea {
136332
136379
  min-height: 38px;
@@ -136335,6 +136382,11 @@ $prompt-text-border-color: $grey-white !default;
136335
136382
  min-height: 28px;
136336
136383
  }
136337
136384
  }
136385
+ &.e-rtl .e-textarea {
136386
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136387
+ padding: 6px 16px 6px 12px;
136388
+ }
136389
+ }
136338
136390
  }
136339
136391
  }
136340
136392
  .e-stop-response.e-btn-active {
@@ -136346,13 +136398,24 @@ $prompt-text-border-color: $grey-white !default;
136346
136398
  font-size: $response-stopper-bigger-font-size;
136347
136399
  }
136348
136400
  &.e-rtl {
136349
- .e-views {
136350
- .e-suggestions {
136351
- li {
136352
- margin: $suggesstions-bigger-list-margin-rtl;
136401
+ .e-view-header .e-toolbar-item {
136402
+ &.e-assist-view-header,
136403
+ &.e-custom-view-header {
136404
+ .e-tbar-btn .e-btn-icon {
136405
+ padding: 4px 2px 4px 4px;
136353
136406
  }
136354
136407
  }
136355
136408
  }
136409
+ .e-suggestions {
136410
+ li {
136411
+ margin: $suggesstions-bigger-list-margin-rtl;
136412
+ }
136413
+ }
136414
+ .e-loading-body,
136415
+ .e-content-body,
136416
+ .e-loading-footer {
136417
+ padding: 6px 6px 0 0;
136418
+ }
136356
136419
  }
136357
136420
  }
136358
136421
  }
@@ -136380,14 +136443,29 @@ $prompt-text-border-color: $grey-white !default;
136380
136443
  width: 100%;
136381
136444
  border-radius: 4px;
136382
136445
  }
136383
- .e-tbar-btn {
136384
- padding: 0;
136446
+ &.e-assist-view-header,
136447
+ &.e-custom-view-header {
136448
+ @if ($skin-name == 'highcontrast') {
136449
+ // To apply box-shadow styling during keyboard navigation
136450
+ padding: 1px;
136451
+ }
136452
+ @else {
136453
+ padding: 0;
136454
+ }
136455
+ .e-tbar-btn {
136456
+ padding: 0;
136457
+ .e-btn-icon {
136458
+ padding: 4px 4px 4px 2px;
136459
+ }
136460
+ }
136461
+ }
136462
+ &.e-active .e-btn {
136463
+ cursor: pointer;
136385
136464
  }
136386
136465
  }
136387
- }
136388
- .e-view-header .e-toolbar-item.e-active .e-btn {
136389
- border-radius: 0;
136390
- cursor: pointer;
136466
+ .e-toolbar .e-toolbar-items .e-toolbar-left {
136467
+ height: calc($aiassist-header-height - 1px);
136468
+ }
136391
136469
  }
136392
136470
  .e-view-container,
136393
136471
  .e-footer {
@@ -136437,36 +136515,94 @@ $prompt-text-border-color: $grey-white !default;
136437
136515
  }
136438
136516
  .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
136439
136517
  .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
136440
- @if $theme-name == 'highcontrast' {
136441
- padding: 6px 0 6px 5px;
136442
- }
136443
- @else {
136444
- padding: 6px 0 6px 2px;
136445
- }
136518
+ padding: 6px 2px;
136446
136519
  }
136447
136520
  }
136448
- .e-views {
136521
+ .e-output-container {
136522
+ width: 90%;
136449
136523
  display: flex;
136450
- justify-content: space-around;
136451
- .e-output-container {
136452
- width: 90%;
136453
- display: flex;
136454
- align-self: flex-start;
136455
- margin: 10px 0;
136524
+ align-self: flex-start;
136525
+ margin: 10px 0;
136526
+ }
136527
+ .e-prompt-icon {
136528
+ margin: 0 0 0 8px;
136529
+ min-height: $aiassist-icon-height;
136530
+ }
136531
+ .e-output-icon {
136532
+ height: $aiassist-icon-height;
136533
+ margin: 0 4px 0 8px;
136534
+ }
136535
+ .e-prompt-icon,
136536
+ .e-output-icon {
136537
+ border-radius: 50%;
136538
+ min-width: $aiassist-icon-width;
136539
+ }
136540
+ .e-loading-body,
136541
+ .e-content-body,
136542
+ .e-loading-footer {
136543
+ padding: 2px 0 0 6px;
136544
+ }
136545
+ .e-content-container {
136546
+ margin-top: 16px;
136547
+ font-size: 14px;
136548
+ justify-content: space-between;
136549
+ }
136550
+ .e-prompt-text {
136551
+ white-space: pre-wrap;
136552
+ height: fit-content;
136553
+ border-radius: $prompt-text-border-radius;
136554
+ padding: $prompt-text-padding;
136555
+ line-height: 20px;
136556
+ }
136557
+ .e-content-footer,
136558
+ .e-prompt-toolbar {
136559
+ opacity: 0;
136560
+ }
136561
+ .e-prompt-container {
136562
+ gap: 2px;
136563
+ align-self: flex-end;
136564
+ max-width: 70%;
136565
+ margin-bottom: 5px;
136566
+ flex-direction: column;
136567
+ &:hover .e-assist-edit-icon {
136568
+ opacity: 1;
136569
+ cursor: pointer;
136456
136570
  }
136457
- .e-prompt-icon {
136458
- margin: 0 8px;
136459
- min-height: $aiassist-icon-height;
136571
+ }
136572
+ .e-suggestion-header {
136573
+ font-size: 14px;
136574
+ font-weight: $suggesstions-header-font-weight;
136575
+ margin: 0 2px 8px 8px;
136576
+ text-align: right;
136577
+ }
136578
+ .e-suggestions {
136579
+ width: 100%;
136580
+ &.e-suggestion-item-template li {
136581
+ padding: 0;
136460
136582
  }
136461
- .e-output-icon {
136462
- height: $aiassist-icon-height;
136463
- margin-left: 10px;
136583
+ ul {
136584
+ list-style-type: none;
136585
+ padding: 0;
136586
+ margin: 0;
136587
+ display: flex;
136588
+ flex-wrap: wrap;
136589
+ justify-content: end;
136464
136590
  }
136465
- .e-prompt-icon,
136466
- .e-output-icon {
136467
- border-radius: 50%;
136468
- min-width: $aiassist-icon-width;
136591
+ li {
136592
+ line-height: 20px;
136593
+ font-weight: $suggesstions-font-weight;
136594
+ padding: $suggesstions-list-padding;
136595
+ margin: $suggesstions-list-margin;
136596
+ border-radius: $suggesstions-list-border-radius;
136597
+ cursor: pointer;
136598
+ white-space: nowrap;
136599
+ overflow: hidden;
136600
+ text-overflow: ellipsis;
136469
136601
  }
136602
+ }
136603
+ .e-views {
136604
+ display: flex;
136605
+ justify-content: space-around;
136470
136606
  .e-content-body {
136471
136607
  line-height: 25px;
136472
136608
  border-radius: 4px;
@@ -136552,85 +136688,36 @@ $prompt-text-border-color: $grey-white !default;
136552
136688
  .e-content-body > *:first-child {
136553
136689
  margin-block-start: 0;
136554
136690
  }
136555
- .e-loading-body,
136556
- .e-content-body,
136557
- .e-loading-footer {
136558
- padding: 2px 0 0 8px;
136559
- }
136560
- .e-content-footer,
136561
- .e-prompt-toolbar {
136562
- opacity: 0;
136563
- }
136564
- .e-content-container {
136565
- margin-top: 16px;
136566
- font-size: 14px;
136567
- justify-content: space-between;
136568
- .e-prompt-text {
136569
- white-space: pre-wrap;
136570
- height: fit-content;
136571
- border-radius: $prompt-text-border-radius;
136572
- padding: $prompt-text-padding;
136573
- margin-right: 2px;
136574
- line-height: 20px;
136575
- }
136576
- }
136577
- .e-suggestions {
136578
- width: 100%;
136579
- &.e-suggestion-item-template li {
136580
- padding: 0;
136581
- }
136582
- .e-suggestion-header {
136583
- font-size: 14px;
136584
- font-weight: $suggesstions-header-font-weight;
136585
- margin: 0 2px 8px 8px;
136586
- text-align: right;
136587
- }
136588
- ul {
136589
- list-style-type: none;
136590
- padding: 0;
136591
- margin: 0;
136592
- display: flex;
136593
- flex-wrap: wrap;
136594
- justify-content: end;
136595
- }
136596
- li {
136597
- line-height: 20px;
136598
- font-weight: $suggesstions-font-weight;
136599
- padding: $suggesstions-list-padding;
136600
- margin: $suggesstions-list-margin;
136601
- border-radius: $suggesstions-list-border-radius;
136602
- cursor: pointer;
136603
- white-space: nowrap;
136604
- overflow: hidden;
136605
- text-overflow: ellipsis;
136606
- }
136607
- }
136608
- .e-prompt-container {
136609
- gap: 2px;
136610
- align-self: flex-end;
136611
- max-width: 70%;
136612
- margin-bottom: 5px;
136613
- flex-direction: column;
136614
- &:hover .e-assist-edit-icon {
136615
- opacity: 1;
136616
- cursor: pointer;
136617
- }
136618
- }
136619
136691
  }
136620
136692
  .e-views,
136621
136693
  .e-custom-view,
136622
- .e-aiassist-view-content-section {
136694
+ .e-assistview-content-section {
136623
136695
  height: 100%;
136624
- overflow-y: scroll;
136696
+ overflow: scroll;
136625
136697
  &::-webkit-scrollbar {
136626
136698
  width: $ai-assist-scrollbar-width;
136699
+ height: $ai-assist-scrollbar-width;
136627
136700
  }
136628
136701
  &::-webkit-scrollbar-thumb {
136629
136702
  border-radius: 10px;
136630
136703
  }
136631
136704
  }
136632
- .e-content {
136633
- margin-right: 8px;
136705
+ .e-assist-send {
136706
+ position: absolute;
136707
+ right: 20px;
136708
+ font-size: $send-icon-size;
136709
+ bottom: $send-icon-bottom;
136710
+ padding-top: 2px;
136711
+ }
136712
+ .e-assist-send.disabled {
136713
+ pointer-events: none;
136714
+ opacity: .5;
136715
+ cursor: not-allowed;
136716
+ }
136717
+ .e-assist-send.enabled {
136718
+ pointer-events: auto;
136719
+ opacity: 1;
136720
+ cursor: pointer;
136634
136721
  }
136635
136722
  .e-footer {
136636
136723
  position: relative;
@@ -136649,23 +136736,6 @@ $prompt-text-border-color: $grey-white !default;
136649
136736
  .hide-scrollbar textarea {
136650
136737
  scrollbar-width: none;
136651
136738
  }
136652
- .e-assist-send {
136653
- position: absolute;
136654
- right: 20px;
136655
- font-size: $send-icon-size;
136656
- bottom: 8px;
136657
- padding-top: 2px;
136658
- }
136659
- .e-assist-send.disabled {
136660
- pointer-events: none;
136661
- opacity: .5;
136662
- cursor: not-allowed;
136663
- }
136664
- .e-assist-send.enabled {
136665
- pointer-events: auto;
136666
- opacity: 1;
136667
- cursor: pointer;
136668
- }
136669
136739
  &:has(.e-rtl) .e-assist-send {
136670
136740
  right: unset;
136671
136741
  left: 20px;
@@ -136677,6 +136747,13 @@ $prompt-text-border-color: $grey-white !default;
136677
136747
  .e-multi-line-input.e-rtl {
136678
136748
  padding-left: 35px;
136679
136749
  padding-right: unset;
136750
+ &.e-input-group.e-control-wrapper {
136751
+ .e-textarea {
136752
+ @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
136753
+ padding: 4px 12px 4px 8px;
136754
+ }
136755
+ }
136756
+ }
136680
136757
  }
136681
136758
  .e-input-group.e-multi-line-input {
136682
136759
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -136758,16 +136835,24 @@ $prompt-text-border-color: $grey-white !default;
136758
136835
  outline: 1px solid;
136759
136836
  }
136760
136837
  &.e-rtl {
136761
- .e-views {
136762
- .e-suggestions {
136763
- .e-suggestion-header {
136764
- text-align: left;
136765
- margin: 0 8px 8px 2px;
136766
- }
136767
- li {
136768
- margin: $suggesstions-list-margin-rtl;
136838
+ .e-view-header .e-toolbar-item {
136839
+ &.e-assist-view-header,
136840
+ &.e-custom-view-header {
136841
+ .e-tbar-btn .e-btn-icon {
136842
+ padding: 4px 2px 4px 4px;
136769
136843
  }
136770
136844
  }
136845
+ }
136846
+ .e-suggestion-header {
136847
+ text-align: left;
136848
+ margin: 0 8px 8px 2px;
136849
+ }
136850
+ .e-suggestions {
136851
+ li {
136852
+ margin: $suggesstions-list-margin-rtl;
136853
+ }
136854
+ }
136855
+ .e-views {
136771
136856
  .e-content-body {
136772
136857
  blockquote {
136773
136858
  padding-left: unset;
@@ -136782,6 +136867,17 @@ $prompt-text-border-color: $grey-white !default;
136782
136867
  }
136783
136868
  }
136784
136869
  }
136870
+ .e-loading-body,
136871
+ .e-content-body,
136872
+ .e-loading-footer {
136873
+ padding: 2px 6px 0 0;
136874
+ }
136875
+ .e-prompt-icon {
136876
+ margin: 0 8px 0 0;
136877
+ }
136878
+ .e-output-icon {
136879
+ margin: 0 8px 0 4px;
136880
+ }
136785
136881
  }
136786
136882
  }
136787
136883
  @media (max-width: 760px) {
@@ -136790,12 +136886,14 @@ $prompt-text-border-color: $grey-white !default;
136790
136886
  .e-footer {
136791
136887
  width: 100%;
136792
136888
  }
136793
- .e-view-container .e-suggestions {
136889
+ .e-view-container .e-suggestions,
136890
+ .e-prompt-content {
136794
136891
  padding-right: 8px;
136795
136892
  }
136796
136893
  &.e-rtl {
136797
- .e-view-container .e-suggestions {
136798
- padding-left: 8px;
136894
+ .e-view-container .e-suggestions,
136895
+ .e-prompt-content {
136896
+ padding: 0 0 0 8px;
136799
136897
  }
136800
136898
  }
136801
136899
  }
@@ -136833,26 +136931,55 @@ $prompt-text-border-color: $grey-white !default;
136833
136931
  }
136834
136932
  .e-tbar-btn {
136835
136933
  background: transparent;
136934
+ &:focus {
136935
+ box-shadow: none;
136936
+ }
136937
+ &:focus-visible {
136938
+ box-shadow: $tbar-header-btn-focus-box-shadow;
136939
+ @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') {
136940
+ background: $tbar-header-hover-bg-color;
136941
+ }
136942
+ }
136836
136943
  }
136837
136944
  }
136838
136945
  }
136839
- .e-views {
136840
- .e-prompt-icon,
136841
- .e-output-icon {
136842
- border: 1px solid $icon-border-color;
136843
- color: $user-logo-color;
136844
- background-color: $user-logo-bg-color;
136845
- }
136846
- .e-prompt-text {
136847
- background: $suggested-content-bg-color;
136946
+ .e-suggestion-header {
136947
+ color: $suggesstions-header-color;
136948
+ }
136949
+ .e-suggestions {
136950
+ li {
136848
136951
  color: $suggested-content-text-color;
136952
+ box-shadow: $suggestion-li-box-shadow;
136849
136953
  @if ($skin-name == 'bootstrap5.3') {
136850
136954
  border: none;
136851
136955
  }
136852
136956
  @else {
136853
- border: 1px solid $prompt-text-border-color;
136957
+ border: 1px solid $suggestion-li-border-color;
136854
136958
  }
136855
136959
  }
136960
+ }
136961
+ .e-prompt-icon,
136962
+ .e-output-icon {
136963
+ border: 1px solid $icon-border-color;
136964
+ color: $user-logo-color;
136965
+ @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
136966
+ background: $user-logo-bg-color;
136967
+ }
136968
+ @else {
136969
+ background-color: $user-logo-bg-color;
136970
+ }
136971
+ }
136972
+ .e-prompt-text {
136973
+ background: $suggested-content-bg-color;
136974
+ color: $suggested-content-text-color;
136975
+ @if ($skin-name == 'bootstrap5.3') {
136976
+ border: none;
136977
+ }
136978
+ @else {
136979
+ border: 1px solid $prompt-text-border-color;
136980
+ }
136981
+ }
136982
+ .e-views {
136856
136983
  .e-content-body {
136857
136984
  color: $response-text-color;
136858
136985
  a {
@@ -136892,21 +137019,6 @@ $prompt-text-border-color: $grey-white !default;
136892
137019
  color: rgba(255, 212, 212, 1);
136893
137020
  }
136894
137021
  }
136895
- .e-suggestions {
136896
- .e-suggestion-header {
136897
- color: $suggesstions-header-color;
136898
- }
136899
- li {
136900
- color: $suggested-content-text-color;
136901
- box-shadow: $suggestion-li-box-shadow;
136902
- @if ($skin-name == 'bootstrap5.3') {
136903
- border: none;
136904
- }
136905
- @else {
136906
- border: 1px solid $suggestion-li-border-color;
136907
- }
136908
- }
136909
- }
136910
137022
  }
136911
137023
  .e-stop-response {
136912
137024
  border-color: $response-stopper-border-color;
@@ -136916,21 +137028,21 @@ $prompt-text-border-color: $grey-white !default;
136916
137028
  }
136917
137029
  .e-views,
136918
137030
  .e-custom-view,
136919
- .e-aiassist-view-content-section {
137031
+ .e-assistview-content-section {
136920
137032
  &::-webkit-scrollbar-thumb {
136921
137033
  background: $scrollbar-color;
136922
137034
  }
136923
137035
  }
137036
+ .e-assist-send {
137037
+ color: $send-icon-color;
137038
+ &.disabled {
137039
+ color: $send-icon-disabled-color;
137040
+ }
137041
+ }
136924
137042
  .e-footer {
136925
137043
  textarea::-webkit-scrollbar-thumb {
136926
137044
  background: $scrollbar-color;
136927
137045
  }
136928
- .e-assist-send {
136929
- color: $send-icon-color;
136930
- &.disabled {
136931
- color: $send-icon-disabled-color;
136932
- }
136933
- }
136934
137046
  // To override the default border style of the textarea component for the Material and Material3 themes.
136935
137047
  .e-input-group.e-multi-line-input {
136936
137048
  @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {