@syncfusion/ej2-splitbuttons 31.2.2 → 32.1.19

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use '../drop-down-button/highcontrast-definition' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
+@forward '../drop-down-button/highcontrast-definition';
 $split-btn-zindex: 2 !default;
 $split-btn-border-radius: 0 !default;
 $split-btn-focus-border-color: $border-fg !default;
@@ -21,3 +25,45 @@ $split-btn-active-left-border-color: $selection-bg !default;
 $split-btn-sec-btn-margin-left: -1px !default;
 $split-btn-icon-btn-padding: 8px !default;
 $split-btn-icon-btn-padding-bigger: 11px !default;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+$split-btn-bigger-padding-left: 12px !default;
+$split-btn-bigger-padding-right: 6px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: 0 !default;
+$drop-down-bigger-rtl-padding-left: 6px !default;
+$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;
+
+$split-rtl-btn-padding-left: 4px !default;
+$split-rtl-btn-padding-right: 10px !default;
+
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$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;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-full-width: 100% !default;

package/styles/split-button/_highcontrast-light-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use '../drop-down-button/highcontrast-light-definition' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+@forward '../drop-down-button/highcontrast-light-definition';
 $split-btn-zindex: 2;
 $split-btn-border-radius: 0;
 $split-btn-focus-border-color: $border-fg;
@@ -21,3 +25,45 @@ $split-btn-active-left-border-color: $selection-bg;
 $split-btn-sec-btn-margin-left: -1px;
 $split-btn-icon-btn-padding: 8px;
 $split-btn-icon-btn-padding-bigger: 11px;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+$split-btn-bigger-padding-left: 12px !default;
+$split-btn-bigger-padding-right: 6px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: 0 !default;
+$drop-down-bigger-rtl-padding-left: 6px !default;
+$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;
+
+$split-rtl-btn-padding-left: 4px !default;
+$split-rtl-btn-padding-right: 10px !default;
+
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$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;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-full-width: 100% !default;

package/styles/split-button/_layout.scss

@@ -1,16 +1,18 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('split-button-layout') {
   .e-split-btn-wrapper {
     display: inline-flex;
     white-space: nowrap;
     width: min-content;
     @if $skin-name == 'Material3' {
-      border-radius: 4px;
+      border-radius: $split-bgr-btn-border-radius;
       box-shadow: $btn-box-shadow;
     }
 
     .e-split-btn {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
+      border-bottom-right-radius: $drop-down-zero-border-radius;
+      border-top-right-radius: $drop-down-zero-border-radius;
       text-transform: none;
       @if $skin-name == 'bootstrap4' {
         padding-left: $split-btn-icon-btn-padding;
@@ -20,15 +22,20 @@
         padding: 3px 7px;
       }
       @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
+        padding: $split-nrml-btn-padding;
+        line-height: $split-nrml-btn-line-height;
         box-shadow: none;
         z-index: 1;
       }
+      @if $skin-name == 'bootstrap5.3' {
+        border: 0;
+      }
       @if $skin-name == 'bootstrap5' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' or $skin-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-        padding: 3.75px 11px;
+        padding: $split-btn-wrapper-btn-padding;
       }
       @else {
-        padding-left: 10px;
-        padding-right: 10px;
+        padding-left: $split-btn-padding-left;
+        padding-right: $split-btn-padding-right;
       }
 
       &:focus {
@@ -70,28 +77,23 @@
       }
 
       &.e-top-icon-btn {
-        padding-bottom: 10px;
-        padding-top: 10px;
+        padding-bottom: $split-btn-top-icon-padding-bottom;
+        padding-top: $split-btn-top-icon-padding-top;
       }
 
       .e-btn-icon {
         font-size: $drop-down-btn-icon-font-size;
-        margin-left: 0;
-        @if $skin-name == 'FluentUI' {
-          padding-right: 4px;
-        }
-        @else {
-          padding-right: 8px;
-        }
-        width: auto;
+        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;
         }
       }
 
       .e-icon-top {
-        padding-bottom: 4px;
-        padding-right: 0;
+        padding-bottom: $split-btn-icon-top-padding-bottom;
+        padding-right: $drop-down-zero-padding-margin;
       }
 
       &.e-icon-btn {
@@ -101,14 +103,14 @@
           padding: 3.75px 11px;
         }
         .e-btn-icon {
-          padding-right: 0;
+          padding-right: $drop-down-zero-padding-margin;
         }
       }
     }
 
     .e-dropdown-btn {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
+      border-bottom-left-radius: $drop-down-zero-border-radius;
+      border-top-left-radius: $drop-down-zero-border-radius;
       margin-left: $split-btn-sec-btn-margin-left;
       @if $skin-name == 'Material3' {
         box-shadow: none;
@@ -121,8 +123,8 @@
         padding: 4px;
       }
       @else {
-        padding-left: 4px;
-        padding-right: 4px;
+        padding-left: $drop-down-btn-padding-left;
+        padding-right: $drop-down-btn-padding-right;
       }
 
       &:focus,
@@ -151,7 +153,7 @@
 
       &.e-btn:focus-visible { // only for keybord
         @if $skin-name == 'fluent2' {
-          margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+          margin-left: $drop-down-zero-padding-margin !important; /* stylelint-disable-line declaration-no-important */
           box-shadow: $btn-keyboard-focus-box-shadow;
         }
       }
@@ -209,43 +211,34 @@
 
     &.e-rtl {
       .e-split-btn {
-        border-bottom-left-radius: 0;
+        border-bottom-left-radius: $drop-down-zero-border-radius;
         border-bottom-right-radius: $split-btn-border-radius;
-        border-top-left-radius: 0;
+        border-top-left-radius: $drop-down-zero-border-radius;
         border-top-right-radius: $split-btn-border-radius;
         margin-left: $split-btn-sec-btn-margin-left;
         @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           padding-left: $split-btn-icon-btn-padding;
           padding-right: $split-btn-icon-btn-padding;
         }
-        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-          padding-left: 12px;
-          padding-right: 12px;
+        @else {
+          padding-left: $split-rtl-btn-padding-left;
+          padding-right: $split-rtl-btn-padding-right;
         }
         @if $skin-name == 'Material3' {
-          border-radius: 4px;
-        }
-        @else {
-          padding-left: 4px;
-          padding-right: 10px;
+          border-radius: $split-bgr-btn-border-radius;
         }
 
         .e-btn-icon {
-          margin-right: 0;
-          @if $skin-name == 'FluentUI' {
-            padding-left: 4px;
-          }
-          @else {
-            padding-left: 8px;
-          }
-          padding-right: 0;
+          margin-right: $drop-down-zero-padding-margin;
+          padding-left: $split-rtl-btn-icon-padding-left;
+          padding-right: $drop-down-zero-padding-margin;
           @if $skin-name == 'Material3' {
             border-radius: $btn-border-radius;
           }
         }
 
         .e-icon-top {
-          padding-left: 0;
+          padding-left: $drop-down-zero-padding-margin;
         }
 
         &.e-icon-btn {
@@ -253,19 +246,19 @@
           padding-right: $split-btn-icon-btn-padding;
 
           .e-btn-icon {
-            padding-left: 0;
+            padding-left: $drop-down-zero-padding-margin;
           }
         }
       }
 
       .e-dropdown-btn {
         border-bottom-left-radius: $split-btn-border-radius;
-        border-bottom-right-radius: 0;
+        border-bottom-right-radius: $drop-down-zero-border-radius;
         border-top-left-radius: $split-btn-border-radius;
-        border-top-right-radius: 0;
-        margin-left: 0;
+        border-top-right-radius: $drop-down-zero-border-radius;
+        margin-left: $drop-down-zero-padding-margin;
         @if $skin-name == 'Material3' {
-          border-radius: 4px;
+          border-radius: $split-bgr-btn-border-radius;
           box-shadow: none;
         }
       }
@@ -277,65 +270,65 @@
       .e-split-btn,
       .e-dropdown-btn {
         display: block;
-        width: 100%;
+        width: $split-full-width;
       }
 
       .e-split-btn {
-        border-bottom-left-radius: 0;
+        border-bottom-left-radius: $drop-down-zero-border-radius;
         border-top-right-radius: $split-btn-border-radius;
-        line-height: 1;
+        line-height: $split-btn-line-height;
         @if $skin-name == 'bootstrap4'or $skin-name == 'tailwind' {
           padding-bottom: $split-btn-icon-btn-padding;
           padding-right: $split-btn-icon-btn-padding;
         }
+        @else {
+          padding-bottom: $split-btn-vertical-padding-bottom;
+          padding-right: $split-btn-vertical-padding-right;
+        }
         @if $skin-name == 'Material3' {
-          border-radius: 4px;
+          border-radius: $split-bgr-btn-border-radius;
           box-shadow: none;
         }
-        @else {
-          padding-bottom: 4px;
-          padding-right: 10px;
-        }
 
         .e-icon-top {
-          padding-bottom: 4px;
+          padding-bottom: $split-btn-vertical-icon-top-padding;
         }
       }
 
       .e-dropdown-btn {
         border-bottom-left-radius: $split-btn-border-radius;
-        border-top-right-radius: 0;
+        border-top-right-radius: $drop-down-zero-border-radius;
         line-height: $split-btn-vertical-secondary-icon-line-height;
-        margin-left: 0;
+        margin-left: $drop-down-zero-padding-margin;
         margin-top: $split-btn-sec-btn-margin-left;
         @if $skin-name == 'bootstrap4' {
           padding-bottom: $split-btn-icon-btn-padding;
           padding-top: $split-btn-icon-btn-padding;
         }
+        @else {
+          padding-bottom: $drop-down-btn-vertical-padding-bottom;
+          padding-top: $drop-down-btn-vertical-padding-top;
+        }
         @if $skin-name == 'Material3' {
-          border-radius: 4px;
+          border-radius: $split-bgr-btn-border-radius;
           box-shadow: none;
         }
-        @else {
-          padding-bottom: 4px;
-          padding-top: 4px;
-        }
 
         .e-icon-bottom {
-          padding-top: 0;
+          padding-top: $drop-down-zero-padding-margin;
         }
       }
 
       &.e-rtl {
         .e-split-btn {
-          border-bottom-right-radius: 0;
+          border-bottom-right-radius: $drop-down-zero-border-radius;
           border-top-left-radius: $split-btn-border-radius;
-          margin-left: 0;
+          margin-left: $drop-down-zero-padding-margin;
         }
 
         .e-dropdown-btn {
           border-bottom-right-radius: $split-btn-border-radius;
-          border-top-left-radius: 0;
+          border-top-left-radius: $drop-down-zero-border-radius;
         }
       }
     }

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

@@ -1,3 +1,8 @@
+@use 'ej2-base/styles/definition/material-dark' 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;
 $split-btn-border-radius: 2px;
@@ -22,5 +27,47 @@ $split-btn-active-left-border-color: transparent;
 $split-btn-sec-btn-margin-left: 0;
 $split-btn-icon-btn-padding: 6px;
 $split-btn-icon-btn-padding-bigger: 9px;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+$split-btn-bigger-padding-left: 12px !default;
+$split-btn-bigger-padding-right: 6px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: 0 !default;
+$drop-down-bigger-rtl-padding-left: 6px !default;
+$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;
+
+$split-rtl-btn-padding-left: 4px !default;
+$split-rtl-btn-padding-right: 10px !default;
+
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$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;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-full-width: 100% !default;
 
 //enddefault

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/material' 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;
@@ -21,3 +25,45 @@ $split-btn-active-left-border-color: transparent !default;
 $split-btn-sec-btn-margin-left: 0 !default;
 $split-btn-icon-btn-padding: 6px !default;
 $split-btn-icon-btn-padding-bigger: 9px !default;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+$split-btn-bigger-padding-left: 12px !default;
+$split-btn-bigger-padding-right: 6px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: 0 !default;
+$drop-down-bigger-rtl-padding-left: 6px !default;
+$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;
+
+$split-rtl-btn-padding-left: 4px !default;
+$split-rtl-btn-padding-right: 10px !default;
+
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$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;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-full-width: 100% !default;

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

@@ -1 +1,74 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' 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;
+$split-btn-border-radius: 100px !default;
+$split-btn-focus-outline-offset: 0 !default;
+$split-btn-vertical-secondary-icon-line-height: .334em !default;
+$split-btn-seperator-border: 1px solid !default;
+$split-btn-sec-btn-margin-left: -1px !default;
+$split-btn-icon-btn-padding: 10px !default;
+$split-btn-icon-btn-padding-bigger: 12px !default;
+$split-btn-focus-border-color: rgba($border-light) !default;
+$split-btn-focus-vertical-border-color: $secondary-border-color !default;
+$split-btn-seperator-border-color: $splitbtn-right-border !default;
+$split-btn-seperator-default-border-color: $secondary-border-color !default;
+$split-btn-seperator-vertical-border-color: rgba($border-light) !default;
+$split-btn-hover-border-color: $secondary-border-color !default;
+$split-btn-hover-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-border-color: $secondary-bg-color-pressed !default;
+$split-btn-active-vertical-border-color: $secondary-bg-color-pressed !default;
+$split-btn-disabled-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-box-shadow: none !default;
+$split-btn-disabled-left-border-color: $secondary-border-color !default;
+$split-btn-hover-left-border-color: $secondary-border-color !default;
+$split-btn-focus-left-border-color: $secondary-border-color !default;
+$split-btn-active-left-border-color: $secondary-border-color !default;
+$split-btn-seperator-border-color-rtl: $splitbtn-right-border-rtl !default;
+$split-btn-seperator-border-color-vertical: $splitbtn-right-border-vertical !default;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+$split-btn-bigger-padding-left: 12px !default;
+$split-btn-bigger-padding-right: 6px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: $radius-0 !default;
+$drop-down-bigger-rtl-padding-left: 6px !default;
+$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;
+$split-rtl-btn-padding-left: 4px !default;
+$split-rtl-btn-padding-right: 10px !default;
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$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;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-bgr-btn-border-radius: $radius-4 !default;
+$split-wrapper-split-btn-padding: 9px 4px !default;
+$split-nrml-btn-padding: 7px 16px !default;
+$split-nrml-btn-line-height: 1.28572em !default;
+$split-full-width: 100% !default;

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

@@ -1,3 +1,8 @@
+@use 'ej2-base/styles/definition/material3' 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;
 $split-btn-border-radius: 100px !default;
@@ -24,3 +29,46 @@ $split-btn-focus-left-border-color: $secondary-border-color !default;
 $split-btn-active-left-border-color: $secondary-border-color !default;
 $split-btn-seperator-border-color-rtl: $splitbtn-right-border-rtl !default;
 $split-btn-seperator-border-color-vertical: $splitbtn-right-border-vertical !default;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+$split-btn-bigger-padding-left: 12px !default;
+$split-btn-bigger-padding-right: 6px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: $radius-0 !default;
+$drop-down-bigger-rtl-padding-left: 6px !default;
+$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;
+$split-rtl-btn-padding-left: 4px !default;
+$split-rtl-btn-padding-right: 10px !default;
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$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;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-bgr-btn-border-radius: $radius-4 !default;
+$split-wrapper-split-btn-padding: 9px 4px !default;
+$split-nrml-btn-padding: 7px 16px !default;
+$split-nrml-btn-line-height: 1.28572em !default;
+$split-full-width: 100% !default;