@syncfusion/ej2-richtexteditor 20.4.53 → 21.1.37

package/styles/rich-text-editor/_fusionnew-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'bootstrap5' !default;
-
 //Layout Variables Start
 $rte-border-size: 1px !default;
 $rte-2px-border-size: 2px !default;
@@ -82,6 +80,21 @@ $rte-big-inline-tmp-color-min-width: 50px;
 $rte-inline-tmp-color-min-width: 55px;
 $rte-big-color-list-span-common-padding-left-right: 0;
 $rte-default-character-count-opacity: 1;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 
 //Layout Variables End
 
@@ -93,6 +106,8 @@ $rte-full-screen-bg: $content-bg-color !default;
 $rte-content-font-color: $content-text-color !default;
 $rte-item-color: $content-text-color !default;
 $rte-icons-color: $icon-color !default;
+$rte-tlbar-expand-active: $icon-color !default;
+$rte-hover-icons-color: $icon-color !default;
 $rte-img-popup-border: 1px solid $border-light !default;
 $rte-img-popup-box-shadow: $shadow !default;
 $rte-img-popup-color: $border-light !default;
@@ -141,7 +156,7 @@ $rte-drop-text-clr: $content-text-color-alt2 !default;
 $rte-default-character-count-color: $placeholder-text-color !default;
 $rte-warning-character-count-color: $warning !default;
 $rte-error-character-count-color: $danger !default;
-$rte-img-border: dashed 2px $primary !default;
+$rte-img-border: solid 2px $primary !default;
 $rte-font-family: $font-family !default;
 $rte-content-color: $content-text-color !default;
 $rte-content-blockquote-border-left-color: solid 2px $content-text-color !default;
@@ -160,12 +175,18 @@ $rte-table-span-active-bg-color: $primary-lighter !default;
 $rte-table-span-active-border-color: $primary !default;
 $rte-table-select-border-color: $primary !default;
 $rte-table-popup-bg: $flyout-bg-color !default;
+$rte-table-resize-back-color: $flyout-bg-color !default;
 $rte-table-popup-color: $border-light !default;
 $rte-table-popup-box: $shadow !default;
 $rte-table-border-color: $border-light !default;
 $rte-table-alternate-color: $content-bg-color-alt1 !default;
 $rte-table-header-bg: $content-bg-color-alt1 !default;
 $rte-toolbar-hor-nav-border-width: 0 0 0 1px !default;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
 
 //Theme Variables End
 
@@ -193,4 +214,6 @@ $rte-big-edit-table-dlg-max-height: 373px !default;
 $toolbar-expand-icon-min-height: 40px !default;
 $rte-align-caret-icon-min-width: 24px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $content-bg-color-alt1;

package/styles/rich-text-editor/_highcontrast-definition.scss

@@ -6,13 +6,14 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 40px !default;
 $rte-big-split-btn-line-height: 50px !default;
-$skin-name: 'highcontrast' !default;
 $rte-border-color: $border-fg !default;
 $rte-full-screen-bg: $bg-base-0 !default;
 $rte-content-bg: $bg-base-0 !default;
 $rte-content-font-color: #fff !default;
 $rte-item-color: $content-font !default;
 $rte-icons-color: $content-font !default;
+$rte-tlbar-expand-active: $content-font !default;
+$rte-hover-icons-color: $content-font !default;
 $rte-content-padding: 16px !default;
 $rte-table-popup-padding: 10px !default;
 
@@ -137,6 +138,7 @@ $rte-table-span-active-bg-color: rgba($selection-bg, .2) !default;
 $rte-table-span-active-border-color: $selection-border !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $bg-base-0 !default;
+$rte-table-resize-back-color: $bg-base-0 !default;
 $rte-table-popup-color: $border-fg !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($bg-base-75, .26) !default;
 $rte-table-border-color: #bdbdbd !default;
@@ -187,4 +189,26 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 309px !default;
 $rte-big-edit-table-dlg-max-height: 400px !default;
 $rte-drop-text-width: 288px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 238px !default;
+$rte-tbar-default-bg: $bg-base-0;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;

package/styles/rich-text-editor/_highcontrast-light-definition.scss

@@ -6,13 +6,14 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 39px !default;
 $rte-big-split-btn-line-height: 47px !default;
-$skin-name: 'highcontrast' !default;
 $rte-border-color: $border-fg !default;
 $rte-full-screen-bg: $bg-base-0 !default;
 $rte-content-bg: $bg-base-0 !default;
 $rte-content-font-color: #fff !default;
 $rte-item-color: $content-font !default;
 $rte-icons-color: $content-font !default;
+$rte-tlbar-expand-active: $content-font !default;
+$rte-hover-icons-color: $content-font !default;
 $rte-table-popup-padding: 10px !default;
 
 $rte-big-quick-item-btn-width: 39px !default;
@@ -137,6 +138,7 @@ $rte-table-span-active-bg-color: rgba($selection-bg, .2) !default;
 $rte-table-span-active-border-color: $selection-border !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $bg-base-0 !default;
+$rte-table-resize-back-color: $bg-base-0 !default;
 $rte-table-popup-color: $border-fg !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($bg-base-75, .26) !default;
 $rte-table-border-color: #bdbdbd !default;
@@ -187,4 +189,26 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 309px !default;
 $rte-big-edit-table-dlg-max-height: 400px !default;
 $rte-drop-text-width: 288px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 238px !default;
+$rte-tbar-default-bg: $bg-base-0;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;

package/styles/rich-text-editor/_layout.scss

@@ -223,6 +223,7 @@
     }
 
     .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
+      display: inline-block;
       margin-left: 0;
       margin-right: 0;
       overflow-x: auto;
@@ -944,7 +945,7 @@
     .e-videoheader,
     .e-video-url-wrap {
       font-family: $rte-font-family;
-      font-size: 15px;
+      font-size: $rte-insert-dialog-font-size;
       opacity: .87;
       padding-bottom: $rte-insert-dialog-label-padding-bottom;
       padding-top: $rte-insert-dialog-label-padding-top;
@@ -1002,11 +1003,11 @@
     .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
     .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn {
       display: block;
-      height: 36px;
+      height: $rte-droparea-browsebtn-height;
       margin: 0 auto;
-      padding: 0 18px;
+      padding: $rte-droparea-browsebtn-padding;
       position: relative;
-      top: -50px;
+      top: $rte-droparea-browsebtn-top;
       @if $skin-name == 'FluentUI' {
         outline: none;
       }
@@ -1026,7 +1027,7 @@
     .e-dialog .e-img-uploadwrap.e-droparea,
     .e-dialog .e-aud-uploadwrap.e-droparea,
     .e-dialog .e-vid-uploadwrap.e-droparea {
-      line-height: 10;
+      line-height: $rte-droparea-line-height;
       min-height: 50px;
       position: relative;
     }
@@ -1079,15 +1080,15 @@
     .e-rte-table-popup.e-popup-open .e-rte-tablecell {
       border: $rte-table-span-border;
       display: inline-block;
-      height: 14px;
-      margin: 1px;
+      height: $rte-table-popup-tablecell-height;
+      margin: $rte-table-popup-tablecell-margin;
       overflow: hidden;
       vertical-align: top;
-      width: 14px;
+      width: $rte-table-popup-tablecell-width;
     }
 
     .e-rte-table-popup.e-popup-open .e-rte-table-row {
-      height: 16px;
+      height: $rte-table-popup-row-height;
     }
 
     .e-rte-table-popup.e-popup-open .e-insert-table-btn {
@@ -1171,6 +1172,7 @@
 
       .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
         white-space: nowrap;
+        display: inline-block;
       }
 
       &.e-remove-white-space {
@@ -1194,7 +1196,7 @@
         }
 
         .e-toolbar-item {
-          margin: 0 6px;
+          margin: $rte-toolbar-item-frist-last-child-margin;
           min-height: 42px;
 
           &:first-child,
@@ -1304,7 +1306,7 @@
 
         .e-toolbar-item:first-child,
         .e-toolbar-item:last-child {
-          margin: 0 6px;
+          margin: $rte-big-toolbar-item-frist-last-child-margin;
         }
 
         .e-toolbar-item .e-tbar-btn.e-btn.e-control {
@@ -1611,12 +1613,12 @@
   }
 
   .e-bigger .e-rte-table-popup.e-popup-open .e-rte-tablecell {
-    height: 16px;
-    width: 16px;
+    height: $rte-big-tablecell-height;
+    width: $rte-big-tablecell-width;
   }
 
   .e-bigger .e-rte-table-popup.e-popup-open .e-rte-table-row {
-    height: 18px;
+    height: $rte-big-table-row-height;
   }
 
   .e-table-rhelper {
@@ -1729,7 +1731,7 @@
 
     .e-linkheader {
       font-family: $rte-font-family;
-      font-size: 15px;
+      font-size: $rte-big-insert-dialog-font-size;
       opacity: .87;
       padding-bottom: $rte-insert-dialog-label-padding-bottom;
       padding-top: $rte-insert-dialog-label-padding-top;
@@ -1749,6 +1751,32 @@
     }
   }
 
+  @if $skin-name == 'Material3' {
+    .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn{
+      border-color: $outline;
+    }
+    .e-dialog .e-dlg-header-content + .e-dlg-content{
+      padding-top: 0;
+    }
+    .e-bigger .e-richtexteditor,
+    .e-richtexteditor.e-bigger {
+      .e-dialog {
+        border-radius: 16px;
+      }
+    }
+    .e-dialog .e-dlg-content{
+      padding: 7px 20px;
+    }
+    .e-toolbar-wrapper .e-toolbar .e-toolbar-item:not(.e-separator),
+    .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator) {
+      padding: 8px 4px;
+    }
+    .e-rte-quick-popup .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
+    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
+      margin: 0;
+    }
+  }
+  
   // Blazor styles start
   .e-rte-upload-popup.e-dialog .e-file-select-wrap {
     display: none;
@@ -1829,5 +1857,9 @@
   .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
     margin: 1px;
   }
+  .e-transparent.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown,
+  .e-transparent.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown {
+    visibility: hidden;
+  }
   // Blazor styles end
 }

package/styles/rich-text-editor/_material-dark-definition.scss

@@ -7,7 +7,6 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 25px !default;
 $rte-big-split-btn-line-height: 35px !default;
-$skin-name: 'material' !default;
 $rte-btn-color: rgba($grey-dark-font, .22) !default;
 $rte-border-color: $grey-700 !default;
 $rte-content-bg: $grey-dark !default;
@@ -15,6 +14,8 @@ $rte-full-screen-bg: $grey-dark !default;
 $rte-content-font-color: $grey-dark-font !default;
 $rte-item-color: $grey-dark-font !default;
 $rte-icons-color: $grey-dark-font !default;
+$rte-tlbar-expand-active: $grey-dark-font !default;
+$rte-hover-icons-color: $grey-dark-font !default;
 $rte-content-padding: 16px !default;
 $rte-table-popup-padding: 10px !default;
 $rte-toolbar-icon-size: 16px !default;
@@ -142,6 +143,7 @@ $rte-table-span-active-bg-color: rgba($accent, .2) !default;
 $rte-table-span-active-border-color: $accent !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $grey-800 !default;
+$rte-table-resize-back-color: $grey-800 !default;
 $rte-table-popup-color: $grey-black !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($grey-black, .26) !default;
 $rte-table-border-color: rgba($grey-white, .5) !default;
@@ -189,6 +191,29 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 312px !default;
 $rte-big-edit-table-dlg-max-height: 385px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
 
+$rte-tbar-default-bg: $grey-900;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
+
 //enddefult

package/styles/rich-text-editor/_material-definition.scss

@@ -6,7 +6,6 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 25px !default;
 $rte-big-split-btn-line-height: 35px !default;
-$skin-name: 'material' !default;
 $rte-btn-color: rgba($grey-black, .87) !default;
 $rte-border-color: rgba($grey-black, .12) !default;
 $rte-content-bg: $grey-white !default;
@@ -14,6 +13,8 @@ $rte-full-screen-bg: $grey-white !default;
 $rte-content-font-color: #333 !default;
 $rte-item-color: $grey-black !default;
 $rte-icons-color: $grey-black !default;
+$rte-tlbar-expand-active: $grey-black !default;
+$rte-hover-icons-color: $grey-black !default;
 $rte-content-padding: 16px !default;
 $rte-table-popup-padding: 10px !default;
 
@@ -139,6 +140,7 @@ $rte-table-span-active-bg-color: rgba($accent, .2) !default;
 $rte-table-span-active-border-color: $accent !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $grey-white !default;
+$rte-table-resize-back-color: $grey-white !default;
 $rte-table-popup-color: $grey-black !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($grey-black, .26) !default;
 $rte-table-border-color: #bdbdbd !default;
@@ -189,4 +191,26 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 312px !default;
 $rte-big-edit-table-dlg-max-height: 385px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $grey-50;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;

package/styles/rich-text-editor/_tailwind-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'tailwind' !default;
-
 //Layout Variables Start
 $rte-border-size: 1px !default;
 $rte-2px-border-size: 2px !default;
@@ -29,8 +27,8 @@ $rte-big-quick-drop-btn-icon-size: 16px !default;
 $rte-quick-drop-btn-icon-size: 14px !default;
 $rte-big-quick-drop-btn-caret-icon-size: 10px !default;
 $rte-quick-drop-btn-caret-icon-size: 12px !default;
-$rte-big-quick-drop-btn-caret-font-size: 12px !default;
-$rte-quick-drop-btn-caret-font-size: 10px !default;
+$rte-big-quick-drop-btn-caret-font-size: $text-xs !default;
+$rte-quick-drop-btn-caret-font-size: $text-xxs !default;
 $rte-big-tb-items-margin-left: 3px !default;
 $rte-tb-items-margin-left: 7px !default;
 $rte-big-tb-items-padding-left: 3px !default;
@@ -70,7 +68,7 @@ $rte-big-quick-tbar-item-min-width: 39px !default;
 $rte-content-font-size:  $text-sm !default;
 $rte-dropdown-caret-icon-size: $text-xs !default;
 $rte-big-dropdown-caret-icon-size: $text-sm !default;
-$font-weight: 400 !default;
+$font-weight: $font-weight-normal !default;
 $rte-table-popup-bdr-radius: 2px !default;
 $rte-resize-handler-width: 15px;
 $rte-resize-handler-height: 15px;
@@ -84,6 +82,21 @@ $rte-inline-tmp-color-min-width: 55px;
 $rte-big-color-list-span-common-padding-left-right: 0;
 $rte-placeholder-padding: 12px !default;
 $rte-default-character-count-opacity: 1;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 
 //Layout Variables End
 
@@ -94,6 +107,8 @@ $rte-full-screen-bg: $content-bg-color !default;
 $rte-content-font-color: $content-text-color !default;
 $rte-item-color: $content-text-color !default;
 $rte-icons-color: $icon-color !default;
+$rte-tlbar-expand-active: $icon-color !default;
+$rte-hover-icons-color: $icon-color !default;
 $rte-img-popup-border: 1px solid $border-light !default;
 $rte-img-popup-box-shadow: $shadow !default;
 $rte-img-popup-color: $border-light !default;
@@ -162,12 +177,18 @@ $rte-table-span-active-bg-color: $primary-lighter !default;
 $rte-table-span-active-border-color: $primary !default;
 $rte-table-select-border-color:  $primary !default;
 $rte-table-popup-bg: $content-bg-color !default;
+$rte-table-resize-back-color: $content-bg-color !default;
 $rte-table-popup-color: $border-light !default;
 $rte-table-popup-box: $shadow !default;
 $rte-table-border-color: $border-light !default;
 $rte-table-alternate-color: $content-bg-color-alt1 !default;
 $rte-table-header-bg: $content-bg-color-alt1 !default;
 $rte-toolbar-hor-nav-border-width: 0 0 0 1px !default;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
 
 //Theme Variables End
 
@@ -191,4 +212,6 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 283px !default;
 $rte-big-edit-table-dlg-max-height: 388px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $content-bg-color-alt2;

package/styles/rich-text-editor/_theme.scss

@@ -157,6 +157,9 @@
         .e-toolbar-item .e-tbar-btn .e-icons {
           color: $rte-icons-color;
         }
+        .e-toolbar-item .e-tbar-btn:hover .e-icons {
+          color: $rte-hover-icons-color;
+        }
 
         .e-toolbar-item.e-active .e-tbar-btn .e-icons {
           color: $rte-tb-active-font-color;
@@ -193,13 +196,22 @@
       border: 0;
     }
 
+    .e-toolbar-wrapper {
+      background: $rte-tbar-default-bg;
+    }
+
     img.e-img-focus::selection,
     audio.e-audio-focus::selection,
     .e-video-focus::selection {
       background: transparent;
       color: transparent;
     }
-
+    @if $skin-name == 'Material3' {
+      ::selection {
+        color: $white;
+        background: $primary;
+      }
+    }
     .e-rte-content,
     .e-source-content {
       background: $rte-content-bg;
@@ -457,19 +469,24 @@
 
   .e-dialog .e-img-uploadwrap .e-droptext,
   .e-dialog .e-aud-uploadwrap .e-droptext,
-  .e-dialog .e-vid-uploadwrap .e-droptext {
+  .e-dialog .e-vid-uploadwrap .e-droptext,
+  .e-dialog.e-device .e-vid-uploadwrap .e-droptext  {
     border: dashed 2px $rte-upload-drag-border-clr;
     border-radius: 4px;
     color: $rte-drop-text-clr;
     display: block;
     font-family: $rte-font-family;
     font-size: 14px;
-    height: 185px;
+    height: $rte-drop-text-height;
     margin: 0 auto;
     text-align: center;
     width: $rte-drop-text-width;
   }
 
+  .e-dialog .e-vid-uploadwrap .e-droptext {
+    height: 108px;
+  }
+
   .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
   .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
   .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
@@ -577,7 +594,9 @@
   }
 
   .e-rte-table-popup .e-span-border {
-    border: 1px solid $rte-border-color;
+    @if $skin-name != 'Material3' {
+      border: 1px solid $rte-border-color;
+    }
     display: block;
     margin-bottom: 8px;
     margin-top: 12px;
@@ -622,7 +641,7 @@
   }
 
   span.e-table-box {
-    background-color: $rte-table-popup-bg;
+    background-color: $rte-table-resize-back-color;
     border: 1px solid $rte-table-border-color;
   }
 
@@ -647,7 +666,9 @@
       color: $rte-quick-item-active-font-color;
     }
   }
-
+  .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
+    color: $rte-tlbar-expand-active;
+  }
   @if $skin-name == 'tailwind' {
     .e-richtexteditor .e-rte-toolbar .e-toolbar-extended {
       background: $rte-extended-toolbar-background;
@@ -688,6 +709,33 @@
     }
   }
 
+  @if $skin-name == 'Material3' {
+    .e-bigger .e-richtexteditor.e-rte-tb-expand {
+      border-radius: 8px;
+    }
+    .e-bigger .e-richtexteditor .e-toolbar-wrapper {
+      border-top-left-radius: $rte-border-top-left-radius;
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+    .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-extended-toolbar,
+    .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended {
+      border-top-left-radius: $rte-border-top-left-radius;
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+    .e-bigger .e-toolbar .e-toolbar-items {
+      border-top-left-radius: $rte-border-top-left-radius;
+    }
+    .e-bigger .e-toolbar .e-hor-nav {
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+    .e-bigger .e-rtl .e-toolbar .e-hor-nav {
+      border-top-left-radius: $rte-border-top-left-radius;
+      border-top-right-radius: 0;
+    }
+    .e-bigger .e-rtl .e-toolbar .e-toolbar-items {
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+  }
   // Blazor styles start
   .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
     border-bottom: 0;