@syncfusion/ej2-splitbuttons 21.2.5 → 22.1.34

package/styles/split-button/_layout.scss

@@ -5,6 +5,10 @@
     display: inline-flex;
     white-space: nowrap;
     width: min-content;
+    @if $skin-name == 'Material3' {
+      border-radius: 4px;
+      box-shadow: $btn-box-shadow;
+    }
 
     .e-split-btn {
       border-bottom-right-radius: 0;
@@ -22,6 +26,9 @@
       @else if $skin-name == 'FluentUI' {
         padding: 3px 7px;
       }
+      @if $skin-name == 'Material3' {
+        box-shadow: none;
+      }
       @else {
         padding-left: 10px;
         padding-right: 10px;
@@ -47,6 +54,12 @@
         }
       }
 
+      &:focus-visible { // only for keybord
+        @if $skin-name == 'Material3' {
+          box-shadow: $btn-keyboard-focus-box-shadow;
+        }
+      }
+
       &:active {
         box-shadow: $split-btn-active-box-shadow;
         z-index: $split-btn-zindex;
@@ -67,6 +80,9 @@
           padding-right: 8px;
         }
         width: auto;
+        @if $skin-name == 'Material3' {
+          border-radius: $btn-border-radius;
+        }
       }
 
       .e-icon-top {
@@ -88,6 +104,9 @@
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
       margin-left: $split-btn-sec-btn-margin-left;
+      @if $skin-name == 'Material3' {
+        box-shadow: none;
+      }
       @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
         padding-left: $split-btn-icon-btn-padding;
         padding-right: $split-btn-icon-btn-padding;
@@ -105,7 +124,7 @@
 
       &:focus,
       &:hover {
-        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' and $theme-name != 'Material3' {
           box-shadow: none;
         }
       }
@@ -129,7 +148,7 @@
     }
 
     .e-btn {
-      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
+      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' and $theme-name != 'Material3' {
         box-shadow: none;
       }
 
@@ -149,6 +168,12 @@
         }
       }
 
+      &:focus-visible { // only for keybord
+        @if $skin-name == 'Material3' {
+          box-shadow: $btn-keyboard-focus-box-shadow;
+        }
+      }
+
       &:active {
         box-shadow: $split-btn-active-box-shadow;
         @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
@@ -187,6 +212,9 @@
           padding-left: 12px;
           padding-right: 12px;
         }
+        @if $skin-name == 'Material3' {
+          border-radius: 4px;
+        }
         @else {
           padding-left: 4px;
           padding-right: 10px;
@@ -201,6 +229,9 @@
             padding-left: 8px;
           }
           padding-right: 0;
+          @if $skin-name == 'Material3' {
+            border-radius: $btn-border-radius;
+          }
         }
 
         .e-icon-top {
@@ -223,6 +254,10 @@
         border-top-left-radius: $split-btn-border-radius;
         border-top-right-radius: 0;
         margin-left: 0;
+        @if $skin-name == 'Material3' {
+          border-radius: 4px;
+          box-shadow: none;
+        }
         @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
           z-index: 1;
         }
@@ -246,6 +281,10 @@
           padding-bottom: $split-btn-icon-btn-padding;
           padding-right: $split-btn-icon-btn-padding;
         }
+        @if $skin-name == 'Material3' {
+          border-radius: 4px;
+          box-shadow: none;
+        }
         @else {
           padding-bottom: 4px;
           padding-right: 10px;
@@ -266,6 +305,10 @@
           padding-bottom: $split-btn-icon-btn-padding;
           padding-top: $split-btn-icon-btn-padding;
         }
+        @if $skin-name == 'Material3' {
+          border-radius: 4px;
+          box-shadow: none;
+        }
         @else {
           padding-bottom: 4px;
           padding-top: 4px;
@@ -293,7 +336,15 @@
 
   .e-bigger .e-split-btn-wrapper,
   .e-bigger.e-split-btn-wrapper {
+    @if $skin-name == 'Material3' {
+      border-radius: 4px;
+      box-shadow: $btn-box-shadow;
+    }
     .e-split-btn {
+      @if $skin-name == 'Material3' {
+        border-radius: 4px;
+        box-shadow: none;
+      }
       @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
         padding-left: $split-btn-icon-btn-padding-bigger;
         padding-right: $split-btn-icon-btn-padding-bigger;
@@ -322,6 +373,9 @@
           padding-right: 10px;
         }
         width: auto;
+        @if $skin-name == 'Material3' {
+          border-radius: 4px;
+        }
       }
 
       .e-icon-top {
@@ -376,6 +430,9 @@
             padding-left: 10px;
           }
           padding-right: 0;
+          @if $skin-name == 'Material3' {
+            border-radius: 4px;
+          }
         }
 
         .e-icon-top {

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

@@ -0,0 +1 @@
+@import './material3-definition.scss';

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

@@ -0,0 +1,26 @@
+//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;

package/styles/split-button/_theme.scss

@@ -3,7 +3,13 @@
   /*! splitbutton theme */
   .e-split-btn-wrapper {
     .e-split-btn {
-      border-right-color: $split-btn-seperator-border-color;
+      @if $skin-name == 'Material3' {
+        border-image: $split-btn-seperator-border-color;
+        border-width: 0 1px 0 0;
+      }
+      @else {
+        border-right-color: $split-btn-seperator-border-color;
+      }
 
       &:focus {
         border-right-color: $split-btn-focus-border-color;
@@ -22,6 +28,12 @@
       }
     }
 
+    &.e-splitbtn-disabled {
+      @if $skin-name == 'Material3' {
+        box-shadow: none;
+      }
+    }
+
     &:hover :not(e-active) {
       & .e-split-btn {
         border-right-color: $split-btn-hover-border-color;
@@ -37,6 +49,10 @@
         @if $skin-name == 'material' or $skin-name == 'fabric' {
           border-color: transparent;
         }
+        @else if $skin-name == 'Material3' {
+          border-image: $split-btn-seperator-border-color-rtl;
+          border-width: 0 0 0 1px;
+        }
         @else {
           border-left-color: $split-btn-seperator-border-color;
           border-right-color: $split-btn-seperator-default-border-color;
@@ -86,6 +102,10 @@
 
     &.e-vertical {
       .e-split-btn {
+        @if $skin-name == 'Material3' {
+          border-image: $split-btn-seperator-border-color-vertical;
+          border-width: 0 0 2px;
+        }
         border-bottom-color: $split-btn-seperator-vertical-border-color;
         border-right-color: $split-btn-seperator-default-border-color;
 

package/styles/split-button/bootstrap4.css

@@ -12,6 +12,8 @@
   z-index: 1;
   padding-left: 8px;
   padding-right: 8px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   outline-offset: 0;
@@ -81,6 +83,8 @@
   margin-left: -1px;
   padding-left: 8px;
   padding-right: 8px;
+  padding-left: 4px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
   margin-right: 0;
@@ -118,6 +122,8 @@
   line-height: 1;
   padding-bottom: 8px;
   padding-right: 8px;
+  padding-bottom: 4px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
   padding-bottom: 4px;
@@ -130,6 +136,8 @@
   margin-top: -1px;
   padding-bottom: 8px;
   padding-top: 8px;
+  padding-bottom: 4px;
+  padding-top: 4px;
 }
 .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
   padding-top: 0;

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

@@ -12,6 +12,8 @@
   text-transform: none;
   z-index: 1;
   padding: 3px 7px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   outline-offset: -3px;
@@ -82,6 +84,8 @@
   margin-left: -1px;
   padding-left: 8px;
   padding-right: 8px;
+  padding-left: 4px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
   margin-right: 0;

package/styles/split-button/fluent.css

@@ -12,6 +12,8 @@
   text-transform: none;
   z-index: 1;
   padding: 3px 7px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   outline-offset: -3px;
@@ -82,6 +84,8 @@
   margin-left: -1px;
   padding-left: 8px;
   padding-right: 8px;
+  padding-left: 4px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
   margin-right: 0;