@syncfusion/ej2-calendars 31.2.18 → 32.1.19

package/styles/calendar/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /*! calendar bootstrap5 theme variables */
 /*! component icons */
 .e-calendar .e-header .e-date-icon-prev::before {
@@ -42,7 +112,7 @@ ejs-calendar {
 .e-calendar {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   display: block;
   overflow: auto;
   -webkit-user-select: none;
@@ -94,10 +164,10 @@ ejs-calendar {
   text-align: center;
 }
 .e-calendar .e-content .e-selected, .e-calendar .e-content .e-state-hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-calendar .e-content span.e-day {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   cursor: pointer;
   display: inline-block;
   font-size: 14px;
@@ -166,7 +236,7 @@ ejs-calendar {
   cursor: default;
 }
 .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   display: inline-block;
   font-size: 12px;
   vertical-align: middle;
@@ -180,7 +250,7 @@ ejs-calendar {
   text-align: left;
   padding: 3px 5px;
   border: none;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-calendar .e-header .e-title {
   margin-left: 2px;
@@ -252,7 +322,7 @@ ejs-calendar {
   text-transform: none;
 }
 .e-calendar .e-content .e-selected, .e-calendar .e-content .e-state-hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-calendar .e-content span.e-day {
   border: none;
@@ -283,7 +353,7 @@ ejs-calendar {
 }
 .e-calendar .e-content.e-year td .e-selected, .e-calendar .e-content.e-decade td .e-selected {
   background: var(--color-sf-content-text-color);
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day {
   font-weight: 400;
@@ -476,26 +546,26 @@ ejs-calendar {
 }
 .e-calendar .e-content td.e-focused-date span.e-day, .e-calendar .e-content td.e-focused-date:hover span.e-day, .e-calendar .e-content td.e-focused-date:focus span.e-day {
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: inset 1px 0 var(--color-sf-primary-bg-color), inset 0 1px var(--color-sf-primary-bg-color), inset -1px 0 var(--color-sf-primary-bg-color), inset 0 -1px var(--color-sf-primary-bg-color);
           box-shadow: inset 1px 0 var(--color-sf-primary-bg-color), inset 0 1px var(--color-sf-primary-bg-color), inset -1px 0 var(--color-sf-primary-bg-color), inset 0 -1px var(--color-sf-primary-bg-color);
 }
 .e-calendar .e-content td.e-focused-date:hover span.e-day {
   background-color: var(--color-sf-flyout-bg-color-hover);
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-content-text-color);
 }
 .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: none;
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-primary);
 }
 .e-calendar .e-content td.e-today:focus span.e-day, .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
   background-color: var(--color-sf-content-bg-color-focus);
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-primary);
 }
 .e-calendar .e-content td.e-today:hover span.e-day, .e-calendar .e-content td.e-focused-date.e-today:hover span.e-day, .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
@@ -515,12 +585,12 @@ ejs-calendar {
   color: var(--color-sf-content-bg-color);
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-radius: 40px;
+  border-radius: calc(var(--e-radius) * 2.5);
 }
 .e-calendar .e-content td.e-selected.e-focused-date.e-today span.e-day {
   background: var(--color-sf-primary-bg-color-hover);
   color: var(--color-sf-primary-text-pressed);
-  border-radius: 40px;
+  border-radius: calc(var(--e-radius) * 2.5);
 }
 .e-calendar .e-content span {
   color: var(--color-sf-content-text-color);
@@ -547,14 +617,14 @@ ejs-calendar {
 .e-calendar .e-content td:hover span.e-day, .e-calendar .e-content td:focus span.e-day {
   background-color: var(--color-sf-flyout-bg-color-hover);
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-content-text-color);
 }
 .e-calendar .e-content td:focus span.e-day {
   background-color: var(--color-sf-content-bg-color-focus);
   color: var(--color-sf-content-text-color);
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-calendar .e-content td.e-disabled span.e-day, .e-calendar .e-content td.e-disabled:hover span.e-day, .e-calendar .e-content td.e-disabled:focus span.e-day {
   background: none;
@@ -565,7 +635,7 @@ ejs-calendar {
   background: var(--color-sf-content-text-color);
   color: var(--color-sf-content-bg-color);
   border: none;
-  border-radius: 40px;
+  border-radius: calc(var(--e-radius) * 2.5);
 }
 .e-calendar .e-content .e-footer {
   color: var(--color-sf-content-text-color);
@@ -583,7 +653,7 @@ ejs-calendar {
 
 .e-calendar .e-content.e-year td.e-selected span.e-day,
 .e-calendar .e-content.e-decade td.e-selected span.e-day {
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 
 .e-small.e-calendar .e-header .e-title,
@@ -671,7 +741,7 @@ ejs-calendar {
 .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   -webkit-box-shadow: 0 0 0 1px var(--color-sf-content-text-color-alt3);
           box-shadow: 0 0 0 1px var(--color-sf-content-text-color-alt3);
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 
 .e-bigger.e-calendar,
@@ -747,7 +817,7 @@ ejs-calendar {
 .e-bigger.e-calendar .e-content .e-selected, .e-bigger.e-calendar .e-content .e-state-hover,
 *.e-bigger .e-calendar .e-content .e-selected,
 *.e-bigger .e-calendar .e-content .e-state-hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-bigger.e-calendar .e-content span.e-day,
 *.e-bigger .e-calendar .e-content span.e-day {
@@ -886,20 +956,20 @@ ejs-calendar {
 }
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: inset 1px 0 var(--color-sf-primary-bg-color), inset 0 1px var(--color-sf-primary-bg-color), inset -1px 0 var(--color-sf-primary-bg-color), inset 0 -1px var(--color-sf-primary-bg-color);
           box-shadow: inset 1px 0 var(--color-sf-primary-bg-color), inset 0 1px var(--color-sf-primary-bg-color), inset -1px 0 var(--color-sf-primary-bg-color), inset 0 -1px var(--color-sf-primary-bg-color);
 }
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
   background-color: var(--color-sf-flyout-bg-color-hover);
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-content-text-color);
 }
 .e-bigger.e-small .e-calendar .e-content td.e-today span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: none;
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: inset 2px 0 var(--color-sf-primary-bg-color), inset 0 2px var(--color-sf-primary-bg-color), inset -2px 0 var(--color-sf-primary-bg-color), inset 0 -2px var(--color-sf-primary-bg-color);
           box-shadow: inset 2px 0 var(--color-sf-primary-bg-color), inset 0 2px var(--color-sf-primary-bg-color), inset -2px 0 var(--color-sf-primary-bg-color), inset 0 -2px var(--color-sf-primary-bg-color);
   color: var(--color-sf-primary);
@@ -914,7 +984,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today:focus span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
   background-color: var(--color-sf-content-bg-color-focus);
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-primary);
 }
 .e-bigger.e-small .e-calendar .e-content td.e-today:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
@@ -957,14 +1027,14 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
   background-color: var(--color-sf-flyout-bg-color-hover);
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-content-text-color);
 }
 .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
   background-color: var(--color-sf-content-bg-color-focus);
   color: var(--color-sf-content-text-color);
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-bigger.e-small .e-calendar .e-content td.e-disabled span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-disabled:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-disabled:focus span.e-day {
   background: none;
@@ -975,7 +1045,7 @@ ejs-calendar {
   background: var(--color-sf-content-text-color);
   color: var(--color-sf-content-bg-color);
   border: none;
-  border-radius: 40px;
+  border-radius: calc(var(--e-radius) * 2.5);
 }
 .e-bigger.e-small .e-calendar .e-content .e-footer {
   color: var(--color-sf-content-text-color);
@@ -989,7 +1059,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   display: block;
   overflow: auto;
   -webkit-user-select: none;
@@ -1041,10 +1111,10 @@ ejs-calendar {
   text-align: center;
 }
 .e-bigger.e-small .e-calendar .e-content .e-selected, .e-bigger.e-small .e-calendar .e-content .e-state-hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-bigger.e-small .e-calendar .e-content span.e-day {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   cursor: pointer;
   display: inline-block;
   font-size: 14px;
@@ -1113,7 +1183,7 @@ ejs-calendar {
   cursor: default;
 }
 .e-bigger.e-small .e-calendar .e-header .e-prev, .e-bigger.e-small .e-calendar .e-header .e-next {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   display: inline-block;
   font-size: 12px;
   vertical-align: middle;
@@ -1127,7 +1197,7 @@ ejs-calendar {
   text-align: left;
   padding: 3px 5px;
   border: none;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-bigger.e-small .e-calendar .e-header .e-title {
   margin-left: 2px;
@@ -1192,7 +1262,7 @@ ejs-calendar {
   text-transform: none;
 }
 .e-bigger.e-small .e-calendar .e-content .e-selected, .e-bigger.e-small .e-calendar .e-content .e-state-hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-bigger.e-small .e-calendar .e-content span.e-day {
   border: none;

package/styles/calendar/tailwind3.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-buttons/styles/button/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'icons/tailwind3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'icons/tailwind3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/datepicker/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/datepicker/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 //default
 $datepicker-icon: '\e901' !default;
 $datepicker-icon-font-size: $font-icon-16 !default;
@@ -103,3 +106,29 @@ $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 
 //enddefault
+$margin-zero: 0;
+$padding-zero: 0;
+$datepicker-modal-header-padding: 10px 10px 10px 15px;
+$datepicker-footer-container-padding: 10px 0;
+$date-picker-full-height: 100% !default;
+$datepicker-bigger-min-height: 40px !default;
+$datepicker-full-width: 100% !default;
+$datepicker-min-height: 33px !default;
+
+$date-picker-cell-container-height: 70% !default;
+$date-footer-container-font-size: 24px !default;
+$date-footer-height: 10% !default;
+$date-content-max-height: 50vh !default;
+$date-content-min-height: 60vh !default;
+$date-picker-popup-landscape-height: 25vh !default;
+$date-zero-radius: 0 !default;
+$date-mob-popup-height: 15vh !default;
+$date-normal-font: 400 !default;
+$date-header-mob-prev-height: 35px !default;
+$date-header-mob-prev-width: 35px !default;
+$date-min-device-height: 55px !default;
+$date-min-device-width: 55px !default;
+$date-picker-popup-next-height: 35px !default;
+$date-picker-popup-next-width: 35px !default;
+$date-picker-popup-next-min-height: 55px !default;
+$date-picker-popup-next-min-width: 55px !default;

package/styles/datepicker/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('datepicker-bigger') {
   #{&}.e-datepicker.e-bigger,
   .e-bigger #{&}.e-datepicker {
@@ -11,7 +13,7 @@
   .e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
   .e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
     background-size: 250px 40px;
-    min-height: 40px;
+    min-height: $datepicker-bigger-min-height;
   }
 
   .e-bigger#{&}.e-datepicker,

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 //default
 $datepicker-icon-color: none !default;
 $datepicker-active-icon-color: $datepicker-icon-color !default;
@@ -95,3 +98,29 @@ $modal-month-landscape-title-line-height: 12vh !default;
 $modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
+
+$margin-zero: 0;
+$padding-zero: 0;
+$datepicker-modal-header-padding: 10px 10px 10px 15px;
+$datepicker-footer-container-padding: 10px 0;
+$date-picker-full-height: 100% !default;
+$datepicker-bigger-min-height: 40px !default;
+$datepicker-full-width: 100% !default;
+$datepicker-min-height: 33px !default;
+$date-picker-cell-container-height: 70% !default;
+$date-footer-container-font-size: 24px !default;
+$date-footer-height: 10% !default;
+$date-content-max-height: 50vh !default;
+$date-content-min-height: 60vh !default;
+$date-picker-popup-landscape-height: 25vh !default;
+$date-zero-radius: 0 !default;
+$date-mob-popup-height: 15vh !default;
+$date-normal-font: 400 !default;
+$date-header-mob-prev-height: 35px !default;
+$date-header-mob-prev-width: 35px !default;
+$date-min-device-height: 55px !default;
+$date-min-device-width: 55px !default;
+$date-picker-popup-next-height: 35px !default;
+$date-picker-popup-next-width: 35px !default;
+$date-picker-popup-next-min-height: 55px !default;
+$date-picker-popup-next-min-width: 55px !default;

package/styles/datepicker/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $datepicker-icon-color: none !default;
 $datepicker-active-icon-color: $datepicker-icon-color !default;
 $datepicker-popup-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
@@ -94,3 +96,29 @@ $modal-month-landscape-title-line-height: 12vh !default;
 $modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
+
+$margin-zero: 0;
+$padding-zero: 0;
+$datepicker-modal-header-padding: 10px 10px 10px 15px;
+$datepicker-footer-container-padding: 10px 0;
+$date-picker-full-height: 100% !default;
+$datepicker-bigger-min-height: 40px !default;
+$datepicker-full-width: 100% !default;
+$datepicker-min-height: 33px !default;
+$date-picker-cell-container-height: 70% !default;
+$date-footer-container-font-size: 24px !default;
+$date-footer-height: 10% !default;
+$date-content-max-height: 50vh !default;
+$date-content-min-height: 60vh !default;
+$date-picker-popup-landscape-height: 25vh !default;
+$date-zero-radius: 0 !default;
+$date-mob-popup-height: 15vh !default;
+$date-normal-font: 400 !default;
+$date-header-mob-prev-height: 35px !default;
+$date-header-mob-prev-width: 35px !default;
+$date-min-device-height: 55px !default;
+$date-min-device-width: 55px !default;
+$date-picker-popup-next-height: 35px !default;
+$date-picker-popup-next-width: 35px !default;
+$date-picker-popup-next-min-height: 55px !default;
+$date-picker-popup-next-min-width: 55px !default;

package/styles/datepicker/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 $datepicker-icon-color: $white !default;
 $datepicker-active-icon-color: $white !default;
@@ -101,3 +103,29 @@ $modal-month-landscape-title-line-height: 12vh !default;
 $modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
+
+$margin-zero: 0;
+$padding-zero: 0;
+$datepicker-modal-header-padding: 10px 10px 10px 15px;
+$datepicker-footer-container-padding: 10px 0;
+$date-picker-full-height: 100% !default;
+$datepicker-bigger-min-height: 40px !default;
+$datepicker-full-width: 100% !default;
+$datepicker-min-height: 33px !default;
+$date-picker-cell-container-height: 70% !default;
+$date-footer-container-font-size: 24px !default;
+$date-footer-height: 10% !default;
+$date-content-max-height: 50vh !default;
+$date-content-min-height: 60vh !default;
+$date-picker-popup-landscape-height: 25vh !default;
+$date-zero-radius: 0 !default;
+$date-mob-popup-height: 15vh !default;
+$date-normal-font: 400 !default;
+$date-header-mob-prev-height: 35px !default;
+$date-header-mob-prev-width: 35px !default;
+$date-min-device-height: 55px !default;
+$date-min-device-width: 55px !default;
+$date-picker-popup-next-height: 35px !default;
+$date-picker-popup-next-width: 35px !default;
+$date-picker-popup-next-min-height: 55px !default;
+$date-picker-popup-next-min-width: 55px !default;

package/styles/datepicker/_bootstrap5-dark-definition.scss

@@ -1 +1,136 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+//default
+$datepicker-icon: '\e901' !default;
+$datepicker-icon-font-size: $font-icon-16 !default;
+$datepicker-icon-container-min-height: 18px !default;
+$datepicker-icon-container-min-width: 30px !default;
+$datepicker-bigger-icon-container-min-height: 18px !default;
+$datepicker-bigger-icon-container-min-width: 36px !default;
+$datepicker-bigger-icon-font-size: $font-icon-18 !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-border-radius: 50% !default;
+$datepicker-popup-border-radius: 6px !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-modal-header-display: block !default;
+$datepicker-calendar-tbody-landscape-height: 130px !default;
+$datepicker-popup-bigger-margin-top: 8px !default;
+
+// mouse small icon
+$datepicker-small-icon-font-size: $font-icon-16 !default;
+
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: $font-icon-20 !default;
+
+// color variables
+$datepicker-popup-border: 1px solid $border-light !default;
+$datepicker-input-border-style: none !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon-color: $secondary-text-color !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-icon-active-bg-color: $secondary-bg-color-pressed !default;
+$datepicker-active-border-color: $border !default;
+$datepicker-popup-box-shadow: $shadow-lg !default;
+$datepicker-overlay: rgba($black, .5) !default;
+$datepicker-icon-hover-color: $secondary-text-color-hover !default;
+$datepicker-popup-bg-color: $flyout-bg-color !default;
+$datepicker-othermonth-row: none !default;
+$datepicker-modal-header-bg: $icon-color !default;
+$datepicker-modal-header-color: $content-bg-color-alt2 !default;
+$modal-year-font-size: $text-sm !default;
+$modal-year-font-weight: $font-weight-medium !default;
+$modal-year-line-height: 32px !default;
+$modal-month-font-size: $text-xl !default;
+$modal-month-font-weight: $font-weight-medium !default;
+$modal-month-line-height: 32px !default;
+
+// modal dialog dimensions and styles
+$modal-portrait-year-font-size: 4vw !default;
+$modal-portrait-header-year-margin: 12vh 0 0 0 !default;
+$modal-portrait-month-font-size: 5vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
+$modal-portrait-month-header-padding: 2vh 2vw !default;
+$modal-portrait-month-header-vertical-align: middle !default;
+$modal-month-header-line-height: 6vh !default;
+$modal-month-header-title-line-height: inherit !default;
+
+$modal-header-border-style: solid !default;
+$modal-header-border-width: 1px 0 !default;
+$modal-header-border-color: $border-light !default;
+
+// Touch modal popup cancel icon style
+$modal-portrait-cancel-icon-float-style: left !default;
+$modal-portrait-cancel-icon-padding: 2px !default;
+$modal-portrait-prev-icon-margin: 75vw !default;
+$modal-portrait-next-icon-margin: 0 !default;
+$modal-portrait-header-title-margin: 22vw !default;
+$modal-portrait-header-title-position: absolute !default;
+$modal-portrait-header-title-text: center !default;
+$modal-portrait-header-title-width: 50vw !default;
+$modal-portrait-cancel-icon-color: inherit !default;
+$modal-header-day-line-height: 6vw !default;
+
+//Touch modal popup today styles
+$modal-portrait-today-float-style: right !default;
+$modal-today-text-color: inherit !default;
+$modal-portrait-footer-display-style: none !default;
+$modal-portrait-icon-float: none !default;
+
+// Touch modal popup styles
+$modal-portrait-header-height: 20vh !default;
+$modal-portrait-header-month-height: 10vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
+$modal-portrait-calendar-min-height: 100% !default;
+$modal-portrait-calendar-min-width: 100% !default;
+$modal-portrait-calendar-height: 100% !default;
+$modal-portrait-calendar-content-height: 69vh !default;
+$modal-portrait-calendar-tabel-height: 69vh !default;
+
+// Touch modal popup landscape styles
+$datepicker-modal-popup-landscape-max-width: 100% !default;
+$modal-landscape-header-height: 30vh !default;
+$modal-landscape-header-big-height: 25vh !default;
+$modal-landscape-calendar-content-height: 60vh !default;
+$modal-landscape-calendar-content-table-height: 65vh !default;
+$modal-landscape-calendar-content-big-height: 65vh !default;
+$modal-landscape-header-year-margin: 12vh 0 0 0 !default;
+$modal-landscape-prev-icon-margin: 80vw !default;
+$modal-year-landscape-font-size: 3vw !default;
+$modal-month-landscape-font-size: 4vw !default;
+$datepicker-modal-landscape-overflow: visible !default;
+$modal-month-landscape-title-line-height: 12vh !default;
+
+// tablet device style changes for modal popup
+$modal-tablet-font-size: 18px !default;
+$modal-tablet-content-dimension: 64px !default;
+$modal-tablet-table-header-height: 48px !default;
+
+//enddefault
+
+$margin-zero: 0;
+$padding-zero: 0;
+$datepicker-modal-header-padding: 10px 10px 10px 15px;
+$datepicker-footer-container-padding: 10px 0;
+$date-picker-full-height: 100% !default;
+$datepicker-bigger-min-height: 40px !default;
+$datepicker-full-width: 100% !default;
+$datepicker-min-height: 33px !default;
+$date-picker-cell-container-height: 70% !default;
+$date-footer-container-font-size: 24px !default;
+$date-footer-height: 10% !default;
+$date-content-max-height: 50vh !default;
+$date-content-min-height: 60vh !default;
+$date-picker-popup-landscape-height: 25vh !default;
+$date-zero-radius: 0 !default;
+$date-mob-popup-height: 15vh !default;
+$date-normal-font: 400 !default;
+$date-header-mob-prev-height: 35px !default;
+$date-header-mob-prev-width: 35px !default;
+$date-min-device-height: 55px !default;
+$date-min-device-width: 55px !default;
+$date-picker-popup-next-height: 35px !default;
+$date-picker-popup-next-width: 35px !default;
+$date-picker-popup-next-min-height: 55px !default;
+$date-picker-popup-next-min-width: 55px !default;