@syncfusion/ej2-splitbuttons 31.2.2 → 32.1.19

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,5 +1,6 @@
 @use 'sass:color';
-
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('progress-button-theme') {
 
   /*! Progress Button Theme */

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% {
@@ -169,7 +249,7 @@
   padding-top: 10px;
 }
 .e-progress-btn.e-round-corner {
-  border-radius: 5em;
+  border-radius: calc(var(--e-radius) * 5);
   outline: none;
   overflow: hidden;
 }

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;
 }

package/styles/progress-button/fluent2.scss

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

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

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

package/styles/progress-button/highcontrast.scss

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

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

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

package/styles/progress-button/material.scss

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