@syncfusion/ej2-splitbuttons 31.2.12 → 32.1.22

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'ej2-buttons/styles/button/material-dark-definition' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+@forward 'ej2-buttons/styles/button/material-dark-definition';
 $progress-btn-color: rgba($grey-black, .87) !default;
 $progress-btn-bgcolor: rgba($grey-black, .2) !default;
 $progress-btn-bgcolor-normal: rgba($grey-black, .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/_material-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/material' as *;
+@use 'ej2-buttons/styles/button/material-definition' as *;
+@forward 'ej2-base/styles/definition/material';
+@forward 'ej2-buttons/styles/button/material-definition';
 $progress-btn-color: rgba($grey-black, .87) !default;
 $progress-btn-bgcolor: rgba($grey-black, .2) !default;
 $progress-btn-bgcolor-normal: rgba($grey-black, .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/_material3-dark-definition.scss

@@ -1 +1,42 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'ej2-buttons/styles/button/material3-dark-definition' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+@forward 'ej2-buttons/styles/button/material3-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: rgba($secondary-text-color) !default;
+$progress-btn-bgcolor: rgba($secondary-text-color, .12) !default;
+$progress-btn-bgcolor-normal: rgba($secondary-text-color, .12) !default;
+$progress-btn-primary-progress-color: $primary-bg-color-pressed !default;
+$progress-btn-success-progress-color: rgba($success-text, .12) !default;
+$progress-btn-info-progress-color: rgba($info-text, .12) !default;
+$progress-btn-danger-progress-color: rgba($danger-text, .12) !default;
+$progress-btn-warning-progress-color: rgba($warning-text, .12) !default;
+$progress-btn-flat-primary-progress-color: rgba($primary-bg-color, .12) !default;
+$progress-btn-flat-success-progress-color: rgba($success-bg-color, .12) !default;
+$progress-btn-flat-info-progress-color: rgba($info-bg-color, .12) !default;
+$progress-btn-flat-warning-progress-color: rgba($warning-bg-color, .12) !default;
+$progress-btn-flat-danger-progress-color: rgba($danger-bg-color, .12) !default;
+$btn-flat-primary-path-arc: rgba($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/_material3-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'ej2-buttons/styles/button/material3-definition' as *;
+@forward 'ej2-base/styles/definition/material3';
+@forward 'ej2-buttons/styles/button/material3-definition';
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;
@@ -22,3 +26,17 @@ $progress-btn-flat-info-progress-color: rgba($info-bg-color, .12) !default;
 $progress-btn-flat-warning-progress-color: rgba($warning-bg-color, .12) !default;
 $progress-btn-flat-danger-progress-color: rgba($danger-bg-color, .12) !default;
 $btn-flat-primary-path-arc: rgba($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/_tailwind-dark-definition.scss

@@ -1 +1,38 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'ej2-buttons/styles/button/tailwind-dark-definition' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+@forward 'ej2-buttons/styles/button/tailwind-dark-definition';
+$progress-btn-circle-opacity: .8 !default;
+$progress-btn-transition: all .3s linear !default;
+$progress-btn-spinner-padding: 12px !default;
+$progress-btn-spinner-padding-small: 10px !default;
+$progress-btn-spinner-padding-bigger: 14px !default;
+$progress-btn-spinner-padding-bigger-small: 12px !default;
+$progress-btn-spin-btn-padding: 16px !default;
+$progress-btn-small-spin-btn-padding: 14px !default;
+$progress-btn-bigger-spin-btn-padding: 20px !default;
+$progress-btn-bigger-small-spin-btn-padding: 16px !default;
+$progress-btn-color: $secondary-text-color !default;
+$progress-btn-bgcolor: rgba($icon-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($icon-color, .2) !default;
+$progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
+$progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
+$progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
+$progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
+$progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
+$progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
+$btn-flat-primary-path-arc: $white;
+$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/_tailwind-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'ej2-buttons/styles/button/tailwind-definition' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+@forward 'ej2-buttons/styles/button/tailwind-definition';
 $progress-btn-circle-opacity: .8 !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/_tailwind3-definition.scss

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+@forward 'ej2-buttons/styles/button/tailwind3-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: $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/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/progress-button/_theme.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 
 @include export-module('progress-button-theme') {
 
@@ -466,20 +468,33 @@
   }
 
   .e-progress {
-    background: $progress-btn-bgcolor-normal;
+    @if $skin-name == 'bootstrap5.3'  {
+      background: currentColor;
+    }
+    @else {
+      background: $progress-btn-bgcolor-normal;
+    }
   }
 
   #{if(&, '&', '*')}.e-primary,
   #{if(&, '&', '*')}.e-success,
   #{if(&, '&', '*')}.e-danger {
     .e-progress {
-      background: $progress-btn-bgcolor;
+      @if $skin-name == 'bootstrap5.3'  {
+        background: currentColor;
+      }
+      @else {
+        background: $progress-btn-bgcolor;
+      }
     }
   }
 
   #{if(&, '&', '*')}.e-info {
     .e-progress {
-      @if $skin-name != 'fluent2' {
+      @if $skin-name == 'bootstrap5.3'  {
+        background: currentColor;
+      }
+      @else if $skin-name != 'fluent2' {
         background: $progress-btn-bgcolor;
       }
     }

package/styles/progress-button/bds.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-popups/styles/spinner/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-popups/styles/spinner/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.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';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/progress-button/bootstrap.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-definition' as *;
+@use 'bootstrap-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/progress-button/bootstrap4.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap4-definition' as *;
+@use 'bootstrap4-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.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';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5-dark-definition' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/progress-button/bootstrap5.3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes material-spinner-rotate {
   0% {
@@ -82,8 +162,25 @@
   overflow: hidden;
   pointer-events: none;
 }
-.e-progress-btn.e-progress-active .e-progress {
-  opacity: 1;
+.e-progress-btn.e-progress-active .e-progress,
+.e-progress-btn.e-progress-active .e-primary .e-progress,
+.e-progress-btn.e-progress-active .e-success .e-progress,
+.e-progress-btn.e-progress-active .e-danger .e-progress {
+  opacity: 0.3;
+}
+.e-progress-btn.e-progress-active .e-warning .e-progress,
+.e-progress-btn.e-progress-active .e-info .e-progress,
+.e-progress-btn.e-progress-active .e-primary.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-primary.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-success.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-success.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-danger.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-danger.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-warning.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-warning.e-flat .e-progress,
+.e-progress-btn.e-progress-active .e-info.e-outline .e-progress,
+.e-progress-btn.e-progress-active .e-info.e-flat .e-progress {
+  opacity: 0.2;
 }
 .e-progress-btn.e-progress-active .e-animate-end {
   opacity: 0;
@@ -169,7 +266,7 @@
   padding-top: 10px;
 }
 .e-progress-btn.e-round-corner {
-  border-radius: 5em;
+  border-radius: calc(var(--e-radius) * 5);
   outline: none;
   overflow: hidden;
 }
@@ -467,17 +564,17 @@
 }
 
 .e-progress {
-  background: rgba(var(--color-sf-white), 0.2);
+  background: currentColor;
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress {
-  background: rgba(var(--color-sf-icon-color), 0.2);
+  background: currentColor;
 }
 
 *.e-info .e-progress {
-  background: rgba(var(--color-sf-icon-color), 0.2);
+  background: currentColor;
 }
 
 .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {

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

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'ej2-buttons/styles/button/bootstrap5.3-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap5.3-definition.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-buttons/styles/button/bootstrap5.3-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5.3-definition' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/progress-button/bootstrap5.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5-definition' as *;
+@use 'bootstrap5-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/fabric-dark.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';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-buttons/styles/button/fabric-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/fabric-dark-definition' as *;
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/progress-button/fabric.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'ej2-buttons/styles/button/fabric-definition.scss';
-@import 'ej2-popups/styles/spinner/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-buttons/styles/button/fabric-definition' as *;
+@use 'ej2-popups/styles/spinner/fabric-definition' as *;
+@use 'fabric-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/fluent-dark.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';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'ej2-buttons/styles/button/fluent-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/fluent-dark-definition' as *;
+@use 'fluent-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/progress-button/fluent.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'ej2-buttons/styles/button/fluent-definition.scss';
-@import 'ej2-popups/styles/spinner/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'ej2-buttons/styles/button/fluent-definition' as *;
+@use 'ej2-popups/styles/spinner/fluent-definition' as *;
+@use 'fluent-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/progress-button/fluent2.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes material-spinner-rotate {
   0% {
@@ -171,7 +251,7 @@
   padding-top: 10px;
 }
 .e-progress-btn.e-round-corner {
-  border-radius: 5em;
+  border-radius: calc(var(--e-radius) * 5);
   outline: none;
   overflow: hidden;
 }