@syncfusion/ej2-dropdowns 31.2.18 → 32.1.20

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -21,7 +23,7 @@
   &::before {
     font-size: $font-size;
     @if ($ddt-skin-name == 'fluent2') {
-      padding: 3px;
+      padding: $ddt-chip-close-before-padding;
     }
   }
 }
@@ -69,8 +71,8 @@
     }
 
     .e-ddt-hidden {
-      border: 0;
-      height: 0;
+      border: $ddt-nrml-border-none;
+      height: $ddt-height-none;
       visibility: hidden;
       width: 0;
     }
@@ -90,17 +92,17 @@
         }
         @if $ddt-skin-name == 'fluent2' {
           min-width: $ddt-close-icon-min-height;
-          margin: 5px 3px 5px 6px;
+          margin: $ddt-close-icon-margin;
           align-items: center;
           &::before {
-            font-size: 14px;
-            padding: 3px;
+            font-size: $ddt-nrml-close-icon-font-size;
+            padding: $ddt-nrml-close-icon-padding;
           }
         }
       }
 
       .e-input-group-icon.e-ddt-icon {
-        border: 0;
+        border: $ddt-nrml-border-none;
 
         @if $ddt-skin-name == 'bootstrap4' {
           font-size: 8px;
@@ -109,15 +111,15 @@
           font-size: 20px;
         }
         @else if $ddt-skin-name == 'fluent2' {
-          font-size: 14px;
-          margin: 5px 9px 5px 3px;
-          padding: 0;
+          font-size: $ddt-nrml-icon-font-size;
+          margin: $ddt-nrml-icon-margin;
+          padding: $ddt-nrml-padding-none;
           min-height: 20px;
           min-width: 20px;
         }
 
         @if $ddt-skin-name == 'Material3' {
-          font-size: $ddt-chip-icon-line-height;
+          font-size: $ddt-chip-icon-font-size;
           margin: $ddt-dd-icon-margin;
           line-height: $ddt-chip-icon-line-height;
         }
@@ -138,7 +140,7 @@
           }
           @include position(absolute, 0);
           @if $ddt-skin-name == 'Material3' {
-            margin: 0;
+            margin: $ddt-nrml-margin-none;
           }
         }
 
@@ -163,8 +165,8 @@
 
         &.e-input-focus input.e-dropdowntree.e-chip-input,
         input.e-dropdowntree.e-chip-input {
-          padding-left: 0;
-          padding-right: 0;
+          padding-left: $ddt-nrml-padding-none;
+          padding-right: $ddt-nrml-padding-none;
         }
       }
 
@@ -176,7 +178,7 @@
     .e-chips-wrapper {
       width: 100%;
       @if ($ddt-skin-name =='tailwind3') {
-        margin: 2px 0 2px 6px;
+        margin: $ddt-chips-wrapper-margin;
       }
     }
 
@@ -201,7 +203,7 @@
       .e-chips {
         align-items: center;
         @if $theme-name =='fluent2-highcontrast' {
-          border-radius: 4px;
+          border-radius: $ddt-show-chip-border-radius;
         }
         @else {
           border-radius: $ddt-chip-radius;
@@ -218,7 +220,7 @@
         white-space: nowrap;
 
         @if ($ddt-skin-name == 'tailwind3') {
-          border: 1px solid $border-light;
+          border: $ddt-nrml-chip-border solid $border-light;
         }
 
         & > .e-chipcontent {
@@ -233,9 +235,9 @@
             line-height: $ddt-chip-text-line-height;
           }
           @if ($ddt-skin-name == 'tailwind3') {
-            font-size: 12px;
-            line-height: 16px;
-            font-weight: 500;
+            font-size: $ddt-nrml-chipcontent-font-size;
+            line-height: $ddt-nrml-chipcontent-line-height;
+            font-weight: $ddt-nrml-chipcontent-font-weight;
           }
         }
       }
@@ -481,7 +483,7 @@
     }
 
     &.e-show-dd-icon {
-      @include chip-last($ddt-dd-icon-width, $ddt-chip-ddi-width);
+      @include chip-last($ddt-dd-icon-margin-right, $ddt-chip-ddi-width);
     }
 
     &.e-show-clear {
@@ -505,16 +507,16 @@
 
     &.e-popup {
       @if $skin-name != 'material' and $skin-name != 'FluentUI' and $skin-name != 'Material3' {
-        border: 1px solid $ddt-popup-border-color;
+        border: $ddt-popup-border solid $ddt-popup-border-color;
       }
       @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'tailwind3' {
-        margin-top: 4px;
+        margin-top: $ddt-nrml-popup-margin-top;
       }
       @else if $skin-name == 'Material3' {
-        margin-top: 2px;
+        margin-top: $ddt-nrml-popup-margin-top;
       }
       @else if $skin-name == 'fluent2' {
-        margin-top: 1px;
+        margin-top: $ddt-nrml-popup-margin-top;
       }
       @if $skin-name == 'bootstrap4' or $skin-name == 'Material3' or $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $ddt-skin-name == 'tailwind3' {
         border-radius: $ddt-popup-radius;
@@ -539,7 +541,7 @@
       }
 
       .e-selectall-parent {
-        border-bottom: 1px solid;
+        border-bottom: $ddt-nrml-popup-selectall-border-bottom solid;
         cursor: pointer;
         display: block;
         @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'FluentUI' {
@@ -610,7 +612,7 @@
         }
 
         .e-input-group {
-          margin-bottom: 0;
+          margin-bottom: $ddt-nrml-margin-none;
   
           @if $ddt-skin-name == 'tailwind' {
             border: 1px solid $border;
@@ -653,16 +655,16 @@
         &.e-no-data {
           cursor: default;
           font-family: inherit;
-          font-size: 14px;
+          font-size: $ddt-nrml-nodata-font-size;
           text-align: center;
           @if $ddt-skin-name == 'tailwind' {
-            padding: 8px 16px;
+            padding: $ddt-nrml-nodata-padding;
           }
           @else if $ddt-skin-name == 'bootstrap5' {
-            padding: 7px 16px;
+            padding: $ddt-nrml-nodata-padding;
           }
           @else {
-            padding: 14px 16px;
+            padding: $ddt-nrml-nodata-padding;
           }
 
           .e-treeview {
@@ -682,16 +684,16 @@
         display: inline-table;
         width: 100%;
         @if $ddt-skin-name == 'tailwind3' {
-          border: none;
+          border: $ddt-treeview-border-none;
         }
 
         .e-list-item {
           @if $ddt-skin-name != 'fluent2' {
-            padding: 0;
+            padding: $ddt-nrml-padding-none;
 
             .e-ul {
-              margin: 0;
-              padding: 0 0 0 14px;
+              margin: $ddt-nrml-margin-none;
+              padding: $ddt-list-item-ul-padding;
             }
           }
         }
@@ -873,28 +875,28 @@
 
       &.e-show-dd-icon {
         @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
-          @include chip-last-margin(4px, 18px);
+          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, 18px);
         }
         @else {
-          @include chip-last-margin(1px, $ddt-dd-icon-width);
+          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, $ddt-nrml-show-dd-icon-margin-left);
         }
       }
 
       &.e-show-clear {
         @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
-          @include chip-last-margin(4px, 18px);
+          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, 18px);
         }
         @else {
-          @include chip-last-margin(1px, $ddt-close-icon-width);
+          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, $ddt-close-icon-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(4px, $ddt-last-chip-right-margin);
+          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, $ddt-last-chip-right-margin);
         }
         @else {
-          @include chip-last-margin(1px, $ddt-last-chip-right-margin);
+          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, $ddt-last-chip-right-margin);
         }
       }
 
@@ -923,7 +925,7 @@
 
       &.e-popup {
         .e-treeview .e-list-item .e-ul {
-          padding: 0 14px 0 0;
+          padding: $ddt-nrml-popup-ul-padding;
         }
 
         .e-selectall-parent {
@@ -950,7 +952,7 @@
         .e-list-item {
           .e-ul {
             @if $ddt-skin-name == 'fluent2' {
-              padding: 0 0 0 14px;
+              padding: $ddt-list-item-ul-padding;
             }
           }
         }

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+
 /* stylelint-disable */
 $ddt-skin-name: 'material-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;
@@ -10,7 +14,10 @@ $ddt-spin-icon-margin: inherit !default;
 $ddt-dd-icon-bottom: 2px !default;
 $ddt-dd-icon-bigger-bottom: 6px !default;
 $ddt-dd-icon-width: 18px !default;
+$ddt-nrml-show-dd-icon-margin-left: 18px !default;
+$ddt-dd-icon-margin-right: 18px !default;
 $ddt-dd-icon-bigger-width: 20px !default;
+$ddt-dd-icon-bigger-margin-right: 20px !default;
 $ddt-rtl-close-left: -7px !default;
 $ddt-chip-margin: 3px 1px !default;
 $ddt-chip-padding: 0 4px 0 4px !default;
@@ -80,4 +87,18 @@ $ddt-big-select-all-font-size: 16px !default;
 $ddt-big-select-all-padding: 0px !default;
 $ddt-big-select-all-text-margin: 0 !default;
 $ddt-rtl-big-select-all-text-margin: 0 !default;
-$ddt-select-all-checkbox-bottom: 0 !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-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/_material-definition.scss

@@ -1,4 +1,7 @@
 @use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
 
 /* stylelint-disable */
 $ddt-skin-name: 'material' !default;
@@ -12,7 +15,10 @@ $ddt-spin-icon-margin: inherit !default;
 $ddt-dd-icon-bottom: 2px !default;
 $ddt-dd-icon-bigger-bottom: 3px !default;
 $ddt-dd-icon-width: 18px !default;
+$ddt-nrml-show-dd-icon-margin-left: 18px !default;
+$ddt-dd-icon-margin-right: 18px !default;
 $ddt-dd-icon-bigger-width: 20px !default;
+$ddt-dd-icon-bigger-margin-right: 20px !default;
 $ddt-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
 $ddt-filter-border: 0 !default;
 $ddt-filter-top-border: 0 !default;
@@ -82,4 +88,17 @@ $ddt-big-select-all-font-size: 16px !default;
 $ddt-big-select-all-padding: 0px !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: 1px !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-list-item-ul-padding: 0 0 0 14px !default;

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

@@ -1 +1,105 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$ddt-skin-name: 'Material3' !default;
+$ddt-box-shadow: $shadow-md !default;
+$ddt-close-icon-min-height: 32px !default;
+$ddt-chip-icon-font-size: 16px !default;
+$ddt-chip-icon-line-height: 16px !default;
+$ddt-close-icon-bottom: 0 !default;
+$ddt-dd-icon-bottom: 0 !default;
+$ddt-dd-icon-margin: 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-dd-icon-radius: $radius-16 !default;
+$ddt-dd-icon-bg: rgba(28, 27, 31, $opacity8) !default;
+$ddt-close-icon-width: 20px !default;
+$ddt-dd-icon-bigger-bottom: 0 !default;
+$ddt-filter-border: 1px solid rgba($border-light) !default;
+$ddt-filter-top-border: 0 !default;
+$ddt-filter-padding: 0 !default;
+$ddt-chip-margin: 3px 4px !default;
+$ddt-chip-padding: 0 8px 0 8px !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;
+$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 16px !default;
+$ddt-select-all-checkbox-margin: 0 12px !default;
+$ddt-rtl-select-all-checkbox-margin: 0 12px !default;
+$ddt-select-all-text-indent: 32px !default;
+$ddt-rtl-select-all-text-indent: 28px !default;
+$ddt-select-all-bigger-text-indent: 44px !default;
+$ddt-rtl-select-all-bigger-text-indent: 36px !default;
+$ddt-select-all-text-font-size: $text-sm !default;
+$ddt-popup-radius: $radius-4 !default;
+$ddt-popup-reorder-border: rgba($border-light) !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-chip-font-size: $text-sm !default;
+$ddt-overflow-count-padding: 5px 4px !default;
+$ddt-delim-padding: 8px 8px !default;
+$ddt-delim-bigger-padding: 8px 12px !default;
+$ddt-remains-count-padding-top: 6px !default;
+$ddt-outline-padding: 10px 12px !default;
+$ddt-outline-chip-padding: 4px 12px !default;
+$ddt-outline-bigger-padding: 15px 16px !default;
+$ddt-bigger-outline-chip-padding: 8px 15px !default;
+$ddt-overflow-count-padding-top: 6px !default;
+$ddt-close-icon-bigger-width: 32px !default;
+$ddt-icon-bg-color: rgba($content-bg-color) !default;
+$ddt-list-filter-text-indent: 8px 16px 8px !default;
+$ddt-rtl-close-left: -7px !default;
+$ddt-dd-icon-bigger-width: 20px !default;
+$ddt-dd-icon-bigger-margin-right: 20px !default;
+$ddt-select-all-height: 36px !default;
+$ddt-chip-bg-color: $secondary-bg-color !default;
+$ddt-chip-border-color: rgba($border) !default;
+$ddt-popup-background-color: $flyout-bg-color !default;
+$ddt-popup-border-color: rgba($border-light) !default;
+$ddt-chip-close: rgba($secondary-text-color) !default;
+$ddt-chip-font-color: rgba($secondary-text-color) !default;
+$ddt-chip-hover-bg-color: $content-bg-color-hover !default;
+$ddt-chip-hover-font-color: rgba($secondary-text-color-hover) !default;
+$ddt-nodata-font-color: rgba($content-text-color) !default;
+$ddt-select-all-font-color: rgba($content-text-color) !default;
+$ddt-remains-font-color: $grey-600 !default;
+$ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
+$ddt-item-hover-bg: $content-bg-color-hover !default;
+$ddt-select-all-font-size: 14px !default;
+$ddt-big-select-all-font-size: 16px !default;
+$ddt-big-select-all-padding: 0 16px !default;
+$ddt-big-select-all-text-margin: 0 18px !default;
+$ddt-rtl-big-select-all-text-margin: 0 18px !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: 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-nrml-popup-margin-top: 2px !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;
+$ddt-chip-border: 1px solid !default;

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

@@ -1,12 +1,18 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $ddt-skin-name: 'Material3' !default;
 $ddt-box-shadow: $shadow-md !default;
 $ddt-close-icon-min-height: 32px !default;
+$ddt-chip-icon-font-size: 16px !default;
 $ddt-chip-icon-line-height: 16px !default;
 $ddt-close-icon-bottom: 0 !default;
 $ddt-dd-icon-bottom: 0 !default;
 $ddt-dd-icon-margin: 0 !default;
 $ddt-dd-icon-width: 30px !default;
-$ddt-dd-icon-radius: 16px !default;
+$ddt-nrml-show-dd-icon-margin-left: 30px !default;
+$ddt-dd-icon-margin-right: 30px !default;
+$ddt-dd-icon-radius: $radius-16 !default;
 $ddt-dd-icon-bg: rgba(28, 27, 31, $opacity8) !default;
 $ddt-close-icon-width: 20px !default;
 $ddt-dd-icon-bigger-bottom: 0 !default;
@@ -15,7 +21,7 @@ $ddt-filter-top-border: 0 !default;
 $ddt-filter-padding: 0 !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;
@@ -36,7 +42,7 @@ $ddt-rtl-select-all-text-indent: 28px !default;
 $ddt-select-all-bigger-text-indent: 44px !default;
 $ddt-rtl-select-all-bigger-text-indent: 36px !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: rgba($border-light) !default;
 $ddt-chip-width: calc(100% - 2px) !default;
 $ddt-chip-ddi-width: calc(100% - 31px) !default;
@@ -62,6 +68,7 @@ $ddt-icon-bg-color: rgba($content-bg-color) !default;
 $ddt-list-filter-text-indent: 8px 16px 8px !default;
 $ddt-rtl-close-left: -7px !default;
 $ddt-dd-icon-bigger-width: 20px !default;
+$ddt-dd-icon-bigger-margin-right: 20px !default;
 $ddt-select-all-height: 36px !default;
 $ddt-chip-bg-color: $secondary-bg-color !default;
 $ddt-chip-border-color: rgba($border) !default;
@@ -82,3 +89,17 @@ $ddt-big-select-all-padding: 0 16px !default;
 $ddt-big-select-all-text-margin: 0 18px !default;
 $ddt-rtl-big-select-all-text-margin: 0 18px !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: 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-nrml-popup-margin-top: 2px !default;
+$ddt-list-item-ul-padding: 0 0 0 14px !default;
+$ddt-chip-border: 1px solid !default;

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

@@ -1 +1,96 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+/* 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: 18px !default;
+$ddt-nrml-show-dd-icon-margin-left: 18px !default;
+$ddt-dd-icon-margin-right: 18px !default;
+$ddt-close-icon-width: 18px !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: 0px !default;
+$ddt-chip-height: 22px !default;
+$ddt-treeview-padding: 4px 0 4px 12px !default;
+$ddt-chip-bigger-height: 30px !default;
+$ddt-chip-content-padding: 0 4px 0 0 !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: 16px !default;
+$ddt-chip-close-height: 16px !default;
+$ddt-chip-icon-line-height: 10px !default;
+$ddt-chip-close-width: 16px !default;
+$ddt-last-chip-right-margin: 45px !default;
+$ddt-last-chip-bigger-right-margin: 52px !default;
+$ddt-select-all-padding: 8px 12px !default;
+$ddt-big-select-all-padding: 12px 16px !default;
+$ddt-select-all-height: 22px !default;
+$ddt-select-all-checkbox-margin: 0 8px !default;
+$ddt-rtl-select-all-checkbox-margin: 0 8px !default;
+$ddt-select-all-text-indent: 27px !default;
+$ddt-rtl-select-all-text-indent: 15px !default;
+$ddt-select-all-bigger-text-indent: 33px !default;
+$ddt-rtl-select-all-bigger-text-indent: 17px !default;
+$ddt-big-select-all-text-margin: 0 12px !default;
+$ddt-rtl-big-select-all-text-margin: 0 12px !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: 8px !default;
+$ddt-chip-width: calc(100% - 6px) !default;
+$ddt-chip-ddi-width: calc(100% - 26px) !default;
+$ddt-chip-ci-width: calc(100% - 29px) !default;
+$ddt-chip-ddi-ci-width: calc(100% - 55px) !default;
+$ddt-big-chip-ddi-width: calc(100% - 25px) !default;
+$ddt-big-chip-ci-width: calc(100% - 35px) !default;
+$ddt-big-chip-ddi-ci-width: calc(100% - 60px) !default;
+$ddt-remains-padding: 0 0 0 4px !default;
+$ddt-rtl-remains-padding: 0 4px 0 0 !default;
+$ddt-remains-font-size: $text-base !default;
+$ddt-chip-font-size: $text-sm !default;
+$ddt-overflow-count-padding-top: 3px !default;
+$ddt-delim-padding : 3px 12px !default;
+$ddt-delim-bigger-padding: 7px 16px !default;
+$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-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: 8px 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-filter-box-shadow-color: none !default;
+$ddt-chip-bg-color: $content-bg-color-alt3 !default;
+$ddt-popup-background-color: $flyout-bg-color !default;
+$ddt-popup-border-color: $border-light !default;
+$ddt-chip-close: $icon-color !default;
+$ddt-chip-font-color: $content-text-color !default;
+$ddt-chip-hover-bg-color: $content-bg-color-alt4 !default;
+$ddt-chip-hover-font-color: $content-text-color !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-item-hover-bg: $content-bg-color-hover !default;

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

@@ -1,9 +1,15 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+
 /* 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: 18px !default;
+$ddt-nrml-show-dd-icon-margin-left: 18px !default;
+$ddt-dd-icon-margin-right: 18px !default;
 $ddt-close-icon-width: 18px !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-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: 8px 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-filter-box-shadow-color: none !default;