@syncfusion/ej2-splitbuttons 31.2.12 → 32.1.22

package/styles/drop-down-button/_fluent-dark-definition.scss

@@ -1 +1,68 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'ej2-buttons/styles/button/fluent-dark-definition' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+@forward 'ej2-buttons/styles/button/fluent-dark-definition';
+$drop-down-btn-arrow-content: '\e70d' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: $text-base !default;
+$drop-down-btn-bigger-li-height: 40px !default;
+$drop-down-btn-bigger-max-width: 202px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-icon-font-size: $text-base !default;
+$drop-down-btn-small-icon-font-size: $text-sm !default;
+$drop-down-btn-icon-margin-right: 11px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-height: 36px !default;
+$drop-down-btn-li-padding: 0 12px !default;
+$drop-down-btn-bigger-li-padding: 0 16px !default;
+$drop-down-btn-small-li-padding: 0 8px !default;
+$drop-down-btn-max-width: 178px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 22px !default;
+$drop-down-btn-menu-icon-font-size: $text-lg !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-sub-ul-box-shadow: none !default;
+$drop-down-btn-ul-border-radius: 2px !default;
+$drop-down-btn-ul-padding: 0 0 !default;
+$drop-down-btn-ul-bigger-padding: 0 0 !default;
+$drop-down-btn-ul-small-padding: 0 0 !default;
+$drop-down-btn-caret-icon-font-size: $text-sm !default;
+$drop-down-btn-small-caret-icon-font-size: $text-xs !default;
+$drop-down-btn-icon-font-size-bigger: $text-xl !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-base !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-sm !default;
+$drop-down-btn-box-shadow: $secondary-shadow-focus !default;
+$drop-down-btn-popup-margin-top: 4px !default;
+$drop-down-btn-bigger-popup-margin-top: 4px !default;
+$drop-down-btn-ul-border: 0 solid $border-light !default;
+$drop-down-btn-li-box-shadow: inset 0 0 0 1px rgba($content-text-color, 1) !default;
+$drop-down-btn-li-border-style: solid !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+
+//Color
+$drop-down-btn-color: $secondary-text-color !default;
+$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
+$drop-down-btn-font-size: $text-sm !default;
+$drop-down-btn-font-weight: $font-weight-normal !default;
+$drop-down-btn-li-bgcolor: $flyout-bg-color-hover !default;
+$drop-down-btn-ul-bgcolor: $flyout-bg-color !default;
+$drop-down-btn-li-border-color: $border-light !default;
+$drop-down-btn-selected-color: $flyout-text-color-selected !default;
+$drop-down-btn-parent-ul-box-shadow: $shadow-md !default;
+$drop-down-btn-li-focus-bgcolor: $flyout-bg-color-focus !default;
+$drop-down-btn-li-selection-bgcolor: $flyout-bg-color-selected !default;
+$drop-down-btn-li-selection-font-color: $flyout-text-color-selected !default;
+$drop-down-btn-menu-icon-color: $icon-color !default;
+$drop-down-btn-menu-icon-disabled-color: $icon-color !default;
+$drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

package/styles/drop-down-button/_fluent-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'ej2-buttons/styles/button/fluent-definition' as *;
+@forward 'ej2-base/styles/definition/fluent';
+@forward 'ej2-buttons/styles/button/fluent-definition';
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;
@@ -37,6 +41,9 @@ $drop-down-btn-ul-border: 0 solid $border-light !default;
 $drop-down-btn-li-box-shadow: inset 0 0 0 1px rgba($content-text-color, 1) !default;
 $drop-down-btn-li-border-style: solid !default;
 
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+
 //Color
 $drop-down-btn-color: $secondary-text-color !default;
 $drop-down-btn-disable-text: $secondary-text-color-disabled !default;
@@ -53,3 +60,9 @@ $drop-down-btn-li-selection-font-color: $flyout-text-color-selected !default;
 $drop-down-btn-menu-icon-color: $icon-color !default;
 $drop-down-btn-menu-icon-disabled-color: $icon-color !default;
 $drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

package/styles/drop-down-button/_fluent2-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'ej2-buttons/styles/button/fluent2-definition' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+@forward 'ej2-buttons/styles/button/fluent2-definition';
 $drop-down-btn-arrow-content: '\e706' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;
@@ -19,7 +23,7 @@ $drop-down-btn-menu-icon-font-size: $text-base !default;
 $drop-down-btn-min-width: 120px !default;
 $drop-down-btn-seperator-padding: 3px 0 !default;
 $drop-down-btn-sub-ul-box-shadow: none !default;
-$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-border-radius: $radius-4 !default;
 $drop-down-btn-ul-padding: 4px 0 !default;
 $drop-down-btn-ul-bigger-padding: 4px 0 !default;
 $drop-down-btn-ul-small-padding: 4px 0 !default;
@@ -47,3 +51,21 @@ $drop-down-btn-li-selection-bgcolor: $flyout-bg-color-selected !default;
 $drop-down-btn-li-selection-font-color: $flyout-text-color-selected !default;
 $drop-down-btn-menu-icon-color: $secondary-text-color !default;
 $drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;
+$drop-down-btn-item-height: 40px !default;
+$drop-down-btn-item-line-height: 22px !default;
+$drop-down-menu-url-padding: 8px 8px 10px !default;
+$dropdown-btn-line-height: 22px !default;
+$drop-down-btn-icon-caret-font-size: 12px !default;
+$dropdown-btn-item-flu-line-height: 19px !default;
+$dropdown-btn-item-flu-margin: 4px !default;
+$dropdown-btn-item-flu-border-radius: $radius-4 !default;
+$dd-btn-menu-icon-line-height: 18px !default;
+$dd-btn-menu-icon-padding: 2px !default;

package/styles/drop-down-button/_fusionnew-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/button/fusionnew-definition' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
+@forward 'ej2-buttons/styles/button/fusionnew-definition';
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;
@@ -47,3 +51,12 @@ $drop-down-btn-li-selection-font-color: $content-text-color !default;
 $drop-down-btn-menu-icon-color: $icon-color !default;
 $drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
 $drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

package/styles/drop-down-button/_highcontrast-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/button/highcontrast-definition' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
+@forward 'ej2-buttons/styles/button/highcontrast-definition';
 $drop-down-btn-arrow-content: '\e966' !default;
 $drop-down-btn-vertical-btn-padding: 8px 20px !default;
 $drop-down-btn-vertical-bigger-padding: 10px 24px !default;
@@ -49,3 +53,12 @@ $drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

package/styles/drop-down-button/_highcontrast-light-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+@forward 'ej2-buttons/styles/button/highcontrast-light-definition';
 $drop-down-btn-arrow-content: '\e966' !default;
 $drop-down-btn-vertical-btn-padding: 8px 20px !default;
 $drop-down-btn-vertical-bigger-padding: 10px 24px !default;
@@ -49,3 +53,12 @@ $drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('drop-down-button-layout') {
   .e-dropdown-btn,
   .e-dropdown-btn.e-btn {
@@ -9,7 +11,7 @@
     @if $skin-name == 'Material3' {
       border-radius: $btn-border-radius;
       box-shadow: $drop-down-btn-box-shadow;
-      line-height: 1;
+      line-height: $drop-down-btn-line-height;
     }
 
     &:hover {
@@ -51,7 +53,7 @@
     }
 
     &.e-vertical {
-      line-height: 1;
+      line-height: $drop-down-btn-line-height;
       padding: $drop-down-btn-vertical-btn-padding;
     }
 
@@ -74,7 +76,7 @@
       }
 
       &.e-vertical {
-        line-height: 1;
+        line-height: $drop-down-btn-line-height;
         padding: $drop-down-btn-vertical-btn-padding;
       }
 
@@ -86,7 +88,7 @@
 
       & .e-btn-icon.e-caret {
         @if $skin-name == 'fluent2' {
-          font-size: 12px;
+          font-size: $drop-down-btn-icon-caret-font-size;
         }
         @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
           font-size: $drop-down-btn-small-caret-icon-font-size;
@@ -115,7 +117,7 @@
       border-radius: $drop-down-btn-ul-border-radius;
       margin-top: $drop-down-btn-popup-margin-top;
     }
-    @if $skin-name == 'fluent2' {
+    @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
       border-radius: $drop-down-btn-ul-border-radius;
     }
 
@@ -129,7 +131,7 @@
       list-style-image: none;
       list-style-position: outside;
       list-style-type: none;
-      margin: 0;
+      margin: $dd-btn-zero-margin-padding;
       min-width: $drop-down-btn-min-width;
       overflow: hidden;
       padding: $drop-down-btn-ul-padding;
@@ -143,39 +145,39 @@
         line-height: $drop-down-btn-li-height;
         padding: $drop-down-btn-li-padding;
         @if $skin-name == 'fluent2' {
-          line-height: 19px;
-          margin: 4px;
-          border-radius: 4px;
+          line-height: $dropdown-btn-item-flu-line-height;
+          margin: $dropdown-btn-item-flu-margin;
+          border-radius: $dropdown-btn-item-flu-border-radius;
         }
 
         &.e-separator {
-          padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+          padding: $dd-btn-zero-margin-padding !important; /* stylelint-disable-line declaration-no-important */
         }
 
         &.e-url {
-          padding: 0;
+          padding: $dd-btn-zero-margin-padding;
         }
 
         & .e-menu-url {
           display: block;
           padding: $drop-down-btn-li-padding;
           text-decoration: none;
-          width: 100%;
+          width: $dd-full-width;
         }
 
         & .e-menu-icon {
           float: left;
           font-size: $drop-down-btn-menu-icon-font-size;
           @if $skin-name == 'fluent2' {
-            line-height: 18px;
-            padding: 2px;
+            line-height: $dd-btn-menu-icon-line-height;
+            padding: $dd-btn-menu-icon-padding;
           }
           @else {
             line-height: $drop-down-btn-li-height;
           }
           margin-right: $drop-down-btn-icon-margin-right;
           vertical-align: middle;
-          width: 1em;
+          width: $dd-menu-icon-width;
         }
 
         &.e-disabled {
@@ -198,8 +200,8 @@
           border-bottom-style: $drop-down-btn-li-border-style;
           border-bottom-width: $drop-down-btn-li-border-width;
           cursor: auto;
-          height: auto;
-          line-height: normal;
+          height: $dd-auto-height;
+          line-height: $dd-bgr-seperator-line-height;
           margin: $drop-down-btn-seperator-padding;
           pointer-events: none;
         }
@@ -212,10 +214,10 @@
 
       & .e-dropdown-menu {
         border: 0;
-        height: 1px;
-        min-width: 0;
-        padding: 0;
-        width: 1px;
+        height: $dd-menu-height;
+        min-width: $dd-btn-zero-margin-padding;
+        padding: $dd-btn-zero-margin-padding;
+        width: $dd-menu-width;
       }
     }
 
@@ -228,12 +230,12 @@
     & .e-menu-icon {
       float: right;
       margin-left: $drop-down-btn-icon-margin-right;
-      margin-right: 0;
+      margin-right: $dd-btn-zero-margin-padding;
     }
   }
 
   .e-dropdown-popup-width ul {
-    min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+    min-width: $dd-btn-zero-margin-padding !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-dropdown-popup-width ul li {

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'ej2-buttons/styles/button/material-dark-definition' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+@forward 'ej2-buttons/styles/button/material-dark-definition';
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 12px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 16px 16px !default;
@@ -50,3 +54,12 @@ $drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

package/styles/drop-down-button/_material-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/material' as *;
+@use 'ej2-buttons/styles/button/material-definition' as *;
+@forward 'ej2-base/styles/definition/material';
+@forward 'ej2-buttons/styles/button/material-definition';
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 12px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 16px 16px !default;
@@ -50,3 +54,12 @@ $drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

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

@@ -1 +1,67 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'ej2-buttons/styles/button/material3-dark-definition' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+@forward 'ej2-buttons/styles/button/material3-dark-definition';
+$drop-down-btn-arrow-content: '\e70d' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: $text-base !default;
+$drop-down-btn-bigger-li-height: 40px !default;
+$drop-down-btn-bigger-max-width: 202px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-icon-font-size: $text-base !default;
+$drop-down-btn-small-icon-font-size: $text-xs !default;
+$drop-down-btn-icon-margin-right: 11px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-height: 32px !default;
+$drop-down-btn-li-padding: 0 12px !default;
+$drop-down-btn-bigger-li-padding: 0 16px !default;
+$drop-down-btn-small-li-padding: 0 8px !default;
+$drop-down-btn-small-li-height: 24px !default;
+$drop-down-btn-max-width: 178px !default;
+$drop-down-btn-menu-icon-bigger-font-size: $text-xl !default;
+$drop-down-btn-menu-icon-font-size: $text-base !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-sub-ul-box-shadow: none !default;
+$drop-down-btn-ul-border-radius: $radius-4 !default;
+$drop-down-btn-ul-padding: 4px 0 !default;
+$drop-down-btn-ul-bigger-padding: 8px 0 !default;
+$drop-down-btn-ul-small-padding: 4px 0 !default;
+$drop-down-btn-caret-icon-font-size: $text-base !default;
+$drop-down-btn-small-caret-icon-font-size: $text-xs !default;
+$drop-down-btn-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-xl !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-box-shadow: $shadow-sm !default;
+$drop-down-btn-popup-margin-top: 0 !default;
+$drop-down-btn-bigger-popup-margin-top: 0 !default;
+$drop-down-btn-ul-border: 0 solid rgba($border-light) !default;
+$drop-down-btn-li-box-shadow: none !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-color: rgba($content-text-color) !default;
+$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
+$drop-down-btn-font-size: $text-sm !default;
+$drop-down-btn-font-weight: $font-weight-normal !default;
+$drop-down-btn-li-bgcolor: $flyout-bg-color-hover !default;
+$drop-down-btn-ul-bgcolor: $flyout-bg-color !default;
+$drop-down-btn-li-border-color: rgba($border-light) !default;
+$drop-down-btn-selected-color: rgba($flyout-text-color-selected) !default;
+$drop-down-btn-parent-ul-box-shadow: $shadow-md !default;
+$drop-down-btn-li-focus-bgcolor: $flyout-bg-color-focus !default;
+$drop-down-btn-li-selection-bgcolor: $flyout-bg-color-selected !default;
+$drop-down-btn-li-selection-font-color: rgba($flyout-text-color-hover) !default;
+$drop-down-btn-menu-icon-color: rgba($icon-color) !default;
+$drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
+$drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'ej2-buttons/styles/button/material3-definition' as *;
+@forward 'ej2-base/styles/definition/material3';
+@forward 'ej2-buttons/styles/button/material3-definition';
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;
@@ -21,7 +25,7 @@ $drop-down-btn-menu-icon-font-size: $text-base !default;
 $drop-down-btn-min-width: 120px !default;
 $drop-down-btn-seperator-padding: 3px 0 !default;
 $drop-down-btn-sub-ul-box-shadow: none !default;
-$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-border-radius: $radius-4 !default;
 $drop-down-btn-ul-padding: 4px 0 !default;
 $drop-down-btn-ul-bigger-padding: 8px 0 !default;
 $drop-down-btn-ul-small-padding: 4px 0 !default;
@@ -52,3 +56,12 @@ $drop-down-btn-li-selection-font-color: rgba($flyout-text-color-hover) !default;
 $drop-down-btn-menu-icon-color: rgba($icon-color) !default;
 $drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
 $drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

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

@@ -1 +1,65 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'ej2-buttons/styles/button/tailwind-dark-definition' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+@forward 'ej2-buttons/styles/button/tailwind-dark-definition';
+$drop-down-btn-arrow-content: '\e706' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: $text-base !default;
+$drop-down-btn-bigger-li-height: 36px !default;
+$drop-down-btn-bigger-max-width: 202px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-icon-font-size: $text-base !default;
+$drop-down-btn-small-icon-font-size: $text-xs !default;
+$drop-down-btn-icon-margin-right: 12px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-height: 30px !default;
+$drop-down-btn-li-padding: 0 12px !default;
+$drop-down-btn-bigger-li-padding: 0 16px !default;
+$drop-down-btn-small-li-padding: 0 8px !default;
+$drop-down-btn-max-width: 178px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 22px !default;
+$drop-down-btn-menu-icon-font-size: $text-lg !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-sub-ul-box-shadow: none !default;
+$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-padding: 4px 0 !default;
+$drop-down-btn-ul-bigger-padding: 4px 0 !default;
+$drop-down-btn-ul-small-padding: 4px 0 !default;
+$drop-down-btn-caret-icon-font-size: $text-base !default;
+$drop-down-btn-small-caret-icon-font-size: $text-base !default;
+$drop-down-btn-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-xl !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-xl !default;
+$drop-down-btn-box-shadow: $shadow-focus-ring2 !default;
+$drop-down-btn-popup-margin-top: 4px !default;
+$drop-down-btn-bigger-popup-margin-top: 4px !default;
+$drop-down-btn-ul-border: 1px solid $border-light !default;
+$drop-down-btn-li-box-shadow: none !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-color: $secondary-text-color !default;
+$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
+$drop-down-btn-font-size: $text-sm !default;
+$drop-down-btn-font-weight: $font-weight-normal !default;
+$drop-down-btn-li-bgcolor: $content-bg-color-hover !default;
+$drop-down-btn-ul-bgcolor: $flyout-bg-color !default;
+$drop-down-btn-li-border-color: $border-light !default;
+$drop-down-btn-selected-color: $content-text-color-selected !default;
+$drop-down-btn-parent-ul-box-shadow: $shadow-lg !default;
+$drop-down-btn-li-focus-bgcolor: $content-bg-color-hover !default;
+$drop-down-btn-li-selection-bgcolor: $content-bg-color-selected !default;
+$drop-down-btn-li-selection-font-color: $content-text-color-selected !default;
+$drop-down-btn-menu-icon-color: $secondary-text-color !default;
+$drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'ej2-buttons/styles/button/tailwind-definition' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+@forward 'ej2-buttons/styles/button/tailwind-definition';
 $drop-down-btn-arrow-content: '\e706' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;
@@ -50,3 +54,12 @@ $drop-down-btn-li-selection-bgcolor: $content-bg-color-selected !default;
 $drop-down-btn-li-selection-font-color: $content-text-color-selected !default;
 $drop-down-btn-menu-icon-color: $secondary-text-color !default;
 $drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

package/styles/drop-down-button/_tailwind3-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+@forward 'ej2-buttons/styles/button/tailwind3-definition';
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;
@@ -22,7 +26,7 @@ $drop-down-btn-menu-icon-font-size: $text-sm !default;
 $drop-down-btn-min-width: 120px !default;
 $drop-down-btn-seperator-padding: 3px 0 !default;
 $drop-down-btn-sub-ul-box-shadow: none !default;
-$drop-down-btn-ul-border-radius: 4px !default;
+$drop-down-btn-ul-border-radius: $radius-4 !default;
 $drop-down-btn-ul-padding: 4px 0 !default;
 $drop-down-btn-ul-bigger-padding: 8px 0 !default;
 $drop-down-btn-ul-small-padding: 4px 0 !default;
@@ -52,3 +56,12 @@ $drop-down-btn-li-selection-font-color: $content-text-color !default;
 $drop-down-btn-menu-icon-color: $icon-color !default;
 $drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
 $drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
+
+$drop-down-btn-line-height: 1 !default;
+$dd-btn-zero-margin-padding: 0 !default;
+$dd-menu-height: 1px !default;
+$dd-menu-icon-width: 1em !default;
+$dd-menu-width: 1px !default;
+$dd-auto-height: auto !default;
+$dd-bgr-seperator-line-height: normal !default;
+$dd-full-width: 100% !default;

package/styles/drop-down-button/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/drop-down-button/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('drop-down-button-theme') {
   .e-dropdown-popup {
     background: $drop-down-btn-ul-bgcolor;

package/styles/drop-down-button/bds.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-popups/styles/popup/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-popups/styles/popup/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-button/bootstrap-dark.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;