@syncfusion/ej2-calendars 25.2.7 → 26.1.38

package/styles/daterangepicker/_layout.scss

@@ -1,12 +1,10 @@
 @include export-module('daterangepicker-layout') {
-  
-  /*! daterangepicker layout */
+
   .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
   .e-float-input.e-control-wrapper.e-input-group.e-date-range-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
     display: flex;
   }
 
-  // Hidden element styles
   .e-float-input.e-input-group.e-control-wrapper.e-date-range-wrapper .e-daterange-hidden,
   .e-input-group.e-control-wrapper.e-date-range-wrapper .e-daterange-hidden,
   .e-float-input.e-control-wrapper.e-date-range-wrapper .e-daterange-hidden,
@@ -101,6 +99,9 @@
         @if ($skin-name != 'FluentUI') {
           padding: $range-calendar-popup-padding;
         }
+        @if $skin-name == 'fluent2' {
+          box-shadow: none;
+        }
 
         #{if(&, '&', '*')} .e-content table {
           @if ($skin-name != 'FluentUI') {
@@ -126,12 +127,12 @@
             }
           }
           #{if(&, '&', '*')} .e-next {
-            @if ($skin-name != 'FluentUI') {
+            @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
               float: $range-float-right;
             }
           }
           #{if(&, '&', '*')} .e-prev {
-            @if ($skin-name != 'FluentUI') {
+            @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
               float: $range-float-left;
             }
           }
@@ -186,6 +187,9 @@
         overflow: $range-visibility-hidden;
         padding: $range-btn-padding;
         text-overflow: $range-text-overflow;
+        @if $skin-name == 'fluent2' {
+          border: $footer-btn-border;
+        }
       }
       #{if(&, '&', '*')} .e-footer .e-btn.e-apply {
         margin: $range-normal-footer-margin;
@@ -330,8 +334,6 @@
     max-width: $calendar-bigger-small-max-width;
   }
 
-  //bigger style
-
   .e-bigger #{&}.e-daterangepicker,
   #{if(&, '&', '*')}.e-bigger#{&}.e-daterangepicker,
   #{if(&, '&', '*')}.e-device#{&}.e-daterangepicker {
@@ -660,9 +662,7 @@
 }
 
 .e-daterangepick-mob-popup-wrap {
-
-    #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      
+    #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {      
       #{if(&, '&', '*')} .e-date-range-container {
             min-height: $modal-range-portrait-calendar-min-height;
             min-width: $modal-range-portrait-calendar-min-width;
@@ -833,7 +833,6 @@
           }
         }
 
-
         #{if(&, '&', '*')} .e-separator {
             margin: 0;
         }
@@ -896,22 +895,19 @@
     }
 }
 
-
 @media screen and (orientation: landscape) {
-
   .e-daterangepick-mob-popup-wrap {
-
     #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-
       #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
-        padding: 0;
+        @if $skin-name != 'fluent2' {
+          padding: 0;
+        }
         @media (min-device-width: 768px) {
           font-size: $modal-range-header-landscape-font-size;
         }
       }
 
       #{if( &, '&', '*')} .e-calendar-holder {
-
         #{if(&, '&', '*')} .e-calendar-container {
           @media (min-height: 600px) {
             min-height: 70vh;
@@ -946,7 +942,6 @@
       }
 
       #{if(&, '&', '*')} .e-range-mob-popup-wrap {
-
         #{if(&, '&', '*')} .e-model-header {
           height: $modal-range-header-landscape-height;
           font-size: $modal-range-header-landscape-font-size;
@@ -1006,8 +1001,7 @@
           }
           overflow-y: $modal-range-landscape-conetent-overflow;
 
-          table {
-  
+          table {  
             @media (min-height: 600px) {
               height: $modal-range-tablet-header-height;
             }
@@ -1026,5 +1020,3 @@
 .e-outline.e-float-input.e-static-clear.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 110px);
 }
-
-/* stylelint-enable */

package/styles/daterangepicker/_material3-definition.scss

@@ -1,4 +1,3 @@
-//default
 $range-bg-color: $content-bg-color-alt3 !default;
 $range-primary-color: rgba($primary) !default;
 $range-primary-font-color: rgba($primary-text-color) !default;
@@ -146,8 +145,6 @@ $range-hover-bg-color: $transparent !default;
 $range-icon-bigger-container-min-height: 38px !default;
 $range-icon-bigger-container-min-width: 38px !default;
 $range-icon-bigger-border-radius: 20px !default;
-
-// new variable
 $range-icon: '\e245' !default;
 $range-icon-font-size: $font-icon-16 !default;
 $range-bigger-icon-font-size: $font-icon-20 !default;
@@ -184,8 +181,6 @@ $range-calendar-today-start-color: $range-calendar-active-border !default;
 $range-calendar-other-normal-border: none !default;
 $range-calendar-bigger-max: 296px !default;
 $range-active-font-color: rgba($primary-text-color) !default;
-
-// Mouse small size
 $range-small-header-label-size: 16px !default;
 $range-small-font-size: 12px !default;
 $range-start-end-container-small-height: 32px !default;
@@ -203,14 +198,8 @@ $range-small-icon-border-radius: 14px !default;
 $range-bigger-small-icon-container-min-width: 34px !default;
 $range-bigger-small-icon-container-min-height: 34px !default;
 $range-bigger-small-icon-border-radius: 20px !default;
-
-// mouse small icon
 $range-small-icon-font-size: $font-icon-16 !default;
-
-// touch small icon
 $range-bigger-small-icon-font-size: $font-icon-20 !default;
-
-// modal full-screen styles
 $modal-range-portrait-calendar-min-height: 100% !default;
 $modal-range-portrait-calendar-min-width: 100% !default;
 $modal-range-portrait-calendar-height: 100% !default;
@@ -253,8 +242,6 @@ $modal-month-name-line-height: 44px !default;
 $modal-header-month-name-left-width: -29vw !default;
 $modal-header-month-name-left-landscape-width: -27vw !default;
 $modal-header-month-name-width: 50vw !default;
-
-// header styles for presets
 $modal-range-presets-header-height: 10% !default;
 $modal-range-presets-portrait-height: 90% !default;
 $modal-range-presets-landscape-height: 85% !default;
@@ -269,14 +256,7 @@ $modal-range-header-border-bottom: none !default;
 $modal-range-header-landscape-height: 15% !default;
 $modal-range-header-landscape-font-size: 18px !default;
 $modal-landscape-padding: 1vh 1vw !default;
-
-// modal dialog colors
 $modal-range-header-bg-color: rgba($primary) !default;
 $modal-range-header-text-color: rgba($primary-text-color) !default;
-
-// tablet device style changes for modal popup
 $modal-range-tablet-font-size: 18px !default;
-
 $range-header-font-size: 16px !default;
-
-//enddefault

package/styles/daterangepicker/_theme.scss

@@ -1,6 +1,4 @@
 @include export-module('daterangepicker-theme') {
-
-  /*! daterangepicker theme */
   .e-date-range-wrapper {
     #{if(&, '&', '*')} .e-input-group-icon.e-icons.e-active {
       @if $skin-name == 'bootstrap4' {
@@ -33,6 +31,9 @@
         #{if(&, '&', '*')} .e-header .e-title:hover {
           color: $range-calendar-header-dark-color;
           text-decoration: none;
+          @if $skin-name == 'fluent2' {
+            width: 72%;
+          }
         }
         #{if(&, '&', '*')} .e-content .e-range-hover {
           @if $skin-name != 'Material3' {
@@ -161,12 +162,16 @@
         }
         #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover span.e-day,
         #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover span.e-day {
-          @if $skin-name != 'Material3' {
+          @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
             background-color: $range-selection-bg;
           }
           @if $skin-name == 'Material3' {
             background: $range-selection-bg;
           }
+          @if $skin-name == 'fluent2' {
+            background: $range-selection-bg;
+            border-radius: $range-selected-hover-radius;
+          }
           color: $range-active-font-color;
           @if ($skin-name == 'FluentUI') {
             border-radius: $range-selected-hover-radius;
@@ -181,6 +186,11 @@
             box-shadow: $range-value-none;
             color: $range-active-font-color;
           }
+          @if ($skin-name == 'fluent2') {
+            background: $range-selection-bg;
+            border-radius: $range-selected-hover-radius;
+            color: $range-active-font-color;
+          }
         }
         #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover.e-other-month span.e-day,
         #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover.e-other-month span.e-day {
@@ -247,6 +257,9 @@
         @if $skin-name == 'Material3' {
           background: $range-separator-color;
         }
+        @if $skin-name == 'fluent2' {
+          display: none;
+        }
       }
       #{if(&, '&', '*')} .e-footer {
         @if $skin-name != 'Material3' {
@@ -281,7 +294,6 @@
     }
   }
 
-  //bigger style
   .e-bigger #{&}.e-daterangepicker,
   #{if(&, '&', '*')}.e-bigger#{&}.e-daterangepicker,
   #{if(&, '&', '*')}.e-device#{&}.e-daterangepicker {
@@ -323,7 +335,6 @@
     }
   }
 
-  // apply button override style changes
   .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary,
   .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary {
     @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
@@ -364,7 +375,6 @@
     }
   }
 
-  // cancel button override style changes
   .e-daterangepicker.e-popup .e-footer .e-btn.e-flat,
   .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat {
     @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
@@ -440,9 +450,7 @@
 }
 
 .e-daterangepick-mob-popup-wrap {
-
   #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-
     #{if(&, '&', '*')} .e-model-header {
       background-color: $modal-range-header-bg-color;
       color: $modal-range-header-text-color;

package/styles/daterangepicker/bootstrap-dark.css

@@ -63,9 +63,9 @@
   font-family: "e-icons";
 }
 
-/*! daterangepicker layout */
 .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-date-range-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -89,7 +89,8 @@
 .e-bigger.e-small .e-daterangepicker.e-popup {
   border: 1px solid rgba(141, 141, 141, 0.15);
   border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
+  -webkit-box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
+          box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
   max-height: 500px;
   max-width: 730px;
 }
@@ -122,6 +123,7 @@
   text-decoration: none;
   text-overflow: ellipsis;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   white-space: nowrap;
@@ -142,14 +144,17 @@
   margin: 0;
   text-align: center;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
 }
 .e-daterangepicker.e-popup .e-range-header .e-start-end,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-start-end {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 35px;
@@ -218,14 +223,18 @@
 }
 .e-daterangepicker.e-popup .e-footer,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-footer {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   border-top: 1px solid rgba(240, 240, 240, 0.12);
   clear: both;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: row-reverse;
-      flex-direction: row-reverse;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
   height: 48px;
 }
 .e-daterangepicker.e-popup .e-footer .e-btn,
@@ -251,6 +260,7 @@
 }
 .e-daterangepicker.e-popup .e-calendar-container,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -331,10 +341,13 @@
 }
 .e-daterangepicker.e-rtl .e-footer,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-footer {
-  -ms-flex-direction: row;
-      flex-direction: row;
-  -ms-flex-pack: end;
-      justify-content: flex-end;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
 }
 .e-daterangepicker.e-rtl .e-footer .e-btn.e-cancel,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-footer .e-btn.e-cancel {
@@ -381,15 +394,19 @@
 .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end,
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 36px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -400,7 +417,8 @@
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn {
   border: 1px solid #0070f0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   font-size: 16px;
   font-weight: normal;
   height: 36px;
@@ -427,7 +445,8 @@
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn:hover:not([disabled]),
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn:hover,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn:hover:not([disabled]) {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active:active, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active:active:not([disabled]), .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active:hover, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active:hover,
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active,
@@ -442,7 +461,8 @@
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active:active:not([disabled]),
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active:hover,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn,
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn,
@@ -614,15 +634,20 @@
 }
 
 .e-daterangepick-mob-popup-wrap {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   height: 100%;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   left: 0;
   max-height: 100%;
   position: fixed;
@@ -825,10 +850,12 @@
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
   height: 10%;
   padding: 2.5vh 2.5vw 2.5vh 1.5vw;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   font-size: 3vh;
   border-bottom: none;
 }
@@ -884,8 +911,6 @@
     max-height: 85%;
     height: 85%;
   }
-}
-@media screen and (orientation: landscape) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
     height: 15%;
     font-size: 18px;
@@ -896,8 +921,6 @@
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-model-title {
     padding: 1vh 1vw;
   }
-}
-@media screen and (orientation: landscape) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header {
     width: 100%;
   }
@@ -969,8 +992,6 @@
   width: calc(100% - 110px);
 }
 
-/* stylelint-enable */
-/*! daterangepicker theme */
 .e-date-range-wrapper .e-input-group-icon.e-icons.e-active {
   color: #f0f0f0;
 }