@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

package/styles/treeview/_theme.scss

@@ -1,51 +1,90 @@
-// sass-lint:disable no-vendor-prefixes
+/* stylelint-disable property-no-vendor-prefix */
 @mixin sibling-theme($left, $right) {
-  @if $treeview-skin-name == 'material' {
+  @if $skin-name == 'material' {
     background: $treeview-drag-line-bg;
   }
   @else {
-    border-#{$right}-color: transparent;
     border-#{$left}-color: $treeview-drag-line-bg;
+    border-#{$right}-color: transparent;
   }
 }
+
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
-  @if $treeview-skin-name == 'bootstrap' or $treeview-skin-name == 'highcontrast' {
+  @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;
     box-shadow: $treeview-border-shadow;
   }
 }
+
 @mixin active-editing-theme {
   background-color: $treeview-item-border-color;
   border-color: $treeview-item-border-color;
-  @if $treeview-skin-name == 'bootstrap' {
+  @if $skin-name == 'bootstrap' {
     -webkit-box-shadow: none;
     box-shadow: none;
   }
 }
+
 @mixin active-font-weight {
-  @if $treeview-skin-name == 'highcontrast' {
+  @if $skin-name == 'highcontrast' {
     font-weight: $treeview-active-font-weight;
   }
 }
+
 @include export-module('treeview-theme') {
-  .e-bigger #{&}.e-treeview,
-  #{&}.e-treeview.e-bigger {
+  .e-bigger .e-treeview,
+  .e-treeview.e-bigger {
 
     .e-list-text {
       font-size: $treeview-big-font-size;
+
+      @if $skin-name == 'bootstrap4' {
+        color: $treeview-big-text-color;
+      }
     }
 
     .e-icon-collapsible::before,
     .e-icon-expandable::before {
       font-size: $treeview-big-icon-font-size;
     }
+
+    &.e-drag-item {
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-big-drag-icon-padding;
+        }
+      }
+
+      .e-list-text {
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-big-drag-text-padding;
+        }
+      }
+    }
   }
 
-  #{&}.e-treeview {
+  .e-treeview {
     -webkit-tap-highlight-color: transparent;
 
+    @if $skin-name == 'bootstrap5' {
+      &.e-disabled {
+        opacity: .5;
+      }
+    }
+
     .e-text-content,
     .e-fullrow {
       border-color: $treeview-item-border-color;
@@ -58,7 +97,7 @@
       .e-input {
         @include active-font-weight;
       }
-     }
+    }
 
     .e-list-icon,
     .e-list-img {
@@ -107,11 +146,25 @@
       }
 
       .e-check {
-        @if $treeview-skin-name == 'highcontrast' {
+        @if $skin-name == 'highcontrast' {
           background-color: $treeview-checkmark-bgcolor;
           border-color: $treeview-checkmark-border-color;
           color: $treeview-checkmark-color;
         }
+        @else if $skin-name == 'bootstrap4' {
+          background-color: $treeview-item-active-check-bg;
+          border-color: $treeview-item-active-check-border-color;
+          color: $treeview-item-active-check-color;
+        }
+        @else if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+          border-color: $content-text-color-selected;
+        }
+      }
+
+      .e-stop {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+          border-color: $content-text-color-selected;
+        }
       }
     }
 
@@ -151,38 +204,67 @@
       border-color: $treeview-item-hover-border-color;
     }
 
-    .e-list-item.e-active > .e-fullrow {
-      background-color: $treeview-item-active-bg;
-      border-color: $treeview-item-active-border-color;
+    .e-list-item.e-active {
+      & > .e-fullrow {
+        background-color: $treeview-item-active-bg;
+        border-color: $treeview-item-active-border-color;
+      }
+
+      &.e-animation-active > .e-fullrow {
+        background-color: transparent;
+        border-color: transparent;
+      }
+
+      &.e-animation-active > .e-text-content {
+        color: $treeview-text-color;
+
+        .e-list-text {
+          color: $treeview-text-color;
+        }
+      }
     }
 
-    .e-list-item.e-active.e-hover > .e-fullrow {
+    .e-list-item.e-active.e-hover > .e-fullrow{
       @include active-hover-theme;
     }
 
     .e-list-item.e-editing.e-active > .e-fullrow,
-    .e-list-item.e-editing.e-hover > .e-fullrow {
+    .e-list-item.e-editing.e-hover > .e-fullrow{
       @include active-editing-theme;
     }
 
     .e-list-item.e-disable {
 
-      .e-list-text {
+      > .e-text-content,
+      > .e-fullrow {
         color: $treeview-text-disable-color;
+        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+          .e-list-text {
+            color: $treeview-text-disable-color;
+          }
+        }
       }
 
-      .e-icon-collapsible,
-      .e-icon-expandable {
+      > .e-text-content > .e-icon-collapsible,
+      > .e-text-content > .e-icon-expandable {
         color: $treeview-icon-disable-color;
       }
     }
 
     .e-sibling {
-      @include sibling-theme(left, right);
+      @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+        @include sibling-theme(left, right);
+      }
+      @else {
+        border-top: 2px solid $treeview-drag-line-bg;
+      }
     }
 
     .e-sibling::before {
       background: $treeview-drag-line-color;
+      @if $skin-name == 'bootstrap4' {
+        border: 1px;
+      }
     }
 
     .e-popup {
@@ -213,7 +295,7 @@
 
     &:not(.e-fullrow-wrap) {
 
-      .e-list-item.e-hover > .e-text-content {
+      .e-list-item.e-hover > .e-text-content{
         background-color: $treeview-item-hover-bg;
         border-color: $treeview-item-hover-border-color;
       }
@@ -243,6 +325,9 @@
     &.e-drag-item {
       background-color: $treeview-drag-item-bg;
       font-family: $treeview-font-family;
+      @if ($skin-name == 'Material3') {
+        background: $treeview-drag-item-bg;
+      }
 
       .e-icon-collapsible::before,
       .e-icon-expandable::before {
@@ -252,6 +337,17 @@
       .e-list-text {
         @include active-font-weight;
         color: $treeview-drag-item-color;
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-drag-text-padding;
+        }
+      }
+
+      .e-text-content {
+        @if $skin-name == 'bootstrap4' {
+          -webkit-box-shadow: $treeview-drag-item-box-shadow;
+          border-radius: .5em;
+          box-shadow: $treeview-drag-item-box-shadow;
+        }
       }
 
       .e-icons {
@@ -263,14 +359,19 @@
         border-color: $treeview-drop-count-border;
         color: $treeview-drop-count-color;
       }
-    }
 
-    &.e-rtl {
+      &.e-rtl {
 
-      .e-sibling {
-        @include sibling-theme(right, left);
+        .e-sibling {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+            @include sibling-theme(right, left);
+          }
+          @else {
+            border: 1px solid $treeview-drag-line-bg;
+          }
+        }
       }
     }
+    /* stylelint-enable property-no-vendor-prefix */
   }
-  // sass-lint:enable no-vendor-prefixes
 }