@syncfusion/ej2-filemanager 27.2.5 → 28.1.33

package/styles/bds.scss

@@ -0,0 +1,17 @@
+@import 'ej2-base/styles/definition/bds.scss';
+@import 'ej2-inputs/styles/input/bds-definition.scss';
+@import 'ej2-inputs/styles/textbox/bds-definition.scss';
+@import 'ej2-inputs/styles/uploader/bds-definition.scss';
+@import 'ej2-popups/styles/dialog/bds-definition.scss';
+@import 'ej2-popups/styles/spinner/bds-definition.scss';
+@import 'ej2-buttons/styles/check-box/bds-definition.scss';
+@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
+@import 'ej2-navigations/styles/context-menu/bds-definition.scss';
+@import 'ej2-navigations/styles/treeview/bds-definition.scss';
+@import 'ej2-navigations/styles/toolbar/bds-definition.scss';
+@import 'ej2-layouts/styles/splitter/bds-definition.scss';
+@import 'ej2-grids/styles/grid/bds-definition.scss';
+@import 'file-manager/bds-definition.scss';
+@import 'file-manager/icons/bds.scss';
+@import 'file-manager/all.scss';
+@import 'file-manager/bigger.scss';

package/styles/file-manager/_bigger.scss

@@ -27,6 +27,10 @@
       font-size: 10px;
       margin: 0;
     }
+    @if $fm-skin-name == 'tailwind3' {
+      line-height: 21px;
+      @include size(24px, 24px);
+    }
   }
 }
 
@@ -160,6 +164,9 @@
           @if $fm-skin-name == 'material-dark' {
             padding: $fe-big-bc-padding;
           }
+          @if $fm-skin-name == 'tailwind3' {
+            padding: 16px;
+          }
         }
 
         .e-address-list-item .e-icons {
@@ -168,6 +175,9 @@
 
         .e-list-text {
           font-size: $fe-big-bc-font-size;
+          @if $fm-skin-name == 'tailwind3' {
+            line-height: 24px;
+          }
         }
 
         .e-search-wrap {
@@ -214,7 +224,9 @@
           .e-rowcell {
             border-bottom: 1px solid;
             border-bottom-color: $fe-border-color;
-
+            @if $fm-skin-name == 'tailwind3' {
+              padding: 10px 12px;
+            }
             &.e-fe-checkbox {
               padding: 0;
             }
@@ -226,6 +238,10 @@
             padding-left: 9px;
             padding-right: 9px;
           }
+          @else if $fm-skin-name == 'tailwind3' {
+            padding-left: 15px;
+            padding-right: 15px;
+          }
           @else {
             padding-left: 10px;
             padding-right: 10px;
@@ -236,6 +252,13 @@
           @include ellipsis;
         }
 
+        @if $fm-skin-name == 'tailwind3' {
+          .e-fe-text {
+            font-size: 16px;
+            line-height: 24px;
+          }
+        }
+
         @if $fm-skin-name == 'fluent2' {
           .e-fe-text {
             font-size: $text-base;
@@ -243,7 +266,7 @@
           }
           .e-fe-date,
           .e-fe-size {
-            color: $fe-grid-empty-inner-content-color;
+            color: $content-text-color-alt2;
           }
         }
       }
@@ -254,6 +277,9 @@
 
       .e-large-icons .e-list-parent {
         padding: 0;
+        @if ($fm-skin-name == 'tailwind3') {
+          padding: 0 8px;
+        }
 
         .e-list-item {
           display: inline-table;
@@ -275,8 +301,13 @@
           .e-list-text {
             margin: 0 auto;
             width: $fe-mobile-lg-item-inner-width;
+            @if $fm-skin-name == 'tailwind3' {
+              font-size: $fe-big-lg-text-font-size;
+              line-height: 24px;
+            }
             @if $fm-skin-name == 'Material3' {
               font-size: $fe-big-lg-text-font-size;
+              padding: $fe-big-lg-text-padding;
             }
           }
 
@@ -324,6 +355,9 @@
             @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
               margin-top: 7px;
             }
+            @else if ($fm-skin-name == 'tailwind3') {
+              margin-top: 15px;
+            }
             @else {
               margin-top: 3px;
             }
@@ -460,6 +494,13 @@
         }
       }
 
+      @if $fm-skin-name == 'tailwind3' {
+        .e-list-icon {
+          height: 24px;
+          width: 24px;
+        }
+      }
+
       .e-list-parent .e-list-item {
         .e-fullrow {
           height: $fe-big-tv-fullrow-height;
@@ -469,6 +510,12 @@
           line-height: $fe-big-tv-node-height;
         }
       }
+
+      .e-text-content {
+        @if ($fm-skin-name == 'tailwind3') {
+          height: $fe-big-tv-fullrow-height;
+        }
+      }
     }
 
     .e-address {
@@ -487,6 +534,9 @@
         }
         .e-icons {
           font-size: $fe-big-bc-icon-font-size;
+          @if ($fm-skin-name == 'tailwind3') {
+            margin: $fe-big-bc-icon-margin;
+          }
         }
       }
 
@@ -548,6 +598,12 @@
         @else if $fm-skin-name == 'Material3' {
           @include margin-padding($fe-search-icon-margin, $fe-big-search-input-padding);
         }
+        @else if ($fm-skin-name == 'tailwind3') {
+          font-size: 16px;
+          line-height: 16px;
+          margin: 9px 10px 8px 9px;
+          padding: 4px;
+        }
         @else {
           margin: 7px 0;
         }
@@ -556,7 +612,11 @@
 
     .e-grid {
       @include checkbox($fe-big-cb-line-height);
-
+      @if $fm-skin-name == 'tailwind3' {
+        .e-checkbox-wrapper .e-frame {
+          margin: 0;
+        }
+      }
       .e-gridheader {
         .e-headercell {
           height: $fe-big-grid-header-height;
@@ -615,7 +675,7 @@
       }
 
       .e-fe-icon {
-        @if $fm-skin-name == 'tailwind' {
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'tailwind3' {
           @include size(24px, 24px);
         }
         @else {
@@ -626,7 +686,7 @@
       @include empty-style($fe-big-grid-empty-min-width, $fe-big-grid-empty-content-font-size, $fe-big-grid-empty-content-margin, $fe-big-grid-empty-content-padding, $fe-big-grid-empty-content-text-align, $fe-big-grid-empty-icon-height, $fe-big-grid-empty-icon-width, $fe-big-grid-empty-icon-margin, $fe-big-grid-empty-inner-content-font-size, $fe-big-grid-empty-inner-content-margin, $fe-big-grid-empty-inner-content-padding, $fe-big-grid-empty-inner-content-text-align);
 
       .e-empty-inner-content {
-        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'tailwind3' and $fm-skin-name != 'bootstrap5' {
           opacity: $fe-big-grid-empty-inner-content-opacity;
         }
       }
@@ -658,6 +718,9 @@
       }
 
       .e-list-text {
+        @if ($fm-skin-name == 'tailwind3') {
+          line-height: 24px;
+        }
         font-size: $fe-big-lg-text-font-size;
         padding: $fe-big-lg-text-padding;
         width: $fe-big-lg-item-inner-width;
@@ -675,7 +738,7 @@
       @include empty-style($fe-big-lg-icon-empty-min-width, $fe-big-lg-icon-empty-content-font-size, $fe-big-lg-icon-empty-content-margin, $fe-big-lg-icon-empty-content-padding, $fe-big-lg-icon-empty-content-text-align, $fe-big-lg-icon-empty-icon-height, $fe-big-lg-icon-empty-icon-width, $fe-big-lg-icon-empty-icon-margin, $fe-big-lg-icon-empty-inner-content-font-size, $fe-big-lg-icon-empty-inner-content-margin, $fe-big-lg-icon-empty-inner-content-padding, $fe-big-lg-icon-empty-inner-content-text-align);
 
       .e-empty-inner-content {
-        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'tailwind3' {
           opacity: $fe-big-lg-icon-empty-inner-content-opacity;
         }
       }

package/styles/file-manager/_fluent2-definition.scss

@@ -161,7 +161,7 @@ $fe-mobile-lg-item-inner-width: 94px !default;
 $fe-mobile-lg-icon-height: 40px !default;
 $fe-mobile-lg-icon-width: 40px !default;
 $fe-mobile-lg-icon-margin: 11px auto 0 !default;
-$fe-mobile-lg-img-height: 94px !default;
+$fe-mobile-lg-img-height: 40px !default;
 $fe-mobile-grid-icon-size: 32px !default;
 $fe-mobile-icon-font-size: $text-xl !default;
 $fe-mobile-newfolder-padding-top: 0 !default;

package/styles/file-manager/_layout.scss

@@ -48,6 +48,10 @@
       font-size: 10px;
       margin: 0;
     }
+    @if $fm-skin-name == 'tailwind3' {
+      @include size(16px, 16px);
+      margin: 4px 0 0 4px;
+    }
   }
 }
 
@@ -160,7 +164,9 @@
       .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn {
         border: 0;
         box-shadow: none;
-        font-weight: normal;
+        @if $fm-skin-name != 'tailwind3' {
+          font-weight: normal;
+        }
         height: $fe-tb-ddb-height;
         padding: $fe-tb-ddb-btn-padding;
 
@@ -210,6 +216,12 @@
 
     .e-treeview {
 
+      @if ($fm-skin-name == 'tailwind3') {
+        border-radius: 0;
+        border: none;
+        background: none;
+      }
+
       & > .e-ul {
         overflow: initial;
         @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
@@ -252,6 +264,10 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        @if ($fm-skin-name == 'tailwind3') {
+          top: 4px;
+          height: $fe-tv-fullrow-height;
+        }
       }
 
       .e-list-text {
@@ -331,6 +347,9 @@
         @else if ($fm-skin-name == 'fluent2') {
           padding: $fe-search-input-padding;
         }
+        @else if ($fm-skin-name == 'tailwind3') {
+          padding: 3px;
+        }
         @else {
           padding: 5px;
         }
@@ -392,7 +411,7 @@
 
       .e-address-list-item {
         display: inline-block;
-        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $fm-skin-name != 'Material3' {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $fm-skin-name != 'Material3' and $fm-skin-name != 'tailwind3' {
           height: $fe-bc-li-item-height;
         }
 
@@ -416,7 +435,7 @@
           }
 
           &::before {
-            @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'fluent2' {
+            @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'fluent2' and $fm-skin-name != 'tailwind3' {
               padding: $fe-bc-icon-padding;
             }
           }
@@ -430,6 +449,13 @@
 
     .e-grid {
       @include checkbox($fe-cb-line-height);
+      @if ($fm-skin-name == 'tailwind3') {
+        .e-checkbox-wrapper {
+          .e-icons.e-check {
+            font-size: 10px;
+          }
+        }
+      }
       border-width: 0;
       float: left;
 
@@ -441,6 +467,12 @@
       .e-gridheader {
         border-width: 0 1px 1px;
 
+        @if ($fm-skin-name == 'tailwind3') {
+          .e-sortfilter .e-headercelldiv {
+            padding: 0 .5em;
+          }
+        }
+
         .e-headercell {
           height: $fe-grid-header-height;
 
@@ -467,11 +499,23 @@
         &:hover,
         .e-active {
           @include visibility(visible);
+          @if $fm-skin-name == 'tailwind3' {
+            .e-checkbox-wrapper {
+              position: relative;
+              z-index: 999;
+            }
+          }
         }
       }
 
       &.e-headercheck .e-gridheader .e-headercontent {
         @include visibility(visible);
+        @if $fm-skin-name == 'tailwind3' {
+          .e-checkbox-wrapper {
+            position: relative;
+            z-index: 999;
+          }
+        }
       }
 
       @if $fm-skin-name == 'FluentUI' {
@@ -563,7 +607,7 @@
         @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
           line-height: 24px;
         }
-        @if ($fm-skin-name == 'fluent2') {
+        @if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
           line-height: 20px;
         }
         @if $fm-skin-name == 'Material3' {
@@ -580,10 +624,10 @@
 
       .e-empty-inner-content {
         @include empty-content($fe-grid-empty-inner-content-font-size, $fe-grid-empty-inner-content-margin, $fe-grid-empty-inner-content-padding, $fe-grid-empty-inner-content-text-align);
-        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap5.3' or $fm-skin-name == 'Material3' {
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap5.3' or $fm-skin-name == 'Material3' or $fm-skin-name == 'tailwind3' {
           line-height: 22px;
         }
-        @else if $fm-skin-name == 'fluent2' {
+        @else if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
           line-height: 20px;
           color: $fe-grid-empty-inner-content-color;
         }
@@ -634,7 +678,7 @@
 
         &.e-focused {
           box-shadow: none;
-          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' and $fm-skin-name != 'fluent2' {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' and $fm-skin-name != 'fluent2' and $fm-skin-name != 'tailwind3' {
             td {
               box-shadow: $fe-grid-row-ie-box-shadow;
               &:first-child{
@@ -681,7 +725,11 @@
     &.e-rtl .e-view-container .e-grid .e-gridheader {
       padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
     }
-
+    @if $fm-skin-name == 'tailwind3' {
+      &.e-rtl .e-large-icons .e-checkbox-wrapper {
+        padding-right: 4px;
+      }
+    }
     .e-large-icons {
       @include checkbox($fe-cb-line-height);
       float: left;
@@ -704,7 +752,7 @@
         @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
           line-height: 24px;
         }
-        @if ($fm-skin-name == 'fluent2') {
+        @if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
           line-height: 20px;
         }
         @if $fm-skin-name == 'Material3' {
@@ -724,7 +772,7 @@
         @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap5.3' or $fm-skin-name == 'Material3' {
           line-height: 22px;
         }
-        @else if $fm-skin-name == 'fluent2' {
+        @else if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
           line-height: 20px;
           color: $fe-grid-empty-inner-content-color;
         }
@@ -751,6 +799,11 @@
         @if $fm-skin-name == 'Material3' {
           margin: 4px;
         }
+        @if ($fm-skin-name == 'tailwind3') {
+          .e-icons.e-check {
+            font-size: 10px;
+          }
+        }
       }
 
       .e-list-item {
@@ -758,7 +811,9 @@
         float: left;
         @include icon-style($fe-lg-item-height, $fe-lg-item-width, $fe-lg-item-margin);
         overflow: hidden;
-        padding: $fe-lg-item-padding;
+        @if $fm-skin-name != 'tailwind3' {
+          padding: $fe-lg-item-padding;
+        }
 
         &.e-fe-drop-folder {
           @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3'{
@@ -790,19 +845,24 @@
         @include ellipsis;
         display: block;
         font-size: $fe-lg-text-font-size;
-        padding: $fe-lg-text-padding;
+        @if $fm-skin-name != 'tailwind3' {
+          padding: $fe-lg-text-padding;
+        }
         text-align: center;
         width: $fe-lg-item-inner-width;
         @if $fm-skin-name == 'Material3' {
           line-height: $fe-lg-text-line-height;
         }
+        @if $fm-skin-name == 'tailwind3' {
+          line-height: 20px;
+        }
       }
 
       .e-list-img {
         @if $fm-skin-name != 'Material3' and $fm-skin-name != 'Material3-dark' {
           border: 2px solid;
         }
-        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'Material3' {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'Material3' and $fm-skin-name != 'tailwind3' {
           box-shadow: $fe-img-box-shadow;
         }
         display: block;
@@ -950,6 +1010,9 @@
               @else if $fm-skin-name == 'Material3' {
                 margin: $fe-rtl-search-input-margin;
               }
+              @else if $fm-skin-name == 'tailwind3' {
+                margin: 0 34px 0 0;
+              }
               @else {
                 margin: 0 24px 0 0;
               }
@@ -975,7 +1038,7 @@
       .e-grid.e-rtl {
 
         .e-row.e-focused {
-          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' and $fm-skin-name != 'tailwind3' {
             td:first-child {
               box-shadow: $fe-grid-row-lc-ie-box-shadow;
             }

package/styles/file-manager/_material3-definition.scss

@@ -111,8 +111,8 @@ $fe-big-rtl-search-input-margin: 0 48px 0 0 !default;
 $fe-big-rtl-search-input-padding: 10px 10px 10px 18px !default;
 $fe-rtl-grid-icon-margin: 0 0 0 8px !default;
 $fe-mobile-tb-height: 56px !default;
-$fe-mobile-lg-item-height: 96px !default;
-$fe-mobile-lg-item-width: 96px !default;
+$fe-mobile-lg-item-height: 155px !default;
+$fe-mobile-lg-item-width: 155px !default;
 $fe-mobile-lg-item-margin: 20px 8px !default;
 $fe-mobile-lg-item-inner-width: 92px !default;
 $fe-mobile-lg-icon-height: 110px !default;