@syncfusion/blazor-themes 23.2.7 → 24.1.41

package/SCSS-Themes/schedule/schedule/fluent-dark.scss

@@ -138,7 +138,7 @@ $schedule-current-time-nrml-font-size: $text-xxs !default;
 $schedule-current-time-bgr-font-size: $text-xs !default;
 $schedule-current-time-bgr-device-font-size: $text-xs !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 $schedule-header-date-line-height: unset !default;
 $schedule-header-padding-top: $schedule-header-cells-padding !default;
 
@@ -248,7 +248,11 @@ $schedule-device-event-popup-subject-padding: 12px 24px !default;
 $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 30px !default;
 
 $schedule-event-box-shadow-1: $shadow-xl !default;
 $schedule-event-box-shadow-2: $shadow-md !default;
@@ -4085,8 +4089,8 @@ $schedule-tree-content-color: $content-text-color-alt2;
           background: $schedule-multiple-event-popup-icon-bg-color;
           border: 0;
           color: $schedule-multiple-event-popup-icon-color;
-          height: 40px;
-          width: 40px;
+          height: 35px;
+          width: 35px;
           &:focus,
           &:hover {
             background: none;
@@ -4096,16 +4100,16 @@ $schedule-tree-content-color: $content-text-color-alt2;
         .e-subject {
           font-size: 15px;
           font-weight: 500;
-          height: 40px;
+          height: 35px;
           line-height: 2.25;
-          padding: 4px 5px;
-          width: calc(100% - 95px);
+          padding: $schedule-multiple-event-popup-subject-padding;
+          width: calc(100% - 105px);
         }
 
         .e-close-icon,
         .e-edit-icon,
         .e-delete-icon {
-          font-size: 14px;
+          font-size: $schedule-multiple-event-popup-icon-font-size;
         }
       }
 
@@ -4152,13 +4156,20 @@ $schedule-tree-content-color: $content-text-color-alt2;
       }
     }
 
-    .e-edit.e-btn.e-small.e-round,
-    .e-delete.e-btn.e-small.e-round,
-    .e-close.e-btn.e-small.e-round {
+    .e-cell-popup .e-close.e-btn.e-small.e-round {
       height: $schedule-bgr-event-popup-header-icon-size;
       width: $schedule-bgr-event-popup-header-icon-size;
     }
 
+    .e-event-popup {
+      .e-edit.e-btn.e-small.e-round,
+      .e-delete.e-btn.e-small.e-round,
+      .e-close.e-btn.e-small.e-round {
+        height: $schedule-bgr-event-popup-header-icon-size;
+        width: $schedule-bgr-event-popup-header-icon-size;
+      }
+    }
+
     .e-event-popup .e-popup-header .e-header-icon-wrapper {
       .e-close-icon,
       .e-edit-icon,
@@ -4177,8 +4188,14 @@ $schedule-tree-content-color: $content-text-color-alt2;
       }
 
       .e-multiple-event-popup .e-popup-header {
+        .e-edit.e-btn.e-small.e-round,
+        .e-delete.e-btn.e-small.e-round,
+        .e-close.e-btn.e-small.e-round {
+          height: $schedule-bgr-multiple-event-popup-icon-height;
+        }
+
         .e-subject {
-          padding: $schedule-multiple-event-popup-subject-padding;
+          padding: $schedule-bgr-multiple-event-popup-subject-padding;
         }
       }
     }

package/SCSS-Themes/schedule/schedule/fluent.scss

@@ -138,7 +138,7 @@ $schedule-current-time-nrml-font-size: $text-xxs !default;
 $schedule-current-time-bgr-font-size: $text-xs !default;
 $schedule-current-time-bgr-device-font-size: $text-xs !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 $schedule-header-date-line-height: unset !default;
 $schedule-header-padding-top: $schedule-header-cells-padding !default;
 
@@ -248,7 +248,11 @@ $schedule-device-event-popup-subject-padding: 12px 24px !default;
 $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 30px !default;
 
 $schedule-event-box-shadow-1: $shadow-xl !default;
 $schedule-event-box-shadow-2: $shadow-md !default;
@@ -4085,8 +4089,8 @@ $schedule-tree-content-color: $content-text-color-alt2;
           background: $schedule-multiple-event-popup-icon-bg-color;
           border: 0;
           color: $schedule-multiple-event-popup-icon-color;
-          height: 40px;
-          width: 40px;
+          height: 35px;
+          width: 35px;
           &:focus,
           &:hover {
             background: none;
@@ -4096,16 +4100,16 @@ $schedule-tree-content-color: $content-text-color-alt2;
         .e-subject {
           font-size: 15px;
           font-weight: 500;
-          height: 40px;
+          height: 35px;
           line-height: 2.25;
-          padding: 4px 5px;
-          width: calc(100% - 95px);
+          padding: $schedule-multiple-event-popup-subject-padding;
+          width: calc(100% - 105px);
         }
 
         .e-close-icon,
         .e-edit-icon,
         .e-delete-icon {
-          font-size: 14px;
+          font-size: $schedule-multiple-event-popup-icon-font-size;
         }
       }
 
@@ -4152,13 +4156,20 @@ $schedule-tree-content-color: $content-text-color-alt2;
       }
     }
 
-    .e-edit.e-btn.e-small.e-round,
-    .e-delete.e-btn.e-small.e-round,
-    .e-close.e-btn.e-small.e-round {
+    .e-cell-popup .e-close.e-btn.e-small.e-round {
       height: $schedule-bgr-event-popup-header-icon-size;
       width: $schedule-bgr-event-popup-header-icon-size;
     }
 
+    .e-event-popup {
+      .e-edit.e-btn.e-small.e-round,
+      .e-delete.e-btn.e-small.e-round,
+      .e-close.e-btn.e-small.e-round {
+        height: $schedule-bgr-event-popup-header-icon-size;
+        width: $schedule-bgr-event-popup-header-icon-size;
+      }
+    }
+
     .e-event-popup .e-popup-header .e-header-icon-wrapper {
       .e-close-icon,
       .e-edit-icon,
@@ -4177,8 +4188,14 @@ $schedule-tree-content-color: $content-text-color-alt2;
       }
 
       .e-multiple-event-popup .e-popup-header {
+        .e-edit.e-btn.e-small.e-round,
+        .e-delete.e-btn.e-small.e-round,
+        .e-close.e-btn.e-small.e-round {
+          height: $schedule-bgr-multiple-event-popup-icon-height;
+        }
+
         .e-subject {
-          padding: $schedule-multiple-event-popup-subject-padding;
+          padding: $schedule-bgr-multiple-event-popup-subject-padding;
         }
       }
     }

package/SCSS-Themes/schedule/schedule/highcontrast.scss

@@ -135,7 +135,7 @@ $schedule-current-time-bgr-font-size: 13px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -244,7 +244,11 @@ $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 0 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($shadow, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($shadow, .12) !default;
@@ -4081,8 +4085,8 @@ $schedule-tree-content-color: #fff !default;
           background: $schedule-multiple-event-popup-icon-bg-color;
           border: 0;
           color: $schedule-multiple-event-popup-icon-color;
-          height: 40px;
-          width: 40px;
+          height: 35px;
+          width: 35px;
           &:focus,
           &:hover {
             background: none;
@@ -4092,16 +4096,16 @@ $schedule-tree-content-color: #fff !default;
         .e-subject {
           font-size: 15px;
           font-weight: 500;
-          height: 40px;
+          height: 35px;
           line-height: 2.25;
-          padding: 4px 5px;
-          width: calc(100% - 95px);
+          padding: $schedule-multiple-event-popup-subject-padding;
+          width: calc(100% - 105px);
         }
 
         .e-close-icon,
         .e-edit-icon,
         .e-delete-icon {
-          font-size: 14px;
+          font-size: $schedule-multiple-event-popup-icon-font-size;
         }
       }
 
@@ -4148,13 +4152,20 @@ $schedule-tree-content-color: #fff !default;
       }
     }
 
-    .e-edit.e-btn.e-small.e-round,
-    .e-delete.e-btn.e-small.e-round,
-    .e-close.e-btn.e-small.e-round {
+    .e-cell-popup .e-close.e-btn.e-small.e-round {
       height: $schedule-bgr-event-popup-header-icon-size;
       width: $schedule-bgr-event-popup-header-icon-size;
     }
 
+    .e-event-popup {
+      .e-edit.e-btn.e-small.e-round,
+      .e-delete.e-btn.e-small.e-round,
+      .e-close.e-btn.e-small.e-round {
+        height: $schedule-bgr-event-popup-header-icon-size;
+        width: $schedule-bgr-event-popup-header-icon-size;
+      }
+    }
+
     .e-event-popup .e-popup-header .e-header-icon-wrapper {
       .e-close-icon,
       .e-edit-icon,
@@ -4173,8 +4184,14 @@ $schedule-tree-content-color: #fff !default;
       }
 
       .e-multiple-event-popup .e-popup-header {
+        .e-edit.e-btn.e-small.e-round,
+        .e-delete.e-btn.e-small.e-round,
+        .e-close.e-btn.e-small.e-round {
+          height: $schedule-bgr-multiple-event-popup-icon-height;
+        }
+
         .e-subject {
-          padding: $schedule-multiple-event-popup-subject-padding;
+          padding: $schedule-bgr-multiple-event-popup-subject-padding;
         }
       }
     }

package/SCSS-Themes/schedule/schedule/material-dark.scss

@@ -135,7 +135,7 @@ $schedule-current-time-bgr-font-size: 12px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -244,7 +244,11 @@ $schedule-bgr-event-popup-header-icon-size: 2.8572em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 5px 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 3px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($grey-black, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($grey-black, .12) !default;
@@ -4080,8 +4084,8 @@ $schedule-tree-content-color: #fff !default;
           background: $schedule-multiple-event-popup-icon-bg-color;
           border: 0;
           color: $schedule-multiple-event-popup-icon-color;
-          height: 40px;
-          width: 40px;
+          height: 35px;
+          width: 35px;
           &:focus,
           &:hover {
             background: none;
@@ -4091,16 +4095,16 @@ $schedule-tree-content-color: #fff !default;
         .e-subject {
           font-size: 15px;
           font-weight: 500;
-          height: 40px;
+          height: 35px;
           line-height: 2.25;
-          padding: 4px 5px;
-          width: calc(100% - 95px);
+          padding: $schedule-multiple-event-popup-subject-padding;
+          width: calc(100% - 105px);
         }
 
         .e-close-icon,
         .e-edit-icon,
         .e-delete-icon {
-          font-size: 14px;
+          font-size: $schedule-multiple-event-popup-icon-font-size;
         }
       }
 
@@ -4147,13 +4151,20 @@ $schedule-tree-content-color: #fff !default;
       }
     }
 
-    .e-edit.e-btn.e-small.e-round,
-    .e-delete.e-btn.e-small.e-round,
-    .e-close.e-btn.e-small.e-round {
+    .e-cell-popup .e-close.e-btn.e-small.e-round {
       height: $schedule-bgr-event-popup-header-icon-size;
       width: $schedule-bgr-event-popup-header-icon-size;
     }
 
+    .e-event-popup {
+      .e-edit.e-btn.e-small.e-round,
+      .e-delete.e-btn.e-small.e-round,
+      .e-close.e-btn.e-small.e-round {
+        height: $schedule-bgr-event-popup-header-icon-size;
+        width: $schedule-bgr-event-popup-header-icon-size;
+      }
+    }
+
     .e-event-popup .e-popup-header .e-header-icon-wrapper {
       .e-close-icon,
       .e-edit-icon,
@@ -4172,8 +4183,14 @@ $schedule-tree-content-color: #fff !default;
       }
 
       .e-multiple-event-popup .e-popup-header {
+        .e-edit.e-btn.e-small.e-round,
+        .e-delete.e-btn.e-small.e-round,
+        .e-close.e-btn.e-small.e-round {
+          height: $schedule-bgr-multiple-event-popup-icon-height;
+        }
+
         .e-subject {
-          padding: $schedule-multiple-event-popup-subject-padding;
+          padding: $schedule-bgr-multiple-event-popup-subject-padding;
         }
       }
     }

package/SCSS-Themes/schedule/schedule/material.scss

@@ -136,7 +136,7 @@ $schedule-current-time-bgr-font-size: 12px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -241,7 +241,11 @@ $schedule-bgr-event-popup-header-icon-size: 2.8572em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 5px 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 3px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($grey-black, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($grey-black, .12) !default;
@@ -4080,8 +4084,8 @@ $schedule-tree-content-color: $shadow;
           background: $schedule-multiple-event-popup-icon-bg-color;
           border: 0;
           color: $schedule-multiple-event-popup-icon-color;
-          height: 40px;
-          width: 40px;
+          height: 35px;
+          width: 35px;
           &:focus,
           &:hover {
             background: none;
@@ -4091,16 +4095,16 @@ $schedule-tree-content-color: $shadow;
         .e-subject {
           font-size: 15px;
           font-weight: 500;
-          height: 40px;
+          height: 35px;
           line-height: 2.25;
-          padding: 4px 5px;
-          width: calc(100% - 95px);
+          padding: $schedule-multiple-event-popup-subject-padding;
+          width: calc(100% - 105px);
         }
 
         .e-close-icon,
         .e-edit-icon,
         .e-delete-icon {
-          font-size: 14px;
+          font-size: $schedule-multiple-event-popup-icon-font-size;
         }
       }
 
@@ -4147,13 +4151,20 @@ $schedule-tree-content-color: $shadow;
       }
     }
 
-    .e-edit.e-btn.e-small.e-round,
-    .e-delete.e-btn.e-small.e-round,
-    .e-close.e-btn.e-small.e-round {
+    .e-cell-popup .e-close.e-btn.e-small.e-round {
       height: $schedule-bgr-event-popup-header-icon-size;
       width: $schedule-bgr-event-popup-header-icon-size;
     }
 
+    .e-event-popup {
+      .e-edit.e-btn.e-small.e-round,
+      .e-delete.e-btn.e-small.e-round,
+      .e-close.e-btn.e-small.e-round {
+        height: $schedule-bgr-event-popup-header-icon-size;
+        width: $schedule-bgr-event-popup-header-icon-size;
+      }
+    }
+
     .e-event-popup .e-popup-header .e-header-icon-wrapper {
       .e-close-icon,
       .e-edit-icon,
@@ -4172,8 +4183,14 @@ $schedule-tree-content-color: $shadow;
       }
 
       .e-multiple-event-popup .e-popup-header {
+        .e-edit.e-btn.e-small.e-round,
+        .e-delete.e-btn.e-small.e-round,
+        .e-close.e-btn.e-small.e-round {
+          height: $schedule-bgr-multiple-event-popup-icon-height;
+        }
+
         .e-subject {
-          padding: $schedule-multiple-event-popup-subject-padding;
+          padding: $schedule-bgr-multiple-event-popup-subject-padding;
         }
       }
     }

package/SCSS-Themes/schedule/schedule/material3-dark.scss

@@ -168,7 +168,11 @@ $schedule-bgr-event-popup-header-icon-size: 30px !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: rgba($icon-color) !default;
-$schedule-multiple-event-popup-subject-padding: 5px 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: $text-base !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 // schedule toolbar definitions
 $border-size: 1px;
@@ -276,7 +280,7 @@ $schedule-timezone-enable-nrml-height: 60px !default;
 $schedule-timezone-enable-bgr-height: 66px !default;
 $schedule-header-cells-padding: 3px 3px 2px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 44px !default;
+$schedule-device-time-scale-width: 60px !default;
 $border-type: solid !default;
 $schedule-alternate-cell-border: dashed !default;
 $schedule-header-hover-border-radius: 4px !default;
@@ -4092,8 +4096,8 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
           background: $schedule-multiple-event-popup-icon-bg-color;
           border: 0;
           color: $schedule-multiple-event-popup-icon-color;
-          height: 40px;
-          width: 40px;
+          height: 35px;
+          width: 35px;
           &:focus,
           &:hover {
             background: none;
@@ -4103,16 +4107,16 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
         .e-subject {
           font-size: 15px;
           font-weight: 500;
-          height: 40px;
+          height: 35px;
           line-height: 2.25;
-          padding: 4px 5px;
-          width: calc(100% - 95px);
+          padding: $schedule-multiple-event-popup-subject-padding;
+          width: calc(100% - 105px);
         }
 
         .e-close-icon,
         .e-edit-icon,
         .e-delete-icon {
-          font-size: 14px;
+          font-size: $schedule-multiple-event-popup-icon-font-size;
         }
       }
 
@@ -4159,13 +4163,20 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
       }
     }
 
-    .e-edit.e-btn.e-small.e-round,
-    .e-delete.e-btn.e-small.e-round,
-    .e-close.e-btn.e-small.e-round {
+    .e-cell-popup .e-close.e-btn.e-small.e-round {
       height: $schedule-bgr-event-popup-header-icon-size;
       width: $schedule-bgr-event-popup-header-icon-size;
     }
 
+    .e-event-popup {
+      .e-edit.e-btn.e-small.e-round,
+      .e-delete.e-btn.e-small.e-round,
+      .e-close.e-btn.e-small.e-round {
+        height: $schedule-bgr-event-popup-header-icon-size;
+        width: $schedule-bgr-event-popup-header-icon-size;
+      }
+    }
+
     .e-event-popup .e-popup-header .e-header-icon-wrapper {
       .e-close-icon,
       .e-edit-icon,
@@ -4184,8 +4195,14 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
       }
 
       .e-multiple-event-popup .e-popup-header {
+        .e-edit.e-btn.e-small.e-round,
+        .e-delete.e-btn.e-small.e-round,
+        .e-close.e-btn.e-small.e-round {
+          height: $schedule-bgr-multiple-event-popup-icon-height;
+        }
+
         .e-subject {
-          padding: $schedule-multiple-event-popup-subject-padding;
+          padding: $schedule-bgr-multiple-event-popup-subject-padding;
         }
       }
     }

package/SCSS-Themes/schedule/schedule/material3.scss

@@ -168,7 +168,11 @@ $schedule-bgr-event-popup-header-icon-size: 30px !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: rgba($icon-color) !default;
-$schedule-multiple-event-popup-subject-padding: 5px 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: $text-base !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 // schedule toolbar definitions
 $border-size: 1px;
@@ -276,7 +280,7 @@ $schedule-timezone-enable-nrml-height: 60px !default;
 $schedule-timezone-enable-bgr-height: 66px !default;
 $schedule-header-cells-padding: 3px 3px 2px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 44px !default;
+$schedule-device-time-scale-width: 60px !default;
 $border-type: solid !default;
 $schedule-alternate-cell-border: dashed !default;
 $schedule-header-hover-border-radius: 4px !default;
@@ -4092,8 +4096,8 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
           background: $schedule-multiple-event-popup-icon-bg-color;
           border: 0;
           color: $schedule-multiple-event-popup-icon-color;
-          height: 40px;
-          width: 40px;
+          height: 35px;
+          width: 35px;
           &:focus,
           &:hover {
             background: none;
@@ -4103,16 +4107,16 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
         .e-subject {
           font-size: 15px;
           font-weight: 500;
-          height: 40px;
+          height: 35px;
           line-height: 2.25;
-          padding: 4px 5px;
-          width: calc(100% - 95px);
+          padding: $schedule-multiple-event-popup-subject-padding;
+          width: calc(100% - 105px);
         }
 
         .e-close-icon,
         .e-edit-icon,
         .e-delete-icon {
-          font-size: 14px;
+          font-size: $schedule-multiple-event-popup-icon-font-size;
         }
       }
 
@@ -4159,13 +4163,20 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
       }
     }
 
-    .e-edit.e-btn.e-small.e-round,
-    .e-delete.e-btn.e-small.e-round,
-    .e-close.e-btn.e-small.e-round {
+    .e-cell-popup .e-close.e-btn.e-small.e-round {
       height: $schedule-bgr-event-popup-header-icon-size;
       width: $schedule-bgr-event-popup-header-icon-size;
     }
 
+    .e-event-popup {
+      .e-edit.e-btn.e-small.e-round,
+      .e-delete.e-btn.e-small.e-round,
+      .e-close.e-btn.e-small.e-round {
+        height: $schedule-bgr-event-popup-header-icon-size;
+        width: $schedule-bgr-event-popup-header-icon-size;
+      }
+    }
+
     .e-event-popup .e-popup-header .e-header-icon-wrapper {
       .e-close-icon,
       .e-edit-icon,
@@ -4184,8 +4195,14 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
       }
 
       .e-multiple-event-popup .e-popup-header {
+        .e-edit.e-btn.e-small.e-round,
+        .e-delete.e-btn.e-small.e-round,
+        .e-close.e-btn.e-small.e-round {
+          height: $schedule-bgr-multiple-event-popup-icon-height;
+        }
+
         .e-subject {
-          padding: $schedule-multiple-event-popup-subject-padding;
+          padding: $schedule-bgr-multiple-event-popup-subject-padding;
         }
       }
     }