@syncfusion/ej2-splitbuttons 31.2.12 → 32.1.22

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

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

@@ -1,5 +1,85 @@
 
 
+
+
+
+
+
+
+/* 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% {
@@ -167,7 +247,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/material3-dark.scss

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

package/styles/progress-button/material3.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/material3.scss

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

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

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

package/styles/progress-button/tailwind.scss

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

package/styles/progress-button/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 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 */
+
+
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes material-spinner-rotate {
   0% {
@@ -169,7 +239,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/tailwind3.scss

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

package/styles/split-button/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@use '../drop-down-button/bds-definition' as *;
+@forward 'ej2-base/styles/definition/bds';
+@forward '../drop-down-button/bds-definition';
 $split-btn-zindex: 2 !default;
 $split-btn-border-radius: 8px !default;
 $split-btn-focus-outline-offset: 0 !default;
@@ -21,3 +25,51 @@ $split-btn-disabled-left-border-color: $secondary-border-color !default;
 $split-btn-hover-left-border-color: $secondary-border-color !default;
 $split-btn-focus-left-border-color: $secondary-border-color !default;
 $split-btn-active-left-border-color: $secondary-border-color !default;
+$split-btn-bigger-padding-left: 12px !default;
+$split-btn-bigger-padding-right: 6px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: 0 !default;
+$drop-down-bigger-rtl-padding-left: 6px !default;
+$drop-down-bigger-rtl-padding-right: 12px !default;
+$drop-down-bgr-rtl-icon-padding-left: 10px !default;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+
+$split-rtl-btn-padding-left: 4px !default;
+$split-rtl-btn-padding-right: 10px !default;
+
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$split-btn-vertical-padding-right: 10px !default;
+$split-btn-vertical-icon-top-padding: 4px !default;
+$drop-down-btn-vertical-padding-bottom: 4px !default;
+$drop-down-btn-vertical-padding-top: 4px !default;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-btn-wrapper-btn-padding: 3.75px 11px !default;
+
+//mat3
+$split-bgr-btn-border-radius: 4px !default;
+$split-wrapper-split-btn-padding: 9px 4px !default;
+$split-nrml-btn-padding: 7px 16px !default;
+$split-nrml-btn-line-height: 1.28572em !default;
+
+$split-full-width: 100% !default;

package/styles/split-button/_bigger.scss

@@ -1,15 +1,17 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('split-button-bigger') {
   .e-bigger .e-split-btn-wrapper,
   .e-bigger.e-split-btn-wrapper {
     @if $skin-name == 'Material3' {
-      border-radius: 4px;
+      border-radius: $split-bgr-btn-border-radius;
       box-shadow: $btn-box-shadow;
     }
     .e-split-btn {
       @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
-        border-radius: 4px;
+        border-radius: $split-bgr-btn-border-radius;
         box-shadow: none;
-        padding: 9px 4px;
+        padding: $split-wrapper-split-btn-padding;
       }
       @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
         padding: 7px 4px;
@@ -17,38 +19,33 @@
         padding-right: $split-btn-icon-btn-padding-bigger;
       }
       @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-        padding-left: 16px;
-        padding-right: 16px;
+        padding-left: $split-btn-bigger-padding-left;
+        padding-right: $split-btn-bigger-padding-right;
         line-height: 1.781em;
       }
       @else {
-        padding-left: 12px;
-        padding-right: 6px;
+        padding-left: $split-btn-bigger-padding-left;
+        padding-right: $split-btn-bigger-padding-right;
       }
 
       &.e-top-icon-btn {
-        padding-bottom: 12px;
-        padding-top: 12px;
+        padding-bottom: $split-btn-top-icon-padding-bottom;
+        padding-top: $split-btn-top-icon-padding-top;
       }
 
       .e-btn-icon {
         font-size: $drop-down-btn-icon-font-size-bigger;
-        margin-left: 0;
-        @if $skin-name == 'FluentUI' {
-          padding-right: 8px;
-        }
-        @else {
-          padding-right: 10px;
-        }
-        width: auto;
+        margin-left: $drop-down-bigger-btn-icon-margin-left;
+        padding-right: $drop-down-bigger-btn-icon-padding-right;
+        width: $split-auto-width;
         @if $skin-name == 'Material3' {
-          border-radius: 4px;
+          border-radius: $split-bgr-btn-border-radius;
         }
       }
 
       .e-icon-top {
-        padding-bottom: 6px;
-        padding-right: 0;
+        padding-bottom: $drop-down-bigger-icon-top-padding-bottom;
+        padding-right: $drop-down-zero-padding-margin;
       }
 
       &.e-icon-btn {
@@ -56,22 +53,18 @@
         padding-right: $split-btn-icon-btn-padding-bigger;
 
         .e-btn-icon {
-          padding-right: 0;
+          padding-right: $drop-down-zero-padding-margin;
         }
       }
     }
 
     .e-dropdown-btn {
-      @if $skin-name == 'bootstrap4' {
-        padding-left: 10px;
-        padding-right: 10px;
-      }
       @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
-        padding: 9px 4px;
+        padding: $split-wrapper-split-btn-padding;
       }
       @else {
-        padding-left: 4px;
-        padding-right: 4px;
+        padding-left: $drop-dbtn-bigger-padding-left;
+        padding-right: $drop-dbtn-bigger-padding-right;
       }
       @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
         z-index: 1;
@@ -84,30 +77,21 @@
           padding-left: $split-btn-icon-btn-padding-bigger;
           padding-right: $split-btn-icon-btn-padding-bigger;
         }
-        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-          padding-left: 12px;
-          padding-right: 12px;
-        }
         @else {
-          padding-left: 6px;
-          padding-right: 12px;
+          padding-left: $drop-down-bigger-rtl-padding-left;
+          padding-right: $drop-down-bigger-rtl-padding-right;
         }
 
         .e-btn-icon {
-          @if $skin-name == 'FluentUI' {
-            padding-left: 8px;
-          }
-          @else {
-            padding-left: 10px;
-          }
-          padding-right: 0;
+          padding-left: $drop-down-bgr-rtl-icon-padding-left;
+          padding-right: $drop-down-zero-padding-margin;
           @if $skin-name == 'Material3' {
-            border-radius: 4px;
+            border-radius: $split-bgr-btn-border-radius;
           }
         }
 
         .e-icon-top {
-          padding-left: 0;
+          padding-left: $drop-down-zero-padding-margin;
         }
 
         &.e-icon-btn {
@@ -115,7 +99,7 @@
           padding-right: $split-btn-icon-btn-padding-bigger;
 
           .e-btn-icon {
-            padding-left: 0;
+            padding-left: $drop-down-zero-padding-margin;
           }
         }
       }
@@ -128,8 +112,8 @@
           padding-right: $split-btn-icon-btn-padding-bigger;
         }
         @else {
-          padding-bottom: 6px;
-          padding-right: 12px;
+          padding-bottom: $split-btn-bgr-vertical-padding-bottom;
+          padding-right: $split-btn-bgr-vertical-padding-right;
         }
       }
 
@@ -139,15 +123,15 @@
           padding-top: $split-btn-icon-btn-padding-bigger;
         }
         @else {
-          padding-bottom: 4px;
-          padding-top: 4px;
+          padding-bottom: $drop-down-btn-bgr-vertical-padding-bottom;
+          padding-top: $drop-down-btn-bgr-vertical-padding-top;
         }
         @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
           z-index: 1;
         }
 
         .e-icon-bottom {
-          padding-top: 0;
+          padding-top: $drop-down-zero-padding-margin;
         }
       }
     }