@syncfusion/ej2-filemanager 20.1.52-10459 → 20.1.52-10460

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

@@ -44,7 +44,7 @@ $fe-checkbox-bg-color: $accent !default;
 $fe-drop-border-color: $accent !default;
 $fe-up-list-border-color: rgba($grey-dark-font, .12) !default;
 $fe-clone-bg-color: $grey-700 !default;
-$fe-clone-border-color: none !default;
+$fe-clone-border-color: none !default ;
 $fe-clone-count-border-color: $accent !default;
 $fe-clone-count-font-color: $accent-font !default;
 $fe-clone-count-bg-color: $accent !default;
@@ -63,10 +63,8 @@ $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-search-input-height: 30px !default;
 $fe-bc-margin: 0 !default;
 $fe-bc-padding: 3px 8px !default;
 $fe-bc-text-padding: 4px 4px 5px !default;
@@ -96,7 +94,6 @@ $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;
@@ -159,7 +156,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 0 !default;
 $fe-mobile-select-padding-top: 0 !default;
-$fe-mobile-large-padding: 0 0 0 2px !default;
+$fe-mobile-large-padding: 4px 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 0 !default;
 $fe-mobile-delete-padding-left: 0 !default;
@@ -241,5 +238,3 @@ $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

@@ -44,7 +44,7 @@ $fe-checkbox-bg-color: $accent !default;
 $fe-drop-border-color: $accent !default;
 $fe-up-list-border-color: rgba($grey-light-font, .12) !default;
 $fe-clone-bg-color: $grey-white !default;
-$fe-clone-border-color: none !default;
+$fe-clone-border-color: none !default ;
 $fe-clone-count-border-color: $accent !default;
 $fe-clone-count-font-color: $grey-white !default;
 $fe-clone-count-bg-color: $accent !default;
@@ -63,10 +63,8 @@ $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-search-input-height: 30px !default;
 $fe-bc-margin: 0 !default;
 $fe-bc-padding: 3px 8px !default;
 $fe-bc-text-padding: 4px 4px 5px !default;
@@ -96,7 +94,6 @@ $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;
@@ -159,7 +156,7 @@ $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 0 0 0 2px !default;
+$fe-mobile-large-padding: 4px 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;
@@ -241,5 +238,3 @@ $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/_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: $text-xl !default;
+$fe-bc-icon-font-size: 20px !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: $text-xl !default;
+$fe-big-bc-icon-font-size: 20px !default;
 $fe-big-lg-text-font-size: $text-sm !default;
 $fe-big-dg-header-font-size: 21px !default;
-$fe-big-dg-td-font-size: $text-base !default;
+$fe-big-dg-td-font-size: 15px !default;
 
 $fe-border-color: $border-light !default;
 $fe-background: transparent;
@@ -42,7 +42,7 @@ $fe-checkbox-bg-color: $primary !default;
 $fe-drop-border-color: $primary !default;
 $fe-up-list-border-color: $border-light !default;
 $fe-clone-bg-color: $content-bg-color-alt3 !default;
-$fe-clone-border-color: none !default;
+$fe-clone-border-color: none !default ;
 $fe-clone-count-border-color: $primary-text-color !default;
 $fe-clone-count-font-color: $primary-text-color !default;
 $fe-clone-count-bg-color: $primary !default;
@@ -60,7 +60,6 @@ $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;
@@ -77,10 +76,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: $text-xxs !default;
+$fe-grid-header-font-size: 10px !default;
 $fe-grid-header-cb-padding-left: 12px !default;
-$fe-grid-content-font-size: $text-xs !default;
-$fe-grid-content-name-font-size: $text-sm !default;
+$fe-grid-content-font-size: 12px !default;
+$fe-grid-content-name-font-size: 14px !default;
 $fe-grid-icon-sort-margin: 0 !default;
 $fe-lg-margin: 0 !default;
 $fe-lg-padding: 0 4px !default;
@@ -88,7 +87,6 @@ $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;
@@ -129,9 +127,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: $text-sm !default;
-$fe-big-grid-content-font-size: $text-sm !default;
-$fe-big-grid-content-name-font-size: $text-base !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-cb-line-height: 14px !default;
 
 $fe-rtl-grid-icon-margin: 0 0 0 8px !default;
@@ -145,13 +143,13 @@ $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: $text-xl !default;
+$fe-mobile-icon-font-size: 20px !default;
 $fe-mobile-newfolder-padding-top: 0 !default;
 $fe-mobile-upload-padding-left: 0 !default;
 $fe-mobile-sort-padding-top: 3px !default;
 $fe-mobile-refresh-padding-top: 3px !default;
 $fe-mobile-select-padding-top: 2px !default;
-$fe-mobile-large-padding: 0 0 0 2px !default;
+$fe-mobile-large-padding: 4px 0 0 2px !default;
 $fe-mobile-grid-padding: 4px 2px 0 2px !default;
 $fe-mobile-details-padding-top: 3px !default;
 $fe-mobile-delete-padding-left: 4px !default;
@@ -177,7 +175,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: $text-sm !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;
@@ -193,8 +191,8 @@ $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-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;
@@ -204,7 +202,7 @@ $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-padding: 18px 0 8px 0  !default;
 $fe-grid-empty-content-text-align: center !default;
 
 $fe-grid-empty-icon-height: 82px !default;
@@ -232,5 +230,3 @@ $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

@@ -1,77 +1,68 @@
-@mixin active-icon {
+@mixin active-icon {
   .e-fe-dot,
   .e-fe-tick {
     color: $fe-ddl-icon-color;
   }
 }
-
 @mixin active-icon-color {
   .e-btn-icon,
   .e-tbar-btn-text {
     @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap5' {
       color: $fe-tb-active-color;
     }
-
-    @if $fm-skin-name == 'highcontrast' {
-      color: $fe-active-font-color;
-    }
   }
 }
-
 @mixin hover-icon-border-color {
   @if $fm-skin-name == 'bootstrap-dark' {
     border: 1px solid $fe-tb-hover-border-color;
   }
 }
-
-@mixin bg-border($bg-color, $border-color) {
+@mixin active-item {
+  background: $fe-active-bg-color;
+  border-color: $fe-active-border-color;
+}
+@mixin hover-item($bg-color, $border-color) {
   background: $bg-color;
   border-color: $border-color;
 }
 
 @include export-module('FileManager-theme') {
   .e-filemanager {
-    @include bg-border($fe-background, $fe-border-color);
+    background: $fe-background;
+    border-color: $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 {
-          &.e-active {
-            @include hover-icon-border-color;
-            @include active-icon-color;
-            @include bg-border($fe-tb-focus-bg, $fe-tb-focus-border-color);
-            @if $fm-skin-name == 'highcontrast' {
-              background: $fe-active-bg-color;
-            }
 
-            &:hover {
-              @if $fm-skin-name == 'highcontrast' {
-                background: $fe-active-bg-color;
-              }
-            }
-          }
+      .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;
+        }
 
-          &:hover {
-            @include hover-icon-border-color;
-            @include bg-border($fe-tb-focus-bg, $fe-tb-hover-border-color);
-          }
+        &:hover {
+          @include hover-icon-border-color;
+          background: $fe-tb-focus-bg;
+          border-color: $fe-tb-hover-border-color;
+        }
 
-          &:focus {
-            @include hover-icon-border-color;
-            @include active-icon-color;
-            @include bg-border($fe-tb-focus-bg, $fe-tb-hover-border-color);
-            @if $fm-skin-name == 'highcontrast' {
-              background: $fe-active-bg-color;
-            }
-          }
+        &:focus {
+          @include hover-icon-border-color;
+          @include active-icon-color;
+          background: $fe-tb-focus-bg;
+          border-color: $fe-tb-hover-border-color;
         }
       }
     }
 
     @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;
+        }
       }
     }
 
@@ -98,7 +89,7 @@
         color: $fe-bc-link-color;
 
         &:focus .e-list-text {
-          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
             background: $fe-bc-hover-bg-color;
           }
           color: $fe-bc-hover-font-color;
@@ -111,63 +102,40 @@
         }
 
         &:not(:last-child) {
+
           .e-list-text {
-            @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;
+
+            &:hover {
+              @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+                background: $fe-bc-hover-bg-color;
               }
+              color: $fe-bc-hover-font-color;
             }
-            @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;
+
+            &:active {
+              @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+                background: $fe-bc-hover-bg-color;
               }
+              color: $fe-bc-hover-font-color;
             }
-            @if $fm-skin-name == 'fluent2' {
-              &:active {
-                background: $fe-bc-active-bg-color;
+
+            &:focus {
+              @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+                background: $fe-bc-hover-bg-color;
               }
+              color: $fe-bc-hover-font-color;
             }
           }
         }
       }
 
-      .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' {
-            @include bg-border($fe-search-bg-color, $fe-border-color);
-          }
-
+          background: $fe-search-bg-color;
+          border-color: $fe-border-color;
           @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;
-          }
         }
       }
     }
@@ -197,28 +165,33 @@
           tr:first-child th {
             background: $fe-grid-header-bg-color;
           }
-        }
+       }
 
         .e-headercell {
 
-          &:not(.e-fe-grid-icon):hover,
-          &.e-fe-grid-icon .e-headercelldiv:hover {
+          &:not(.e-fe-grid-icon):hover {
             background: $fe-hover-bg-color;
           }
-          &.e-fe-checkbox:hover {
-            @if $fm-skin-name == 'FluentUI' {
+          @if $fm-skin-name == 'FluentUI' {
+            &.e-fe-checkbox:hover {
               background: $content-bg-color;
-            }
-            @else {
+          }
+        }
+          @else {
+            &.e-fe-checkbox:hover {
               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' or $fm-skin-name =='Material3' {
-          color: $fe-grid-empty-inner-content-color;
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          color: $content-text-color-alt2;
         }
       }
 
@@ -245,9 +218,12 @@
         }
       }
 
-      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;
+          }
         }
       }
 
@@ -267,14 +243,14 @@
         }
       }
 
-      &.e-gridhover .e-row:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+      &.e-gridhover tr[role='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 .e-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 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) {
         background-color: transparent;
       }
     }
@@ -290,8 +266,8 @@
       }
 
       .e-empty-inner-content {
-        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3' {
-          color: $fe-grid-empty-inner-content-color;
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          color: $content-text-color-alt2;
         }
       }
 
@@ -299,31 +275,22 @@
         border-color: transparent;
 
         &.e-active {
-          @include bg-border($fe-active-bg-color, $fe-active-border-color);
+          @include active-item;
         }
 
-        &.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-hover {
+          @include hover-item($fe-hover-bg-color, $fe-hover-border-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-active.e-hover {
+          @include hover-item($fe-ah-bg-color, $fe-ah-border-color);
         }
 
         &.e-focus {
           border-color: $fe-focus-border-color;
         }
 
-        &.e-hover.e-fe-drop-folder,
-        &:hover.e-fe-drop-folder {
+        &.e-hover.e-fe-drop-folder {
           border-color: $fe-drop-folder-bg-color;
         }
       }
@@ -334,6 +301,7 @@
           color: $fe-checkbox-color;
         }
       }
+
     }
 
     .e-fe-clone {
@@ -358,26 +326,32 @@
     }
 
     &.e-fe-mobile {
+
       .e-large-icons {
+
         .e-large-icon {
 
-          &.e-hover,
-          &:hover {
-            @include bg-border(transparent, transparent);
+          &.e-hover {
+            @include hover-item(transparent, transparent);
           }
+
           &.e-focus {
             border-color: transparent;
           }
+
           &.e-active {
-            @include bg-border($fe-active-bg-color, $fe-active-border-color);
+            @include active-item;
           }
         }
       }
       @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;
+            }
           }
         }
       }
@@ -399,8 +373,10 @@
     }
 
     &.e-dialog {
+
       td {
         color: $fe-text-color;
+
         &:first-child {
           color: $fe-label-color;
         }
@@ -411,8 +387,11 @@
       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;
+      }
     }
   }
 }