@syncfusion/ej2-navigations 19.2.59 → 19.3.44

package/styles/toolbar/tailwind-dark.css

@@ -147,7 +147,7 @@
 .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   margin-left: 0;
-  padding: 3px 6px 0 0;
+  padding: 0 6px 0 0;
 }
 
 .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
@@ -558,18 +558,6 @@
   line-height: 22px;
 }
 
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active {
-  padding: 0 1.5px;
-}
-
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
   margin: 7px 3px;
   min-height: 16px;
@@ -663,6 +651,8 @@
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+  -ms-flex-align: center;
+      align-items: center;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-pack: start;
@@ -673,7 +663,7 @@
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   margin: 0;
-  padding: 3px 4px 0 0;
+  padding: 0 4px 0 0;
   width: auto;
 }
 
@@ -847,6 +837,7 @@
 
 .e-toolbar .e-popup-down-icon.e-icons,
 .e-toolbar .e-popup-up-icon.e-icons {
+  color: #d1d5db;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
@@ -1183,18 +1174,18 @@
 .e-toolbar {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #374151;
-  border: 1px solid #4b5563;
+  border: 0 solid #4b5563;
   box-shadow: none;
 }
 
 .e-toolbar.e-vertical .e-hor-nav {
   border: solid #4b5563;
-  border-width: 1px 0 0 0;
+  border-width: 0 0 0 0;
 }
 
 .e-toolbar.e-vertical.e-rtl .e-hor-nav {
   border: solid #4b5563;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 0 0;
 }
 
 .e-toolbar.e-vertical .e-toolbar-items .e-toolbar-item.e-separator {
@@ -1220,6 +1211,10 @@
   color: #fff;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-toolbar-item .e-tbar-btn-text {
+  color: #fff;
+}
+
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
   background: #4b5563;
   border-color: #d1d5db;
@@ -1242,17 +1237,13 @@
   color: #9ca3af;
 }
 
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn-text {
-  color: #fff;
-}
-
-.e-toolbar .e-icons {
+.e-toolbar .e-tbar-btn.e-btn .e-icons {
   color: #d1d5db;
 }
 
 .e-toolbar .e-toolbar-pop {
   background: #374151;
-  border: 1px solid #4b5563;
+  border: 0 solid #4b5563;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   background: #374151;
 }
@@ -1261,20 +1252,20 @@
   background: transparent;
 }
 
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:hover {
+.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus {
   background: #4b5563;
 }
 
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn-text {
-  color: #fff;
+.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:hover {
+  background: #4b5563;
 }
 
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #374151;
   border: 0;
-  border-left: 1px #4b5563 #374151;
   box-shadow: none;
+  border-left: 0 #4b5563 #374151;
 }
 
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active .e-icons,
@@ -1331,7 +1322,7 @@
   background: #374151;
   border: solid #4b5563;
   border-left: 0;
-  border-width: 0 1px 0 0;
+  border-width: 0 0 0 0;
 }
 
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
@@ -1368,8 +1359,8 @@
 .e-toolbar .e-hor-nav:focus {
   background: #4b5563;
   border-left: 0;
-  color: #9ca3af;
   border-color: #d1d5db;
+  color: #9ca3af;
 }
 
 .e-toolbar .e-tbar-btn:active {

package/styles/toolbar/tailwind.css

@@ -147,7 +147,7 @@
 .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   margin-left: 0;
-  padding: 3px 6px 0 0;
+  padding: 0 6px 0 0;
 }
 
 .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text,
@@ -558,18 +558,6 @@
   line-height: 22px;
 }
 
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active {
-  padding: 0 1.5px;
-}
-
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
   margin: 7px 3px;
   min-height: 16px;
@@ -663,6 +651,8 @@
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+  -ms-flex-align: center;
+      align-items: center;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-pack: start;
@@ -673,7 +663,7 @@
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
   margin: 0;
-  padding: 3px 4px 0 0;
+  padding: 0 4px 0 0;
   width: auto;
 }
 
@@ -847,6 +837,7 @@
 
 .e-toolbar .e-popup-down-icon.e-icons,
 .e-toolbar .e-popup-up-icon.e-icons {
+  color: #6b7280;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
@@ -1220,6 +1211,10 @@
   color: #111827;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-toolbar-item .e-tbar-btn-text {
+  color: #111827;
+}
+
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
   background: #e5e7eb;
   border-color: #6b7280;
@@ -1242,11 +1237,7 @@
   color: #6b7280;
 }
 
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn-text {
-  color: #111827;
-}
-
-.e-toolbar .e-icons {
+.e-toolbar .e-tbar-btn.e-btn .e-icons {
   color: #6b7280;
 }
 
@@ -1261,20 +1252,20 @@
   background: transparent;
 }
 
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:hover {
+.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus {
   background: #e5e7eb;
 }
 
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn-text {
-  color: #111827;
+.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:hover {
+  background: #e5e7eb;
 }
 
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #f3f4f6;
   border: 0;
-  border-left: 0 #e5e7eb #f3f4f6;
   box-shadow: none;
+  border-left: 0 #e5e7eb #f3f4f6;
 }
 
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active .e-icons,
@@ -1342,7 +1333,7 @@
 .e-toolbar .e-hor-nav {
   background: #f3f4f6;
   border: solid #e5e7eb;
-  border-width: 0 0 0 0;
+  border-width: 0 0 0 1px;
 }
 
 .e-toolbar .e-hor-nav::after {
@@ -1368,8 +1359,8 @@
 .e-toolbar .e-hor-nav:focus {
   background: #e5e7eb;
   border-left: 0;
-  color: #6b7280;
   border-color: #6b7280;
+  color: #6b7280;
 }
 
 .e-toolbar .e-tbar-btn:active {

package/styles/treeview/_bootstrap4-definition.scss

@@ -36,9 +36,9 @@ $treeview-drop-count-color: $primary-font !default;
 $treeview-drag-item-bg: $gray-200 !default;
 $treeview-drag-item-color: $gray-900 !default ;
 $treeview-drag-icon-color: $gray-700 !default;
-$treeview-bootstrap4-checkmark-bgcolor: $primary-font !default;
-$treeview-bootstrap4-checkmark-border-color: $primary-font !default;
-$treeview-bootstrap4-checkmark-color:  $primary !default;
+$treeview-item-active-check-bg: $primary-font !default;
+$treeview-item-active-check-border-color: $primary-font !default;
+$treeview-item-active-check-color: $primary !default;
 //enddefault
 //dimensions
 $treeview-skin-name: 'bootstrap4';

package/styles/treeview/_bootstrap5-dark-definition.scss

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

package/styles/treeview/_bootstrap5-definition.scss

@@ -0,0 +1,109 @@
+/*! TreeView's bootstrap5 theme wise override definitions and variables */
+// sass-lint:disable-all
+$treeview-font-size: $text-sm !default;
+$treeview-icon-font-size: 20px !default;
+$treeview-image-font-size: 20px !default;
+$treeview-item-height: 36px !default;
+$treeview-text-height: 34px !default;
+$treeview-input-height: 30px !default;
+$treeview-root-ul-padding: 0 0 0 12px !default;
+$treeview-rtl-root-ul-padding: 0 12px 0 0 !default;
+$treeview-child-ul-padding: 0 0 0 20px !default;
+$treeview-rtl-child-ul-padding: 0 20px 0 0 !default;
+$treeview-text-wrap-padding: 0 0 0 20px !default;
+$treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
+$treeview-icon-size: 20px !default;
+$treeview-icon-margin: 0 0 0 -20px !default;
+$treeview-rtl-icon-margin: 0 -20px 0 0 !default;
+$treeview-icon-padding: 0px !default;
+$treeview-text-padding: 0 8px !default;
+$treeview-text-margin: 0 !default;
+$treeview-image-size: 20px !default;
+$treeview-image-margin: 0 0 0 8px !default;
+$treeview-navigable-icon-image-anchor-margin-bigger: 0 12px 0 8px !default;
+$treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 6px 0 10px !default;
+$treeview-navigable-icon-image-anchor-margin: 0 8px 0 0 !default;
+$treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 8px !default;
+$treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
+$treeview-rtl-image-margin: 0 8px 0 0 !default;
+$treeview-image-text-padding: 0 8px !default;
+$treeview-icon-image-margin: 0 0 0 8px !default;
+$treeview-rtl-icon-image-margin: 0 8px 0 0 !default;
+$treeview-check-margin: 0 0 0 8px !default;
+$treeview-rtl-check-margin: 0 8px 0 0 !default;
+$treeview-check-text-padding: 0 8px !default;
+$treeview-check-image-margin: 0 0 0 8px !default;
+$treeview-rtl-check-image-margin: 0 8px 0 0 !default;
+$treeview-drop-count-border-size: 1px !default;
+$treeview-drop-count-font-size: $text-xs !default;
+
+$treeview-big-font-size: $text-base !default;
+$treeview-big-icon-font-size: 24px !default;
+$treeview-big-item-height: 42px !default;
+$treeview-big-text-height: 40px !default;
+$treeview-big-input-height: 40px !default;
+$treeview-big-text-padding: 0 12px !default;
+$treeview-big-input-padding: 0 9px !default;
+$treeview-big-icon-padding: 0px !default;
+$treeview-big-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-image-margin: 0 12px 0 0 !default;
+$treeview-big-icon-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-icon-image-margin: 0 12px 0 0 !default;
+$treeview-big-check-margin: 0 0 0 12px !default;
+$treeview-big-rtl-check-margin: 0 12px 0 0 !default;
+$treeview-big-check-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-check-image-margin: 0 12px 0 0 !default;
+$treeview-big-root-ul-padding: 0 0 0 16px !default;
+$treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
+$treeview-big-child-ul-padding: 0 0 0 20px !default;
+$treeview-big-rtl-child-ul-padding: 0 20px 0 0 !default;
+$treeview-big-image-text-padding: 0 12px !default;
+$treeview-big-icon-margin: 0 0 0 -24px !default;
+$treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
+$treeview-big-text-wrap-padding: 0 0 0 24px !default;
+$treeview-big-rtl-text-wrap-padding: 0 24px 0 0 !default;
+$treeview-big-drag-icon-font-size: 24px !default;
+$treeview-big-drag-item-text-padding-left: 24px !default;
+$treeview-big-drag-before-icon-padding: 6px !default;
+$treeview-big-check-text-padding: 0 12px !default;
+
+$treeview-font-family: $font-family !default;
+$treeview-drag-icon-font-size: 20px !default;
+$treeview-drag-icon-padding: 12px !default;
+
+//treeview ripple effect variables
+$ripple-size: -7px !default;
+$ripple-height: 32px !default;
+$ripple-width: 32px !default;
+
+//color variables
+$treeview-icon-color: $icon-color !default;
+$treeview-text-color: $content-text-color !default;
+$treeview-item-border-color: $transparent !default;
+$treeview-item-active-bg: $content-bg-color-selected !default;
+$treeview-icon-active-color: $content-text-color-selected !default;
+$treeview-text-active-color: $content-text-color-selected !default;
+$treeview-item-active-border-color: $content-bg-color-selected !default;
+$treeview-item-hover-bg: $content-bg-color-hover !default;
+$treeview-icon-hover-color: $icon-color-hover !default;
+$treeview-text-hover-color: $content-text-color-hover !default;
+$treeview-item-hover-border-color: $content-bg-color-hover !default;
+$treeview-item-active-hover-bg: darken($treeview-item-active-bg, 5%) !default;
+$treeview-icon-active-hover-color: $content-text-color-selected !default;
+$treeview-text-active-hover-color: $content-text-color-selected !default;
+$treeview-item-active-hover-border-color: $content-bg-color-selected !default;
+$treeview-text-disable-color: $content-text-color-disabled !default;
+$treeview-icon-disable-color: $icon-color-disabled !default;
+$treeview-drag-line-bg: $primary !default;
+$treeview-drag-line-color: $primary !default;
+$treeview-popup-bg-color: $content-bg-color-hover !default;
+$treeview-popup-border-color: $content-bg-color-hover !default;
+$treeview-drop-count-bg: $primary !default;
+$treeview-drop-count-border: $primary-text-color !default;
+$treeview-drop-count-color: $primary-text-color !default;
+$treeview-drag-item-bg: $content-bg-color-alt3 !default;
+$treeview-drag-item-color: $content-text-color-alt1 !default;
+$treeview-drag-icon-color: $content-text-color-alt1 !default;
+$treeview-item-active-check-bg: $primary-text-color !default;
+$treeview-item-active-check-border-color: $primary-text-color !default;
+$treeview-item-active-check-color: $primary !default;

package/styles/treeview/_layout.scss

@@ -64,7 +64,7 @@
       }
     }
 
-    @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
       .e-ul {
         padding: $treeview-big-root-ul-padding;
       }
@@ -200,7 +200,7 @@
 
     .e-checkbox-wrapper {
       margin: $treeview-big-check-margin;
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
         & + .e-list-text {
           padding: $treeview-big-check-text-padding;
         }
@@ -218,7 +218,7 @@
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
         }
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }
@@ -246,7 +246,7 @@
 
     &.e-drag-item {
 
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
 
         .e-text-content {
           padding-left:  $treeview-big-drag-item-text-padding-left;
@@ -255,12 +255,19 @@
         .e-icon-collapsible,
         .e-icon-expandable {
           font-size: $treeview-big-drag-icon-font-size;
-          margin: $treeview-big-drag-icon-margin;
+          @if ($skin-name != 'bootstrap5') {
+            margin: $treeview-big-drag-icon-margin;
+          }
         }
 
         .e-icon-collapsible::before,
         .e-icon-expandable::before {
-          padding: $treeview-big-drag-before-icon-padding;
+          @if ($skin-name != 'bootstrap5') {
+            padding: $treeview-big-drag-before-icon-padding;
+          }
+          @if ($skin-name == 'bootstrap5') {
+            font-size: $treeview-big-drag-icon-font-size;
+          }
         }
 
         @if $skin-name == 'bootstrap4' {
@@ -273,7 +280,7 @@
 
     &.e-rtl {
 
-      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
         .e-ul {
           padding: $treeview-big-rtl-root-ul-padding;
         }
@@ -294,6 +301,17 @@
         }
       }
 
+      &.e-drag-item {
+
+        @if ($skin-name == 'bootstrap5') {
+
+          .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 {
@@ -450,6 +468,14 @@
       position: relative;
     }
 
+    .e-icons .e-treeview-spinner {
+      position: absolute;
+    }
+
+    .e-icons-spinner {
+      position: relative;
+    }
+
     .e-text-content {
       @include user-select;
       border: 1px solid;
@@ -511,9 +537,12 @@
 
       .e-input-group {
         height: $treeview-input-height;
-        @if($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+        @if($skin-name == 'tailwind') {
           margin-top: 3px;
         }
+        @else if($skin-name == 'bootstrap5') {
+          margin-bottom: 2px;
+        }
         @else {
           margin-bottom: 0;
         }
@@ -567,7 +596,7 @@
     }
 
     .e-sibling {
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
         width: 100%;
       }
       @else {
@@ -581,9 +610,12 @@
     }
 
     .e-text-content + .e-sibling {
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind') {
         margin-top: -2px;
       }
+      @else if ($skin-name == 'bootstrap5') {
+        margin-top: 1px;
+      }
       @else {
         margin-top: -1px;
       }
@@ -591,7 +623,7 @@
 
     .e-sibling::before {
       @include sibling-before(ltr);
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
         height: 2px;
         top: -1.5px;
       }
@@ -708,19 +740,34 @@
 
       .e-text-content {
         float: left;
+
+        .e-list-text {
+          @if ($skin-name == 'bootstrap5') {
+            padding: 0 $treeview-drag-icon-padding;
+          }
+        }
       }
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' ) {
         .e-icon-collapsible,
         .e-icon-expandable {
-          margin:  $treeview-drag-icon-margin;
+          @if ($skin-name != 'bootstrap5') {
+            margin:  $treeview-drag-icon-margin;
+          }
+
+          @if ($skin-name == 'bootstrap5') {
+            box-sizing: content-box;
+            padding-left: $treeview-drag-icon-padding;
+          }
         }
       }
 
       .e-icon-collapsible::before,
       .e-icon-expandable::before {
         font-size: $treeview-drag-icon-font-size;
-        padding: $treeview-drag-icon-padding;
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+        @if ($skin-name != 'bootstrap5') {
+          padding: $treeview-drag-icon-padding;
+        }
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
           padding-right: $treeview-drag-icon-padding-right;
         }
       }
@@ -738,7 +785,7 @@
         @else {
           line-height: normal;
           min-width: 12px;
-          @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
             padding: 1px 3px 2px;
           }
           @else {
@@ -850,7 +897,7 @@
 
         .e-icon-collapsible,
         .e-icon-expandable {
-          @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+          @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
             margin: $treeview-rtl-drag-margin;
           }
         }