@syncfusion/ej2-splitbuttons 19.2.62 → 19.3.47

package/styles/material-dark.css

@@ -278,7 +278,7 @@
 
 .e-split-btn-wrapper .e-split-btn:active {
   box-shadow: none;
-  z-index: 2;
+  z-index: 0;
 }
 
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -944,7 +944,7 @@
 .e-btn-group input:focus + label.e-btn.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
-  background-color: #c26182;
+  background-color: #0086c2;
   border-color: transparent;
   color: #000;
   outline: #616161 0 solid;
@@ -1018,9 +1018,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
-  background-color: rgba(255, 255, 255, 0.24);
-  border-color: transparent;
-  color: #fff;
   box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.26);
   box-shadow: none;
 }
@@ -1029,9 +1026,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  background-color: #c26182;
-  border-color: transparent;
-  color: #000;
   box-shadow: none;
 }
 
@@ -1039,9 +1033,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  background-color: #77c27a;
-  border-color: transparent;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1049,9 +1040,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  background-color: #17b0f5;
-  border-color: transparent;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1059,9 +1047,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  background-color: #ffa014;
-  border-color: transparent;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1069,9 +1054,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  background-color: #ff7260;
-  border-color: transparent;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1087,7 +1069,6 @@
   outline: #616161 0 solid;
   outline-offset: 0;
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-primary,
@@ -1096,12 +1077,11 @@
 .e-css.e-btn-group .e-btn:active.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
-  background-color: #ad5774;
+  background-color: #0078ad;
   border-color: transparent;
   color: #000;
   outline: #616161 0 solid;
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-success,
@@ -1114,7 +1094,6 @@
   border-color: transparent;
   color: #fff;
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-info,
@@ -1124,10 +1103,9 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #54c5f8;
-  border-color: transparent;
   color: #fff;
+  border-color: transparent;
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-warning,
@@ -1140,7 +1118,6 @@
   border-color: transparent;
   color: #fff;
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-danger,
@@ -1153,7 +1130,6 @@
   border-color: transparent;
   color: #fff;
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline,
@@ -1166,7 +1142,6 @@
   border-color: #616161;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -1175,11 +1150,10 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
-  background-color: #ad5774;
+  background-color: #0078ad;
   border-color: transparent;
   box-shadow: none;
   color: #000;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-success,
@@ -1192,7 +1166,6 @@
   border-color: transparent;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-info,
@@ -1205,7 +1178,6 @@
   border-color: transparent;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -1218,7 +1190,6 @@
   border-color: transparent;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -1231,7 +1202,6 @@
   border-color: transparent;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:disabled,
@@ -1330,7 +1300,7 @@
   border-color: rgba(97, 97, 97, 0.3);
   box-shadow: none;
   color: rgba(255, 255, 255, 0.3);
-  border-color: #ff80ab;
+  border-color: #00b0ff;
 }
 
 .e-btn-group .e-btn:disabled.e-outline.e-success,
@@ -1918,16 +1888,16 @@
 }
 
 .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
-  fill: #ff80ab;
-  stroke: #ff80ab;
+  fill: #00b0ff;
+  stroke: #00b0ff;
 }
 
 .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: #ff80ab;
+  stroke: #00b0ff;
 }
 
 .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: #ff80ab;
+  stroke: #00b0ff;
 }
 
 .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 {
@@ -2035,16 +2005,16 @@
 }
 
 .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg {
-  fill: #ff80ab;
-  stroke: #ff80ab;
+  fill: #00b0ff;
+  stroke: #00b0ff;
 }
 
 .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: #ff80ab;
+  stroke: #00b0ff;
 }
 
 .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #ff80ab;
+  stroke: #00b0ff;
 }
 
 .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg {
@@ -2148,7 +2118,7 @@
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {
-  background-color: rgba(255, 128, 171, 0.2);
+  background-color: rgba(0, 176, 255, 0.2);
 }
 
 *.e-outline:not(:focus).e-success .e-progress {

package/styles/material.css

@@ -278,7 +278,7 @@
 
 .e-split-btn-wrapper .e-split-btn:active {
   box-shadow: none;
-  z-index: 2;
+  z-index: 0;
 }
 
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -1020,9 +1020,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
-  background-color: rgba(0, 0, 0, 0.24);
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   box-shadow: none;
 }
@@ -1031,9 +1028,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  background-color: #ea4e82;
-  border-color: transparent;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1041,9 +1035,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  background-color: #78a253;
-  border-color: transparent;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1051,9 +1042,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  background-color: #2188da;
-  border-color: transparent;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1061,9 +1049,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  background-color: #c86b1f;
-  border-color: transparent;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1071,9 +1056,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  background-color: #db582f;
-  border-color: transparent;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1089,7 +1071,6 @@
   outline: #fafafa 0 solid;
   outline-offset: 0;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-primary,
@@ -1103,7 +1084,6 @@
   color: #fff;
   outline: #fafafa 0 solid;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-success,
@@ -1116,7 +1096,6 @@
   border-color: transparent;
   color: #fff;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-info,
@@ -1126,10 +1105,9 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #54a3e2;
-  border-color: transparent;
   color: #fff;
+  border-color: transparent;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-warning,
@@ -1142,7 +1120,6 @@
   border-color: transparent;
   color: #fff;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-danger,
@@ -1155,7 +1132,6 @@
   border-color: transparent;
   color: #fff;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline,
@@ -1168,7 +1144,6 @@
   border-color: #adadad;
   box-shadow: none;
   color: rgba(0, 0, 0, 0.87);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -1181,7 +1156,6 @@
   border-color: transparent;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-success,
@@ -1194,7 +1168,6 @@
   border-color: transparent;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-info,
@@ -1207,7 +1180,6 @@
   border-color: transparent;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -1220,7 +1192,6 @@
   border-color: transparent;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -1233,7 +1204,6 @@
   border-color: transparent;
   box-shadow: none;
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:disabled,

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

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

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

@@ -0,0 +1,21 @@
+//layout variables
+$progress-btn-circle-opacity: .3 !default;
+$progress-btn-transition: all .3s linear !default;
+$progress-btn-spinner-padding: 12px !default;
+$progress-btn-spinner-padding-small: 10px !default;
+$progress-btn-spinner-padding-bigger: 14px !default;
+$progress-btn-spinner-padding-bigger-small: 12px !default;
+$progress-btn-spin-btn-padding: 16px !default;
+$progress-btn-small-spin-btn-padding: 14px !default;
+$progress-btn-bigger-spin-btn-padding: 20px !default;
+$progress-btn-bigger-small-spin-btn-padding: 16px !default;
+$progress-btn-color: $secondary-text-color !default;
+$progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
+$progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
+$progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
+$progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
+$progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
+$progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
+$progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
+$btn-flat-primary-path-arc: $white;

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

@@ -1,24 +1 @@
-$progress-btn-color: $secondary-text-color !default;
-$progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
-$progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
-$progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
-$progress-btn-circle-opacity: .8 !default;
-
-$progress-btn-transition: all .3s linear !default;
-
-$progress-btn-spinner-padding: 12px !default;
-$progress-btn-spinner-padding-small: 10px !default;
-$progress-btn-spinner-padding-bigger: 14px !default;
-$progress-btn-spinner-padding-bigger-small: 12px !default;
-
-$progress-btn-spin-btn-padding: 16px !default;
-$progress-btn-small-spin-btn-padding: 14px !default;
-$progress-btn-bigger-spin-btn-padding: 20px !default;
-$progress-btn-bigger-small-spin-btn-padding: 16px !default;
-
-$progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
-$progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
-$progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
-$progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
-$progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
-$btn-flat-primary-path-arc: #000;
+@import './tailwind-definition.scss';

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

@@ -1,24 +1,21 @@
-$progress-btn-color: $secondary-text-color !default;
-$progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
-$progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
-$progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
+//layout variables
 $progress-btn-circle-opacity: .8 !default;
-
 $progress-btn-transition: all .3s linear !default;
-
 $progress-btn-spinner-padding: 12px !default;
 $progress-btn-spinner-padding-small: 10px !default;
 $progress-btn-spinner-padding-bigger: 14px !default;
 $progress-btn-spinner-padding-bigger-small: 12px !default;
-
 $progress-btn-spin-btn-padding: 16px !default;
 $progress-btn-small-spin-btn-padding: 14px !default;
 $progress-btn-bigger-spin-btn-padding: 20px !default;
 $progress-btn-bigger-small-spin-btn-padding: 16px !default;
-
+$progress-btn-color: $secondary-text-color !default;
+$progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
+$progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
 $progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
 $progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
 $progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
 $progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
 $progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
-$btn-flat-primary-path-arc: #fff;
+$btn-flat-primary-path-arc: $white;

package/styles/progress-button/_theme.scss

@@ -45,7 +45,7 @@
           stroke: $btn-flat-primary-color;
 
           .e-path-circle {
-            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' {
               stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
             }
             @else {
@@ -54,7 +54,7 @@
           }
 
           .e-path-arc {
-            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' {
               stroke: $btn-flat-primary-path-arc;
             }
             @else {