@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

package/styles/treeview/_layout.scss

@@ -1,20 +1,22 @@
-// sass-lint:disable no-vendor-prefixes
+/* stylelint-disable property-no-vendor-prefix */
 @mixin user-select {
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
 }
+
 @mixin sibling-style {
-  @if $treeview-skin-name == 'material' {
+  @if $skin-name == 'material' {
     border-radius: 10px;
   }
   @else {
     border: 4px solid transparent;
   }
 }
+
 @mixin sibling-before($position) {
-  @if $treeview-skin-name == 'material' {
+  @if $skin-name == 'material' {
     @if $position == 'rtl' {
       right: 6px;
       top: 3px;
@@ -33,6 +35,7 @@
     }
   }
 }
+
 @include export-module('treeview-layout') {
   @keyframes rotation {
     from {
@@ -44,7 +47,7 @@
     }
   }
 
-  @-webkit-keyframes rotation {
+  @-webkit-keyframes rotation { /* stylelint-disable-line at-rule-no-vendor-prefix */
     from {
       -webkit-transform: rotate(0deg);
     }
@@ -54,22 +57,187 @@
     }
   }
 
-  .e-bigger #{&}.e-treeview,
-  #{&}.e-treeview.e-bigger {
+  .e-bigger .e-treeview,
+  .e-treeview.e-bigger {
+
+    @if $skin-name == 'bootstrap4' {
+      .e-ul,
+      .e-list-item .e-ul {
+        padding-left: 16px;
+      }
+    }
+
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
+      .e-ul {
+        padding: $treeview-big-root-ul-padding;
+      }
+
+      .e-list-item {
+        .e-ul {
+          padding: $treeview-big-child-ul-padding;
+        }
+
+        .e-text-content {
+          padding: $treeview-big-text-wrap-padding;
+        }
+
+        .e-list-icon,
+        .e-list-img {
+          height: $treeview-big-icon-font-size;
+          width: $treeview-big-icon-font-size;
+        }
+
+        .e-small.e-css.e-checkbox-wrapper {
+          & .e-frame {
+            height: 18px;
+            line-height: 17px;
+            width: 18px;
+          }
+
+          & .e-check {
+            font-size: 12px;
+          }
+
+          & .e-stop {
+            font-size: 12px;
+            line-height: 17px;
+          }
+        }
+
+        .e-checkbox-wrapper {
+          & + .e-list-text {
+            padding: $treeview-big-check-text-padding;
+          }
+        }
+      }
+
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        height: $treeview-big-icon-font-size;
+        margin: $treeview-big-icon-margin;
+        width: $treeview-big-icon-font-size;
+      }
+
+      &.e-drag-item {
+
+        @if $skin-name == 'FluentUI' {
+          .e-icon-expandable,
+          .e-icon-collapsible {
+            padding-left: 24px;
+            padding-top: 10px;
+          }
+        }
+
+        .e-drop-count {
+          padding: 3px 5px 4px;
+        }
+      }
+    }
+
+    .e-navigable {
+
+      .e-text-content {
+        align-items: center;
+        display: flex;
+      }
+
+      .e-list-text {
+        @if ($skin-name != 'Material3') {
+          padding: 0;
+        }
+        width: 100%;
+      }
+
+      .e-checkbox-wrapper + .e-list-text {
+        padding: 0;
+      }
+
+      .e-checkbox-wrapper + .e-list-url .e-anchor-wrap {
+
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-check-image-margin;
+        }
+
+        .e-list-icon,
+        .e-list-img {
+          margin: $treeview-navigable-icon-image-anchor-margin-bigger;
+        }
+      }
+
+      .e-anchor-wrap {
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-navigable-check-margin-bigger;
+        }
+        @else {
+          padding: $treeview-icon-image-margin;
+        }
+      }
+
+      .e-list-icon,
+      .e-list-img,
+      .e-list-icon + .e-list-img {
+
+        @if $skin-name == 'bootstrap4' {
+          margin: $treeview-rtl-check-image-margin;
+        }
+        @else {
+          margin: $treeview-rtl-icon-image-margin;
+        }
+      }
+    }
 
     .e-fullrow {
       height: $treeview-big-item-height;
     }
 
+    &.e-text-wrap {
+      .e-checkbox-wrapper {
+        & + .e-list-text {
+          max-width: $treeview-big-check-wrap-width;
+        }
+
+        & + .e-list-icon,
+        & + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-big-check-icon-wrap-width;
+          }
+        }
+
+        & + .e-list-icon + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-big-check-icon-img-wrap-width;
+          }
+        }
+      }
+
+      .e-list-icon,
+      .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-big-icon-wrap-width;
+        }
+      }
+
+      .e-list-icon + .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-big-icon-img-wrap-width;
+        }
+      }
+    }
+
     .e-list-text {
       line-height: $treeview-big-text-height;
-      min-height: $treeview-big-text-height;
+      @if $skin-name != 'bootstrap4' {
+        min-height: $treeview-big-text-height;
+      }
+      @else if $skin-name == 'bootstrap4' {
+        min-height: 38px;
+      }
       padding: $treeview-big-text-padding;
 
       .e-input-group {
         height: $treeview-big-input-height;
 
-        @if $treeview-skin-name != 'material' {
+        @if $skin-name != 'material' {
           .e-input {
             height: 36px;
           }
@@ -79,6 +247,11 @@
 
     .e-checkbox-wrapper {
       margin: $treeview-big-check-margin;
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
+        & + .e-list-text {
+          padding: $treeview-big-check-text-padding;
+        }
+      }
 
       & + .e-list-icon,
       & + .e-list-img {
@@ -89,6 +262,14 @@
     .e-list-icon,
     .e-list-img {
       margin: $treeview-big-image-margin;
+      @if $skin-name == 'bootstrap4' {
+        font-size: $treeview-big-image-font-size;
+      }
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        & + .e-list-text {
+          padding: $treeview-big-image-text-padding;
+        }
+      }
 
       & + .e-list-icon,
       & + .e-list-img {
@@ -96,13 +277,129 @@
       }
     }
 
+    .e-icon-collapsible,
+    .e-icon-expandable {
+      @if $skin-name == 'bootstrap4' {
+        height: $treeview-big-icon-size;
+        margin: $treeview-big-icon-margin;
+        width: $treeview-big-icon-size;
+      }
+    }
+
     .e-icon-collapsible::before,
     .e-icon-expandable::before {
       padding: $treeview-big-icon-padding;
     }
 
+    &.e-drag-item {
+
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+
+        .e-text-content {
+          padding-left: $treeview-big-drag-item-text-padding-left;
+        }
+
+        .e-icon-collapsible,
+        .e-icon-expandable {
+          font-size: $treeview-big-drag-icon-font-size;
+          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+            margin: $treeview-big-drag-icon-margin;
+          }
+        }
+
+        .e-icon-collapsible::before,
+        .e-icon-expandable::before {
+          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+            padding: $treeview-big-drag-before-icon-padding;
+          }
+          @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+            font-size: $treeview-big-drag-icon-font-size;
+          }
+        }
+
+        @if $skin-name == 'bootstrap4' {
+          .e-drop-count {
+            border: $treeview-big-drop-count-border-size solid;
+          }
+        }
+      }
+    }
+
     &.e-rtl {
 
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+        .e-ul {
+          padding: $treeview-big-rtl-root-ul-padding;
+        }
+
+        .e-list-item {
+          .e-ul {
+            padding: $treeview-big-rtl-child-ul-padding;
+          }
+
+          .e-text-content {
+            padding: $treeview-big-rtl-text-wrap-padding;
+          }
+        }
+
+        .e-icon-collapsible,
+        .e-icon-expandable {
+          margin: $treeview-big-rtl-icon-margin;
+        }
+      }
+
+      &.e-drag-item {
+
+        @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+
+          .e-text-content {
+            padding-left: 0;
+            padding-right: $treeview-big-drag-item-text-padding-left;
+          }
+        }
+      }
+
+      .e-navigable {
+
+        .e-checkbox-wrapper + .e-list-url .e-anchor-wrap {
+
+          @if $skin-name == 'bootstrap4' {
+            padding: $treeview-navigable-rtl-margin-reverse;
+          }
+
+          .e-list-icon,
+          .e-list-img {
+            margin: $treeview-navigable-icon-image-anchor-margin-reverse-bigger;
+          }
+        }
+
+        .e-anchor-wrap {
+          @if $skin-name == 'bootstrap4' {
+            padding: $treeview-navigable-check-margin-bigger-reverse;
+          }
+          @else {
+            padding: $treeview-rtl-icon-image-margin;
+          }
+        }
+
+        .e-list-icon,
+        .e-list-img,
+        .e-list-icon + .e-list-img {
+          @if $skin-name == 'bootstrap4' {
+            margin: $treeview-check-image-margin;
+          }
+          @else {
+            margin: $treeview-icon-image-margin;
+          }
+        }
+      }
+      @if $skin-name == 'bootstrap4' {
+        .e-icon-collapsible,
+        .e-icon-expandable {
+          margin: $treeview-big-rtl-icon-margin;
+        }
+      }
+
       .e-checkbox-wrapper {
         margin: $treeview-big-rtl-check-margin;
 
@@ -124,7 +421,7 @@
     }
   }
 
-  #{&}.e-treeview {
+  .e-treeview {
     display: block;
     overflow: hidden;
     position: relative;
@@ -135,6 +432,58 @@
       overflow: auto;
     }
 
+    &.e-text-wrap {
+      .e-list-text {
+        white-space: normal;
+        word-break: break-word;
+      }
+
+      &.e-ie-wrap {
+        .e-list-text {
+          word-break: break-all;
+        }
+      }
+
+      .e-editing {
+        .e-list-text,
+        .e-list-text .e-input-group {
+          max-width: $treeview-edit-wrap-width;
+        }
+      }
+
+      .e-checkbox-wrapper {
+        & + .e-list-text {
+          max-width: $treeview-check-wrap-width;
+        }
+
+        & + .e-list-icon,
+        & + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-check-icon-wrap-width;
+          }
+        }
+
+        & + .e-list-icon + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-check-icon-img-wrap-width;
+          }
+        }
+      }
+
+      .e-list-icon,
+      .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-icon-wrap-width;
+        }
+      }
+
+      .e-list-icon + .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-icon-img-wrap-width;
+        }
+      }
+    }
+
     .e-ul {
       margin: 0;
       padding: $treeview-root-ul-padding;
@@ -144,13 +493,60 @@
       display: none;
     }
 
+    .e-display-none {
+      display: none;
+    }
+
+    .e-list-item {
+
+      &.e-active {
+        @if $skin-name == 'tailwind' {
+          font-weight: $treeview-active-font-weight;
+        }
+      }
+
+      div.e-icons.interaction {
+        -webkit-transition: -webkit-transform .3s ease-in-out;
+        border-radius: 15px;
+        transition: -webkit-transform .3s ease-in-out;
+        transition: transform .3s ease-in-out;
+        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+      }
+
+      .e-icons.e-icon-collapsible {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+      }
+    }
+
+    &.e-drag-item {
+      &.e-rtl {
+
+        .e-icons.e-drop-next {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      div.e-icons {
+        transform: rotate(180deg);
+      }
+    }
+
     .e-list-item {
       list-style: none;
-      padding: 2px 0;
+      @if $skin-name != 'tailwind' {
+        padding: 2px 0;
+      }
 
       .e-ul {
         margin: 2px 0 -2px;
         padding: $treeview-child-ul-padding;
+        @if $skin-name == 'tailwind' {
+          margin: 2px 0 0;
+        }
       }
 
       &.e-disable {
@@ -174,6 +570,14 @@
       position: relative;
     }
 
+    .e-icons .e-treeview-spinner {
+      position: absolute;
+    }
+
+    .e-icons-spinner {
+      position: relative;
+    }
+
     .e-text-content {
       @include user-select;
       border: 1px solid;
@@ -211,9 +615,9 @@
       .e-ripple-container {
         bottom: $ripple-size;
         height: $ripple-height;
-        left:  $ripple-size;
-        right:  $ripple-size;
-        top:  $ripple-size;
+        left: $ripple-size;
+        right: $ripple-size;
+        top: $ripple-size;
         width: $ripple-width;
       }
     }
@@ -223,18 +627,34 @@
       display: inline-block;
       line-height: $treeview-text-height;
       margin: $treeview-text-margin;
-      min-height: $treeview-text-height;
+      @if $skin-name != 'bootstrap4' {
+        min-height: $treeview-text-height;
+      }
+      @else if $skin-name == 'bootstrap4' {
+        min-height: 30px;
+      }
       padding: $treeview-text-padding;
       text-decoration: none;
       vertical-align: middle;
 
       .e-input-group {
         height: $treeview-input-height;
-        margin-bottom: 0;
+        @if ($skin-name == 'FluentUI') {
+          margin-top: 3px;
+        }
+        @else if($skin-name == 'tailwind') {
+          margin-bottom: 3px;
+        }
+        @else if($skin-name == 'bootstrap5') {
+          margin-bottom: 2px;
+        }
+        @else {
+          margin-bottom: 0;
+        }
         min-width: 150px;
         vertical-align: bottom;
 
-        @if $treeview-skin-name != 'material' {
+        @if $skin-name != 'material' {
           .e-input {
             height: 28px;
           }
@@ -281,23 +701,42 @@
     }
 
     .e-sibling {
-      @include sibling-style;
-      height: 6px;
-      margin-top: -5px;
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+        width: 144px;
+      }
+      @else {
+        @include sibling-style;
+        height: 6px;
+        margin-top: -5px;
+        width: 6px;
+      }
       position: absolute;
-      width: 6px;
       z-index: 2;
     }
 
     .e-text-content + .e-sibling {
-      margin-top: -1px;
+      @if ($skin-name == 'tailwind') {
+        margin-top: -2px;
+      }
+      @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+        margin-top: 1px;
+      }
+      @else {
+        margin-top: -1px;
+      }
     }
 
     .e-sibling::before {
       @include sibling-before(ltr);
-      height: 1px;
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+        height: 2px;
+        top: -1.5px;
+      }
+      @else {
+        height: 1px;
+        width: 144px;
+      }
       position: absolute;
-      width: 144px;
       z-index: 2;
     }
 
@@ -355,17 +794,92 @@
       }
     }
 
+    & .e-navigable {
+
+      .e-text-content {
+        align-items: center;
+        display: flex;
+      }
+
+      .e-list-url {
+        @if ($skin-name != 'Material3') {
+          padding: 0;
+        }
+        width: 100%;
+      }
+
+      .e-checkbox-wrapper + .e-list-url .e-anchor-wrap {
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-navigable-icon-image-margin-reverse;
+        }
+        @else {
+          padding: $treeview-icon-image-margin;
+        }
+
+        .e-list-icon,
+        .e-list-img {
+          margin: $treeview-navigable-icon-image-anchor-margin;
+        }
+
+        .e-list-icon + .e-list-img {
+          margin: $treeview-rtl-icon-image-margin;
+        }
+      }
+
+      .e-anchor-wrap {
+        padding: $treeview-check-margin;
+      }
+
+      .e-list-icon,
+      .e-list-img {
+        @if $skin-name == 'bootstrap4' {
+          margin: $treeview-navigable-icon-image-margin;
+        }
+        @else {
+          margin: $treeview-rtl-icon-image-margin;
+        }
+      }
+    }
+
     &.e-drag-item {
       overflow: visible;
       z-index: 10000;
 
       .e-text-content {
         float: left;
+
+        .e-list-text {
+          @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+            padding: 0 $treeview-drag-icon-padding;
+          }
+        }
+      }
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+        .e-icon-collapsible,
+        .e-icon-expandable {
+          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+            margin: $treeview-drag-icon-margin;
+          }
+
+          @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+            box-sizing: content-box;
+            padding-left: $treeview-drag-icon-padding;
+            @if ($skin-name == 'FluentUI') {
+              padding-top: 8px;
+            }
+          }
+        }
       }
 
       .e-icon-collapsible::before,
       .e-icon-expandable::before {
-        padding: $treeview-drag-icon-padding;
+        font-size: $treeview-drag-icon-font-size;
+        @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+          padding: $treeview-drag-icon-padding;
+        }
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
+          padding-right: $treeview-drag-icon-padding-right;
+        }
       }
 
       .e-drop-count {
@@ -373,10 +887,22 @@
         border-radius: 15px;
         box-sizing: content-box;
         font-size: $treeview-drop-count-font-size;
-        line-height: normal;
+        @if $skin-name == 'bootstrap4' {
+          line-height: 1.5;
+          min-width: 10px;
+          padding: 0 5px;
+        }
+        @else {
+          line-height: normal;
+          min-width: 12px;
+          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+            padding: 1px 3px 2px;
+          }
+          @else {
+            padding: 3px 5px 4px;
+          }
+        }
         margin-left: -12px;
-        min-width: 12px;
-        padding: 3px 5px 4px;
         position: absolute;
         text-align: center;
         top: -10px;
@@ -393,6 +919,43 @@
 
     &.e-rtl {
 
+      & .e-navigable {
+
+        .e-checkbox-wrapper + .e-list-url .e-anchor-wrap {
+
+          @if $skin-name == 'bootstrap4' {
+            padding: $treeview-navigable-icon-image-margin;
+          }
+          @else {
+            padding: $treeview-rtl-icon-image-margin;
+          }
+
+          .e-list-icon,
+          .e-list-img {
+            margin: $treeview-navigable-icon-image-anchor-margin-reverse;
+          }
+
+          .e-list-icon + .e-list-img {
+            margin: $treeview-icon-image-margin;
+          }
+        }
+
+        .e-anchor-wrap {
+          padding: $treeview-rtl-check-margin;
+        }
+
+        .e-list-icon,
+        .e-list-img,
+        .e-list-icon + .e-list-img {
+          @if $skin-name == 'bootstrap4' {
+            margin: $treeview-navigable-icon-image-margin-reverse;
+          }
+          @else {
+            margin: $treeview-icon-image-margin;
+          }
+        }
+      }
+
       .e-ul {
         padding: $treeview-rtl-root-ul-padding;
       }
@@ -442,11 +1005,39 @@
           float: right;
         }
 
+        .e-icon-collapsible,
+        .e-icon-expandable {
+          @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
+            margin: $treeview-rtl-drag-margin;
+          }
+        }
+
         .e-drop-count {
           margin-right: -12px;
         }
       }
     }
+
+    &.e-disabled {
+      .e-fullrow,
+      .e-icons,
+      .e-text-content,
+      .e-list-img,
+      .e-list-icon {
+        cursor: auto;
+      }
+
+      .e-list-url {
+        cursor: default;
+        pointer-events: none;
+      }
+    }
+
+    &.e-interaction.e-fullrow-wrap {
+      .e-text-content {
+        pointer-events: auto;
+      }
+    }
   }
-  // sass-lint:enable no-vendor-prefixes
+  /* stylelint-enable property-no-vendor-prefix */
 }