npm - @syncfusion/ej2-calendars - Versions diffs - 33.2.15 → 34.1.29 - Mend

@syncfusion/ej2-calendars 33.2.15 → 34.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1054) hide show

package/styles/datepicker/fluent2.scss CHANGED Viewed

@@ -1,8 +1,4 @@
-@use 'ej2-base/styles/definition/fluent2' as *;
-@use 'ej2-inputs/styles/input/fluent2-definition' as *;
-@use 'ej2-popups/styles/popup/fluent2-definition' as *;
-@use '../calendar/fluent2-definition' as *;
 @use 'fluent2-definition' as *;
 @use 'icons/fluent2' as *;
-@use 'all.fluent2' as *;
-@use 'bigger.fluent2' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/datepicker/highcontrast-light.css CHANGED Viewed

@@ -1,4 +1,3 @@
-/* stylelint-disable property-no-vendor-prefix */
 /*! component icons */
 .e-input-group-icon.e-date-icon,
 *.e-control-wrapper .e-input-group-icon.e-date-icon {

package/styles/datepicker/highcontrast-light.scss CHANGED Viewed

@@ -1,8 +1,4 @@
-@use 'ej2-base/styles/definition/highcontrast-light' as *;
-@use 'ej2-inputs/styles/input/highcontrast-light-definition' as *;
-@use 'ej2-popups/styles/popup/highcontrast-light-definition' as *;
-@use '../calendar/highcontrast-light-definition' as *;
 @use 'highcontrast-light-definition' as *;
 @use 'icons/highcontrast-light' as *;
-@use 'all.highcontrast-light' as *;
-@use 'bigger.highcontrast-light' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/datepicker/highcontrast.css CHANGED Viewed

@@ -1,5 +1,3 @@
-/* stylelint-disable property-no-vendor-prefix */
-/*! calendar fabric theme variables */
 /*! component icons */
 .e-input-group-icon.e-date-icon,
 *.e-control-wrapper .e-input-group-icon.e-date-icon {

package/styles/datepicker/highcontrast.scss CHANGED Viewed

@@ -1,8 +1,4 @@
-@use 'ej2-base/styles/definition/highcontrast' as *;
-@use 'ej2-inputs/styles/input/highcontrast-definition' as *;
-@use 'ej2-popups/styles/popup/highcontrast-definition' as *;
-@use '../calendar/highcontrast-definition' as *;
 @use 'highcontrast-definition' as *;
 @use 'icons/highcontrast' as *;
-@use 'all.highcontrast' as *;
-@use 'bigger.highcontrast' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/datepicker/icons/_bds.scss CHANGED Viewed

@@ -1,23 +1,22 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../bds-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-bds-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     min-height: $datepicker-icon-container-min-height;
     min-width: $datepicker-icon-container-min-width;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e778';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -25,28 +24,28 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
   }
   // Touch small icon
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e7e7';
           font-family: 'e-icons';
         }
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
+      & .e-calendar .e-header .e-date-icon-next::before {
         content: '\e748';
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
+      & .e-calendar .e-header .e-date-icon-prev::before {
         content: '\e765';
       }
     }

package/styles/datepicker/icons/_bootstrap-dark.scss CHANGED Viewed

@@ -1,21 +1,20 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../bootstrap-dark-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-bootstrap-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e960';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -23,27 +22,27 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
   }
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e7fc';
           font-family: 'e-icons';
         }
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
+      & .e-calendar .e-header .e-date-icon-next::before {
         content: '\e913';
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
+      & .e-calendar .e-header .e-date-icon-prev::before {
         content: '\e904';
       }
     }

package/styles/datepicker/icons/_bootstrap.scss CHANGED Viewed

@@ -1,21 +1,20 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../bootstrap-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-bootstrap-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e960';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -23,28 +22,28 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
   }
   // Touch small icon
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e7fc';
           font-family: 'e-icons';
         }
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
+      & .e-calendar .e-header .e-date-icon-next::before {
         content: '\e913';
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
+      & .e-calendar .e-header .e-date-icon-prev::before {
         content: '\e904';
       }
     }

package/styles/datepicker/icons/_bootstrap4.scss CHANGED Viewed

@@ -1,23 +1,23 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../bootstrap4-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-bootstrap4-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     min-height: $datepicker-icon-container-min-height;
     min-width: $datepicker-icon-container-min-width;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e7be';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -25,28 +25,28 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
   }
   // Touch small icon
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e745';
           font-family: 'e-icons';
         }
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
+      & .e-calendar .e-header .e-date-icon-next::before {
         content: '\e76a';
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
+      & .e-calendar .e-header .e-date-icon-prev::before {
         content: '\e70d';
       }
     }

package/styles/datepicker/icons/_bootstrap5.3.scss CHANGED Viewed

@@ -1,23 +1,23 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../bootstrap5.3-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-bootstrap5-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     min-height: $datepicker-icon-container-min-height;
     min-width: $datepicker-icon-container-min-width;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e75e';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -25,28 +25,28 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
   }
   // Touch small icon
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e7e7';
           font-family: 'e-icons';
         }
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
+      & .e-calendar .e-header .e-date-icon-next::before {
         content: '\e748';
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
+      & .e-calendar .e-header .e-date-icon-prev::before {
         content: '\e765';
       }
     }

package/styles/datepicker/icons/_bootstrap5.scss CHANGED Viewed

@@ -1,23 +1,23 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../bootstrap5-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-bootstrap5-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     min-height: $datepicker-icon-container-min-height;
     min-width: $datepicker-icon-container-min-width;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e75e';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -25,28 +25,28 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
   }
   // Touch small icon
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e7e7';
           font-family: 'e-icons';
         }
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
+      & .e-calendar .e-header .e-date-icon-next::before {
         content: '\e748';
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
+      & .e-calendar .e-header .e-date-icon-prev::before {
         content: '\e765';
       }
     }

package/styles/datepicker/icons/_fabric-dark.scss CHANGED Viewed

@@ -1,21 +1,21 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../fabric-dark-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-fabric-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e93a';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -23,19 +23,19 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
   }
   // Touch small icon
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e7fc';
           font-family: 'e-icons';
         }

package/styles/datepicker/icons/_fabric.scss CHANGED Viewed

@@ -1,21 +1,21 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../fabric-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-fabric-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e93a';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -23,19 +23,19 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
   }
   // Touch small icon
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e7fc';
           font-family: 'e-icons';
         }

package/styles/datepicker/icons/_fluent.scss CHANGED Viewed

@@ -1,23 +1,23 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../fluent-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-fluent-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     min-height: $datepicker-icon-container-min-height;
     min-width: $datepicker-icon-container-min-width;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e75e';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -25,28 +25,28 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
   }
   // Touch small icon
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e7e7';
           font-family: 'e-icons';
         }
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
+      & .e-calendar .e-header .e-date-icon-next::before {
         content: '\e7d8';
       }
-      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
+      & .e-calendar .e-header .e-date-icon-prev::before {
         content: '\e7df';
       }
     }

package/styles/datepicker/icons/_fluent2.scss CHANGED Viewed

@@ -1,11 +1,11 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use '../fluent2-definition' as *;
+@use '../variables' as *;
 @include export-module('datepicker-fluent2-icons') {
   /*! component icons */
   .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-icon-font-size;
     margin: $datepicker-icon-normal-margin;
     padding: $zero-value;
@@ -14,12 +14,12 @@
     border-radius: $datepicker-mouse-icon-border-radius;
     outline: none;
-    #{if(&, '&', '*')}::before {
+    &::before {
       content: '\e75e';
       font-family: 'e-icons';
     }
-    #{if(&, '&', '*')}:focus {
+    &:focus {
       background: $datepicker-icon-hover-color;
       border-radius: $datepicker-icon-border-radius;
     }
@@ -27,8 +27,8 @@
   // mouse small icon
   .e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+  *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
     font-size: $datepicker-small-icon-font-size;
     min-width: $datepicker-small-icon-container-min-width;
     min-height: $datepicker-small-icon-container-min-height;
@@ -40,11 +40,11 @@
   // Touch small icon
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
-        #{if(&, '&', '*')} .e-popup-close::before {
+        & .e-popup-close::before {
           content: '\e7e7';
           font-family: 'e-icons';
         }