@syncfusion/ej2-richtexteditor 24.1.41-569421 → 24.1.41-581025

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

@@ -16,6 +16,12 @@
           }
         }
 
+        @if $skin-name == 'bootstrap5' {
+          .e-tbar-btn:focus .e-icons {
+            color: $rte-quick-item-active-font-color;
+          }
+        }
+
         &.e-active .e-tbar-btn,
         &.e-active .e-tbar-btn:focus {
           background: $rte-tb-item-active-bg;
@@ -39,6 +45,10 @@
           .e-tbar-btn:hover .e-icons {
             color: $rte-tb-hover-font-color;
           }
+
+          .e-tbar-btn:focus .e-icons {
+            color: $primary-text-focus;
+          }
         }
 
         .e-dropdown-btn.e-active {
@@ -150,6 +160,9 @@
         .e-toolbar-item .e-tbar-btn:hover .e-icons {
           color: $rte-hover-icons-color;
         }
+        .e-toolbar-item .e-tbar-btn:focus .e-icons {
+          color: $rte-hover-icons-color;
+        }
         .e-toolbar-item.e-active .e-tbar-btn .e-icons {
           color: $rte-tb-active-font-color;
         }
@@ -187,11 +200,6 @@
     .e-toolbar-wrapper .e-rte-toolbar:not(.e-rte-tb-float) {
       border-bottom: 1px solid $rte-border-color;
     }
-  
-    .e-toolbar-wrapper.e-rte-tb-float .e-rte-toolbar {
-      border-top: 1px solid $rte-border-color;
-    }
-  
     .e-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
       border: 0;
     }
@@ -352,19 +360,15 @@
     .e-clickelem::after,
     .e-video-clickelem::after {
       background: transparent;
+      bottom: 0;
       content: '';
       cursor: default;
       display: block;
+      left: 0;
       position: absolute;
-    }
-
-    .e-clickelem::before,
-    .e-video-clickelem::before {
-      background: transparent;
-      content: '';
-      cursor: default;
-      display: block;
-      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 1;
     }
 
     .e-videoheader,
@@ -381,26 +385,6 @@
     .e-video-url-wrap textarea {
       height: 80px;
     }
-
-    @if $skin-name == 'FluentUI' {
-      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn{
-        border: 1px solid transparent;
-        &:hover{
-          border: 1px solid transparent;
-        }
-      }
-      .e-toolbar .e-toolbar-item .e-tbar-btn{
-        border: 1px solid transparent;
-        &:hover{
-          border: 1px solid transparent;
-        }
-      }
-    }
-  }
-  @if $skin-name == 'bootstrap-dark' {
-    .e-toolbar-extended .e-toolbar-item:not(.e-active) .e-tbar-btn{
-      border: 1px solid transparent;
-    }
   }
 
   .e-rte-quick-popup {
@@ -415,38 +399,6 @@
       .e-toolbar-items {
         background: $rte-quick-pop-bg;
 
-        .e-rte-backgroundcolor-dropdown {
-          .e-rte-color-content{
-            padding-top: $rte-dropdown-btn-color-content-padding;
-            @if $skin-name =='bootstrap' or $skin-name =='bootstrap-dark'{
-              padding-top: 5px;
-            }
-            height: $rte-dropdown-btn-color-content-height;
-            @if $skin-name == 'FluentUI' {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-            &:hover {
-              background: $rte-split-btn-span-hover-bg;
-            }
-          }
-
-          .e-caret {
-            &:hover {
-              background: $rte-split-btn-span-hover-bg;
-            }
-          }
-          &.e-tbar-btn:hover {
-            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' {
-              background: $rte-split-btn-hover-bg;
-            }
-            @if $skin-name =='bootstrap-dark'{
-              background: $rte-tbar-default-bg;
-            }
-          }
-        }
-
         .e-separator {
           border: .5px solid $rte-quick-vr-line-color;
         }
@@ -527,14 +479,6 @@
     }
   }
 
-  .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown {
-    .e-rte-color-content {
-      @if $skin-name =='tailwind' or $skin-name =='tailwind-dark' or $skin-name =='bootstrap5' or $skin-name =='bootstrap5-dark' or $skin-name =='material' or $skin-name =='material-dark' {
-        padding-top: 8px;
-      }
-    }
-  }
-
   .e-dialog .e-img-uploadwrap .e-droptext,
   .e-dialog .e-aud-uploadwrap .e-droptext,
   .e-dialog .e-vid-uploadwrap .e-droptext,
@@ -552,17 +496,9 @@
   }
 
   .e-dialog .e-vid-uploadwrap .e-droptext {
-    height: $rte-drop-text-height;
+    height: 108px;
   }
- 
-  .e-bigger .e-richtexteditor {
-    .e-dialog .e-img-uploadwrap .e-droptext,
-    .e-dialog .e-aud-uploadwrap .e-droptext,
-    .e-dialog .e-vid-uploadwrap .e-droptext {
-      height: $rte-big-drop-text-height;
-    }
-  }
-  
+
   .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 {
@@ -639,7 +575,7 @@
   .e-dropdown-popup {
     & ul {
       & .e-item.e-active {
-        background: $rte-dropdown-selection-bgcolor;
+        background-color: $rte-dropdown-selection-bgcolor;
         color: $rte-dropdown-selection-color;
       }
     }
@@ -736,11 +672,6 @@
     & .e-tbar-btn:hover .e-icons {
       color: $rte-quick-item-active-font-color;
     }
-    @if $skin-name == 'bootstrap5' {
-      & .e-tbar-btn:hover {
-        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;
@@ -830,19 +761,13 @@
       color: $rte-icons-color;
     }
 
-    .e-bigger .e-richtexteditor,
-    .e-richtexteditor {
-      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
-        color: $icon-color-disabled;
-      }
-    }
-
     .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
       border-radius: 4px;
     }
 
     .e-richtexteditor .e-toolbar .e-tbar-btn {
-      border: 1px solid $transparent;
+      border-bottom: 1px solid $transparent;
+      border-top: 1px solid $transparent;
     }
 
     .e-richtexteditor .e-toolbar .e-tbar-btn:hover {
@@ -854,14 +779,6 @@
       background: $rte-tb-hover-bg-color;
       border: 1px solid $rte-quick-item-hover-border-color;
     }
-
-    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn{
-      border: 1px solid $transparent;
-    }
-
-    .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-      border: 1px solid $transparent;
-    }
   }
 
   @if $skin-name == 'bootstrap5' {
@@ -873,9 +790,6 @@
     .e-richtexteditor .e-toolbar .e-insert-table-btn.e-btn:hover .e-icons {
       color: $rte-tb-hover-font-color;
     }
-    .e-rte-dropdown-popup .e-active.e-item .e-menu-icon {
-      color: $white;
-    }
   }
 
   @if $skin-name == 'Material3' {
@@ -904,9 +818,6 @@
     .e-bigger .e-rtl .e-rte-toolbar .e-toolbar-items {
       border-top-right-radius: $rte-border-top-right-radius;
     }
-    .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn{
-      color: $rte-content-color;
-    }
   }
   // Blazor styles start
   .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {