@syncfusion/ej2-splitbuttons 33.2.3 → 34.1.29

package/styles/material3.scss

@@ -1,17 +1,13 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@use 'ej2-buttons/styles/button/material3-definition' as *;
-@use 'ej2-popups/styles/popup/material3-definition' as *;
 @use 'drop-down-button/material3-definition' as *;
 @use 'drop-down-button/icons/material3' as *;
-@use 'drop-down-button/all.material3' as *;
-@use 'drop-down-button/bigger.material3' as *;
+@use 'drop-down-button/all' as *;
+@use 'drop-down-button/bigger' as *;
 @use 'split-button/material3-definition' as *;
-@use 'split-button/all.material3' as *;
-@use 'split-button/bigger.material3' as *;
+@use 'split-button/all' as *;
+@use 'split-button/bigger' as *;
 @use 'button-group/material3-definition' as *;
-@use 'button-group/all.material3' as *;
-@use 'button-group/bigger.material3' as *;
-@use 'ej2-popups/styles/spinner/material3-definition' as *;
+@use 'button-group/all' as *;
+@use 'button-group/bigger' as *;
 @use 'progress-button/material3-definition' as *;
-@use 'progress-button/all.material3' as *;
-@use 'progress-button/bigger.material3' as *;
+@use 'progress-button/all' as *;
+@use 'progress-button/bigger' as *;

package/styles/progress-button/_all.scss

@@ -1,2 +1,2 @@
-@use 'layout' as *;
-@use 'theme' as *;
+@forward 'layout';
+@forward 'theme';

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

@@ -1,10 +1,6 @@
-@use 'ej2-base/styles/definition/bds' as *;
-@use 'ej2-buttons/styles/button/bds-definition' as *;
-@forward 'ej2-base/styles/definition/bds';
-@forward 'ej2-buttons/styles/button/bds-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //layout variables
-$skin-name :'Material3';
 $progress-btn-circle-opacity: .8 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;
@@ -19,12 +15,12 @@ $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-flat-primary-progress-color: rgba($progress-btn-white, 1) !default;
+$progress-btn-flat-success-progress-color: rgba($progress-btn-white, 1) !default;
+$progress-btn-flat-info-progress-color: rgba($progress-btn-info, 1) !default;
+$progress-btn-flat-warning-progress-color: rgba($progress-btn-white, 1) !default;
+$progress-btn-flat-danger-progress-color: rgba($progress-btn-white, 1) !default;
+$btn-flat-primary-path-arc: $progress-btn-white !default;
 $fade-out: none !default;
 $progress-btn-zero-padding-margin: 0 !default;
 $progress-btn-line-height: 1 !default;
@@ -40,3 +36,11 @@ $progress-slidedown-to-top: 100px !default;
 $progress-slideup-to-top: -100px !default;
 $progress-zero-width: 0% !default;
 $progress-negative-full-width: -100% !default;
+$progress-btn-primary-color: $progress-btn-white !default;
+$progress-btn-success-color: $progress-btn-white !default;
+$progress-btn-info-color: $progress-btn-info !default;
+$progress-btn-warning-color: $progress-btn-white !default;
+$progress-btn-danger-color: $progress-btn-white !default;
+$progress-btn-primary-bgcolor: $progress-btn-primary-bg !default;
+$progress-btn-info-bgcolor: $progress-btn-info-bg !default;
+$progress-btn-link-color: $progress-btn-link !default;

package/styles/progress-button/_bigger.scss

@@ -1,8 +1,8 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 
 @include export-module('progress-button-bigger') {
-  #{if(&, '&', '*')}.e-bigger .e-progress-btn,
-  #{if(&, '&', '*')}.e-bigger.e-progress-btn {
+  *.e-bigger .e-progress-btn,
+  *.e-bigger.e-progress-btn {
     &.e-progress-active:not(.e-hide-spinner) {
       &.e-spin-left:not(.e-round) {
         .e-spinner {

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

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
-@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
-@forward 'ej2-base/styles/definition/bootstrap-dark';
-@forward 'ej2-buttons/styles/button/bootstrap-dark-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-color: $grey-light-font !default;
 $progress-btn-bgcolor: rgba($grey-light-font, .3) !default;
 $progress-btn-bgcolor-normal: rgba($grey-light-font, .2) !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-color: $grey-light-font !default;
 $progress-btn-bgcolor: rgba($grey-white, .3) !default;
 $progress-btn-bgcolor-normal: rgba($grey-base, .2) !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-color: $white !default;
 $progress-btn-bgcolor: rgba($white, .25) !default;
 $progress-btn-bgcolor-normal: rgba($white, .25) !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $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;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-color: $neutral-light-font !default;
 $progress-btn-bgcolor: rgba($neutral-black, .2) !default;
 $progress-btn-bgcolor-normal: rgba($neutral-black, .2) !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-circle-opacity: .8 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $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;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $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;

package/styles/progress-button/_layout.scss

@@ -1,4 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
+@use '@syncfusion/ej2-buttons/styles/button/variables' as btn;
 
 @include export-module('progress-button-layout') {
   .e-progress-btn {

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $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;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $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;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;

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

@@ -1,7 +1,6 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+@use '@syncfusion/ej2-buttons/styles/button/tailwind-dark-definition' as *;
+
 $progress-btn-circle-opacity: .8 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;
@@ -36,3 +35,11 @@ $progress-slidedown-to-top: 100px !default;
 $progress-slideup-to-top: -100px !default;
 $progress-zero-width: 0% !default;
 $progress-negative-full-width: -100% !default;
+$progress-btn-primary-color: $btn-primary-color !default;
+$progress-btn-success-color: $btn-success-color !default;
+$progress-btn-info-color: $btn-info-color !default;
+$progress-btn-warning-color: $btn-warning-color !default;
+$progress-btn-danger-color: $btn-danger-color !default;
+$progress-btn-primary-bgcolor: $btn-primary-bgcolor !default;
+$progress-btn-info-bgcolor: $btn-info-bgcolor !default;
+$progress-btn-link-color: $btn-link-color !default;

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

@@ -1,7 +1,6 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+@use '@syncfusion/ej2-buttons/styles/button/tailwind-definition' as *;
+
 $progress-btn-circle-opacity: .8 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;
@@ -36,3 +35,11 @@ $progress-slidedown-to-top: 100px !default;
 $progress-slideup-to-top: -100px !default;
 $progress-zero-width: 0% !default;
 $progress-negative-full-width: -100% !default;
+$progress-btn-primary-color: $btn-primary-color !default;
+$progress-btn-success-color: $btn-success-color !default;
+$progress-btn-info-color: $btn-info-color !default;
+$progress-btn-warning-color: $btn-warning-color !default;
+$progress-btn-danger-color: $btn-danger-color !default;
+$progress-btn-primary-bgcolor: $btn-primary-bgcolor !default;
+$progress-btn-info-bgcolor: $btn-info-bgcolor !default;
+$progress-btn-link-color: $btn-link-color !default;

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

@@ -1,7 +1,5 @@
-@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';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $progress-btn-circle-opacity: .3 !default;
 $progress-btn-transition: all .3s linear !default;
 $progress-btn-spinner-padding: 12px !default;