@syncfusion/ej2-splitbuttons 31.2.12 → 32.1.22

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

@@ -1,9 +1,19 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
+@forward 'ej2-buttons/styles/button/bootstrap-definition';
 $progress-btn-color: $grey-light-font !default;
 $progress-btn-bgcolor: rgba($grey-white, .3) !default;
 $progress-btn-bgcolor-normal: rgba($grey-base, .2) !default;
 $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
 $progress-btn-circle-opacity: 1 !default;
 
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+
 $progress-btn-transition: all .3s linear !default;
 
 $progress-btn-spinner-padding: 12px !default;
@@ -22,3 +32,12 @@ $progress-btn-flat-info-progress-color: #fff !default;
 $progress-btn-flat-warning-progress-color: #fff !default;
 $progress-btn-flat-danger-progress-color: #fff !default;
 $btn-flat-primary-path-arc: none;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1,9 +1,19 @@
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
+@forward 'ej2-buttons/styles/button/bootstrap4-definition';
 $progress-btn-color: $white !default;
 $progress-btn-bgcolor: rgba($white, .25) !default;
 $progress-btn-bgcolor-normal: rgba($white, .25) !default;
 $progress-btn-warning-progress-color: rgba($gray-900, .25) !default;
 $progress-btn-circle-opacity: 0 !default;
 
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+
 $progress-btn-transition: all .3s linear !default;
 
 $progress-btn-spinner-padding: 12px !default;
@@ -22,3 +32,12 @@ $progress-btn-flat-info-progress-color: $white !default;
 $progress-btn-flat-warning-progress-color: $gray-900 !default;
 $progress-btn-flat-danger-progress-color: $white !default;
 $btn-flat-primary-path-arc: none;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1 +1,39 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+@forward 'ej2-buttons/styles/button/bootstrap5-dark-definition';
+$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($icon-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($white, .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;
+
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+@forward 'ej2-buttons/styles/button/bootstrap5-definition';
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;
@@ -18,3 +22,18 @@ $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;
+
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-buttons/styles/button/bootstrap5.3-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
+@forward 'ej2-buttons/styles/button/bootstrap5.3-definition';
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;
@@ -9,12 +13,18 @@ $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($icon-color, .2) !default;
-$progress-btn-bgcolor-normal: rgba($white, .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;
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: $radius-5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-buttons/styles/button/fabric-dark-definition' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
+@forward 'ej2-buttons/styles/button/fabric-dark-definition';
 $progress-btn-color: $neutral-light-font !default;
 $progress-btn-bgcolor: rgba($neutral-light-font, .2) !default;
 $progress-btn-bgcolor-normal: rgba($neutral-light-font, .2) !default;
@@ -22,3 +26,17 @@ $progress-btn-flat-info-progress-color: #0378d5 !default;
 $progress-btn-flat-warning-progress-color: #c15700 !default;
 $progress-btn-flat-danger-progress-color: #d64113 !default;
 $btn-flat-primary-path-arc: none;
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-buttons/styles/button/fabric-definition' as *;
+@forward 'ej2-base/styles/definition/fabric';
+@forward 'ej2-buttons/styles/button/fabric-definition';
 $progress-btn-color: $neutral-light-font !default;
 $progress-btn-bgcolor: rgba($neutral-black, .2) !default;
 $progress-btn-bgcolor-normal: rgba($neutral-black, .2) !default;
@@ -22,3 +26,17 @@ $progress-btn-flat-info-progress-color: $neutral-black !default;
 $progress-btn-flat-warning-progress-color: $neutral-black !default;
 $progress-btn-flat-danger-progress-color: $neutral-black !default;
 $btn-flat-primary-path-arc: none;
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1 +1,38 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'ej2-buttons/styles/button/fluent-dark-definition' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+@forward 'ej2-buttons/styles/button/fluent-dark-definition';
+$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($icon-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($icon-color, .5) !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;
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'ej2-buttons/styles/button/fluent-definition' as *;
+@forward 'ej2-base/styles/definition/fluent';
+@forward 'ej2-buttons/styles/button/fluent-definition';
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;
@@ -18,3 +22,17 @@ $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;
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'ej2-buttons/styles/button/fluent2-definition' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+@forward 'ej2-buttons/styles/button/fluent2-definition';
 $progress-btn-circle-opacity: .8 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;
@@ -19,3 +23,17 @@ $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;
 $fade-out: none !default;
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: $radius-5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -18,3 +18,17 @@ $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;
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/button/highcontrast-definition' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
+@forward 'ej2-buttons/styles/button/highcontrast-definition';
 $progress-btn-color: $content-font !default;
 $progress-btn-bgcolor: rgba($bg-base-0, .3) !default;
 $progress-btn-bgcolor-normal: rgba($bg-base-100, .3) !default;
@@ -22,3 +26,17 @@ $progress-btn-flat-info-progress-color: $bg-base-0 !default;
 $progress-btn-flat-warning-progress-color: $bg-base-0 !default;
 $progress-btn-flat-danger-progress-color: $bg-base-0 !default;
 $btn-flat-primary-path-arc: none;
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

package/styles/progress-button/_highcontrast-light-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+@forward 'ej2-buttons/styles/button/highcontrast-light-definition';
 $progress-btn-color: $content-font !default;
 $progress-btn-bgcolor: rgba($bg-base-0, .3) !default;
 $progress-btn-bgcolor-normal: rgba($bg-base-100, .3) !default;
@@ -22,3 +26,17 @@ $progress-btn-flat-info-progress-color: #0378d5 !default;
 $progress-btn-flat-warning-progress-color: #c15700 !default;
 $progress-btn-flat-danger-progress-color: #d64113 !default;
 $btn-flat-primary-path-arc: none;
+$progress-btn-zero-padding-margin: 0 !default;
+$progress-btn-line-height: 1 !default;
+$progress-btn-full-height: 100% !default;
+$progress-btn-nill-height: 0% !default;
+$progress-btn-process-height: 10% !default;
+$progress-auto-width: auto !default;
+$progress-auto-height: auto !default;
+$progress-full-width: 100% !default;
+$spinner-inner-top: -1px !default;
+$progress-round-border-radius: 5em !default;
+$progress-slidedown-to-top: 100px !default;
+$progress-slideup-to-top: -100px !default;
+$progress-zero-width: 0% !default;
+$progress-negative-full-width: -100% !default;

package/styles/progress-button/_layout.scss

@@ -1,13 +1,16 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+
 @include export-module('progress-button-layout') {
   .e-progress-btn {
     position: relative;
 
     .e-progress {
-      height: 100%;
-      left: 0;
+      height: $progress-btn-full-height;
+      left: $progress-btn-zero-padding-margin;
       opacity: 0;
       position: absolute;
-      top: 0;
+      top: $progress-btn-zero-padding-margin;
       transition: opacity .3s linear;
     }
 
@@ -23,33 +26,58 @@
 
     &.e-vertical {
       .e-progress {
-        bottom: 0;
-        height: 0%;
-        top: auto;
-        width: 100%;
+        bottom: $progress-btn-zero-padding-margin;
+        height: $progress-btn-nill-height;
+        top: $progress-auto-width;
+        width: $progress-full-width;
       }
     }
 
     &.e-progress-top {
       .e-progress {
-        height: 10%;
+        height: $progress-btn-process-height;
       }
     }
 
     &.e-progress-bottom {
       .e-progress {
-        bottom: -1px;
-        height: 10%;
-        top: auto;
+        bottom: $spinner-inner-top;
+        height: $progress-btn-process-height;
+        top: $progress-auto-width;
       }
     }
 
     &.e-progress-active {
       overflow: hidden;
       pointer-events: none;
+     
+      @if $skin-name == 'bootstrap5.3' {
+        .e-progress,
+        .e-primary .e-progress,
+        .e-success .e-progress,
+        .e-danger .e-progress {
+          opacity: .3;
+        }
 
-      .e-progress {
-        opacity: 1;
+        .e-warning .e-progress,
+        .e-info .e-progress,
+        .e-primary.e-outline .e-progress,
+        .e-primary.e-flat .e-progress,
+        .e-success.e-outline .e-progress,
+        .e-success.e-flat .e-progress,
+        .e-danger.e-outline .e-progress,
+        .e-danger.e-flat .e-progress,
+        .e-warning.e-outline .e-progress,
+        .e-warning.e-flat .e-progress,
+        .e-info.e-outline .e-progress,
+        .e-info.e-flat .e-progress {
+          opacity: .2;
+        }
+      }
+      @else {
+        .e-progress {
+          opacity: 1;
+        }
       }
 
       .e-animate-end {
@@ -68,7 +96,7 @@
         .e-btn-content,
         .e-spinner {
           display: block;
-          line-height: 1;
+          line-height: $progress-btn-line-height;
         }
       }
 
@@ -84,14 +112,14 @@
           padding-right: $progress-btn-spinner-padding;
 
           .e-spinner-inner {
-            top: -1px;
+            top: $spinner-inner-top;
           }
         }
 
         &.e-rtl {
           .e-spinner {
             padding-left: $progress-btn-spinner-padding;
-            padding-right: 0;
+            padding-right: $progress-btn-zero-padding-margin;
           }
         }
       }
@@ -101,13 +129,13 @@
           padding-left: $progress-btn-spinner-padding;
 
           .e-spinner-inner {
-            top: -1px;
+            top: $spinner-inner-top;
           }
         }
 
         &.e-rtl {
           .e-spinner {
-            padding-left: 0;
+            padding-left: $progress-btn-zero-padding-margin;
             padding-right: $progress-btn-spinner-padding;
           }
         }
@@ -140,7 +168,7 @@
           &.e-rtl {
             .e-spinner {
               padding-left: $progress-btn-spinner-padding-small;
-              padding-right: 0;
+              padding-right: $progress-btn-zero-padding-margin;
             }
           }
         }
@@ -152,7 +180,7 @@
 
           &.e-rtl {
             .e-spinner {
-              padding-left: 0;
+              padding-left: $progress-btn-zero-padding-margin;
               padding-right: $progress-btn-spinner-padding-small;
             }
           }
@@ -179,34 +207,34 @@
     }
 
     &.e-round-corner {
-      border-radius: 5em;
+      border-radius: $progress-round-border-radius;
       outline: none;
       overflow: hidden;
     }
 
     &.e-rtl {
       .e-progress {
-        left: auto;
-        right: 0;
+        left: $progress-auto-width;
+        right: $progress-btn-zero-padding-margin;
       }
 
       &.e-vertical {
         .e-progress {
-          bottom: auto;
-          top: 0;
+          bottom: $progress-auto-width;
+          top: $progress-btn-zero-padding-margin;
         }
       }
     }
 
     .e-spinner-pane {
-      height: auto;
+      height: $progress-auto-height;
       position: relative;
-      width: auto;
+      width: $progress-auto-width;
 
       .e-spinner-inner {
-        left: auto;
+        left: $progress-auto-width;
         position: relative;
-        top: auto;
+        top: $progress-auto-width;
         transform: none;
       }
     }
@@ -214,63 +242,63 @@
     .e-cont-animate {
       align-items: center;
       display: inline-flex;
-      height: 100%;
+      height: $progress-btn-full-height;
       justify-content: center;
-      left: 0;
+      left: $progress-btn-zero-padding-margin;
       position: absolute;
-      top: 0;
-      width: 100%;
+      top: $progress-btn-zero-padding-margin;
+      width: $progress-full-width;
     }
 
     @keyframes ProgressSlideLeft {
       from {
-        left: 0%;
+        left: $progress-zero-width;
         opacity: 1;
       }
 
       to {
-        left: -100%;
+        left: $progress-negative-full-width;
         opacity: 0;
       }
     }
 
     @keyframes ProgressSlideRight {
       from {
-        left: 0%;
+        left: $progress-zero-width;
         opacity: 1;
       }
 
       to {
-        left: 100%;
+        left: $progress-full-width;
         opacity: 0;
       }
     }
 
     @keyframes ProgressSlideUp {
       from {
-        height: auto;
+        height: $progress-auto-height;
         opacity: 1;
-        top: 0;
+        top: $progress-btn-zero-padding-margin;
       }
 
       to {
-        height: auto;
+        height: $progress-auto-height;
         opacity: 0;
-        top: -100px;
+        top: $progress-slideup-to-top;
       }
     }
 
     @keyframes ProgressSlideDown {
       from {
-        height: auto;
+        height: $progress-auto-height;
         opacity: 1;
-        top: 0;
+        top: $progress-btn-zero-padding-margin;
       }
 
       to {
-        height: auto;
+        height: $progress-auto-height;
         opacity: 0;
-        top: 100px;
+        top: $progress-slidedown-to-top;
       }
     }