@syncfusion/blazor-themes 20.3.61 → 20.4.38

package/SCSS-Themes/calendars/daterangepicker/fluent.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') {
 

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

@@ -146,6 +146,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;
 
 // highcontrast 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-highcontrast-icons') {
 

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

@@ -152,6 +152,7 @@ $range-bigger-icon-container-min-height: 24px !default;
 $range-bigger-icon-container-min-width: 24px !default;
 $range-icon-margin: 0 0 4px 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;
@@ -866,6 +867,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 {
@@ -1305,6 +1312,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-material-icons') {
 

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

@@ -153,6 +153,7 @@ $range-bigger-icon-container-min-width: 24px !default;
 $range-icon-margin: 0 0 4px 0 !default;
 $range-icon-bigger-margin: 0 0 2px 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;
@@ -866,6 +867,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 {
@@ -1305,6 +1312,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-material-icons') {
 

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

@@ -122,6 +122,7 @@ $range-small-header-label-size: $text-base !default;
 $range-bigger-indicator-label-size: $text-sm !default;
 $range-bigger-change-icon-size: 20px !default;
 $range-control-bigger-header-margin: 12px 0 !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;
@@ -887,6 +888,12 @@ $range-apply-btn-primary-color: $primary-text-color !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 {
@@ -1326,6 +1333,39 @@ $range-apply-btn-primary-color: $primary-text-color !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-tailwind-icons') {
 

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

@@ -122,6 +122,7 @@ $range-small-header-label-size: $text-base !default;
 $range-bigger-indicator-label-size: $text-sm !default;
 $range-bigger-change-icon-size: 20px !default;
 $range-control-bigger-header-margin: 12px 0 !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;
@@ -887,6 +888,12 @@ $range-apply-btn-primary-color: $primary-text-color !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 {
@@ -1326,6 +1333,39 @@ $range-apply-btn-primary-color: $primary-text-color !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-tailwind-icons') {
 

package/SCSS-Themes/documenteditor/document-editor/bootstrap-dark.scss

@@ -584,6 +584,9 @@ $de-de-rtl-btn-div-e-de-rtl-margin-left: 12px;
 // Table properties
 $de-row-height-bottom-margin: 8px;
 
+//Columns Dialog
+$de-column-presets-font-size: 60px !default;
+
 @include export-module('documenteditor-layout') {
   .e-de-dlg-container {
     padding-bottom: $de-padding-full;
@@ -807,6 +810,19 @@ $de-row-height-bottom-margin: 8px;
     .e-de-background {
         background-color: $de-background;
     }
+    .e-de-column-label {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+    
+    .e-de-column-label.e-de-rtl {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-left: 50px;
+        padding-right: 50px;
+    }
     .e-de-ff-sub-header {
         display: block;
         font-size: 12px;
@@ -4532,6 +4548,45 @@ $de-row-height-bottom-margin: 8px;
     top: $de-td-table-border-top;
   }
 
+  .e-de-columns-presets-genral {
+    height: 62px;
+    width: 62px;
+    margin-right: 33px;
+    margin-bottom: 12px;
+  }
+  
+  .e-de-columns-padding-alignment {
+    padding-top: 24px;
+  }
+
+  .e-de-column-dlg-preview-div {
+    border: 1px solid $de-border-dlg-border-setting-divs-color;
+    height: 120px;
+    width: 120px;
+  }
+
+  .e-de-padding-col-prev{
+    padding-left: 15px;
+  }
+
+  .e-width-space-div{
+    width: 320px;
+  }
+
+  .e-de-columns-presets-genral.e-de-rtl{
+    margin-left: 33px;
+  }
+  
+  .e-de-padding-col-prev.e-de-rtl{
+    padding-right: 15px;
+  }
+  
+  .e-de-column-dlg-preview-div.e-de-rtl{
+    border: 1px solid $de-border-dlg-border-setting-divs-color;
+    height: 120px;
+    width: 120px;
+  }
+
   .e-menu-item .e-de-cmt-add::before {
     content: '\e814';
     font-family: 'e-icons';
@@ -4800,6 +4855,14 @@ $de-row-height-bottom-margin: 8px;
   .e-icon-btn .e-de-paste::before {
     content: '\e68a';
   }
+
+  .e-de-preset-container {
+    width: 95px;
+  }
+
+  .e-de-preset-container.e-de-rtl {
+    width: 85px;
+  }
 }
 
 

package/SCSS-Themes/documenteditor/document-editor/bootstrap.scss

@@ -583,6 +583,9 @@ $de-de-rtl-btn-div-e-de-rtl-margin-left: 12px;
 // Table properties
 $de-row-height-bottom-margin: 8px;
 
+//Columns Dialog
+$de-column-presets-font-size: 60px !default;
+
 @include export-module('documenteditor-layout') {
   .e-de-dlg-container {
     padding-bottom: $de-padding-full;
@@ -806,6 +809,19 @@ $de-row-height-bottom-margin: 8px;
     .e-de-background {
         background-color: $de-background;
     }
+    .e-de-column-label {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+    
+    .e-de-column-label.e-de-rtl {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-left: 50px;
+        padding-right: 50px;
+    }
     .e-de-ff-sub-header {
         display: block;
         font-size: 12px;
@@ -4531,6 +4547,45 @@ $de-row-height-bottom-margin: 8px;
     top: $de-td-table-border-top;
   }
 
+  .e-de-columns-presets-genral {
+    height: 62px;
+    width: 62px;
+    margin-right: 33px;
+    margin-bottom: 12px;
+  }
+
+  .e-de-columns-padding-alignment {
+    padding-top: 24px;
+  }
+
+  .e-de-column-dlg-preview-div {
+    border: 1px solid $de-border-dlg-border-setting-divs-color;
+    height: 120px;
+    width: 120px;
+  }
+
+  .e-de-padding-col-prev{
+    padding-left: 15px;
+  }
+  
+  .e-width-space-div{
+    width: 320px;
+  }
+
+  .e-de-columns-presets-genral.e-de-rtl{
+    margin-left: 33px;
+  }
+  
+  .e-de-padding-col-prev.e-de-rtl{
+    padding-right: 15px;
+  }
+  
+  .e-de-column-dlg-preview-div.e-de-rtl {
+    border: 1px solid $de-border-dlg-border-setting-divs-color;
+    height: 120px;
+    width: 120px;
+  }
+
   .e-menu-item .e-de-cmt-add::before {
     content: '\e814';
     font-family: 'e-icons';
@@ -4799,6 +4854,14 @@ $de-row-height-bottom-margin: 8px;
   .e-icon-btn .e-de-paste::before {
     content: '\e68a';
   }
+
+  .e-de-preset-container {
+    width: 95px;
+  }
+
+  .e-de-preset-container.e-de-rtl {
+    width: 85px;
+  }
 }
 
 

package/SCSS-Themes/documenteditor/document-editor/bootstrap4.scss

@@ -596,6 +596,9 @@ $de-de-rtl-btn-div-e-de-rtl-margin-left: 12px;
 // Table properties
 $de-row-height-bottom-margin: 8px;
 
+//Columns Dialog
+$de-column-presets-font-size: 60px !default;
+
 @include export-module('documenteditor-layout') {
   .e-de-dlg-container {
     padding-bottom: $de-padding-full;
@@ -819,6 +822,19 @@ $de-row-height-bottom-margin: 8px;
     .e-de-background {
         background-color: $de-background;
     }
+    .e-de-column-label {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+    
+    .e-de-column-label.e-de-rtl {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-left: 50px;
+        padding-right: 50px;
+    }
     .e-de-ff-sub-header {
         display: block;
         font-size: 12px;
@@ -4635,6 +4651,45 @@ $de-row-height-bottom-margin: 8px;
     top: $de-td-table-border-top;
   }
 
+  .e-de-columns-presets-genral {
+    height: 62px;
+    width: 62px;
+    margin-right: 33px;
+    margin-bottom: 12px;
+  }
+  
+  .e-de-columns-padding-alignment {
+    padding-top: 24px;
+  }
+
+  .e-de-column-dlg-preview-div {
+    border: 1px solid $de-border-dlg-border-setting-divs-color;
+    height: 120px;
+    width: 120px;
+  }
+
+  .e-de-padding-col-prev{
+    padding-left: 15px;
+  }
+
+  .e-width-space-div{
+    width: 320px;
+  }
+  
+  .e-de-columns-presets-genral.e-de-rtl{
+    margin-left: 33px;
+  }
+  
+  .e-de-padding-col-prev.e-de-rtl {
+    padding-right: 15px;
+  }
+  
+  .e-de-column-dlg-preview-div.e-de-rtl {
+    border: 1px solid $de-border-dlg-border-setting-divs-color;
+    height: 120px;
+    width: 120px;
+  }
+
   .e-de-table-border-diagionalup-alignment::before {
     content: '\e7ca';
     font-size: 16px;
@@ -4797,6 +4852,14 @@ $de-row-height-bottom-margin: 8px;
   .e-item .e-de-paste-merge-table::before {
     content: '\e91f';
   }
+
+  .e-de-preset-container {
+    width: 95px;
+  }
+
+  .e-de-preset-container.e-de-rtl {
+    width: 85px;
+  }
 }