@syncfusion/blazor-themes 22.2.11 → 23.1.36

package/SCSS-Themes/buttons/switch/bootstrap-dark.scss

@@ -834,6 +834,12 @@ $switch-bigger-small-ripple-width: 36px !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -892,6 +898,11 @@ $switch-bigger-small-ripple-width: 36px !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/bootstrap.scss

@@ -832,6 +832,12 @@ $switch-bigger-small-ripple-width: 36px !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -890,6 +896,11 @@ $switch-bigger-small-ripple-width: 36px !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/bootstrap4.scss

@@ -833,6 +833,12 @@ $switch-bigger-small-ripple-width: 36px !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -891,6 +897,11 @@ $switch-bigger-small-ripple-width: 36px !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/bootstrap5-dark.scss

@@ -830,6 +830,12 @@ $switch-handle-off-hover-bg-color: $border !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -888,6 +894,11 @@ $switch-handle-off-hover-bg-color: $border !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/bootstrap5.scss

@@ -830,6 +830,12 @@ $switch-handle-off-hover-bg-color: $border !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -888,6 +894,11 @@ $switch-handle-off-hover-bg-color: $border !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/fabric-dark.scss

@@ -839,6 +839,12 @@ $switch-bigger-small-ripple-width: 36px !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -897,6 +903,11 @@ $switch-bigger-small-ripple-width: 36px !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/fabric.scss

@@ -837,6 +837,12 @@ $switch-bigger-small-ripple-width: 36px !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -895,6 +901,11 @@ $switch-bigger-small-ripple-width: 36px !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/fluent-dark.scss

@@ -832,6 +832,12 @@ $switch-handle-off-hover-bg-color: $border-alt !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -890,6 +896,11 @@ $switch-handle-off-hover-bg-color: $border-alt !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/fluent.scss

@@ -832,6 +832,12 @@ $switch-handle-off-hover-bg-color: $border-alt !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -890,6 +896,11 @@ $switch-handle-off-hover-bg-color: $border-alt !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/highcontrast.scss

@@ -839,6 +839,12 @@ $switch-bigger-small-ripple-width: 36px !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -897,6 +903,11 @@ $switch-bigger-small-ripple-width: 36px !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/material-dark.scss

@@ -847,6 +847,12 @@ $switch-handle-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2),
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -905,6 +911,11 @@ $switch-handle-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2),
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/material.scss

@@ -841,6 +841,12 @@ $switch-bigger-small-handle-to: 0 !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -899,6 +905,11 @@ $switch-bigger-small-handle-to: 0 !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/material3-dark.scss

@@ -855,6 +855,12 @@ $switch-small-off-ripple-left: -7px !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -913,6 +919,11 @@ $switch-small-off-ripple-left: -7px !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/material3.scss

@@ -855,6 +855,12 @@ $switch-small-off-ripple-left: -7px !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -913,6 +919,11 @@ $switch-small-off-ripple-left: -7px !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/tailwind-dark.scss

@@ -830,6 +830,12 @@ $switch-handle-off-hover-bg-color: $content-bg-color !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -888,6 +894,11 @@ $switch-handle-off-hover-bg-color: $content-bg-color !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/buttons/switch/tailwind.scss

@@ -830,6 +830,12 @@ $switch-handle-off-hover-bg-color: $content-bg-color !default;
         }
       }
 
+      & .e-switch-handle:not(.e-switch-active) {
+        @if $skin-name == 'Material3' {
+          background-color: $switch-on-disabled-bg-color;
+        }
+      }
+
       & .e-switch-handle {
         background-color: $switch-handle-disabled-bg-color;
         box-shadow: $switch-handle-shadow-disabled;
@@ -888,6 +894,11 @@ $switch-handle-off-hover-bg-color: $content-bg-color !default;
             border-color: $switch-border-disabled-bg-color;
           }
         }
+        & .e-switch-handle:not(.e-switch-active) {
+          @if $skin-name == 'Material3' {
+            background-color: $switch-on-disabled-bg-color;
+          }
+        }
 
         & .e-switch-inner {
           @if $skin-name == 'bootstrap4' {

package/SCSS-Themes/calendars/datepicker/bootstrap-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-month-header-line-height: 5vh !default;
 $modal-month-header-title-line-height: inherit !default;
@@ -58,7 +58,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;
@@ -72,7 +72,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;
@@ -94,10 +94,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;
 
@@ -228,6 +228,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 {
   
@@ -241,6 +246,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;
@@ -253,12 +265,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;
@@ -309,12 +328,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;
            }
@@ -323,8 +346,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;
             }
@@ -363,11 +394,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;
@@ -434,7 +460,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/bootstrap.scss

@@ -42,7 +42,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-month-header-line-height: 5vh !default;
 $modal-month-header-title-line-height: inherit !default;
@@ -59,7 +59,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-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;
@@ -93,10 +93,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;
 
@@ -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 {