@syncfusion/ej2-splitbuttons 19.2.62 → 19.3.47

package/styles/progress-button/tailwind-dark.css

@@ -403,11 +403,11 @@
 }
 
 .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(0, 0, 0, 0.2);
+  stroke: rgba(255, 255, 255, 0.2);
 }
 
 .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #000;
+  stroke: #fff;
 }
 
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
@@ -429,11 +429,11 @@
 }
 
 .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(0, 0, 0, 0.2);
+  stroke: rgba(255, 255, 255, 0.2);
 }
 
 .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #000;
+  stroke: #fff;
 }
 
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
@@ -455,11 +455,11 @@
 }
 
 .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(0, 0, 0, 0.2);
+  stroke: rgba(255, 255, 255, 0.2);
 }
 
 .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #000;
+  stroke: #fff;
 }
 
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
@@ -481,11 +481,11 @@
 }
 
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(0, 0, 0, 0.2);
+  stroke: rgba(255, 255, 255, 0.2);
 }
 
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #000;
+  stroke: #fff;
 }
 
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
@@ -507,11 +507,11 @@
 }
 
 .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(0, 0, 0, 0.2);
+  stroke: rgba(255, 255, 255, 0.2);
 }
 
 .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #000;
+  stroke: #fff;
 }
 
 .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg {

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

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

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

@@ -0,0 +1,25 @@
+//layout variables
+$split-btn-zindex: 2 !default;
+$split-btn-border-radius: 4px !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: $secondary-border-color !default;
+$split-btn-focus-vertical-border-color: $secondary-border-color !default;
+$split-btn-seperator-border-color: $secondary-border-color !default;
+$split-btn-seperator-default-border-color: $secondary-border-color !default;
+$split-btn-seperator-vertical-border-color: $secondary-border-color !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: $secondary-shadow-focus !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;
+

package/styles/split-button/_layout.scss

@@ -28,15 +28,15 @@
       }
 
       &:hover {
-        @if $skin-name != 'bootstrap4' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
           box-shadow: none;
         }
       }
 
       &:focus {
-        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
           box-shadow: $split-btn-active-box-shadow;
-          z-index: 2;
+          z-index: $split-btn-zindex;
         }
         @else {
           box-shadow: none;
@@ -45,7 +45,7 @@
 
       &:active {
         box-shadow: $split-btn-active-box-shadow;
-        z-index: 2;
+        z-index: $split-btn-zindex;
       }
 
       &.e-top-icon-btn {
@@ -87,13 +87,13 @@
         padding-left: 4px;
         padding-right: 4px;
       }
-      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
         z-index: 1;
       }
 
       &:focus,
       &:hover {
-        @if $skin-name != 'bootstrap4' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
           box-shadow: none;
         }
       }
@@ -117,19 +117,20 @@
     }
 
     .e-btn {
-      @if $skin-name != 'bootstrap4' {
+      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
         box-shadow: none;
       }
 
       &:hover {
-        @if $skin-name != 'bootstrap4' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
           box-shadow: none;
         }
       }
 
       &:focus {
-        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
           box-shadow: $split-btn-active-box-shadow;
+          z-index: $split-btn-zindex;
         }
         @else {
           box-shadow: none;
@@ -138,6 +139,9 @@
 
       &:active {
         box-shadow: $split-btn-active-box-shadow;
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+          z-index: $split-btn-zindex;
+        }
       }
 
       &:disabled {

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

@@ -1,23 +1 @@
-$split-btn-zindex: 2 !default;
-$split-btn-border-radius: 4px !default;
-$split-btn-focus-border-color: $secondary-border-color !default;
-$split-btn-focus-vertical-border-color: $secondary-border-color !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-seperator-border-color: $secondary-border-color !default;
-$split-btn-seperator-default-border-color: $secondary-border-color !default;
-$split-btn-seperator-vertical-border-color: $secondary-border-color !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: $shadow-focus-ring2 !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-sec-btn-margin-left: -1px !default;
-$split-btn-icon-btn-padding: 10px !default;
-$split-btn-icon-btn-padding-bigger: 12px !default;
+@import './tailwind-definition.scss';

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

@@ -1,10 +1,14 @@
+//layout variables
 $split-btn-zindex: 2 !default;
 $split-btn-border-radius: 4px !default;
-$split-btn-focus-border-color: $secondary-border-color !default;
-$split-btn-focus-vertical-border-color: $secondary-border-color !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: $secondary-border-color !default;
+$split-btn-focus-vertical-border-color: $secondary-border-color !default;
 $split-btn-seperator-border-color: $secondary-border-color !default;
 $split-btn-seperator-default-border-color: $secondary-border-color !default;
 $split-btn-seperator-vertical-border-color: $secondary-border-color !default;
@@ -18,6 +22,4 @@ $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-sec-btn-margin-left: -1px !default;
-$split-btn-icon-btn-padding: 10px !default;
-$split-btn-icon-btn-padding-bigger: 12px !default;
+

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

@@ -0,0 +1,367 @@
+/*! splitbutton layout */
+.e-split-btn-wrapper {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  white-space: nowrap;
+  width: min-content;
+}
+
+.e-split-btn-wrapper .e-split-btn {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  text-transform: none;
+  z-index: 1;
+  padding-left: 10px;
+  padding-right: 4px;
+}
+
+.e-split-btn-wrapper .e-split-btn:focus {
+  outline-offset: 0;
+}
+
+.e-split-btn-wrapper .e-split-btn:focus {
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  z-index: 2;
+}
+
+.e-split-btn-wrapper .e-split-btn:active {
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  z-index: 2;
+}
+
+.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+.e-split-btn-wrapper .e-split-btn .e-btn-icon {
+  font-size: 14px;
+  margin-left: 0;
+  padding-right: 8px;
+  width: auto;
+}
+
+.e-split-btn-wrapper .e-split-btn .e-icon-top {
+  padding-bottom: 4px;
+  padding-right: 0;
+}
+
+.e-split-btn-wrapper .e-split-btn.e-icon-btn {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
+  padding-right: 0;
+}
+
+.e-split-btn-wrapper .e-dropdown-btn {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  margin-left: -1px;
+  padding-left: 4px;
+  padding-right: 4px;
+  z-index: 1;
+}
+
+.e-split-btn-wrapper .e-dropdown-btn:active {
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  z-index: 2;
+}
+
+.e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
+  z-index: 0;
+}
+
+.e-split-btn-wrapper .e-dropdown-btn:focus {
+  outline-offset: 0;
+}
+
+.e-split-btn-wrapper .e-btn:focus {
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  z-index: 2;
+}
+
+.e-split-btn-wrapper .e-btn:active {
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  z-index: 2;
+}
+
+.e-split-btn-wrapper .e-btn:disabled {
+  box-shadow: none;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+  margin-left: -1px;
+  padding-left: 4px;
+  padding-right: 10px;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
+  margin-right: 0;
+  padding-left: 8px;
+  padding-right: 0;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
+  padding-left: 0;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
+  padding-left: 0;
+}
+
+.e-split-btn-wrapper.e-rtl .e-dropdown-btn {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 0;
+  margin-left: 0;
+}
+
+.e-split-btn-wrapper.e-vertical {
+  display: inline-block;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn,
+.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
+  display: block;
+  width: 100%;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn {
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 4px;
+  line-height: 1;
+  padding-bottom: 4px;
+  padding-right: 10px;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
+  padding-bottom: 4px;
+}
+
+.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
+  border-bottom-left-radius: 4px;
+  border-top-right-radius: 0;
+  line-height: 0.334em;
+  margin-left: 0;
+  margin-top: -1px;
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+.e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
+  padding-top: 0;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 4px;
+  margin-left: 0;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-dropdown-btn {
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn,
+.e-bigger.e-split-btn-wrapper .e-split-btn {
+  padding-left: 12px;
+  padding-right: 6px;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
+.e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
+  padding-bottom: 12px;
+  padding-top: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
+.e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
+  font-size: 16px;
+  margin-left: 0;
+  padding-right: 10px;
+  width: auto;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn .e-icon-top,
+.e-bigger.e-split-btn-wrapper .e-split-btn .e-icon-top {
+  padding-bottom: 6px;
+  padding-right: 0;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn,
+.e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon,
+.e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
+  padding-right: 0;
+}
+
+.e-bigger .e-split-btn-wrapper .e-dropdown-btn,
+.e-bigger.e-split-btn-wrapper .e-dropdown-btn {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {
+  padding-left: 6px;
+  padding-right: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
+  padding-left: 10px;
+  padding-right: 0;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
+  padding-left: 0;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
+  padding-left: 0;
+}
+
+.e-bigger .e-split-btn-wrapper.e-vertical .e-split-btn,
+.e-bigger.e-split-btn-wrapper.e-vertical .e-split-btn {
+  padding-bottom: 6px;
+  padding-right: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn,
+.e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom,
+.e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
+  padding-top: 0;
+}
+
+/*! splitbutton theme */
+.e-split-btn-wrapper .e-split-btn {
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper .e-split-btn:focus {
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper .e-split-btn:active {
+  border-right-color: #565e64;
+}
+
+.e-split-btn-wrapper .e-split-btn:disabled {
+  border-right-color: rgba(108, 117, 125, 0.65);
+}
+
+.e-split-btn-wrapper:hover :not(e-active) .e-split-btn {
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper:hover :not(e-active) .e-split-btn:disabled {
+  border-right-color: rgba(108, 117, 125, 0.65);
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn {
+  border-left-color: #6c757d;
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn:focus {
+  border-left-color: #6c757d;
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn:active {
+  border-left-color: #565e64;
+  border-right-color: #565e64;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn:disabled {
+  border-left-color: rgba(108, 117, 125, 0.65);
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active) {
+  border-left-color: #6c757d;
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active):disabled {
+  border-left-color: rgba(108, 117, 125, 0.65);
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn {
+  border-bottom-color: #6c757d;
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn:focus {
+  border-bottom-color: #6c757d;
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn:active {
+  border-bottom-color: #565e64;
+  border-right-color: #565e64;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn:disabled {
+  border-bottom-color: rgba(108, 117, 125, 0.65);
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-vertical:hover .e-split-btn {
+  border-bottom-color: #6c757d;
+  border-right-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
+  border-bottom-color: rgba(108, 117, 125, 0.65);
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
+  border-left-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:focus {
+  border-left-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:active {
+  border-left-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:disabled {
+  border-left-color: #6c757d;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl:hover .e-split-btn {
+  border-left-color: #6c757d;
+}

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

@@ -0,0 +1,6 @@
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
+@import './../drop-down-button/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'all.scss';