@syncfusion/ej2-layouts 19.4.47 → 20.1.47

package/styles/fluent.scss

@@ -0,0 +1,4 @@
+@import 'avatar/fluent.scss';
+@import 'card/fluent.scss';
+@import 'splitter/fluent.scss';
+@import 'dashboard-layout/fluent.scss';

package/styles/highcontrast-light.css

@@ -762,7 +762,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -770,7 +770,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -980,14 +980,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/highcontrast.css

@@ -776,7 +776,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -784,7 +784,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -994,14 +994,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/material-dark.css

@@ -762,7 +762,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -770,7 +770,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -980,14 +980,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/material.css

@@ -763,7 +763,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -771,7 +771,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -981,14 +981,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

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

@@ -10,6 +10,7 @@ $splitpane-font-family: $font-family !default;
 $splitpane-font-color: $grey-dark-font !default;
 $splitbar-border-color: $grey-88 !default;
 $splitbar-hover-border-color: $brand-primary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
 $splitbar-icon-color: $grey-dark-font !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $grey-base !default;

package/styles/splitter/_bootstrap-definition.scss

@@ -10,6 +10,7 @@ $splitpane-font-family: $font-family !default;
 $splitpane-font-color: $grey !default;
 $splitbar-border-color: $grey-dd !default;
 $splitbar-hover-border-color: $brand-primary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
 $splitbar-icon-color: $grey-light-font !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $grey-white !default;

package/styles/splitter/_bootstrap4-definition.scss

@@ -10,6 +10,7 @@ $splitpane-font-family: $font-family !default;
 $splitpane-font-color:  $gray-900 !default;
 $splitbar-border-color: $gray-300 !default;
 $splitbar-hover-border-color: $primary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
 $splitbar-icon-color: $gray-700 !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $white !default;

package/styles/splitter/_bootstrap5-definition.scss

@@ -11,14 +11,15 @@ $bigger-splitbar-icon-size: 16px !default;
 //Layout Variables End
 
 //Theme Variables Start
-$navigation-arrow-background: $primary-text-color !default; // Ask UI Team
-$navigation-icon-background-hover: $primary !default;// Ask UI Team
-$navigation-icon-border-hover: $primary !default;// Ask UI Team
+$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;// Ask UI Team
+$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;

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

@@ -10,6 +10,7 @@ $splitpane-font-family: $font-family !default;
 $splitpane-font-color: $neutral-light-font !default;
 $splitbar-border-color: $neutral-light !default;
 $splitbar-hover-border-color: $theme-tertiary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
 $splitbar-icon-color: $neutral-light-font !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $neutral-white !default;

package/styles/splitter/_fabric-definition.scss

@@ -10,6 +10,7 @@ $splitpane-font-family: $font-family !default;
 $splitpane-font-color: $neutral-light-font !default;
 $splitbar-border-color: $neutral-quintenaryalt !default;
 $splitbar-hover-border-color: $theme-primary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
 $splitbar-icon-color: $neutral-light-font !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $neutral-white !default;

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

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/splitter/_fluent-definition.scss

@@ -10,7 +10,7 @@ $bigger-splitbar-icon-size: 16px !default;
 //Layout Variables End
 
 //Theme Variables Start
-$navigation-arrow-background: $primary-text-color !default;
+$navigation-arrow-background: $transparent !default;
 $navigation-icon-background-hover: $primary !default;
 $navigation-icon-border-hover: $primary !default;
 $splitter-border-color: $border-light !default;
@@ -21,6 +21,7 @@ $splitbar-hover-border-color: $primary !default;
 $splitbar-icon-color: $icon-color !default;
 $collapse-icon-bg-color: $primary-text-color !default;
 $resize-icon-bg-color: $content-bg-color !default;
+$resize-icon-hover-color: $primary-text-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;

package/styles/splitter/_highcontrast-definition.scss

@@ -10,6 +10,7 @@ $splitpane-font-family: $font-family !default;
 $splitpane-font-color: $content-font !default;
 $splitbar-border-color: $border-fg !default;
 $splitbar-hover-border-color: $selection-bg !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
 $splitbar-icon-color: $content-font !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $bg-base-0 !default;

package/styles/splitter/_highcontrast-light-definition.scss

@@ -10,6 +10,7 @@ $splitpane-font-family: $font-family !default;
 $splitpane-font-color: $content-font !default;
 $splitbar-border-color: $border-fg !default;
 $splitbar-hover-border-color: $selection-bg !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
 $splitbar-icon-color: $content-font !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $bg-base-0 !default;

package/styles/splitter/_layout.scss

@@ -90,7 +90,7 @@
             .e-navigate-arrow {
               &:not(.e-arrow-down) {
                 border-radius: 50%;
-                bottom: 18px;
+                bottom: 20px;
                 right: 22px;
               }
 
@@ -98,7 +98,7 @@
                 border-radius: 50%;
                 left: 22px;
                 right: auto;
-                top: 18px;
+                top: 20px;
 
                 &::after {
                   right: auto;
@@ -310,14 +310,14 @@
 
           &:not(.e-arrow-down) {
             border-radius: 50%;
-            bottom: 18px;
+            bottom: 20px;
             left: 22px;
          }
 
           &.e-arrow-down {
             border-radius: 50%;
             right: 22px;
-            top: 18px;
+            top: 20px;
           }
 
           &.e-arrow-down::before,

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

@@ -10,6 +10,7 @@ $splitpane-font-family: $font-family !default;
 $splitpane-font-color: $grey-dark-font !default;
 $splitbar-border-color: $grey-700 !default;
 $splitbar-hover-border-color: $accent !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
 $splitbar-icon-color: rgba($grey-dark-font, .7) !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $grey-dark !default;

package/styles/splitter/_material-definition.scss

@@ -11,6 +11,7 @@ $splitpane-font-family: $font-family !default;
 $splitpane-font-color: rgba($grey-light-font, .87) !default;
 $splitbar-border-color: $grey-300 !default;
 $splitbar-hover-border-color: $accent !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
 $splitbar-icon-color: rgba($grey-light-font, .54) !default;
 $splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $grey-white !default;

package/styles/splitter/_tailwind-definition.scss

@@ -11,7 +11,7 @@ $bigger-splitbar-icon-size: 16px !default;
 //Layout Variables End
 
 //Theme Variables Start
-$navigation-arrow-background: $primary-text-color !default;
+$navigation-arrow-background: $transparent !default;
 $navigation-icon-background-hover: $primary !default;
 $navigation-icon-border-hover: $primary !default;
 $splitter-border-color: $border-light !default;
@@ -19,6 +19,7 @@ $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;

package/styles/splitter/bootstrap-dark.css

@@ -117,7 +117,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -125,7 +125,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -335,14 +335,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/splitter/bootstrap.css

@@ -117,7 +117,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -125,7 +125,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -335,14 +335,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/splitter/bootstrap4.css

@@ -116,7 +116,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -124,7 +124,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -334,14 +334,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/splitter/bootstrap5-dark.css

@@ -108,7 +108,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -116,7 +116,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -326,14 +326,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -455,7 +455,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -510,7 +510,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;

package/styles/splitter/bootstrap5.css

@@ -108,7 +108,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -116,7 +116,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -326,14 +326,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -455,7 +455,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -510,7 +510,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;

package/styles/splitter/fabric-dark.css

@@ -117,7 +117,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -125,7 +125,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -335,14 +335,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/splitter/fabric.css

@@ -117,7 +117,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -125,7 +125,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -335,14 +335,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {