@syncfusion/blazor-themes 20.3.61 → 20.4.38

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

@@ -199,6 +199,7 @@ $rte-dropdown-caret-icon-size: 12px !default;
 $rte-big-dropdown-caret-icon-size: 12px !default;
 $rte-toolbar-icon-size: 16px !default;
 $rte-toolbar-big-icon-size: 18px !default;
+$rte-toolbar-hor-nav-border-width: 0 0 0 1px !default;
 
 $rte-big-inline-tmp-min-width: 48px;
 $rte-inline-tmp-min-width: 55px;
@@ -2542,15 +2543,15 @@ $rte-drop-text-mobile-width: 250px !default;
     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-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 {
     margin: 0 auto;
     width: $rte-drop-text-mobile-width;
   }
-
+  .e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
+    padding: 8px 4px;
+  }
   .e-linkheader {
     color: $rte-img-header-clr;
   }
@@ -2637,6 +2638,11 @@ $rte-drop-text-mobile-width: 250px !default;
     color: $rte-item-color;
   }
 
+  .e-richtexteditor .e-rte-toolbar .e-hor-nav:hover{
+    border: solid rgba(0, 0, 0, .12);
+    border-width: $rte-toolbar-hor-nav-border-width;
+  }
+
   @if $skin-name == 'bootstrap5' {
     .e-rte-table-popup.e-popup.e-popup-open {
       background-color: $rte-table-popup-bg;

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

@@ -212,6 +212,7 @@ $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;
 
 //Theme Variables End
 
@@ -2544,15 +2545,15 @@ $rte-drop-text-mobile-width: 250px !default;
     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-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 {
     margin: 0 auto;
     width: $rte-drop-text-mobile-width;
   }
-
+  .e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
+    padding: 8px 4px;
+  }
   .e-linkheader {
     color: $rte-img-header-clr;
   }
@@ -2639,6 +2640,11 @@ $rte-drop-text-mobile-width: 250px !default;
     color: $rte-item-color;
   }
 
+  .e-richtexteditor .e-rte-toolbar .e-hor-nav:hover{
+    border: solid rgba(0, 0, 0, .12);
+    border-width: $rte-toolbar-hor-nav-border-width;
+  }
+
   @if $skin-name == 'bootstrap5' {
     .e-rte-table-popup.e-popup.e-popup-open {
       background-color: $rte-table-popup-bg;

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

@@ -212,6 +212,7 @@ $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;
 
 //Theme Variables End
 
@@ -2544,15 +2545,15 @@ $rte-drop-text-mobile-width: 250px !default;
     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-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 {
     margin: 0 auto;
     width: $rte-drop-text-mobile-width;
   }
-
+  .e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
+    padding: 8px 4px;
+  }
   .e-linkheader {
     color: $rte-img-header-clr;
   }
@@ -2639,6 +2640,11 @@ $rte-drop-text-mobile-width: 250px !default;
     color: $rte-item-color;
   }
 
+  .e-richtexteditor .e-rte-toolbar .e-hor-nav:hover{
+    border: solid rgba(0, 0, 0, .12);
+    border-width: $rte-toolbar-hor-nav-border-width;
+  }
+
   @if $skin-name == 'bootstrap5' {
     .e-rte-table-popup.e-popup.e-popup-open {
       background-color: $rte-table-popup-bg;

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

@@ -55,8 +55,7 @@ $recurrence-end-bgr-padding-right: 8px !default;
     .e-editor {
       display: flex;
       flex-flow: row wrap;
-      margin-left: auto;
-      margin-right: auto;
+      margin: 0 auto;
       max-width: 1240px;
     }
 
@@ -108,7 +107,7 @@ $recurrence-end-bgr-padding-right: 8px !default;
 
     .e-form-right,
     .e-input-wrapper-side.e-form-right {
-      padding: 0 0 10px 8px;
+      padding: 0 0 10px;
     }
 
     .e-input-wrapper {
@@ -161,14 +160,12 @@ $recurrence-end-bgr-padding-right: 8px !default;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {
-        padding-left: 8px;
-        padding-right: 0;
+        padding: 0 0 0 8px;
       }
 
       .e-input-wrapper.e-end-on-date,
       .e-input-wrapper.e-end-on-count {
-        padding-left: 0;
-        padding-right: 8px;
+        padding: 0 8px 0 0;
       }
 
       .e-recurrenceeditor {
@@ -209,11 +206,11 @@ $recurrence-end-bgr-padding-right: 8px !default;
     }
 
     .e-month-expander tr:first-child .e-input-wrapper {
-      margin-bottom: 11px;
+      padding-bottom: 11px;
     }
 
     .e-month-expander-checkbox-wrapper.e-input-wrapper {
-      margin-top: -3px;
+      padding-top: 3px;
 
       .e-month-type .e-label {
         display: none;
@@ -279,7 +276,7 @@ $recurrence-end-bgr-padding-right: 8px !default;
 
       .e-form-right,
       .e-input-wrapper-side.e-form-right {
-        padding: 0 0 10px 12px;
+        padding: 0 0 10px;
       }
 
       .e-input-wrapper-side .e-days .e-form-left {
@@ -360,8 +357,7 @@ $recurrence-end-bgr-padding-right: 8px !default;
 
         .e-recurrence-table .e-monthday-element,
         .e-recurrence-table .e-day-position {
-          padding-left: 0;
-          padding-right: 64px;
+          padding: 0 64px 0 0;
         }
 
         .e-input-wrapper-side.e-end-on .e-end-on-label,
@@ -374,14 +370,12 @@ $recurrence-end-bgr-padding-right: 8px !default;
         }
 
         .e-input-wrapper-side.e-end-on .e-end-on-left {
-          padding-left: 12px;
-          padding-right: 0;
+          padding: 0 0 0 12px;
         }
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 0;
-          padding-right: 12px;
+          padding: 0 12px 0 0;
         }
 
         .e-recurrence-table .e-week-position {
@@ -428,8 +422,7 @@ $recurrence-end-bgr-padding-right: 8px !default;
 
       .e-input-wrapper.e-end-on-date,
       .e-input-wrapper.e-end-on-count {
-        padding-left: 10px;
-        padding-right: 0;
+        padding: 0 0 0 10px;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {
@@ -456,8 +449,13 @@ $recurrence-end-bgr-padding-right: 8px !default;
         padding-left: 20px;
       }
 
+      .e-recurrence-table .e-monthday-element {
+        margin-left: 20px;
+      }
+
       .e-week-position {
         right: 0;
+        padding-right: 10px;
       }
 
       &.e-rtl {
@@ -467,17 +465,15 @@ $recurrence-end-bgr-padding-right: 8px !default;
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 0;
-          padding-right: 10px;
+          padding: 0 10px 0 0;
         }
 
         .e-recurrence-table .e-monthday-element {
-          padding-left: 0;
+          padding: 0 20px 0 0;
         }
 
         .e-recurrence-table .e-day-position {
-          padding-right: 20px;
-          padding-left: 0;
+          padding: 0 50px 0 0;
         }
 
         .e-week-position {
@@ -505,6 +501,22 @@ $recurrence-end-bgr-padding-right: 8px !default;
     }
   }
 
+  @media (max-width: 1024px) {
+    .e-recurrenceeditor {
+
+      .e-editor {
+
+        .e-input-wrapper-side.e-end-on {
+          width: 100%;
+        }
+
+        .e-input-wrapper-side.e-non-week {
+          width: 65%;
+        }
+      }
+    }
+  }
+
   @media (max-width: 580px) {
     .e-recurrenceeditor {
       margin-left: auto;
@@ -546,8 +558,7 @@ $recurrence-end-bgr-padding-right: 8px !default;
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 10px;
-          padding-right: 0;
+          padding: 0 0 0 10px;
         }
 
         .e-input-wrapper-side.e-end-on .e-end-on-left {
@@ -564,7 +575,11 @@ $recurrence-end-bgr-padding-right: 8px !default;
         }
 
         .e-input-wrapper-side.e-non-week {
-          width: 100%;
+          width: 65%;
+        }
+
+        .e-recurrence-table .e-day-position {
+          padding-left: 50px;
         }
       }
 
@@ -575,8 +590,7 @@ $recurrence-end-bgr-padding-right: 8px !default;
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 0;
-          padding-right: 10px;
+          padding: 0 10px 0 0;
         }
       }
     }

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

@@ -55,8 +55,7 @@ $recurrence-week-position-min-width: 98px !default;
     .e-editor {
       display: flex;
       flex-flow: row wrap;
-      margin-left: auto;
-      margin-right: auto;
+      margin: 0 auto;
       max-width: 1240px;
     }
 
@@ -108,7 +107,7 @@ $recurrence-week-position-min-width: 98px !default;
 
     .e-form-right,
     .e-input-wrapper-side.e-form-right {
-      padding: 0 0 10px 8px;
+      padding: 0 0 10px;
     }
 
     .e-input-wrapper {
@@ -161,14 +160,12 @@ $recurrence-week-position-min-width: 98px !default;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {
-        padding-left: 8px;
-        padding-right: 0;
+        padding: 0 0 0 8px;
       }
 
       .e-input-wrapper.e-end-on-date,
       .e-input-wrapper.e-end-on-count {
-        padding-left: 0;
-        padding-right: 8px;
+        padding: 0 8px 0 0;
       }
 
       .e-recurrenceeditor {
@@ -209,11 +206,11 @@ $recurrence-week-position-min-width: 98px !default;
     }
 
     .e-month-expander tr:first-child .e-input-wrapper {
-      margin-bottom: 11px;
+      padding-bottom: 11px;
     }
 
     .e-month-expander-checkbox-wrapper.e-input-wrapper {
-      margin-top: -3px;
+      padding-top: 3px;
 
       .e-month-type .e-label {
         display: none;
@@ -279,7 +276,7 @@ $recurrence-week-position-min-width: 98px !default;
 
       .e-form-right,
       .e-input-wrapper-side.e-form-right {
-        padding: 0 0 10px 12px;
+        padding: 0 0 10px;
       }
 
       .e-input-wrapper-side .e-days .e-form-left {
@@ -360,8 +357,7 @@ $recurrence-week-position-min-width: 98px !default;
 
         .e-recurrence-table .e-monthday-element,
         .e-recurrence-table .e-day-position {
-          padding-left: 0;
-          padding-right: 64px;
+          padding: 0 64px 0 0;
         }
 
         .e-input-wrapper-side.e-end-on .e-end-on-label,
@@ -374,14 +370,12 @@ $recurrence-week-position-min-width: 98px !default;
         }
 
         .e-input-wrapper-side.e-end-on .e-end-on-left {
-          padding-left: 12px;
-          padding-right: 0;
+          padding: 0 0 0 12px;
         }
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 0;
-          padding-right: 12px;
+          padding: 0 12px 0 0;
         }
 
         .e-recurrence-table .e-week-position {
@@ -428,8 +422,7 @@ $recurrence-week-position-min-width: 98px !default;
 
       .e-input-wrapper.e-end-on-date,
       .e-input-wrapper.e-end-on-count {
-        padding-left: 10px;
-        padding-right: 0;
+        padding: 0 0 0 10px;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {
@@ -456,8 +449,13 @@ $recurrence-week-position-min-width: 98px !default;
         padding-left: 20px;
       }
 
+      .e-recurrence-table .e-monthday-element {
+        margin-left: 20px;
+      }
+
       .e-week-position {
         right: 0;
+        padding-right: 10px;
       }
 
       &.e-rtl {
@@ -467,17 +465,15 @@ $recurrence-week-position-min-width: 98px !default;
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 0;
-          padding-right: 10px;
+          padding: 0 10px 0 0;
         }
 
         .e-recurrence-table .e-monthday-element {
-          padding-left: 0;
+          padding: 0 20px 0 0;
         }
 
         .e-recurrence-table .e-day-position {
-          padding-right: 20px;
-          padding-left: 0;
+          padding: 0 50px 0 0;
         }
 
         .e-week-position {
@@ -505,6 +501,22 @@ $recurrence-week-position-min-width: 98px !default;
     }
   }
 
+  @media (max-width: 1024px) {
+    .e-recurrenceeditor {
+
+      .e-editor {
+
+        .e-input-wrapper-side.e-end-on {
+          width: 100%;
+        }
+
+        .e-input-wrapper-side.e-non-week {
+          width: 65%;
+        }
+      }
+    }
+  }
+
   @media (max-width: 580px) {
     .e-recurrenceeditor {
       margin-left: auto;
@@ -546,8 +558,7 @@ $recurrence-week-position-min-width: 98px !default;
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 10px;
-          padding-right: 0;
+          padding: 0 0 0 10px;
         }
 
         .e-input-wrapper-side.e-end-on .e-end-on-left {
@@ -564,7 +575,11 @@ $recurrence-week-position-min-width: 98px !default;
         }
 
         .e-input-wrapper-side.e-non-week {
-          width: 100%;
+          width: 65%;
+        }
+
+        .e-recurrence-table .e-day-position {
+          padding-left: 50px;
         }
       }
 
@@ -575,8 +590,7 @@ $recurrence-week-position-min-width: 98px !default;
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 0;
-          padding-right: 10px;
+          padding: 0 10px 0 0;
         }
       }
     }

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

@@ -55,8 +55,7 @@ $recurrence-week-position-min-width: 98px !default;
     .e-editor {
       display: flex;
       flex-flow: row wrap;
-      margin-left: auto;
-      margin-right: auto;
+      margin: 0 auto;
       max-width: 1240px;
     }
 
@@ -108,7 +107,7 @@ $recurrence-week-position-min-width: 98px !default;
 
     .e-form-right,
     .e-input-wrapper-side.e-form-right {
-      padding: 0 0 10px 8px;
+      padding: 0 0 10px;
     }
 
     .e-input-wrapper {
@@ -161,14 +160,12 @@ $recurrence-week-position-min-width: 98px !default;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {
-        padding-left: 8px;
-        padding-right: 0;
+        padding: 0 0 0 8px;
       }
 
       .e-input-wrapper.e-end-on-date,
       .e-input-wrapper.e-end-on-count {
-        padding-left: 0;
-        padding-right: 8px;
+        padding: 0 8px 0 0;
       }
 
       .e-recurrenceeditor {
@@ -209,11 +206,11 @@ $recurrence-week-position-min-width: 98px !default;
     }
 
     .e-month-expander tr:first-child .e-input-wrapper {
-      margin-bottom: 11px;
+      padding-bottom: 11px;
     }
 
     .e-month-expander-checkbox-wrapper.e-input-wrapper {
-      margin-top: -3px;
+      padding-top: 3px;
 
       .e-month-type .e-label {
         display: none;
@@ -279,7 +276,7 @@ $recurrence-week-position-min-width: 98px !default;
 
       .e-form-right,
       .e-input-wrapper-side.e-form-right {
-        padding: 0 0 10px 12px;
+        padding: 0 0 10px;
       }
 
       .e-input-wrapper-side .e-days .e-form-left {
@@ -360,8 +357,7 @@ $recurrence-week-position-min-width: 98px !default;
 
         .e-recurrence-table .e-monthday-element,
         .e-recurrence-table .e-day-position {
-          padding-left: 0;
-          padding-right: 64px;
+          padding: 0 64px 0 0;
         }
 
         .e-input-wrapper-side.e-end-on .e-end-on-label,
@@ -374,14 +370,12 @@ $recurrence-week-position-min-width: 98px !default;
         }
 
         .e-input-wrapper-side.e-end-on .e-end-on-left {
-          padding-left: 12px;
-          padding-right: 0;
+          padding: 0 0 0 12px;
         }
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 0;
-          padding-right: 12px;
+          padding: 0 12px 0 0;
         }
 
         .e-recurrence-table .e-week-position {
@@ -428,8 +422,7 @@ $recurrence-week-position-min-width: 98px !default;
 
       .e-input-wrapper.e-end-on-date,
       .e-input-wrapper.e-end-on-count {
-        padding-left: 10px;
-        padding-right: 0;
+        padding: 0 0 0 10px;
       }
 
       .e-input-wrapper-side.e-end-on .e-end-on-left {
@@ -456,8 +449,13 @@ $recurrence-week-position-min-width: 98px !default;
         padding-left: 20px;
       }
 
+      .e-recurrence-table .e-monthday-element {
+        margin-left: 20px;
+      }
+
       .e-week-position {
         right: 0;
+        padding-right: 10px;
       }
 
       &.e-rtl {
@@ -467,17 +465,15 @@ $recurrence-week-position-min-width: 98px !default;
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 0;
-          padding-right: 10px;
+          padding: 0 10px 0 0;
         }
 
         .e-recurrence-table .e-monthday-element {
-          padding-left: 0;
+          padding: 0 20px 0 0;
         }
 
         .e-recurrence-table .e-day-position {
-          padding-right: 20px;
-          padding-left: 0;
+          padding: 0 50px 0 0;
         }
 
         .e-week-position {
@@ -505,6 +501,22 @@ $recurrence-week-position-min-width: 98px !default;
     }
   }
 
+  @media (max-width: 1024px) {
+    .e-recurrenceeditor {
+
+      .e-editor {
+
+        .e-input-wrapper-side.e-end-on {
+          width: 100%;
+        }
+
+        .e-input-wrapper-side.e-non-week {
+          width: 65%;
+        }
+      }
+    }
+  }
+
   @media (max-width: 580px) {
     .e-recurrenceeditor {
       margin-left: auto;
@@ -546,8 +558,7 @@ $recurrence-week-position-min-width: 98px !default;
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 10px;
-          padding-right: 0;
+          padding: 0 0 0 10px;
         }
 
         .e-input-wrapper-side.e-end-on .e-end-on-left {
@@ -564,7 +575,11 @@ $recurrence-week-position-min-width: 98px !default;
         }
 
         .e-input-wrapper-side.e-non-week {
-          width: 100%;
+          width: 65%;
+        }
+
+        .e-recurrence-table .e-day-position {
+          padding-left: 50px;
         }
       }
 
@@ -575,8 +590,7 @@ $recurrence-week-position-min-width: 98px !default;
 
         .e-input-wrapper.e-end-on-date,
         .e-input-wrapper.e-end-on-count {
-          padding-left: 0;
-          padding-right: 10px;
+          padding: 0 10px 0 0;
         }
       }
     }