@syncfusion/ej2-calendars 25.2.7 → 26.1.38

package/styles/calendar/tailwind-dark.css

@@ -43,6 +43,7 @@ ejs-calendar {
   display: block;
   overflow: auto;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -117,7 +118,8 @@ ejs-calendar {
 .e-calendar .e-content th, .e-calendar .e-content td,
 .e-bigger.e-small .e-calendar .e-content th,
 .e-bigger.e-small .e-calendar .e-content td {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-calendar .e-content td.e-disabled,
 .e-bigger.e-small .e-calendar .e-content td.e-disabled {
@@ -355,12 +357,16 @@ ejs-calendar {
   background-color: #232e3e;
   border-top: none;
   cursor: default;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: row;
-      flex-direction: row;
-  -ms-flex-pack: end;
-      justify-content: flex-end;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
   padding: 8px 8px;
   text-align: center;
   width: 100%;
@@ -618,7 +624,8 @@ ejs-calendar {
 .e-calendar .e-btn.e-today.e-flat.e-disabled, .e-calendar .e-btn.e-today.e-flat.e-disabled:hover, .e-calendar .e-btn.e-today.e-flat.e-disabled:active, .e-calendar .e-btn.e-today.e-flat.e-disabled:focus, .e-calendar .e-btn.e-today.e-flat.e-disabled:hover:active {
   background: #232e3e;
   border-color: rgba(0, 0, 0, 0.65);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(209, 213, 219, 0.65);
   cursor: default;
   opacity: 1;
@@ -643,7 +650,8 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar {
   background-color: #374151;
   border: 1px solid #4b5563;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-calendar .e-date-icon-prev, .e-calendar .e-date-icon-next,
 .e-bigger.e-small .e-calendar .e-date-icon-prev,
@@ -676,13 +684,15 @@ ejs-calendar {
 }
 .e-calendar .e-header .e-title:focus,
 .e-bigger.e-small .e-calendar .e-header .e-title:focus {
-  box-shadow: 0 0 0 1px #8b919e;
+  -webkit-box-shadow: 0 0 0 1px #8b919e;
+          box-shadow: 0 0 0 1px #8b919e;
   background: none;
   text-decoration: none;
 }
 .e-calendar .e-header .e-title:active,
 .e-bigger.e-small .e-calendar .e-header .e-title:active {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background: none;
   text-decoration: none;
 }
@@ -701,7 +711,8 @@ ejs-calendar {
 .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
 .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
 .e-bigger.e-small .e-calendar .e-header .e-next:focus {
-  box-shadow: 0 0 0 1px #8b919e;
+  -webkit-box-shadow: 0 0 0 1px #8b919e;
+          box-shadow: 0 0 0 1px #8b919e;
 }
 .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
 .e-bigger.e-small .e-calendar .e-header .e-prev:active,
@@ -747,11 +758,6 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-decade tr:last-child .e-cell.e-disabled:last-child span.e-day {
   color: #6b7280;
 }
-.e-calendar .e-content.e-year td:hover span.e-day, .e-calendar .e-content.e-decade td:hover span.e-day,
-.e-bigger.e-small .e-calendar .e-content.e-year td:hover span.e-day,
-.e-bigger.e-small .e-calendar .e-content.e-decade td:hover span.e-day {
-  background-color: #4b5563;
-}
 .e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-calendar .e-content.e-decade td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td.e-selected:hover span.e-day {
@@ -773,7 +779,8 @@ ejs-calendar {
   background: #6b7280;
   border: none;
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-calendar .e-content td.e-focused-date:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
@@ -788,14 +795,16 @@ ejs-calendar {
   background: none;
   border: none;
   border-radius: 4px;
-  box-shadow: inset 1px 0 #22d3ee, inset 0 1px #22d3ee, inset -1px 0 #22d3ee, inset 0 -1px #22d3ee;
+  -webkit-box-shadow: inset 1px 0 #22d3ee, inset 0 1px #22d3ee, inset -1px 0 #22d3ee, inset 0 -1px #22d3ee;
+          box-shadow: inset 1px 0 #22d3ee, inset 0 1px #22d3ee, inset -1px 0 #22d3ee, inset 0 -1px #22d3ee;
   color: #22d3ee;
 }
 .e-calendar .e-content td.e-focused-date.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: #4b5563;
   border: none;
-  box-shadow: inset 1px 0 #22d3ee, inset 0 1px #22d3ee, inset -1px 0 #22d3ee, inset 0 -1px #22d3ee;
+  -webkit-box-shadow: inset 1px 0 #22d3ee, inset 0 1px #22d3ee, inset -1px 0 #22d3ee, inset 0 -1px #22d3ee;
+          box-shadow: inset 1px 0 #22d3ee, inset 0 1px #22d3ee, inset -1px 0 #22d3ee, inset 0 -1px #22d3ee;
   color: #d1d5db;
 }
 .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,
@@ -818,7 +827,8 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
   background-color: #22d3ee;
   border: none;
-  box-shadow: inset 1px 0 #22d3ee, inset 0 1px #22d3ee, inset -1px 0 #22d3ee, inset 0 -1px #22d3ee;
+  -webkit-box-shadow: inset 1px 0 #22d3ee, inset 0 1px #22d3ee, inset -1px 0 #22d3ee, inset 0 -1px #22d3ee;
+          box-shadow: inset 1px 0 #22d3ee, inset 0 1px #22d3ee, inset -1px 0 #22d3ee, inset 0 -1px #22d3ee;
   color: #000;
 }
 .e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -883,9 +893,9 @@ ejs-calendar {
 .e-calendar .e-content td.e-selected span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
   background-color: #22d3ee;
+  color: #000;
   border: none;
   border-radius: 4px;
-  color: #000;
 }
 .e-calendar .e-content .e-footer,
 .e-bigger.e-small .e-calendar .e-content .e-footer {
@@ -907,7 +917,6 @@ ejs-calendar {
 }
 .e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary:not(:hover),
 .e-bigger.e-small .e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary:not(:hover) {
-  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #22d3ee;
   border-color: #22d3ee;
@@ -934,18 +943,33 @@ ejs-calendar {
 }
 
 .e-calendar .e-zoomin {
-  animation: animatezoom 0.3s;
+  -webkit-animation: animatezoom 0.3s;
+          animation: animatezoom 0.3s;
+}
+
+@-webkit-keyframes animatezoom {
+  from {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
 }
 
 @keyframes animatezoom {
   from {
-    transform: scale(0);
+    -webkit-transform: scale(0);
+            transform: scale(0);
   }
   to {
-    transform: scale(1);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
 .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
-  box-shadow: 0 0 0 1px #8b919e;
+  -webkit-box-shadow: 0 0 0 1px #8b919e;
+          box-shadow: 0 0 0 1px #8b919e;
   border-radius: 4px;
 }

package/styles/calendar/tailwind.css

@@ -43,6 +43,7 @@ ejs-calendar {
   display: block;
   overflow: auto;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -117,7 +118,8 @@ ejs-calendar {
 .e-calendar .e-content th, .e-calendar .e-content td,
 .e-bigger.e-small .e-calendar .e-content th,
 .e-bigger.e-small .e-calendar .e-content td {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-calendar .e-content td.e-disabled,
 .e-bigger.e-small .e-calendar .e-content td.e-disabled {
@@ -355,12 +357,16 @@ ejs-calendar {
   background-color: #f9fafb;
   border-top: none;
   cursor: default;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: row;
-      flex-direction: row;
-  -ms-flex-pack: end;
-      justify-content: flex-end;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
   padding: 8px 8px;
   text-align: center;
   width: 100%;
@@ -618,7 +624,8 @@ ejs-calendar {
 .e-calendar .e-btn.e-today.e-flat.e-disabled, .e-calendar .e-btn.e-today.e-flat.e-disabled:hover, .e-calendar .e-btn.e-today.e-flat.e-disabled:active, .e-calendar .e-btn.e-today.e-flat.e-disabled:focus, .e-calendar .e-btn.e-today.e-flat.e-disabled:hover:active {
   background: #f9fafb;
   border-color: rgba(255, 255, 255, 0.65);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(55, 65, 81, 0.65);
   cursor: default;
   opacity: 1;
@@ -643,7 +650,8 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar {
   background-color: #fff;
   border: 1px solid #e5e7eb;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-calendar .e-date-icon-prev, .e-calendar .e-date-icon-next,
 .e-bigger.e-small .e-calendar .e-date-icon-prev,
@@ -676,13 +684,15 @@ ejs-calendar {
 }
 .e-calendar .e-header .e-title:focus,
 .e-bigger.e-small .e-calendar .e-header .e-title:focus {
-  box-shadow: 0 0 0 1px #9ca3af;
+  -webkit-box-shadow: 0 0 0 1px #9ca3af;
+          box-shadow: 0 0 0 1px #9ca3af;
   background: none;
   text-decoration: none;
 }
 .e-calendar .e-header .e-title:active,
 .e-bigger.e-small .e-calendar .e-header .e-title:active {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background: none;
   text-decoration: none;
 }
@@ -701,7 +711,8 @@ ejs-calendar {
 .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
 .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
 .e-bigger.e-small .e-calendar .e-header .e-next:focus {
-  box-shadow: 0 0 0 1px #9ca3af;
+  -webkit-box-shadow: 0 0 0 1px #9ca3af;
+          box-shadow: 0 0 0 1px #9ca3af;
 }
 .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
 .e-bigger.e-small .e-calendar .e-header .e-prev:active,
@@ -747,11 +758,6 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-decade tr:last-child .e-cell.e-disabled:last-child span.e-day {
   color: #9ca3af;
 }
-.e-calendar .e-content.e-year td:hover span.e-day, .e-calendar .e-content.e-decade td:hover span.e-day,
-.e-bigger.e-small .e-calendar .e-content.e-year td:hover span.e-day,
-.e-bigger.e-small .e-calendar .e-content.e-decade td:hover span.e-day {
-  background-color: #f3f4f6;
-}
 .e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-calendar .e-content.e-decade td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td.e-selected:hover span.e-day {
@@ -773,7 +779,8 @@ ejs-calendar {
   background: #e5e7eb;
   border: none;
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-calendar .e-content td.e-focused-date:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
@@ -788,14 +795,16 @@ ejs-calendar {
   background: none;
   border: none;
   border-radius: 4px;
-  box-shadow: inset 1px 0 #4f46e5, inset 0 1px #4f46e5, inset -1px 0 #4f46e5, inset 0 -1px #4f46e5;
+  -webkit-box-shadow: inset 1px 0 #4f46e5, inset 0 1px #4f46e5, inset -1px 0 #4f46e5, inset 0 -1px #4f46e5;
+          box-shadow: inset 1px 0 #4f46e5, inset 0 1px #4f46e5, inset -1px 0 #4f46e5, inset 0 -1px #4f46e5;
   color: #4f46e5;
 }
 .e-calendar .e-content td.e-focused-date.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: #f3f4f6;
   border: none;
-  box-shadow: inset 1px 0 #4f46e5, inset 0 1px #4f46e5, inset -1px 0 #4f46e5, inset 0 -1px #4f46e5;
+  -webkit-box-shadow: inset 1px 0 #4f46e5, inset 0 1px #4f46e5, inset -1px 0 #4f46e5, inset 0 -1px #4f46e5;
+          box-shadow: inset 1px 0 #4f46e5, inset 0 1px #4f46e5, inset -1px 0 #4f46e5, inset 0 -1px #4f46e5;
   color: #374151;
 }
 .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,
@@ -818,7 +827,8 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
   background-color: #4f46e5;
   border: none;
-  box-shadow: inset 1px 0 #4f46e5, inset 0 1px #4f46e5, inset -1px 0 #4f46e5, inset 0 -1px #4f46e5;
+  -webkit-box-shadow: inset 1px 0 #4f46e5, inset 0 1px #4f46e5, inset -1px 0 #4f46e5, inset 0 -1px #4f46e5;
+          box-shadow: inset 1px 0 #4f46e5, inset 0 1px #4f46e5, inset -1px 0 #4f46e5, inset 0 -1px #4f46e5;
   color: #fff;
 }
 .e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -883,9 +893,9 @@ ejs-calendar {
 .e-calendar .e-content td.e-selected span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
   background-color: #4f46e5;
+  color: #fff;
   border: none;
   border-radius: 4px;
-  color: #fff;
 }
 .e-calendar .e-content .e-footer,
 .e-bigger.e-small .e-calendar .e-content .e-footer {
@@ -907,7 +917,6 @@ ejs-calendar {
 }
 .e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary:not(:hover),
 .e-bigger.e-small .e-calendar .e-footer-container .e-btn.e-today.e-flat.e-primary:not(:hover) {
-  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #4f46e5;
   border-color: #4f46e5;
@@ -934,18 +943,33 @@ ejs-calendar {
 }
 
 .e-calendar .e-zoomin {
-  animation: animatezoom 0.3s;
+  -webkit-animation: animatezoom 0.3s;
+          animation: animatezoom 0.3s;
+}
+
+@-webkit-keyframes animatezoom {
+  from {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
 }
 
 @keyframes animatezoom {
   from {
-    transform: scale(0);
+    -webkit-transform: scale(0);
+            transform: scale(0);
   }
   to {
-    transform: scale(1);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
 .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
-  box-shadow: 0 0 0 1px #9ca3af;
+  -webkit-box-shadow: 0 0 0 1px #9ca3af;
+          box-shadow: 0 0 0 1px #9ca3af;
   border-radius: 4px;
 }

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

@@ -0,0 +1,107 @@
+//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

package/styles/datepicker/_fluent2-definition.scss

@@ -0,0 +1,118 @@
+//default
+$datepicker-icon: '\e901' !default;
+$datepicker-icon-font-size: $font-icon-14 !default;
+$datepicker-icon-container-min-height: 28px !default;
+$datepicker-icon-container-min-width: 28px !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: 8px !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: 0 !default;
+
+// mouse small icon
+$datepicker-small-icon-font-size: $font-icon-12 !default;
+
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: $font-icon-16 !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: $icon-color !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-popup-box-shadow: $shadow-lg !default;
+$datepicker-overlay: $overlay-bg-color !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: $content-bg-color-alt2 !default;
+$datepicker-modal-header-color: $content-text-color-alt1 !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: 5vh !default;
+$modal-month-header-title-line-height: inherit !default;
+
+$modal-header-border-style: none !default;
+$modal-header-border-width: 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: 0 !default;
+$modal-portrait-next-icon-margin: 0 !default;
+$modal-portrait-header-title-margin: 0 !default;
+$modal-portrait-header-title-position: absolute !default;
+$modal-portrait-header-title-text: center !default;
+$modal-portrait-header-title-width: auto !default;
+$modal-portrait-cancel-icon-color: inherit !default;
+$modal-header-day-line-height: 6vw !default;
+$modal-header-left: 5vw !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: right !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: 73vw !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
+
+$datepicker-mouse-icon-border-radius: 16px !default;
+$datepicker-bigger-icon-border-radius: 20px !default;
+$datepicker-bigger-icon-container-min-height: 36px !default;
+$datepicker-bigger-icon-container-min-width: 36px !default;
+$datepicker-small-icon-container-min-width: 24px !default;
+$datepicker-small-icon-container-min-height: 24px !default;
+$datepicker-small-icon-border-radius: 14px !default;
+$datepicker-small-icon-margin: 0 !default;
+$datepicker-bigger-small-icon-container-min-width: 32px !default;
+$datepicker-bigger-small-icon-container-min-height: 32px !default;
+$datepicker-bigger-small-icon-border-radius: 20px !default;
+$datepicker-bigger-small-icon-margin: 0 !default;
+$datepicker-icon-padding: 0 !default;