@syncfusion/ej2-angular-layouts 20.2.38-ngcc → 20.2.39

package/styles/splitter/_theme.scss

@@ -0,0 +1,205 @@
+@include export-module('splitter-theme') {
+  .e-splitter {
+
+    &.e-splitter-horizontal,
+    &.e-splitter-vertical {
+      border: solid 1px $splitter-border-color;
+
+      .e-pane {
+        color: $splitpane-font-color;
+
+        // sass-lint:disable nesting-depth
+        &.e-splitter {
+
+          &.e-splitter-horizontal,
+          &.e-splitter-vertical {
+            border: transparent;
+          }
+        }
+      }
+    }
+
+    .e-split-bar {
+
+      &.e-split-bar-horizontal {
+        background: $splitbar-border-color;
+        border-left: $split-bar-border-left;
+        border-right: $split-bar-border-right;
+
+        .e-resize-handler {
+          background: $resize-icon-bg-color;
+          color: $splitbar-icon-color;
+        }
+
+        .e-navigate-arrow:not(.e-icon-hidden) {
+          background-color: transparent;
+          border-color: transparent;
+          color: transparent;
+          transition: background-color 500ms ease-out;
+
+          &::before,
+          &::after {
+            background-color: $navigation-icon-background-hover;
+            opacity: 0;
+            transition-duration: .3s;
+            transition-timing-function: cubic-bezier(.25, .1, .25, 1);
+          }
+        }
+
+        &.e-split-bar-hover,
+        &.e-split-bar-active {
+          background: $splitbar-hover-border-color;
+          border-left: $split-bar-hover-border-left;
+          border-right: $split-bar-hover-border-right;
+
+          .e-resize-handler {
+            background: $resize-icon-bg-color;
+            color: $splitbar-hover-border-color;
+          }
+
+          .e-navigate-arrow {
+            &.e-arrow-left,
+            &.e-arrow-right {
+              background-color: $navigation-arrow-background;
+              border-color: $navigation-icon-border-hover;
+              border-width: 1px;
+              opacity: .9;
+            }
+          }
+
+          &.e-split-bar-hover,
+          &.e-split-bar-active {
+            .e-navigate-arrow::before {
+              background-color: $navigation-icon-background-hover;
+              opacity: 1;
+              transform: rotate(40deg);
+            }
+
+            .e-navigate-arrow::after {
+              background-color: $navigation-icon-background-hover;
+              opacity: 1;
+              transform: rotate(-40deg);
+            }
+          }
+        }
+
+        // left-arrow hover/active styles
+        &.e-split-bar-hover,
+        &.e-split-bar-active {
+          .e-navigate-arrow.e-arrow-right::before {
+            background-color: $navigation-icon-background-hover;
+            opacity: 1;
+            transform: rotate(-40deg);
+          }
+
+          .e-navigate-arrow.e-arrow-right::after {
+            background-color: $navigation-icon-background-hover;
+            opacity: 1;
+            transform: rotate(40deg);
+          }
+        }
+
+        &.e-split-bar-active {
+          background: $splitbar-hover-border-color;
+
+          .e-resize-handler {
+            background: $resize-icon-bg-color;
+            color: $splitbar-hover-border-color;
+          }
+        }
+      }
+
+      &.e-split-bar-vertical {
+        background: $splitbar-border-color;
+
+        .e-resize-handler {
+          background: $resize-icon-bg-color;
+          color: $splitbar-icon-color;
+        }
+
+        &.e-split-bar-hover,
+        &.e-split-bar-active {
+          background: $splitbar-hover-border-color;
+          border-left: $split-bar-hover-border-left;
+          border-right: $split-bar-hover-border-right;
+
+          .e-navigate-arrow {
+            &.e-arrow-up,
+            &.e-arrow-down {
+              background-color: $navigation-arrow-background;
+              border-color: $navigation-icon-border-hover;
+              border-width: 1px;
+              opacity: .9;
+            }
+          }
+
+          .e-resize-handler {
+            background: $resize-icon-bg-color;
+            color: $splitbar-hover-border-color;
+          }
+        }
+
+        &.e-split-bar-hover,
+        &.e-split-bar-active {
+          .e-navigate-arrow.e-arrow-up {
+
+            &::before {
+              background-color: $navigation-icon-background-hover;
+              opacity: 1;
+              transform: rotate(125deg);
+            }
+
+            &::after {
+              background-color: $navigation-icon-background-hover;
+              opacity: 1;
+              transform: rotate(50deg);
+            }
+          }
+
+          .e-navigate-arrow.e-arrow-down {
+            &::before {
+              background-color: $navigation-icon-background-hover;
+              opacity: 1;
+              transform: rotate(55deg);
+            }
+
+            &::after {
+              background-color: $navigation-icon-background-hover;
+              opacity: 1;
+              transform: rotate(125deg);
+            }
+          }
+        }
+
+        .e-navigate-arrow {
+          background-color: transparent;
+          border-color: transparent;
+          color: transparent;
+          transition: background-color 300ms ease-out;
+
+          &::before,
+          &::after {
+            background-color: $navigation-icon-background-hover;
+            opacity: 0;
+            transition-duration: .3s;
+            transition-timing-function: cubic-bezier(.25, .1, .25, 1);
+          }
+        }
+
+        &.e-split-bar-active {
+          background: $splitbar-hover-border-color;
+
+          .e-resize-handler {
+            background: $resize-icon-bg-color;
+            color: $splitbar-hover-border-color;
+          }
+        }
+      }
+    }
+
+    &.e-disabled {
+      opacity: .4;
+      pointer-events: none;
+    }
+  }
+}

package/styles/splitter/bootstrap-dark.css

@@ -54,8 +54,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -88,8 +88,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -489,4 +489,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/bootstrap-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/bootstrap-dark.scss';
+@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'bootstrap-dark-definition.scss';
+@import 'icons/bootstrap-dark.scss';
+@import 'all.scss';

package/styles/splitter/bootstrap.css

@@ -54,8 +54,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -88,8 +88,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -489,4 +489,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/bootstrap.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/bootstrap.scss';
+@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'bootstrap-definition.scss';
+@import 'icons/bootstrap.scss';
+@import 'all.scss';

package/styles/splitter/bootstrap4.css

@@ -53,8 +53,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -87,8 +87,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -488,4 +488,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/bootstrap4.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/bootstrap4.scss';
+@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'bootstrap4-definition.scss';
+@import 'icons/bootstrap4.scss';
+@import 'all.scss';

package/styles/splitter/bootstrap5-dark.css

@@ -47,8 +47,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -81,8 +81,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -482,4 +482,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/bootstrap5-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/bootstrap5-dark.scss';
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'icons/bootstrap5-dark.scss';
+@import 'all.scss';

package/styles/splitter/bootstrap5.css

@@ -47,8 +47,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -81,8 +81,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -482,4 +482,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/bootstrap5.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/bootstrap5.scss';
+@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'bootstrap5-definition.scss';
+@import 'icons/bootstrap5.scss';
+@import 'all.scss';

package/styles/splitter/fabric-dark.css

@@ -54,8 +54,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -88,8 +88,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -489,4 +489,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/fabric-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/fabric-dark.scss';
+@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'fabric-dark-definition.scss';
+@import 'icons/fabric-dark.scss';
+@import 'all.scss';

package/styles/splitter/fabric.css

@@ -54,8 +54,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -88,8 +88,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -489,4 +489,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/fabric.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/fabric.scss';
+@import 'ej2-base/styles/fabric-definition.scss';
+@import 'fabric-definition.scss';
+@import 'icons/fabric.scss';
+@import 'all.scss';

package/styles/splitter/fluent-dark.css

@@ -47,8 +47,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -81,8 +81,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -482,4 +482,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/fluent-dark.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/fluent-dark.scss';
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'icons/fluent-dark.scss';
+@import 'all.scss';

package/styles/splitter/fluent.css

@@ -47,8 +47,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -81,8 +81,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -482,4 +482,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/fluent.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/fluent.scss';
+@import 'ej2-base/styles/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'icons/fluent.scss';
+@import 'all.scss';

package/styles/splitter/highcontrast-light.css

@@ -54,8 +54,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -88,8 +88,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -489,4 +489,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/highcontrast-light.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/highcontrast-light.scss';
+@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'highcontrast-light-definition.scss';
+@import 'icons/highcontrast-light.scss';
+@import 'all.scss';

package/styles/splitter/highcontrast.css

@@ -54,8 +54,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -88,8 +88,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -489,4 +489,6 @@
 .e-splitter.e-disabled {
   opacity: 0.4;
   pointer-events: none;
-}
+}
+
+/* stylelint-disable-line no-empty-source */

package/styles/splitter/highcontrast.scss

@@ -1 +1,4 @@
-@import 'ej2-layouts/styles/splitter/highcontrast.scss';
+@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'highcontrast-definition.scss';
+@import 'icons/highcontrast.scss';
+@import 'all.scss';

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

@@ -0,0 +1,52 @@
+@include export-module('splitter-bootstrap-icons') {
+  .e-splitter {
+    .e-split-bar {
+      &.e-split-bar-horizontal {
+        .e-resize-handler::before {
+          content: '\e984';
+          font-family: 'e-icons';
+          font-size: $splitbar-icon-size;
+        }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
+      }
+
+      &.e-split-bar-vertical {
+        & .e-resize-handler::before {
+          content: '\e984';
+          font-family: 'e-icons';
+          font-size: $splitbar-icon-size;
+          transform: rotate(90deg);
+        }
+
+        .e-resize-handler {
+          &.e-template-resize-handler::before {
+            content: '';
+          }
+        }
+      }
+    }
+  }
+
+  .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;
+        }
+      }
+    }
+  }
+}