@syncfusion/blazor-themes 22.2.11 → 23.1.36

package/SCSS-Themes/calendars/datepicker/bootstrap4.scss

@@ -48,7 +48,7 @@ $modal-month-line-height: 32px !default;
 $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 2vw !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;
@@ -64,7 +64,7 @@ $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: 18vw !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;
@@ -79,7 +79,7 @@ $modal-portrait-footer-display-style: none !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !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;
@@ -98,10 +98,10 @@ $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: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 
@@ -232,6 +232,11 @@ $modal-tablet-table-header-height: 48px !default;
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
+  line-height: $modal-tablet-content-dimension;
+}
+}
 
 .e-datepick-mob-popup-wrap {
   
@@ -245,6 +250,13 @@ $modal-tablet-table-header-height: 48px !default;
       }
     }
 
+    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
+      height: 15vh;
+      .e-popup-close {
+        float: right;
+      }
+    }
+
     #{if(&, '&', '*')} .e-model-header {
       height: $modal-portrait-header-height;
       padding: $modal-portrait-header-padding;
@@ -257,12 +269,19 @@ $modal-tablet-table-header-height: 48px !default;
         color: $modal-portrait-cancel-icon-color;
         float: $modal-portrait-cancel-icon-float-style;
         font-size: $datepicker-bigger-icon-font-size;
-        padding: $modal-portrait-cancel-icon-padding;
         @media (min-device-width: 768px) {
           font-size: $modal-tablet-font-size;
         }
       }
 
+      #{if(&, '&', '*')} .e-btn.e-flat.e-popup-close {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        font-weight: 400;
+        padding: 0;
+      }
+
       #{if(&, '&', '*')} .e-today.e-flat.e-primary {
         color: $modal-today-text-color;
         float: $modal-portrait-today-float-style;
@@ -313,12 +332,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-prev {
           margin-right: $modal-portrait-prev-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width: 35px;
           @media (min-device-width: 768px) {
-            height: 34px;
-            width: 34px;
+            height: 55px;
+            width: 55px;
           }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
            @media (min-device-width: 768px) {
              font-size: $modal-tablet-font-size;
            }
@@ -327,8 +350,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-next {
           margin-right: $modal-portrait-next-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width:35px;
+          @media (min-device-width: 768px) {
+            height: 55px;
+            width: 55px;
+          }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
             @media (min-device-width: 768px) {
               font-size: $modal-tablet-font-size;
             }
@@ -367,11 +398,6 @@ $modal-tablet-table-header-height: 48px !default;
     display: $modal-portrait-footer-display-style;
   }
 
-  .e-calendar-cell-container .e-footer-container {
-    display: block;
-    padding: 5px 0;
-  }
-
   #{if(&, '&', '*')} .e-content.e-month
   {
     height: $modal-portrait-calendar-content-height;
@@ -438,7 +464,6 @@ $modal-tablet-table-header-height: 48px !default;
 
         .e-popup-close {
           float: $modal-portrait-cancel-icon-float-style;
-          padding: $modal-portrait-cancel-icon-padding;
         }
 
         .e-day-wrapper {

package/SCSS-Themes/calendars/datepicker/bootstrap5-dark.scss

@@ -52,10 +52,10 @@ $modal-month-line-height: 32px !default;
 $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 2vw !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-line-height: 6vh !default;
 $modal-month-header-title-line-height: inherit !default;
 
 $modal-header-border-style: solid !default;
@@ -67,7 +67,7 @@ $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: 18vw !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;
@@ -83,7 +83,7 @@ $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: 85vh !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;
@@ -102,10 +102,10 @@ $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: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 
@@ -238,6 +238,11 @@ $modal-tablet-table-header-height: 48px !default;
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
+  line-height: $modal-tablet-content-dimension;
+}
+}
 
 .e-datepick-mob-popup-wrap {
   
@@ -251,6 +256,13 @@ $modal-tablet-table-header-height: 48px !default;
       }
     }
 
+    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
+      height: 15vh;
+      .e-popup-close {
+        float: right;
+      }
+    }
+
     #{if(&, '&', '*')} .e-model-header {
       height: $modal-portrait-header-height;
       padding: $modal-portrait-header-padding;
@@ -263,12 +275,19 @@ $modal-tablet-table-header-height: 48px !default;
         color: $modal-portrait-cancel-icon-color;
         float: $modal-portrait-cancel-icon-float-style;
         font-size: $datepicker-bigger-icon-font-size;
-        padding: $modal-portrait-cancel-icon-padding;
         @media (min-device-width: 768px) {
           font-size: $modal-tablet-font-size;
         }
       }
 
+      #{if(&, '&', '*')} .e-btn.e-flat.e-popup-close {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        font-weight: 400;
+        padding: 0;
+      }
+
       #{if(&, '&', '*')} .e-today.e-flat.e-primary {
         color: $modal-today-text-color;
         float: $modal-portrait-today-float-style;
@@ -319,12 +338,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-prev {
           margin-right: $modal-portrait-prev-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width: 35px;
           @media (min-device-width: 768px) {
-            height: 34px;
-            width: 34px;
+            height: 55px;
+            width: 55px;
           }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
            @media (min-device-width: 768px) {
              font-size: $modal-tablet-font-size;
            }
@@ -333,8 +356,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-next {
           margin-right: $modal-portrait-next-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width:35px;
+          @media (min-device-width: 768px) {
+            height: 55px;
+            width: 55px;
+          }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
             @media (min-device-width: 768px) {
               font-size: $modal-tablet-font-size;
             }
@@ -373,11 +404,6 @@ $modal-tablet-table-header-height: 48px !default;
     display: $modal-portrait-footer-display-style;
   }
 
-  .e-calendar-cell-container .e-footer-container {
-    display: block;
-    padding: 5px 0;
-  }
-
   #{if(&, '&', '*')} .e-content.e-month
   {
     height: $modal-portrait-calendar-content-height;
@@ -444,7 +470,6 @@ $modal-tablet-table-header-height: 48px !default;
 
         .e-popup-close {
           float: $modal-portrait-cancel-icon-float-style;
-          padding: $modal-portrait-cancel-icon-padding;
         }
 
         .e-day-wrapper {

package/SCSS-Themes/calendars/datepicker/bootstrap5.scss

@@ -52,10 +52,10 @@ $modal-month-line-height: 32px !default;
 $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 2vw !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-line-height: 6vh !default;
 $modal-month-header-title-line-height: inherit !default;
 
 $modal-header-border-style: solid !default;
@@ -67,7 +67,7 @@ $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: 18vw !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;
@@ -83,7 +83,7 @@ $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: 85vh !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;
@@ -102,10 +102,10 @@ $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: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 
@@ -238,6 +238,11 @@ $modal-tablet-table-header-height: 48px !default;
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
+  line-height: $modal-tablet-content-dimension;
+}
+}
 
 .e-datepick-mob-popup-wrap {
   
@@ -251,6 +256,13 @@ $modal-tablet-table-header-height: 48px !default;
       }
     }
 
+    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
+      height: 15vh;
+      .e-popup-close {
+        float: right;
+      }
+    }
+
     #{if(&, '&', '*')} .e-model-header {
       height: $modal-portrait-header-height;
       padding: $modal-portrait-header-padding;
@@ -263,12 +275,19 @@ $modal-tablet-table-header-height: 48px !default;
         color: $modal-portrait-cancel-icon-color;
         float: $modal-portrait-cancel-icon-float-style;
         font-size: $datepicker-bigger-icon-font-size;
-        padding: $modal-portrait-cancel-icon-padding;
         @media (min-device-width: 768px) {
           font-size: $modal-tablet-font-size;
         }
       }
 
+      #{if(&, '&', '*')} .e-btn.e-flat.e-popup-close {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        font-weight: 400;
+        padding: 0;
+      }
+
       #{if(&, '&', '*')} .e-today.e-flat.e-primary {
         color: $modal-today-text-color;
         float: $modal-portrait-today-float-style;
@@ -319,12 +338,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-prev {
           margin-right: $modal-portrait-prev-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width: 35px;
           @media (min-device-width: 768px) {
-            height: 34px;
-            width: 34px;
+            height: 55px;
+            width: 55px;
           }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
            @media (min-device-width: 768px) {
              font-size: $modal-tablet-font-size;
            }
@@ -333,8 +356,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-next {
           margin-right: $modal-portrait-next-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width:35px;
+          @media (min-device-width: 768px) {
+            height: 55px;
+            width: 55px;
+          }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
             @media (min-device-width: 768px) {
               font-size: $modal-tablet-font-size;
             }
@@ -373,11 +404,6 @@ $modal-tablet-table-header-height: 48px !default;
     display: $modal-portrait-footer-display-style;
   }
 
-  .e-calendar-cell-container .e-footer-container {
-    display: block;
-    padding: 5px 0;
-  }
-
   #{if(&, '&', '*')} .e-content.e-month
   {
     height: $modal-portrait-calendar-content-height;
@@ -444,7 +470,6 @@ $modal-tablet-table-header-height: 48px !default;
 
         .e-popup-close {
           float: $modal-portrait-cancel-icon-float-style;
-          padding: $modal-portrait-cancel-icon-padding;
         }
 
         .e-day-wrapper {

package/SCSS-Themes/calendars/datepicker/fabric-dark.scss

@@ -43,7 +43,7 @@ $modal-month-line-height: 32px !default;
 $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 2vw !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;
@@ -74,7 +74,7 @@ $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: 85vh !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;
@@ -93,10 +93,10 @@ $modal-landscape-prev-icon-margin: $modal-portrait-prev-icon-margin !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: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 
@@ -229,6 +229,11 @@ $modal-tablet-table-header-height: 48px !default;
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
+  line-height: $modal-tablet-content-dimension;
+}
+}
 
 .e-datepick-mob-popup-wrap {
   
@@ -242,6 +247,13 @@ $modal-tablet-table-header-height: 48px !default;
       }
     }
 
+    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
+      height: 15vh;
+      .e-popup-close {
+        float: right;
+      }
+    }
+
     #{if(&, '&', '*')} .e-model-header {
       height: $modal-portrait-header-height;
       padding: $modal-portrait-header-padding;
@@ -254,12 +266,19 @@ $modal-tablet-table-header-height: 48px !default;
         color: $modal-portrait-cancel-icon-color;
         float: $modal-portrait-cancel-icon-float-style;
         font-size: $datepicker-bigger-icon-font-size;
-        padding: $modal-portrait-cancel-icon-padding;
         @media (min-device-width: 768px) {
           font-size: $modal-tablet-font-size;
         }
       }
 
+      #{if(&, '&', '*')} .e-btn.e-flat.e-popup-close {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        font-weight: 400;
+        padding: 0;
+      }
+
       #{if(&, '&', '*')} .e-today.e-flat.e-primary {
         color: $modal-today-text-color;
         float: $modal-portrait-today-float-style;
@@ -310,12 +329,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-prev {
           margin-right: $modal-portrait-prev-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width: 35px;
           @media (min-device-width: 768px) {
-            height: 34px;
-            width: 34px;
+            height: 55px;
+            width: 55px;
           }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
            @media (min-device-width: 768px) {
              font-size: $modal-tablet-font-size;
            }
@@ -324,8 +347,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-next {
           margin-right: $modal-portrait-next-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width:35px;
+          @media (min-device-width: 768px) {
+            height: 55px;
+            width: 55px;
+          }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
             @media (min-device-width: 768px) {
               font-size: $modal-tablet-font-size;
             }
@@ -364,11 +395,6 @@ $modal-tablet-table-header-height: 48px !default;
     display: $modal-portrait-footer-display-style;
   }
 
-  .e-calendar-cell-container .e-footer-container {
-    display: block;
-    padding: 5px 0;
-  }
-
   #{if(&, '&', '*')} .e-content.e-month
   {
     height: $modal-portrait-calendar-content-height;
@@ -435,7 +461,6 @@ $modal-tablet-table-header-height: 48px !default;
 
         .e-popup-close {
           float: $modal-portrait-cancel-icon-float-style;
-          padding: $modal-portrait-cancel-icon-padding;
         }
 
         .e-day-wrapper {

package/SCSS-Themes/calendars/datepicker/fabric.scss

@@ -39,10 +39,10 @@ $modal-month-font-weight: 500 !default;
 $modal-month-line-height: 32px !default;
 
 // modal dialog dimensions and styles
-$modal-portrait-year-font-size: 4vw !default;
+$modal-portrait-year-font-size: 3vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !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;
@@ -73,7 +73,7 @@ $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: 85vh !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;
@@ -90,12 +90,12 @@ $modal-landscape-calendar-content-big-height: 65vh !default;
 $modal-landscape-header-year-margin: 12vh 0 0 0 !default;
 $modal-landscape-prev-icon-margin: $modal-portrait-prev-icon-margin !default;
 $modal-year-landscape-font-size: 3vw !default;
-$modal-month-landscape-font-size: 4vw !default;
+$modal-month-landscape-font-size: 3vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 
@@ -226,6 +226,11 @@ $modal-tablet-table-header-height: 48px !default;
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
+  line-height: $modal-tablet-content-dimension;
+}
+}
 
 .e-datepick-mob-popup-wrap {
   
@@ -239,6 +244,13 @@ $modal-tablet-table-header-height: 48px !default;
       }
     }
 
+    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
+      height: 15vh;
+      .e-popup-close {
+        float: right;
+      }
+    }
+
     #{if(&, '&', '*')} .e-model-header {
       height: $modal-portrait-header-height;
       padding: $modal-portrait-header-padding;
@@ -251,12 +263,19 @@ $modal-tablet-table-header-height: 48px !default;
         color: $modal-portrait-cancel-icon-color;
         float: $modal-portrait-cancel-icon-float-style;
         font-size: $datepicker-bigger-icon-font-size;
-        padding: $modal-portrait-cancel-icon-padding;
         @media (min-device-width: 768px) {
           font-size: $modal-tablet-font-size;
         }
       }
 
+      #{if(&, '&', '*')} .e-btn.e-flat.e-popup-close {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        font-weight: 400;
+        padding: 0;
+      }
+
       #{if(&, '&', '*')} .e-today.e-flat.e-primary {
         color: $modal-today-text-color;
         float: $modal-portrait-today-float-style;
@@ -307,12 +326,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-prev {
           margin-right: $modal-portrait-prev-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width: 35px;
           @media (min-device-width: 768px) {
-            height: 34px;
-            width: 34px;
+            height: 55px;
+            width: 55px;
           }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
            @media (min-device-width: 768px) {
              font-size: $modal-tablet-font-size;
            }
@@ -321,8 +344,16 @@ $modal-tablet-table-header-height: 48px !default;
 
         #{if(&, '&', '*')} .e-next {
           margin-right: $modal-portrait-next-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width:35px;
+          @media (min-device-width: 768px) {
+            height: 55px;
+            width: 55px;
+          }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
             @media (min-device-width: 768px) {
               font-size: $modal-tablet-font-size;
             }
@@ -361,11 +392,6 @@ $modal-tablet-table-header-height: 48px !default;
     display: $modal-portrait-footer-display-style;
   }
 
-  .e-calendar-cell-container .e-footer-container {
-    display: block;
-    padding: 5px 0;
-  }
-
   #{if(&, '&', '*')} .e-content.e-month
   {
     height: $modal-portrait-calendar-content-height;
@@ -432,7 +458,6 @@ $modal-tablet-table-header-height: 48px !default;
 
         .e-popup-close {
           float: $modal-portrait-cancel-icon-float-style;
-          padding: $modal-portrait-cancel-icon-padding;
         }
 
         .e-day-wrapper {