@syncfusion/ej2-angular-splitbuttons 20.2.38-ngcc → 20.2.38

package/styles/progress-button/_theme.scss

@@ -0,0 +1,456 @@
+@include export-module('progress-button-theme') {
+  /*! Progress Button Theme */
+  .e-progress-btn {
+    .e-spinner-pane .e-spinner-inner svg {
+      fill: $progress-btn-color;
+      stroke: $progress-btn-color;
+
+      .e-path-circle {
+        stroke: fade-out($btn-color, $progress-btn-circle-opacity);
+        @if $skin-name == 'bootstrap4' {
+          stroke-width: 1px;
+        }
+        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          stroke-width: 3px;
+        }
+      }
+
+      .e-path-arc {
+        stroke: $btn-color;
+        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          stroke-width: 3px;
+        }
+      }
+    }
+
+    #{if(&, '&', '*')}.e-primary,
+    #{if(&, '&', '*')}.e-primary.e-outline:hover,
+    #{if(&, '&', '*')}.e-primary.e-outline:focus,
+    #{if(&, '&', '*')}.e-primary.e-flat:hover,
+    #{if(&, '&', '*')}.e-primary.e-flat:focus {
+      .e-spinner-pane .e-spinner-inner svg {
+        fill: $btn-primary-color;
+        stroke: $btn-primary-color;
+
+        .e-path-circle {
+          stroke: fade-out($btn-primary-color, $progress-btn-circle-opacity);
+        }
+
+        .e-path-arc {
+          stroke: $btn-primary-color;
+        }
+      }
+
+      &.e-flat {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-flat-primary-color;
+          stroke: $btn-flat-primary-color;
+
+          .e-path-circle {
+            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+            }
+            @else {
+              stroke: fade-out($btn-flat-primary-color, $progress-btn-circle-opacity);
+            }
+          }
+
+          .e-path-arc {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' {
+              stroke: $btn-flat-primary-path-arc;
+            }
+            @else {
+              stroke: $btn-flat-primary-color;
+            }
+          }
+         }
+       }
+    }
+
+    #{if(&, '&', '*')}.e-success,
+    #{if(&, '&', '*')}.e-success.e-outline:hover,
+    #{if(&, '&', '*')}.e-success.e-outline:focus,
+    #{if(&, '&', '*')}.e-success.e-flat:hover,
+    #{if(&, '&', '*')}.e-success.e-flat:focus {
+      .e-spinner-pane .e-spinner-inner svg {
+        fill: $btn-success-color;
+        stroke: $btn-success-color;
+
+        .e-path-circle {
+          stroke: fade-out($btn-success-color, $progress-btn-circle-opacity);
+          }
+
+        .e-path-arc {
+          stroke: $btn-success-color;
+        }
+      }
+
+      &.e-flat {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-flat-success-color;
+          stroke: $btn-flat-success-color;
+
+          .e-path-circle {
+            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+            }
+            @else {
+              stroke: fade-out($btn-flat-success-color, $progress-btn-circle-opacity);
+            }
+           }
+
+          .e-path-arc {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+              stroke: $btn-flat-primary-path-arc;
+            }
+            @else {
+              stroke: $btn-flat-success-color;
+            }
+          }
+        }
+      }
+    }
+
+    &.e-info,
+    &.e-info.e-outline:hover,
+    &.e-info.e-outline:focus,
+    &.e-info.e-flat:hover,
+    &.e-info.e-flat:focus {
+      .e-spinner-pane .e-spinner-inner svg {
+        fill: $btn-info-color;
+        stroke: $btn-info-color;
+
+        .e-path-circle {
+          stroke: fade-out($btn-info-color, $progress-btn-circle-opacity);
+        }
+
+        .e-path-arc {
+          stroke: $btn-info-color;
+        }
+      }
+
+      &.e-flat {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-flat-info-color;
+          stroke: $btn-flat-info-color;
+
+          .e-path-circle {
+            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+            }
+            @else {
+              stroke: fade-out($btn-flat-info-color, $progress-btn-circle-opacity);
+            }
+          }
+
+          .e-path-arc {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+              stroke: $btn-flat-primary-path-arc;
+            }
+            @else {
+              stroke: $btn-flat-info-color;
+            }
+          }
+        }
+      }
+    }
+
+    &.e-warning,
+    &.e-warning.e-outline:hover,
+    &.e-warning.e-outline:focus,
+    &.e-warning.e-flat:hover,
+    &.e-warning.e-flat:focus {
+      .e-spinner-pane .e-spinner-inner svg {
+        fill: $btn-warning-color;
+        stroke: $btn-warning-color;
+
+        .e-path-circle {
+          stroke: fade-out($btn-warning-color, $progress-btn-circle-opacity);
+        }
+
+        .e-path-arc {
+          stroke: $btn-warning-color;
+        }
+       }
+
+      &.e-flat {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-flat-warning-color;
+          stroke: $btn-flat-warning-color;
+
+          .e-path-circle {
+            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+            }
+            @else {
+              stroke: fade-out($btn-flat-warning-color, $progress-btn-circle-opacity);
+            }
+          }
+
+          .e-path-arc {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+              stroke: $btn-flat-primary-path-arc;
+            }
+            @else {
+              stroke: $btn-flat-warning-color;
+            }
+          }
+        }
+       }
+    }
+
+    &.e-danger,
+    &.e-danger.e-outline:hover,
+    &.e-danger.e-outline:focus,
+    &.e-danger.e-flat:hover,
+    &.e-danger.e-flat:focus {
+      .e-spinner-pane .e-spinner-inner svg {
+        fill: $btn-danger-color;
+        stroke: $btn-danger-color;
+
+        .e-path-circle {
+          stroke: fade-out($btn-danger-color, $progress-btn-circle-opacity);
+        }
+
+        .e-path-arc {
+          stroke: $btn-danger-color;
+        }
+       }
+
+      &.e-flat {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-flat-danger-color;
+          stroke: $btn-flat-danger-color;
+
+          .e-path-circle {
+            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
+            }
+            @else {
+              stroke: fade-out($btn-flat-danger-color, $progress-btn-circle-opacity);
+            }
+          }
+
+          .e-path-arc {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+              stroke: $btn-flat-primary-path-arc;
+            }
+            @else {
+              stroke: $btn-flat-danger-color;
+            }
+          }
+        }
+       }
+    }
+
+    &.e-outline,
+    &.e-flat {
+      &.e-primary {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-primary-bgcolor;
+          stroke: $btn-primary-bgcolor;
+
+          .e-path-circle {
+            stroke: fade-out($btn-primary-bgcolor, $progress-btn-circle-opacity);
+          }
+
+          .e-path-arc {
+            stroke: $btn-primary-bgcolor;
+          }
+        }
+      }
+
+      &.e-success {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-success-bgcolor;
+          stroke: $btn-success-bgcolor;
+
+          .e-path-circle {
+            stroke: fade-out($btn-success-bgcolor, $progress-btn-circle-opacity);
+          }
+
+          .e-path-arc {
+            stroke: $btn-success-bgcolor;
+          }
+        }
+      }
+
+      &.e-info {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-info-bgcolor;
+          stroke: $btn-info-bgcolor;
+
+          .e-path-circle {
+            stroke: fade-out($btn-info-bgcolor, $progress-btn-circle-opacity);
+          }
+
+          .e-path-arc {
+            stroke: $btn-info-bgcolor;
+          }
+        }
+      }
+
+      &.e-warning {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-warning-bgcolor;
+          stroke: $btn-warning-bgcolor;
+
+          .e-path-circle {
+            stroke: fade-out($btn-warning-bgcolor, $progress-btn-circle-opacity);
+          }
+
+          .e-path-arc {
+            stroke: $btn-warning-bgcolor;
+          }
+        }
+      }
+
+      &.e-danger {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-danger-bgcolor;
+          stroke: $btn-danger-bgcolor;
+
+          .e-path-circle {
+            stroke: fade-out($btn-danger-bgcolor, $progress-btn-circle-opacity);
+          }
+
+          .e-path-arc {
+            stroke: $btn-danger-bgcolor;
+          }
+        }
+      }
+    }
+
+    &.e-link {
+      .e-spinner-pane .e-spinner-inner svg {
+        fill: $btn-link-color;
+        stroke: $btn-link-color;
+
+        .e-path-circle {
+          stroke: fade-out($btn-link-color, $progress-btn-circle-opacity);
+        }
+
+        .e-path-arc {
+          stroke: $btn-link-color;
+        }
+       }
+    }
+  }
+
+  .e-progress {
+    background-color: $progress-btn-bgcolor-normal;
+  }
+
+  #{if(&, '&', '*')}.e-primary,
+  #{if(&, '&', '*')}.e-success,
+  #{if(&, '&', '*')}.e-danger,
+  #{if(&, '&', '*')}.e-info {
+    .e-progress {
+      background-color: $progress-btn-bgcolor;
+      }
+  }
+
+  #{if(&, '&', '*')}.e-warning {
+    .e-progress {
+      background-color: $progress-btn-warning-progress-color;
+      }
+  }
+
+  #{if(&, '&', '*')}.e-flat {
+    &.e-primary {
+      .e-progress {
+        background-color: fade-out($progress-btn-flat-primary-progress-color, .8);
+      }
+    }
+
+    &.e-success {
+      .e-progress {
+        background-color: fade-out($progress-btn-flat-success-progress-color, .8);
+      }
+    }
+
+    &.e-info {
+      .e-progress {
+        background-color: fade-out($progress-btn-flat-info-progress-color, .8);
+        }
+      }
+
+    &.e-warning {
+      .e-progress {
+        background-color: fade-out($progress-btn-flat-warning-progress-color, .8);
+        }
+      }
+
+    &.e-danger {
+      .e-progress {
+        background-color: fade-out($progress-btn-flat-danger-progress-color, .8);
+        }
+      }
+  }
+
+  #{if(&, '&', '*')}.e-outline:not(:focus) {
+    &.e-primary {
+      .e-progress {
+        background-color: fade-out($btn-primary-bgcolor, .8);
+      }
+    }
+
+    &.e-success {
+      .e-progress {
+        background-color: fade-out($btn-success-bgcolor, .8);
+        }
+      }
+
+    &.e-info {
+      .e-progress {
+        background-color: fade-out($btn-info-bgcolor, .8);
+        }
+      }
+
+    &.e-warning {
+      .e-progress {
+        background-color: fade-out($btn-warning-bgcolor, .8);
+        }
+      }
+
+    &.e-danger {
+      .e-progress {
+        background-color: fade-out($btn-danger-bgcolor, .8);
+        }
+      }
+  }
+
+  #{if(&, '&', '*')}.e-flat:not(:focus) {
+    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+      &.e-primary {
+        .e-progress {
+          background-color: fade-out($btn-primary-bgcolor, .8);
+        }
+      }
+
+      &.e-success {
+        .e-progress {
+          background-color: fade-out($btn-success-bgcolor, .8);
+          }
+        }
+
+      &.e-info {
+        .e-progress {
+          background-color: fade-out($btn-info-bgcolor, .8);
+          }
+        }
+
+      &.e-warning {
+        .e-progress {
+          background-color: fade-out($btn-warning-bgcolor, .8);
+          }
+        }
+
+      &.e-danger {
+        .e-progress {
+          background-color: fade-out($btn-danger-bgcolor, .8);
+          }
+        }
+    }
+  }
+}

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

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/bootstrap-dark.scss';
+@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
+@import 'bootstrap-dark-definition.scss';
+@import 'all.scss';

package/styles/progress-button/bootstrap.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/bootstrap.scss';
+@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
+@import 'ej2-popups/styles/spinner/bootstrap-definition.scss';
+@import 'bootstrap-definition.scss';
+@import 'all.scss';

package/styles/progress-button/bootstrap4.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/bootstrap4.scss';
+@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
+@import 'ej2-popups/styles/spinner/bootstrap4-definition.scss';
+@import 'bootstrap4-definition.scss';
+@import 'all.scss';

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

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/bootstrap5-dark.scss';
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'all.scss';

package/styles/progress-button/bootstrap5.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/bootstrap5.scss';
+@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
+@import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';
+@import 'bootstrap5-definition.scss';
+@import 'all.scss';

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

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/fabric-dark.scss';
+@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/fabric-dark-definition.scss';
+@import 'fabric-dark-definition.scss';
+@import 'all.scss';

package/styles/progress-button/fabric.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/fabric.scss';
+@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-buttons/styles/button/fabric-definition.scss';
+@import 'ej2-popups/styles/spinner/fabric-definition.scss';
+@import 'fabric-definition.scss';
+@import 'all.scss';

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

@@ -320,14 +320,14 @@
   stroke: #fff;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #1b1a19;
-  stroke: #1b1a19;
+  fill: #fff;
+  stroke: #fff;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(27, 26, 25, 0.7);
+  stroke: rgba(255, 255, 255, 0.7);
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #1b1a19;
+  stroke: #fff;
 }
 .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, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #0078d4;
@@ -340,14 +340,14 @@
   stroke: #0078d4;
 }
 .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, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #1b1a19;
-  stroke: #1b1a19;
+  fill: #fff;
+  stroke: #fff;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(27, 26, 25, 0.7);
+  stroke: rgba(255, 255, 255, 0.7);
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #1b1a19;
+  stroke: #fff;
 }
 .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #0b6a0b;
@@ -360,14 +360,14 @@
   stroke: #0b6a0b;
 }
 .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, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #1b1a19;
-  stroke: #1b1a19;
+  fill: #fff;
+  stroke: #fff;
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(27, 26, 25, 0.7);
+  stroke: rgba(255, 255, 255, 0.7);
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #1b1a19;
+  stroke: #fff;
 }
 .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #038387;
@@ -380,14 +380,14 @@
   stroke: #038387;
 }
 .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, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #1b1a19;
-  stroke: #1b1a19;
+  fill: #fff;
+  stroke: #fff;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(27, 26, 25, 0.7);
+  stroke: rgba(255, 255, 255, 0.7);
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #1b1a19;
+  stroke: #fff;
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #ca5010;
@@ -400,14 +400,14 @@
   stroke: #ca5010;
 }
 .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, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #1b1a19;
-  stroke: #1b1a19;
+  fill: #fff;
+  stroke: #fff;
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(27, 26, 25, 0.7);
+  stroke: rgba(255, 255, 255, 0.7);
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #1b1a19;
+  stroke: #fff;
 }
 .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg {
   fill: #d13438;
@@ -496,19 +496,19 @@
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(27, 26, 25, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-success .e-progress {
-  background-color: rgba(27, 26, 25, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-info .e-progress {
-  background-color: rgba(27, 26, 25, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(27, 26, 25, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(27, 26, 25, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

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

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/fluent-dark.scss';
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'all.scss';

package/styles/progress-button/fluent.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/fluent.scss';
+@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-definition.scss';
+@import 'ej2-popups/styles/spinner/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'all.scss';

package/styles/progress-button/highcontrast-light.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/highcontrast-light.scss';
+@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
+@import 'ej2-popups/styles/spinner/highcontrast-light-definition.scss';
+@import 'highcontrast-light-definition.scss';
+@import 'all.scss';

package/styles/progress-button/highcontrast.scss

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/highcontrast.scss';
+@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
+@import 'ej2-popups/styles/spinner/highcontrast-definition.scss';
+@import 'highcontrast-definition.scss';
+@import 'all.scss';

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

@@ -1 +1,5 @@
-@import 'ej2-splitbuttons/styles/progress-button/material-dark.scss';
+@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/material-dark-definition.scss';
+@import 'material-dark-definition.scss';
+@import 'all.scss';