@syncfusion/ej2-layouts 31.2.12 → 32.1.24

package/styles/splitter/_layout.bootstrap4.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap4';
+@import './_layout';

package/styles/splitter/_layout.bootstrap5-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap5-dark';
+@import './_layout';

package/styles/splitter/_layout.bootstrap5.3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap5.3';
+@import './_layout';

package/styles/splitter/_layout.bootstrap5.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap5';
+@import './_layout';

package/styles/splitter/_layout.fabric-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fabric-dark';
+@import './_layout';

package/styles/splitter/_layout.fabric.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fabric';
+@import './_layout';

package/styles/splitter/_layout.fluent-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fluent-dark';
+@import './_layout';

package/styles/splitter/_layout.fluent.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fluent';
+@import './_layout';

package/styles/splitter/_layout.fluent2.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fluent2';
+@import './_layout';

package/styles/splitter/_layout.highcontrast-light.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.highcontrast-light';
+@import './_layout';

package/styles/splitter/_layout.highcontrast.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.highcontrast';
+@import './_layout';

package/styles/splitter/_layout.material-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material-dark';
+@import './_layout';

package/styles/splitter/_layout.material.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material';
+@import './_layout';

package/styles/splitter/_layout.material3-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material3-dark';
+@import './_layout';

package/styles/splitter/_layout.material3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material3';
+@import './_layout';

package/styles/splitter/_layout.scss

@@ -1,8 +1,9 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('splitter-layout') {
   .e-splitter {
     &.e-splitter-horizontal,
     &.e-splitter-vertical {
-      border-width: 1px;
+      border-width: $splitbar-border-width;
       display: flex;
       overflow: hidden;
       position: relative;
@@ -92,16 +93,16 @@
 
             .e-navigate-arrow {
               &:not(.e-arrow-down) {
-                border-radius: 50%;
-                bottom: 20px;
-                right: 22px;
+                border-radius: $splitbar-arrow-border-radius;
+                bottom: $splitter-vertical-navigate-arrow-topbottom;
+                right: $splitter-vertical-navigate-arrow-left;
               }
 
               &.e-arrow-down {
-                border-radius: 50%;
-                left: 22px;
+                border-radius: $splitbar-arrow-border-radius;
+                left: $splitter-vertical-navigate-arrow-left;
                 right: auto;
-                top: 20px;
+                top: $splitter-vertical-navigate-arrow-topbottom;
 
                 &::after {
                   right: auto;
@@ -134,7 +135,7 @@
           content: '';
           cursor: col-resize;
           display: block;
-          height: 100%;
+          height: $splitbar-resizable-height;
           position: absolute;
           width: 16px;
           z-index: 10;
@@ -143,7 +144,7 @@
         .e-resize-handler {
           align-items: center;
           display: flex;
-          height: $splitbar-icon-gap;
+          height: $splitbar-icon-height;
           justify-content: center;
           position: relative;
           width: 1px;
@@ -155,61 +156,61 @@
 
         .e-navigate-arrow:not(.e-arrow-right)::before,
         .e-navigate-arrow:not(.e-arrow-right)::after {
-          left: 8px;
-          right: 3px;
+          left: $splitter-navigate-right-arrow-left;
+          right: $splitter-navigate-right-arrow-right;
         }
 
         .e-navigate-arrow {
           border-image: none;
-          border-width: 1px;
+          border-width: $splitbar-border-width;
           cursor: pointer;
           display: flex;
-          height: 26px;
-          padding: 1px 12px;
+          height: $splitbar-arrow-height;
+          padding: $split-bar-horizontal-navigate-arrow-padding;
           position: relative;
 
           &::before,
           &::after {
-            border-radius: 16px;
+            border-radius: $splitbar-arrow-segment-radius;
             content: '';
-            height: 8px;
+            height: $splitbar-arrow-segment-height;
             position: absolute;
             transform: rotate(0deg);
-            width: 2px;
+            width: $splitter-navigate-arrow-width;
           }
 
           &::before {
-            top: 5px;
-            transform-origin: 1px 7px 0;
+            top: $splitter-navigate-arrow-top-before;
+            transform-origin: $splitter-navigate-arrow-transform-origin-before;
           }
 
           &::after {
-            top: 11px;
-            transform-origin: 1px 1px 0;
+            top: $splitter-navigate-arrow-top-after;
+            transform-origin: $splitter-navigate-arrow-transform-origin-after;
           }
 
           &:not(.e-arrow-right) {
-            border-radius: 50%;
-            right: 5px;
+            border-radius: $splitbar-arrow-border-radius;
+            right: $splitter-navigate-arrow-left;
           }
 
           &.e-arrow-right {
-            border-radius: 50%;
-            left: 5px;
+            border-radius: $splitbar-arrow-border-radius;
+            left: $splitter-navigate-arrow-right;
           }
 
           &.e-arrow-right::before,
           &.e-arrow-right::after {
-            right: 8px;
+            right: $splitter-horizontal-navigate-arrow-right;
           }
         }
 
         &.e-last-bar:not(.e-resizable-split-bar) {
-          margin: 0 3px;
+          margin: $splitbar-horizontal-last-bar-margin;
         }
 
         &:not(.e-resizable-split-bar) {
-          margin: 0 0 0 3px;
+          margin: $splitbar-horizontal-bar-margin;
         }
       }
 
@@ -234,7 +235,7 @@
           content: '';
           cursor: row-resize;
           display: block;
-          height: 16px;
+          height: $splitbar-vertical-resizable-height;
           position: absolute;
           width: 100%;
           z-index: 12;
@@ -243,7 +244,7 @@
         .e-resize-handler {
           align-items: center;
           display: flex;
-          height: 1px;
+          height: $splitbar-vertical-handler-height;
           justify-content: center;
           width: $splitbar-icon-gap;
 
@@ -254,70 +255,70 @@
 
         .e-navigate-arrow:not(.e-arrow-down)::before,
         .e-navigate-arrow:not(.e-arrow-down)::after {
-          left: 10px;
+          left: $splitter-vertical-navarrow-up-left;
         }
 
         .e-navigate-arrow {
           border-image: none;
-          border-width: 0;
+          border-width: $splitter-border-none;
           cursor: pointer;
           display: flex;
-          height: 26px;
-          padding: 10px 3px 10px 18px;
+          height: $splitbar-arrow-height;
+          padding: $split-bar-vertical-navigate-arrow-padding;
           position: relative;
-          width: 26px;
+          width: $splitter-vertical-nav-arrow-width;
 
           &::before,
           &::after {
-            border-radius: 16px;
+            border-radius: $splitbar-arrow-segment-radius;
             content: '';
-            height: 8px;
+            height: $splitbar-arrow-segment-height;
             position: absolute;
             transform: rotate(90deg);
-            width: 2px;
+            width: $splitter-navigate-arrow-width;
           }
 
           &:not(.e-arrow-down) {
             &::before {
-              top: 3px;
-              transform-origin: 2px 7px 0;
+              top: $splitter-vertical-navigate-arrow-up-top-before;
+              transform-origin: $splitter-vertical-navigate-arrow-up-transform-origin-before;
             }
           }
 
           &:not(.e-arrow-down) {
             &::after {
-              left: 11px;
-              top: 8px;
-              transform-origin: 1px 1px 0;
+              left: $splitter-vertical-navarrow-up-left-after;
+              top: $splitter-vertical-navigate-arrow-up-top-after;
+              transform-origin: $splitter-vertical-navigate-arrow-up-transform-origin-after;
             }
           }
 
           &.e-arrow-down {
             &::before {
-              left: 12px;
-              top: 8px;
-              transform-origin: 1px 6px 0;
+              left: $splitter-vertical-navigate-arrow-down-left-before;
+              top: $splitter-vertical-navigate-arrow-down-top-before;
+              transform-origin: $splitter-vertical-navarrow-transform-origin-before;
             }
           }
 
           &.e-arrow-down {
             &::after {
-              left: 10px;
-              top: 12px;
-              transform-origin: 1px 2px 0;
+              left: $splitter-vertical-navigate-arrow-down-left-after;
+              top: $splitter-vertical-navigate-arrow-down-top-after;
+              transform-origin: $splitter-vertical-navarrow-transform-origin-after;
             }
           }
 
           &:not(.e-arrow-down) {
-            border-radius: 50%;
-            bottom: 20px;
-            left: 22px;
+            border-radius: $splitbar-arrow-border-radius;
+            bottom: $splitter-vertical-navigate-arrow-topbottom;
+            left: $splitter-vertical-navigate-arrow-left;
           }
 
           &.e-arrow-down {
-            border-radius: 50%;
-            right: 22px;
-            top: 20px;
+            border-radius: $splitbar-arrow-border-radius;
+            right: $splitter-vertical-navigate-arrow-left;
+            top: $splitter-vertical-navigate-arrow-topbottom;
           }
 
           &.e-arrow-down::before,
@@ -327,11 +328,11 @@
         }
 
         &.e-last-bar:not(.e-resizable-split-bar) {
-          margin: 3px 0;
+          margin: $splitbar-vertical-last-bar-margin;
         }
 
         &:not(.e-resizable-split-bar) {
-          margin: 3px 0 0;
+          margin: $splitbar-vertical-bar-margin;
         }
       }
       .e-navigate-arrow {
@@ -352,7 +353,7 @@
   }
 
   .e-splitter.e-ie .e-navigate-arrow.e-arrow-left {
-    margin-left: -26px;
+    margin-left: $split-bar-horizontal-navigate-arrow-left-margin-left;
   }
 
   .e-splitter.e-ie .e-split-bar-horizontal .e-resize-handler {

package/styles/splitter/_layout.tailwind-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.tailwind-dark';
+@import './_layout';

package/styles/splitter/_layout.tailwind.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.tailwind';
+@import './_layout';

package/styles/splitter/_layout.tailwind3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.tailwind3';
+@import './_layout';

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
 $navigation-arrow-background: #000 !default;
 $navigation-icon-background-hover: rgba(255, 128, 171, 1) !default;
 $navigation-icon-border-hover: rgba(255, 128, 171, .5) !default;
@@ -14,13 +16,58 @@ $splitbar-icon-color: rgba($grey-dark-font, .7) !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $grey-dark !default;
 $splitbar-icon-gap: 18px !default;
+$splitbar-icon-height: 18px !default;
 $resize-icon-bg-color: $grey-dark !default;
 $split-bar-border-left: none !default;
 $split-bar-border-right: none !default;
 $split-bar-hover-border-left: none !default;
 $split-bar-hover-border-right: none !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;
 
 // Bigger style
 $bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitbar-icon-height: 20px !default;
 $bigger-splitpane-font-size: 14px !default;
 $bigger-splitbar-icon-size: 16px !default;

package/styles/splitter/_material-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
+
 /*! component's default definitions and variables */
 $navigation-arrow-background: $grey-white !default;
 $navigation-icon-background-hover: $accent !default;
@@ -15,13 +18,58 @@ $splitbar-icon-color: rgba($grey-light-font, .54) !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $grey-white !default;
 $splitbar-icon-gap: 18px !default;
+$splitbar-icon-height: 18px !default;
 $resize-icon-bg-color: $grey-white !default;
 $split-bar-border-left: none !default;
 $split-bar-border-right: none !default;
 $split-bar-hover-border-left: none !default;
 $split-bar-hover-border-right: none !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;
 
 // Bigger style
 $bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitbar-icon-height: 20px !default;
 $bigger-splitpane-font-size: 14px !default;
 $bigger-splitbar-icon-size: 16px !default;

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

@@ -1 +1,71 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$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;
+$navigation-arrow-background: $transparent !default;
+$navigation-icon-background-hover: rgba($primary) !default;
+$navigation-icon-border-hover: rgba($primary) !default;
+$splitter-border-color: rgba($border-light) !default;
+$splitter-background-color: rgba($primary-text-color) !default;
+$splitpane-font-color: rgba($content-text-color) !default;
+$splitbar-border-color: rgba($border-light) !default;
+$splitbar-hover-border-color: rgba($primary) !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: rgba($icon-color) !default;
+$collapse-icon-bg-color: rgba($primary-text-color) !default;
+$resize-icon-bg-color: rgba($content-bg-color) !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !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 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-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;

package/styles/splitter/_material3-definition.scss

@@ -1,9 +1,13 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $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;
 $navigation-arrow-background: $transparent !default;
@@ -22,3 +26,46 @@ $split-bar-border-left: none !default;
 $split-bar-border-right: none !default;
 $split-bar-hover-border-left: none !default;
 $split-bar-hover-border-right: none !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 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-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;