@syncfusion/ej2-calendars 32.2.9 → 33.2.3

package/styles/material3.css

@@ -1716,8 +1716,11 @@ ejs-calendar {
   cursor: pointer;
 }
 
+.e-timepicker {
+  --dummy-style: true;
+}
+
 .e-timepicker.e-time-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -1998,7 +2001,6 @@ ejs-calendar {
 }
 
 .e-timepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: none;
   border-radius: calc(var(--e-radius) * 0.25);
@@ -2006,7 +2008,6 @@ ejs-calendar {
           box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 .e-timepicker.e-popup .e-list-parent.e-ul {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-timepicker.e-popup .e-list-parent.e-ul li.e-list-item {
@@ -2317,6 +2318,9 @@ ejs-calendar {
           box-sizing: border-box;
 }
 
+.e-datepicker {
+  --dummy-style: true;
+}
 .e-datepicker .e-calendar .e-content table tbody tr.e-month-hide:last-child {
   display: none;
 }
@@ -2326,7 +2330,6 @@ ejs-calendar {
   pointer-events: auto;
 }
 .e-datepicker.e-date-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -2338,7 +2341,6 @@ ejs-calendar {
   z-index: 999;
 }
 .e-datepicker .e-model-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   cursor: default;
@@ -2758,7 +2760,6 @@ ejs-calendar {
 }
 .e-datepicker .e-calendar,
 .e-small.e-datepicker .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: none;
 }
@@ -2874,7 +2875,6 @@ ejs-calendar {
 }
 .e-bigger.e-datepicker .e-calendar,
 .e-bigger.e-small.e-datepicker .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: none;
 }
@@ -3095,6 +3095,9 @@ ejs-calendar {
   width: 0;
 }
 
+.e-daterangepicker {
+  --dummy-style: true;
+}
 .e-daterangepicker.e-popup {
   border: none;
   border-radius: calc(var(--e-radius) * 0.5);
@@ -3113,7 +3116,6 @@ ejs-calendar {
   max-height: none;
 }
 .e-daterangepicker.e-popup .e-range-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   padding: 16px 16px 0 16px;
   width: auto;
@@ -3847,11 +3849,9 @@ ejs-calendar {
 }
 
 .e-daterangepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-calendar .e-header .e-title, .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover {
@@ -3859,7 +3859,6 @@ ejs-calendar {
   text-decoration: none;
 }
 .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -3927,11 +3926,9 @@ ejs-calendar {
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-daterangepicker.e-popup .e-separator {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-footer {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom-left-radius: calc(var(--e-radius) * 0.5);
   border-bottom-right-radius: calc(var(--e-radius) * 0.5);
@@ -4048,7 +4045,6 @@ ejs-calendar {
 }
 .e-bigger .e-daterangepicker.e-range-modal,
 *.e-device.e-daterangepicker.e-range-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -4063,7 +4059,6 @@ ejs-calendar {
 .e-bigger .e-daterangepicker.e-popup,
 *.e-bigger.e-daterangepicker.e-popup,
 *.e-device.e-daterangepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-bigger .e-daterangepicker.e-popup.e-preset-wrapper,
@@ -4304,7 +4299,6 @@ ejs-calendar {
 *.e-bigger.e-daterangepicker .e-end-btn,
 *.e-device.e-daterangepicker .e-start-btn,
 *.e-device.e-daterangepicker .e-end-btn {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-bigger .e-daterangepicker .e-start-btn.e-active, .e-bigger .e-daterangepicker .e-start-btn.e-active:active, .e-bigger .e-daterangepicker .e-end-btn.e-active, .e-bigger .e-daterangepicker .e-end-btn.e-active:active:not([disabled]), .e-bigger .e-daterangepicker .e-start-btn.e-active:hover, .e-bigger .e-daterangepicker .e-end-btn.e-active:hover,
@@ -4342,7 +4336,6 @@ ejs-calendar {
   max-height: none;
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   padding: 16px 16px 0 16px;
   width: auto;
@@ -4558,12 +4551,10 @@ ejs-calendar {
 
 .e-bigger.e-small .e-daterangepicker.e-popup,
 .e-bigger.e-small.e-daterangepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title, .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover,
@@ -4574,7 +4565,6 @@ ejs-calendar {
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -4672,12 +4662,10 @@ ejs-calendar {
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-separator,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-separator {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-footer,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-footer {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom-left-radius: calc(var(--e-radius) * 0.5);
   border-bottom-right-radius: calc(var(--e-radius) * 0.5);
@@ -4849,6 +4837,10 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-datetimepicker {
+  --dummy-style: true;
+}
+
 .e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon {
   margin: 0;
 }
@@ -4888,7 +4880,6 @@ ejs-calendar {
 }
 
 .e-datetimepicker.e-time-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -5063,7 +5054,6 @@ ejs-calendar {
           box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 .e-datetimepicker.e-popup .e-list-parent.e-ul {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-datetimepicker.e-popup .e-list-parent.e-ul li.e-list-item {

package/styles/timepicker/_layout.scss

@@ -32,6 +32,12 @@
     }
   }
 
+  #{&}.e-timepicker {
+    @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
+      --dummy-style: true;
+    }
+  }
+
   #{&}.e-timepicker.e-time-modal {
     @if $timepicker-skin-name != 'Material3' {
       background-color: $timepicker-default-overlay;

package/styles/timepicker/material-dark.css

@@ -73,6 +73,10 @@
   cursor: pointer;
 }
 
+.e-timepicker {
+  --dummy-style: true;
+}
+
 .e-timepicker.e-time-modal {
   background-color: rgba(0, 0, 0, 0.6);
   height: 100%;

package/styles/timepicker/material.css

@@ -103,6 +103,10 @@
   cursor: pointer;
 }
 
+.e-timepicker {
+  --dummy-style: true;
+}
+
 .e-timepicker.e-time-modal {
   background-color: rgba(0, 0, 0, 0.6);
   height: 100%;

package/styles/timepicker/material3-dark.css

@@ -239,8 +239,11 @@
   cursor: pointer;
 }
 
+.e-timepicker {
+  --dummy-style: true;
+}
+
 .e-timepicker.e-time-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -519,7 +522,6 @@
 }
 
 .e-timepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: none;
   border-radius: calc(var(--e-radius) * 0.25);
@@ -527,7 +529,6 @@
           box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 .e-timepicker.e-popup .e-list-parent.e-ul {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-timepicker.e-popup .e-list-parent.e-ul li.e-list-item {

package/styles/timepicker/material3.css

@@ -243,8 +243,11 @@
   cursor: pointer;
 }
 
+.e-timepicker {
+  --dummy-style: true;
+}
+
 .e-timepicker.e-time-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -525,7 +528,6 @@
 }
 
 .e-timepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: none;
   border-radius: calc(var(--e-radius) * 0.25);
@@ -533,7 +535,6 @@
           box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 .e-timepicker.e-popup .e-list-parent.e-ul {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-timepicker.e-popup .e-list-parent.e-ul li.e-list-item {