@syncfusion/ej2-splitbuttons 33.2.6 → 34.1.31

package/styles/split-button/_layout.scss

@@ -1,4 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
+@use '@syncfusion/ej2-buttons/styles/button/variables' as btn;
 
 @include export-module('split-button-layout') {
   .e-split-btn-wrapper {
@@ -7,7 +8,7 @@
     width: min-content;
     @if $skin-name == 'Material3' {
       border-radius: $split-bgr-btn-border-radius;
-      box-shadow: $btn-box-shadow;
+      box-shadow: btn.$btn-box-shadow;
     }
 
     .e-split-btn {
@@ -60,14 +61,14 @@
 
       &:focus-visible { // only for keybord
         @if $skin-name == 'Material3' {
-          box-shadow: $btn-keyboard-focus-box-shadow;
+          box-shadow: btn.$btn-keyboard-focus-box-shadow;
         }
       }
 
       &.e-btn:focus-visible { // only for keybord
         @if $skin-name == 'fluent2' {
           border-right-color: $grey-black !important; /* stylelint-disable-line declaration-no-important */
-          box-shadow: $btn-keyboard-focus-box-shadow;
+          box-shadow: btn.$btn-keyboard-focus-box-shadow;
         }
       }
 
@@ -82,12 +83,12 @@
       }
 
       .e-btn-icon {
-        font-size: $drop-down-btn-icon-font-size;
+        font-size: $drop-dbtn-icon-font-size;
         margin-left: $drop-down-zero-padding-margin;
         padding-right: $split-btn-icon-padding-right;
         width: $split-auto-width;
         @if $skin-name == 'Material3' {
-          border-radius: $btn-border-radius;
+          border-radius: btn.$btn-border-radius;
         }
       }
 
@@ -154,7 +155,7 @@
       &.e-btn:focus-visible { // only for keybord
         @if $skin-name == 'fluent2' {
           margin-left: $drop-down-zero-padding-margin !important; /* stylelint-disable-line declaration-no-important */
-          box-shadow: $btn-keyboard-focus-box-shadow;
+          box-shadow: btn.$btn-keyboard-focus-box-shadow;
         }
       }
     }
@@ -182,7 +183,7 @@
 
       &:focus-visible { // only for keybord
         @if $skin-name == 'Material3' {
-          box-shadow: $btn-keyboard-focus-box-shadow;
+          box-shadow: btn.$btn-keyboard-focus-box-shadow;
         }
       }
 
@@ -233,7 +234,7 @@
           padding-left: $split-rtl-btn-icon-padding-left;
           padding-right: $drop-down-zero-padding-margin;
           @if $skin-name == 'Material3' {
-            border-radius: $btn-border-radius;
+            border-radius: btn.$btn-border-radius;
           }
         }
 

package/styles/split-button/_material-dark-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/material-dark' as *;
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 @use '../drop-down-button/material-dark-definition' as *;
-@forward 'ej2-base/styles/definition/material-dark';
-@forward '../drop-down-button/material-dark-definition';
 
 //default
 $split-btn-zindex: 0;
@@ -65,6 +63,9 @@ $split-btn-vertical-padding-right: 10px !default;
 $split-btn-vertical-icon-top-padding: 4px !default;
 $drop-down-btn-vertical-padding-bottom: 4px !default;
 $drop-down-btn-vertical-padding-top: 4px !default;
+$drop-dbtn-icon-font-size: 14px !default;
+$drop-dbtn-icon-font-size-bigger: 18px !default;
+
 $split-btn-top-icon-padding-bottom: 12px !default;
 $split-btn-top-icon-padding-top: 12px !default;
 $split-auto-width: auto !default;

package/styles/split-button/_material-definition.scss

@@ -1,7 +1,6 @@
-@use 'ej2-base/styles/definition/material' as *;
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 @use '../drop-down-button/material-definition' as *;
-@forward 'ej2-base/styles/definition/material';
-@forward '../drop-down-button/material-definition';
+
 $split-btn-zindex: 0 !default;
 $split-btn-border-radius: 2px !default;
 $split-btn-focus-border-color: transparent !default;
@@ -43,6 +42,8 @@ $drop-down-bigger-rtl-padding-right: 12px !default;
 $drop-down-bgr-rtl-icon-padding-left: 10px !default;
 $drop-dbtn-bigger-padding-left: 4px !default;
 $drop-dbtn-bigger-padding-right: 4px !default;
+$drop-dbtn-icon-font-size: 14px !default;
+$drop-dbtn-icon-font-size-bigger: 18px !default;
 
 $split-rtl-btn-padding-left: 4px !default;
 $split-rtl-btn-padding-right: 10px !default;

package/styles/split-button/_material3-dark-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 @use '../drop-down-button/material3-dark-definition' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
-@forward '../drop-down-button/material3-dark-definition';
 
 //layout variables
 $split-btn-zindex: 2 !default;
@@ -64,6 +62,8 @@ $split-btn-vertical-padding-right: 10px !default;
 $split-btn-vertical-icon-top-padding: 4px !default;
 $drop-down-btn-vertical-padding-bottom: 4px !default;
 $drop-down-btn-vertical-padding-top: 4px !default;
+$drop-dbtn-icon-font-size: $text-base !default;
+$drop-dbtn-icon-font-size-bigger: $text-lg !default;
 $split-btn-top-icon-padding-bottom: 12px !default;
 $split-btn-top-icon-padding-top: 12px !default;
 $split-auto-width: auto !default;

package/styles/split-button/_material3-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/material3' as *;
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 @use '../drop-down-button/material3-definition' as *;
-@forward 'ej2-base/styles/definition/material3';
-@forward '../drop-down-button/material3-definition';
 
 //layout variables
 $split-btn-zindex: 2 !default;
@@ -64,6 +62,8 @@ $split-btn-vertical-padding-right: 10px !default;
 $split-btn-vertical-icon-top-padding: 4px !default;
 $drop-down-btn-vertical-padding-bottom: 4px !default;
 $drop-down-btn-vertical-padding-top: 4px !default;
+$drop-dbtn-icon-font-size: $text-base !default;
+$drop-dbtn-icon-font-size-bigger: $text-lg !default;
 $split-btn-top-icon-padding-bottom: 12px !default;
 $split-btn-top-icon-padding-top: 12px !default;
 $split-auto-width: auto !default;

package/styles/split-button/_tailwind-dark-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 @use '../drop-down-button/tailwind-dark-definition' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
-@forward '../drop-down-button/tailwind-dark-definition';
 
 //layout variables
 $split-btn-zindex: 2 !default;
@@ -43,6 +41,8 @@ $drop-down-zero-border-radius: 0 !default;
 $drop-down-bigger-rtl-padding-left: 12px !default;
 $drop-down-bigger-rtl-padding-right: 12px !default;
 $drop-down-bgr-rtl-icon-padding-left: 10px !default;
+$drop-dbtn-icon-font-size: $text-base !default;
+$drop-dbtn-icon-font-size-bigger: $text-lg !default;
 
 $split-rtl-btn-padding-left: 12px !default;
 $split-rtl-btn-padding-right: 12px !default;

package/styles/split-button/_tailwind-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 @use '../drop-down-button/tailwind-definition' as *;
-@forward 'ej2-base/styles/definition/tailwind';
-@forward '../drop-down-button/tailwind-definition';
 
 //layout variables
 $split-btn-zindex: 2 !default;
@@ -43,6 +41,8 @@ $drop-down-zero-border-radius: 0 !default;
 $drop-down-bigger-rtl-padding-left: 12px !default;
 $drop-down-bigger-rtl-padding-right: 12px !default;
 $drop-down-bgr-rtl-icon-padding-left: 10px !default;
+$drop-dbtn-icon-font-size: $text-base !default;
+$drop-dbtn-icon-font-size-bigger: $text-lg !default;
 
 $split-rtl-btn-padding-left: 12px !default;
 $split-rtl-btn-padding-right: 12px !default;

package/styles/split-button/_tailwind3-definition.scss

@@ -1,7 +1,6 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 @use '../drop-down-button/tailwind3-definition' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
-@forward '../drop-down-button/tailwind3-definition';
+
 $split-btn-zindex: 2 !default;
 $split-btn-border-radius: $radius-4 !default;
 $split-btn-focus-outline-offset: 0 !default;
@@ -43,6 +42,8 @@ $drop-down-bigger-rtl-padding-right: 12px !default;
 $drop-down-bgr-rtl-icon-padding-left: 10px !default;
 $drop-dbtn-bigger-padding-left: 4px !default;
 $drop-dbtn-bigger-padding-right: 4px !default;
+$drop-dbtn-icon-font-size: $text-sm !default;
+$drop-dbtn-icon-font-size-bigger: $text-base !default;
 
 $split-rtl-btn-padding-left: 4px !default;
 $split-rtl-btn-padding-right: 10px !default;

package/styles/split-button/_theme.scss

@@ -1,4 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
+@use '@syncfusion/ej2-buttons/styles/button/variables' as btn;
 
 @include export-module('split-button-theme') {
   .e-split-btn-wrapper {
@@ -20,9 +21,9 @@
       }
 
       &:disabled {
-        border-right-color: $btn-disabled-bgcolor;
+        border-right-color: btn.$btn-disabled-bgcolor;
         @if $skin-name == 'tailwind3' {
-          border-right-color: $btn-disabled-border-color;
+          border-right-color: btn.$btn-disabled-border-color;
         }
       }
 
@@ -42,7 +43,7 @@
         border-right-color: $split-btn-hover-border-color;
 
         &:disabled {
-          border-right-color: $btn-disabled-border-color;
+          border-right-color: btn.$btn-disabled-border-color;
         }
       }
     }
@@ -82,7 +83,7 @@
         }
 
         &:disabled {
-          border-left-color: $btn-disabled-border-color;
+          border-left-color: btn.$btn-disabled-border-color;
           border-right-color: $split-btn-disabled-vertical-border-color;
         }
 
@@ -97,7 +98,7 @@
           border-right-color: $split-btn-hover-vertical-border-color;
 
           &:disabled {
-            border-left-color: $btn-disabled-border-color;
+            border-left-color: btn.$btn-disabled-border-color;
           }
         }
       }
@@ -130,7 +131,7 @@
         }
 
         &:disabled {
-          border-bottom-color: $btn-disabled-border-color;
+          border-bottom-color: btn.$btn-disabled-border-color;
           border-right-color: $split-btn-disabled-vertical-border-color;
         }
       }
@@ -146,7 +147,7 @@
           }
 
           &:disabled {
-            border-bottom-color: $btn-disabled-border-color;
+            border-bottom-color: btn.$btn-disabled-border-color;
           }
         }
       }

package/styles/split-button/_variables.scss

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

package/styles/split-button/bds.css

@@ -2,66 +2,6 @@
 
 
 
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
-/* stylelint-disable-line no-empty-source */
 .e-dropdown-popup {
   position: absolute;
   border-radius: 8px;
@@ -104,10 +44,6 @@
   padding: 0;
 }
 
-
-
-
-
 /* stylelint-disable */
 .e-btn.e-primary:focus {
   -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
@@ -167,51 +103,6 @@
   font-weight: 600;
 }
 
-.e-dropdown-popup {
-  position: absolute;
-  border-radius: 8px;
-  margin-top: 4px;
-}
-
-.e-dropdown-popup ul {
-  border: 1px solid var(--color-sf-border-secondary);
-  border-radius: 8px;
-  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-size: 14px;
-  font-weight: 500;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  margin: 0;
-  min-width: 120px;
-  overflow: hidden;
-  padding: 4px 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  white-space: nowrap;
-}
-
-.e-dropdown-popup ul .e-item {
-  cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 32px;
-  line-height: 32px;
-  padding: 0 12px;
-  margin: 0 6px;
-  border-radius: 6px;
-}
-
-.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-
 .e-split-btn-wrapper {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -384,114 +275,6 @@
   border-top-left-radius: 0;
 }
 
-
-
-
-
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
-.e-dropdown-popup {
-  position: absolute;
-  border-radius: 8px;
-  margin-top: 4px;
-}
-
-.e-dropdown-popup ul {
-  border: 1px solid var(--color-sf-border-secondary);
-  border-radius: 8px;
-  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-size: 14px;
-  font-weight: 500;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  margin: 0;
-  min-width: 120px;
-  overflow: hidden;
-  padding: 4px 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  white-space: nowrap;
-}
-
-.e-dropdown-popup ul .e-item {
-  cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 32px;
-  line-height: 32px;
-  padding: 0 12px;
-  margin: 0 6px;
-  border-radius: 6px;
-}
-
-.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: var(--color-sf-utility-secondary-border-color);
 }
@@ -590,114 +373,6 @@
   border-color: transparent;
 }
 
-
-
-
-
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
-.e-dropdown-popup {
-  position: absolute;
-  border-radius: 8px;
-  margin-top: 4px;
-}
-
-.e-dropdown-popup ul {
-  border: 1px solid var(--color-sf-border-secondary);
-  border-radius: 8px;
-  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-size: 14px;
-  font-weight: 500;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  margin: 0;
-  min-width: 120px;
-  overflow: hidden;
-  padding: 4px 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  white-space: nowrap;
-}
-
-.e-dropdown-popup ul .e-item {
-  cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 32px;
-  line-height: 32px;
-  padding: 0 12px;
-  margin: 0 6px;
-  border-radius: 6px;
-}
-
-.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-
 .e-bigger .e-split-btn-wrapper .e-split-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn {
   padding-left: 12px;

package/styles/split-button/bds.scss

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

package/styles/split-button/bootstrap-dark.scss

@@ -1,7 +1,3 @@
-@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 './../drop-down-button/bootstrap-dark-definition' as *;
 @use 'bootstrap-dark-definition' as *;
-@use 'all.bootstrap-dark' as *;
-@use 'bigger.bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/bootstrap.scss

@@ -1,7 +1,3 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
-@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
-@use 'ej2-popups/styles/popup/bootstrap-definition' as *;
-@use './../drop-down-button/bootstrap-definition' as *;
 @use 'bootstrap-definition' as *;
-@use 'all.bootstrap' as *;
-@use 'bigger.bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/bootstrap4.scss

@@ -1,7 +1,3 @@
-@use 'ej2-base/styles/definition/bootstrap4' as *;
-@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
-@use 'ej2-popups/styles/popup/bootstrap4-definition' as *;
-@use './../drop-down-button/bootstrap4-definition' as *;
 @use 'bootstrap4-definition' as *;
-@use 'all.bootstrap4' as *;
-@use 'bigger.bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/bootstrap5-dark.css

@@ -1,4 +1,3 @@
-/* stylelint-disable-line no-empty-source */
 .e-split-btn-wrapper {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;