@syncfusion/ej2-splitbuttons 31.2.12 → 32.1.19

package/styles/button-group/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 */
 *.e-btn-group,
 *.e-css.e-btn-group {
@@ -53,43 +123,43 @@
 }
 *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:not(:first-of-type):not(:last-of-type),
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:not(:first-of-type):not(:last-of-type) {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type, *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child),
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type,
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type,
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper + .e-btn,
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper + .e-btn {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:last-child,
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:last-child {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:first-child,
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:first-child {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:first-child .e-btn:last-child,
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:first-child .e-btn:last-child {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:last-child .e-btn:first-child,
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper:last-child .e-btn:first-child {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-rtl .e-btn,
 *.e-css.e-btn-group.e-rtl .e-btn {
@@ -97,43 +167,43 @@
 }
 *.e-btn-group.e-rtl .e-btn:not(:first-of-type):not(:last-of-type),
 *.e-css.e-btn-group.e-rtl .e-btn:not(:first-of-type):not(:last-of-type) {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-rtl .e-btn:first-of-type, *.e-btn-group.e-rtl .e-btn:last-of-type:not(:last-child),
 *.e-css.e-btn-group.e-rtl .e-btn:first-of-type,
 *.e-css.e-btn-group.e-rtl .e-btn:last-of-type:not(:last-child) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-rtl .e-btn:last-of-type,
 *.e-css.e-btn-group.e-rtl .e-btn:last-of-type {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-rtl .e-split-btn-wrapper + .e-btn,
 *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper + .e-btn {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-rtl .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:last-child,
 *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:last-child {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-rtl .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:first-child,
 *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper:not(:first-child):not(:last-child) .e-btn:first-child {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-rtl .e-split-btn-wrapper:first-child .e-btn:last-child,
 *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper:first-child .e-btn:last-child {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-rtl .e-split-btn-wrapper:last-child .e-btn:first-child,
 *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper:last-child .e-btn:first-child {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-vertical,
 *.e-css.e-btn-group.e-vertical {
@@ -152,89 +222,89 @@
 }
 *.e-btn-group.e-vertical .e-btn:not(:first-of-type):not(:last-of-type),
 *.e-css.e-btn-group.e-vertical .e-btn:not(:first-of-type):not(:last-of-type) {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-vertical .e-btn:first-of-type,
 *.e-css.e-btn-group.e-vertical .e-btn:first-of-type {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0.125);
+  border-top-right-radius: calc(var(--e-radius) * 0.125);
 }
 *.e-btn-group.e-vertical .e-btn:last-of-type,
 *.e-css.e-btn-group.e-vertical .e-btn:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.125);
+  border-bottom-right-radius: calc(var(--e-radius) * 0.125);
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl),
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) {
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:first-of-type,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:first-of-type {
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
+  border-bottom-left-radius: calc(var(--e-radius) * 1.25);
+  border-top-left-radius: calc(var(--e-radius) * 1.25);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:last-of-type,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:last-of-type {
-  border-bottom-right-radius: 20px;
-  border-top-right-radius: 20px;
+  border-bottom-right-radius: calc(var(--e-radius) * 1.25);
+  border-top-right-radius: calc(var(--e-radius) * 1.25);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:last-of-type:not(:last-child),
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-btn:last-of-type:not(:last-child) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper + .e-btn,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper + .e-btn {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:first-child .e-btn:first-child,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:first-child .e-btn:first-child {
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
+  border-bottom-left-radius: calc(var(--e-radius) * 1.25);
+  border-top-left-radius: calc(var(--e-radius) * 1.25);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:first-child .e-btn:last-child,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:first-child .e-btn:last-child {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:first-child,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:first-child {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:last-child,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:last-child {
-  border-bottom-right-radius: 20px;
-  border-top-right-radius: 20px;
+  border-bottom-right-radius: calc(var(--e-radius) * 1.25);
+  border-top-right-radius: calc(var(--e-radius) * 1.25);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl {
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type {
-  border-bottom-right-radius: 20px;
-  border-top-right-radius: 20px;
+  border-bottom-right-radius: calc(var(--e-radius) * 1.25);
+  border-top-right-radius: calc(var(--e-radius) * 1.25);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type,
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type {
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
+  border-bottom-left-radius: calc(var(--e-radius) * 1.25);
+  border-top-left-radius: calc(var(--e-radius) * 1.25);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type:not(:last-child),
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type:not(:last-child) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 *.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type:not(:first-child),
 *.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type:not(:first-child) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 
 /* stylelint-disable */

package/styles/button-group/tailwind3.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-buttons/styles/button/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

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

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

@@ -1,3 +1,8 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@forward 'ej2-base/styles/definition/bds';
+@forward 'ej2-buttons/styles/button/bds-definition';
+
 //layout variables
 $drop-down-btn-arrow-content: '\e706' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
@@ -51,6 +56,15 @@ $drop-down-btn-li-selection-bgcolor: $flyout-bg-color-selected !default;
 $drop-down-btn-li-selection-font-color: $content-text-color !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;
 
 .e-dropdown-popup {
   position: absolute;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('drop-down-button-bigger') {
   .e-bigger .e-dropdown-btn,
   .e-bigger.e-dropdown-btn {
@@ -10,13 +12,13 @@
     }
 
     &.e-vertical {
-      line-height: 1;
+      line-height: $drop-down-btn-line-height;
       padding: $drop-down-btn-vertical-bigger-padding;
     }
 
     &.e-small {
       &.e-vertical {
-        line-height: 1;
+        line-height: $drop-down-btn-line-height;
         padding: $drop-down-btn-vertical-bigger-padding;
       }
       .e-btn-icon {
@@ -71,18 +73,18 @@
         line-height: $drop-down-btn-bigger-li-height;
       }
       @if $skin-name == 'fluent2' {
-        height: 40px;
-        line-height: 22px;
+        height: $drop-down-btn-item-height;
+        line-height: $drop-down-btn-item-line-height;
       }
       padding: $drop-down-btn-bigger-li-padding;
 
       &.e-url {
-        padding: 0;
+        padding: $dd-btn-zero-margin-padding;
       }
 
       & .e-menu-url {
         @if $skin-name == 'fluent2' {
-          padding: 8px 8px 10px;
+          padding: $drop-down-menu-url-padding;
         }
       }
 
@@ -90,13 +92,13 @@
         font-size: $drop-down-btn-menu-icon-bigger-font-size;
         line-height: $drop-down-btn-bigger-li-height;
         @if $skin-name == 'fluent2' {
-          line-height: 22px;
+          line-height: $dropdown-btn-line-height;
         }
       }
 
       &.e-separator {
-        height: auto;
-        line-height: normal;
+        height: $dd-auto-height;
+        line-height: $dd-bgr-seperator-line-height;
       }
     }
   }

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+@forward 'ej2-buttons/styles/button/bootstrap-dark-definition';
 $drop-down-btn-arrow-content: '\e969' !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-small-caret-icon-font-size-bigger: 10px !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/_bootstrap-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
+@forward 'ej2-buttons/styles/button/bootstrap-definition';
 $drop-down-btn-arrow-content: '\e969' !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-small-caret-icon-font-size-bigger: 10px !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/_bootstrap4-definition.scss

@@ -1,5 +1,8 @@
 @use 'sass:color';
-
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
+@forward 'ej2-buttons/styles/button/bootstrap4-definition';
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;
@@ -52,3 +55,12 @@ $drop-down-btn-small-caret-icon-font-size-bigger: 10px !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/_bootstrap5-dark-definition.scss

@@ -1 +1,66 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+@forward 'ej2-buttons/styles/button/bootstrap5-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: 32px !default;
+$drop-down-btn-bigger-max-width: 202px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-icon-font-size: $text-sm !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: 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: 8px 0 !default;
+$drop-down-btn-ul-small-padding: 4px 0 !default;
+$drop-down-btn-caret-icon-font-size: $text-xs !default;
+$drop-down-btn-small-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: $text-base !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-sm !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-sm !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-xs !default;
+$drop-down-btn-box-shadow: $secondary-shadow-focus !default;
+$drop-down-btn-popup-margin-top: 2px !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: $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: $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: none !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 !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/_bootstrap5-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+@forward 'ej2-buttons/styles/button/bootstrap5-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;
@@ -51,3 +55,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/_bootstrap5.3-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-buttons/styles/button/bootstrap5.3-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
+@forward 'ej2-buttons/styles/button/bootstrap5.3-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;
@@ -20,7 +24,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;
@@ -51,3 +55,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/_fabric-dark-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-buttons/styles/button/fabric-dark-definition' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
+@forward 'ej2-buttons/styles/button/fabric-dark-definition';
 $drop-down-btn-arrow-content: '\e36a' !default;
 $drop-down-btn-vertical-btn-padding: 8px 20px !default;
 $drop-down-btn-vertical-bigger-padding: 10px 24px !default;
@@ -50,3 +54,12 @@ $drop-down-btn-small-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/_fabric-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-buttons/styles/button/fabric-definition' as *;
+@forward 'ej2-base/styles/definition/fabric';
+@forward 'ej2-buttons/styles/button/fabric-definition';
 $drop-down-btn-arrow-content: '\e36a' !default;
 $drop-down-btn-vertical-btn-padding: 8px 20px !default;
 $drop-down-btn-vertical-bigger-padding: 10px 24px !default;
@@ -50,3 +54,12 @@ $drop-down-btn-small-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;