@syncfusion/ej2-fabric-dark-theme 33.2.15 → 34.1.29

package/styles/file-manager/_layout.scss

@@ -0,0 +1,1397 @@
+@use 'variables' as *;
+
+/* stylelint-disable property-no-vendor-prefix */
+@mixin user-select {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+@mixin visibility($value) {
+  .e-checkbox-wrapper {
+    visibility: $value;
+    @if $fm-skin-name == 'fluent2' {
+      padding: $fe-padding-none;
+    }
+  }
+}
+
+@mixin grid-no-border {
+  .e-rowcell.e-lastrowcell {
+    border-bottom-width: $fe-border-none;
+  }
+}
+
+@mixin popup-active-icon {
+  .e-fe-dot,
+  .e-fe-tick {
+    font-size: $fe-ddl-icon-font-size;
+  }
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin size($height, $width) {
+  height: $height;
+  width: $width;
+}
+
+@mixin checkbox($value) {
+  .e-checkbox-wrapper .e-frame {
+    border-width: $fe-checkbox-wrapper-border-width;
+    line-height: $value;
+    @if $fm-skin-name == 'fluent2' {
+      @include size(16px, 16px);
+      font-size: 10px;
+      margin: $fe-margin-none;
+    }
+    @if $fm-skin-name == 'tailwind3' {
+      @include size($fe-checkbox-wrapper-height, $fe-checkbox-wrapper-width);
+      margin: $fe-checkbox-wrapper-margin;
+    }
+  }
+}
+
+@mixin icon-style($height, $width, $margin) {
+  height: $height;
+  margin: $margin;
+  width: $width;
+}
+
+@mixin empty-content($font-size, $margin, $padding, $text-align) {
+  font-size: $font-size;
+  margin: $margin;
+  padding: $padding;
+  text-align: $text-align;
+}
+
+@mixin toolbar-height($height, $min-height) {
+  height: $height;
+  min-height: $min-height;
+}
+
+@mixin margin-padding($margin, $padding) {
+  margin: $margin;
+  padding: $padding;
+}
+
+@mixin empty-style($empty-min-width, $empty-content-font-size, $empty-content-margin, $empty-content-padding, $empty-content-text-align, $empty-icon-height, $empty-icon-width, $empty-icon-margin, $empty-inner-content-font-size, $empty-inner-content-margin, $empty-inner-content-padding, $empty-inner-content-text-align) {
+  .e-empty {
+    min-width: $empty-min-width;
+  }
+
+  .e-empty-content {
+    @include empty-content($empty-content-font-size, $empty-content-margin, $empty-content-padding, $empty-content-text-align);
+  }
+
+  .e-empty-icon {
+    @include icon-style($empty-icon-height, $empty-icon-width, $empty-icon-margin);
+  }
+
+  .e-empty-inner-content {
+    @include empty-content($empty-inner-content-font-size, $empty-inner-content-margin, $empty-inner-content-padding, $empty-inner-content-text-align);
+  }
+}
+
+@include export-module('FileManager-layout') {
+  ejs-filemanager {
+    display: block;
+  }
+
+  .e-filemanager {
+    @include user-select;
+    border: $fe-nrml-border-width solid;
+    position: relative;
+    @if $fm-skin-name == 'fluent2' {
+      border-radius: $fm-border-radius;
+    }
+
+    .e-blur {
+      opacity: .5;
+    }
+
+    &.e-fe-drop,
+    &.e-fe-drop .e-treeview .e-text-content,
+    &.e-fe-drop .e-treeview .e-fullrow,
+    &.e-fe-drop .e-address .e-address-list-item:last-child .e-list-text,
+    &.e-fe-drop .e-grid .e-columnheader {
+      cursor: grab;
+    }
+
+    &.e-no-drop {
+      cursor: no-drop;
+    }
+
+    .e-toolbar {
+      @if $fm-skin-name != 'fluent2' {
+        border-bottom-style: solid;
+      }
+      @if $fm-skin-name == 'bootstrap-dark' {
+        border-width: $fe-toolbar-border-width;
+      }
+      @else {
+        border-width: $fe-toolbar-border-width;
+      }
+
+      @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
+        @include toolbar-height($fe-tb-height, $fe-tb-height);
+      }
+
+      @if ($fm-skin-name == 'fluent2') {
+        box-shadow: none;
+      }
+
+      @if ($fm-skin-name == 'Material3') {
+        .e-toolbar-item .e-tbar-btn {
+          .e-tbar-btn-text {
+            line-height: 18px;
+            padding: 7px 8px 7px 0;
+          }
+
+          .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: $fe-border-none;
+        @if $fm-skin-name != 'tailwind3' {
+          font-weight: normal;
+        }
+        height: $fe-tb-ddb-height;
+        padding: $fe-tb-ddb-btn-padding;
+
+        .e-btn-icon.e-icons:not(.e-icon-left):not(.e-icon-right) {
+          padding: $fe-tb-ddb-icon-padding;
+        }
+
+        .e-btn-icon.e-icons.e-caret {
+          font-size: $fe-tb-ddb-caret-size;
+          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+            @include icon-style(18px, 18px, 2px 4px 0);
+            padding: $fe-tb-items-caret-icon-padding;
+          }
+          @else {
+            padding: $fe-tb-items-caret-icon-padding;
+          }
+        }
+
+        .e-tbar-btn-text.e-tbar-ddb-text {
+          padding-right: $fe-padding-none;
+        }
+
+        &.e-active,
+        &:hover,
+        &:focus {
+          border: $fe-tb-ddb-border;
+          padding: $fe-tb-ddb-btn-hvr-padding;
+
+          @if $fm-skin-name == 'bootstrap5.3' {
+            .e-btn-icon,
+            .e-tbar-btn-text {
+              color: $secondary-text-color-hover;
+            }
+          }
+        }
+      }
+
+      .e-toolbar-pop .e-toolbar-item .e-dropdown-btn {
+        .e-icons.e-caret {
+          font-size: $fe-tb-ddb-caret-size;
+          min-width: 0;
+          padding: $fe-tb-pop-caret-icon-padding;
+        }
+
+        .e-tbar-btn-text.e-tbar-ddb-text {
+          padding-right: $fe-padding-none;
+        }
+      }
+
+      .e-toolbar-pop {
+        width: max-content;
+      }
+    }
+
+    .e-treeview {
+
+      @if ($fm-skin-name == 'tailwind3') {
+        border-radius: $fe-treeview-border-radius;
+        border: $fe-nrml-border-none;
+        background: none;
+      }
+
+      & > .e-ul {
+        overflow: initial;
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+          padding-left: $fe-treeview-ul-padding-left;
+        }
+      }
+
+      .e-list-parent {
+        margin-bottom: $fe-margin-none;
+        margin-top: $fe-margin-none;
+
+        .e-list-item {
+          @if $fm-skin-name != 'fluent2' {
+            padding-bottom: $fe-padding-none;
+            padding-top: $fe-padding-none;
+
+            .e-fullrow {
+              height: $fe-tv-fullrow-height;
+            }
+          }
+
+          .e-list-text {
+            height: $fe-tv-node-height;
+            line-height: $fe-tv-node-lheight;
+          }
+
+          &.e-fe-drop-folder > .e-fullrow {
+            @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'fluent2' {
+              border: 1px dashed;
+            }
+            @else {
+              border: $fe-nrml-border-width solid;
+            }
+            box-sizing: border-box;
+          }
+        }
+      }
+
+      .e-text-content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        @if ($fm-skin-name == 'tailwind3') {
+          top: 4px;
+          height: $fe-tv-fullrow-height;
+        }
+      }
+
+      .e-list-text {
+        display: initial;
+      }
+
+      @if $fm-skin-name == 'fluent2' {
+        border: none;
+      }
+    }
+
+    .e-splitter {
+      border-width: $fe-border-none;
+    }
+
+    .e-address {
+      border-bottom: $fe-nrml-border-width solid;
+      height: $fe-address-height;
+      position: relative;
+
+      .e-fe-breadcrumb.e-icons {
+        padding-bottom: $fe-breadcrumb-icons-padding-bottom;
+        @if $fm-skin-name == 'material-dark' {
+          padding-bottom: $fe-padding-none;
+        }
+      }
+
+      .e-search-wrap {
+        float: right;
+        padding: $fe-search-padding;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 200px;
+
+        .e-input-group {
+          @if $fm-skin-name != 'fluent2' {
+            border-bottom-width: $fe-bc-search-border-bottom;
+          }
+          height: $fe-search-height;
+          margin: $fe-margin-none;
+
+          @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
+            &.e-input-focus .e-input {
+              padding: $fe-padding-none;
+            }
+          }
+
+          .e-input {
+            @include margin-padding($fe-search-input-margin, $fe-padding-none);
+            @if $fm-skin-name == 'Material3' or $skin-name == 'bootstrap5' or $skin-name == 'material' {
+              height: $fe-search-input-height;
+            }
+          }
+
+          .e-clear-icon {
+            margin: $fe-search-clear-icon-padding;
+            @if $skin-name == 'FluentUI' {
+              padding: $fe-search-clear-icon-margin;
+            }
+          }
+        }
+      }
+
+      .e-fe-search {
+        font-size: $fe-search-icon-font-size;
+        @if ($fm-skin-name != 'fluent2') {
+          margin: $fe-search-icon-margin;
+        }
+        @if ($fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5') {
+          margin-right: 4px;
+          padding: $fe-search-input-padding;
+        }
+        @else if ($fm-skin-name == 'Material3') {
+          padding: $fe-search-input-padding;
+        }
+        @else if ($fm-skin-name == 'fluent2') {
+          padding: $fe-search-input-padding;
+        }
+        @else if ($fm-skin-name == 'tailwind3') {
+          padding: $fe-search-input-padding;
+        }
+        @else {
+          padding: 5px;
+        }
+        position: absolute;
+        z-index: 1;
+
+        &::before {
+          display: inline-block;
+        }
+      }
+
+      .e-addressbar-ul {
+        @include ellipsis;
+        list-style: none;
+        @include margin-padding($fe-bc-margin, $fe-bc-padding);
+
+        .e-breadcrumb-menu {
+          display: inline;
+
+          .e-breadcrumb-submenu {
+            height: $fe-bc-submenu-height;
+            @if $fm-skin-name == 'material-dark' {
+              padding-bottom: $fe-padding-none;
+              padding-top: $fe-padding-none;
+            }
+          }
+        }
+      }
+
+      .e-list-text {
+        cursor: pointer;
+        font-size: $fe-bc-font-size;
+        line-height: $fe-bc-text-size;
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          font-weight: $font-weight-medium;
+        }
+        @else {
+          padding: $fe-bc-text-padding;
+        }
+        text-decoration: none;
+        @if $fm-skin-name == 'fluent2' {
+          border-radius: $fe-address-list-text-border-radius;
+        }
+
+        &:hover {
+          text-decoration: $fe-bc-li-text-decoration;
+        }
+      }
+
+      .e-address-list-item {
+        &:not(:last-child) {
+          .e-list-text {
+            @if ($fm-skin-name == 'bootstrap5.3') {
+              text-decoration: underline $primary-border-color;
+            }
+          }
+        }
+      }
+
+      .e-address-list-item {
+        display: inline-block;
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $fm-skin-name != 'Material3' and $fm-skin-name != 'tailwind3' {
+          height: $fe-bc-li-item-height;
+        }
+
+        &:last-child {
+          .e-list-text {
+            cursor: default;
+            @if $fm-skin-name == 'fluent2' {
+              font-weight: 600;
+            }
+            &:hover {
+              text-decoration: none;
+            }
+          }
+        }
+
+        .e-icons {
+          font-size: $fe-bc-icon-font-size;
+          margin: $fe-bc-icon-margin;
+          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2' {
+            vertical-align: middle;
+          }
+
+          &::before {
+            @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'fluent2' and $fm-skin-name != 'tailwind3' {
+              padding: $fe-bc-icon-padding;
+            }
+          }
+        }
+      }
+    }
+
+    .e-view-container .e-grid .e-gridcontent .e-emptyrow {
+      display: table-row;
+    }
+
+    .e-grid {
+      @include checkbox($fe-cb-line-height);
+      @if ($fm-skin-name == 'tailwind3') {
+        .e-checkbox-wrapper {
+          .e-icons.e-check {
+            font-size: $fe-checkbox-icon-font-size;
+          }
+        }
+      }
+      border-width: $fe-border-none;
+      float: left;
+
+      &.sf-grid {
+        .e-headercell.e-fe-grid-icon .e-headercelldiv {
+          @if $fm-skin-name !='Material3' {
+            margin-right: $fe-grid-headercell-icon-margin-right;
+          }
+        }
+
+        .e-gridheader .e-fe-grid-icon,
+        .e-gridcontent .e-fe-grid-icon  {
+          @if $fm-skin-name !='Material3' {
+            padding: $fe-grid-icon-padding;
+          }
+        }
+      }
+      .e-gridcontent tr.e-emptyrow td.e-lastrowcell:first-child:empty {
+        height: $fe-height-none;
+        padding: $fe-padding-none;
+      }
+
+      .e-gridheader {
+        border-width: $fe-grid-header-border-width;
+
+        .e-headercell {
+          height: $fe-grid-header-height;
+
+          &.e-fe-grid-icon .e-sortfilterdiv {
+            margin-right: $fe-grid-icon-sort-margin;
+          }
+
+          .e-headertext {
+            font-size: $fe-grid-header-font-size;
+          }
+
+          .e-rcursor {
+            border: $fe-border-none;
+          }
+
+          @if $fm-skin-name == 'fabric' or $fm-skin-name == 'fabric-dark' {
+            padding: 5px 8px;
+            line-height: 16px;
+          }
+        }
+
+        @include visibility(hidden);
+
+        &:hover,
+        .e-active {
+          @include visibility(visible);
+          @if $fm-skin-name == 'tailwind3' {
+            .e-checkbox-wrapper {
+              position: relative;
+              z-index: 999;
+            }
+          }
+        }
+      }
+
+      &.e-headercheck .e-gridheader .e-headercontent {
+        @include visibility(visible);
+        @if $fm-skin-name == 'tailwind3' {
+          .e-checkbox-wrapper {
+            position: relative;
+            z-index: 999;
+          }
+        }
+      }
+
+      @if $fm-skin-name == 'FluentUI' {
+        .e-checkbox-wrapper:hover .e-frame {
+          font-size: 10px;
+        }
+      }
+
+      .e-content {
+        overflow-y: auto !important; /* stylelint-disable-line declaration-no-important */
+        .e-table {
+          border-spacing: $fe-content-border-spacing;
+        }
+      }
+
+      .e-content {
+
+        .e-rowcell {
+          border: $fe-border-none;
+          font-size: $fe-grid-content-font-size;
+
+          @if $fm-skin-name == 'FluentUI' {
+            padding: 8px;
+          }
+
+          @if $fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2' {
+            padding: $fe-grid-content-padding;
+            line-height: 20px;
+
+            .e-fe-text {
+              font-size: $fe-grid-content-name-font-size;
+              line-height: 20px;
+            }
+          }
+
+          @if $fm-skin-name == 'fabric' or $fm-skin-name == 'fabric-dark' {
+            padding: 8px 12px;
+            line-height: 16px;
+          }
+        }
+
+        tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
+          @if $fm-skin-name == 'tailwind' {
+            border-bottom: 1px dashed $fe-drop-folder-bg-color;
+            border-left: 1px dashed $fe-drop-folder-bg-color;
+            border-top: 1px dashed $fe-drop-folder-bg-color;
+          }
+          @else {
+            box-shadow: 1px 0 0 1px $fe-drop-folder-bg-color inset;
+          }
+        }
+
+        tr.e-row.e-fe-drop-folder .e-rowcell:last-child {
+          @if $fm-skin-name == 'tailwind' {
+            border-bottom: 1px dashed $fe-drop-folder-bg-color;
+            border-right: 1px dashed $fe-drop-folder-bg-color;
+            border-top: 1px dashed $fe-drop-folder-bg-color;
+          }
+          @else {
+            box-shadow: -1px 0 0 1px $fe-drop-folder-bg-color inset;
+          }
+        }
+
+        tr.e-row.e-fe-drop-folder .e-rowcell {
+          @if $fm-skin-name == 'tailwind' {
+            border-bottom: 1px dashed $fe-drop-folder-bg-color;
+            border-top: 1px dashed $fe-drop-folder-bg-color;
+            padding-bottom: 6px;
+            padding-top: 6px;
+          }
+          @else {
+            box-shadow: 0 2px 0 -1px $fe-drop-folder-bg-color inset, 0 -2px 0 -1px $fe-drop-folder-bg-color inset;
+          }
+        }
+      }
+
+      .e-empty {
+        min-width: $fe-grid-empty-min-width;
+        @if $fm-skin-name == 'Material3' {
+          border: 1px dashed $primary;
+          border-radius: $fe-empty-border-radius;
+          margin: 36px;
+          height: calc(100% - 72px);
+        }
+      }
+
+      .e-empty-content {
+        @include empty-content($fe-grid-empty-content-font-size, $fe-grid-empty-content-margin, $fe-grid-empty-content-padding, $fe-grid-empty-content-text-align);
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          line-height: 24px;
+        }
+        @if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
+          line-height: $fe-grid-empty-content-line-height;
+        }
+        @if $fm-skin-name == 'Material3' {
+          font-weight: 500;
+        }
+      }
+
+      .e-empty-icon {
+        @include icon-style($fe-grid-empty-icon-height, $fe-grid-empty-icon-width, $fe-grid-empty-icon-margin);
+        @if $fm-skin-name == 'Material3' {
+          margin-top: 5%;
+        }
+      }
+
+      .e-empty-inner-content {
+        @include empty-content($fe-grid-empty-inner-content-font-size, $fe-grid-empty-inner-content-margin, $fe-grid-empty-inner-content-padding, $fe-grid-empty-inner-content-text-align);
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap5.3' or $fm-skin-name == 'Material3' or $fm-skin-name == 'tailwind3' {
+          line-height: $fe-grid-empty-inner-content-line-height;
+        }
+        @else if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
+          line-height: $fe-grid-empty-content-line-height;
+          color: $fe-grid-empty-inner-content-color;
+        }
+        @else {
+          opacity: $fe-lg-icon-empty-inner-content-opacity;
+        }
+      }
+
+      .e-gridpopup {
+        display: none !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .e-gridheader,
+      .e-gridcontent {
+
+        .e-fe-checkbox {
+          overflow: inherit;
+          padding-left: $fe-grid-header-cb-padding-left;
+          padding-right: $fe-padding-none;
+          box-shadow: none;
+        }
+
+        .e-fe-grid-icon {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'Material3' {
+            padding: $fe-gridcontent-icon-padding;
+          }
+          @if $fm-skin-name == 'Material3' {
+            padding: $fe-grid-icon-padding;
+          }
+
+          .e-headercelldiv {
+            text-overflow: unset;
+          }
+
+          & + .e-rowcell,
+          & + .e-headercell {
+            padding-left: $fe-padding-none;
+
+            &.e-fe-grid-name {
+              padding-left: $fe-grid-name-padding-left;
+            }
+          }
+        }
+      }
+
+      .e-row {
+        @include visibility(hidden);
+
+        &.e-focused {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' and $fm-skin-name != 'fluent2' and $fm-skin-name != 'tailwind3' {
+            td {
+              box-shadow: $fe-grid-row-ie-box-shadow;
+              &:first-child{
+                box-shadow: $fe-grid-row-fc-ie-box-shadow;
+              }
+              &:last-child{
+                box-shadow: $fe-grid-row-lc-ie-box-shadow;
+              }
+            }
+          }
+        }
+
+        &:hover,
+        .e-active {
+          @include visibility(visible);
+        }
+
+        &.e-fe-drop-file:hover {
+          @include visibility(hidden);
+        }
+      }
+
+      &.e-horizontallines,
+      &.e-verticallines,
+      &.e-hidelines {
+        @include grid-no-border;
+      }
+
+      &.e-resize-lines .e-headercell .e-rsuppress {
+        border-width: $fe-border-none;
+      }
+
+      .e-fe-icon {
+        display: inline-block;
+        @include icon-style($fe-grid-icon-height, $fe-grid-icon-size, $fe-grid-icon-margin);
+        vertical-align: middle;
+      }
+    }
+
+    .e-view-container .e-grid .e-gridheader {
+      padding-right: $fe-padding-none !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    &.e-rtl .e-view-container .e-grid .e-gridheader {
+      padding-left: $fe-padding-none !important; /* stylelint-disable-line declaration-no-important */
+    }
+    @if $fm-skin-name == 'tailwind3' {
+      &.e-rtl .e-large-icons .e-checkbox-wrapper {
+        padding-right: $fe-largeicon-rtl-checkbox-padding-right;
+      }
+    }
+    .e-large-icons {
+      @include checkbox($fe-cb-line-height);
+      float: left;
+      overflow: auto;
+      width: 100%;
+      height: calc($fe-full-height - $fe-address-height);
+
+      .e-empty {
+        min-width: $fe-lg-icon-empty-min-width;
+        @if $fm-skin-name == 'Material3' {
+          border: 1px dashed $primary;
+          border-radius: $fe-empty-border-radius;
+          margin: 36px;
+          height: calc(100% - 72px);
+        }
+      }
+
+      .e-empty-content {
+        @include empty-content($fe-lg-icon-empty-content-font-size, $fe-lg-icon-empty-content-margin, $fe-lg-icon-empty-content-padding, $fe-lg-icon-empty-content-text-align);
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          line-height: 24px;
+        }
+        @if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
+          line-height: $fe-grid-empty-content-line-height;
+        }
+        @if $fm-skin-name == 'Material3' {
+          font-weight: 500;
+        }
+      }
+
+      .e-empty-icon {
+        @include icon-style($fe-lg-icon-empty-icon-height, $fe-lg-icon-empty-icon-width, $fe-lg-icon-empty-icon-margin);
+        @if $fm-skin-name == 'Material3' {
+          margin-top: 10%;
+        }
+      }
+
+      .e-empty-inner-content {
+        @include empty-content($fe-lg-icon-empty-inner-content-font-size, $fe-lg-icon-empty-inner-content-margin, $fe-lg-icon-empty-inner-content-padding, $fe-lg-icon-empty-inner-content-text-align);
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap5.3' or $fm-skin-name == 'Material3' {
+          line-height: 22px;
+        }
+        @else if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
+          line-height: $fe-grid-empty-content-line-height;
+          color: $fe-grid-empty-inner-content-color;
+        }
+        @else {
+          opacity: $fe-lg-icon-empty-inner-content-opacity;
+        }
+      }
+
+      .e-list-parent {
+        display: block;
+        height: $fe-parent-list-height;
+        @include margin-padding($fe-lg-margin, $fe-lg-padding);
+        overflow: auto;
+      }
+
+      .e-checkbox-wrapper {
+        float: left;
+        position: absolute;
+        top: 0;
+        visibility: hidden;
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          margin: 2px;
+        }
+        @if $fm-skin-name == 'Material3' {
+          margin: 4px;
+        }
+        @if ($fm-skin-name == 'tailwind3') {
+          .e-icons.e-check {
+            font-size: $fe-checkbox-icon-font-size;
+          }
+        }
+      }
+
+      .e-list-item {
+        border: $fe-lg-item-border solid;
+        float: left;
+        @include icon-style($fe-lg-item-height, $fe-lg-item-width, $fe-lg-item-margin);
+        overflow: hidden;
+        @if $fm-skin-name != 'tailwind3' {
+          padding: $fe-lg-item-padding;
+        }
+
+        &.e-fe-drop-folder {
+          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3'{
+            border: 1px dashed $fe-drop-folder-bg-color;
+          }
+          @else if $fm-skin-name == 'FluentUI' {
+            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' or $skin-name == 'Material3' or $fm-skin-name == 'fluent2' {
+          border-radius: $fe-large-icon-list-item-border-radius;
+        }
+
+        &.e-active,
+        &.e-hover,
+        &:hover {
+          @include visibility(visible);
+        }
+      }
+
+      .e-text-content {
+        display: table-cell;
+        height: $fe-lg-item-inner-height;
+        position: relative;
+        vertical-align: bottom;
+      }
+
+      .image-blur {
+        filter: blur(8px);
+      }
+      
+      .e-list-text {
+        @include ellipsis;
+        display: block;
+        font-size: $fe-lg-text-font-size;
+        @if $fm-skin-name != 'tailwind3' {
+          padding: $fe-lg-text-padding;
+        }
+        text-align: center;
+        width: $fe-lg-item-inner-width;
+        @if $fm-skin-name == 'Material3' {
+          line-height: $fe-lg-text-line-height;
+        }
+        @if $fm-skin-name == 'tailwind3' {
+          line-height: $fe-large-list-text-lheight;
+        }
+      }
+
+      .e-list-img {
+        @if $fm-skin-name != 'Material3' and $fm-skin-name != 'Material3-dark' {
+          border: $fe-large-list-img-border solid;
+        }
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'Material3' and $fm-skin-name != 'tailwind3' {
+          box-shadow: $fe-img-box-shadow;
+        }
+        display: block;
+        margin: $fe-margin-none $fe-margin-auto;
+        max-height: $fe-lg-img-height;
+        max-width: 100%;
+        min-height: 20px;
+      }
+
+      .e-list-icon {
+        display: block;
+        @include icon-style($fe-lg-icon-height, $fe-lg-icon-width, $fe-lg-icon-margin);
+        @if $fm-skin-name == 'Material3' {
+          background-position: center;
+        }
+      }
+    }
+
+    &.e-drag-select {
+      position: absolute;
+      background-color: $fe-drag-select-bg-color;
+      opacity: $fe-drag-select-bg-opacity;
+      border: $fe-nrml-border-none;
+      width: 0;
+      height: $fe-height-none;
+      z-index: 1;
+    }
+
+    .e-fe-clone {
+      pointer-events: none;
+      z-index: 20;
+
+      .e-fe-content {
+        border: $fe-clone-border;
+        box-shadow: $fe-clone-box-shadow;
+        display: inline-flex;
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          height: $fe-clone-content-height;
+        }
+        @else if $fm-skin-name == 'Material3' {
+          height: $fe-clone-content-height;
+        }
+        @else {
+          height: $fe-clone-content-height;
+          padding: $fe-clone-content-padding;
+        }
+        @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap-dark' or $fm-skin-name == 'bootstrap' {
+          border-radius: 4px;
+        }
+
+        .e-fe-name {
+          display: inline-block;
+          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+            font-size: $fe-clone-content-name-font-size;
+            line-height: 22px;
+            margin: $fe-clone-content-name-margin;
+            max-width: 150px;
+          }
+          @else {
+            font-size: $fe-clone-content-name-font-size;
+            margin: $fe-clone-content-name-margin;
+            max-width: 70px;
+          }
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .e-fe-icon {
+          display: inline-block;
+          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+            @include icon-style(20px, 20px, $fe-clone-content-icon-margin);
+          }
+          @else {
+            @include icon-style(18px, 18px, $fe-clone-content-icon-margin);
+          }
+        }
+      }
+
+      .e-fe-count {
+        border: $fe-nrml-border-width solid;
+        border-radius: $fe-clone-count-border-radius;
+        font-size: $fe-clone-count-font-size;
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          @include icon-style(20px, 20px, $fe-clone-count-margin);
+          line-height: $fe-clone-count-lheight;
+        }
+        @else {
+          @include size($fe-clone-count-height, 22px);
+          line-height: $fe-clone-count-lheight;
+          margin-left: $fe-clone-count-margin-left;
+        }
+        position: relative;
+        text-align: center;
+        top: 0;
+      }
+    }
+
+    &.e-rtl {
+
+      .e-treeview > .e-ul {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+          padding: $fe-rtl-treeview-ul-padding;
+        }
+      }
+
+      .e-toolbar {
+
+        .e-fe-grid {
+          display: inline-table;
+          transform: rotate(180deg);
+        }
+
+        .e-toolbar-items .e-toolbar-right .e-toolbar-item .e-dropdown-btn .e-icon-left {
+          @if $fm-skin-name == 'FluentUI' {
+            line-height: $fe-cb-line-height;
+          }
+        }
+      }
+
+      .e-splitter.e-splitter-horizontal {
+        -ms-flex-direction: row-reverse;
+        flex-direction: row-reverse;
+      }
+
+      .e-address {
+
+        .e-search-wrap {
+          float: left;
+          left: 0;
+          right: auto;
+          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+            padding-left: 12px;
+          }
+
+          @if $fm-skin-name == 'Material3' {
+            padding: $fe-rtl-search-padding;
+          }
+
+          .e-input-group {
+            .e-input {
+              @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+                margin: $fe-rtl-search-wrap-input-margin;
+              }
+              @else if $fm-skin-name == 'Material3' {
+                margin: $fe-rtl-search-input-margin;
+              }
+              @else if $fm-skin-name == 'tailwind3' {
+                margin: $fe-rtl-search-wrap-input-margin;
+              }
+              @else {
+                margin: $fe-rtl-search-wrap-input-margin;
+              }
+              padding: $fe-padding-none;
+            }
+          }
+        }
+
+        .e-addressbar-ul {
+          display: flex;
+
+          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+            padding: $fe-rtl-bc-padding;
+          }
+
+          .e-icons::before {
+            display: inline-block;
+            transform: rotate(180deg);
+          }
+        }
+      }
+
+      .e-grid.e-rtl {
+
+        .e-row.e-focused {
+          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' and $fm-skin-name != 'tailwind3' {
+            td:first-child {
+              box-shadow: $fe-grid-row-lc-ie-box-shadow;
+            }
+
+            td:last-child {
+              box-shadow: $fe-grid-row-fc-ie-box-shadow;
+            }
+          }
+        }
+        @if $fm-skin-name == 'tailwind' {
+          .e-content {
+
+            tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
+              border-left: 0;
+              border-right: 1px dashed $fe-drop-folder-bg-color;
+            }
+
+            tr.e-row.e-fe-drop-folder .e-rowcell:last-child {
+              border-left: 1px dashed $fe-drop-folder-bg-color;
+              border-right: 0;
+            }
+          }
+        }
+
+        .e-gridheader,
+        .e-gridcontent {
+
+          .e-fe-checkbox {
+            padding-left: $fe-padding-none;
+            padding-right: $fe-rtl-grid-content-padding;
+          }
+
+          .e-fe-grid-icon {
+            padding-left: $fe-padding-none;
+            padding-right: $fe-rtl-grid-content-padding;
+
+            & + .e-rowcell,
+            & + .e-headercell {
+              padding-left: $fe-rtl-grid-icon-padding;
+              padding-right: $fe-padding-none;
+
+              &.e-fe-grid-name {
+                padding-right: $fe-rtl-grid-content-padding;
+              }
+            }
+          }
+        }
+
+        .e-fe-icon {
+          margin: $fe-rtl-grid-icon-margin;
+        }
+      }
+
+      .e-large-icons .e-list-item {
+        float: right;
+      }
+
+      .e-fe-clone .e-fe-count {
+        margin-left: $fe-margin-none;
+        margin-right: $fe-clone-count-margin-left;
+      }
+
+      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+        .e-fe-clone .e-fe-name {
+          margin: 8px 0 8px 8px;
+        }
+      }
+    }
+
+    .e-layout-content {
+      position: relative;
+    }
+
+    .e-pager {
+      border-width: $fe-pager-border-width;
+    }
+
+    .e-fe-overlay {
+      border: $fe-upload-overlay-border dashed $fe-drop-border-color;
+      bottom: 0;
+      display: block;
+      @include size($fe-nrml-overlay-height, 100%);
+      @if $fm-skin-name == 'fluent2' {
+        width: calc(100% - 48px);
+        top: 64px;
+        height: calc(100% - 88px);
+        left: 24px;
+      }
+      pointer-events: none;
+      position: absolute;
+      visibility: hidden;
+    }
+
+    @if $fm-skin-name == 'fluent2' {
+      .e-grid + .e-large-icons + .e-fe-overlay {
+        top: 82px;
+      }
+
+      .e-grid:has(.e-empty) + .e-large-icons + .e-fe-overlay {
+        top: 96px;
+        height: calc(100% - 120px);
+      }
+    }
+
+    .e-upload-drag-hover {
+      outline: none;
+
+      .e-fe-overlay {
+        visibility: visible;
+      }
+    }
+    
+    .e-fm-view-container {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      height: $fe-parent-list-height;
+    }
+  }
+
+  .e-fe-popup {
+
+    &.e-dropdown-popup ul .e-item,
+    &.e-contextmenu-wrapper ul .e-menu-item,
+    &.e-contextmenu-container ul .e-menu-item {
+      @include popup-active-icon;
+    }
+
+    &.e-dlg-resizable .e-dlg-content {
+      overflow: hidden;
+    }
+
+    &.e-dialog.e-fe-upload-dialog .e-dlg-content {
+      overflow: auto;
+    }
+
+    &.e-contextmenu-wrapper ul .e-menu-item.e-separator,
+    &.e-contextmenu-container ul .e-menu-item.e-separator {
+      margin: $fe-cm-separator-margin;
+    }
+
+    &.e-rtl .e-fe-grid {
+      display: inline-table;
+      transform: rotate(180deg);
+    }
+
+    &.e-dialog {
+
+      td {
+        @include ellipsis;
+        font-size: $fe-dg-td-font-size;
+        max-width: 211px;
+        min-width: 51px;
+        padding: $fe-dg-td-padding;
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          line-height: 22px;
+
+          &:first-child {
+            font-size: $text-sm;
+            line-height: 22px;
+          }
+        }
+      }
+
+      td.e-fe-value {
+        white-space: unset;
+        word-break: break-word;
+      }
+
+      .e-fe-errorcontent {
+        white-space: normal;
+        word-break: break-word;
+      }
+
+      .e-fe-icon {
+        display: inline-block;
+        @include icon-style(18px, 18px, $fe-popup-dialog-icon-margin);
+      }
+
+      .e-fe-access-header {
+        display: inline-block;
+      }
+
+      .e-fe-retrycontent {
+        padding: $fe-dialog-retrycontent-padding;
+      }
+
+      .e-image {
+        @include size($fe-dialog-img-height, 100%);
+      }
+
+      .e-dlg-content {
+        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+          padding-top: 16px;
+        }
+        @if $fm-skin-name == 'FluentUI' {
+          padding-top: 2px;
+        }
+      }
+
+      &.e-rtl {
+        td {
+          padding: $fe-dg-rtl-td-padding;
+        }
+        .e-fe-icon {
+          margin: $fe-popup-dialog-rtl-icon-margin;
+        }
+      }
+    }
+
+    &.e-dialog.e-popup.e-dlg-resizable {
+      min-height: 200px;
+    }
+
+    .e-fe-error {
+      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+        font-size: $fe-popup-error-font-size;
+        line-height: $fe-popup-error-line-height;
+        padding-top: 4px;
+      }
+      @else {
+        font-size: $fe-popup-error-font-size;
+        line-height: $fe-popup-error-line-height;
+      }
+    }
+
+    .e-upload {
+      border-bottom-width: $fe-border-none;
+      border-top-width: $fe-border-none;
+
+      .e-upload-actions {
+        border-bottom: $fe-nrml-border-width solid;
+      }
+    }
+  }
+
+  .e-filemanager .e-display-none,
+  .e-filemanager .e-treeview .e-icons .e-treeview-spinner,
+  .e-filemanager .e-splitter .e-split-bar .e-resize-handler,
+  .e-filemanager .e-splitter .e-display-none,
+  .e-filemanager .e-grid .e-spin-show,
+  .e-filemanager .e-grid .e-gridheader .e-emptyrow,
+  .e-filemanager .e-grid .e-gridcontent .e-emptyrow,
+  .e-fe-popup .e-upload .e-file-select-wrap,
+  .e-fe-popup .e-upload .e-icons.e-file-delete-btn {
+    display: none;
+  }
+
+  @media (max-width: 469px) {
+    .e-bigger .e-filemanager,
+    .e-filemanager.e-bigger {
+      &.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
+        min-width: $fe-mobile-lg-item-minwidth;
+        width: $fe-mobile-lg-item-width-two;
+      }
+    }
+  }
+
+  @media (min-width: 470px) and (max-width: 625px) {
+    .e-bigger .e-filemanager,
+    .e-filemanager.e-bigger {
+      &.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
+        min-width: $fe-mobile-lg-item-minwidth;
+        width: $fe-mobile-lg-item-width-three;
+      }
+    }
+  }
+
+  @media (min-width: 360px) and (max-width: 500px) {
+    @if $skin-name == 'FluentUI' {
+      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
+        position: relative;
+        right: 10px;
+      }
+    }
+  }
+  
+  .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
+    @include size($fe-full-height, 100%);
+  }
+
+  .e-filemanager-dialog {
+    z-index: 1005;
+    display: flex;
+    position: absolute;
+  }
+
+  .e-image-wrap-style {
+    height: $fe-full-height;
+  }
+
+  .e-fe-popup.e-dialog td.e-permission-content{
+    white-space: unset;
+  }
+
+  .e-large-icon-visible {
+    visibility: visible;
+  }
+
+  .e-large-icon-hidden {
+    visibility: hidden;
+  }
+
+  .e-filemanager .e-empty-state-container {
+    display: flex;
+    height: $fe-full-height;
+  }
+
+  .e-filemanager .e-empty.e-view-container {
+    margin: $fe-margin-auto;
+  }
+
+  .e-filemanager.e-fe-no-toolbar .e-fe-splitter {
+    height: $fe-full-height;
+  }
+
+  .e-filemanager .e-fe-splitter {
+    @if ($fm-skin-name == 'Material3') or ($fm-skin-name == 'fluent2') {
+      height: calc(#{$fe-full-height} - #{$fe-tb-height + 1px});
+    }
+    @else {
+      height: calc(#{$fe-full-height} - #{$fe-tb-height});
+    }
+  }
+
+  .e-filemanager .e-view-container .e-fe-grid-container {
+    height: calc($fe-full-height - $fe-address-height);
+  }
+
+  .e-filemanager .e-dropdown-btn.e-caret-hide .e-caret,
+  .e-filemanager .e-dropdown-btn.e-btn.e-caret-hide .e-caret {
+    position: absolute;
+    display: block;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+}