@syncfusion/blazor-themes 22.2.12 → 23.1.36

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

@@ -52,7 +52,7 @@ $modal-month-line-height: 28px !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;
@@ -83,7 +83,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;
@@ -102,10 +102,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;
 
@@ -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/fluent.scss

@@ -52,7 +52,7 @@ $modal-month-line-height: 28px !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;
@@ -83,7 +83,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;
@@ -102,10 +102,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;
 
@@ -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/highcontrast.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;
@@ -57,7 +57,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;
@@ -74,7 +74,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;
@@ -93,10 +93,10 @@ $modal-landscape-prev-icon-margin: 82vw !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;
 
@@ -227,6 +227,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 {
   
@@ -240,6 +245,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;
@@ -252,12 +264,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;
@@ -308,12 +327,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;
            }
@@ -322,8 +345,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;
             }
@@ -362,11 +393,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;
@@ -433,7 +459,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/material-dark.scss

@@ -49,7 +49,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;
@@ -79,7 +79,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;
@@ -98,10 +98,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;
 
@@ -234,6 +234,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 {
   
@@ -247,6 +252,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;
@@ -259,12 +271,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;
@@ -315,12 +334,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;
            }
@@ -329,8 +352,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;
             }
@@ -369,11 +400,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;
@@ -440,7 +466,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/material.scss

@@ -47,7 +47,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;
@@ -78,7 +78,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;
@@ -97,10 +97,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;
 
@@ -231,6 +231,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 {
   
@@ -244,6 +249,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;
@@ -256,12 +268,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;
@@ -312,12 +331,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;
            }
@@ -326,8 +349,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;
             }
@@ -366,11 +397,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;
@@ -437,7 +463,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 {