@syncfusion/ej2-layouts 19.2.44 → 19.3.43

package/styles/splitter/icons/_bootstrap4.scss

@@ -7,6 +7,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
 
       &.e-split-bar-vertical {
@@ -15,6 +21,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
     }
   }

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

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

package/styles/splitter/icons/_bootstrap5.scss

@@ -0,0 +1,39 @@
+@include export-module('splitter-material-icons') {
+  .e-splitter {
+    .e-split-bar {
+      &.e-split-bar-horizontal {
+        .e-resize-handler::before {
+          content: '\e7e3';
+          font-family: 'e-icons';
+          font-size: $splitbar-icon-size;
+        }
+      }
+
+      &.e-split-bar-vertical {
+        & .e-resize-handler::before {
+          content: '\e7fd';
+          font-family: 'e-icons';
+          font-size: $splitbar-icon-size;
+        }
+      }
+    }
+  }
+
+  .e-bigger {
+    .e-splitter {
+      .e-split-bar {
+        .e-resize-handler::before {
+          font-size: $bigger-splitbar-icon-size;
+        }
+      }
+    }
+
+    &.e-splitter {
+      .e-split-bar {
+        .e-resize-handler::before {
+          font-size: $bigger-splitbar-icon-size;
+        }
+      }
+    }
+  }
+}

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

@@ -7,6 +7,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
 
       &.e-split-bar-vertical {
@@ -16,6 +22,12 @@
           font-size: $splitbar-icon-size;
           transform: rotate(90deg);
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
     }
   }

package/styles/splitter/icons/_fabric.scss

@@ -7,6 +7,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
 
       &.e-split-bar-vertical {
@@ -16,6 +22,12 @@
           font-size: $splitbar-icon-size;
           transform: rotate(90deg);
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
     }
   }

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

@@ -7,6 +7,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
 
       &.e-split-bar-vertical {
@@ -16,6 +22,12 @@
           font-size: $splitbar-icon-size;
           transform: rotate(90deg);
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
     }
   }

package/styles/splitter/icons/_highcontrast.scss

@@ -7,6 +7,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
 
       &.e-split-bar-vertical {
@@ -16,6 +22,12 @@
           font-size: $splitbar-icon-size;
           transform: rotate(90deg);
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
     }
   }

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

@@ -7,6 +7,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
 
       &.e-split-bar-vertical {
@@ -15,6 +21,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
     }
   }

package/styles/splitter/icons/_material.scss

@@ -7,6 +7,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
 
       &.e-split-bar-vertical {
@@ -15,6 +21,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
     }
   }

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

@@ -1,39 +1 @@
-@include export-module('splitter-material-icons') {
-  .e-splitter {
-    .e-split-bar {
-      &.e-split-bar-horizontal {
-        .e-resize-handler::before {
-          content: '\e855';
-          font-family: 'e-icons';
-          font-size: $splitbar-icon-size;
-        }
-      }
-
-      &.e-split-bar-vertical {
-        & .e-resize-handler::before {
-          content: '\e858';
-          font-family: 'e-icons';
-          font-size: $splitbar-icon-size;
-        }
-      }
-    }
-  }
-
-  .e-bigger {
-    .e-splitter {
-      .e-split-bar {
-        .e-resize-handler::before {
-          font-size: $bigger-splitbar-icon-size;
-        }
-      }
-    }
-
-    &.e-splitter {
-      .e-split-bar {
-        .e-resize-handler::before {
-          font-size: $bigger-splitbar-icon-size;
-        }
-      }
-    }
-  }
-}
+@import './tailwind.scss';

package/styles/splitter/icons/_tailwind.scss

@@ -7,6 +7,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
 
       &.e-split-bar-vertical {
@@ -15,6 +21,12 @@
           font-family: 'e-icons';
           font-size: $splitbar-icon-size;
         }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
       }
     }
   }

package/styles/splitter/material-dark.css

@@ -5,12 +5,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;
 }
@@ -443,12 +451,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 {
@@ -483,12 +491,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 {
@@ -501,7 +509,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 {
@@ -513,7 +521,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 {
@@ -555,12 +563,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 {

package/styles/splitter/material.css

@@ -6,12 +6,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/tailwind-dark.css

@@ -1,17 +1,24 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-/*! component's default definitions and variables */
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler::before {
   content: '\e855';
   font-family: 'e-icons';
   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: '\e858';
   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;
 }
@@ -425,7 +432,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
-  background: #000;
+  background: #1f2937;
   color: #d1d5db;
 }
 
@@ -448,7 +455,7 @@
 }
 
 .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: #000;
+  background: #1f2937;
   color: #22d3ee;
 }
 
@@ -488,7 +495,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
-  background: #000;
+  background: #1f2937;
   color: #22d3ee;
 }
 
@@ -497,7 +504,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
-  background: #000;
+  background: #1f2937;
   color: #d1d5db;
 }
 
@@ -513,7 +520,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: #000;
+  background: #1f2937;
   color: #22d3ee;
 }
 
@@ -560,7 +567,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {
-  background: #000;
+  background: #1f2937;
   color: #22d3ee;
 }
 

package/styles/splitter/tailwind.css

@@ -1,17 +1,24 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-/*! component's default definitions and variables */
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler::before {
   content: '\e855';
   font-family: 'e-icons';
   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: '\e858';
   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/tailwind-dark.css

@@ -64,7 +64,6 @@
   width: 56px;
 }
 
-/*! component's theme wise override material-definitions and variables */
 /*! card layout */
 .e-bigger .e-card,
 .e-bigger.e-card {
@@ -253,7 +252,7 @@
   box-sizing: border-box;
   font-size: 14px;
   line-height: 1.25;
-  padding: 18px 18px 12px 18px;
+  padding: 18px;
 }
 
 .e-card > .e-card-header-title + :not(.e-card-header-title) {
@@ -264,7 +263,7 @@
 .e-card > .e-card-title {
   font-size: 16px;
   line-height: 1.5;
-  padding: 18px 18px 12px 18px;
+  padding: 18px;
 }
 
 .e-card > .e-card-title + :not(.e-card-title) {
@@ -668,19 +667,26 @@
   color: #d1d5db;
 }
 
-/*! component's default definitions and variables */
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler::before {
   content: '\e855';
   font-family: 'e-icons';
   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: '\e858';
   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;
 }
@@ -1094,7 +1100,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
-  background: #000;
+  background: #1f2937;
   color: #d1d5db;
 }
 
@@ -1117,7 +1123,7 @@
 }
 
 .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: #000;
+  background: #1f2937;
   color: #22d3ee;
 }
 
@@ -1157,7 +1163,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
-  background: #000;
+  background: #1f2937;
   color: #22d3ee;
 }
 
@@ -1166,7 +1172,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
-  background: #000;
+  background: #1f2937;
   color: #d1d5db;
 }
 
@@ -1182,7 +1188,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: #000;
+  background: #1f2937;
   color: #22d3ee;
 }
 
@@ -1229,7 +1235,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {
-  background: #000;
+  background: #1f2937;
   color: #22d3ee;
 }
 
@@ -1321,14 +1327,14 @@
 }
 
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
-  background: #4b5563;
+  background: #232e3e;
   border-collapse: collapse;
   height: 100%;
   width: 100%;
 }
 
 .e-dashboardlayout.e-control .e-dashboard-gridline-table tbody tr td.e-dashboard-gridline {
-  border: 1px dashed #9ca3af;
+  border: 1px dashed #6b7280;
   position: absolute;
 }
 
@@ -1351,7 +1357,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel:hover {
-  border: none;
+  border: 1px solid #9ca3af;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
@@ -1360,7 +1366,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel:active {
-  border: none;
+  border: 1px solid #22d3ee;
 }
 
 .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-dl-icon {
@@ -1380,6 +1386,8 @@
   height: 38px;
   padding: 8px 18px;
   line-height: 22px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
 }
 
 .e-dashboardlayout.e-control .e-panel .e-panel-header div {
@@ -1407,7 +1415,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel {
-  border: 1px #1f2937;
+  border: 1px solid #4b5563;
   height: 100%;
   -webkit-user-select: none;
       -ms-user-select: none;
@@ -1496,7 +1504,7 @@
 }
 
 .e-dashboardlayout.e-control .e-holder {
-  background: #374151;
+  background: #4b5563;
   border: 1px #9ca3af dashed;
   border-radius: 6px;
   position: absolute;
@@ -1534,7 +1542,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel {
-  background: #1f2937;
+  background: #374151;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
   position: absolute;
@@ -1552,7 +1560,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel {
-  background: #1f2937;
+  background: #374151;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
   position: absolute;