@syncfusion/ej2-angular-layouts 22.1.37-ngcc → 22.1.37

package/styles/splitter/_tailwind-definition.scss

@@ -0,0 +1,31 @@
+//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: $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;
+$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;
+$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;
+$split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
+
+//Theme Variables End

package/styles/splitter/_theme.scss

@@ -0,0 +1,207 @@
+@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;
+          z-index: 10;
+        }
+
+        .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;
+          z-index: 12;
+        }
+
+        &.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.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.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.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.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.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.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.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.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.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.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.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;
+        }
+      }
+    }
+  }
+}

package/styles/splitter/icons/_bootstrap.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;
+        }
+      }
+    }
+  }
+}

package/styles/splitter/icons/_bootstrap4.scss

@@ -0,0 +1,51 @@
+@include export-module('splitter-bootstrap4-icons') {
+  .e-splitter {
+    .e-split-bar {
+      &.e-split-bar-horizontal {
+        .e-resize-handler::before {
+          content: '\e781';
+          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: '\e71b';
+          font-family: 'e-icons';
+          font-size: $splitbar-icon-size;
+        }
+
+        .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;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+@include export-module('splitter-fabric-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;
+        }
+      }
+    }
+  }
+}

package/styles/splitter/icons/_fabric.scss

@@ -0,0 +1,52 @@
+@include export-module('splitter-fabric-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;
+        }
+      }
+    }
+  }
+}

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

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

package/styles/splitter/icons/_fluent.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;
+        }
+      }
+    }
+  }
+}