@syncfusion/ej2-calendars 33.2.15 → 34.2.2

package/styles/datepicker/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('datepicker-layout') {
 
   .e-input-group.e-control-wrapper.e-date-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
@@ -7,7 +7,7 @@
   }
 
   .e-date-wrapper:not(.e-filled) {
-    #{if(&, '&', '*')} .e-date-icon.e-icons {
+    & .e-date-icon.e-icons {
       @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
         box-sizing: $datepicker-box-sizing;
       }
@@ -18,20 +18,20 @@
     @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
       --dummy-style: true;
     }
-    #{if(&, '&', '*')} .e-calendar {
+    & .e-calendar {
 
-      #{if(&, '&', '*')} .e-content table tbody tr.e-month-hide:last-child {
+      & .e-content table tbody tr.e-month-hide:last-child {
         display: $datepicker-othermonth-row;
       }
     }
 
-    #{if(&, '&', '*')}.e-popup-wrapper {
+    &.e-popup-wrapper {
       border-radius: $datepicker-popup-border-radius;
       overflow-y: hidden;
       pointer-events: auto;
     }
 
-    #{if(&, '&', '*')}.e-date-modal {
+    &.e-date-modal {
       @if $skin-name != 'Material3' {
         background-color: $datepicker-overlay;
       }
@@ -48,7 +48,7 @@
       z-index: 999;
     }
 
-    #{if(&, '&', '*')} .e-model-header {
+    & .e-model-header {
       @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
         background-color: $datepicker-modal-header-bg;
       }
@@ -60,7 +60,7 @@
       display: $datepicker-modal-header-display;
       padding: $datepicker-modal-header-padding;
 
-      #{if(&, '&', '*')} .e-model-year {
+      & .e-model-year {
         font-size: $modal-year-font-size;
         font-weight: $modal-year-font-weight;
         line-height: $modal-year-line-height;
@@ -71,8 +71,8 @@
       }
     }
 
-    #{if(&, '&', '*')} .e-model-month,
-    #{if(&, '&', '*')} .e-model-day {
+    & .e-model-month,
+    & .e-model-day {
       font-size: $modal-month-font-size;
       font-weight: $modal-month-font-weight;
       line-height: $modal-month-line-height;
@@ -126,32 +126,32 @@
 }
 
 .e-datepick-mob-popup-wrap {  
-  #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+  & .e-datepicker.e-popup-expand {
     border-radius: $date-zero-radius;
 
-    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
+    & .e-model-header.e-blazor-device {
       height: $date-mob-popup-height;
       .e-popup-close {
         float: right;
       }
     }
 
-    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
+    & .e-model-header.e-blazor-device {
       height: $date-mob-popup-height;
       .e-popup-close {
         float: right;
       }
     }
 
-    #{if(&, '&', '*')} .e-model-header {
+    & .e-model-header {
       height: $modal-portrait-header-height;
       padding: $modal-portrait-header-padding;
 
-      #{if(&, '&', '*')} .e-day-wrapper {
+      & .e-day-wrapper {
         margin: $modal-portrait-header-year-margin;
       }
 
-      #{if(&, '&', '*')} .e-popup-close {
+      & .e-popup-close {
         color: $modal-portrait-cancel-icon-color;
         float: $modal-portrait-cancel-icon-float-style;
         font-size: $datepicker-bigger-icon-font-size;
@@ -160,7 +160,7 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-btn.e-flat.e-popup-close {
+      & .e-btn.e-flat.e-popup-close {
         background: transparent;
         border-color: transparent;
         box-shadow: none;
@@ -168,7 +168,7 @@
         padding: $padding-zero;
       }
 
-      #{if(&, '&', '*')} .e-today.e-flat.e-primary {
+      & .e-today.e-flat.e-primary {
         color: $modal-today-text-color;
         float: $modal-portrait-today-float-style;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
@@ -183,13 +183,13 @@
       }
     }
 
-    #{if(&, '&', '*')} .e-model-month,
-    #{if(&, '&', '*')} .e-model-day {
+    & .e-model-month,
+    & .e-model-day {
       font-size: $modal-portrait-month-font-size;
       line-height: $modal-header-day-line-height;
     }
 
-    #{if(&, '&', '*')} .e-calendar {
+    & .e-calendar {
       min-width: $modal-portrait-calendar-min-width;
       min-height: $modal-portrait-calendar-min-height;
       height: $modal-portrait-calendar-height;
@@ -197,9 +197,9 @@
         padding: $modal-portrait-calendar-padding;
       }
       
-      #{if(&, '&', '*')} .e-header.e-month,
-      #{if(&, '&', '*')} .e-header.e-year,
-      #{if(&, '&', '*')} .e-header.e-decade {
+      & .e-header.e-month,
+      & .e-header.e-year,
+      & .e-header.e-decade {
         height: $modal-portrait-header-month-height;
         border-style: $modal-header-border-style;
         border-width: $modal-header-border-width;
@@ -207,7 +207,7 @@
         padding: $modal-portrait-month-header-padding;
         line-height: $modal-month-header-line-height;
 
-        #{if(&, '&', '*')} .e-title {
+        & .e-title {
           @if $skin-name != 'bootstrap5.3' {
             position: $modal-portrait-header-title-position;
             line-height: $modal-month-header-title-line-height;
@@ -226,7 +226,7 @@
           }
         }
 
-        #{if(&, '&', '*')} .e-prev {
+        & .e-prev {
           margin-right: $modal-portrait-prev-icon-margin;
           vertical-align: inherit;
           height: $date-header-mob-prev-height;
@@ -236,7 +236,7 @@
             width: $date-min-device-width;
           }
 
-          #{if(&, '&', '*')} .e-icons {
+          & .e-icons {
             vertical-align: inherit;
            @media (min-device-width: 768px) {
              font-size: $modal-tablet-font-size;
@@ -244,7 +244,7 @@
           }
         }
 
-        #{if(&, '&', '*')} .e-next {
+        & .e-next {
           margin-right: $modal-portrait-next-icon-margin;
           vertical-align: inherit;
           height: $date-picker-popup-next-height;
@@ -254,7 +254,7 @@
             width: $date-picker-popup-next-min-width;
           }
 
-          #{if(&, '&', '*')} .e-icons {
+          & .e-icons {
             vertical-align: inherit;
             @media (min-device-width: 768px) {
               font-size: $modal-tablet-font-size;
@@ -262,7 +262,7 @@
            }
         }
 
-        #{if(&, '&', '*')} .e-icon-container {
+        & .e-icon-container {
           float: $modal-portrait-icon-float;
           @if $skin-name == 'fluent2' {
             padding-right: 2vw;
@@ -270,14 +270,14 @@
         }
       }
 
-      #{if(&, '&', '*')} th {
+      & th {
         @media (min-device-width: 768px) {
           font-size: $modal-tablet-font-size;
           height: $modal-tablet-table-header-height;
         }
       }
 
-      #{if(&, '&', '*')} .e-content span.e-day {
+      & .e-content span.e-day {
         @media (min-device-width: 768px) {
           font-size: $modal-tablet-font-size;
           height: $modal-tablet-content-dimension;
@@ -288,7 +288,7 @@
 
     }
 
-  #{if(&, '&', '*')} .e-calendar-cell-container {
+  & .e-calendar-cell-container {
     height: $modal-portrait-calendar-container-height;
   }
 
@@ -297,7 +297,7 @@
     display: $modal-portrait-footer-display-style;
   }
 
-  #{if(&, '&', '*')} .e-content.e-month
+  & .e-content.e-month
   {
     height: $modal-portrait-calendar-content-height;
     table
@@ -312,20 +312,20 @@
 
 @media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap {
-    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+    & .e-datepicker.e-popup-expand {
 
-      #{if(&, '&', '*')} .e-model-header.e-blazor-device {
+      & .e-model-header.e-blazor-device {
         height: $date-picker-popup-landscape-height;
         .e-popup-close {
           float: right;
         }
       }
 
-      #{if(&, '&', '*')} .e-calendar-cell-container {
+      & .e-calendar-cell-container {
 
-        #{if(&, '&', '*')} .e-content.e-month,
-        #{if(&, '&', '*')} .e-content.e-year,
-        #{if(&, '&', '*')} .e-content.e-decade {
+        & .e-content.e-month,
+        & .e-content.e-year,
+        & .e-content.e-decade {
           @media (max-height: 600px) {
             height: $date-content-max-height;
           }
@@ -335,13 +335,13 @@
           }
           overflow-y: auto;
   
-          #{if(&, '&', '*')} table {
+          & table {
             @media (min-height: 600px) {
               height: $date-content-min-height;
             }
           }
         }
-        #{if(&, '&', '*')} .e-footer-container {
+        & .e-footer-container {
           @media (min-height: 600px) {
             padding: $datepicker-footer-container-padding;
             height: $date-footer-height;
@@ -350,7 +350,7 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
 
         @media (max-height: 600px) {
           height: $modal-landscape-header-height;
@@ -369,24 +369,24 @@
           margin: $modal-landscape-header-year-margin;
         }
 
-        #{if(&, '&', '*')} .e-model-month,
-        #{if(&, '&', '*')} .e-model-day {
+        & .e-model-month,
+        & .e-model-day {
           font-size: $modal-month-landscape-font-size;
         }
 
       }
 
-      #{if(&, '&', '*')} .e-calendar .e-header.e-month,
-      #{if(&, '&', '*')} .e-calendar .e-header.e-year,
-      #{if(&, '&', '*')} .e-calendar .e-header.e-decade {
+      & .e-calendar .e-header.e-month,
+      & .e-calendar .e-header.e-year,
+      & .e-calendar .e-header.e-decade {
 
-        #{if(&, '&', '*')} .e-prev {
+        & .e-prev {
           @if $skin-name != 'fluent2' {
             margin-right: $modal-landscape-prev-icon-margin;
           }
         }
 
-        #{if(&, '&', '*')} .e-title {
+        & .e-title {
           @media (max-height: 600px) {
             line-height: $modal-month-landscape-title-line-height;
           }
@@ -397,9 +397,9 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-content.e-month,
-      #{if(&, '&', '*')} .e-content.e-year,
-      #{if(&, '&', '*')} .e-content.e-decade {        
+      & .e-content.e-month,
+      & .e-content.e-year,
+      & .e-content.e-decade {        
         @media (max-height: 600px) {
           height: $modal-landscape-calendar-content-height;
         }
@@ -425,9 +425,9 @@
         display: table-row-group;
       }
 
-      #{if(&, '&', '*')} .e-content.e-month table ,
-      #{if(&, '&', '*')} .e-content.e-decade table ,
-      #{if(&, '&', '*')} .e-content.e-year table {
+      & .e-content.e-month table ,
+      & .e-content.e-decade table ,
+      & .e-content.e-year table {
         @media (max-height: 600px) {
           height: $modal-portrait-calendar-content-height;
         }

package/styles/datepicker/_material-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/material-dark' as *;
-@forward 'ej2-base/styles/definition/material-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $datepicker-icon-color: $accent !default;

package/styles/datepicker/_material-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material' as *;
-@forward 'ej2-base/styles/definition/material';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $datepicker-icon-color: $accent !default;
 $datepicker-active-icon-color: $datepicker-icon-color !default;
 $datepicker-popup-box-shadow: 0 5px 5px -3px rgba($grey-light-font, .2), 0 8px 10px 1px rgba($grey-light-font, .14), 0 3px 14px 2px rgba($grey-light-font, .12) !default;

package/styles/datepicker/_material3-dark-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $datepicker-modal-header-bg-color: $flyout-bg-color !default;
 $datepicker-modal-header-text-color: rgba($content-text-color) !default;
 $datepicker-icon-color: rgba($icon-color) !default;

package/styles/datepicker/_material3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@forward 'ej2-base/styles/definition/material3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $datepicker-modal-header-bg-color: $flyout-bg-color !default;
 $datepicker-modal-header-text-color: rgba($content-text-color) !default;
 $datepicker-icon-color: rgba($icon-color) !default;

package/styles/datepicker/_tailwind-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $datepicker-icon: '\e901' !default;

package/styles/datepicker/_tailwind-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@forward 'ej2-base/styles/definition/tailwind';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $datepicker-icon: '\e901' !default;

package/styles/datepicker/_tailwind3-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $datepicker-icon: '\e901' !default;

package/styles/datepicker/_theme.scss

@@ -1,13 +1,13 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('datepicker-theme') {
   #{&}.e-datepicker,
   .e-small#{&}.e-datepicker {
-    #{if(&, '&', '*')}.e-popup-wrapper {
+    &.e-popup-wrapper {
       border: $datepicker-popup-border;
       box-shadow: $datepicker-popup-box-shadow;
     }
 
-    #{if(&, '&', '*')} .e-calendar {
+    & .e-calendar {
       @if $skin-name != 'Material3' {
         background-color: $datepicker-popup-bg-color;
       }
@@ -18,20 +18,20 @@
     }
   }
 
-  #{if(&, '&', '*')}.e-input-group {
-    #{if(&, '&', '*')}.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
+  *.e-input-group {
+    &.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
       border: $datepicker-input-border-style;
     }
   }
 
   .e-date-wrapper {
-    #{if(&, '&', '*')} span.e-input-group-icon {
-      #{if(&, '&', '*')}.e-date-icon.e-icons.e-active {
+    & span.e-input-group-icon {
+      &.e-date-icon.e-icons.e-active {
         @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap-dark' and $skin-name != 'fabric' and $skin-name != 'fabric-dark') {
           color: $datepicker-icon-color;
         }
       }
-      #{if(&, '&', '*')}.e-date-icon.e-icons.e-active {
+      &.e-date-icon.e-icons.e-active {
         @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           background: $datepicker-icon-active-bg-color;
           border-color: $datepicker-active-border-color;

package/styles/datepicker/_variables.scss

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';

package/styles/datepicker/bds.css

@@ -2,154 +2,6 @@
 
 
 
-/* stylelint-disable property-no-vendor-prefix */
-/* stylelint-disable */
-.e-input:focus:not(.e-success):not(.e-warning).e-error,
-.e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus,
-.e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
-.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus,
-.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
-.e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input,
-.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-input:focus:not(.e-error):not(.e-warning).e-success,
-.e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus,
-.e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
-.e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus,
-.e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
-.e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input,
-.e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-input:focus:not(.e-success):not(.e-error).e-warning,
-.e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus,
-.e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
-.e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus,
-.e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
-.e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input,
-.e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-input-group.e-input-focus:not(.e-success):not(.e-warning).e-error,
-.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success,
-.e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-input-group.e-input-focus:not(.e-success):not(.e-error).e-warning,
-.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error,
-.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success,
-.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning,
-.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-float-input.e-error label.e-float-text,
-.e-float-input.e-control-wrapper.e-error label.e-float-text,
-.e-float-input.e-error input:focus ~ label.e-float-text,
-.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
-.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
-.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
-.e-float-input.e-error textarea:focus ~ label.e-float-text,
-.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text {
-  color: var(--color-sf-utility-danger) !important;
-}
-
-.e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-input-group.e-error.e-valid-input label.e-label-top.e-float-text,
-.e-outline.e-float-input.e-bigger.e-error.e-input-focus input:focus ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-small.e-error.e-input-focus input:focus ~ label.e-float-text,
-.e-small .e-outline.e-float-input.e-error input:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-small.e-bigger.e-error input:focus ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-bigger.e-error textarea:focus ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text,
-.e-small .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-bigger.e-error input:focus ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text,
-.e-small .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error input:focus ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-bigger.e-error textarea:focus ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text,
-.e-small .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text,
-.e-outline.e-float-input.e-error label.e-float-text.e-label-top,
-.e-outline.e-float-input.e-input-group.e-error label.e-float-text.e-label-top,
-.e-outline.e-float-input.e-control-wrapper.e-error label.e-float-text.e-label-top,
-.e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) input:valid ~ label.e-float-text.e-label-top,
-.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) input:focus ~ label.e-float-text.e-label-top,
-.e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-top,
-.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) textarea:focus ~ label.e-float-text.e-label-top,
-.e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
-.e-outline.e-float-input.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
-.e-outline.e-float-input.e-small.e-error.e-input-focus input ~ label.e-float-text,
-.e-small .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
-.e-outline.e-float-input.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text,
-.e-small .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
-.e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
-.e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text {
-  color: var(--color-sf-utility-danger) !important;
-}
-
-.e-filled.e-float-input.e-error label.e-float-text,
-.e-filled.e-float-input.e-control-wrapper.e-error label.e-float-text,
-.e-filled.e-float-input.e-error input:focus ~ label.e-float-text,
-.e-filled.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
-.e-filled.e-float-input.e-error textarea:focus ~ label.e-float-text,
-.e-filled.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
-.e-filled.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
-.e-filled.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text {
-  color: var(--color-sf-utility-danger) !important;
-}
-
-/* stylelint-disable-line no-empty-source */
-/*! calendar theme variables */
 /*! component icons */
 .e-input-group-icon.e-date-icon,
 *.e-control-wrapper .e-input-group-icon.e-date-icon {
@@ -187,10 +39,6 @@
   content: "\e765";
 }
 
-
-
-
-
 .e-input-group.e-control-wrapper.e-date-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-date-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
   display: -webkit-box;
@@ -545,10 +393,6 @@
   }
 }
 /* stylelint-enable */
-
-
-
-
 .e-datepicker.e-popup-wrapper,
 .e-small.e-datepicker.e-popup-wrapper {
   border: 1px solid var(--color-sf-border-secondary);
@@ -572,10 +416,6 @@
   color: var(--color-sf-fg-secondary);
 }
 
-
-
-
-
 .e-datepicker.e-bigger.e-popup-wrapper,
 .e-bigger .e-datepicker.e-popup-wrapper {
   margin-top: 0;

package/styles/datepicker/bds.scss

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

package/styles/datepicker/bootstrap-dark.css

@@ -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 {