@syncfusion/ej2-filemanager 26.2.11 → 27.1.48

package/styles/file-manager/fluent2.css

@@ -185,12 +185,6 @@
 }
 
 /* stylelint-disable-line no-empty-source */
-.e-upload .e-upload-actions,
-.e-bigger.e-small .e-upload .e-upload-actions {
-  background-color: var(--color-sf-content-bg-color-alt1);
-  border-radius: 0 0 6px 6px;
-}
-
 /* stylelint-disable */
 .e-dialog .e-dlg-content {
   border-radius: 8px !important;
@@ -201,6 +195,14 @@
           backdrop-filter: blur(2px) !important;
 }
 
+.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover,
+.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus,
+.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active {
+  color: var(--color-sf-icon-color-hover);
+  background-color: var(--color-sf-content-bg-color-hover);
+  border-radius: 4px;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes material-spinner-rotate {
   0% {
@@ -475,7 +477,7 @@ ejs-filemanager {
   padding: 0;
 }
 .e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn .e-btn-icon.e-icons.e-caret {
-  font-size: 18px;
+  font-size: 14px;
   padding: 0 8px;
 }
 .e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn .e-tbar-btn-text.e-tbar-ddb-text {
@@ -486,7 +488,7 @@ ejs-filemanager {
   padding: 0;
 }
 .e-filemanager .e-toolbar .e-toolbar-pop .e-toolbar-item .e-dropdown-btn .e-icons.e-caret {
-  font-size: 18px;
+  font-size: 14px;
   min-width: 0;
   padding: 0 8px;
 }
@@ -557,9 +559,8 @@ ejs-filemanager {
   margin: 0;
 }
 .e-filemanager .e-address .e-fe-search {
-  font-size: 14px;
-  margin: 5px;
-  padding: 5px;
+  font-size: 16px;
+  padding: 8px 8px 8px 10px;
   position: absolute;
   z-index: 1;
 }
@@ -584,7 +585,7 @@ ejs-filemanager {
   cursor: pointer;
   font-size: 14px;
   line-height: 20px;
-  padding: 4px 4px 5px;
+  padding: 6px 6px 6px;
   text-decoration: none;
   border-radius: 4px;
 }
@@ -616,7 +617,7 @@ ejs-filemanager {
 }
 .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
   border-width: 1px;
-  line-height: 12px;
+  line-height: 14px;
   height: 16px;
   width: 16px;
   font-size: 10px;
@@ -690,6 +691,7 @@ ejs-filemanager {
   margin: 0 auto;
   padding: 8px 0;
   text-align: center;
+  line-height: 20px;
 }
 .e-filemanager .e-grid .e-empty-icon {
   height: 52px;
@@ -773,10 +775,11 @@ ejs-filemanager {
   float: left;
   overflow: auto;
   width: 100%;
+  height: calc(100% - 40px);
 }
 .e-filemanager .e-large-icons .e-checkbox-wrapper .e-frame {
   border-width: 1px;
-  line-height: 12px;
+  line-height: 14px;
   height: 16px;
   width: 16px;
   font-size: 10px;
@@ -790,6 +793,7 @@ ejs-filemanager {
   margin: 0 auto;
   padding: 8px 0;
   text-align: center;
+  line-height: 20px;
 }
 .e-filemanager .e-large-icons .e-empty-icon {
   height: 52px;
@@ -863,6 +867,15 @@ ejs-filemanager {
   margin: 0 auto;
   width: 40px;
 }
+.e-filemanager.e-drag-select {
+  position: absolute;
+  background-color: var(--color-sf-primary);
+  opacity: 0.3;
+  border: none;
+  width: 0;
+  height: 0;
+  z-index: 1;
+}
 .e-filemanager .e-fe-clone {
   pointer-events: none;
   z-index: 20;
@@ -979,6 +992,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 var(--color-sf-primary);
   bottom: 0;
@@ -1093,6 +1109,168 @@ 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: var(--color-sf-content-bg-color-alt1);
+  border-color: var(--color-sf-border-light);
+}
+.e-filemanager .e-toolbar {
+  border-bottom-color: var(--color-sf-border-light);
+}
+.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn.e-active {
+  background: var(--color-sf-content-bg-color-hover);
+  border-color: var(--color-sf-content-bg-color-hover);
+}
+.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn:hover {
+  background: var(--color-sf-content-bg-color-hover);
+  border-color: var(--color-sf-content-bg-color-hover);
+}
+.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn:focus {
+  background: var(--color-sf-content-bg-color-hover);
+  border-color: var(--color-sf-content-bg-color-hover);
+}
+.e-filemanager .e-address {
+  border-bottom-color: var(--color-sf-border-light);
+}
+.e-filemanager .e-address .e-icons {
+  color: var(--color-sf-icon-color);
+}
+.e-filemanager .e-address .e-list-text {
+  color: var(--color-sf-content-text-color-alt2);
+}
+.e-filemanager .e-address .e-address-list-item {
+  color: var(--color-sf-content-text-color-alt2);
+}
+.e-filemanager .e-address .e-address-list-item:focus .e-list-text {
+  background: var(--color-sf-content-bg-color-hover);
+  color: var(--color-sf-content-text-color-hover);
+}
+.e-filemanager .e-address .e-address-list-item:last-child .e-list-text {
+  color: var(--color-sf-content-text-color);
+}
+.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: var(--color-sf-content-bg-color-hover);
+  color: var(--color-sf-content-text-color-hover);
+}
+.e-filemanager .e-address .e-address-list-item:not(:last-child) .e-list-text:active {
+  background: var(--color-sf-content-bg-color-pressed);
+}
+.e-filemanager .e-address .e-address-list-item:focus .e-list-text {
+  color: var(--color-sf-content-text-color-hover);
+}
+.e-filemanager .e-treeview .e-list-item.e-active > .e-fullrow {
+  border: var(--color-sf-content-bg-color-selected);
+}
+.e-filemanager .e-treeview .e-list-parent .e-list-item.e-fe-drop-folder.e-hover > .e-fullrow {
+  border-color: var(--color-sf-primary);
+}
+.e-filemanager .e-grid .e-gridheader tr:first-child th {
+  background: var(--color-sf-content-bg-color-alt1);
+}
+.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: var(--color-sf-content-bg-color-hover);
+}
+.e-filemanager .e-grid .e-gridheader .e-headercell.e-fe-checkbox:hover {
+  background: var(--color-sf-content-bg-color-alt1);
+}
+.e-filemanager .e-grid td.e-active {
+  background-color: var(--color-sf-content-bg-color-selected);
+  color: var(--color-sf-content-text-color);
+}
+.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: var(--color-sf-border-light);
+}
+.e-filemanager .e-large-icons .e-active {
+  color: var(--color-sf-content-text-color);
+}
+.e-filemanager .e-large-icons .e-large-icon {
+  border-color: transparent;
+}
+.e-filemanager .e-large-icons .e-large-icon.e-active {
+  background: var(--color-sf-content-bg-color-selected);
+  border-color: var(--color-sf-content-bg-color-selected);
+}
+.e-filemanager .e-large-icons .e-large-icon.e-hover, .e-filemanager .e-large-icons .e-large-icon:hover {
+  background: var(--color-sf-content-bg-color-hover);
+  border-color: var(--color-sf-content-bg-color-hover);
+  color: var(--color-sf-content-text-color-focus);
+}
+.e-filemanager .e-large-icons .e-large-icon.e-active.e-hover, .e-filemanager .e-large-icons .e-large-icon.e-active:hover {
+  background: var(--color-sf-content-bg-color-selected);
+  border-color: var(--color-sf-content-bg-color-selected);
+  color: var(--color-sf-content-text-color-selected);
+}
+.e-filemanager .e-large-icons .e-large-icon.e-focus {
+  border-color: var(--color-sf-content-bg-color-selected);
+}
+.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: var(--color-sf-primary);
+}
+.e-filemanager .e-large-icons .e-checkbox-wrapper .e-icons.e-check {
+  background-color: var(--color-sf-primary);
+  color: var(--color-sf-primary-text-color);
+}
+.e-filemanager .e-fe-clone .e-fe-content {
+  background-color: var(--color-sf-content-bg-color-alt3);
+  color: var(--color-sf-content-text-color);
+}
+.e-filemanager .e-fe-clone .e-fe-count {
+  background-color: var(--color-sf-primary);
+  border-color: var(--color-sf-primary-text-color);
+  color: var(--color-sf-primary-text-color);
+}
+.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: var(--color-sf-content-bg-color-selected);
+  border-color: var(--color-sf-content-bg-color-selected);
+}
+
+.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: var(--color-sf-icon-color);
+}
+.e-fe-popup.e-dialog td {
+  color: var(--color-sf-content-text-color);
+}
+.e-fe-popup.e-dialog td:first-child {
+  color: var(--color-sf-content-text-color-alt2);
+}
+.e-fe-popup .e-fe-error {
+  color: var(--color-sf-danger);
+}
+.e-fe-popup .e-upload .e-upload-actions {
+  border-bottom-color: var(--color-sf-border-light);
+}
+
 .e-filemanager.e-fe-mobile .e-toolbar,
 .e-bigger .e-filemanager.e-fe-mobile .e-toolbar,
 .e-filemanager.e-bigger.e-fe-mobile .e-toolbar {
@@ -1296,6 +1474,11 @@ ejs-filemanager {
 .e-filemanager.e-bigger.e-fe-mobile .e-grid .e-fe-size {
   color: var(--color-sf-content-text-color-alt3);
 }
+.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 {
@@ -1504,11 +1687,11 @@ ejs-filemanager {
 .e-bigger .e-filemanager .e-address .e-search-wrap,
 .e-filemanager.e-bigger .e-address .e-search-wrap {
   min-width: 51px;
-  padding: 1.5px 10px 0 16px;
+  padding: 3.5px 10px 0 16px;
 }
 .e-bigger .e-filemanager .e-address .e-search-wrap .e-input-group,
 .e-filemanager.e-bigger .e-address .e-search-wrap .e-input-group {
-  height: 36px;
+  height: 40px;
 }
 .e-bigger .e-filemanager .e-address .e-search-wrap .e-input-group .e-input:focus,
 .e-filemanager.e-bigger .e-address .e-search-wrap .e-input-group .e-input:focus {
@@ -1599,6 +1782,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% - 48px);
+}
 .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;
@@ -1680,6 +1867,7 @@ ejs-filemanager {
 .e-bigger .e-filemanager .e-fe-overlay,
 .e-filemanager.e-bigger .e-fe-overlay {
   height: calc(100% - 41px);
+  height: calc(100% - 88px);
 }
 
 @media (max-width: 469px) {
@@ -1695,146 +1883,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: var(--color-sf-content-bg-color-alt1);
-  border-color: var(--color-sf-border-light);
-}
-.e-filemanager .e-toolbar {
-  border-bottom-color: var(--color-sf-border-light);
-}
-.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn.e-active {
-  background: var(--color-sf-content-bg-color-alt3);
-  border-color: var(--color-sf-content-bg-color-alt3);
-}
-.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn:hover {
-  background: var(--color-sf-content-bg-color-alt3);
-  border-color: var(--color-sf-content-bg-color-alt3);
-}
-.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn:focus {
-  background: var(--color-sf-content-bg-color-alt3);
-  border-color: var(--color-sf-content-bg-color-alt3);
-}
-.e-filemanager .e-address {
-  border-bottom-color: var(--color-sf-border-light);
-}
-.e-filemanager .e-address .e-icons {
-  color: var(--color-sf-icon-color);
-}
-.e-filemanager .e-address .e-list-text {
-  color: var(--color-sf-content-text-color-alt2);
-}
-.e-filemanager .e-address .e-address-list-item {
-  color: var(--color-sf-content-text-color-alt2);
-}
-.e-filemanager .e-address .e-address-list-item:focus .e-list-text {
-  background: var(--color-sf-content-bg-color-hover);
-  color: var(--color-sf-content-text-color);
-}
-.e-filemanager .e-address .e-address-list-item:last-child .e-list-text {
-  color: var(--color-sf-content-text-color);
-}
-.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: var(--color-sf-content-bg-color-hover);
-  color: var(--color-sf-content-text-color);
-}
-.e-filemanager .e-address .e-address-list-item:not(:last-child) .e-list-text:active {
-  background: var(--color-sf-content-bg-color-pressed);
-}
-.e-filemanager .e-treeview .e-list-item.e-active > .e-fullrow {
-  border: var(--color-sf-content-bg-color-selected);
-}
-.e-filemanager .e-treeview .e-list-parent .e-list-item.e-fe-drop-folder.e-hover > .e-fullrow {
-  border-color: var(--color-sf-primary);
-}
-.e-filemanager .e-grid .e-gridheader tr:first-child th {
-  background: var(--color-sf-content-bg-color-alt1);
-}
-.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: var(--color-sf-content-bg-color-hover);
-}
-.e-filemanager .e-grid .e-gridheader .e-headercell.e-fe-checkbox:hover {
-  background: var(--color-sf-content-bg-color-alt1);
-}
-.e-filemanager .e-grid td.e-active {
-  background-color: var(--color-sf-content-bg-color-selected);
-  color: var(--color-sf-content-text-color);
-}
-.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: var(--color-sf-border-light);
-}
-.e-filemanager .e-large-icons .e-active {
-  color: var(--color-sf-content-text-color);
-}
-.e-filemanager .e-large-icons .e-large-icon {
-  border-color: transparent;
-}
-.e-filemanager .e-large-icons .e-large-icon.e-active {
-  background: var(--color-sf-content-bg-color-selected);
-  border-color: var(--color-sf-content-bg-color-selected);
-}
-.e-filemanager .e-large-icons .e-large-icon.e-hover, .e-filemanager .e-large-icons .e-large-icon:hover {
-  background: var(--color-sf-content-bg-color-hover);
-  border-color: var(--color-sf-content-bg-color-hover);
-}
-.e-filemanager .e-large-icons .e-large-icon.e-active.e-hover, .e-filemanager .e-large-icons .e-large-icon.e-active:hover {
-  background: var(--color-sf-content-bg-color-selected);
-  border-color: var(--color-sf-content-bg-color-selected);
-}
-.e-filemanager .e-large-icons .e-large-icon.e-focus {
-  border-color: var(--color-sf-content-bg-color-selected);
-}
-.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: var(--color-sf-primary);
-}
-.e-filemanager .e-large-icons .e-checkbox-wrapper .e-icons.e-check {
-  background-color: var(--color-sf-primary);
-  color: var(--color-sf-primary-text-color);
-}
-.e-filemanager .e-fe-clone .e-fe-content {
-  background-color: var(--color-sf-content-bg-color-alt3);
-  color: var(--color-sf-content-text-color);
-}
-.e-filemanager .e-fe-clone .e-fe-count {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary-text-color);
-  color: var(--color-sf-primary-text-color);
-}
-.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: var(--color-sf-content-bg-color-selected);
-  border-color: var(--color-sf-content-bg-color-selected);
-}
-
-.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: var(--color-sf-icon-color);
-}
-.e-fe-popup.e-dialog td {
-  color: var(--color-sf-content-text-color);
-}
-.e-fe-popup.e-dialog td:first-child {
-  color: var(--color-sf-content-text-color-alt2);
-}
-.e-fe-popup .e-fe-error {
-  color: var(--color-sf-danger);
-}
-.e-fe-popup .e-upload .e-upload-actions {
-  border-bottom-color: var(--color-sf-border-light);
 }

package/styles/file-manager/fluent2.scss

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