@syncfusion/ej2-filemanager 25.2.6 → 26.1.35

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

@@ -66,6 +66,7 @@ $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-search-input-height: 30px !default;
 $fe-bc-margin: 0 !default;
 $fe-bc-padding: 3px 8px !default;
 $fe-bc-text-padding: 4px 4px 5px !default;

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

@@ -66,6 +66,7 @@ $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-search-input-height: 30px !default;
 $fe-bc-margin: 0 !default;
 $fe-bc-padding: 3px 8px !default;
 $fe-bc-text-padding: 4px 4px 5px !default;

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

@@ -1,19 +1,15 @@
-/*! FileManager's material 3 theme wise override definitions and variables */
-//layout variables
 $fm-skin-name: 'Material3' !default;
 $fe-bc-font-size: $text-sm !default;
 $fe-bc-icon-font-size: 14px !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-base !default;
 $fe-big-bc-icon-font-size: 16px !default;
 $fe-big-lg-text-font-size: $text-sm !default;
 $fe-big-dg-header-padding: 21px !default;
 $fe-big-dg-td-font-size: 15px !default;
 $fe-big-dg-header-font-size: 21px !default;
-
 $fe-clone-box-shadow: $shadow !default;
 $fe-clone-border: none !default;
 $fe-tb-height: 40px !default;
@@ -51,6 +47,7 @@ $fe-grid-header-height: 32px !default;
 $fe-grid-header-font-size: 14px !default;
 $fe-grid-header-cb-padding-left: 12px !default;
 $fe-grid-content-font-size: 12px !default;
+$fe-grid-content-padding: 7px 12px !default;
 $fe-grid-content-name-font-size: 14px !default;
 $fe-grid-icon-sort-margin: 0 !default;
 $fe-grid-icon-padding: 0 0 0 6px !default;
@@ -76,7 +73,6 @@ $fe-dd-popup-blank-icon-padding-left: 40px !default;
 $fe-tv-fullrow-height: 40px !default;
 $fe-address-height: 36px !default;
 $fe-tv-node-height: 40px !default;
-
 $fe-big-tv-fullrow-height: 48px !default;
 $fe-big-address-height: 52px !default;
 $fe-big-tv-node-height: 48px !default;
@@ -111,12 +107,9 @@ $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-cb-line-height: 14px !default;
-
 $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;
@@ -149,78 +142,59 @@ $fe-mobile-search-height: 40px !default;
 $fe-mobile-lg-item-minwidth: 140px !default;
 $fe-mobile-lg-item-width-two: calc(50% - 17px) !default;
 $fe-mobile-lg-item-width-three: calc(33.33% - 17px) !default;
-
 $fe-big-lg-icon-empty-min-width: 300px !default;
-
 $fe-big-lg-icon-empty-content-font-size: 22px !default;
 $fe-big-lg-icon-empty-content-margin: 0 auto !default;
 $fe-big-lg-icon-empty-content-padding: 12px !default;
 $fe-big-lg-icon-empty-content-text-align: center !default;
-
 $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-margin: 0 auto !default;
 $fe-big-lg-icon-empty-inner-content-opacity: .5 !default;
 $fe-big-lg-icon-empty-inner-content-padding: 4px !default;
 $fe-big-lg-icon-empty-inner-content-text-align: center !default;
-
 $fe-big-grid-empty-min-width: 300px !default;
-
 $fe-big-grid-empty-content-font-size: 22px !default;
 $fe-big-grid-empty-content-margin: 0 auto !default;
 $fe-big-grid-empty-content-padding: 12px !default;
 $fe-big-grid-empty-content-text-align: center !default;
-
 $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-margin: 0 auto !default;
 $fe-big-grid-empty-inner-content-opacity: .5 !default;
 $fe-big-grid-empty-inner-content-padding: 6px !default;
 $fe-big-grid-empty-inner-content-text-align: center !default;
-
 $fe-grid-empty-min-width: 200px !default;
-
 $fe-grid-empty-content-font-size: $text-base !default;
 $fe-grid-empty-content-margin: 0 auto !default;
 $fe-grid-empty-content-padding: 18px 0 8px 0 !default;
 $fe-grid-empty-content-text-align: center !default;
-
 $fe-grid-empty-icon-height: 52px !default;
 $fe-grid-empty-icon-margin: 0 auto !default;
 $fe-grid-empty-icon-width: 52px !default;
-
 $fe-grid-empty-inner-content-color: rgba($content-text-color-alt1) !default;
 $fe-grid-empty-inner-content-font-size: $text-sm !default;
 $fe-grid-empty-inner-content-margin: 0 auto !default;
 $fe-grid-empty-inner-content-opacity: .5 !default;
 $fe-grid-empty-inner-content-padding: 0 !default;
 $fe-grid-empty-inner-content-text-align: center !default;
-
 $fe-lg-icon-empty-min-width: 200px !default;
-
 $fe-lg-icon-empty-content-font-size: $text-base !default;
 $fe-lg-icon-empty-content-margin: 0 auto !default;
 $fe-lg-icon-empty-content-padding: 18px 0 8px 0 !default;
 $fe-lg-icon-empty-content-text-align: center !default;
-
 $fe-lg-icon-empty-icon-height: 52px !default;
 $fe-lg-icon-empty-icon-margin: 0 auto !default;
 $fe-lg-icon-empty-icon-width: 52px !default;
-
 $fe-lg-icon-empty-inner-content-font-size: $text-sm !default;
 $fe-lg-icon-empty-inner-content-margin: 0 auto !default;
 $fe-lg-icon-empty-inner-content-padding: 0 !default;
 $fe-lg-icon-empty-inner-content-text-align: center !default;
-
 $fe-bc-icon-padding: 0 !default;
-
-// color variables
 $fe-border-color: rgba($border-light) !default;
 $fe-background: transparent;
 $fe-icon-color: rgba($icon-color) !default;

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

@@ -193,7 +193,7 @@ $fe-big-grid-empty-content-text-align: center !default;
 $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-grid-empty-inner-content-color: $content-text-color-alt2 !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;

package/styles/file-manager/_theme.scss

@@ -24,33 +24,23 @@
   }
 }
 
-@mixin active-item {
-  background: $fe-active-bg-color;
-  border-color: $fe-active-border-color;
-}
-
-@mixin hover-item($bg-color, $border-color) {
+@mixin bg-border($bg-color, $border-color) {
   background: $bg-color;
   border-color: $border-color;
 }
 
 @include export-module('FileManager-theme') {
   .e-filemanager {
-    background: $fe-background;
-    border-color: $fe-border-color;
+    @include bg-border($fe-background, $fe-border-color);
 
     .e-toolbar {
       border-bottom-color: $fe-border-color;
-
       @if $fm-skin-name != 'Material3' {
-
         .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn {
-          //Based on toolbar active background modify the dropdowns background
           &.e-active {
             @include hover-icon-border-color;
             @include active-icon-color;
-            background: $fe-tb-focus-bg;
-            border-color: $fe-tb-focus-border-color;
+            @include bg-border($fe-tb-focus-bg, $fe-tb-focus-border-color);
             @if $fm-skin-name == 'highcontrast' {
               background: $fe-active-bg-color;
             }
@@ -64,15 +54,13 @@
 
           &:hover {
             @include hover-icon-border-color;
-            background: $fe-tb-focus-bg;
-            border-color: $fe-tb-hover-border-color;
+            @include bg-border($fe-tb-focus-bg, $fe-tb-hover-border-color);
           }
 
           &:focus {
             @include hover-icon-border-color;
             @include active-icon-color;
-            background: $fe-tb-focus-bg;
-            border-color: $fe-tb-hover-border-color;
+            @include bg-border($fe-tb-focus-bg, $fe-tb-hover-border-color);
             @if $fm-skin-name == 'highcontrast' {
               background: $fe-active-bg-color;
             }
@@ -82,10 +70,8 @@
     }
 
     @if $fm-skin-name == 'tailwind' {
-      .e-navigation {
-        &.e-pane {
-          background-color: $content-bg-color-alt1;
-        }
+      .e-navigation.e-pane {
+        background-color: $content-bg-color-alt1;
       }
     }
 
@@ -125,28 +111,19 @@
         }
 
         &:not(:last-child) {
-
           .e-list-text {
-
-            &:hover {
-              @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
-                background: $fe-bc-hover-bg-color;
-              }
-              color: $fe-bc-hover-font-color;
-            }
-
-            &:active {
+            &:hover,
+            &:active,
+            &:focus {
               @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
                 background: $fe-bc-hover-bg-color;
               }
               color: $fe-bc-hover-font-color;
             }
-
-            &:focus {
-              @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
-                background: $fe-bc-hover-bg-color;
+            @if $fm-skin-name == 'fluent2' {
+              &:active {
+                background: $fe-bc-active-bg-color;
               }
-              color: $fe-bc-hover-font-color;
             }
           }
         }
@@ -154,8 +131,10 @@
 
       .e-search-wrap {
         .e-input-group.e-control-wrapper:not(.e-success) {
-          background: $fe-search-bg-color;
-          border-color: $fe-border-color;
+          @if $fm-skin-name != 'fluent2' {
+            @include bg-border($fe-search-bg-color, $fe-border-color);
+          }
+
           @if $theme-name == 'fluentui-dark' {
             border-color: $fe-search-border-color;
           }
@@ -197,32 +176,23 @@
 
         .e-headercell {
 
-          &:not(.e-fe-grid-icon):hover {
+          &:not(.e-fe-grid-icon):hover,
+          &.e-fe-grid-icon .e-headercelldiv:hover {
             background: $fe-hover-bg-color;
           }
-          @if $fm-skin-name == 'FluentUI' {
-            &.e-fe-checkbox:hover {
+          &.e-fe-checkbox:hover {
+            @if $fm-skin-name == 'FluentUI' {
               background: $content-bg-color;
             }
-          }
-          @else {
-            &.e-fe-checkbox:hover {
+            @else {
               background: $fe-grid-header-bg-color;
             }
           }
-
-          &.e-fe-grid-icon .e-headercelldiv:hover {
-            background: $fe-hover-bg-color;
-          }
         }
       }
 
       .e-empty-inner-content {
-        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
-          color: $content-text-color-alt2;
-        }
-
-        @if $fm-skin-name =='Material3' {
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name =='Material3' {
           color: $fe-grid-empty-inner-content-color;
         }
       }
@@ -250,12 +220,9 @@
         }
       }
 
-      tr:hover {
-
-        td.e-active {
-          @if $fm-skin-name == 'material-dark' {
-            background-color: $fe-ah-bg-color;
-          }
+      tr:hover td.e-active {
+        @if $fm-skin-name == 'material-dark' {
+          background-color: $fe-ah-bg-color;
         }
       }
 
@@ -299,9 +266,6 @@
 
       .e-empty-inner-content {
         @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;
         }
       }
@@ -310,17 +274,17 @@
         border-color: transparent;
 
         &.e-active {
-          @include active-item;
+          @include bg-border($fe-active-bg-color, $fe-active-border-color);
         }
 
         &.e-hover,
         &:hover {
-          @include hover-item($fe-hover-bg-color, $fe-hover-border-color);
+          @include bg-border($fe-hover-bg-color, $fe-hover-border-color);
         }
 
         &.e-active.e-hover,
         &.e-active:hover {
-          @include hover-item($fe-ah-bg-color, $fe-ah-border-color);
+          @include bg-border($fe-ah-bg-color, $fe-ah-border-color);
         }
 
         &.e-focus {
@@ -363,33 +327,26 @@
     }
 
     &.e-fe-mobile {
-
       .e-large-icons {
-
         .e-large-icon {
 
           &.e-hover,
           &:hover {
-            @include hover-item(transparent, transparent);
+            @include bg-border(transparent, transparent);
           }
-
           &.e-focus {
             border-color: transparent;
           }
-
           &.e-active {
-            @include active-item;
+            @include bg-border($fe-active-bg-color, $fe-active-border-color);
           }
         }
       }
       @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
-        .e-address {
-          .e-icons {
-            color: $icon-color;
-
-            &:hover {
-              color: $icon-color-hover;
-            }
+        .e-address .e-icons {
+          color: $icon-color;
+          &:hover {
+            color: $icon-color-hover;
           }
         }
       }
@@ -411,10 +368,8 @@
     }
 
     &.e-dialog {
-
       td {
         color: $fe-text-color;
-
         &:first-child {
           color: $fe-label-color;
         }
@@ -425,11 +380,8 @@
       color: $fe-error-color;
     }
 
-    .e-upload {
-
-      .e-upload-actions {
-        border-bottom-color: $fe-up-list-border-color;
-      }
+    .e-upload .e-upload-actions {
+      border-bottom-color: $fe-up-list-border-color;
     }
   }
 }