@syncfusion/blazor-themes 23.2.6 → 24.1.41

package/SCSS-Themes/richtexteditor/rich-text-editor/material3.scss

@@ -319,6 +319,12 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       }
     }
 
+    .e-rte-toolbar {
+      .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
+        margin-left: 0;
+      }
+    }
+
     @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
       .e-rte-toolbar .e-toolbar-item .e-dropdown-btn .e-dropdown-btn {
         font-size: $dropdown-btn-big-font-size;
@@ -536,6 +542,10 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         margin-left: $rte-tb-items-margin-left;
       }
 
+      .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
+        margin-left: 0;
+      }
+
       .e-hor-nav.e-expended-nav {
         height: auto;
         min-height: $rte-tb-expended-min-height;
@@ -736,7 +746,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         height: 100%;
         min-height: 100px;
         outline: 0 solid transparent;
-        overflow-x: auto;
         padding: $rte-content-padding;
         position: relative;
         text-align: inherit;
@@ -1285,7 +1294,8 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     height: 1px;
   }
 
-  .e-richtexteditor {
+  .e-richtexteditor,
+  .e-rte-elements {
     .e-linkheader,
     .e-audioheader,
     .e-videoheader,
@@ -2369,9 +2379,74 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
   }
 
-  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
+  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell,
+  .e-rte-elements.e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
     margin: 1px;
   }
+  .e-rte-elements{
+    .e-rte-table-popup.e-popup-open{
+      .e-rte-table-row {
+        height: 16px;
+      }
+      .e-insert-table-btn {
+        @if $skin-name == 'FluentUI' {
+          margin-top: $rte-table-popup-btn-margin-top;
+        }
+        width: 100%;
+      }
+      .e-rte-tablecell {
+        border: $rte-table-span-border;
+        display: inline-block;
+        height: 14px;
+        margin: 1px;
+        overflow: hidden;
+        vertical-align: top;
+        width: 14px;
+      }
+    }
+    .e-rte-table-popup.e-popup.e-popup-open {
+      border-radius: $rte-table-popup-bdr-radius;
+      box-shadow: $rte-table-popup-box;
+      font-size: 14px;
+      font-weight: normal;
+      min-width: 120px;
+      overflow: hidden;
+      padding: $rte-table-popup-padding;
+    }
+  }
+  
+  .e-rte-elements.e-dialog {
+    .e-img-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-aud-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-vid-uploadwrap.e-droparea .e-rte-upload-text {
+      display: inline-block;
+      line-height: normal;
+    }
+    .e-img-uploadwrap.e-droparea,
+    .e-aud-uploadwrap.e-droparea,
+    .e-vid-uploadwrap.e-droparea {
+      line-height: $rte-droparea-line-height;
+      min-height: 50px;
+      position: relative;
+    }
+    .e-img-uploadwrap.e-droparea .e-browsebtn,
+    .e-aud-uploadwrap.e-droparea .e-browsebtn,
+    .e-vid-uploadwrap.e-droparea .e-browsebtn {
+      display: block;
+      height: $rte-droparea-browsebtn-height;
+      margin: 0 auto;
+      padding: $rte-droparea-browsebtn-padding;
+      position: relative;
+      top: $rte-droparea-browsebtn-top;
+      @if $skin-name == 'FluentUI' {
+        outline: none;
+      }
+    }
+    .e-vid-uploadwrap.e-droparea .e-browsebtn,
+    .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
+      top: -130px;
+    }
+  }
   .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;
@@ -3014,7 +3089,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
   }
 
   .e-rte-table.e-alternate-border tbody tr:nth-child(2n+0) {
-    background-color: $rte-table-alternate-color;
+    background: $rte-table-alternate-color;
     @if $skin-name == 'highcontrast' {
       color: $rte-img-popup-color;
     }
@@ -3366,7 +3441,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
 
     .e-caption::before {
-      content: '\e82e';
+      content: '\e8e2';
     }
 
     .e-remove::before,
@@ -3443,7 +3518,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
 
     .e-table-header::before {
-      content: '\e7c3';
+      content: '\e7e9';
     }
 
     .e-table-remove::before {
@@ -3467,7 +3542,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
 
     .e-create-table::before {
-      content: '\e7e9';
+      content: '\e83f';
     }
 
     .e-align-bottom::before {

package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind-dark.scss

@@ -314,6 +314,12 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       }
     }
 
+    .e-rte-toolbar {
+      .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
+        margin-left: 0;
+      }
+    }
+
     @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
       .e-rte-toolbar .e-toolbar-item .e-dropdown-btn .e-dropdown-btn {
         font-size: $dropdown-btn-big-font-size;
@@ -531,6 +537,10 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         margin-left: $rte-tb-items-margin-left;
       }
 
+      .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
+        margin-left: 0;
+      }
+
       .e-hor-nav.e-expended-nav {
         height: auto;
         min-height: $rte-tb-expended-min-height;
@@ -731,7 +741,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         height: 100%;
         min-height: 100px;
         outline: 0 solid transparent;
-        overflow-x: auto;
         padding: $rte-content-padding;
         position: relative;
         text-align: inherit;
@@ -1280,7 +1289,8 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     height: 1px;
   }
 
-  .e-richtexteditor {
+  .e-richtexteditor,
+  .e-rte-elements {
     .e-linkheader,
     .e-audioheader,
     .e-videoheader,
@@ -2364,9 +2374,74 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
   }
 
-  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
+  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell,
+  .e-rte-elements.e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
     margin: 1px;
   }
+  .e-rte-elements{
+    .e-rte-table-popup.e-popup-open{
+      .e-rte-table-row {
+        height: 16px;
+      }
+      .e-insert-table-btn {
+        @if $skin-name == 'FluentUI' {
+          margin-top: $rte-table-popup-btn-margin-top;
+        }
+        width: 100%;
+      }
+      .e-rte-tablecell {
+        border: $rte-table-span-border;
+        display: inline-block;
+        height: 14px;
+        margin: 1px;
+        overflow: hidden;
+        vertical-align: top;
+        width: 14px;
+      }
+    }
+    .e-rte-table-popup.e-popup.e-popup-open {
+      border-radius: $rte-table-popup-bdr-radius;
+      box-shadow: $rte-table-popup-box;
+      font-size: 14px;
+      font-weight: normal;
+      min-width: 120px;
+      overflow: hidden;
+      padding: $rte-table-popup-padding;
+    }
+  }
+  
+  .e-rte-elements.e-dialog {
+    .e-img-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-aud-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-vid-uploadwrap.e-droparea .e-rte-upload-text {
+      display: inline-block;
+      line-height: normal;
+    }
+    .e-img-uploadwrap.e-droparea,
+    .e-aud-uploadwrap.e-droparea,
+    .e-vid-uploadwrap.e-droparea {
+      line-height: $rte-droparea-line-height;
+      min-height: 50px;
+      position: relative;
+    }
+    .e-img-uploadwrap.e-droparea .e-browsebtn,
+    .e-aud-uploadwrap.e-droparea .e-browsebtn,
+    .e-vid-uploadwrap.e-droparea .e-browsebtn {
+      display: block;
+      height: $rte-droparea-browsebtn-height;
+      margin: 0 auto;
+      padding: $rte-droparea-browsebtn-padding;
+      position: relative;
+      top: $rte-droparea-browsebtn-top;
+      @if $skin-name == 'FluentUI' {
+        outline: none;
+      }
+    }
+    .e-vid-uploadwrap.e-droparea .e-browsebtn,
+    .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
+      top: -130px;
+    }
+  }
   .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;
@@ -3009,7 +3084,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
   }
 
   .e-rte-table.e-alternate-border tbody tr:nth-child(2n+0) {
-    background-color: $rte-table-alternate-color;
+    background: $rte-table-alternate-color;
     @if $skin-name == 'highcontrast' {
       color: $rte-img-popup-color;
     }
@@ -3361,7 +3436,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
 
     .e-caption::before {
-      content: '\e82e';
+      content: '\e8e2';
     }
 
     .e-remove::before,
@@ -3438,7 +3513,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
 
     .e-table-header::before {
-      content: '\e7c3';
+      content: '\e7e9';
     }
 
     .e-table-remove::before {
@@ -3462,7 +3537,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
 
     .e-create-table::before {
-      content: '\e7e9';
+      content: '\e83f';
     }
 
     .e-align-bottom::before {

package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind.scss

@@ -314,6 +314,12 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       }
     }
 
+    .e-rte-toolbar {
+      .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
+        margin-left: 0;
+      }
+    }
+
     @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
       .e-rte-toolbar .e-toolbar-item .e-dropdown-btn .e-dropdown-btn {
         font-size: $dropdown-btn-big-font-size;
@@ -531,6 +537,10 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         margin-left: $rte-tb-items-margin-left;
       }
 
+      .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
+        margin-left: 0;
+      }
+
       .e-hor-nav.e-expended-nav {
         height: auto;
         min-height: $rte-tb-expended-min-height;
@@ -731,7 +741,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         height: 100%;
         min-height: 100px;
         outline: 0 solid transparent;
-        overflow-x: auto;
         padding: $rte-content-padding;
         position: relative;
         text-align: inherit;
@@ -1280,7 +1289,8 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     height: 1px;
   }
 
-  .e-richtexteditor {
+  .e-richtexteditor,
+  .e-rte-elements {
     .e-linkheader,
     .e-audioheader,
     .e-videoheader,
@@ -2364,9 +2374,74 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
   }
 
-  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
+  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell,
+  .e-rte-elements.e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
     margin: 1px;
   }
+  .e-rte-elements{
+    .e-rte-table-popup.e-popup-open{
+      .e-rte-table-row {
+        height: 16px;
+      }
+      .e-insert-table-btn {
+        @if $skin-name == 'FluentUI' {
+          margin-top: $rte-table-popup-btn-margin-top;
+        }
+        width: 100%;
+      }
+      .e-rte-tablecell {
+        border: $rte-table-span-border;
+        display: inline-block;
+        height: 14px;
+        margin: 1px;
+        overflow: hidden;
+        vertical-align: top;
+        width: 14px;
+      }
+    }
+    .e-rte-table-popup.e-popup.e-popup-open {
+      border-radius: $rte-table-popup-bdr-radius;
+      box-shadow: $rte-table-popup-box;
+      font-size: 14px;
+      font-weight: normal;
+      min-width: 120px;
+      overflow: hidden;
+      padding: $rte-table-popup-padding;
+    }
+  }
+  
+  .e-rte-elements.e-dialog {
+    .e-img-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-aud-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-vid-uploadwrap.e-droparea .e-rte-upload-text {
+      display: inline-block;
+      line-height: normal;
+    }
+    .e-img-uploadwrap.e-droparea,
+    .e-aud-uploadwrap.e-droparea,
+    .e-vid-uploadwrap.e-droparea {
+      line-height: $rte-droparea-line-height;
+      min-height: 50px;
+      position: relative;
+    }
+    .e-img-uploadwrap.e-droparea .e-browsebtn,
+    .e-aud-uploadwrap.e-droparea .e-browsebtn,
+    .e-vid-uploadwrap.e-droparea .e-browsebtn {
+      display: block;
+      height: $rte-droparea-browsebtn-height;
+      margin: 0 auto;
+      padding: $rte-droparea-browsebtn-padding;
+      position: relative;
+      top: $rte-droparea-browsebtn-top;
+      @if $skin-name == 'FluentUI' {
+        outline: none;
+      }
+    }
+    .e-vid-uploadwrap.e-droparea .e-browsebtn,
+    .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
+      top: -130px;
+    }
+  }
   .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;
@@ -3009,7 +3084,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
   }
 
   .e-rte-table.e-alternate-border tbody tr:nth-child(2n+0) {
-    background-color: $rte-table-alternate-color;
+    background: $rte-table-alternate-color;
     @if $skin-name == 'highcontrast' {
       color: $rte-img-popup-color;
     }
@@ -3361,7 +3436,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
 
     .e-caption::before {
-      content: '\e82e';
+      content: '\e8e2';
     }
 
     .e-remove::before,
@@ -3438,7 +3513,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
 
     .e-table-header::before {
-      content: '\e7c3';
+      content: '\e7e9';
     }
 
     .e-table-remove::before {
@@ -3462,7 +3537,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
 
     .e-create-table::before {
-      content: '\e7e9';
+      content: '\e83f';
     }
 
     .e-align-bottom::before {

package/SCSS-Themes/schedule/recurrence-editor/bootstrap-dark.scss

@@ -36,7 +36,8 @@
 @import '../../calendars/timepicker/bootstrap-dark.scss';
 /*! recurrence editor theme wise definitions*/
 $recurrence-label-bottom: 7px !default;
-$recurrence-month-label-bottom: 7px !default;
+$recurrence-month-label-bottom: 9px !default;
+$recurrence-month-label-bottom-bgr: 9px !default;
 $recurrence-week-label-bottom: 10px !default;
 $recurrence-label-font-weight: bold !default;
 $recurrence-label-font-nrml-size: 12px !default;
@@ -47,6 +48,7 @@ $recurrence-week-position-bgr-min-width: 130px !default;
 $recurrence-day-position-bgr-min-width: 190px !default;
 $recurrence-day-position-bgr-padding-left: 54px !default;
 $recurrence-end-bgr-padding-right: 8px !default;
+$recurrence-end-on-date-margin-top: 24px !default;
 
 @include export-module('recurrence-editor-layout') {
 
@@ -122,6 +124,7 @@ $recurrence-end-bgr-padding-right: 8px !default;
     .e-input-wrapper.e-end-on-date,
     .e-input-wrapper.e-end-on-count {
       padding-right: 0;
+      margin-top: $recurrence-end-on-date-margin-top;
     }
 
     &.e-rtl {
@@ -223,15 +226,6 @@ $recurrence-end-bgr-padding-right: 8px !default;
       width: 50%;
 
       &.e-end-on {
-
-        .e-end-on-label {
-          float: none;
-          font-size: $recurrence-label-font-nrml-size;
-          font-weight: $recurrence-label-font-weight;
-          margin-bottom: $recurrence-month-label-bottom;
-          padding-right: 16px;
-        }
-
         .e-end-on-left {
           padding-right: 16px;
         }
@@ -299,7 +293,8 @@ $recurrence-end-bgr-padding-right: 8px !default;
 
       .e-input-wrapper-side.e-non-week > .e-month-expander-label {
         font-size: $recurrence-label-font-bgr-size;
-        margin-bottom: 0;
+        margin-bottom: $recurrence-month-label-bottom-bgr;
+        font-weight: $recurrence-label-font-weight;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {

package/SCSS-Themes/schedule/recurrence-editor/bootstrap.scss

@@ -36,7 +36,8 @@
 @import '../../calendars/timepicker/bootstrap.scss';
 /*! recurrence editor theme wise definitions*/
 $recurrence-label-bottom: 7px !default;
-$recurrence-month-label-bottom: 7px !default;
+$recurrence-month-label-bottom: 9px !default;
+$recurrence-month-label-bottom-bgr: 9px !default;
 $recurrence-week-label-bottom: 10px !default;
 $recurrence-label-font-weight: bold !default;
 $recurrence-label-font-nrml-size: 12px !default;
@@ -47,6 +48,7 @@ $recurrence-day-position-bgr-min-width: 190px !default;
 $recurrence-day-position-bgr-padding-left: 54px !default;
 $recurrence-end-bgr-padding-right: 8px !default;
 $recurrence-week-position-min-width: 98px !default;
+$recurrence-end-on-date-margin-top: 24px !default;
 
 @include export-module('recurrence-editor-layout') {
 
@@ -122,6 +124,7 @@ $recurrence-week-position-min-width: 98px !default;
     .e-input-wrapper.e-end-on-date,
     .e-input-wrapper.e-end-on-count {
       padding-right: 0;
+      margin-top: $recurrence-end-on-date-margin-top;
     }
 
     &.e-rtl {
@@ -223,15 +226,6 @@ $recurrence-week-position-min-width: 98px !default;
       width: 50%;
 
       &.e-end-on {
-
-        .e-end-on-label {
-          float: none;
-          font-size: $recurrence-label-font-nrml-size;
-          font-weight: $recurrence-label-font-weight;
-          margin-bottom: $recurrence-month-label-bottom;
-          padding-right: 16px;
-        }
-
         .e-end-on-left {
           padding-right: 16px;
         }
@@ -299,7 +293,8 @@ $recurrence-week-position-min-width: 98px !default;
 
       .e-input-wrapper-side.e-non-week > .e-month-expander-label {
         font-size: $recurrence-label-font-bgr-size;
-        margin-bottom: 0;
+        margin-bottom: $recurrence-month-label-bottom-bgr;
+        font-weight: $recurrence-label-font-weight;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {

package/SCSS-Themes/schedule/recurrence-editor/bootstrap4.scss

@@ -36,7 +36,8 @@
 @import '../../calendars/timepicker/bootstrap4.scss';
 /*! recurrence editor theme wise definitions*/
 $recurrence-label-bottom: 7px !default;
-$recurrence-month-label-bottom: 7px !default;
+$recurrence-month-label-bottom: 3px !default;
+$recurrence-month-label-bottom-bgr: 0 !default;
 $recurrence-week-label-bottom: 10px !default;
 $recurrence-label-font-weight: 400 !default;
 $recurrence-label-font-nrml-size: 14px !default;
@@ -47,6 +48,7 @@ $recurrence-day-position-bgr-min-width: 190px !default;
 $recurrence-day-position-bgr-padding-left: 54px !default;
 $recurrence-end-bgr-padding-right: 16px !default;
 $recurrence-week-position-min-width: 98px !default;
+$recurrence-end-on-date-margin-top: 24px !default;
 
 @include export-module('recurrence-editor-layout') {
 
@@ -122,6 +124,7 @@ $recurrence-week-position-min-width: 98px !default;
     .e-input-wrapper.e-end-on-date,
     .e-input-wrapper.e-end-on-count {
       padding-right: 0;
+      margin-top: $recurrence-end-on-date-margin-top;
     }
 
     &.e-rtl {
@@ -223,15 +226,6 @@ $recurrence-week-position-min-width: 98px !default;
       width: 50%;
 
       &.e-end-on {
-
-        .e-end-on-label {
-          float: none;
-          font-size: $recurrence-label-font-nrml-size;
-          font-weight: $recurrence-label-font-weight;
-          margin-bottom: $recurrence-month-label-bottom;
-          padding-right: 16px;
-        }
-
         .e-end-on-left {
           padding-right: 16px;
         }
@@ -299,7 +293,8 @@ $recurrence-week-position-min-width: 98px !default;
 
       .e-input-wrapper-side.e-non-week > .e-month-expander-label {
         font-size: $recurrence-label-font-bgr-size;
-        margin-bottom: 0;
+        margin-bottom: $recurrence-month-label-bottom-bgr;
+        font-weight: $recurrence-label-font-weight;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {

package/SCSS-Themes/schedule/recurrence-editor/bootstrap5-dark.scss

@@ -36,10 +36,11 @@
 @import '../../calendars/timepicker/bootstrap5-dark.scss';
 /*! recurrence editor theme wise definitions*/
 $recurrence-label-bottom: 7px !default;
-$recurrence-month-label-bottom: 7px !default;
+$recurrence-month-label-bottom: 5px !default;
+$recurrence-month-label-bottom-bgr: 0 !default;
 $recurrence-week-label-bottom: 10px !default;
-$recurrence-label-font-weight: $font-weight-normal !default;
-$recurrence-label-font-nrml-size: 14px !default;
+$recurrence-label-font-weight: $font-weight-medium !default;
+$recurrence-label-font-nrml-size: 12px !default;
 $recurrence-label-font-bgr-size: 16px !default;
 $recurrence-left-padding: 0 8px 16px 0 !default;
 $recurrence-week-position-bgr-min-width: 130px !default;
@@ -47,6 +48,7 @@ $recurrence-day-position-bgr-min-width: 190px !default;
 $recurrence-day-position-bgr-padding-left: 54px !default;
 $recurrence-end-bgr-padding-right: 16px !default;
 $recurrence-week-position-min-width: 98px !default;
+$recurrence-end-on-date-margin-top: 24px !default;
 
 @include export-module('recurrence-editor-layout') {
 
@@ -122,6 +124,7 @@ $recurrence-week-position-min-width: 98px !default;
     .e-input-wrapper.e-end-on-date,
     .e-input-wrapper.e-end-on-count {
       padding-right: 0;
+      margin-top: $recurrence-end-on-date-margin-top;
     }
 
     &.e-rtl {
@@ -223,15 +226,6 @@ $recurrence-week-position-min-width: 98px !default;
       width: 50%;
 
       &.e-end-on {
-
-        .e-end-on-label {
-          float: none;
-          font-size: $recurrence-label-font-nrml-size;
-          font-weight: $recurrence-label-font-weight;
-          margin-bottom: $recurrence-month-label-bottom;
-          padding-right: 16px;
-        }
-
         .e-end-on-left {
           padding-right: 16px;
         }
@@ -299,7 +293,8 @@ $recurrence-week-position-min-width: 98px !default;
 
       .e-input-wrapper-side.e-non-week > .e-month-expander-label {
         font-size: $recurrence-label-font-bgr-size;
-        margin-bottom: 0;
+        margin-bottom: $recurrence-month-label-bottom-bgr;
+        font-weight: $recurrence-label-font-weight;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {