@syncfusion/ej2-schedule 31.2.15 → 32.1.20

package/styles/schedule/_bigger.scss

@@ -1,11 +1,13 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin schedule-inline-appointment-styles {
   background: transparent;
-  border: 0;
+  border: $schedule-border-0;
   color: $schedule-appointment-font-color;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1.2;
-  padding-top: 4px;
+  font-size: $schedule-font-size-13;
+  font-weight: $schedule-font-weight-medium;
+  line-height: $schedule-line-height-1-2;
+  padding-top: $schedule-spacing-4;
   width: 100%;
 }
 
@@ -41,7 +43,7 @@
         }
 
         .e-tbar-btn-text {
-          line-height: inherit;
+          line-height: $schedule-line-height-inherit;
         }
       }
 
@@ -67,7 +69,7 @@
 
           button.e-btn,
           .e-tbar-btn.e-btn.e-control {
-            height: auto;
+            height: $schedule-height-auto;
             line-height: $schedule-tbar-btn-bgr-line-height;
             margin: $schedule-tbar-btn-bgr-mrgn;
             min-width: $schedule-tbar-btn-bgr-minwidth;
@@ -170,8 +172,8 @@
   .e-bigger .e-schedule-event-tooltip,
   .e-schedule-event-tooltip.e-bigger {
     .e-subject {
-      font-size: 14px;
-      font-weight: 500;
+      font-size: $schedule-font-size-14;
+      font-weight: $schedule-font-weight-medium;
     }
   }
 
@@ -185,7 +187,7 @@
 
   .e-bigger {
     .e-ddl.e-popup .e-resource-template {
-      padding: 0 15px;
+      padding: $schedule-spacing-0 $schedule-spacing-15;
 
       .e-resource-color {
         height: $schedule-bigger-resource-color-size;
@@ -200,11 +202,11 @@
       }
 
       .e-dlg-header-content {
-        padding-bottom: 8px;
+        padding-bottom: $schedule-spacing-8;
       }
 
       .e-dlg-content {
-        padding-bottom: 12px;
+        padding-bottom: $schedule-spacing-12;
         position: relative;
       }
 
@@ -212,17 +214,17 @@
       .e-start-container,
       .e-start-time-zone-container,
       .e-description-label {
-        padding-right: 12px;
+        padding-right: $schedule-spacing-12;
       }
 
       .e-location-container,
       .e-end-container,
       .e-end-time-zone-container {
-        padding-left: 12px;
+        padding-left: $schedule-spacing-12;
       }
 
       .e-all-day-container {
-        padding-right: 16px;
+        padding-right: $schedule-spacing-16;
       }
 
       .e-time-zone-row {
@@ -245,14 +247,14 @@
       }
 
       .e-resources {
-        padding-bottom: 12px;
+        padding-bottom: $schedule-spacing-12;
         width: 100%;
       }
 
       .e-all-day-time-zone-row {
         display: flex;
-        padding-bottom: 20px;
-        padding-top: 0;
+        padding-bottom: $schedule-spacing-20;
+        padding-top: $schedule-spacing-0;
         width: 100%;
       }
 
@@ -273,17 +275,17 @@
       .e-subject-container,
       .e-description-row,
       .e-repeat-container {
-        padding-top: 0;
+        padding-top: $schedule-spacing-0;
       }
 
       .e-all-day-time-zone-row {
-        padding-bottom: 16px;
+        padding-bottom: $schedule-spacing-16;
         padding-top: $schedule-bigger-dialog-all-day-row-padding-top;
       }
 
       .e-description,
       .e-float-input .e-description {
-        height: 50px;
+        height: $schedule-height-50;
         resize: vertical;
       }
 
@@ -295,23 +297,23 @@
 
       &.e-rtl {
         .e-all-day-container {
-          margin-left: 20px;
-          margin-right: 0;
+          margin-left: $schedule-spacing-20;
+          margin-right: $schedule-spacing-0;
         }
 
         .e-subject-container,
         .e-start-container,
         .e-start-time-zone-container,
         .e-description-label {
-          padding-left: 12px;
-          padding-right: 0;
+          padding-left: $schedule-spacing-12;
+          padding-right: $schedule-spacing-0;
         }
 
         .e-location-container,
         .e-end-container,
         .e-end-time-zone-container {
-          padding-left: 0;
-          padding-right: 12px;
+          padding-left: $schedule-spacing-0;
+          padding-right: $schedule-spacing-12;
         }
       }
     }
@@ -321,7 +323,7 @@
   
   .e-bigger .e-quick-popup-wrapper {
     .e-cell-popup .e-popup-content .e-popup-table .e-subject {
-      font-size: 24px;
+      font-size: $schedule-font-size-24;
     }
 
     .e-cell-popup .e-popup-content {
@@ -338,12 +340,12 @@
     }
 
     .e-cell-popup .e-popup-header .e-header-icon-wrapper .e-close .e-close-icon {
-      font-size: 16px;
+      font-size: $schedule-font-size-16;
     }
 
     &.e-rtl {
       .e-cell-popup .e-date-time-icon {
-        padding-right: 0;
+        padding-right: $schedule-spacing-0;
       }
 
       .e-event-popup {
@@ -384,7 +386,7 @@
         .e-close-icon,
         .e-edit-icon,
         .e-delete-icon {
-          font-size: 14px;
+          font-size: $schedule-font-icon-size-14;
         }
       }
 
@@ -408,38 +410,38 @@
     }
     .e-subject,
     .e-inline-subject  {
-      font-size: 16px;
+      font-size: $schedule-font-size-16;
     }
 
     .e-date-time {
-      font-size: 14px;
+      font-size: $schedule-font-size-14;
     }
 
     .e-day-date-header {
       .e-m-date {
-        font-size: 20px;
+        font-size: $schedule-font-size-20;
       }
 
       .e-m-day {
-        font-size: 14px;
+        font-size: $schedule-font-size-14;
       }
     }
   }
 
   .e-bigger .e-timeline-view {
     .e-resource-text {
-      font-size: 14px;
-      padding-left: 12px;
+      font-size: $schedule-font-size-14;
+      padding-left: $schedule-spacing-12;
     }
 
     .e-navigate {
       font-size: $schedule-date-header-wrap-bgr-font-size;
-      padding: 8px 0 8px 8px;
+      padding: $schedule-spacing-8 $schedule-spacing-0 $schedule-spacing-8 $schedule-spacing-8;
     }
 
     .e-date-header-wrap table tbody td > span {
       font-size: $schedule-date-header-wrap-bgr-font-size;
-      padding: 8px 0 8px 8px;
+      padding: $schedule-spacing-8 $schedule-spacing-0 $schedule-spacing-8 $schedule-spacing-8;
     }
   }
 
@@ -483,7 +485,7 @@
   .e-end-container,
   .e-start-time-zone-container,
   .e-end-time-zone-container {
-    padding-left: 0;
+    padding-left: $schedule-spacing-0;
     width: 100%;
   }
 
@@ -491,7 +493,7 @@
   .e-start-container,
   .e-start-time-zone-container,
   .e-description-label {
-    padding-right: 0;
+    padding-right: $schedule-spacing-0;
   }
 
   .e-location-container,
@@ -502,7 +504,7 @@
   .e-subject-container,
   .e-description-row,
   .e-repeat-container {
-    padding-top: 20px;
+    padding-top: $schedule-spacing-20;
   }
 
   .e-all-day-time-zone-row {
@@ -510,27 +512,27 @@
   }
 
   .e-resources {
-    padding-bottom: 0;
-    padding-top: 20px;
+    padding-bottom: $schedule-spacing-0;
+    padding-top: $schedule-spacing-20;
   }
 
   .e-description,
   .e-float-input .e-description {
-    height: 60px;
+    height: $schedule-height-60;
     resize: vertical;
   }
 
   .e-all-day-time-zone-row {
-    margin-top: 0;
-    padding-bottom: 0;
+    margin-top: $schedule-spacing-0;
+    padding-bottom: $schedule-spacing-0;
   }
 
   .e-repeat-parent-row {
-    padding-top: 8px;
+    padding-top: $schedule-spacing-8;
   }
 
   .e-all-day-container {
-    margin-right: 20px;
+    margin-right: $schedule-spacing-20;
   }
 
   .e-title-header {
@@ -542,7 +544,7 @@
   .e-back-icon,
   .e-forward-icon {
     cursor: pointer;
-    line-height: normal;
+    line-height: $schedule-line-height-normal;
   }
 
   .e-title-text {
@@ -567,8 +569,8 @@
 
   .e-repeat-container {
     display: block;
-    padding-right: 35px;
-    padding-left: 0;
+    padding-right: $schedule-spacing-35;
+    padding-left: $schedule-spacing-0;
   }
 
   .e-icon-down-arrow {
@@ -581,27 +583,27 @@
     }
 
     .e-all-day-container {
-      margin-left: 20px;
-      margin-right: 0;
+      margin-left: $schedule-spacing-20;
+      margin-right: $schedule-spacing-0;
     }
 
     .e-subject-container,
     .e-start-container,
     .e-start-time-zone-container,
     .e-description-label {
-      padding-left: 0;
+      padding-left: $schedule-spacing-0;
     }
 
     .e-location-container,
     .e-end-container,
     .e-end-time-zone-container,
     .e-all-day-container {
-      padding-right: 0;
+      padding-right: $schedule-spacing-0;
     }
 
     .e-repeat-container {
-      padding-left: 35px;
-      padding-right: 0;
+      padding-left: $schedule-spacing-35;
+      padding-right: $schedule-spacing-0;
     }
   }
 
@@ -613,13 +615,13 @@
     }
 
     .e-recurrence-edit-button {
-      border: 0;
+      border: $schedule-border-0;
       box-shadow: none;
-      margin: -3px 5px;
+      margin: $schedule-negative-spacing-3 $schedule-spacing-5;
       position: absolute;
 
       .e-recurrence-edit.e-icons {
-        font-size: 12px;
+        font-size: $schedule-font-size-12;
         position: relative;
         top: 1px;
       }
@@ -629,7 +631,7 @@
 
 .e-bigger .e-more-popup-wrapper {
   background: $schedule-popup-bg-color;
-  border: 1px solid $schedule-popup-border-color;
+  border: $schedule-border-1 solid $schedule-popup-border-color;
   border-radius: $schedule-more-popup-wrapper-border-radius;
   box-shadow: $schedule-more-indicator-shadow-color-more-popup;
   opacity: 1;
@@ -637,35 +639,35 @@
   width: 225px;
 
   .e-more-appointment-wrapper {
-    margin: 0 4px;
+    margin: $schedule-spacing-0 $schedule-spacing-4;
   }
 
   .e-more-event-popup {
-    height: 100%;
+    height: $schedule-height-p100;
     position: relative;
     width: 100%;
   }
 
   .e-more-event-header {
-    height: 35px;
-    margin: 0 8px 4px 14px;
+    height: $schedule-height-35;
+    margin: $schedule-spacing-0 $schedule-spacing-8 $schedule-spacing-4 $schedule-spacing-14;
   }
 
   .e-more-event-content {
     color: $schedule-primary-content-font-color;
-    height: calc(100% - 35px);
+    height: calc($schedule-height-p100 - $schedule-height-35);
     max-height: 150px;
     overflow-y: auto;
-    padding: 10px 10px 0;
+    padding: $schedule-spacing-10 $schedule-spacing-10 $schedule-spacing-0;
 
     .e-appointment-border {
-      border: 0;
+      border: $schedule-border-0;
       box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
     }
   }
 
   .e-more-event-date-header {
-    height: 100%;
+    height: $schedule-height-p100;
     width: calc(100% - 25px);
 
     .e-current-date {
@@ -676,14 +678,14 @@
   .e-header-day {
     color: $schedule-primary-content-font-color;
     font-size: $schedule-date-header-wrap-nrml-font-size;
-    line-height: 1;
+    line-height: $schedule-line-height-1;
     padding-bottom: $schedule-more-appointment-margin-bottom;
   }
 
   .e-header-date {
     color: $schedule-primary-content-font-color;
     font-size: $schedule-header-date-nrml-font-size;
-    line-height: 1;
+    line-height: $schedule-line-height-1;
     max-width: 15%;
 
     &:hover {
@@ -698,11 +700,11 @@
 
   .e-more-event-close {
     background: transparent;
-    border: 0;
+    border: $schedule-border-0;
     box-shadow: none;
     color: $schedule-popup-icon-color;
     cursor: pointer;
-    height: 25px;
+    height: $schedule-height-25;
     padding: $schedule-bgr-more-event-close-icon-padding;
     position: absolute;
     right: 6px;
@@ -719,7 +721,7 @@
     &:focus,
     &:hover {
       background: $schedule-popup-header-icon-focus-bg-color;
-      border-radius: 50%;
+      border-radius: $schedule-border-radius-50;
       color: $schedule-popup-header-icon-focus-color;
     }
   }
@@ -732,16 +734,16 @@
     height: $schedule-month-appointment-height;
     line-height: $schedule-appointment-text-line-height;
     margin-bottom: $schedule-more-appointment-margin-bottom;
-    padding: 2px 0;
+    padding: $schedule-spacing-2 $schedule-spacing-0;
     width: 100%;
 
     .e-subject {
       color: $schedule-appointment-font-color;
       flex: auto;
-      font-size: 13px;
-      font-weight: 500;
+      font-size: $schedule-font-size-13;
+      font-weight: $schedule-font-weight-medium;
       overflow: hidden;
-      padding: 0 2px;
+      padding: $schedule-spacing-0 $schedule-spacing-2;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -756,22 +758,22 @@
 
     .e-recurrence-icon,
     .e-recurrence-edit-icon {
-      line-height: $schedule-month-appointment-height;
-      padding: 0 2px;
+      line-height: $schedule-recurrence-icon-line-height;
+      padding: $schedule-spacing-0 $schedule-spacing-2;
     }
 
     &.e-appointment-border,
     &:focus {
-      border: 0;
+      border: $schedule-border-0;
       box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
     }
   }
 
   &.e-device {
     bottom: 0;
-    height: 100%;
+    height: $schedule-height-p100;
     left: 0;
-    margin: 0;
+    margin: $schedule-spacing-0;
     max-width: 100%;
     overflow: hidden;
     right: 0;
@@ -786,11 +788,11 @@
 
   &.e-rtl {
     .e-header-date {
-      padding-right: 10px;
+      padding-right: $schedule-spacing-10;
     }
 
     .e-header-day {
-      padding-right: 10px;
+      padding-right: $schedule-spacing-10;
     }
 
     .e-more-event-close {

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

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $grey-base !default;
@@ -63,6 +65,8 @@ $schedule-appointment-selected-border: 1px solid #fff !default;
 $schedule-appointment-active-border-color: $brand-primary-font !default;
 $schedule-month-agenda-app-indicator-color: $grey-light-font !default;
 $schedule-month-appointment-height: 22px !default;
+$schedule-recurrence-icon-line-height: $schedule-month-appointment-height !default;
+$schedule-agenda-recurrence-icon-line-height: 21px !default;
 $schedule-month-appointment-text-line-height: 19px !default;
 $schedule-month-event-clone-line-height-subject: 1.4 !default;
 $schedule-appointment-text-line-height: 20px !default;
@@ -115,6 +119,7 @@ $schedule-tbar-border-bottom-size: 1px solid $grey-99 !default;
 $schedule-tbar-box-shadow: none !default;
 $schedule-tbar-box-shadow-bottom-margin: 0 !default;
 $schedule-tbar-min-height: 43px !default;
+$schedule-tbar-height: $schedule-tbar-min-height !default;
 $schedule-tbar-down-arrow-font-size: 12px !default;
 $schedule-tbar-down-arrow-margin-top: 0 !default;
 $schedule-tbar-default-icon-color: $grey-light-font !default;
@@ -219,6 +224,8 @@ $schedule-timeline-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-timeline-work-cells-border: 0 1px 1px 0 !default;
 $schedule-timeline-resources-width: 200px !default;
 $schedule-timeline-appointment-height: 38px !default;
+$schedule-timeline-recurrence-icon-line-height: $schedule-timeline-appointment-height !default;
+$schedule-timescale-recurrence-icon-line-height: $schedule-timescale-appointment-height !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;
@@ -265,6 +272,104 @@ $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
 $schedule-calendar-width: 300px !default;
 $schedule-bgr-calendar-width: 345px !default;
+$schedule-agenda-date-line-height: unset !default;
+
+$schedule-font-icon-size-8: 8px !default;
+$schedule-font-icon-size-10: 10px !default;
+$schedule-font-icon-size-12: 12px !default;
+$schedule-font-icon-size-14: 14px !default;
+
+$schedule-border-0: 0 !default;
+$schedule-border-1: 1px !default;
+$schedule-border-3: 3px !default;
+$schedule-border-8: 8px !default;
+
+$schedule-border-radius-5: 5px !default;
+$schedule-border-radius-50: 50% !default;
+$schedule-border-radius-full: 100% !default;
+
+$schedule-font-weight-normal: 400 !default;
+$schedule-font-weight-medium: 500 !default;
+
+$schedule-line-height-1: 1 !default;
+$schedule-line-height-1-2: 1.2 !default;
+$schedule-line-height-1-4: 1.4 !default;
+$schedule-line-height-1-5: 1.5 !default;
+$schedule-line-height-2-25: 2.25 !default;
+$schedule-line-height-11: 11px !default;
+$schedule-line-height-15: 15px !default;
+$schedule-line-height-18: 18px !default;
+$schedule-line-height-20: 20px !default;
+$schedule-line-height-23: 23px !default;
+$schedule-line-height-24-5: 24.5px !default;
+$schedule-line-height-25: 25px !default;
+$schedule-line-height-26: 26px !default;
+$schedule-line-height-52: 52px !default;
+$schedule-line-height-normal: normal !default;
+$schedule-line-height-inherit: inherit !default;
+
+$schedule-font-size-9: 9px !default;
+$schedule-font-size-11: 11px !default;
+$schedule-font-size-12: 12px !default;
+$schedule-font-size-13: 13px !default;
+$schedule-font-size-14: 14px !default;
+$schedule-font-size-15: 15px !default;
+$schedule-font-size-16: 16px !default;
+$schedule-font-size-18: 18px !default;
+$schedule-font-size-20: 20px !default;
+$schedule-font-size-22: 22px !default;
+$schedule-font-size-24: 24px !default;
+
+$schedule-height-0: 0 !default;
+$schedule-height-1: 1px !default;
+$schedule-height-5: 5px !default;
+$schedule-height-6: 6px !default;
+$schedule-height-10: 10px !default;
+$schedule-height-20: 20px !default;
+$schedule-height-24: 24px !default;
+$schedule-height-25: 25px !default;
+$schedule-height-35: 35px !default;
+$schedule-height-38: 38px !default;
+$schedule-height-40: 40px !default;
+$schedule-height-42: 42px !default;
+$schedule-height-50: 50px !default;
+$schedule-height-60: 60px !default;
+$schedule-height-100: 100px !default;
+
+$schedule-height-p20: 20% !default;
+$schedule-height-p100: 100% !default;
+$schedule-height-2-5: 2.5em !default;
+$schedule-height-inherit: inherit !default;
+$schedule-height-auto: auto !default;
+
+$schedule-spacing-0: 0 !default;
+$schedule-spacing-1: 1px !default;
+$schedule-spacing-1-5: 1.5px !default;
+$schedule-spacing-2: 2px !default;
+$schedule-spacing-3: 3px !default;
+$schedule-spacing-4: 4px !default;
+$schedule-spacing-5: 5px !default;
+$schedule-spacing-6: 6px !default;
+$schedule-spacing-7: 7px !default;
+$schedule-spacing-8: 8px !default;
+$schedule-spacing-10: 10px !default;
+$schedule-spacing-11: 11px !default;
+$schedule-spacing-12: 12px !default;
+$schedule-spacing-14: 14px !default;
+$schedule-spacing-15: 15px !default;
+$schedule-spacing-16: 16px !default;
+$schedule-spacing-18: 18px !default;
+$schedule-spacing-20: 20px !default;
+$schedule-spacing-24: 24px !default;
+$schedule-spacing-35: 35px !default;
+
+$schedule-spacing-percentage-5: 5% !default;
+$schedule-spacing-percentage-45: 45% !default;
+
+$schedule-negative-spacing-3: -3px !default;
+$schedule-negative-spacing-6: -6px !default;
+$schedule-negative-spacing-8: -8px !default;
+$schedule-negative-spacing-20: -20px !default;
 
 @mixin tbar-btn-animation {
   content: '';