@syncfusion/blazor-themes 27.1.48 → 27.1.51

package/SCSS-Themes/interactive-chat/ai-assist-view/material.scss

@@ -16,6 +16,8 @@ $aiassist-header-height: 46px !default;
 $aiassist-icon-height: 30px !default;
 $aiassist-icon-width: 30px !default;
 $send-icon-size: 14px !default;
+$send-icon-bottom: 7px !default;
+$send-icon-bigger-bottom: 13px !default;
 $aiassist-bigger-header-height: 58px !default;
 $aiassist-bigger-icon-height: 40px !default;
 $aiassist-bigger-icon-width: 40px !default;
@@ -56,63 +58,86 @@ $rating-selected-bg-color: $grey-900 !default;
 $send-icon-color: rgba($grey-light-font, .54) !default;
 $send-icon-disabled-color: $send-icon-color !default;
 $prompt-text-border-color: $grey-white !default;
+$tbar-header-btn-focus-box-shadow: none !default;
+$tbar-header-hover-bg-color: rgba($grey-black, .12) !default;
 
 @include export-module('aiassistview-bigger') {
   .e-bigger.e-aiassistview,
   .e-bigger .e-aiassistview {
     .e-view-header {
       height: $aiassist-bigger-header-height;
+      .e-toolbar {
+        .e-toolbar-items {
+          .e-toolbar-left {
+            height: calc($aiassist-bigger-header-height - 1px);
+          }
+          .e-toolbar-item {
+            &.e-assist-view-header,
+            &.e-custom-view-header {
+              @if ($skin-name == 'highcontrast') {
+                // To apply box-shadow styling during keyboard navigation
+                padding: 1.5px;
+              }
+              @else {
+                padding: 0;
+              }
+              .e-tbar-btn {
+                padding: 0;
+                .e-btn-icon {
+                  padding: 4px 4px 4px 2px;
+                }
+              }
+            }
+          }
+        }
+      }
     }
     .e-view-content {
       height: calc(100% - $aiassist-bigger-header-height);
     }
-    .e-views {
-      .e-prompt-icon {
-        min-height: $aiassist-bigger-icon-height;
-      }
-      .e-output-icon {
-        height: $aiassist-bigger-icon-height;
-      }
-      .e-prompt-icon,
-      .e-output-icon {
-        min-width: $aiassist-bigger-icon-width;
-      }
-      .e-loading-body,
-      .e-content-body,
-      .e-loading-footer {
-        padding: 2px 0 0 10px;
-      }
-      .e-content-container {
-        font-size: 16px;
-        .e-prompt-text {
-          padding: $prompt-text-bigger-padding;
-          line-height: 22px;
-        }
+    .e-prompt-icon {
+      min-height: $aiassist-bigger-icon-height;
+    }
+    .e-output-icon {
+      height: $aiassist-bigger-icon-height;
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      min-width: $aiassist-bigger-icon-width;
+    }
+    .e-loading-body,
+    .e-content-body,
+    .e-loading-footer {
+      padding: 6px 0 0 6px;
+    }
+    .e-prompt-text {
+      padding: $prompt-text-bigger-padding;
+      line-height: 22px;
+    }
+    .e-content-container {
+      font-size: 16px;
+    }
+    .e-suggestion-header {
+      font-size: 16px;
+      font-weight: $suggesstions-header-bigger-font-weight;
+      margin-bottom: 15px;
+    }
+    .e-suggestions {
+      &.e-suggestion-item-template ul li {
+        padding: 0;
       }
-      .e-suggestions {
-        &.e-suggestion-item-template ul li {
-          padding: 0;
-        }
-        .e-suggestion-header {
-          font-size: 16px;
-          font-weight: $suggesstions-header-bigger-font-weight;
-          margin-bottom: 15px;
-        }
-        ul {
-          li {
-            line-height: 22px;
-            font-weight: $suggesstions-bigger-font-weight;
-            padding: $suggesstions-bigger-list-padding;
-            margin: $suggesstions-bigger-list-margin;
-          }
-        }
+      li {
+        line-height: 22px;
+        font-weight: $suggesstions-bigger-font-weight;
+        padding: $suggesstions-bigger-list-padding;
+        margin: $suggesstions-bigger-list-margin;
       }
     }
+    .e-assist-send {
+      font-size: $send-icon-size-bigger;
+      bottom: $send-icon-bigger-bottom;
+    }
     .e-footer {
-      .e-assist-send {
-        font-size: $send-icon-size-bigger;
-        bottom: 9px;
-      }
       .e-input-group.e-control-wrapper.e-multi-line-input {
         .e-textarea {
           min-height: 38px;
@@ -121,6 +146,11 @@ $prompt-text-border-color: $grey-white !default;
             min-height: 28px;
           }
         }
+        &.e-rtl .e-textarea {
+          @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
+            padding: 6px 16px 6px 12px;
+          }
+        }
       }
     }
     .e-stop-response.e-btn-active {
@@ -132,13 +162,24 @@ $prompt-text-border-color: $grey-white !default;
       font-size: $response-stopper-bigger-font-size;
     }
     &.e-rtl {
-      .e-views {
-        .e-suggestions {
-          li {
-            margin: $suggesstions-bigger-list-margin-rtl;
+      .e-view-header .e-toolbar-item {
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          .e-tbar-btn .e-btn-icon {
+            padding: 4px 2px 4px 4px;
           }
         }
       }
+      .e-suggestions {
+        li {
+          margin: $suggesstions-bigger-list-margin-rtl;
+        }
+      }
+      .e-loading-body,
+      .e-content-body,
+      .e-loading-footer {
+        padding: 6px 6px 0 0;
+      }
     }
   }
 }
@@ -166,14 +207,29 @@ $prompt-text-border-color: $grey-white !default;
           width: 100%;
           border-radius: 4px;
         }
-        .e-tbar-btn {
-          padding: 0;
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          @if ($skin-name == 'highcontrast') {
+            // To apply box-shadow styling during keyboard navigation
+            padding: 1px;
+          }
+          @else {
+            padding: 0;
+          }
+          .e-tbar-btn {
+            padding: 0;
+            .e-btn-icon {
+              padding: 4px 4px 4px 2px;
+            }
+          }
+        }
+        &.e-active .e-btn {
+          cursor: pointer;
         }
       }
-    }
-    .e-view-header .e-toolbar-item.e-active .e-btn {
-      border-radius: 0;
-      cursor: pointer;
+      .e-toolbar .e-toolbar-items .e-toolbar-left {
+        height: calc($aiassist-header-height - 1px);
+      }
     }
     .e-view-container,
     .e-footer {
@@ -223,36 +279,94 @@ $prompt-text-border-color: $grey-white !default;
       }
       .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
       .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
-        @if $theme-name == 'highcontrast' {
-          padding: 6px 0 6px 5px;
-        }
-        @else {
-          padding: 6px 0 6px 2px;
-        }
+        padding: 6px 2px;
       }
     }
-    .e-views {
+    .e-output-container {
+      width: 90%;
       display: flex;
-      justify-content: space-around;
-      .e-output-container {
-        width: 90%;
-        display: flex;
-        align-self: flex-start;
-        margin: 10px 0;
+      align-self: flex-start;
+      margin: 10px 0;
+    }
+    .e-prompt-icon {
+      margin: 0 0 0 8px;
+      min-height: $aiassist-icon-height;
+    }
+    .e-output-icon {
+      height: $aiassist-icon-height;
+      margin: 0 4px 0 8px;
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      border-radius: 50%;
+      min-width: $aiassist-icon-width;
+    }
+    .e-loading-body,
+    .e-content-body,
+    .e-loading-footer {
+      padding: 2px 0 0 6px;
+    }
+    .e-content-container {
+      margin-top: 16px;
+      font-size: 14px;
+      justify-content: space-between;
+    }
+    .e-prompt-text {
+      white-space: pre-wrap;
+      height: fit-content;
+      border-radius: $prompt-text-border-radius;
+      padding: $prompt-text-padding;
+      line-height: 20px;
+    }
+    .e-content-footer,
+    .e-prompt-toolbar {
+      opacity: 0;
+    }
+    .e-prompt-container {
+      gap: 2px;
+      align-self: flex-end;
+      max-width: 70%;
+      margin-bottom: 5px;
+      flex-direction: column;
+      &:hover .e-assist-edit-icon {
+        opacity: 1;
+        cursor: pointer;
       }
-      .e-prompt-icon {
-        margin: 0 8px;
-        min-height: $aiassist-icon-height;
+    }
+    .e-suggestion-header {
+      font-size: 14px;
+      font-weight: $suggesstions-header-font-weight;
+      margin: 0 2px 8px 8px;
+      text-align: right;
+    }
+    .e-suggestions {
+      width: 100%;
+      &.e-suggestion-item-template li {
+        padding: 0;
       }
-      .e-output-icon {
-        height: $aiassist-icon-height;
-        margin-left: 10px;
+      ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: end;
       }
-      .e-prompt-icon,
-      .e-output-icon {
-        border-radius: 50%;
-        min-width: $aiassist-icon-width;
+      li {
+        line-height: 20px;
+        font-weight: $suggesstions-font-weight;
+        padding: $suggesstions-list-padding;
+        margin: $suggesstions-list-margin;
+        border-radius: $suggesstions-list-border-radius;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
+    }
+    .e-views {
+      display: flex;
+      justify-content: space-around;
       .e-content-body {
         line-height: 25px;
         border-radius: 4px;
@@ -338,85 +452,36 @@ $prompt-text-border-color: $grey-white !default;
       .e-content-body > *:first-child {
         margin-block-start: 0;
       }
-      .e-loading-body,
-      .e-content-body,
-      .e-loading-footer {
-        padding: 2px 0 0 8px;
-      }
-      .e-content-footer,
-      .e-prompt-toolbar {
-        opacity: 0;
-      }
-      .e-content-container {
-        margin-top: 16px;
-        font-size: 14px;
-        justify-content: space-between;
-        .e-prompt-text {
-          white-space: pre-wrap;
-          height: fit-content;
-          border-radius: $prompt-text-border-radius;
-          padding: $prompt-text-padding;
-          margin-right: 2px;
-          line-height: 20px;
-        }
-      }
-      .e-suggestions {
-        width: 100%;
-        &.e-suggestion-item-template li {
-          padding: 0;
-        }
-        .e-suggestion-header {
-          font-size: 14px;
-          font-weight: $suggesstions-header-font-weight;
-          margin: 0 2px 8px 8px;
-          text-align: right;
-        }
-        ul {
-          list-style-type: none;
-          padding: 0;
-          margin: 0;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: end;
-        }
-        li {
-          line-height: 20px;
-          font-weight: $suggesstions-font-weight;
-          padding: $suggesstions-list-padding;
-          margin: $suggesstions-list-margin;
-          border-radius: $suggesstions-list-border-radius;
-          cursor: pointer;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-      .e-prompt-container {
-        gap: 2px;
-        align-self: flex-end;
-        max-width: 70%;
-        margin-bottom: 5px;
-        flex-direction: column;
-        &:hover .e-assist-edit-icon {
-          opacity: 1;
-          cursor: pointer;
-        }
-      }
     }
     .e-views,
     .e-custom-view,
-    .e-aiassist-view-content-section {
+    .e-assistview-content-section {
       height: 100%;
-      overflow-y: scroll;
+      overflow: scroll;
       &::-webkit-scrollbar {
         width: $ai-assist-scrollbar-width;
+        height: $ai-assist-scrollbar-width;
       }
       &::-webkit-scrollbar-thumb {
         border-radius: 10px;
       }
     }
-    .e-content {
-      margin-right: 8px;
+    .e-assist-send {
+      position: absolute;
+      right: 20px;
+      font-size: $send-icon-size;
+      bottom: $send-icon-bottom;
+      padding-top: 2px;
+    }
+    .e-assist-send.disabled {
+      pointer-events: none;
+      opacity: .5;
+      cursor: not-allowed;
+    }
+    .e-assist-send.enabled {
+      pointer-events: auto;
+      opacity: 1;
+      cursor: pointer;
     }
     .e-footer {
       position: relative;
@@ -435,23 +500,6 @@ $prompt-text-border-color: $grey-white !default;
       .hide-scrollbar textarea {
         scrollbar-width: none;
       }
-      .e-assist-send {
-        position: absolute;
-        right: 20px;
-        font-size: $send-icon-size;
-        bottom: 8px;
-        padding-top: 2px;
-      }
-      .e-assist-send.disabled {
-        pointer-events: none;
-        opacity: .5;
-        cursor: not-allowed;
-      }
-      .e-assist-send.enabled {
-        pointer-events: auto;
-        opacity: 1;
-        cursor: pointer;
-      }
       &:has(.e-rtl) .e-assist-send {
         right: unset;
         left: 20px;
@@ -463,6 +511,13 @@ $prompt-text-border-color: $grey-white !default;
       .e-multi-line-input.e-rtl {
         padding-left: 35px;
         padding-right: unset;
+        &.e-input-group.e-control-wrapper {
+          .e-textarea {
+            @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
+              padding: 4px 12px 4px 8px;
+            }
+          }
+        }
       }
       .e-input-group.e-multi-line-input {
         @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -544,16 +599,24 @@ $prompt-text-border-color: $grey-white !default;
       outline: 1px solid;
     }
     &.e-rtl {
-      .e-views {
-        .e-suggestions {
-          .e-suggestion-header {
-            text-align: left;
-            margin: 0 8px 8px 2px;
-          }
-          li {
-            margin: $suggesstions-list-margin-rtl;
+      .e-view-header .e-toolbar-item {
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          .e-tbar-btn .e-btn-icon {
+            padding: 4px 2px 4px 4px;
           }
         }
+      }
+      .e-suggestion-header {
+        text-align: left;
+        margin: 0 8px 8px 2px;
+      }
+      .e-suggestions {
+        li {
+          margin: $suggesstions-list-margin-rtl;
+        }
+      }
+      .e-views {
         .e-content-body {
           blockquote {
             padding-left: unset;
@@ -568,6 +631,17 @@ $prompt-text-border-color: $grey-white !default;
           }
         }
       }
+      .e-loading-body,
+      .e-content-body,
+      .e-loading-footer {
+        padding: 2px 6px 0 0;
+      }
+      .e-prompt-icon {
+        margin: 0 8px 0 0;
+      }
+      .e-output-icon {
+        margin: 0 8px 0 4px;
+      }
     }
   }
   @media (max-width: 760px) {
@@ -576,12 +650,14 @@ $prompt-text-border-color: $grey-white !default;
       .e-footer {
         width: 100%;
       }
-      .e-view-container .e-suggestions {
+      .e-view-container .e-suggestions,
+      .e-prompt-content {
         padding-right: 8px;
       }
       &.e-rtl {
-        .e-view-container .e-suggestions {
-          padding-left: 8px;
+        .e-view-container .e-suggestions,
+        .e-prompt-content {
+          padding: 0 0 0 8px;
         }
       }
     }
@@ -619,26 +695,55 @@ $prompt-text-border-color: $grey-white !default;
         }
         .e-tbar-btn {
           background: transparent;
+          &:focus {
+            box-shadow: none;
+          }
+          &:focus-visible {
+            box-shadow: $tbar-header-btn-focus-box-shadow;
+            @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') {
+              background: $tbar-header-hover-bg-color;
+            }
+          }
         }
       }
     }
-    .e-views {
-      .e-prompt-icon,
-      .e-output-icon {
-        border: 1px solid $icon-border-color;
-        color: $user-logo-color;
-        background-color: $user-logo-bg-color;
-      }
-      .e-prompt-text {
-        background: $suggested-content-bg-color;
+    .e-suggestion-header {
+      color: $suggesstions-header-color;
+    }
+    .e-suggestions {
+      li {
         color: $suggested-content-text-color;
+        box-shadow: $suggestion-li-box-shadow;
         @if ($skin-name == 'bootstrap5.3') {
           border: none;
         }
         @else {
-          border: 1px solid $prompt-text-border-color;
+          border: 1px solid $suggestion-li-border-color;
         }
       }
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      border: 1px solid $icon-border-color;
+      color: $user-logo-color;
+      @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
+        background: $user-logo-bg-color;
+      }
+      @else {
+        background-color: $user-logo-bg-color;
+      }
+    }
+    .e-prompt-text {
+      background: $suggested-content-bg-color;
+      color: $suggested-content-text-color;
+      @if ($skin-name == 'bootstrap5.3') {
+        border: none;
+      }
+      @else {
+        border: 1px solid $prompt-text-border-color;
+      }
+    }
+    .e-views {
       .e-content-body {
         color: $response-text-color;
         a {
@@ -678,21 +783,6 @@ $prompt-text-border-color: $grey-white !default;
           color: rgba(255, 212, 212, 1);
         }
       }
-      .e-suggestions {
-        .e-suggestion-header {
-          color: $suggesstions-header-color;
-        }
-        li {
-          color: $suggested-content-text-color;
-          box-shadow: $suggestion-li-box-shadow;
-          @if ($skin-name == 'bootstrap5.3') {
-            border: none;
-          }
-          @else {
-            border: 1px solid $suggestion-li-border-color;
-          }
-        }
-      }
     }
     .e-stop-response {
       border-color: $response-stopper-border-color;
@@ -702,21 +792,21 @@ $prompt-text-border-color: $grey-white !default;
     }
     .e-views,
     .e-custom-view,
-    .e-aiassist-view-content-section {
+    .e-assistview-content-section {
       &::-webkit-scrollbar-thumb {
         background: $scrollbar-color;
       }
     }
+    .e-assist-send {
+      color: $send-icon-color;
+      &.disabled {
+        color: $send-icon-disabled-color;
+      }
+    }
     .e-footer {
       textarea::-webkit-scrollbar-thumb {
         background: $scrollbar-color;
       }
-      .e-assist-send {
-        color: $send-icon-color;
-        &.disabled {
-          color: $send-icon-disabled-color;
-        }
-      }
       // To override the default border style of the textarea component for the Material and Material3 themes.
       .e-input-group.e-multi-line-input {
         @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {