@syncfusion/blazor-themes 20.3.61 → 20.4.38

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

@@ -1008,7 +1008,7 @@ $calendar-small-font-size: 12px !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

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

@@ -1030,7 +1030,7 @@ $today-button-text-active-color: $primary-text-pressed !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

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

@@ -1030,7 +1030,7 @@ $today-button-text-active-color: $primary-text-pressed !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

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

@@ -970,7 +970,7 @@ $calendar-small-font-size: 12px !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

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

@@ -968,7 +968,7 @@ $calendar-small-font-size: 12px !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

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

@@ -164,7 +164,7 @@ $calendar-active-state-icon-bg-color: $secondary-border-color-pressed !default;
 
 //popup styles
 $calendar-border-style: 1px solid $border-light !default;
-$calendar-bg-color: $transparent !default;
+$calendar-bg-color: $flyout-bg-color !default;
 $calendar-week-number-bg-color: $content-bg-color-alt1 !default;
 $calendar-week-number-font-weight: 400 !default;
 $calendar-box-shadow: none !default;
@@ -1032,7 +1032,7 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

package/SCSS-Themes/calendars/calendar/fluent.scss

@@ -164,7 +164,7 @@ $calendar-active-state-icon-bg-color: $secondary-border-color-pressed !default;
 
 //popup styles
 $calendar-border-style: 1px solid $border-light !default;
-$calendar-bg-color: $transparent !default;
+$calendar-bg-color: $flyout-bg-color !default;
 $calendar-week-number-bg-color: $content-bg-color-alt1 !default;
 $calendar-week-number-font-weight: 400 !default;
 $calendar-box-shadow: none !default;
@@ -1032,7 +1032,7 @@ $calendar-week-number-border: 1px solid $content-text-color-alt3 !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

package/SCSS-Themes/calendars/calendar/highcontrast.scss

@@ -967,7 +967,7 @@ $calendar-small-font-size: 12px !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

package/SCSS-Themes/calendars/calendar/material-dark.scss

@@ -972,7 +972,7 @@ $calendar-small-font-size: 12px !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

package/SCSS-Themes/calendars/calendar/material.scss

@@ -63,7 +63,7 @@ $calendar-small-min-width: $calendar-normal-min-width !default;
 $calendar-weeknumber-min-width: 262px !default;
 $calendar-weeknumber-bigger-width: 320px !default;
 $calendar-normal-month-view-height: 30px !default;
-$calendar-normal-month-view-line-height: $calendar-normal-month-view-height !default;
+$calendar-normal-month-view-line-height: 28px !default;
 $calendar-normal-day-header-height: $calendar-normal-month-view-height !default;
 $calendar-normal-day-header-text: none !default;
 $calendar-normal-year-decade-height: 45px !default;
@@ -142,7 +142,7 @@ $calendar-week-normal-min-width: $calendar-normal-min-width !default;
 $calendar-week-bigger-max-width: $calendar-bigger-max-width !default;
 $calendar-week-bigger-min-width: $calendar-bigger-min-width !default;
 $calendar-bigger-month-view-width: $calendar-bigger-month-view-height !default;
-$calendar-bigger-month-view-line-height: $calendar-bigger-month-view-height !default;
+$calendar-bigger-month-view-line-height: 34px !default;
 $calendar-bigger-year-decade-width: $calendar-bigger-year-decade-height !default;
 $calendar-today-bg-hover-color: $grey-200 !default;
 $calendar-disable-font-color: $calendar-light-font !default;
@@ -179,7 +179,7 @@ $calendar-small-icon-padding: 6px !default;
 $calendar-small-header-height: 32px !default;
 $calendar-small-day-header-height: 24px !default;
 $calendar-small-month-view-height: 24px !default;
-$calendar-small-month-view-line-height: $calendar-small-month-view-height !default;
+$calendar-small-month-view-line-height: 22px !default;
 $calendar-small-date-font-size: 12px !default;
 $calendar-small-month-view-width: 24px !default;
 $calendar-small-popup-padding: 0 !default;
@@ -967,7 +967,7 @@ $calendar-small-font-size: 12px !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

package/SCSS-Themes/calendars/calendar/tailwind-dark.scss

@@ -1042,7 +1042,7 @@ $calendar-today-btn-primary-disabled-border-color: $primary-border-color-disable
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

package/SCSS-Themes/calendars/calendar/tailwind.scss

@@ -1042,7 +1042,7 @@ $calendar-today-btn-primary-disabled-border-color: $primary-border-color-disable
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

package/SCSS-Themes/calendars/daterangepicker/bootstrap-dark.scss

@@ -148,6 +148,7 @@ $range-icon-bottom-right-radius: 3px !default;
 $range-icon-top-right-radius: 3px !default;
 $range-icon-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 16px !default;
@@ -858,6 +859,12 @@ $range-bigger-small-icon-font-size: 18px !default;
 
 
 @media screen and (orientation: landscape) {
+    .e-daterangepicker .e-calendar.e-device .e-month table{
+        display: inline-block;
+        height: $range-calendar-landscape-height;
+        overflow: auto;
+    }
+
     .e-daterangepick-mob-popup-wrap {
      @if $skin-name == 'material' {
         #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
@@ -1297,6 +1304,39 @@ $range-bigger-small-icon-font-size: 18px !default;
   }
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-today-hover-line-height;
+  }
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-other-hover-line-height;
+  }
+}
+
+.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
+.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-small-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-other-hover-line-height;
+  }
+}
+
 
 @include export-module('daterangepicker-bootstrap-icons') {
 

package/SCSS-Themes/calendars/daterangepicker/bootstrap.scss

@@ -148,6 +148,7 @@ $range-icon-top-right-radius: 3px !default;
 $range-icon-margin: 0 !default;
 $range-icon-bigger-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 16px !default;
@@ -858,6 +859,12 @@ $range-bigger-small-icon-font-size: 18px !default;
 
 
 @media screen and (orientation: landscape) {
+    .e-daterangepicker .e-calendar.e-device .e-month table{
+        display: inline-block;
+        height: $range-calendar-landscape-height;
+        overflow: auto;
+    }
+
     .e-daterangepick-mob-popup-wrap {
      @if $skin-name == 'material' {
         #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
@@ -1297,6 +1304,39 @@ $range-bigger-small-icon-font-size: 18px !default;
   }
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-today-hover-line-height;
+  }
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-other-hover-line-height;
+  }
+}
+
+.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
+.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-small-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-other-hover-line-height;
+  }
+}
+
 
 @include export-module('daterangepicker-bootstrap-icons') {
 

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

@@ -158,6 +158,7 @@ $range-bigger-icon-container-min-width: 33px !default;
 $range-icon-margin: 0 !default;
 $range-icon-bigger-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 14px !default;
@@ -868,6 +869,12 @@ $range-bigger-small-icon-font-size: 15px !default;
 
 
 @media screen and (orientation: landscape) {
+    .e-daterangepicker .e-calendar.e-device .e-month table{
+        display: inline-block;
+        height: $range-calendar-landscape-height;
+        overflow: auto;
+    }
+
     .e-daterangepick-mob-popup-wrap {
      @if $skin-name == 'material' {
         #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
@@ -1307,6 +1314,39 @@ $range-bigger-small-icon-font-size: 15px !default;
   }
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-today-hover-line-height;
+  }
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-other-hover-line-height;
+  }
+}
+
+.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
+.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-small-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-other-hover-line-height;
+  }
+}
+
 
 @include export-module('daterangepicker-bootstrap4-icons') {
 

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

@@ -114,6 +114,7 @@ $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
 $range-calendar-bigger-max: 296px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;
@@ -896,6 +897,12 @@ $cancel-buuton-text-active-color: $secondary-text-color-pressed !default;
 
 
 @media screen and (orientation: landscape) {
+    .e-daterangepicker .e-calendar.e-device .e-month table{
+        display: inline-block;
+        height: $range-calendar-landscape-height;
+        overflow: auto;
+    }
+
     .e-daterangepick-mob-popup-wrap {
      @if $skin-name == 'material' {
         #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
@@ -1335,6 +1342,39 @@ $cancel-buuton-text-active-color: $secondary-text-color-pressed !default;
   }
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-today-hover-line-height;
+  }
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-other-hover-line-height;
+  }
+}
+
+.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
+.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-small-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-other-hover-line-height;
+  }
+}
+
 
 @include export-module('daterangepicker-bootstrap5-icons') {
 

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

@@ -114,6 +114,7 @@ $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
 $range-calendar-bigger-max: 296px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;
@@ -896,6 +897,12 @@ $cancel-buuton-text-active-color: $secondary-text-color-pressed !default;
 
 
 @media screen and (orientation: landscape) {
+    .e-daterangepicker .e-calendar.e-device .e-month table{
+        display: inline-block;
+        height: $range-calendar-landscape-height;
+        overflow: auto;
+    }
+
     .e-daterangepick-mob-popup-wrap {
      @if $skin-name == 'material' {
         #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
@@ -1335,6 +1342,39 @@ $cancel-buuton-text-active-color: $secondary-text-color-pressed !default;
   }
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-today-hover-line-height;
+  }
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-other-hover-line-height;
+  }
+}
+
+.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
+.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-small-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-other-hover-line-height;
+  }
+}
+
 
 @include export-module('daterangepicker-bootstrap5-icons') {
 

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

@@ -148,6 +148,7 @@ $range-icon-bottom-right-radius: 0 !default;
 $range-icon-top-right-radius: 0 !default;
 $range-icon-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 16px !default;
@@ -861,6 +862,12 @@ $range-bigger-small-icon-font-size: 18px !default;
 
 
 @media screen and (orientation: landscape) {
+    .e-daterangepicker .e-calendar.e-device .e-month table{
+        display: inline-block;
+        height: $range-calendar-landscape-height;
+        overflow: auto;
+    }
+
     .e-daterangepick-mob-popup-wrap {
      @if $skin-name == 'material' {
         #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
@@ -1300,6 +1307,39 @@ $range-bigger-small-icon-font-size: 18px !default;
   }
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-today-hover-line-height;
+  }
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-other-hover-line-height;
+  }
+}
+
+.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
+.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-small-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-other-hover-line-height;
+  }
+}
+
 
 @include export-module('daterangepicker-fabric-icons') {
 

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

@@ -147,6 +147,7 @@ $range-icon-top-right-radius: 0 !default;
 $range-icon-margin: 0 !default;
 $range-icon-bigger-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 16px !default;
@@ -858,6 +859,12 @@ $range-bigger-small-icon-font-size: 18px !default;
 
 
 @media screen and (orientation: landscape) {
+    .e-daterangepicker .e-calendar.e-device .e-month table{
+        display: inline-block;
+        height: $range-calendar-landscape-height;
+        overflow: auto;
+    }
+
     .e-daterangepick-mob-popup-wrap {
      @if $skin-name == 'material' {
         #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
@@ -1297,6 +1304,39 @@ $range-bigger-small-icon-font-size: 18px !default;
   }
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-today-hover-line-height;
+  }
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-other-hover-line-height;
+  }
+}
+
+.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
+.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-small-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-other-hover-line-height;
+  }
+}
+
 
 @include export-module('daterangepicker-fabric-icons') {
 

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

@@ -90,6 +90,11 @@ $range-presets-width: 160px !default;
 $range-hover-start-radius: 0 !default;
 $range-hover-end-radius: 0 !default;
 $range-selected-hover-radius: 50% !default;
+$range-today-hover-line-height: 26px !default;
+$range-other-hover-line-height: 28px !default;
+$range-small-today-hover-line-height: 24px !default;
+$range-bigger-today-hover-line-height: 30px !default;
+$range-bigger-other-hover-line-height: 32px !default;
 $range-btn-height: 36px !default;
 $range-device-btn-line-height: 34px !default;
 $range-icon-hover-color: $content-bg-color-hover !default;
@@ -117,6 +122,7 @@ $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
 $range-calendar-bigger-max: 296px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;
@@ -900,6 +906,12 @@ $selected-range-box-shadow: inset 1px 0 $border, inset 0 1px $border, inset -1px
 
 
 @media screen and (orientation: landscape) {
+    .e-daterangepicker .e-calendar.e-device .e-month table{
+        display: inline-block;
+        height: $range-calendar-landscape-height;
+        overflow: auto;
+    }
+
     .e-daterangepick-mob-popup-wrap {
      @if $skin-name == 'material' {
         #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
@@ -1339,6 +1351,39 @@ $selected-range-box-shadow: inset 1px 0 $border, inset 0 1px $border, inset -1px
   }
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-today-hover-line-height;
+  }
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-other-hover-line-height;
+  }
+}
+
+.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
+.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-small-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-other-hover-line-height;
+  }
+}
+
 
 @include export-module('daterangepicker-fluent-icons') {