@syncfusion/ej2-dropdowns 31.2.18 → 32.1.20

package/styles/drop-down-list/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 .e-filled.e-float-input.e-error label.e-float-text,
@@ -15,6 +85,54 @@
   color: var(--color-sf-danger) !important;
 }
 
+.e-underline.e-input-group.e-control-wrapper,
+.e-underline.e-input-group,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-float-input,
+.e-underline.e-float-input.e-control-wrapper,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid var(--color-sf-border);
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
+.e-filled.e-input-group,
+.e-filled.e-input-group.e-control-wrapper {
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  padding: 0 10px 0 12px;
+}
+
+.e-filled.e-float-input,
+.e-filled.e-float-input.e-control-wrapper {
+  border: 1px solid;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  border-width: 1px;
+  margin-top: 0;
+  padding: 0;
+}
+
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid;
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes material-spinner-rotate {
@@ -78,7 +196,7 @@
 }
 
 .e-popup.e-ddl {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   margin-top: 3px;
@@ -191,10 +309,6 @@
   border: 0 solid;
 }
 
-.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
-  margin-top: 24px;
-}
-
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/tailwind3.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-inputs/styles/input/tailwind3-definition.scss';
-@import 'ej2-popups/styles/popup/tailwind3-definition.scss';
-@import 'ej2-popups/styles/spinner/tailwind3-definition.scss';
-@import 'ej2-notifications/styles/skeleton/tailwind3-definition.scss';
-@import '../drop-down-base/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'icons/tailwind3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-inputs/styles/input/tailwind3-definition' as *;
+@use 'ej2-popups/styles/popup/tailwind3-definition' as *;
+@use 'ej2-popups/styles/spinner/tailwind3-definition' as *;
+@use 'ej2-notifications/styles/skeleton/tailwind3-definition' as *;
+@use '../drop-down-base/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'icons/tailwind3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-tree/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/drop-down-tree/_bds-definition.scss

@@ -1,9 +1,15 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 /* stylelint-disable */
 $ddt-skin-name: $skin-name !default;
 $ddt-box-shadow: $shadow-lg !default;
 $ddt-close-icon-bottom: 6px !default;
 $ddt-dd-icon-bottom: 0 !default;
 $ddt-dd-icon-width: 20px !default;
+$ddt-nrml-show-dd-icon-margin-left: 20px !default;
+$ddt-dd-icon-margin-right: 20px !default;
 $ddt-close-icon-width: 20px !default;
 $ddt-dd-icon-bigger-bottom: 0 !default;
 $ddt-filter-border: 1px solid $border-light !default;
@@ -59,6 +65,21 @@ $ddt-remains-count-padding-top: 3px !default;
 $ddt-select-all-font-size: 14px !default;
 $ddt-big-select-all-font-size: 16px !default;
 $ddt-select-all-checkbox-bottom: 0 !default;
+$ddt-popup-text-line-height: 24px !default;
+$ddt-show-dd-icon-margin-right: 1px !default;
+$ddt-nrml-border-none: 0 !default;
+$ddt-nrml-padding-none: 0 !default;
+$ddt-nrml-margin-none: 0 !default;
+$ddt-nrml-popup-selectall-border-bottom: 1px !default;
+$ddt-nrml-nodata-font-size: 14px !default;
+$ddt-nrml-nodata-padding: 14px 16px !default;
+$ddt-nrml-show-dd-icon-margin: 1px !default;
+$ddt-nrml-popup-ul-padding: 0 14px 0 0 !default;
+$ddt-nrml-popup-margin-top: 4px !default;
+$ddt-show-dd-icon-margin-left: 1px !default;
+$ddt-height-none: 0 !default;
+$ddt-popup-border: 1px !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;
 
 // color variables
 $ddt-filter-box-shadow-color: none !default;

package/styles/drop-down-tree/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin close-style($font-size, $height, $width) {
   font-size: $font-size;
   height: $height;
@@ -11,7 +13,7 @@
   &::before {
     font-size: $font-size;
     @if ($ddt-skin-name == 'fluent2') {
-      padding: 3px;
+      padding: $ddt-chip-close-before-padding;
     }
   }
 }
@@ -99,24 +101,24 @@
         @if ($ddt-skin-name =='tailwind3') {
           & .e-chips {
             & > .e-chipcontent {
-              height: 20px;
-              font-size: 14px;
-              line-height: 20px;
-              padding: 0 6px 0 4px;
+              height: $ddt-chip-content-height;
+              font-size: $ddt-big-chip-font-size;
+              line-height: $ddt-big-chip-line-height;
+              padding: $ddt-big-chipcontent-padding;
             }
           }
           & .e-chips-close {
-            margin: 0 6px 2px 0;
+            margin: $ddt-big-chip-close-margin;
           }
         }
       }
 
       .e-input-group-icon.e-ddt-icon {
         @if $ddt-skin-name == 'bootstrap4' {
-          font-size: 10px;
+          font-size: $ddt-bgr-icon-font-size;
         }
         @else if $ddt-skin-name == 'fluent2' {
-          font-size: 18px;
+          font-size: $ddt-bgr-icon-font-size;
         }
       }
 
@@ -129,9 +131,9 @@
           min-height: $ddt-close-icon-bigger-min-height;
         }
         @if $ddt-skin-name == 'fluent2' {
-          padding: 0;
+          padding: $ddt-bgr-padding-none;
           &::before {
-            font-size: 18px;
+            font-size: $ddt-bgr-clear-icon-font-size;
           }
         }
       }
@@ -155,10 +157,10 @@
           @include min-style(32px, 32px, 12px, 27px);
         }
         @if $ddt-skin-name == 'tailwind3' {
-          height: 16px;
+          height: $ddt-chips-close-height;
           width: 16px;
           &::before {
-            font-size: 16px;
+            font-size: $ddt-big-chip-close-font-size;
           }
         }
       }
@@ -175,8 +177,8 @@
               padding-top: 0;
             }
             @if ($ddt-skin-name == 'fluent2') {
-              padding-top: 9px;
-              padding-bottom: 9px;
+              padding-top: $ddt-overflow-remain-wrap-padding;
+              padding-bottom: $ddt-overflow-remain-wrap-padding;
             }
           }
         }
@@ -371,7 +373,7 @@
   
     &.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
       @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'tailwind3' {
-        margin-right: $ddt-dd-icon-bigger-width;
+        margin-right: $ddt-dd-icon-bigger-margin-right;
       }
       max-width: $ddt-big-chip-ddi-width;
     }
@@ -398,17 +400,17 @@
 
         .e-all-text {
           font-size: $ddt-big-select-all-font-size;
-          line-height: 24px;
+          line-height: $ddt-popup-text-line-height;
           margin: $ddt-big-select-all-text-margin;
         }
       }
 
       @if ($ddt-skin-name == 'tailwind3') {
-        border-radius: 8px;
-        margin-top: 8px;
+        border-radius: $ddt-popup-radius;
+        margin-top: $ddt-popup-margin;
 
         .e-filter-wrap {
-          padding: 8px 9px;
+          padding: $ddt-popup-filter-wrap-padding;
         }
       }
 
@@ -521,28 +523,28 @@
 
       &.e-show-dd-icon {
         @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'tailwind3' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' or $ddt-skin-name == 'FluentUI' {
-          @include chip-last-margin(4px, null);
+          @include chip-last-margin($ddt-show-dd-icon-margin-left, null);
         }
         @else if $ddt-skin-name != 'Material3' {
-          @include chip-last-margin(1px, $ddt-dd-icon-bigger-width);
+          @include chip-last-margin($ddt-show-dd-icon-margin-left, $ddt-dd-icon-bigger-margin-right);
         }
       }
 
       &.e-show-clear {
         @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'tailwind3' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' or $ddt-skin-name == 'FluentUI' {
-          @include chip-last-margin(4px, null);
+          @include chip-last-margin($ddt-show-dd-icon-margin-left, null);
         }
         @else if $ddt-skin-name != 'Material3' {
-          @include chip-last-margin(1px, $ddt-close-icon-bigger-width);
+          @include chip-last-margin($ddt-show-dd-icon-margin-left, $ddt-close-icon-bigger-width);
         }
       }
 
       &.e-show-clear.e-show-dd-icon {
         @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
-          @include chip-last-margin($ddt-last-chip-bigger-right-margin, 4px);
+          @include chip-last-margin($ddt-last-chip-bigger-right-margin, $ddt-show-dd-icon-margin-right);
         }
         @else {
-          @include chip-last-margin($ddt-last-chip-bigger-right-margin, 1px);
+          @include chip-last-margin($ddt-last-chip-bigger-right-margin, $ddt-show-dd-icon-margin-right);
         }
       }
 

package/styles/drop-down-tree/_bootstrap-dark-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 /* stylelint-disable */
 $ddt-skin-name: 'bootstrap-dark' !default;
 $ddt-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12) !default;
@@ -11,7 +15,10 @@ $ddt-spin-icon-margin: inherit !default;
 $ddt-dd-icon-bottom: 0 !default;
 $ddt-dd-icon-bigger-bottom: 0 !default;
 $ddt-dd-icon-width: 32px !default;
+$ddt-nrml-show-dd-icon-margin-left: 32px !default;
+$ddt-dd-icon-margin-right: 32px !default;
 $ddt-dd-icon-bigger-width: 38px !default;
+$ddt-dd-icon-bigger-margin-right: 38px !default;
 $ddt-rtl-close-left: -7px !default;
 $ddt-list-filter-text-indent: 0 12px !default;
 $ddt-filter-border: $grey-44 !default;
@@ -69,6 +76,18 @@ $ddt-big-select-all-padding: 0 !default;
 $ddt-big-select-all-text-margin: 0 10px !default;
 $ddt-rtl-big-select-all-text-margin: 0 10px !default;
 $ddt-select-all-checkbox-bottom: 2px !default;
+$ddt-popup-text-line-height: 24px !default;
+$ddt-show-dd-icon-margin-right: 1px !default;
+$ddt-nrml-border-none: 0 !default;
+$ddt-nrml-padding-none: 0 !default;
+$ddt-nrml-margin-none: 0 !default;
+$ddt-nrml-popup-selectall-border-bottom: 1px !default;
+$ddt-nrml-nodata-font-size: 14px !default;
+$ddt-nrml-nodata-padding: 14px 16px !default;
+$ddt-nrml-show-dd-icon-margin: 1px !default;
+$ddt-nrml-popup-ul-padding: 0 14px 0 0 !default;
+$ddt-show-dd-icon-margin-left: 1px !default;
+$ddt-popup-border: 1px !default;
 
 $ddt-icon-bg-color: $grey-base !default;
 $ddt-remains-font-color: $grey-f5 !default;
@@ -79,4 +98,7 @@ $ddt-overflow-count-padding-top: 6px !default;
 $ddt-delim-padding: 6px 12px 0 12px !default;
 $ddt-delim-bigger-padding: 7.5px 14px 0 14px !default;
 $ddt-remains-count-padding-top: 5.5px !default;
-$ddt-item-hover-bg: $grey-44 !default;
+$ddt-item-hover-bg: $grey-44 !default;
+$ddt-height-none: 0 !default;
+$ddt-popup-border: 1px !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;

package/styles/drop-down-tree/_bootstrap-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
+
 /* stylelint-disable */
 $ddt-skin-name: 'bootstrap' !default;
 $ddt-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12) !default;
@@ -11,7 +15,10 @@ $ddt-spin-icon-margin: inherit !default;
 $ddt-dd-icon-bottom: 0 !default;
 $ddt-dd-icon-bigger-bottom: 0 !default;
 $ddt-dd-icon-width: 32px !default;
+$ddt-nrml-show-dd-icon-margin-left: 32px !default;
+$ddt-dd-icon-margin-right: 32px !default;
 $ddt-dd-icon-bigger-width: 38px !default;
+$ddt-dd-icon-bigger-margin-right: 38px !default;
 $ddt-rtl-close-left: -7px !default;
 $ddt-list-filter-text-indent: 0 12px !default;
 $ddt-filter-border: none !default;
@@ -79,3 +86,17 @@ $ddt-big-select-all-padding: 0px !default;
 $ddt-big-select-all-text-margin: 0 10px !default;
 $ddt-rtl-big-select-all-text-margin: 0 9px !default;
 $ddt-select-all-checkbox-bottom: 2px !default;
+$ddt-popup-text-line-height: 24px !default;
+$ddt-show-dd-icon-margin-right: 1px !default;
+$ddt-nrml-border-none: 0 !default;
+$ddt-nrml-padding-none: 0 !default;
+$ddt-nrml-margin-none: 0 !default;
+$ddt-nrml-popup-selectall-border-bottom: 1px !default;
+$ddt-nrml-nodata-font-size: 14px !default;
+$ddt-nrml-nodata-padding: 14px 16px !default;
+$ddt-nrml-show-dd-icon-margin: 1px !default;
+$ddt-nrml-popup-ul-padding: 0 14px 0 0 !default;
+$ddt-show-dd-icon-margin-left: 1px !default;
+$ddt-height-none: 0 !default;
+$ddt-popup-border: 1px !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;

package/styles/drop-down-tree/_bootstrap4-definition.scss

@@ -1,4 +1,7 @@
 @use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 /* stylelint-disable */
 $ddt-skin-name: 'bootstrap4' !default;
@@ -13,7 +16,10 @@ $ddt-spin-icon-margin: inherit !default;
 $ddt-dd-icon-bottom: 0 !default;
 $ddt-dd-icon-bigger-bottom: 0 !default;
 $ddt-dd-icon-width: 23px !default;
+$ddt-nrml-show-dd-icon-margin-left: 23px !default;
+$ddt-dd-icon-margin-right: 23px !default;
 $ddt-dd-icon-bigger-width: 32px !default;
+$ddt-dd-icon-bigger-margin-right: 32px !default;
 $ddt-rtl-close-left: -7px !default;
 $ddt-list-filter-text-indent: 0 20px !default;
 $ddt-filter-border: rgba($black, .12) !default;
@@ -83,3 +89,18 @@ $ddt-item-hover-bg: color.adjust($gray-100, $lightness: -2%) !default;
 $ddt-select-all-font-size: 14px !default;
 $ddt-big-select-all-font-size: 16px !default;
 $ddt-select-all-checkbox-bottom: 1px !default;
+$ddt-popup-text-line-height: 24px !default;
+$ddt-show-dd-icon-margin-right: 1px !default;
+$ddt-nrml-border-none: 0 !default;
+$ddt-nrml-padding-none: 0 !default;
+$ddt-nrml-margin-none: 0 !default;
+$ddt-nrml-popup-selectall-border-bottom: 1px !default;
+$ddt-nrml-nodata-font-size: 14px !default;
+$ddt-nrml-nodata-padding: 14px 16px !default;
+$ddt-nrml-show-dd-icon-margin: 1px !default;
+$ddt-nrml-popup-ul-padding: 0 14px 0 0 !default;
+$ddt-show-dd-icon-margin-left: 1px !default;
+$ddt-height-none: 0 !default;
+$ddt-popup-border: 1px !default;
+$ddt-bgr-icon-font-size: 10px !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;

package/styles/drop-down-tree/_bootstrap5-dark-definition.scss

@@ -1 +1,95 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+/* stylelint-disable */
+$ddt-skin-name: $skin-name !default;
+$ddt-box-shadow: none !default;
+$ddt-close-icon-bottom: 8px !default;
+$ddt-dd-icon-bottom: 0 !default;
+$ddt-dd-icon-width: 30px !default;
+$ddt-nrml-show-dd-icon-margin-left: 30px !default;
+$ddt-dd-icon-margin-right: 30px !default;
+$ddt-close-icon-width: 20px !default;
+$ddt-dd-icon-bigger-bottom: 0 !default;
+$ddt-filter-border: 1px solid $border-light !default;
+$ddt-filter-top-border: 0 !default;
+$ddt-filter-padding: 4px !default;
+$ddt-chip-margin: 3px 4px !default;
+$ddt-chip-padding: 0 8px 0 8px !default;
+$ddt-chip-radius: 4px !default;
+$ddt-chip-height: 24px !default;
+$ddt-chip-bigger-height: 30px !default;
+$ddt-close-icon-bigger-min-height: 36px !default;
+$ddt-chip-content-padding: 0 4px 0 0 !default;
+$ddt-rtl-chip-content-padding: 0 0 0 4px !default;
+$ddt-big-chip-content-padding: 0 8px 0 0 !default;
+$ddt-rtl-big-chip-content-padding: 0 0 0 8px !default;
+$ddt-chip-close-font: 10px !default;
+$ddt-chip-close-height: 16px !default;
+$ddt-chip-close-width: 16px !default;
+$ddt-last-chip-right-margin: 48px !default;
+$ddt-last-chip-bigger-right-margin: 52px !default;
+$ddt-select-all-padding: 0 8px !default;
+$ddt-big-select-all-padding: 3px 12px !default;
+$ddt-select-all-height: 34px !default;
+$ddt-select-all-checkbox-margin: 0 8px !default;
+$ddt-rtl-select-all-checkbox-margin: 0 8px !default;
+$ddt-select-all-text-indent: 32px !default;
+$ddt-rtl-select-all-text-indent: 32px !default;
+$ddt-select-all-bigger-text-indent: 41px !default;
+$ddt-rtl-select-all-bigger-text-indent: 40px !default;
+$ddt-select-all-text-font-size: $text-sm !default;
+$ddt-popup-radius: 4px !default;
+$ddt-popup-reorder-border: $border-light !default;
+$ddt-popup-margin: 4px !default;
+$ddt-treeview-padding: 6px 8px !default;
+$ddt-chip-width: calc(100% - 2px) !default;
+$ddt-chip-ddi-width: calc(100% - 31px) !default;
+$ddt-chip-ci-width: calc(100% - 31px) !default;
+$ddt-chip-ddi-ci-width: calc(100% - 62px) !default;
+$ddt-big-chip-ddi-width: calc(100% - 37px) !default;
+$ddt-big-chip-ci-width: calc(100% - 37px) !default;
+$ddt-big-chip-ddi-ci-width: calc(100% - 73px) !default;
+$ddt-remains-padding: 0 0 0 8px !default;
+$ddt-rtl-remains-padding: 0 8px 0 0 !default;
+$ddt-remains-font-size: $text-base !default;
+$ddt-chip-font-size: $text-sm !default;
+$ddt-overflow-count-padding: 5px 4px !default;
+$ddt-delim-padding : 0 8px !default;
+$ddt-delim-bigger-padding: 0 12px !default;
+$ddt-remains-count-padding-top: 0 !default;
+$ddt-select-all-font-size: 14px !default;
+$ddt-big-select-all-font-size: 16px !default;
+$ddt-big-select-all-text-margin: 0 12px !default;
+$ddt-rtl-big-select-all-text-margin: 0 12px !default;
+$ddt-select-all-checkbox-bottom: 0 !default;
+$ddt-popup-text-line-height: 24px !default;
+$ddt-show-dd-icon-margin-left: 4px !default;
+$ddt-show-dd-icon-margin-right: 4px !default;
+$ddt-nrml-border-none: 0 !default;
+$ddt-nrml-padding-none: 0 !default;
+$ddt-nrml-margin-none: 0 !default;
+$ddt-nrml-popup-margin-top: 4px !default;
+$ddt-nrml-popup-selectall-border-bottom: 1px !default;
+$ddt-nrml-nodata-font-size: 14px !default;
+$ddt-nrml-nodata-padding:7px 16px !default;
+$ddt-nrml-show-dd-icon-margin: 4px !default;
+$ddt-nrml-popup-ul-padding: 0 14px 0 0 !default;
+$ddt-height-none: 0 !default;
+$ddt-popup-border: 1px !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;
+
+// color variables
+$ddt-chip-bg-color: $secondary-bg-color !default;
+$ddt-popup-background-color: $flyout-bg-color !default;
+$ddt-popup-border-color: $border-light !default;
+$ddt-chip-close: $secondary-text-color !default;
+$ddt-chip-font-color: $secondary-text-color !default;
+$ddt-chip-hover-bg-color: $secondary-border-color-hover !default;
+$ddt-chip-hover-font-color: $secondary-text-color-hover !default;
+$ddt-nodata-font-color: $content-text-color !default;
+$ddt-select-all-font-color: $content-text-color !default;
+$ddt-remains-font-color: $content-text-color-alt3 !default;
+$ddt-readonly-input-bg-color: $content-bg-color !default;
+$ddt-item-hover-bg: $content-bg-color-hover !default;

package/styles/drop-down-tree/_bootstrap5-definition.scss

@@ -1,9 +1,15 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+
 /* stylelint-disable */
 $ddt-skin-name: $skin-name !default;
 $ddt-box-shadow: none !default;
 $ddt-close-icon-bottom: 8px !default;
 $ddt-dd-icon-bottom: 0 !default;
 $ddt-dd-icon-width: 30px !default;
+$ddt-nrml-show-dd-icon-margin-left: 30px !default;
+$ddt-dd-icon-margin-right: 30px !default;
 $ddt-close-icon-width: 20px !default;
 $ddt-dd-icon-bigger-bottom: 0 !default;
 $ddt-filter-border: 1px solid $border-light !default;
@@ -58,6 +64,21 @@ $ddt-big-select-all-font-size: 16px !default;
 $ddt-big-select-all-text-margin: 0 12px !default;
 $ddt-rtl-big-select-all-text-margin: 0 12px !default;
 $ddt-select-all-checkbox-bottom: 0 !default;
+$ddt-popup-text-line-height: 24px !default;
+$ddt-show-dd-icon-margin-left: 4px !default;
+$ddt-show-dd-icon-margin-right: 4px !default;
+$ddt-nrml-border-none: 0 !default;
+$ddt-nrml-padding-none: 0 !default;
+$ddt-nrml-margin-none: 0 !default;
+$ddt-nrml-popup-margin-top: 4px !default;
+$ddt-nrml-popup-selectall-border-bottom: 1px !default;
+$ddt-nrml-nodata-font-size: 14px !default;
+$ddt-nrml-nodata-padding:7px 16px !default;
+$ddt-nrml-show-dd-icon-margin: 4px !default;
+$ddt-nrml-popup-ul-padding: 0 14px 0 0 !default;
+$ddt-height-none: 0 !default;
+$ddt-popup-border: 1px !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;
 
 // color variables
 $ddt-chip-bg-color: $secondary-bg-color !default;

package/styles/drop-down-tree/_bootstrap5.3-definition.scss

@@ -1,9 +1,15 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
+
 /* stylelint-disable */
 $ddt-skin-name: $skin-name !default;
 $ddt-box-shadow: none !default;
 $ddt-close-icon-bottom: 8px !default;
 $ddt-dd-icon-bottom: 0 !default;
 $ddt-dd-icon-width: 30px !default;
+$ddt-nrml-show-dd-icon-margin-left: 30px !default;
+$ddt-dd-icon-margin-right: 30px !default;
 $ddt-close-icon-width: 20px !default;
 $ddt-dd-icon-bigger-bottom: 0 !default;
 $ddt-filter-border: 1px solid $border-light !default;
@@ -11,7 +17,7 @@ $ddt-filter-top-border: 0 !default;
 $ddt-filter-padding: 4px !default;
 $ddt-chip-margin: 3px 4px !default;
 $ddt-chip-padding: 0 8px 0 8px !default;
-$ddt-chip-radius: 4px !default;
+$ddt-chip-radius: $radius-4 !default;
 $ddt-chip-height: 24px !default;
 $ddt-chip-bigger-height: 30px !default;
 $ddt-close-icon-bigger-min-height: 36px !default;
@@ -34,7 +40,7 @@ $ddt-rtl-select-all-text-indent: 41px !default;
 $ddt-select-all-bigger-text-indent: 28px !default;
 $ddt-rtl-select-all-bigger-text-indent: 28px !default;
 $ddt-select-all-text-font-size: $text-sm !default;
-$ddt-popup-radius: 4px !default;
+$ddt-popup-radius: $radius-4 !default;
 $ddt-popup-reorder-border: $border-light !default;
 $ddt-popup-margin: 4px !default;
 $ddt-treeview-padding: 6px 8px !default;
@@ -58,6 +64,20 @@ $ddt-big-select-all-font-size: 16px !default;
 $ddt-big-select-all-text-margin: 0 8px !default;
 $ddt-rtl-big-select-all-text-margin: 0 8px !default;
 $ddt-select-all-checkbox-bottom: 2px !default;
+$ddt-popup-text-line-height: 24px !default;
+$ddt-show-dd-icon-margin-left: 4px !default;
+$ddt-show-dd-icon-margin-right: 1 !default;
+$ddt-nrml-border-none: 0 !default;
+$ddt-nrml-padding-none: 0 !default;
+$ddt-nrml-margin-none: 0 !default;
+$ddt-nrml-popup-selectall-border-bottom: 1 !default;
+$ddt-nrml-nodata-font-size: 14px !default;
+$ddt-nrml-nodata-padding: 14px 16px !default;
+$ddt-nrml-show-dd-icon-margin: 1px !default;
+$ddt-nrml-popup-ul-padding: 0 14px 0 0 !default;
+$ddt-height-none: 0 !default;
+$ddt-popup-border: 1px !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;
 
 // color variables
 $ddt-chip-bg-color: $secondary-bg-color !default;