@syncfusion/ej2-layouts 31.2.12 → 32.1.19

package/styles/splitter/_tailwind-dark-definition.scss

@@ -1 +1,79 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+//Layout Variables Start
+$splitpane-font-size: $text-sm !default;
+$splitpane-font-weight: $font-weight-normal !default;
+$splitpane-font-family: $font-family !default;
+$splitbar-icon-size: 14px !default;
+$splitbar-icon-gap: 18px !default;
+$splitbar-icon-height: 18px !default;
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitbar-icon-height: 20px !default;
+$bigger-splitpane-font-size: $text-base !default;
+$bigger-splitbar-icon-size: 16px !default;
+$splitbar-border-width: 1px !default;
+$splitbar-arrow-border-radius: 50% !default;
+$splitbar-resizable-height: 100% !default;
+$splitbar-arrow-height: 26px !default;
+$splitbar-arrow-segment-radius: 16px !default;
+$splitbar-arrow-segment-height: 8px !default;
+$splitbar-vertical-resizable-height: 16px !default;
+$splitbar-vertical-handler-height: 1px !default;
+$splitter-border-none: 0 !default;
+$split-bar-vertical-navigate-arrow-margin-top: -2px !default;
+$split-bar-vertical-navigate-arrow-down-margin-top: 2px !default;
+$split-bar-horizontal-navigate-arrow-padding: 1px 12px !default;
+$splitbar-horizontal-last-bar-margin: 0 3px !default;
+$splitbar-horizontal-bar-margin: 0 0 0 3px !default;
+$split-bar-vertical-navigate-arrow-padding: 10px 3px 10px 18px !default;
+$split-bar-horizontal-navigate-arrow-left-margin-left: -26px !default;
+$splitbar-vertical-last-bar-margin: 3px 0 !default;
+$splitbar-vertical-bar-margin: 3px 0 0 !default;
+$splitter-navigate-arrow-left: 5px !default;
+$splitter-navigate-arrow-right: 5px !default;
+$splitter-horizontal-navigate-arrow-right: 8px !default;
+$splitter-navigate-arrow-transform-origin-before: 1px 7px 0 !default;
+$splitter-navigate-arrow-top-before: 5px !default;
+$splitter-navigate-arrow-transform-origin-after: 1px 1px 0 !default;
+$splitter-navigate-arrow-top-after: 11px !default;
+$splitter-navigate-arrow-width: 2px !default;
+$splitter-navigate-right-arrow-left: 8px !default;
+$splitter-navigate-right-arrow-right: 3px !default;
+$splitter-vertical-navigate-arrow-topbottom: 20px !default;
+$splitter-vertical-navigate-arrow-left: 22px !default;
+$splitter-vertical-navigate-arrow-up-top-before: 3px !default;
+$splitter-vertical-navigate-arrow-up-transform-origin-before: 2px 7px 0 !default;
+$splitter-vertical-navigate-arrow-up-top-after: 8px !default;
+$splitter-vertical-navigate-arrow-up-transform-origin-after: 1px 1px 0 !default;
+$splitter-vertical-navarrow-up-left: 10px !default;
+$splitter-vertical-navarrow-up-left-after: 11px !default;
+$splitter-vertical-navigate-arrow-down-left-after: 10px !default;
+$splitter-vertical-navigate-arrow-down-top-after: 12px !default;
+$splitter-vertical-navarrow-transform-origin-after: 1px 2px 0 !default;
+$splitter-vertical-navigate-arrow-down-left-before: 12px !default;
+$splitter-vertical-navigate-arrow-down-top-before: 8px !default;
+$splitter-vertical-navarrow-transform-origin-before: 1px 6px 0 !default;
+$splitter-vertical-nav-arrow-width: 26px !default;
+
+//Layout Variables End
+
+//Theme Variables Start
+$navigation-arrow-background: $transparent !default;
+$navigation-icon-background-hover: $primary !default;
+$navigation-icon-border-hover: $primary !default;
+$splitter-border-color: $border-light !default;
+$splitter-background-color: $primary-text-color !default;
+$splitpane-font-color: $content-text-color !default;
+$splitbar-border-color: $border-light !default;
+$splitbar-hover-border-color: $primary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: $icon-color !default;
+$collapse-icon-bg-color: $primary-text-color !default;
+$resize-icon-bg-color: $content-bg-color !default;
+$split-bar-border-left: 1px solid $border-light !default;
+$split-bar-border-right: 1px solid $border-light !default;
+$split-bar-hover-border-left: 1px solid $splitbar-hover-border-color !default;
+$split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
+
+//Theme Variables End

package/styles/splitter/_tailwind-definition.scss

@@ -1,12 +1,60 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+
 //Layout Variables Start
 $splitpane-font-size: $text-sm !default;
 $splitpane-font-weight: $font-weight-normal !default;
 $splitpane-font-family: $font-family !default;
 $splitbar-icon-size: 14px !default;
 $splitbar-icon-gap: 18px !default;
+$splitbar-icon-height: 18px !default;
 $bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitbar-icon-height: 20px !default;
 $bigger-splitpane-font-size: $text-base !default;
 $bigger-splitbar-icon-size: 16px !default;
+$splitbar-border-width: 1px !default;
+$splitbar-arrow-border-radius: 50% !default;
+$splitbar-resizable-height: 100% !default;
+$splitbar-arrow-height: 26px !default;
+$splitbar-arrow-segment-radius: 16px !default;
+$splitbar-arrow-segment-height: 8px !default;
+$splitbar-vertical-resizable-height: 16px !default;
+$splitbar-vertical-handler-height: 1px !default;
+$splitter-border-none: 0 !default;
+$split-bar-vertical-navigate-arrow-margin-top: -2px !default;
+$split-bar-vertical-navigate-arrow-down-margin-top: 2px !default;
+$split-bar-horizontal-navigate-arrow-padding: 1px 12px !default;
+$splitbar-horizontal-last-bar-margin: 0 3px !default;
+$splitbar-horizontal-bar-margin: 0 0 0 3px !default;
+$split-bar-vertical-navigate-arrow-padding: 10px 3px 10px 18px !default;
+$split-bar-horizontal-navigate-arrow-left-margin-left: -26px !default;
+$splitbar-vertical-last-bar-margin: 3px 0 !default;
+$splitbar-vertical-bar-margin: 3px 0 0 !default;
+$splitter-navigate-arrow-left: 5px !default;
+$splitter-navigate-arrow-right: 5px !default;
+$splitter-horizontal-navigate-arrow-right: 8px !default;
+$splitter-navigate-arrow-transform-origin-before: 1px 7px 0 !default;
+$splitter-navigate-arrow-top-before: 5px !default;
+$splitter-navigate-arrow-transform-origin-after: 1px 1px 0 !default;
+$splitter-navigate-arrow-top-after: 11px !default;
+$splitter-navigate-arrow-width: 2px !default;
+$splitter-navigate-right-arrow-left: 8px !default;
+$splitter-navigate-right-arrow-right: 3px !default;
+$splitter-vertical-navigate-arrow-topbottom: 20px !default;
+$splitter-vertical-navigate-arrow-left: 22px !default;
+$splitter-vertical-navigate-arrow-up-top-before: 3px !default;
+$splitter-vertical-navigate-arrow-up-transform-origin-before: 2px 7px 0 !default;
+$splitter-vertical-navigate-arrow-up-top-after: 8px !default;
+$splitter-vertical-navigate-arrow-up-transform-origin-after: 1px 1px 0 !default;
+$splitter-vertical-navarrow-up-left: 10px !default;
+$splitter-vertical-navarrow-up-left-after: 11px !default;
+$splitter-vertical-navigate-arrow-down-left-after: 10px !default;
+$splitter-vertical-navigate-arrow-down-top-after: 12px !default;
+$splitter-vertical-navarrow-transform-origin-after: 1px 2px 0 !default;
+$splitter-vertical-navigate-arrow-down-left-before: 12px !default;
+$splitter-vertical-navigate-arrow-down-top-before: 8px !default;
+$splitter-vertical-navarrow-transform-origin-before: 1px 6px 0 !default;
+$splitter-vertical-nav-arrow-width: 26px !default;
 
 //Layout Variables End
 

package/styles/splitter/_tailwind3-definition.scss

@@ -1,12 +1,60 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+
 //Layout Variables Start
 $splitpane-font-size: $text-sm !default;
 $splitpane-font-weight: $font-weight-normal !default;
 $splitpane-font-family: $font-family !default;
 $splitbar-icon-size: 14px !default;
 $splitbar-icon-gap: 18px !default;
+$splitbar-icon-height: 18px !default;
 $bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitbar-icon-height: 20px !default;
 $bigger-splitpane-font-size: $text-base !default;
 $bigger-splitbar-icon-size: 16px !default;
+$splitbar-border-width: 1px !default;
+$splitbar-arrow-border-radius: $border-radius-50p !default;
+$splitbar-resizable-height: 100% !default;
+$splitbar-arrow-height: 26px !default;
+$splitbar-arrow-segment-radius: $radius-16 !default;
+$splitbar-arrow-segment-height: 8px !default;
+$splitbar-vertical-resizable-height: 16px !default;
+$splitbar-vertical-handler-height: 1px !default;
+$splitter-border-none: 0 !default;
+$split-bar-vertical-navigate-arrow-margin-top: -2px !default;
+$split-bar-vertical-navigate-arrow-down-margin-top: 2px !default;
+$split-bar-horizontal-navigate-arrow-padding: 1px 12px !default;
+$splitbar-horizontal-last-bar-margin: 0 3px !default;
+$splitbar-horizontal-bar-margin: 0 0 0 3px !default;
+$split-bar-vertical-navigate-arrow-padding: 10px 3px 10px 12px !default;
+$split-bar-horizontal-navigate-arrow-left-margin-left: -26px !default;
+$splitbar-vertical-last-bar-margin: 3px 0 !default;
+$splitbar-vertical-bar-margin: 3px 0 0 !default;
+$splitter-navigate-arrow-right: 5px !default;
+$splitter-navigate-arrow-left: 5px !default;
+$splitter-horizontal-navigate-arrow-right: 8px !default;
+$splitter-navigate-arrow-top-before: 5px !default;
+$splitter-navigate-arrow-transform-origin-before: 1px 7px 0 !default;
+$splitter-navigate-arrow-top-after: 11px !default;
+$splitter-navigate-arrow-transform-origin-after: 1px 1px 0 !default;
+$splitter-navigate-arrow-width: 2px !default;
+$splitter-navigate-right-arrow-left: 8px !default;
+$splitter-navigate-right-arrow-right: 3px !default;
+$splitter-vertical-navigate-arrow-topbottom: 20px !default;
+$splitter-vertical-navigate-arrow-left: 22px !default;
+$splitter-vertical-navigate-arrow-up-top-before: 3px !default;
+$splitter-vertical-navigate-arrow-up-transform-origin-before: 2px 7px 0 !default;
+$splitter-vertical-navigate-arrow-up-top-after: 8px !default;
+$splitter-vertical-navigate-arrow-up-transform-origin-after: 1px 1px 0 !default;
+$splitter-vertical-navarrow-up-left: 10px !default;
+$splitter-vertical-navarrow-up-left-after: 11px !default;
+$splitter-vertical-navigate-arrow-down-left-after: 10px !default;
+$splitter-vertical-navigate-arrow-down-top-after: 12px !default;
+$splitter-vertical-navarrow-transform-origin-after: 1px 2px 0 !default;
+$splitter-vertical-navigate-arrow-down-left-before: 12px !default;
+$splitter-vertical-navigate-arrow-down-top-before: 8px !default;
+$splitter-vertical-navarrow-transform-origin-before: 1px 6px 0 !default;
+$splitter-vertical-nav-arrow-width: 26px !default;
 
 //Layout Variables End
 

package/styles/splitter/_theme-variables.scss

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

package/styles/splitter/_theme.scss

@@ -1,8 +1,10 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('splitter-theme') {
   .e-splitter {
     &.e-splitter-horizontal,
     &.e-splitter-vertical {
-      border: solid 1px $splitter-border-color;
+      border: solid $splitbar-border-width $splitter-border-color;
 
       .e-pane {
         color: $splitpane-font-color;
@@ -61,7 +63,7 @@
             &.e-arrow-right {
               background-color: $navigation-arrow-background;
               border-color: $navigation-icon-border-hover;
-              border-width: 1px;
+              border-width: $splitbar-border-width;
               opacity: .9;
             }
           }
@@ -127,7 +129,7 @@
             &.e-arrow-down {
               background-color: $navigation-arrow-background;
               border-color: $navigation-icon-border-hover;
-              border-width: 1px;
+              border-width: $splitbar-border-width;
               opacity: .9;
             }
           }

package/styles/splitter/bds.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/bootstrap-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/bootstrap.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'bootstrap-definition' as *;
+@use 'icons/bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/bootstrap4.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'bootstrap4-definition.scss';
-@import 'icons/bootstrap4.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'bootstrap4-definition' as *;
+@use 'icons/bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/bootstrap5-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'icons/bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/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 */
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler::before {
   content: "\e7e3";
   font-family: "e-icons";
@@ -28,7 +108,7 @@
   -webkit-box-flex: 1;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 400;
 }
@@ -182,7 +262,7 @@
   position: relative;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::after {
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
   content: "";
   height: 8px;
   position: absolute;
@@ -272,18 +352,18 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow {
   -o-border-image: none;
      border-image: none;
-  border-width: 0;
+  border-width: none;
   cursor: pointer;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 26px;
-  padding: 10px 3px 10px 18px;
+  padding: 10px 8px 3px 18px;
   position: relative;
   width: 26px;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::after {
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
   content: "";
   height: 8px;
   position: absolute;

package/styles/splitter/bootstrap5.3.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'icons/bootstrap5.3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'icons/bootstrap5.3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/bootstrap5.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'bootstrap5-definition.scss';
-@import 'icons/bootstrap5.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'bootstrap5-definition' as *;
+@use 'icons/bootstrap5' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/fabric-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'fabric-dark-definition' as *;
+@use 'icons/fabric-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/fabric.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'fabric-definition' as *;
+@use 'icons/fabric' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/fluent-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'fluent-dark-definition' as *;
+@use 'icons/fluent-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/fluent.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'fluent-definition.scss';
-@import 'icons/fluent.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'fluent-definition' as *;
+@use 'icons/fluent' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/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 */
+
+
+
+
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler::before {
   content: "\e7e3";
   font-family: "e-icons";
@@ -30,7 +110,7 @@
   -webkit-box-flex: 1;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 400;
 }
@@ -184,7 +264,7 @@
   position: relative;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::after {
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
   content: "";
   height: 8px;
   position: absolute;
@@ -285,7 +365,7 @@
   width: 26px;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::after {
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
   content: "";
   height: 8px;
   position: absolute;

package/styles/splitter/fluent2.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'fluent2-definition.scss';
-@import 'icons/fluent2.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'fluent2-definition' as *;
+@use 'icons/fluent2' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/highcontrast-light.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'icons/highcontrast-light.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'icons/highcontrast-light' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/highcontrast.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'highcontrast-definition' as *;
+@use 'icons/highcontrast' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/splitter/icons/_bds.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bds-definition' as *;
 @include export-module('splitter-material-icons') {
   .e-splitter {
     .e-split-bar {

package/styles/splitter/icons/_bootstrap-dark.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap-definition' as *;
 @include export-module('splitter-bootstrap-icons') {
   .e-splitter {
     .e-split-bar {