@syncfusion/ej2-richtexteditor 20.4.52 → 21.1.35

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

@@ -7,13 +7,14 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 41px !default;
 $rte-big-split-btn-line-height: 50px !default;
-$skin-name: 'fabric' !default;
 $rte-border-color: $neutral-light !default;
 $rte-full-screen-bg: $neutral-white !default;
 $rte-content-bg: $neutral-white !default;
 $rte-content-font-color: $neutral-light-font !default;
 $rte-item-color: $neutral-light-font !default;
 $rte-icons-color: $neutral-light-font !default;
+$rte-tlbar-expand-active: $neutral-light-font !default;
+$rte-hover-icons-color: $neutral-light-font !default;
 
 $rte-big-quick-item-btn-width: 39px !default;
 $rte-quick-item-btn-width: 27px !default;
@@ -137,6 +138,7 @@ $rte-table-span-active-bg-color: $theme-darker !default;
 $rte-table-span-active-border-color: $theme-tertiary !default;
 $rte-table-select-border-color: $theme-primary !default;
 $rte-table-popup-bg: $neutral-lighter-alt !default;
+$rte-table-resize-back-color: $neutral-lighter-alt !default;
 $rte-table-popup-color: $neutral-light-font !default;
 $rte-table-popup-box: 0 2px 5px 0 rgba($shadow, .26) !default;
 $rte-table-border-color: $neutral-tertiary !default;
@@ -187,6 +189,28 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 335px !default;
 $rte-big-edit-table-dlg-max-height: 427px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $neutral-lighter;
+$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;
 
 //enddefault

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

@@ -6,13 +6,14 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 41px !default;
 $rte-big-split-btn-line-height: 50px !default;
-$skin-name: 'fabric' !default;
 $rte-border-color: $neutral-quintenaryalt !default;
 $rte-full-screen-bg: $neutral-white !default;
 $rte-content-bg: $neutral-white !default;
 $rte-content-font-color: #333 !default;
 $rte-item-color: $neutral-light-fontalt !default;
 $rte-icons-color: $neutral-light-fontalt !default;
+$rte-tlbar-expand-active: $neutral-light-fontalt !default;
+$rte-hover-icons-color: $neutral-light-fontalt !default;
 $rte-content-padding: 16px !default;
 $rte-table-popup-padding: 10px !default;
 
@@ -137,6 +138,7 @@ $rte-table-span-active-bg-color: rgba($theme-primary, .2) !default;
 $rte-table-span-active-border-color: $theme-primary !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $neutral-white !default;
+$rte-table-resize-back-color: $neutral-white !default;
 $rte-table-popup-color: $theme-light-font !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($neutral-light-fontalt, .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: 335px !default;
 $rte-big-edit-table-dlg-max-height: 427px !default;
 $rte-drop-text-width: 290px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 240px !default;
+$rte-tbar-default-bg: $neutral-white;
+$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/_fluent-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'FluentUI' !default;
-
 //Layout Variables Start
 $rte-border-size: 1px !default;
 $rte-2px-border-size: 2px !default;
@@ -31,8 +29,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: 8px !default;
 $rte-tb-items-margin-left: 8px !default;
 $rte-big-tb-items-padding-left: 8px !default;
@@ -56,8 +54,8 @@ $rte-big-drop-btn-action-padding-left: 10px !default;
 $rte-big-drop-btn-action-padding-right: 6px !default;
 $rte-colorpicker-parent-padding: 7px !default;
 $rte-colorpicker-parent-padding-hover: 7px !default;
-$rte-colorpicker-parent-padding-top: 7px !default;
-$rte-colorpicker-parent-padding-hover-top: 7px !default;
+$rte-colorpicker-parent-padding-top: 0 !default;
+$rte-colorpicker-parent-padding-hover-top: 0 !default;
 $rte-colorpicker-parent-padding-active-hover: 7px !default;
 $rte-font-icon-width: 30px !default;
 $rte-font-arrow-width: 12px !default;
@@ -86,6 +84,21 @@ $rte-big-inline-tmp-color-min-width: 50px;
 $rte-inline-tmp-color-min-width: 36px;
 $rte-big-color-list-span-common-padding-left-right: 7px;
 $rte-default-character-count-opacity: .8;
+$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
 
@@ -97,6 +110,8 @@ $rte-full-screen-bg: $content-bg-color !default;
 $rte-content-font-color: $content-text-color !default;
 $rte-item-color: $icon-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-lg !default;
 $rte-img-popup-color: $border-light !default;
@@ -145,7 +160,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;
@@ -164,12 +179,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: $flyout-border !default;
 $rte-table-popup-box: $shadow-lg !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
 
@@ -196,4 +217,6 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 306px !default;
 $rte-big-edit-table-dlg-max-height: 388px !default;
 $rte-drop-text-width: 292px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 242px !default;
+$rte-tbar-default-bg: $content-bg-color-alt2;

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;