@syncfusion/ej2-layouts 19.2.60 → 19.3.43

package/styles/fabric.css

@@ -662,6 +662,10 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e984';
   font-family: 'e-icons';
@@ -669,6 +673,10 @@
   transform: rotate(90deg);
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

package/styles/highcontrast-light.css

@@ -649,6 +649,10 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e984';
   font-family: 'e-icons';
@@ -656,6 +660,10 @@
   transform: rotate(90deg);
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

package/styles/highcontrast.css

@@ -663,6 +663,10 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e984';
   font-family: 'e-icons';
@@ -670,6 +674,10 @@
   transform: rotate(90deg);
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

package/styles/material-dark.css

@@ -650,12 +650,20 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\eb04';
   font-family: 'e-icons';
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }
@@ -1088,12 +1096,12 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
-  background: #ff80ab;
+  background: #00b0ff;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
   background: #303030;
-  color: #ff80ab;
+  color: #00b0ff;
 }
 
 .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 {
@@ -1128,12 +1136,12 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
-  background: #ff80ab;
+  background: #00b0ff;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
   background: #303030;
-  color: #ff80ab;
+  color: #00b0ff;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical {
@@ -1146,7 +1154,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
-  background: #ff80ab;
+  background: #00b0ff;
 }
 
 .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 {
@@ -1158,7 +1166,7 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {
   background: #303030;
-  color: #ff80ab;
+  color: #00b0ff;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up::before, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up::before {
@@ -1200,12 +1208,12 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
-  background: #ff80ab;
+  background: #00b0ff;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {
   background: #303030;
-  color: #ff80ab;
+  color: #00b0ff;
 }
 
 .e-splitter.e-disabled {
@@ -1330,7 +1338,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel:active {
-  border: 1px #ff80ab solid;
+  border: 1px #00b0ff solid;
 }
 
 .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-dl-icon {
@@ -1465,8 +1473,8 @@
 }
 
 .e-dashboardlayout.e-control .e-holder {
-  background: rgba(255, 128, 171, 0.25);
-  border: 2px rgba(255, 128, 171, 0.25) dotted;
+  background: rgba(0, 176, 255, 0.25);
+  border: 2px rgba(0, 176, 255, 0.25) dotted;
   border-radius: 0;
   position: absolute;
   border-radius: 2px;

package/styles/material.css

@@ -651,12 +651,20 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\eb04';
   font-family: 'e-icons';
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

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

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

package/styles/splitter/_bootstrap5-definition.scss

@@ -0,0 +1,26 @@
+$skin-name: 'bootstrap' !default;
+//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;
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: $text-base !default;
+$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
+$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-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;
+$split-bar-border: none !default;
+//Theme Variables End

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

@@ -1,23 +1 @@
-/*! component's default definitions and variables */
-$skin-name: 'tailwind-dark' !default;
-$navigation-arrow-background: $primary-text-color !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-size: $text-sm  !default;
-$splitpane-font-weight: $font-weight-normal !default;
-$splitpane-font-family: $font-family !default;
-$splitpane-font-color: $content-text-color !default;
-$splitbar-border-color: $border-light !default;
-$splitbar-hover-border-color: $primary !default;
-$splitbar-icon-color: $icon-color !default;
-$splitbar-icon-size: 14px !default;
-$collapse-icon-bg-color: $primary-text-color !default;
-$splitbar-icon-gap: 18px !default;
-$resize-icon-bg-color: $primary-text-color !default;
-$split-bar-border: none !default;
-// Bigger style
-$bigger-splitbar-icon-gap: 20px !default;
-$bigger-splitpane-font-size: $text-base !default;
-$bigger-splitbar-icon-size: 16px !default;
+@import './tailwind-definition.scss';

package/styles/splitter/_tailwind-definition.scss

@@ -1,23 +1,26 @@
-/*! component's default definitions and variables */
 $skin-name: 'tailwind' !default;
+//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;
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: $text-base !default;
+$bigger-splitbar-icon-size: 16px !default;
+//Layout Variables End
+
+//Theme Variables Start
 $navigation-arrow-background: $primary-text-color !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-size: $text-sm  !default;
-$splitpane-font-weight: $font-weight-normal !default;
-$splitpane-font-family: $font-family !default;
 $splitpane-font-color: $content-text-color !default;
 $splitbar-border-color: $border-light !default;
 $splitbar-hover-border-color: $primary !default;
 $splitbar-icon-color: $icon-color !default;
-$splitbar-icon-size: 14px !default;
 $collapse-icon-bg-color: $primary-text-color !default;
-$splitbar-icon-gap: 18px !default;
-$resize-icon-bg-color: $primary-text-color !default;
+$resize-icon-bg-color: $content-bg-color !default;
 $split-bar-border: none !default;
-// Bigger style
-$bigger-splitbar-icon-gap: 20px !default;
-$bigger-splitpane-font-size: $text-base !default;
-$bigger-splitbar-icon-size: 16px !default;
+//Theme Variables End

package/styles/splitter/bootstrap-dark.css

@@ -4,6 +4,10 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e984';
   font-family: 'e-icons';
@@ -11,6 +15,10 @@
   transform: rotate(90deg);
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

package/styles/splitter/bootstrap.css

@@ -4,6 +4,10 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e984';
   font-family: 'e-icons';
@@ -11,6 +15,10 @@
   transform: rotate(90deg);
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

package/styles/splitter/bootstrap4.css

@@ -4,12 +4,20 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e71b';
   font-family: 'e-icons';
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }