@syncfusion/ej2-schedule 20.3.61 → 20.4.38

package/styles/recurrence-editor/tailwind-dark.css

@@ -1,4 +1,98 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+.e-ddl.e-control-wrapper .e-ddl-icon::before {
+  transform: rotate(0deg);
+  transition: transform 300ms ease;
+}
+
+.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
+  transform: rotate(180deg);
+  transition: transform 300ms ease;
+}
+
+.e-dropdownbase .e-list-item.e-active.e-hover {
+  color: #fff;
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-input-group:not(.e-disabled) .e-back-icon:hover,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
+  background: transparent;
+}
+
+.e-input-group .e-ddl-icon:not(:active)::after {
+  animation: none;
+}
+
+.e-ddl.e-popup {
+  border: 0;
+  border-radius: 4px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  margin-top: 4px;
+}
+
+.e-small .e-ddl.e-popup,
+.e-small.e-ddl.e-popup {
+  border-radius: 2px;
+  margin-top: 2px;
+}
+
+.e-bigger .e-ddl.e-popup,
+.e-bigger.e-ddl.e-popup {
+  border-radius: 6px;
+  margin-top: 8px;
+}
+
+.e-bigger.e-small .e-ddl.e-popup,
+.e-small.e-bigger.e-ddl.e-popup {
+  border-radius: 4px;
+  margin-top: 6px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+  padding: 4px 0;
+}
+
+.e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
+  border-color: #4b5563;
+}
+
+.e-bigger .e-popup.e-ddl-device-filter {
+  margin-top: 0;
+}
+
+.e-bigger .e-ddl-device .e-input-group,
+.e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
+  background: #374151;
+  border-width: 0;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+
+.e-bigger .e-ddl-device .e-input-group .e-back-icon,
+.e-bigger .e-ddl-device .e-input-group input.e-input,
+.e-bigger .e-ddl-device .e-input-group .e-clear-icon {
+  background-color: #374151;
+}
+
+.e-input-group.e-ddl,
+.e-input-group.e-ddl .e-input,
+.e-input-group.e-ddl .e-ddl-icon {
+  background: #1f2937;
+}
+
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
+  border-bottom-width: 0;
+}
+
+.e-ddl.e-popup.e-outline .e-filter-parent {
+  padding: 4px 8px;
+}
+
 /*! recurrence editor theme wise definitions*/
 /*! Recurrence-Editor component layout */
 .e-recurrenceeditor .e-editor {
@@ -6,8 +100,7 @@
   display: flex;
   -ms-flex-flow: row wrap;
       flex-flow: row wrap;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
   max-width: 1240px;
 }
 .e-recurrenceeditor .e-recurrence-table {
@@ -48,7 +141,7 @@
 }
 .e-recurrenceeditor .e-form-right,
 .e-recurrenceeditor .e-input-wrapper-side.e-form-right {
-  padding: 0 0 10px 8px;
+  padding: 0 0 10px;
 }
 .e-recurrenceeditor .e-input-wrapper {
   float: left;
@@ -89,13 +182,11 @@
   margin-bottom: 5px;
 }
 .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
-  padding-left: 8px;
-  padding-right: 0;
+  padding: 0 0 0 8px;
 }
 .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-count {
-  padding-left: 0;
-  padding-right: 8px;
+  padding: 0 8px 0 0;
 }
 .e-recurrenceeditor.e-rtl .e-recurrenceeditor .e-recurrence-table.e-month-expand-wrapper td:first-child {
   width: 30px;
@@ -123,10 +214,10 @@
   margin-bottom: 11px;
 }
 .e-recurrenceeditor .e-month-expander tr:first-child .e-input-wrapper {
-  margin-bottom: 11px;
+  padding-bottom: 11px;
 }
 .e-recurrenceeditor .e-month-expander-checkbox-wrapper.e-input-wrapper {
-  margin-top: -3px;
+  padding-top: 3px;
 }
 .e-recurrenceeditor .e-month-expander-checkbox-wrapper.e-input-wrapper .e-month-type .e-label {
   display: none;
@@ -176,7 +267,7 @@
 }
 .e-bigger .e-recurrenceeditor .e-form-right,
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-form-right {
-  padding: 0 0 10px 12px;
+  padding: 0 0 10px;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
   padding-bottom: 6px;
@@ -235,8 +326,7 @@
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-recurrence-table .e-monthday-element,
 .e-bigger .e-recurrenceeditor.e-rtl .e-recurrence-table .e-day-position {
-  padding-left: 0;
-  padding-right: 64px;
+  padding: 0 64px 0 0;
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-label,
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-non-week > .e-month-expander-label {
@@ -246,13 +336,11 @@
   margin-bottom: 5px;
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
-  padding-left: 12px;
-  padding-right: 0;
+  padding: 0 0 0 12px;
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-date,
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-count {
-  padding-left: 0;
-  padding-right: 12px;
+  padding: 0 12px 0 0;
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-recurrence-table .e-week-position {
   left: 0;
@@ -284,8 +372,7 @@
 }
 .e-device .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-device .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
-  padding-left: 10px;
-  padding-right: 0;
+  padding: 0 0 0 10px;
 }
 .e-device .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 10px;
@@ -306,23 +393,25 @@
 .e-device .e-recurrenceeditor .e-recurrence-table .e-day-position {
   padding-left: 20px;
 }
+.e-device .e-recurrenceeditor .e-recurrence-table .e-monthday-element {
+  margin-left: 20px;
+}
 .e-device .e-recurrenceeditor .e-week-position {
   right: 0;
+  padding-right: 10px;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 0;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-date,
 .e-device .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-count {
-  padding-left: 0;
-  padding-right: 10px;
+  padding: 0 10px 0 0;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-recurrence-table .e-monthday-element {
-  padding-left: 0;
+  padding: 0 20px 0 0;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-recurrence-table .e-day-position {
-  padding-right: 20px;
-  padding-left: 0;
+  padding: 0 50px 0 0;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-week-position {
   left: 0;
@@ -339,6 +428,14 @@
   padding: 16px 8px;
 }
 
+@media (max-width: 1024px) {
+  .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on {
+    width: 100%;
+  }
+  .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week {
+    width: 65%;
+  }
+}
 @media (max-width: 580px) {
   .e-recurrenceeditor {
     margin-left: auto;
@@ -374,8 +471,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper.e-end-on-date,
   .e-recurrenceeditor .e-editor .e-input-wrapper.e-end-on-count {
-    padding-left: 10px;
-    padding-right: 0;
+    padding: 0 0 0 10px;
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-left {
     padding-right: 10px;
@@ -388,15 +484,17 @@
     width: 100%;
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week {
-    width: 100%;
+    width: 65%;
+  }
+  .e-recurrenceeditor .e-editor .e-recurrence-table .e-day-position {
+    padding-left: 50px;
   }
   .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
     padding-right: 0;
   }
   .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-date,
   .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-count {
-    padding-left: 0;
-    padding-right: 10px;
+    padding: 0 10px 0 0;
   }
 }
 /*! Recurrence-Editor component theme */

package/styles/recurrence-editor/tailwind-dark.scss

@@ -1,3 +1,8 @@
 @import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-inputs/styles/numerictextbox/tailwind-dark-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-dark-definition.scss';
+@import 'ej2-buttons/styles/radio-button/tailwind-dark-definition.scss';
+@import 'ej2-calendars/styles/datepicker/tailwind-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/tailwind-dark-definition.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'all.scss';

package/styles/recurrence-editor/tailwind.css

@@ -1,4 +1,98 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+.e-ddl.e-control-wrapper .e-ddl-icon::before {
+  transform: rotate(0deg);
+  transition: transform 300ms ease;
+}
+
+.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
+  transform: rotate(180deg);
+  transition: transform 300ms ease;
+}
+
+.e-dropdownbase .e-list-item.e-active.e-hover {
+  color: #111827;
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-input-group:not(.e-disabled) .e-back-icon:hover,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
+  background: transparent;
+}
+
+.e-input-group .e-ddl-icon:not(:active)::after {
+  animation: none;
+}
+
+.e-ddl.e-popup {
+  border: 0;
+  border-radius: 4px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  margin-top: 4px;
+}
+
+.e-small .e-ddl.e-popup,
+.e-small.e-ddl.e-popup {
+  border-radius: 2px;
+  margin-top: 2px;
+}
+
+.e-bigger .e-ddl.e-popup,
+.e-bigger.e-ddl.e-popup {
+  border-radius: 6px;
+  margin-top: 8px;
+}
+
+.e-bigger.e-small .e-ddl.e-popup,
+.e-small.e-bigger.e-ddl.e-popup {
+  border-radius: 4px;
+  margin-top: 6px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+  padding: 4px 0;
+}
+
+.e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
+  border-color: #e5e7eb;
+}
+
+.e-bigger .e-popup.e-ddl-device-filter {
+  margin-top: 0;
+}
+
+.e-bigger .e-ddl-device .e-input-group,
+.e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
+  background: #fff;
+  border-width: 0;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+
+.e-bigger .e-ddl-device .e-input-group .e-back-icon,
+.e-bigger .e-ddl-device .e-input-group input.e-input,
+.e-bigger .e-ddl-device .e-input-group .e-clear-icon {
+  background-color: #fff;
+}
+
+.e-input-group.e-ddl,
+.e-input-group.e-ddl .e-input,
+.e-input-group.e-ddl .e-ddl-icon {
+  background: #fff;
+}
+
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
+  border-bottom-width: 0;
+}
+
+.e-ddl.e-popup.e-outline .e-filter-parent {
+  padding: 4px 8px;
+}
+
 /*! recurrence editor theme wise definitions*/
 /*! Recurrence-Editor component layout */
 .e-recurrenceeditor .e-editor {
@@ -6,8 +100,7 @@
   display: flex;
   -ms-flex-flow: row wrap;
       flex-flow: row wrap;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
   max-width: 1240px;
 }
 .e-recurrenceeditor .e-recurrence-table {
@@ -48,7 +141,7 @@
 }
 .e-recurrenceeditor .e-form-right,
 .e-recurrenceeditor .e-input-wrapper-side.e-form-right {
-  padding: 0 0 10px 8px;
+  padding: 0 0 10px;
 }
 .e-recurrenceeditor .e-input-wrapper {
   float: left;
@@ -89,13 +182,11 @@
   margin-bottom: 5px;
 }
 .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
-  padding-left: 8px;
-  padding-right: 0;
+  padding: 0 0 0 8px;
 }
 .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-count {
-  padding-left: 0;
-  padding-right: 8px;
+  padding: 0 8px 0 0;
 }
 .e-recurrenceeditor.e-rtl .e-recurrenceeditor .e-recurrence-table.e-month-expand-wrapper td:first-child {
   width: 30px;
@@ -123,10 +214,10 @@
   margin-bottom: 11px;
 }
 .e-recurrenceeditor .e-month-expander tr:first-child .e-input-wrapper {
-  margin-bottom: 11px;
+  padding-bottom: 11px;
 }
 .e-recurrenceeditor .e-month-expander-checkbox-wrapper.e-input-wrapper {
-  margin-top: -3px;
+  padding-top: 3px;
 }
 .e-recurrenceeditor .e-month-expander-checkbox-wrapper.e-input-wrapper .e-month-type .e-label {
   display: none;
@@ -176,7 +267,7 @@
 }
 .e-bigger .e-recurrenceeditor .e-form-right,
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-form-right {
-  padding: 0 0 10px 12px;
+  padding: 0 0 10px;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
   padding-bottom: 6px;
@@ -235,8 +326,7 @@
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-recurrence-table .e-monthday-element,
 .e-bigger .e-recurrenceeditor.e-rtl .e-recurrence-table .e-day-position {
-  padding-left: 0;
-  padding-right: 64px;
+  padding: 0 64px 0 0;
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-label,
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-non-week > .e-month-expander-label {
@@ -246,13 +336,11 @@
   margin-bottom: 5px;
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
-  padding-left: 12px;
-  padding-right: 0;
+  padding: 0 0 0 12px;
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-date,
 .e-bigger .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-count {
-  padding-left: 0;
-  padding-right: 12px;
+  padding: 0 12px 0 0;
 }
 .e-bigger .e-recurrenceeditor.e-rtl .e-recurrence-table .e-week-position {
   left: 0;
@@ -284,8 +372,7 @@
 }
 .e-device .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-device .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
-  padding-left: 10px;
-  padding-right: 0;
+  padding: 0 0 0 10px;
 }
 .e-device .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 10px;
@@ -306,23 +393,25 @@
 .e-device .e-recurrenceeditor .e-recurrence-table .e-day-position {
   padding-left: 20px;
 }
+.e-device .e-recurrenceeditor .e-recurrence-table .e-monthday-element {
+  margin-left: 20px;
+}
 .e-device .e-recurrenceeditor .e-week-position {
   right: 0;
+  padding-right: 10px;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 0;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-date,
 .e-device .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-count {
-  padding-left: 0;
-  padding-right: 10px;
+  padding: 0 10px 0 0;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-recurrence-table .e-monthday-element {
-  padding-left: 0;
+  padding: 0 20px 0 0;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-recurrence-table .e-day-position {
-  padding-right: 20px;
-  padding-left: 0;
+  padding: 0 50px 0 0;
 }
 .e-device .e-recurrenceeditor.e-rtl .e-week-position {
   left: 0;
@@ -339,6 +428,14 @@
   padding: 16px 8px;
 }
 
+@media (max-width: 1024px) {
+  .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on {
+    width: 100%;
+  }
+  .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week {
+    width: 65%;
+  }
+}
 @media (max-width: 580px) {
   .e-recurrenceeditor {
     margin-left: auto;
@@ -374,8 +471,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper.e-end-on-date,
   .e-recurrenceeditor .e-editor .e-input-wrapper.e-end-on-count {
-    padding-left: 10px;
-    padding-right: 0;
+    padding: 0 0 0 10px;
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-left {
     padding-right: 10px;
@@ -388,15 +484,17 @@
     width: 100%;
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week {
-    width: 100%;
+    width: 65%;
+  }
+  .e-recurrenceeditor .e-editor .e-recurrence-table .e-day-position {
+    padding-left: 50px;
   }
   .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
     padding-right: 0;
   }
   .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-date,
   .e-recurrenceeditor.e-rtl .e-input-wrapper.e-end-on-count {
-    padding-left: 0;
-    padding-right: 10px;
+    padding: 0 10px 0 0;
   }
 }
 /*! Recurrence-Editor component theme */

package/styles/recurrence-editor/tailwind.scss

@@ -1,3 +1,8 @@
 @import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-inputs/styles/numerictextbox/tailwind-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-definition.scss';
+@import 'ej2-buttons/styles/radio-button/tailwind-definition.scss';
+@import 'ej2-calendars/styles/datepicker/tailwind-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/tailwind-definition.scss';
 @import 'tailwind-definition.scss';
 @import 'all.scss';

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

@@ -21,6 +21,10 @@ $schedule-active-color: $brand-primary-font !default;
 $schedule-active-border-color: $brand-primary !default;
 $schedule-active-font-color: lighten($brand-primary, 15%) !default;
 $schedule-current-day-active-color: $schedule-active-color !default;
+$schedule-calendar-background: none !default;
+$schedule-calendar-shadow: none !default;
+$schedule-time-cells-font-color: $schedule-secondary-content-font-color !default;
+$schedule-time-cells-bg-color: $schedule-header-bg-color !default;
 
 $schedule-timezone-enable-nrml-height: 60px !default;
 $schedule-timezone-enable-bgr-height: 70px !default;
@@ -46,6 +50,9 @@ $schedule-date-month-header-wrap-bgr-font-size: 14px !default;
 $schedule-date-header-wrap-nrml-font-size: 13px !default;
 $schedule-date-header-wrap-bgr-font-size: 14px !default;
 $schedule-date-header-wrap-device-font-size: 14px !default;
+$schedule-month-date-header-cell-font-size: none !default;
+$schedule-month-date-header-cell-text-align: left !default;
+$schedule-month-date-header-cell-text-transform: none !default;
 
 $schedule-appointment-bg-color: $brand-primary !default;
 $schedule-appointment-details-padding: 0 4px !default;
@@ -65,6 +72,8 @@ $schedule-timescale-appointment-height: 54px !default;
 $schedule-header-day-nrml-font-size: 13px !default;
 $schedule-header-day-bgr-font-size: 14px !default;
 $schedule-header-day-device-font-size: 14px !default;
+$schedule-header-day-line-height: unset !default;
+$schedule-header-day-padding-bottom: 0 !default;
 $schedule-header-date-device-font-size: 20px !default;
 $schedule-header-date-nrml-font-size: 18px !default;
 $schedule-header-date-bgr-font-size: 20px !default;
@@ -77,6 +86,8 @@ $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-header-date-line-height: unset !default;
+$schedule-header-padding-top: 0 !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -91,12 +102,14 @@ $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-agenda-big-appointment-padding: $schedule-agenda-appointment-padding !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;
 $schedule-date-header-margin: 3px 3px 2px !default;
+$schedule-date-header-margin-rtl: $schedule-date-header-margin !default;
 
 $schedule-tbar-bgr-min-height: 56px !default;
 $schedule-tbar-border-bottom-size: 1px solid $grey-99 !default;
@@ -104,7 +117,7 @@ $schedule-tbar-box-shadow: none !default;
 $schedule-tbar-box-shadow-bottom-margin: 0 !default;
 $schedule-tbar-min-height: 43px !default;
 $schedule-tbar-down-arrow-font-size: 12px !default;
-$schedule-tbar-down-arrow-padding-top: 0 !default;
+$schedule-tbar-down-arrow-margin-top: 0 !default;
 $schedule-tbar-default-icon-color: $grey-light-font !default;
 $schedule-tbar-separator-size: $border-size !default;
 $schedule-tbar-default-bg: $grey-darker !default;
@@ -124,7 +137,7 @@ $schedule-tbar-btn-icon-bgr-width: 24px !default;
 $schedule-tbar-btn-bgr-mrgn: 4px 0 !default;
 $schedule-tbar-btn-bgr-minheight: 34px !default;
 $schedule-tbar-btn-bgr-minwidth: 34px !default;
-$schedule-tbar-btn-bgr-padding: 0 1.5px !default;
+$schedule-tbar-btn-bgr-padding: 1px 7px !default;
 $schedule-tbar-btn-icn-bgr-padding: 0 !default;
 $schedule-tbar-btn-icn-right-bgr-padding: 0 !default;
 
@@ -153,6 +166,30 @@ $schedule-btn-txt-bgr-padding: 5px 12px !default;
 $schedule-icon-color: $grey-light-font !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-popup-icon-font-size: 18px !default;
+$schedule-popup-icon-padding: 0 13px 0 0 !default;
+$schedule-popup-footer-text-transform: capitalize !default;
+$schedule-cell-popup-header-icon-padding: 0 !default;
+$schedule-cell-popup-span-margin: 0 0 4px !default;
+$schedule-cell-popup-subject-height: 40px !default;
+$schedule-bgr-cell-popup-content-padding: $schedule-popup-content-padding !default;
+$schedule-bgr-cell-popup-footer-padding: $schedule-popup-footer-padding !default;
+$schedule-bgr-event-popup-header-icon-size: 2em !default;
+$schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
+$schedule-device-event-popup-subject-padding: 12px 24px !default;
+$schedule-event-popup-subject-color: $schedule-primary-content-font-color !default;
+$schedule-event-popup-subject-bg-color: $schedule-popup-title-color !default;
+$schedule-event-popup-subject-border-left: 6px solid $schedule-appointment-bg-color !default;
+$schedule-event-popup-subject-padding: 8px 0 8px 10px !default;
+$schedule-event-popup-subject-border-radius: $schedule-more-popup-wrapper-border-radius !default;
+$schedule-event-popup-footer-display: block !default;
+$schedule-event-popup-header-bg-color: $schedule-popup-bg-color !default;
+$schedule-event-popup-header-icon-display: none !default;
+$schedule-event-popup-header-close-icon-position: relative !default;
+$schedule-event-popup-header-close-icon-right: 2px !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-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;
@@ -165,7 +202,7 @@ $schedule-more-popup-close-margin-top: 3px !default;
 $schedule-more-popup-padding: 8px 0 !default;
 $schedule-more-appointment-margin-bottom: 2px !default;
 $schedule-event-popup-header-icon-padding: 5px 5px 2px !default;
-$schedule-event-popup-subject-padding: 0 18px 8px !default;
+$schedule-event-popup-subject-wrap-padding: 0 18px 8px !default;
 
 $schedule-timeline-header-cells-height: 36px !default;
 $schedule-timeline-work-cells-height: 60px !default;
@@ -187,8 +224,10 @@ $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-all-day-section-hover-color: $schedule-tbar-default-icon-color !default;
 
 $schedule-tree-bg-color: $content-bg-color !default;
+$schedule-tree-font-color: $schedule-primary-content-font-color !default;
 $schedule-popup-overlay-bg-color: #383838 !default;
 
 $schedule-val-error-color: #f44336 !default;
@@ -198,9 +237,29 @@ $schedule-block-appointment-bg-color: rgba(255, 255, 255, .08) !default;
 $schedule-block-appointment-font-color: #969696 !default;
 
 $schedule-resource-color-margin-top: 6px !default;
-$schedule-bigger-resource-color-margin-top: 12px !default;
+$schedule-bigger-resource-color-margin-top: 10px !default;
 $schedule-resource-color-size: 14px !default;
 $schedule-bigger-resource-color-size: 16px !default;
+$schedule-resource-tree-text-content-padding: 0 0 0 12px !default;
+
+$schedule-tip-content-padding: 3px 6px !default;
+$schedule-time-cells-border-bottom-color: $schedule-content-border-color !default;
+$schedule-current-day-font-weight: normal !default;
+$schedule-selected-cell-hover-font-color: $schedule-hover-font-color !default;
+$schedule-work-cell-hover-color: $schedule-hover-font-color !default;
+$schedule-current-date-header-font-color: $schedule-active-color !default;
+$schedule-selected-date-header-cell-font-color: none !default;
+$schedule-appointment-detail-line-height: unset !default;
+$schedule-timeline-header-time-slots-bg: $schedule-header-bg-color !default;
+$schedule-agenda-subject-wrap-margin-bottom: 0 !default;
+$schedule-bigger-tbar-btn-font-size: $schedule-date-navigation-font-size !default;
+$schedule-more-event-close-icon-font-size: 9px !default;
+$schedule-tbar-btn-icn-right-bgr-padding-top: 0 !default;
+$schedule-following-events-dlg-padding: 15px !default;
+$schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
+$schedule-bgr-date-time-icon-padding-right: 13px !default;
+$schedule-bgr-more-event-close-icon-padding: unset !default;
+$schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
 
 @mixin tbar-btn-animation {
   content: '';