@syncfusion/ej2-filemanager 20.4.54 → 21.1.37

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

@@ -63,6 +63,7 @@ $fe-search-padding: 1.5px 8px 0 1px !default;
 $fe-upload-overlay-border: 3px !default;
 $fe-search-height: 30px !default;
 $fe-search-icon-margin: 3px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: -1px 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -94,6 +95,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

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

@@ -65,6 +65,7 @@ $fe-upload-overlay-border: 2px !default;
 $fe-search-padding: 1.5px 8px 0 1px !default;
 $fe-search-height: 30px !default;
 $fe-search-icon-margin: 3px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -96,6 +97,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

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

@@ -8,10 +8,10 @@ $fe-lg-text-font-size: $text-xs !default;
 $fe-ddl-icon-font-size: $text-sm !default;
 
 $fe-big-bc-font-size: $text-sm !default;
-$fe-big-bc-icon-font-size: 10px !default;
+$fe-big-bc-icon-font-size: $text-xxs !default;
 $fe-big-lg-text-font-size: $text-sm !default;
 $fe-big-dg-header-font-size: 21px !default;
-$fe-big-dg-td-font-size: 15px !default;
+$fe-big-dg-td-font-size: $text-base !default;
 
 $fe-clone-box-shadow: $shadow !default;
 $fe-clone-border: none !default;
@@ -25,6 +25,7 @@ $fe-upload-overlay-border: 2px !default;
 $fe-search-padding: 3px 12px 2px 0 !default;
 $fe-search-height: 29px !default;
 $fe-search-icon-margin: 5px !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 29px !default;
 $fe-bc-margin: 0 !default;
@@ -41,10 +42,10 @@ $fe-grid-icon-margin: 0 !default;
 $fe-dg-td-padding: 4px 24px 4px 0 !default;
 $fe-dg-rtl-td-padding: 8px 0 8px 24px !default;
 $fe-grid-header-height: 32px !default;
-$fe-grid-header-font-size: 10px !default;
+$fe-grid-header-font-size: $text-xxs !default;
 $fe-grid-header-cb-padding-left: 12px !default;
-$fe-grid-content-font-size: 12px !default;
-$fe-grid-content-name-font-size: 14px !default;
+$fe-grid-content-font-size: $text-xs !default;
+$fe-grid-content-name-font-size: $text-sm !default;
 $fe-grid-icon-sort-margin: 0 !default;
 $fe-lg-margin: 0 !default;
 $fe-lg-padding: 0 4px !default;
@@ -52,6 +53,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;
@@ -92,9 +94,9 @@ $fe-big-lg-icon-width: 52px !default;
 $fe-big-lg-icon-margin: 11px auto !default;
 $fe-big-lg-img-height: 79px !default;
 $fe-big-lg-text-padding: 4px 2px 2px !default;
-$fe-big-grid-header-font-size: 14px !default;
-$fe-big-grid-content-font-size: 14px !default;
-$fe-big-grid-content-name-font-size: 16px !default;
+$fe-big-grid-header-font-size: $text-sm !default;
+$fe-big-grid-content-font-size: $text-sm !default;
+$fe-big-grid-content-name-font-size: $text-base !default;
 $fe-big-cb-line-height: 14px !default;
 
 $fe-rtl-grid-icon-margin: 0 0 0 8px !default;
@@ -108,7 +110,7 @@ $fe-mobile-lg-icon-width: 110px !default;
 $fe-mobile-lg-icon-margin: 11px auto 0 !default;
 $fe-mobile-lg-img-height: 110px !default;
 $fe-mobile-grid-icon-size: 35px !default;
-$fe-mobile-icon-font-size: 20px !default;
+$fe-mobile-icon-font-size: $text-xl !default;
 $fe-mobile-newfolder-padding-top: 0 !default;
 $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
@@ -140,7 +142,7 @@ $fe-big-lg-icon-empty-icon-height: 92px !default;
 $fe-big-lg-icon-empty-icon-margin: 0 auto !default;
 $fe-big-lg-icon-empty-icon-width: 92px !default;
 
-$fe-big-lg-icon-empty-inner-content-font-size: 14px !default;
+$fe-big-lg-icon-empty-inner-content-font-size: $text-sm !default;
 $fe-big-lg-icon-empty-inner-content-margin: 0 auto !default;
 $fe-big-lg-icon-empty-inner-content-opacity: .5 !default;
 $fe-big-lg-icon-empty-inner-content-padding: 4px !default;
@@ -157,7 +159,7 @@ $fe-big-grid-empty-icon-height: 92px !default;
 $fe-big-grid-empty-icon-margin: 0 auto !default;
 $fe-big-grid-empty-icon-width: 92px !default;
 
-$fe-big-grid-empty-inner-content-font-size: 14px !default;
+$fe-big-grid-empty-inner-content-font-size: $text-sm !default;
 $fe-big-grid-empty-inner-content-margin: 0 auto !default;
 $fe-big-grid-empty-inner-content-opacity: .5 !default;
 $fe-big-grid-empty-inner-content-padding: 6px !default;

package/styles/file-manager/_fabric-dark-definition.scss

@@ -61,6 +61,7 @@ $fe-search-padding: 2px 4px 2px 8px !default;
 $fe-upload-overlay-border: 3px !default;
 $fe-search-height: 29px !default;
 $fe-search-icon-margin: 4px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: -2px 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -92,6 +93,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

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

@@ -63,6 +63,7 @@ $fe-search-padding: 1.5px 8px 0 1px !default;
 $fe-upload-overlay-border: 3px !default;
 $fe-search-height: 30px !default;
 $fe-search-icon-margin: 4px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: -2px 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -94,6 +95,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

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

@@ -14,10 +14,10 @@ $fe-grid-row-lc-ie-box-shadow: inset -1px 1px 0 0 #66afe9, inset -1px -1px 0 0 #
 $fe-img-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .05) !default;
 
 $fe-big-bc-font-size: $text-sm !default;
-$fe-big-bc-icon-font-size: 10px !default;
+$fe-big-bc-icon-font-size: $text-xxs !default;
 $fe-big-lg-text-font-size: $text-sm !default;
 $fe-big-dg-header-font-size: 21px !default;
-$fe-big-dg-td-font-size: 15px !default;
+$fe-big-dg-td-font-size: $text-base !default;
 
 $fe-clone-box-shadow: $shadow-sm !default;
 $fe-clone-border: none !default;
@@ -31,6 +31,7 @@ $fe-upload-overlay-border: 2px !default;
 $fe-search-padding: 4px 8px 5px 0 !default;
 $fe-search-height: 32px !default;
 $fe-search-icon-margin: 4px !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-margin: 10px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 38px !default;
@@ -48,10 +49,10 @@ $fe-grid-icon-margin: 0 !default;
 $fe-dg-td-padding: 4px 24px 4px 0 !default;
 $fe-dg-rtl-td-padding: 8px 0 8px 24px !default;
 $fe-grid-header-height: 36px !default;
-$fe-grid-header-font-size: 14px !default;
+$fe-grid-header-font-size: $text-sm !default;
 $fe-grid-header-cb-padding-left: 5px !default;
-$fe-grid-content-font-size: 14px !default;
-$fe-grid-content-name-font-size: 14px !default;
+$fe-grid-content-font-size: $text-sm !default;
+$fe-grid-content-name-font-size: $text-sm !default;
 $fe-grid-icon-sort-margin: 0 !default;
 $fe-lg-margin: 0 !default;
 $fe-lg-padding: 0 12px !default;
@@ -59,6 +60,7 @@ $fe-lg-item-height: 94px !default;
 $fe-lg-item-width: 94px !default;
 $fe-lg-item-margin: 12px 8px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 74px !default;
 $fe-lg-item-inner-width: 90px !default;
 $fe-lg-icon-height: 40px !default;
@@ -99,9 +101,9 @@ $fe-big-lg-icon-width: 52px !default;
 $fe-big-lg-icon-margin: 0 auto !default;
 $fe-big-lg-img-height: 79px !default;
 $fe-big-lg-text-padding: 4px 2px 2px !default;
-$fe-big-grid-header-font-size: 14px !default;
-$fe-big-grid-content-font-size: 14px !default;
-$fe-big-grid-content-name-font-size: 16px !default;
+$fe-big-grid-header-font-size: $text-sm !default;
+$fe-big-grid-content-font-size: $text-sm !default;
+$fe-big-grid-content-name-font-size: $text-base !default;
 $fe-big-cb-line-height: 21px !default;
 
 $fe-rtl-grid-icon-margin: 0 0 0 8px !default;
@@ -115,7 +117,7 @@ $fe-mobile-lg-icon-width: 40px !default;
 $fe-mobile-lg-icon-margin: 0 auto !default;
 $fe-mobile-lg-img-height: 40px !default;
 $fe-mobile-grid-icon-size: 35px !default;
-$fe-mobile-icon-font-size: 20px !default;
+$fe-mobile-icon-font-size: $text-xl !default;
 $fe-mobile-newfolder-padding-top: 0 !default;
 $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
@@ -147,7 +149,7 @@ $fe-big-lg-icon-empty-icon-height: 92px !default;
 $fe-big-lg-icon-empty-icon-margin: 0 auto !default;
 $fe-big-lg-icon-empty-icon-width: 92px !default;
 
-$fe-big-lg-icon-empty-inner-content-font-size: 14px !default;
+$fe-big-lg-icon-empty-inner-content-font-size: $text-sm !default;
 $fe-big-lg-icon-empty-inner-content-margin: 0 auto !default;
 $fe-big-lg-icon-empty-inner-content-opacity: .5 !default;
 $fe-big-lg-icon-empty-inner-content-padding: 4px !default;
@@ -164,7 +166,7 @@ $fe-big-grid-empty-icon-height: 92px !default;
 $fe-big-grid-empty-icon-margin: 0 auto !default;
 $fe-big-grid-empty-icon-width: 92px !default;
 
-$fe-big-grid-empty-inner-content-font-size: 14px !default;
+$fe-big-grid-empty-inner-content-font-size: $text-sm !default;
 $fe-big-grid-empty-inner-content-margin: 0 auto !default;
 $fe-big-grid-empty-inner-content-opacity: .5 !default;
 $fe-big-grid-empty-inner-content-padding: 6px !default;

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

@@ -25,6 +25,7 @@ $fe-upload-overlay-border: 2px !default;
 $fe-search-padding: 3px 12px 2px 0 !default;
 $fe-search-height: 29px !default;
 $fe-search-icon-margin: 5px !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 29px !default;
 $fe-bc-margin: 0 !default;
@@ -52,6 +53,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

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

@@ -63,6 +63,7 @@ $fe-search-padding: 1.5px 8px 0 8px !default;
 $fe-upload-overlay-border: 3px !default;
 $fe-search-height: 30px !default;
 $fe-search-icon-margin: 5px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: -2px 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -94,6 +95,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

package/styles/file-manager/_highcontrast-light-definition.scss

@@ -63,6 +63,7 @@ $fe-upload-overlay-border: 3px !default;
 $fe-search-padding: 0 4px 0 16px !default;
 $fe-search-height: 29px !default;
 $fe-search-icon-margin: 5px 0;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -94,6 +95,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

package/styles/file-manager/_layout.scss

@@ -80,6 +80,30 @@
         border-width: 0 0 1px;
       }
 
+      @if ($fm-skin-name == 'Material3') {
+        height: $fe-tb-height;
+        min-height: $fe-tb-height;
+      }
+
+      @if ($fm-skin-name == 'Material3') {
+        .e-toolbar-item {
+          .e-tbar-btn {
+            .e-tbar-btn-text {
+              line-height: 18px;
+              padding: 7px 8px;
+            }
+
+            .e-icons.e-btn-icon {
+              padding: 7px 8px;
+            }
+          }
+        }
+
+        .e-toolbar-item:not(.e-separator) {
+          padding: 0;
+        }
+      }
+
       .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn {
         border: 0;
         box-shadow: none;
@@ -251,6 +275,9 @@
             @if $skin-name == 'material' {
               height: 30px;
             }
+            @if $fm-skin-name == 'Material3' {
+              height: $fe-search-input-height;
+            }
           }
 
           .e-clear-icon {
@@ -263,12 +290,15 @@
       }
 
       .e-fe-search {
-        font-size: 14px;
+        font-size: $fe-search-icon-font-size;
         margin: $fe-search-icon-margin;
         @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
           margin-right: 4px;
           padding: 3px;
         }
+        @if ($fm-skin-name == 'Material3') {
+          padding: $fe-search-input-padding;
+        }
         @else {
           padding: 5px;
         }
@@ -322,7 +352,7 @@
 
       .e-address-list-item {
         display: inline-block;
-        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'Material3' {
           height: $fe-bc-li-item-height;
         }
 
@@ -429,8 +459,13 @@
             padding: 8px;
           }
 
-          .e-fe-text {
-            font-size: $fe-grid-content-name-font-size;
+          @if $fm-skin-name == 'Material3' {
+            padding: 8px 12px;
+
+            .e-fe-text {
+              font-size: $fe-grid-content-name-font-size;
+              line-height: 20px;
+            }
           }
         }
 
@@ -492,7 +527,7 @@
       .e-empty-inner-content {
         font-size: $fe-grid-empty-inner-content-font-size;
         margin: $fe-grid-empty-inner-content-margin;
-        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3' {
           line-height: 22px;
         }
         @else {
@@ -520,9 +555,12 @@
         }
 
         .e-fe-grid-icon {
-          @if $fm-skin-name != 'tailwind' {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'Material3' {
             padding: 0 0 0 12px;
           }
+          @if $fm-skin-name == 'Material3' {
+            padding: $fe-grid-icon-padding;
+          }
 
           .e-headercelldiv {
             text-overflow: unset;
@@ -544,7 +582,7 @@
 
         &.e-focused {
           box-shadow: none;
-          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'FluentUI' {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' {
             td {
               box-shadow: $fe-grid-row-ie-box-shadow;
             }
@@ -633,7 +671,7 @@
       .e-empty-inner-content {
         font-size: $fe-lg-icon-empty-inner-content-font-size;
         margin: $fe-lg-icon-empty-inner-content-margin;
-        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3' {
           line-height: 22px;
         }
         @else {
@@ -662,7 +700,7 @@
       }
 
       .e-list-item {
-        border: 1px solid;
+        border: $fe-lg-item-border solid;
         float: left;
         height: $fe-lg-item-height;
         margin: $fe-lg-item-margin;
@@ -679,7 +717,7 @@
             border: 2px dashed $fe-drop-folder-bg-color;
           }
         }
-        @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap-dark' or $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+        @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap-dark' or $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $skin-name == 'Material3' {
           border-radius: 4px;
         }
 
@@ -707,7 +745,7 @@
 
       .e-list-img {
         border: 2px solid;
-        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'Material3' {
           box-shadow: $fe-img-box-shadow;
         }
         display: block;
@@ -870,7 +908,7 @@
       .e-grid.e-rtl {
 
         .e-row.e-focused {
-          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'FluentUI' {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' {
             td:first-child {
               box-shadow: $fe-grid-row-lc-ie-box-shadow;
             }
@@ -1448,6 +1486,15 @@
 
     .e-toolbar {
 
+      @if ($fm-skin-name == 'Material3') {
+        height: $fe-big-tb-height;
+        min-height: $fe-big-tb-height;
+
+        .e-toolbar-item:not(.e-separator) {
+          min-height: $fe-big-tb-height;
+        }
+      }
+
       .e-toolbar-items .e-toolbar-item .e-btn-icon.e-icons {
         font-size: $fe-mobile-icon-font-size;
       }
@@ -1549,7 +1596,9 @@
       }
 
       .e-address-list-item {
-        height: $fe-big-bc-li-item-height;
+        @if ($fm-skin-name != 'Material3') {
+          height: $fe-big-bc-li-item-height;
+        }
 
         .e-icons {
           font-size: $fe-big-bc-icon-font-size;
@@ -1584,6 +1633,11 @@
             @if ($fm-skin-name == 'FluentUI') {
               height: 30px;
             }
+
+            @if ($fm-skin-name == 'Material3') {
+              margin: $fe-big-search-input-margin;
+              height: $fe-big-search-input-height;
+            }
           }
 
           .e-clear-icon::before {
@@ -1610,9 +1664,16 @@
         @else if $fm-skin-name == 'FluentUI' {
           margin: 3px;
         }
+        @else if($fm-skin-name == 'Material3') {
+          margin: $fe-search-icon-margin;
+        }
         @else {
           margin: 7px 0;
         }
+
+        @if ($fm-skin-name == 'Material3') {
+          padding: $fe-big-search-input-padding;
+        }
       }
     }
 

package/styles/file-manager/_material-dark-definition.scss

@@ -63,6 +63,7 @@ $fe-upload-overlay-border: 3px !default;
 $fe-search-padding: 1px 7px 0 16px !default;
 $fe-search-height: 29px !default;
 $fe-search-icon-margin: 3px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 8px 8px 0 8px !default;
 $fe-search-input-margin: 0 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -94,6 +95,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

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

@@ -63,6 +63,7 @@ $fe-upload-overlay-border: 3px !default;
 $fe-search-padding: 1.5px 7px 1px 16px !default;
 $fe-search-height: 29px !default;
 $fe-search-icon-margin: 3px 0 !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 8px 8px 0 8px !default;
 $fe-search-input-margin: 0 0 0 24px !default;
 $fe-bc-margin: 0 !default;
@@ -94,6 +95,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;

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

@@ -1,16 +1,16 @@
 /*! FileManager's tailwind theme wise override definitions and variables */
 $fm-skin-name: $skin-name !default;
 $fe-bc-font-size: $text-xs !default;
-$fe-bc-icon-font-size: 20px !default;
+$fe-bc-icon-font-size: $text-xl !default;
 $fe-dg-td-font-size: $text-sm !default;
 $fe-lg-text-font-size: $text-xs !default;
 $fe-ddl-icon-font-size: $text-sm !default;
 
 $fe-big-bc-font-size: $text-sm !default;
-$fe-big-bc-icon-font-size: 20px !default;
+$fe-big-bc-icon-font-size: $text-xl !default;
 $fe-big-lg-text-font-size: $text-sm !default;
 $fe-big-dg-header-font-size: 21px !default;
-$fe-big-dg-td-font-size: 15px !default;
+$fe-big-dg-td-font-size: $text-base !default;
 
 $fe-border-color: $border-light !default;
 $fe-background: transparent;
@@ -60,6 +60,7 @@ $fe-upload-overlay-border: 2px !default;
 $fe-search-padding: 2.5px 12px 2px 0 !default;
 $fe-search-height: 29px !default;
 $fe-search-icon-margin: 5px !default;
+$fe-search-icon-font-size : 14px !default;
 $fe-search-clear-icon-padding: 0 !default;
 $fe-search-input-margin: 0 0 0 29px !default;
 $fe-bc-margin: 0 !default;
@@ -76,10 +77,10 @@ $fe-grid-icon-margin: 0 !default;
 $fe-dg-td-padding: 4px 24px 4px 0 !default;
 $fe-dg-rtl-td-padding: 8px 0 8px 24px !default;
 $fe-grid-header-height: 32px !default;
-$fe-grid-header-font-size: 10px !default;
+$fe-grid-header-font-size: $text-xxs !default;
 $fe-grid-header-cb-padding-left: 12px !default;
-$fe-grid-content-font-size: 12px !default;
-$fe-grid-content-name-font-size: 14px !default;
+$fe-grid-content-font-size: $text-xs !default;
+$fe-grid-content-name-font-size: $text-sm !default;
 $fe-grid-icon-sort-margin: 0 !default;
 $fe-lg-margin: 0 !default;
 $fe-lg-padding: 0 4px !default;
@@ -87,6 +88,7 @@ $fe-lg-item-height: 85px !default;
 $fe-lg-item-width: 80px !default;
 $fe-lg-item-margin: 8px 4px !default;
 $fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
 $fe-lg-item-inner-height: 79px !default;
 $fe-lg-item-inner-width: 74px !default;
 $fe-lg-icon-height: 40px !default;
@@ -127,9 +129,9 @@ $fe-big-lg-icon-width: 52px !default;
 $fe-big-lg-icon-margin: 11px auto !default;
 $fe-big-lg-img-height: 79px !default;
 $fe-big-lg-text-padding: 4px 2px 2px !default;
-$fe-big-grid-header-font-size: 14px !default;
-$fe-big-grid-content-font-size: 14px !default;
-$fe-big-grid-content-name-font-size: 16px !default;
+$fe-big-grid-header-font-size: $text-sm !default;
+$fe-big-grid-content-font-size: $text-sm !default;
+$fe-big-grid-content-name-font-size: $text-base !default;
 $fe-big-cb-line-height: 14px !default;
 
 $fe-rtl-grid-icon-margin: 0 0 0 8px !default;
@@ -143,7 +145,7 @@ $fe-mobile-lg-icon-width: 110px !default;
 $fe-mobile-lg-icon-margin: 11px auto 0 !default;
 $fe-mobile-lg-img-height: 110px !default;
 $fe-mobile-grid-icon-size: 35px !default;
-$fe-mobile-icon-font-size: 20px !default;
+$fe-mobile-icon-font-size: $text-xl !default;
 $fe-mobile-newfolder-padding-top: 0 !default;
 $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
@@ -175,7 +177,7 @@ $fe-big-lg-icon-empty-icon-height: 92px !default;
 $fe-big-lg-icon-empty-icon-margin: 0 auto !default;
 $fe-big-lg-icon-empty-icon-width: 92px !default;
 
-$fe-big-lg-icon-empty-inner-content-font-size: 14px !default;
+$fe-big-lg-icon-empty-inner-content-font-size: $text-sm !default;
 $fe-big-lg-icon-empty-inner-content-margin: 0 auto !default;
 $fe-big-lg-icon-empty-inner-content-opacity: .5 !default;
 $fe-big-lg-icon-empty-inner-content-padding: 4px !default;
@@ -192,7 +194,7 @@ $fe-big-grid-empty-icon-height: 92px !default;
 $fe-big-grid-empty-icon-margin: 0 auto !default;
 $fe-big-grid-empty-icon-width: 92px !default;
 
-$fe-big-grid-empty-inner-content-font-size: 14px !default;
+$fe-big-grid-empty-inner-content-font-size: $text-sm !default;
 $fe-big-grid-empty-inner-content-margin: 0 auto !default;
 $fe-big-grid-empty-inner-content-opacity: .5 !default;
 $fe-big-grid-empty-inner-content-padding: 6px !default;

package/styles/file-manager/_theme.scss

@@ -156,6 +156,11 @@
           @if $theme-name == 'fluentui-dark' {
             border-color: $fe-search-border-color;
           }
+          @if ($fm-skin-name == 'Material3') {
+            border: none;
+            border-bottom: 1px solid $outline;
+            border-radius: 0;
+          }
         }
       }
     }
@@ -213,6 +218,10 @@
         @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
           color: $content-text-color-alt2;
         }
+
+        @if $fm-skin-name =='Material3' {
+          color: $fe-grid-empty-inner-content-color;
+        }
       }
 
       .e-rowcell {
@@ -263,14 +272,14 @@
         }
       }
 
-      &.e-gridhover tr[role = 'row']:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+      &.e-gridhover .e-row:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         @if $fm-skin-name == 'material-dark' or $fm-skin-name == 'bootstrap-dark' {
           background-color: $fe-hover-bg-color;
           color: $fe-grid-type-color;
         }
       }
 
-      &.e-gridhover tr[role = 'row'].e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+      &.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: transparent;
       }
     }
@@ -286,9 +295,12 @@
       }
 
       .e-empty-inner-content {
-        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3' {
           color: $content-text-color-alt2;
         }
+        @if $fm-skin-name =='Material3' {
+          color: $fe-grid-empty-inner-content-color;
+        }
       }
 
       .e-large-icon {