@syncfusion/ej2-angular-documenteditor 20.4.54 → 21.1.35

package/styles/document-editor/_theme.scss

@@ -32,6 +32,9 @@
         // font-size: $de-para-dlg-heading-font-size;
         font-weight: $de-para-dlg-heading-font-weight;
         margin-bottom: $de-ff-dlg-heading-mrgn-btm;
+        @if $skin-name=='Material3' {
+            font-size: 14px;
+        }
         @if $skin-name=='tailwind' {
             color: $de-dlg-heading-main-header;
         }
@@ -585,7 +588,9 @@
     .e-de-table-dia-align-label {
         display: inline-block;
         font-size: $de-table-alignment-label-font-size;
-        font-weight: $de-header-font-weight;
+        @if $skin-name !='Material3' {
+            font-weight: $de-header-font-weight;
+        }
         margin-left: $de-table-alignment-label-margin-left;
         margin-top: $de-table-alignment-label-margin-top;
     }
@@ -602,16 +607,22 @@
     .e-de-table-alignment-active {
         border: 1px solid $de-table-align-active-color;
     }
-    // .e-de-table-dialog-options-label {
-    //     font-size: $de-table-options-font-size;
-    //     font-weight: $de-table-options-font-weight;
-    //     padding-bottom: $de-table-options-padding-bottom;
-    //     @if $skin-name=='tailwind' {
-    //         color: $de-dlg-heading-main-header;
-    //     }
-    // }
+    .e-de-table-dialog-options-label {
+        @if $skin-name =='Material3' {
+            font-size: $de-table-options-font-size;
+            font-weight: $de-table-options-font-weight;
+            padding-bottom: $de-table-options-padding-bottom;
+        }
+        // @if $skin-name=='tailwind' {
+        //     color: $de-dlg-heading-main-header;
+        // }
+    }
     .e-de-table-dialog-size-label {
         padding-top: $de-table-options-padding-top !important;
+        @if $skin-name =='Material3' {
+            font-weight: 600;
+            font-size: 12px;
+        }
     }
 
     .e-de-list-ddl-header {
@@ -807,8 +818,10 @@
         .e-de-style-paragraph-group-button,
         .e-de-style-paragraph-indent-group-button {
             .e-btn {
-                background-color: $de-style-dlg-btn-bg-color;
-                border-color: $de-style-dlg-btn-border-color;
+                background: $de-style-dlg-btn-bg-color;
+                @if $skin-name !='Material3' {
+                    border-color: $de-style-dlg-btn-border-color;
+                }
                 #{if(&, '&', '*')}:focus {
                     background-color: $de-style-btn-bg-color;
                     box-shadow: $de-toggle-btn-border;
@@ -898,7 +911,7 @@
                 margin-right: $de-style-list-top;
             }
             .e-bigger {
-                .e-de-style-left-div .e-de-style-dlg-name-input {
+                .e-de-style-dlg-name-input {
                     height: $e-de-style-input-text-height-bigger;
                 }
                 .e-de-style-bold-button-size {
@@ -1471,7 +1484,7 @@
     }
     .e-de-restrict-pane,
     .e-de-op {
-        background-color: $de-op-bg-color;
+        background: $de-op-bg-color;
     }
     .e-de-restrict-pane,
     .e-de-op {
@@ -1720,13 +1733,21 @@
     }
     .e-de-font-dlg {
         width: $de-font-dlg-width;
+        @if $skin-name == 'Material3' {
+            padding: 8px
+        }
     }
     .e-de-hyperlink {
         width: $de-hyper-link-width;
     }
     .e-bigger {
         .e-de-hyperlink {
-            width: 300px;
+            @if $skin-name=='Material3' {
+                width: 320px;
+            }
+            @else {
+                width: 300px;
+            }
         }
     }
     .e-de-insert-table {
@@ -1824,14 +1845,23 @@
     }
     .e-de-table-properties-dlg {
         //height: $de-table-ppty-dlg-height;
+        @if $skin-name =='Material3' {
+            padding: 0px 8px;
+        }
         width: $de-table-ppty-dlg-width;
     }
     .e-de-table-border-shading-dlg {
         width: $de-table-border-shading-dlg-width;
+        @if $skin-name =='Material3'{
+            height: 400px
+        }
     }
     .e-de-table-cell-margin-dlg {
         height: $de-table-cell-margin-dlg-height;
         width: $de-table-cell-margin-dlg-width;
+        @if $skin-name =='Material3' {
+            padding: 0px 8px
+        }
     }
     .e-de-table-options-dlg {
         height: $de-table-options-dlg-height;
@@ -2096,15 +2126,26 @@
             }
             .e-de-style-bold-button-size {
                 margin-left: $de-style-dialog-label-bottom-margin;
-                @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' {
+                @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3' {
                     margin-right: 8px;
                     height: 35px;
                 }
             }
         }
+
+        @if $skin-name =='Material3' {
+            .e-de-style-font-group-button button,
+            .e-de-style-paragraph-indent-group-button button,
+            .e-de-style-paragraph-group-button button {
+                width: 36px;
+                border-radius: 4px;
+                margin-right: 5px;
+                background: $de-style-dlg-btn-bg-color;
+            }
+        }
         .e-de-style-bold-button-size {
             margin-left: $de-style-dialog-label-bottom-margin;
-            @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' {
+            @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3' {
                 margin-right: 8px;
                 height: 31px;
             }
@@ -2137,7 +2178,7 @@
             margin-left: $de-style-font-margin-left;
             margin-right: $de-style-font-margin-right;
         }
-        .e-de-style-left-div .e-de-style-dlg-name-input {
+        .e-de-style-dlg-name-input {
             height: $e-de-style-input-text-height;
         }
         .e-style-list {
@@ -2153,6 +2194,10 @@
             @else 
             {
               width: 135px;
+              @if $skin-name =='Material3' {
+                background: $de-style-dlg-btn-bg-color;
+                border-radius: 2px;
+              }
             }
         }
         .e-de-style-options-div,
@@ -2160,11 +2205,15 @@
             margin-bottom: $de-style-dialog-option-div-bottom-margin !important;
         }
         .e-de-style-paragraph-group-button {
-            border-right: 2px solid $de-style-toggle-btn-color;
+            @if $skin-name !='Material3' {
+                border-right: 2px solid $de-style-toggle-btn-color;
+            }
         }
         .e-de-style-font-group-button {
-            border-left: 2px solid $de-style-toggle-btn-color;
-            border-right: 2px solid $de-style-toggle-btn-color;
+            @if $skin-name !='Material3' {
+                border-left: 2px solid $de-style-toggle-btn-color;
+                border-right: 2px solid $de-style-toggle-btn-color;
+            }
             @if $skin-name=='bootstrap5' or $skin-name == 'FluentUI' {
                 padding-right: $de-style-dialog-option-div-bottom-margin;
             }
@@ -2259,14 +2308,18 @@
             margin-left: 0;
             margin-right: $de-table-ppty-dlg-measure-div-margin-left;
         }
-        // .e-de-table-ppty-dlg-left-indent-container {
-        //     bottom: $e-de-table-ppty-dlg-left-indent-container-bottom;
-        //     left: $de-table-prop-left-indnt-cntr-pos;
-        //     position: relative;
-        // }
-        // .e-de-table-ppty-dlg-left-indent-container.e-de-rtl {
-        //     right: $de-table-prop-left-indnt-cntr-pos;
-        // }
+        .e-de-table-ppty-dlg-left-indent-container {
+            @if $skin-name =='Material3' {
+                bottom: $e-de-table-ppty-dlg-left-indent-container-bottom;
+                left: $de-table-prop-left-indnt-cntr-pos;
+                position: relative;
+            }
+        }
+        .e-de-table-ppty-dlg-left-indent-container.e-de-rtl {
+            @if $skin-name =='Material3' {
+                right: $de-table-prop-left-indnt-cntr-pos;
+            }
+        }
         .e-de-table-ppty-dlg-row-height-label {
             float: right;
             margin-right: $de-table-ppty-dlg-row-height-label-margin-right;
@@ -2518,7 +2571,12 @@
         
         .e-de-ltr-btn-div {
             font-size: 12px;
-            width: 200px;
+            @if $skin-name =='Material3' {
+                width: 100px;
+            }
+            @else {
+                width: 200px;
+            }
         }
         .e-de-tbl-rtl-btn-div {
             font-size: 12px;
@@ -2802,8 +2860,10 @@
             @if $skin-name !='tailwind' and $skin-name != 'FluentUI' {
                 background-color: $de-background;
             }
-            border: 1px solid $de-cmt-separator;
-            border-radius: 2px;
+            @if $skin-name !='Material3' {
+                border: 1px solid $de-cmt-separator;
+                border-radius: 2px;
+            }
             margin: $de-cmt-sub-container-margin;
             padding: $de-cmt-sub-container-padding;
         }
@@ -2917,7 +2977,12 @@
             .e-de-track-pane-drop-btn {
                 padding-left: 0px;
                 padding-right: 0px;
-                padding-top: 5px;
+                @if $skin-name =='Material3' {
+                    padding-top: 10px;
+                }
+                @else {
+                    padding-top: 5px;
+                }
                 font-size: 13px;
                 font-weight: $de-header-font-weight;
             }
@@ -3044,7 +3109,12 @@
         }
         .e-de-cmt-textarea.e-input {
             color: $de-cmt-pant-content-font;
-            font-size: 13px;
+            @if $skin-name == 'tailwind' {
+                font-size: $de-cmt-author-nme-fnt-size;
+            }
+            @else {
+                font-size: 13px;
+            }
             line-height: normal;
             min-height: 30px;
             overflow: hidden;

package/styles/document-editor/bootstrap-dark.css

@@ -43,6 +43,10 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  content: "\e98a";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e816";
   font-family: "e-icons";
@@ -1690,7 +1694,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #1a1a1a;
+  background: #1a1a1a;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2383,7 +2387,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 20px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 32px;
 }
 

package/styles/document-editor/bootstrap.css

@@ -43,6 +43,10 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  content: "\e98a";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e816";
   font-family: "e-icons";
@@ -1686,7 +1690,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #fff;
+  background: #fff;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2379,7 +2383,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 20px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 32px;
 }
 

package/styles/document-editor/bootstrap4.css

@@ -43,6 +43,10 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  content: "\e978";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e816";
   font-family: "e-icons";
@@ -1639,7 +1643,7 @@ label[for*=_wholeWord_e-de-rtl] {
 .e-de-style-font-group-button .e-btn,
 .e-de-style-paragraph-group-button .e-btn,
 .e-de-style-paragraph-indent-group-button .e-btn {
-  background-color: #fff;
+  background: #fff;
   border-color: #ced4da;
 }
 .e-de-style-font-group-button .e-btn:focus,
@@ -1732,7 +1736,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 14px;
 }
 
-.e-bigger .e-de-style-left-div .e-de-style-dlg-name-input {
+.e-bigger .e-de-style-dlg-name-input {
   height: 41px;
 }
 .e-bigger .e-de-style-bold-button-size {
@@ -1835,7 +1839,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2519,7 +2523,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 20px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 31px;
 }
 

package/styles/document-editor/bootstrap5-dark.css

@@ -42,6 +42,11 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  color: #adb5bd;
+  content: "\e8bc";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e71d";
   font-family: "e-icons";
@@ -123,40 +128,43 @@
 .e-de-table-left-alignment::before {
   color: #adb5bd;
   content: "\e7f6";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-center-alignment::before {
   color: #adb5bd;
   content: "\e7f1";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-right-alignment::before {
   color: #adb5bd;
   content: "\e703";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-top-alignment::before {
   color: #adb5bd;
   content: "\e775";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-tablecell-center-alignment::before {
   color: #adb5bd;
   content: "\e7e5";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-tablecell-bottom-alignment::before {
   color: #adb5bd;
   content: "\e7d9";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-table-border-setting {
@@ -204,14 +212,14 @@
 .e-de-table-border-none-setting::before {
   color: #adb5bd;
   content: "\e7eb";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-table-border-box-setting::before {
   color: #adb5bd;
   content: "\e834";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -221,7 +229,7 @@
   color: #adb5bd;
   content: "\e7e8";
   font-family: "e-icons";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -230,7 +238,7 @@
 .e-de-table-border-custom-setting::before {
   color: #adb5bd;
   content: "\e7d5";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -239,14 +247,14 @@
 .e-de-para-border-none-setting::before {
   color: #adb5bd;
   content: "\e890";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-para-border-box-setting::before {
   color: #adb5bd;
   content: "\e891";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -255,7 +263,7 @@
 .e-de-para-border-shadow-setting::before {
   color: #adb5bd;
   content: "\e892";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -264,7 +272,7 @@
 .e-de-para-border-custom-setting::before {
   color: #adb5bd;
   content: "\e88f";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -1676,7 +1684,7 @@ label[for*=_wholeWord_e-de-rtl] {
 .e-de-style-font-group-button .e-btn,
 .e-de-style-paragraph-group-button .e-btn,
 .e-de-style-paragraph-indent-group-button .e-btn {
-  background-color: #212529;
+  background: #212529;
   border-color: #444c54;
 }
 .e-de-style-font-group-button .e-btn:focus,
@@ -1848,7 +1856,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #282d31;
+  background: #282d31;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2518,7 +2526,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 20px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 31px;
 }
 

package/styles/document-editor/bootstrap5.css

@@ -42,6 +42,11 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  color: #6c757d;
+  content: "\e8bc";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e71d";
   font-family: "e-icons";
@@ -123,40 +128,43 @@
 .e-de-table-left-alignment::before {
   color: #6c757d;
   content: "\e7f6";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-center-alignment::before {
   color: #6c757d;
   content: "\e7f1";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-right-alignment::before {
   color: #6c757d;
   content: "\e703";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-top-alignment::before {
   color: #6c757d;
   content: "\e775";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-tablecell-center-alignment::before {
   color: #6c757d;
   content: "\e7e5";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-tablecell-bottom-alignment::before {
   color: #6c757d;
   content: "\e7d9";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-table-border-setting {
@@ -204,14 +212,14 @@
 .e-de-table-border-none-setting::before {
   color: #6c757d;
   content: "\e7eb";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-table-border-box-setting::before {
   color: #6c757d;
   content: "\e834";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -221,7 +229,7 @@
   color: #6c757d;
   content: "\e7e8";
   font-family: "e-icons";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -230,7 +238,7 @@
 .e-de-table-border-custom-setting::before {
   color: #6c757d;
   content: "\e7d5";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -239,14 +247,14 @@
 .e-de-para-border-none-setting::before {
   color: #6c757d;
   content: "\e890";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-para-border-box-setting::before {
   color: #6c757d;
   content: "\e891";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -255,7 +263,7 @@
 .e-de-para-border-shadow-setting::before {
   color: #6c757d;
   content: "\e892";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -264,7 +272,7 @@
 .e-de-para-border-custom-setting::before {
   color: #6c757d;
   content: "\e88f";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -1676,7 +1684,7 @@ label[for*=_wholeWord_e-de-rtl] {
 .e-de-style-font-group-button .e-btn,
 .e-de-style-paragraph-group-button .e-btn,
 .e-de-style-paragraph-indent-group-button .e-btn {
-  background-color: #fff;
+  background: #fff;
   border-color: #dee2e6;
 }
 .e-de-style-font-group-button .e-btn:focus,
@@ -1848,7 +1856,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2518,7 +2526,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 20px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 31px;
 }