@syncfusion/blazor-themes 22.2.11 → 23.1.36

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

@@ -63,7 +63,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;
@@ -94,7 +94,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;
@@ -113,10 +113,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;
 
@@ -247,6 +247,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 {
   
@@ -260,6 +265,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;
@@ -272,12 +284,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;
@@ -328,12 +347,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;
            }
@@ -342,8 +365,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;
             }
@@ -382,11 +413,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;
@@ -453,7 +479,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/material3.scss

@@ -63,7 +63,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;
@@ -94,7 +94,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;
@@ -113,10 +113,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;
 
@@ -247,6 +247,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 {
   
@@ -260,6 +265,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;
@@ -272,12 +284,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;
@@ -328,12 +347,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;
            }
@@ -342,8 +365,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;
             }
@@ -382,11 +413,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;
@@ -453,7 +479,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/tailwind-dark.scss

@@ -18,7 +18,7 @@ $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: 6px !default;
+$datepicker-popup-bigger-margin-top: 0 !default;
 
 // mouse small icon
 $datepicker-small-icon-font-size: $font-icon-16 !default;
@@ -50,7 +50,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;
@@ -63,9 +63,9 @@ $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-prev-icon-margin: 73vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 18vw !default;
+$modal-portrait-header-title-margin: 21vw !default;
 $modal-portrait-header-title-position: absolute !default;
 $modal-portrait-header-title-text: center !default;
 $modal-portrait-header-title-width: 50vw !default;
@@ -81,7 +81,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;
@@ -96,14 +96,14 @@ $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: 85vw !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: 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;
 
@@ -236,6 +236,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 {
   
@@ -249,6 +254,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;
@@ -261,12 +273,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;
@@ -317,12 +336,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;
            }
@@ -331,8 +354,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;
             }
@@ -371,11 +402,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;
@@ -442,7 +468,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/tailwind.scss

@@ -18,7 +18,7 @@ $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: 6px !default;
+$datepicker-popup-bigger-margin-top: 0 !default;
 
 // mouse small icon
 $datepicker-small-icon-font-size: $font-icon-16 !default;
@@ -50,7 +50,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;
@@ -63,9 +63,9 @@ $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-prev-icon-margin: 73vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 18vw !default;
+$modal-portrait-header-title-margin: 21vw !default;
 $modal-portrait-header-title-position: absolute !default;
 $modal-portrait-header-title-text: center !default;
 $modal-portrait-header-title-width: 50vw !default;
@@ -81,7 +81,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;
@@ -96,14 +96,14 @@ $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: 85vw !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: 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;
 
@@ -236,6 +236,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 {
   
@@ -249,6 +254,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;
@@ -261,12 +273,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;
@@ -317,12 +336,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;
            }
@@ -331,8 +354,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;
             }
@@ -371,11 +402,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;
@@ -442,7 +468,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 {