@syncfusion/ej2-schedule 19.3.55 → 19.4.38

package/styles/schedule/_layout.scss

@@ -40,10 +40,6 @@
         }
       }
 
-      .e-toolbar-pop {
-        overflow: auto;
-      }
-
       .e-tbar-btn {
         .e-tbar-btn-text {
           cursor: pointer;
@@ -74,7 +70,9 @@
           &.e-tbtn-txt {
             .e-icons.e-icon-right.e-btn-icon.e-icon-down-arrow {
               font-size: $schedule-tbar-down-arrow-font-size;
-              padding-top: $schedule-tbar-down-arrow-padding-top;
+              @if ($schedule-skin != 'bootstrap5') {
+                padding-top: $schedule-tbar-down-arrow-padding-top;
+              }
             }
           }
         }
@@ -127,11 +125,7 @@
           }
 
           .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
-            @if $schedule-skin == 'bootstrap4' {
-              padding-right: 0;
-            }
-
-            @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
+            @if ($schedule-skin == 'tailwind' or $schedule-skin == 'fabric' or $schedule-skin == 'bootstrap-dark' or $schedule-skin == 'fabric-dark' or $schedule-skin == 'highcontrast') {
               padding: 0 12px;
             }
           }
@@ -206,6 +200,10 @@
         .e-date-range .e-tbar-btn .e-tbar-btn-text {
           font-size: $schedule-header-device-font-size;
         }
+
+        .e-toolbar-pop {
+          overflow: auto;
+        }
       }
 
       .e-content-wrap.e-scroll-hidden {
@@ -290,17 +288,14 @@
 
     .e-resource-tree-popup {
       background: $schedule-tree-bg-color;
+      box-shadow: $schedule-more-indicator-shadow-color-res-tree-popup;
       height: 100%;
       position: absolute;
       width: 250px;
 
       @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-        box-shadow: $schedule-more-indicator-shadow-color;
         color: $schedule-primary-content-font-color;
       }
-      @else {
-        box-shadow: 0 3px 4px .2px $schedule-more-indicator-shadow-color;
-      }
 
       .e-resource-tree {
         height: 100%;
@@ -1270,10 +1265,7 @@
         cursor: default;
         font-weight: 400;
         height: $schedule-month-header-cells-nrml-height;
-        padding: 3px;
-        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-          padding: 8px;
-        }
+        padding: $schedule-month-header-cells-padding;
       }
 
       .e-content-table {
@@ -1458,6 +1450,7 @@
 
           .e-content span.e-day {
             display: block;
+            margin: 0 auto;
           }
 
           .e-other-month {
@@ -1475,9 +1468,8 @@
             background-color: $schedule-appointment-bg-color;
             border-radius: 50%;
             height: 5px;
-            margin-left: 13px;
-            margin-top: -6px;
-            position: absolute;
+            margin: -6px auto 0;
+            position: relative;
             width: 5px;
           }
         }
@@ -1534,10 +1526,6 @@
         border-left-width: 0;
       }
 
-      .e-calendar-table td:not(.e-cell) {
-        border-left: $border-size $border-type $schedule-content-border-color;
-      }
-
       .e-resource .e-month-calendar {
         max-width: 100%;
         min-width: 100%;
@@ -1584,12 +1572,8 @@
         color: $schedule-primary-content-font-color;
         font-size: 13px;
         overflow: hidden;
-        padding: 4px 15px;
+        padding: $schedule-timeline-year-resource-text-padding;
         text-overflow: ellipsis;
-
-        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-          padding: 4px 12px;
-        }
       }
 
       .e-resource-left-td {
@@ -1613,14 +1597,10 @@
           border-width: 0 1px 1px 0;
           color: $schedule-primary-content-font-color;
           height: $schedule-timeline-year-work-cells-height;
-          padding-left: 15px;
+          padding-left: $schedule-timeline-year-resource-cells-padding-left;
           padding-right: 0;
           vertical-align: middle;
 
-          @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-            padding-left: 12px;
-          }
-
           &.e-child-node {
             background-color: $schedule-workhour-bg-color;
           }
@@ -1676,13 +1656,9 @@
         &.e-current-day .e-date-header {
           background-color: $schedule-current-date-bg-color;
           border-radius: 50%;
-          color: $schedule-active-color;
+          color: $schedule-current-day-active-color;
           margin: 2px;
           width: 20px;
-
-          @if ($schedule-skin == 'highcontrast') {
-            color: $schedule-active-font-color;
-          }
         }
 
         &.e-selected-cell {
@@ -1770,12 +1746,8 @@
         cursor: default;
         font-weight: 400;
         height: $schedule-month-header-cells-nrml-height;
-        padding: 0;
+        padding: $schedule-timeline-year-left-indent-padding;
         text-align: center;
-
-        @if ($schedule-skin == 'bootstrap4') {
-          padding: 8px;
-        }
       }
 
       .e-month-header,
@@ -1949,12 +1921,9 @@
       .e-date-header-wrap table tbody td {
         height: $schedule-timeline-header-cells-height;
         overflow: hidden;
-        padding: 5px;
+        padding: $schedule-timeline-date-header-wrap-padding;
         text-overflow: ellipsis;
         white-space: nowrap;
-        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-          padding: 8px 0 8px 8px;
-        }
       }
 
       .e-date-header-wrap table tbody td.e-time-slots {
@@ -1995,11 +1964,8 @@
         color: $schedule-primary-content-font-color;
         font-size: 13px;
         overflow: hidden;
-        padding: 4px 15px;
+        padding: $schedule-timeline-year-resource-text-padding;
         text-overflow: ellipsis;
-        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-          padding: 4px 12px;
-        }
       }
 
       .e-resource-left-td {
@@ -2019,12 +1985,9 @@
         border-width: 0 1px 1px 0;
         color: $schedule-primary-content-font-color;
         height: $schedule-timeline-work-cells-height;
-        padding-left: 15px;
+        padding-left: $schedule-timeline-year-resource-cells-padding-left;
         padding-right: 0;
         vertical-align: middle;
-        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-          padding-left: 12px;
-        }
 
         &:focus {
           background-color: $schedule-hover-bg-color;
@@ -2046,7 +2009,7 @@
 
       &.e-ignore-whitespace .e-work-cells,
       &.e-ignore-whitespace .e-resource-cells {
-        height: 42px;
+        height: 60px;
       }
 
       &.e-virtual-mask .e-work-cells {
@@ -2391,11 +2354,7 @@
         border-left: 3px solid $schedule-appointment-bg-color;
         border-right: 0;
         cursor: default;
-        padding: 0 8px;
-
-        @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-          padding: 0 16px;
-        }
+        padding: $schedule-month-agenda-appointment-padding;
 
         &:hover {
           background: $schedule-hover-bg-color;
@@ -2452,10 +2411,7 @@
       }
 
       .e-agenda-item.e-month-agenda-view {
-        padding: 10px 0;
-        @if ($schedule-skin == 'tailwind') {
-          padding: 16px 0 0;
-        }
+        padding: $schedule-month-agenda-item-padding;
       }
 
       .e-agenda-parent.e-month-agenda-view {
@@ -2496,6 +2452,10 @@
           border-right: 0;
           vertical-align: top;
           width: 75px;
+
+          .e-resource-name {
+            white-space: normal;
+          }
         }
 
         .e-day-padding {
@@ -2733,6 +2693,10 @@
           border-right: 0;
           vertical-align: top;
           width: 75px;
+
+          .e-resource-name {
+            white-space: normal;
+          }
         }
 
         .e-day-padding {
@@ -2816,7 +2780,9 @@
             margin: $schedule-tbar-btn-bgr-mrgn;
             min-height: $schedule-tbar-btn-bgr-minheight;
             min-width: $schedule-tbar-btn-bgr-minwidth;
-            padding: $schedule-tbar-btn-bgr-padding;
+            @if ($schedule-skin != 'bootstrap' and $schedule-skin != 'bootstrap4' and $schedule-skin != 'bootstrap-dark') {
+              padding: $schedule-tbar-btn-bgr-padding;
+            }
 
             &.e-tbtn-txt {
               .e-icons {
@@ -2836,6 +2802,9 @@
               @if ($schedule-skin == 'tailwind') {
                 padding-bottom: 2px;
               }
+              @if ($schedule-skin == 'bootstrap5') {
+                padding-top: 3px;
+              }
             }
            }
 
@@ -3018,6 +2987,10 @@
     }
   }
 
+  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
+    width: 485px;
+  }
+
   .e-dialog.e-quick-dialog.e-following-events-dialog {
     width: 420px;
 
@@ -3049,6 +3022,14 @@
       display: none;
     }
 
+    .e-dlg-header-content {
+      border-bottom: $schedule-alert-dialog-border;
+    }
+
+    .e-footer-content {
+      border-top: $schedule-alert-dialog-border;
+    }
+
     .e-quick-dialog-cancel {
       box-shadow: none;
     }
@@ -3092,15 +3073,23 @@
 
     .e-subject-container,
     .e-start-container,
-    .e-start-time-zone-container,
     .e-description-label {
       padding-right: 8px;
     }
 
+    .e-start-time-zone-container {
+      padding-left: 4px;
+      padding-right: 8px;
+    }
+
     .e-location-container,
-    .e-end-container,
+    .e-end-container {
+      padding-left: 8px;
+    }
+
     .e-end-time-zone-container {
       padding-left: 8px;
+      padding-right: 4px;
     }
 
     .e-all-day-container {
@@ -3139,12 +3128,8 @@
     .e-start-input-container,
     .e-end-input-container {
       display: flex;
-      padding-bottom: 12px;
+      padding-bottom: $schedule-dialog-row-continer-padding-bottom;
       width: 100%;
-
-      @if ($schedule-skin == 'bootstrap4') {
-        padding-bottom: 14px;
-      }
     }
 
     .e-resources {
@@ -3154,18 +3139,9 @@
 
     .e-all-day-time-zone-row {
       display: flex;
-      padding-bottom: 14px;
-      padding-top: 8px;
+      padding-bottom: $schedule-dialog-all-day-row-padding-bottom;
+      padding-top: $schedule-dialog-all-day-row-padding-top;
       width: 100%;
-
-      @if ($schedule-skin == 'bootstrap4') {
-        padding-top: 0;
-      }
-
-      @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-        padding-bottom: 12px;
-        padding-top: 4px;
-      }
     }
 
     .e-subject-container,
@@ -3202,19 +3178,27 @@
 
       .e-subject-container,
       .e-start-container,
-      .e-start-time-zone-container,
       .e-description-label {
         padding-left: 8px;
         padding-right: 0;
       }
 
+      .e-start-time-zone-container {
+        padding-left: 8px;
+        padding-right: 4px;
+      }
+
       .e-location-container,
-      .e-end-container,
-      .e-end-time-zone-container {
+      .e-end-container {
         padding-left: 0;
         padding-right: 8px;
       }
 
+      .e-end-time-zone-container {
+        padding-left: 4px;
+        padding-right: 8px;
+      }
+
       .e-event-delete {
         float: right;
       }
@@ -3303,12 +3287,8 @@
       .e-end-input-container,
       .e-time-zone-row {
         display: flex;
-        padding-bottom: 12px;
+        padding-bottom: $schedule-bigger-dialog-row-continer-padding-bottom;
         width: 100%;
-
-        @if ($schedule-skin == 'bootstrap4') {
-          padding-bottom: 16px;
-        }
       }
 
       .e-resources {
@@ -3345,11 +3325,7 @@
 
       .e-all-day-time-zone-row {
         padding-bottom: 16px;
-        padding-top: 10px;
-
-        @if ($schedule-skin == 'bootstrap4') {
-          padding-top: 0;
-        }
+        padding-top: $schedule-bigger-dialog-all-day-row-padding-top;
       }
 
       .e-description,
@@ -3457,11 +3433,7 @@
     }
 
     .e-all-day-time-zone-row {
-      padding-top: 20px;
-
-      @if ($schedule-skin == 'bootstrap4') {
-        padding-top: 0;
-      }
+      padding-top: $schedule-device-dialog-all-day-row-padding-top;
     }
 
     .e-resources {
@@ -3571,7 +3543,7 @@
   /*! schedule quick popup */
   .e-quick-popup-wrapper {
     background-color: $schedule-popup-bg-color;
-    border-radius: 2px;
+    border-radius: $schedule-more-popup-wrapper-border-radius;
     box-shadow: $schedule-popup-box-shadow-1, $schedule-popup-box-shadow-2, $schedule-popup-box-shadow-3;
     color: $schedule-primary-content-font-color;
     max-width: 365px;
@@ -3583,13 +3555,6 @@
     @if ($schedule-skin != 'material') {
       border: 1px solid $schedule-popup-border-color;
     }
-    @if ($schedule-skin != 'material' and $schedule-skin == 'tailwind' and $schedule-skin == 'bootstrap5') {
-      box-shadow: none;
-    }
-
-    @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-      border-radius: 6px;
-    }
 
     .e-hidden {
       display: none;
@@ -3611,24 +3576,12 @@
 
           &:focus,
           &:hover {
-            background: $schedule-popup-icon-hover-bg-color;
-            color: $schedule-popup-icon-hover-color;
-            @if ($schedule-skin == 'bootstrap5') {
-              background: $schedule-active-color;
-              color: $schedule-popup-header-icon-hover-color;
-            }
+            background: $schedule-popup-header-icon-focus-bg-color;
+            color: $schedule-popup-header-icon-focus-color;
           }
 
           .e-close-icon {
-            font-size: 11px;
-
-            @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'bootstrap5') {
-              font-size: 14px;
-            }
-
-            @if ($schedule-skin == 'tailwind') {
-              font-size: 18px;
-            }
+            font-size: $schedule-popup-header-icon-font-size;
           }
         }
       }
@@ -3707,14 +3660,7 @@
           .e-edit-icon,
           .e-delete-icon,
           .e-close-icon {
-            font-size: 11px;
-            @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'bootstrap5') {
-              font-size: 14px;
-            }
-
-            @if ($schedule-skin == 'tailwind') {
-              font-size: 18px;
-            }
+            font-size: $schedule-popup-header-icon-font-size;
           }
 
           .e-edit:disabled,
@@ -3850,6 +3796,10 @@
           margin-right: 10px;
         }
 
+        @if ($schedule-skin == 'fabric' or $schedule-skin == 'bootstrap') {
+          margin-right: 8px;
+        }
+
         &:disabled {
           color: $schedule-disable-font-color;
         }
@@ -3897,6 +3847,11 @@
           margin-right: 10px;
         }
       }
+
+      .e-event-details {
+        margin-left: 8px;
+      }
+
       @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
         .e-popup-footer {
           padding: 8px 8px 8px 18px;
@@ -3912,10 +3867,6 @@
           }
         }
 
-        .e-event-details {
-          margin-left: 8px;
-        }
-
         .e-event-edit {
           margin-left: 8px;
         }
@@ -4085,10 +4036,6 @@
         padding: 48px 24px 16px;
       }
 
-      .e-popup-footer {
-        padding: 0 24px 12px 0;
-      }
-
       .e-cell-popup .e-date-time-icon,
       .e-event-popup .e-date-time-icon {
         padding-right: 16px;
@@ -4284,22 +4231,16 @@
   }
 }
 
+.e-bigger .e-more-popup-wrapper,
 .e-more-popup-wrapper {
   background-color: $schedule-popup-bg-color;
   border: 1px solid $schedule-popup-border-color;
-  border-radius: 2px;
+  border-radius: $schedule-more-popup-wrapper-border-radius;
+  box-shadow: $schedule-more-indicator-shadow-color-more-popup;
   opacity: 1;
   padding: $schedule-more-popup-padding;
   width: 225px;
 
-  @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-    border-radius: 6px;
-    box-shadow: none;
-  }
-  @else {
-    box-shadow: 0 10px 10px 0 $schedule-more-indicator-shadow-color;
-  }
-
   .e-more-appointment-wrapper {
     margin: 0 4px;
   }
@@ -4391,13 +4332,9 @@
 
     &:focus,
     &:hover {
-      background-color: $schedule-popup-icon-hover-bg-color;
+      background-color: $schedule-popup-header-icon-focus-bg-color;
       border-radius: 50%;
-      color: $schedule-popup-icon-hover-color;
-      @if ($schedule-skin == 'bootstrap5') {
-        background: $schedule-active-color;
-        color: $schedule-popup-header-icon-hover-color;
-      }
+      color: $schedule-popup-header-icon-focus-color;
     }
   }
 

package/styles/schedule/_material-dark-definition.scss

@@ -20,6 +20,7 @@ $schedule-hover-font-color: $grey-dark-font !default;
 $schedule-active-color: $accent-font !default;
 $schedule-active-border-color: $accent !default;
 $schedule-active-font-color: $accent !default;
+$schedule-current-day-active-color: $schedule-active-color !default;
 
 $schedule-alternate-cell-border: dotted !default;
 $schedule-header-cells-height: 60px !default;
@@ -27,6 +28,7 @@ $schedule-header-cells-padding: 5px !default;
 $schedule-header-cells-width: 36px !default;
 $schedule-month-header-cells-nrml-height: 30px !default;
 $schedule-month-header-cells-bgr-height: 35px !default;
+$schedule-month-header-cells-padding: 3px !default;
 $schedule-allday-cells-height: 0 !default;
 $schedule-work-cells-height: 36px !default;
 $schedule-work-cells-width: 36px !default;
@@ -47,7 +49,7 @@ $schedule-timezone-enable-bgr-height: 60px !default;
 $schedule-appointment-bg-color: $primary !default;
 $schedule-appointment-details-padding: 0 4px !default;
 $schedule-appointment-font-color: $primary-font !default;
-$schedule-appointment-border-color: $primary !default;
+$schedule-appointment-border-color: $schedule-content-border-color !default;
 $schedule-appointment-border-radius: 2px !default;
 $schedule-appointment-selected-border: 1px solid $grey-white !default;
 $schedule-appointment-active-border-color: $primary-50 !default;
@@ -71,6 +73,7 @@ $schedule-time-scale-device-font-size: 11px !default;
 $schedule-current-time-nrml-font-size: 11px !default;
 $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;
 
@@ -88,6 +91,8 @@ $schedule-agenda-date-header-padding: 10px 32px 0 16px !default;
 $schedule-recurrence-font-size: 11px !default;
 $schedule-agenda-item-padding: 10px 0 !default;
 $schedule-agenda-appointment-padding: 0 8px !default;
+$schedule-month-agenda-appointment-padding: 0 8px !default;
+$schedule-month-agenda-item-padding: 10px 0 !default;
 $schedule-popup-content-padding: 38px 18px 12px !default;
 $schedule-popup-footer-padding: 8px 18px 8px 22px !default;
 $schedule-date-header-line-height: 20px !default;
@@ -125,6 +130,7 @@ $schedule-tbar-btn-icn-right-bgr-padding: 0 !default;
 
 $schedule-content-nrml-font-text-transform: uppercase !default;
 $schedule-header-hover-border-radius: 0% !default;
+$schedule-more-popup-wrapper-border-radius: 2px !default;
 $schedule-box-shadow: 0 1px 1px rgba($grey-black, .15) !default;
 $schedule-popup-box-shadow-1: 0 24px 38px 3px rgba($grey-black, .14) !default;
 $schedule-popup-box-shadow-2: 0 9px 46px 8px rgba($grey-black, .12) !default;
@@ -142,13 +148,18 @@ $schedule-event-popup-content-padding: 0 18px 16px 26px !default;
 $schedule-event-popup-fields-padding: 12px !default;
 $schedule-popup-title-color: rgba($color: $schedule-appointment-bg-color, $alpha: .3) !default;
 $schedule-popup-btn-border: none !default;
+$schedule-alert-dialog-border: none !default;
 $schedule-btn-txt-bgr-padding: 5px 12px !default;
 $schedule-icon-color: $grey-white !default;
+$schedule-popup-header-icon-focus-bg-color: $schedule-popup-icon-hover-bg-color !default;
+$schedule-popup-header-icon-focus-color: $schedule-popup-icon-hover-color !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;
 $schedule-event-box-shadow-3: 0 3px 5px -1px rgba($grey-black, .2) !default;
 $schedule-more-indicator-shadow-color: $shadow-color !default;
+$schedule-more-indicator-shadow-color-res-tree-popup: 0 3px 4px .2px $schedule-more-indicator-shadow-color !default;
+$schedule-more-indicator-shadow-color-more-popup: 0 10px 10px 0 $schedule-more-indicator-shadow-color !default;
 $schedule-more-indicator-nrml-font-size: 11px !default;
 $schedule-more-popup-close-margin-top: 0 !default;
 $schedule-more-popup-padding: 8px 0 !default;
@@ -166,6 +177,16 @@ $schedule-timeline-resources-width: 200px !default;
 $schedule-timeline-appointment-height: 38px !default;
 $schedule-timeline-year-work-cells-height: 75px !default;
 $schedule-timeline-year-work-cells-width: 100px !default;
+$schedule-timeline-year-resource-text-padding: 4px 15px !default;
+$schedule-timeline-year-resource-cells-padding-left: 15px !default;
+$schedule-timeline-year-left-indent-padding: 0 !default;
+$schedule-timeline-date-header-wrap-padding: 5px !default;
+$schedule-dialog-row-continer-padding-bottom: 12px !default;
+$schedule-dialog-all-day-row-padding-top: 8px !default;
+$schedule-dialog-all-day-row-padding-bottom: 14px !default;
+$schedule-bigger-dialog-row-continer-padding-bottom: 12px !default;
+$schedule-bigger-dialog-all-day-row-padding-top: 10px !default;
+$schedule-device-dialog-all-day-row-padding-top: 20px !default;
 
 $schedule-tree-bg-color: $grey-dark !default;
 $schedule-popup-overlay-bg-color: #383838 !default;