@syncfusion/ej2-splitbuttons 26.2.10 → 27.1.48

package/styles/progress-button/_layout.scss

@@ -296,99 +296,4 @@
       }
     }
   }
-
-  #{if(&, '&', '*')}.e-bigger .e-progress-btn,
-  #{if(&, '&', '*')}.e-bigger.e-progress-btn {
-    &.e-progress-active:not(.e-hide-spinner) {
-      &.e-spin-left:not(.e-round) {
-        .e-spinner {
-          padding-right: $progress-btn-spinner-padding-bigger;
-        }
-
-        &.e-rtl {
-          .e-spinner {
-            padding-left: $progress-btn-spinner-padding-bigger;
-            padding-right: 0;
-          }
-        }
-      }
-
-      &.e-spin-right:not(.e-round) {
-        .e-spinner {
-          padding-left: $progress-btn-spinner-padding-bigger;
-        }
-
-        &.e-rtl {
-          .e-spinner {
-            padding-left: 0;
-            padding-right: $progress-btn-spinner-padding-bigger;
-          }
-        }
-      }
-
-      &.e-spin-top {
-        padding-bottom: $progress-btn-bigger-spin-btn-padding;
-        padding-top: $progress-btn-bigger-spin-btn-padding;
-
-        .e-spinner {
-          padding-bottom: $progress-btn-spinner-padding-bigger;
-        }
-      }
-
-      &.e-spin-bottom {
-        padding-bottom: $progress-btn-bigger-spin-btn-padding;
-        padding-top: $progress-btn-bigger-spin-btn-padding;
-
-        .e-spinner {
-          padding-top: $progress-btn-spinner-padding-bigger;
-        }
-      }
-
-      &.e-small {
-        &.e-spin-left:not(.e-round) {
-          .e-spinner {
-            padding-right: $progress-btn-spinner-padding-bigger-small;
-          }
-
-          &.e-rtl {
-            .e-spinner {
-              padding-left: $progress-btn-spinner-padding-bigger-small;
-              padding-right: 0;
-            }
-          }
-        }
-
-        &.e-spin-right:not(.e-round) {
-          .e-spinner {
-            padding-left: $progress-btn-spinner-padding-bigger-small;
-          }
-
-          &.e-rtl {
-            .e-spinner {
-              padding-left: 0;
-              padding-right: $progress-btn-spinner-padding-bigger-small;
-            }
-          }
-        }
-
-        &.e-spin-top {
-          padding-bottom: $progress-btn-bigger-small-spin-btn-padding;
-          padding-top: $progress-btn-bigger-small-spin-btn-padding;
-
-          .e-spinner {
-            padding-bottom: $progress-btn-spinner-padding-bigger-small;
-          }
-        }
-
-        &.e-spin-bottom {
-          padding-bottom: $progress-btn-bigger-small-spin-btn-padding;
-          padding-top: $progress-btn-bigger-small-spin-btn-padding;
-
-          .e-spinner {
-            padding-top: $progress-btn-spinner-padding-bigger-small;
-          }
-        }
-      }
-    }
-  }
 }

package/styles/progress-button/_theme.scss

@@ -58,7 +58,7 @@
           }
 
           .e-path-arc {
-            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
               stroke: $btn-flat-primary-path-arc;
             }
             @else {
@@ -603,7 +603,7 @@
   }
 
   #{if(&, '&', '*')}.e-flat:not(:focus) {
-    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
       &.e-primary {
         .e-progress {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
@@ -714,4 +714,8 @@
       stroke: $info-bg-color;
     }
   }
+
+  .e-progress-btn .e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-circle {
+    stroke: $progress-btn-spinner-color !important; /* stylelint-disable-line declaration-no-important */
+  }
 }

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

@@ -338,79 +338,6 @@
   }
 }
 
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 14px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
-  padding-bottom: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
-  padding-top: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 12px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
-  padding-bottom: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
-  padding-top: 12px;
-}
-
 /*! Progress Button Theme */
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg {
   fill: #fff;
@@ -561,4 +488,77 @@
 
 .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #f0f0f0;
+}
+
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 14px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
+  padding-bottom: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
+  padding-top: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 12px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
+  padding-bottom: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
+  padding-top: 12px;
 }

package/styles/progress-button/bootstrap-dark.scss

@@ -3,3 +3,4 @@
 @import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/progress-button/bootstrap.css

@@ -338,79 +338,6 @@
   }
 }
 
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 14px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
-  padding-bottom: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
-  padding-top: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 12px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
-  padding-bottom: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
-  padding-top: 12px;
-}
-
 /*! Progress Button Theme */
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg {
   fill: #333;
@@ -638,4 +565,77 @@
 
 .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #333;
+}
+
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 14px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
+  padding-bottom: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
+  padding-top: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 12px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
+  padding-bottom: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
+  padding-top: 12px;
 }

package/styles/progress-button/bootstrap.scss

@@ -3,3 +3,4 @@
 @import 'ej2-popups/styles/spinner/bootstrap-definition.scss';
 @import 'bootstrap-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/progress-button/bootstrap4.css

@@ -338,79 +338,6 @@
   }
 }
 
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 14px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
-  padding-bottom: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
-  padding-top: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 12px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
-  padding-bottom: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
-  padding-top: 12px;
-}
-
 /*! Progress Button Theme */
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg {
   fill: #fff;
@@ -641,4 +568,77 @@
 
 .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #6c757d;
+}
+
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 14px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
+  padding-bottom: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
+  padding-top: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 12px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
+  padding-bottom: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
+  padding-top: 12px;
 }

package/styles/progress-button/bootstrap4.scss

@@ -3,3 +3,4 @@
 @import 'ej2-popups/styles/spinner/bootstrap4-definition.scss';
 @import 'bootstrap4-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';