@syncfusion/ej2-filemanager 26.2.11 → 27.1.48

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

@@ -241,3 +241,5 @@ $fe-lg-icon-empty-inner-content-margin: 0 auto !default;
 $fe-lg-icon-empty-inner-content-opacity: .7 !default;
 $fe-lg-icon-empty-inner-content-padding: 6px !default;
 $fe-lg-icon-empty-inner-content-text-align: center !default;
+$fe-drag-select-bg-color: $primary !default;
+$fe-drag-select-bg-opacity: .3 !default;

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

@@ -241,3 +241,5 @@ $fe-lg-icon-empty-inner-content-margin: 0 auto !default;
 $fe-lg-icon-empty-inner-content-opacity: .5 !default;
 $fe-lg-icon-empty-inner-content-padding: 6px !default;
 $fe-lg-icon-empty-inner-content-text-align: center !default;
+$fe-drag-select-bg-color: $primary !default;
+$fe-drag-select-bg-opacity: .3 !default;

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

@@ -231,3 +231,5 @@ $fe-clone-count-border-color: rgba($primary-text-color) !default;
 $fe-clone-count-font-color: rgba($primary-text-color) !default;
 $fe-clone-count-bg-color: rgba($primary) !default;
 $fe-drop-folder-bg-color: rgba($primary) !default;
+$fe-drag-select-bg-color: rgba($primary) !default;
+$fe-drag-select-bg-opacity: .3 !default;

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

@@ -232,3 +232,5 @@ $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-drag-select-bg-color: $primary !default;
+$fe-drag-select-bg-opacity: .3 !default;

package/styles/file-manager/_theme.scss

@@ -98,7 +98,7 @@
         color: $fe-bc-link-color;
 
         &:focus .e-list-text {
-          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' {
             background: $fe-bc-hover-bg-color;
           }
           color: $fe-bc-hover-font-color;
@@ -112,13 +112,27 @@
 
         &:not(:last-child) {
           .e-list-text {
-            &:hover,
-            &:active,
-            &:focus {
-              @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
-                background: $fe-bc-hover-bg-color;
+            @if ($fm-skin-name == 'bootstrap5.3') {
+              &:hover {
+                background-color: $content-bg-color-hover;
+                color: $primary-bg-color-hover;
+                text-decoration: underline $primary-bg-color-hover;
+              }
+              &:active {
+                color: $primary-bg-color-hover;
+                border: 1px solid $primary-bg-color-hover;
+                text-decoration: underline $primary-bg-color-hover;
+              }
+            }
+            @else {
+              &: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;
               }
-              color: $fe-bc-hover-font-color;
             }
             @if $fm-skin-name == 'fluent2' {
               &:active {
@@ -129,6 +143,17 @@
         }
       }
 
+      .e-address-list-item:focus .e-list-text {
+        @if ($fm-skin-name == 'bootstrap5.3') {
+          color: $primary-bg-color-hover;
+          border: 1px solid $primary-bg-color-hover;
+          text-decoration: underline $primary-bg-color-hover;
+        }
+        @else {
+          color: $fe-bc-hover-font-color;
+        }
+      }
+
       .e-search-wrap {
         .e-input-group.e-control-wrapper:not(.e-success) {
           @if $fm-skin-name != 'fluent2' {
@@ -280,11 +305,17 @@
         &.e-hover,
         &:hover {
           @include bg-border($fe-hover-bg-color, $fe-hover-border-color);
+          @if ($fm-skin-name == 'fluent2') {
+            color: $fe-lg-hover-font-color;
+          }
         }
 
         &.e-active.e-hover,
         &.e-active:hover {
           @include bg-border($fe-ah-bg-color, $fe-ah-border-color);
+          @if ($fm-skin-name == 'fluent2') {
+            color: $fe-lg-active-font-color;
+          }
         }
 
         &.e-focus {

package/styles/file-manager/bootstrap-dark.css

@@ -561,6 +561,7 @@ ejs-filemanager {
   float: left;
   overflow: auto;
   width: 100%;
+  height: calc(100% - 34px);
 }
 .e-filemanager .e-large-icons .e-checkbox-wrapper .e-frame {
   border-width: 1px;
@@ -645,6 +646,15 @@ ejs-filemanager {
   margin: 10px auto;
   width: 40px;
 }
+.e-filemanager.e-drag-select {
+  position: absolute;
+  background-color: #676767;
+  opacity: 0.45;
+  border: none;
+  width: 0;
+  height: 0;
+  z-index: 1;
+}
 .e-filemanager .e-fe-clone {
   pointer-events: none;
   z-index: 20;
@@ -762,6 +772,9 @@ ejs-filemanager {
 .e-filemanager .e-layout-content {
   position: relative;
 }
+.e-filemanager .e-pager {
+  border-width: 1px 0 0;
+}
 .e-filemanager .e-fe-overlay {
   border: 2px dashed #0070f0;
   bottom: 0;
@@ -865,6 +878,185 @@ ejs-filemanager {
   display: none;
 }
 
+@media (max-width: 469px) {
+  .e-bigger .e-filemanager.e-fe-mobile .e-large-icons .e-list-parent .e-list-item,
+  .e-filemanager.e-bigger.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
+    min-width: 140px;
+    width: calc(50% - 17px);
+  }
+}
+@media (min-width: 470px) and (max-width: 625px) {
+  .e-bigger .e-filemanager.e-fe-mobile .e-large-icons .e-list-parent .e-list-item,
+  .e-filemanager.e-bigger.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
+    min-width: 140px;
+    width: calc(33.33% - 17px);
+  }
+}
+.e-content-placeholder.e-filemanager.e-placeholder-filemanager {
+  height: 100%;
+  width: 100%;
+}
+
+.e-filemanager {
+  background: #1a1a1a;
+  border-color: #505050;
+}
+.e-filemanager .e-toolbar {
+  border-bottom-color: #505050;
+}
+.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn.e-active {
+  border: 1px solid #6e6e6e;
+  background: #313131;
+  border-color: #6e6e6e;
+}
+.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn:hover {
+  border: 1px solid #6e6e6e;
+  background: #313131;
+  border-color: #6e6e6e;
+}
+.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn:focus {
+  border: 1px solid #6e6e6e;
+  background: #313131;
+  border-color: #6e6e6e;
+}
+.e-filemanager .e-address {
+  border-bottom-color: #505050;
+}
+.e-filemanager .e-address .e-icons {
+  color: #f0f0f0;
+}
+.e-filemanager .e-address .e-list-text {
+  color: #248aff;
+}
+.e-filemanager .e-address .e-address-list-item {
+  color: #248aff;
+}
+.e-filemanager .e-address .e-address-list-item:focus .e-list-text {
+  background: #1a1a1a;
+  color: #57a5ff;
+}
+.e-filemanager .e-address .e-address-list-item:last-child .e-list-text {
+  color: #f0f0f0;
+}
+.e-filemanager .e-address .e-address-list-item:not(:last-child) .e-list-text:hover, .e-filemanager .e-address .e-address-list-item:not(:last-child) .e-list-text:active, .e-filemanager .e-address .e-address-list-item:not(:last-child) .e-list-text:focus {
+  background: #1a1a1a;
+  color: #57a5ff;
+}
+.e-filemanager .e-address .e-address-list-item:focus .e-list-text {
+  color: #57a5ff;
+}
+.e-filemanager .e-address .e-search-wrap .e-input-group.e-control-wrapper:not(.e-success) {
+  background: #1a1a1a;
+  border-color: #505050;
+}
+.e-filemanager .e-treeview .e-list-item.e-active > .e-fullrow {
+  border: #0070f0;
+}
+.e-filemanager .e-treeview .e-list-parent .e-list-item.e-fe-drop-folder.e-hover > .e-fullrow {
+  border-color: #0070f0;
+}
+.e-filemanager .e-grid .e-gridheader tr:first-child th {
+  background: #1a1a1a;
+}
+.e-filemanager .e-grid .e-gridheader .e-headercell:not(.e-fe-grid-icon):hover, .e-filemanager .e-grid .e-gridheader .e-headercell.e-fe-grid-icon .e-headercelldiv:hover {
+  background: #393939;
+}
+.e-filemanager .e-grid .e-gridheader .e-headercell.e-fe-checkbox:hover {
+  background: #1a1a1a;
+}
+.e-filemanager .e-grid .e-rowcell {
+  color: #acacac;
+}
+.e-filemanager .e-grid .e-rowcell .e-fe-text {
+  color: #f0f0f0;
+}
+.e-filemanager .e-grid td.e-active {
+  background-color: #0070f0;
+  color: #f0f0f0;
+}
+.e-filemanager .e-grid .e-checkbox-wrapper .e-icons.e-check {
+  background-color: #1a1a1a;
+  color: #f0f0f0;
+}
+.e-filemanager .e-grid.e-gridhover .e-row:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+  background-color: #393939;
+  color: #acacac;
+}
+.e-filemanager .e-grid.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;
+}
+.e-filemanager .e-large-icons .e-list-img {
+  border-color: #f0f0f0;
+}
+.e-filemanager .e-large-icons .e-active {
+  color: #f0f0f0;
+}
+.e-filemanager .e-large-icons .e-large-icon {
+  border-color: transparent;
+}
+.e-filemanager .e-large-icons .e-large-icon.e-active {
+  background: #0070f0;
+  border-color: #0070f0;
+}
+.e-filemanager .e-large-icons .e-large-icon.e-hover, .e-filemanager .e-large-icons .e-large-icon:hover {
+  background: #393939;
+  border-color: #393939;
+}
+.e-filemanager .e-large-icons .e-large-icon.e-active.e-hover, .e-filemanager .e-large-icons .e-large-icon.e-active:hover {
+  background: #0070f0;
+  border-color: #0070f0;
+}
+.e-filemanager .e-large-icons .e-large-icon.e-focus {
+  border-color: #393939;
+}
+.e-filemanager .e-large-icons .e-large-icon.e-hover.e-fe-drop-folder, .e-filemanager .e-large-icons .e-large-icon:hover.e-fe-drop-folder {
+  border-color: #0070f0;
+}
+.e-filemanager .e-large-icons .e-checkbox-wrapper .e-icons.e-check {
+  background-color: #1a1a1a;
+  color: #f0f0f0;
+}
+.e-filemanager .e-fe-clone .e-fe-content {
+  background-color: #393939;
+  border-color: #505050;
+  color: #f0f0f0;
+}
+.e-filemanager .e-fe-clone .e-fe-count {
+  background-color: #0070f0;
+  border-color: #1a1a1a;
+  color: #fff;
+}
+.e-filemanager.e-fe-mobile .e-large-icons .e-large-icon.e-hover, .e-filemanager.e-fe-mobile .e-large-icons .e-large-icon:hover {
+  background: transparent;
+  border-color: transparent;
+}
+.e-filemanager.e-fe-mobile .e-large-icons .e-large-icon.e-focus {
+  border-color: transparent;
+}
+.e-filemanager.e-fe-mobile .e-large-icons .e-large-icon.e-active {
+  background: #0070f0;
+  border-color: #0070f0;
+}
+
+.e-fe-popup.e-dropdown-popup ul .e-item .e-fe-dot,
+.e-fe-popup.e-dropdown-popup ul .e-item .e-fe-tick, .e-fe-popup.e-contextmenu-wrapper ul .e-menu-item .e-fe-dot,
+.e-fe-popup.e-contextmenu-wrapper ul .e-menu-item .e-fe-tick, .e-fe-popup.e-contextmenu-container ul .e-menu-item .e-fe-dot,
+.e-fe-popup.e-contextmenu-container ul .e-menu-item .e-fe-tick {
+  color: #0070f0;
+}
+.e-fe-popup.e-dialog td {
+  color: #f0f0f0;
+}
+.e-fe-popup.e-dialog td:first-child {
+  color: #f0f0f0;
+}
+.e-fe-popup .e-fe-error {
+  color: #d44f4f;
+}
+.e-fe-popup .e-upload .e-upload-actions {
+  border-bottom-color: #0070f0;
+}
+
 .e-filemanager.e-fe-mobile .e-toolbar .e-popup-up-icon.e-icons,
 .e-filemanager.e-fe-mobile .e-toolbar .e-popup-down-icon.e-icons,
 .e-filemanager.e-fe-mobile .e-toolbar-items .e-toolbar-item .e-btn-icon.e-icons,
@@ -1048,6 +1240,11 @@ ejs-filemanager {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-filemanager.e-fe-mobile .e-large-icons,
+.e-bigger .e-filemanager.e-fe-mobile .e-large-icons,
+.e-filemanager.e-bigger.e-fe-mobile .e-large-icons {
+  height: calc(100% - 40px);
+}
 .e-filemanager.e-fe-mobile .e-large-icons .e-list-parent,
 .e-bigger .e-filemanager.e-fe-mobile .e-large-icons .e-list-parent,
 .e-filemanager.e-bigger.e-fe-mobile .e-large-icons .e-list-parent {
@@ -1330,6 +1527,10 @@ ejs-filemanager {
 .e-filemanager.e-bigger .e-grid.e-rtl .e-checkbox-wrapper .e-frame {
   margin-right: -10px;
 }
+.e-bigger .e-filemanager .e-large-icons,
+.e-filemanager.e-bigger .e-large-icons {
+  height: calc(100% - 40px);
+}
 .e-bigger .e-filemanager .e-large-icons .e-checkbox-wrapper .e-frame,
 .e-filemanager.e-bigger .e-large-icons .e-checkbox-wrapper .e-frame {
   border-width: 1px;
@@ -1422,165 +1623,4 @@ ejs-filemanager {
     min-width: 140px;
     width: calc(33.33% - 17px);
   }
-}
-.e-content-placeholder.e-filemanager.e-placeholder-filemanager {
-  height: 100%;
-  width: 100%;
-}
-
-.e-filemanager {
-  background: #1a1a1a;
-  border-color: #505050;
-}
-.e-filemanager .e-toolbar {
-  border-bottom-color: #505050;
-}
-.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn.e-active {
-  border: 1px solid #6e6e6e;
-  background: #313131;
-  border-color: #6e6e6e;
-}
-.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn:hover {
-  border: 1px solid #6e6e6e;
-  background: #313131;
-  border-color: #6e6e6e;
-}
-.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn:focus {
-  border: 1px solid #6e6e6e;
-  background: #313131;
-  border-color: #6e6e6e;
-}
-.e-filemanager .e-address {
-  border-bottom-color: #505050;
-}
-.e-filemanager .e-address .e-icons {
-  color: #f0f0f0;
-}
-.e-filemanager .e-address .e-list-text {
-  color: #248aff;
-}
-.e-filemanager .e-address .e-address-list-item {
-  color: #248aff;
-}
-.e-filemanager .e-address .e-address-list-item:focus .e-list-text {
-  background: #1a1a1a;
-  color: #57a5ff;
-}
-.e-filemanager .e-address .e-address-list-item:last-child .e-list-text {
-  color: #f0f0f0;
-}
-.e-filemanager .e-address .e-address-list-item:not(:last-child) .e-list-text:hover, .e-filemanager .e-address .e-address-list-item:not(:last-child) .e-list-text:active, .e-filemanager .e-address .e-address-list-item:not(:last-child) .e-list-text:focus {
-  background: #1a1a1a;
-  color: #57a5ff;
-}
-.e-filemanager .e-address .e-search-wrap .e-input-group.e-control-wrapper:not(.e-success) {
-  background: #1a1a1a;
-  border-color: #505050;
-}
-.e-filemanager .e-treeview .e-list-item.e-active > .e-fullrow {
-  border: #0070f0;
-}
-.e-filemanager .e-treeview .e-list-parent .e-list-item.e-fe-drop-folder.e-hover > .e-fullrow {
-  border-color: #0070f0;
-}
-.e-filemanager .e-grid .e-gridheader tr:first-child th {
-  background: #1a1a1a;
-}
-.e-filemanager .e-grid .e-gridheader .e-headercell:not(.e-fe-grid-icon):hover, .e-filemanager .e-grid .e-gridheader .e-headercell.e-fe-grid-icon .e-headercelldiv:hover {
-  background: #393939;
-}
-.e-filemanager .e-grid .e-gridheader .e-headercell.e-fe-checkbox:hover {
-  background: #1a1a1a;
-}
-.e-filemanager .e-grid .e-rowcell {
-  color: #acacac;
-}
-.e-filemanager .e-grid .e-rowcell .e-fe-text {
-  color: #f0f0f0;
-}
-.e-filemanager .e-grid td.e-active {
-  background-color: #0070f0;
-  color: #f0f0f0;
-}
-.e-filemanager .e-grid .e-checkbox-wrapper .e-icons.e-check {
-  background-color: #1a1a1a;
-  color: #f0f0f0;
-}
-.e-filemanager .e-grid.e-gridhover .e-row:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-  background-color: #393939;
-  color: #acacac;
-}
-.e-filemanager .e-grid.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;
-}
-.e-filemanager .e-large-icons .e-list-img {
-  border-color: #f0f0f0;
-}
-.e-filemanager .e-large-icons .e-active {
-  color: #f0f0f0;
-}
-.e-filemanager .e-large-icons .e-large-icon {
-  border-color: transparent;
-}
-.e-filemanager .e-large-icons .e-large-icon.e-active {
-  background: #0070f0;
-  border-color: #0070f0;
-}
-.e-filemanager .e-large-icons .e-large-icon.e-hover, .e-filemanager .e-large-icons .e-large-icon:hover {
-  background: #393939;
-  border-color: #393939;
-}
-.e-filemanager .e-large-icons .e-large-icon.e-active.e-hover, .e-filemanager .e-large-icons .e-large-icon.e-active:hover {
-  background: #0070f0;
-  border-color: #0070f0;
-}
-.e-filemanager .e-large-icons .e-large-icon.e-focus {
-  border-color: #393939;
-}
-.e-filemanager .e-large-icons .e-large-icon.e-hover.e-fe-drop-folder, .e-filemanager .e-large-icons .e-large-icon:hover.e-fe-drop-folder {
-  border-color: #0070f0;
-}
-.e-filemanager .e-large-icons .e-checkbox-wrapper .e-icons.e-check {
-  background-color: #1a1a1a;
-  color: #f0f0f0;
-}
-.e-filemanager .e-fe-clone .e-fe-content {
-  background-color: #393939;
-  border-color: #505050;
-  color: #f0f0f0;
-}
-.e-filemanager .e-fe-clone .e-fe-count {
-  background-color: #0070f0;
-  border-color: #1a1a1a;
-  color: #fff;
-}
-.e-filemanager.e-fe-mobile .e-large-icons .e-large-icon.e-hover, .e-filemanager.e-fe-mobile .e-large-icons .e-large-icon:hover {
-  background: transparent;
-  border-color: transparent;
-}
-.e-filemanager.e-fe-mobile .e-large-icons .e-large-icon.e-focus {
-  border-color: transparent;
-}
-.e-filemanager.e-fe-mobile .e-large-icons .e-large-icon.e-active {
-  background: #0070f0;
-  border-color: #0070f0;
-}
-
-.e-fe-popup.e-dropdown-popup ul .e-item .e-fe-dot,
-.e-fe-popup.e-dropdown-popup ul .e-item .e-fe-tick, .e-fe-popup.e-contextmenu-wrapper ul .e-menu-item .e-fe-dot,
-.e-fe-popup.e-contextmenu-wrapper ul .e-menu-item .e-fe-tick, .e-fe-popup.e-contextmenu-container ul .e-menu-item .e-fe-dot,
-.e-fe-popup.e-contextmenu-container ul .e-menu-item .e-fe-tick {
-  color: #0070f0;
-}
-.e-fe-popup.e-dialog td {
-  color: #f0f0f0;
-}
-.e-fe-popup.e-dialog td:first-child {
-  color: #f0f0f0;
-}
-.e-fe-popup .e-fe-error {
-  color: #d44f4f;
-}
-.e-fe-popup .e-upload .e-upload-actions {
-  border-bottom-color: #0070f0;
 }

package/styles/file-manager/bootstrap-dark.scss

@@ -14,3 +14,4 @@
 @import 'bootstrap-dark-definition.scss';
 @import 'icons/bootstrap-dark.scss';
 @import 'all.scss';
+@import 'bigger.scss';