@syncfusion/ej2-splitbuttons 33.2.3 → 34.1.29

package/styles/button-group/tailwind3.css

@@ -6,80 +6,6 @@
 
 
 
-/* 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 */
-
-
-
-
-
-
-
-
-
-
 /* Font Family */
 /* border */
 /* 0px */
@@ -381,80 +307,6 @@
   border-top-right-radius: calc(var(--e-radius) * 0);
 }
 
-
-
-
-
-
-
-
-
-/* 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 */
 .e-btn-group:not(.e-outline),
 .e-css.e-btn-group:not(.e-outline) {
@@ -1057,80 +909,6 @@
   border-right: transparent;
 }
 
-
-
-
-
-
-
-
-
-/* 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 */
-
-
 .e-bigger .e-btn-group .e-btn-icon,
 .e-bigger.e-btn-group .e-btn-icon,
 .e-bigger .e-css.e-btn-group .e-btn-icon,

package/styles/button-group/tailwind3.scss

@@ -1,5 +1,3 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
 @use 'tailwind3-definition' as *;
-@use 'all.tailwind3' as *;
-@use 'bigger.tailwind3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/drop-down-button/_all.scss

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

package/styles/drop-down-button/_bds-definition.scss

@@ -1,7 +1,4 @@
-@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
 $drop-down-btn-arrow-content: '\e706' !default;

package/styles/drop-down-button/_bigger.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 
 @include export-module('drop-down-button-bigger') {
   .e-bigger .e-dropdown-btn,
@@ -49,15 +49,15 @@
     }
   }
 
-  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup {
+  *.e-bigger .e-dropdown-popup {
     @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
       background-color: transparent;
       border-radius: $drop-down-btn-ul-border-radius;
     }
   }
 
-  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup ul,
-  #{if(&, '&', '*')}.e-bigger.e-dropdown-popup ul {
+  *.e-bigger .e-dropdown-popup ul,
+  *.e-bigger.e-dropdown-popup ul {
     box-shadow: $drop-down-btn-parent-ul-box-shadow;
     font-size: $drop-down-btn-bigger-font-size;
     min-width: $drop-down-btn-bigger-min-width;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-button/_bootstrap4-definition.scss

@@ -1,8 +1,6 @@
 @use 'sass:color';
-@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 *;
+
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e36a' !default;
 $drop-down-btn-vertical-btn-padding: 8px 20px !default;
 $drop-down-btn-vertical-bigger-padding: 10px 24px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e36a' !default;
 $drop-down-btn-vertical-btn-padding: 8px 20px !default;
 $drop-down-btn-vertical-bigger-padding: 10px 24px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e706' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-button/_fusionnew-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast' as *;
-@use 'ej2-buttons/styles/button/fusionnew-definition' as *;
-@forward 'ej2-base/styles/definition/highcontrast';
-@forward 'ej2-buttons/styles/button/fusionnew-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e966' !default;
 $drop-down-btn-vertical-btn-padding: 8px 20px !default;
 $drop-down-btn-vertical-bigger-padding: 10px 24px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e966' !default;
 $drop-down-btn-vertical-btn-padding: 8px 20px !default;
 $drop-down-btn-vertical-bigger-padding: 10px 24px !default;

package/styles/drop-down-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('drop-down-button-layout') {
   .e-dropdown-btn,
@@ -9,7 +10,7 @@
     text-transform: none;
     white-space: normal;
     @if $skin-name == 'Material3' {
-      border-radius: $btn-border-radius;
+      border-radius: btn.$btn-border-radius;
       box-shadow: $drop-down-btn-box-shadow;
       line-height: $drop-down-btn-line-height;
     }
@@ -33,12 +34,12 @@
 
     &:focus-visible { // only for keybord
       @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
-        box-shadow: $btn-keyboard-focus-box-shadow;
+        box-shadow: btn.$btn-keyboard-focus-box-shadow;
       }
     }
 
     &:active {
-      box-shadow: $btn-active-box-shadow;
+      box-shadow: btn.$btn-active-box-shadow;
     }
 
     .e-btn-icon {

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 12px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 16px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 12px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 16px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-button/_tailwind-dark-definition.scss

@@ -1,7 +1,5 @@
-@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 *;
+
 $drop-down-btn-arrow-content: '\e706' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-button/_tailwind-definition.scss

@@ -1,7 +1,5 @@
-@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 *;
+
 $drop-down-btn-arrow-content: '\e706' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-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 *;
+
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-button/_theme.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('drop-down-button-theme') {
   .e-dropdown-popup {
@@ -67,7 +68,7 @@
         &:focus-visible {
           @if $theme-name == 'fluent2' {
             background-color: $flyout-bg-color-focus;
-            box-shadow: $btn-keyboard-focus-box-shadow;
+            box-shadow: btn.$btn-keyboard-focus-box-shadow;
             color: $flyout-text-color-focus;
 
             & .e-menu-icon {

package/styles/drop-down-button/_variables.scss

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';