@syncfusion/ej2-vue-splitbuttons 19.2.55 → 19.3.44

package/styles/split-button/bootstrap5.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.scss

@@ -0,0 +1 @@
+@import 'ej2-splitbuttons/styles/split-button/bootstrap5.scss';

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

@@ -30,7 +30,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 {

package/styles/split-button/material.css

@@ -30,7 +30,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 {

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

@@ -96,10 +96,12 @@
 
 .e-split-btn-wrapper .e-btn:focus {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
+  z-index: 2;
 }
 
 .e-split-btn-wrapper .e-btn:active {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
+  z-index: 2;
 }
 
 .e-split-btn-wrapper .e-btn:disabled {

package/styles/split-button/tailwind.css

@@ -96,10 +96,12 @@
 
 .e-split-btn-wrapper .e-btn:focus {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
+  z-index: 2;
 }
 
 .e-split-btn-wrapper .e-btn:active {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
+  z-index: 2;
 }
 
 .e-split-btn-wrapper .e-btn:disabled {

package/styles/tailwind-dark.css

@@ -177,6 +177,10 @@
   margin-right: 0;
 }
 
+*.e-bigger .e-dropdown-popup {
+  background-color: transparent;
+}
+
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -184,6 +188,7 @@
   max-width: 202px;
   min-width: 112px;
   padding: 8px 0;
+  background-color: #374151;
   margin-top: 4px;
 }
 
@@ -349,10 +354,12 @@
 
 .e-split-btn-wrapper .e-btn:focus {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
+  z-index: 2;
 }
 
 .e-split-btn-wrapper .e-btn:active {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
+  z-index: 2;
 }
 
 .e-split-btn-wrapper .e-btn:disabled {
@@ -1019,9 +1026,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: #374151;
-  border-color: #6b7280;
-  color: #fff;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
   box-shadow: none;
 }
@@ -1030,9 +1034,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: #22d3ee;
-  border-color: #22d3ee;
-  color: #fff;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
   box-shadow: none;
 }
@@ -1041,9 +1042,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: #16a34a;
-  border-color: #22c55e;
-  color: #000;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
   box-shadow: none;
 }
@@ -1052,9 +1050,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: #0284c7;
-  border-color: #0ea5e9;
-  color: #000;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
   box-shadow: none;
 }
@@ -1063,9 +1058,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: #c2410c;
-  border-color: #ea580c;
-  color: #000;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
   box-shadow: none;
 }
@@ -1074,9 +1066,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: #ef4444;
-  border-color: #f87171;
-  color: #000;
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
   box-shadow: none;
 }
@@ -1093,7 +1082,6 @@
   outline: #1f2937 0 solid;
   outline-offset: 0;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-primary,
@@ -1107,7 +1095,6 @@
   color: #000;
   outline: #1f2937 0 solid;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-success,
@@ -1120,7 +1107,6 @@
   border-color: #4ade80;
   color: #000;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-info,
@@ -1130,10 +1116,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: #38bdf8;
-  border-color: #38bdf8;
   color: #000;
+  border-color: #38bdf8;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-warning,
@@ -1146,7 +1131,6 @@
   border-color: #f97316;
   color: #000;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-danger,
@@ -1159,7 +1143,6 @@
   border-color: #dc2626;
   color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline,
@@ -1172,7 +1155,6 @@
   border-color: #6b7280;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -1185,7 +1167,6 @@
   border-color: #22d3ee;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #000;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-success,
@@ -1198,7 +1179,6 @@
   border-color: #4ade80;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #000;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-info,
@@ -1211,7 +1191,6 @@
   border-color: #38bdf8;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #000;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -1224,7 +1203,6 @@
   border-color: #f97316;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #000;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -1237,7 +1215,6 @@
   border-color: #dc2626;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:disabled,
@@ -1914,11 +1891,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 {
@@ -1940,11 +1917,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 {
@@ -1966,11 +1943,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 {
@@ -1992,11 +1969,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 {
@@ -2018,11 +1995,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 {