@syncfusion/ej2-filemanager 26.2.11 → 27.1.50

package/styles/file-manager/_bigger.scss

@@ -0,0 +1,758 @@
+@mixin visibility($value) {
+  .e-checkbox-wrapper {
+    visibility: $value;
+    @if $fm-skin-name == 'fluent2' {
+      padding: 0;
+    }
+  }
+}
+
+@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: 1px;
+    line-height: $value;
+    @if $fm-skin-name == 'fluent2' {
+      @include size(16px, 16px);
+      font-size: 10px;
+      margin: 0;
+    }
+  }
+}
+
+@mixin icon-style($height, $width, $margin) {
+  height: $height;
+  margin: $margin;
+  width: $width;
+}
+
+@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-bigger') {
+  .e-filemanager,
+  .e-bigger .e-filemanager,
+  .e-filemanager.e-bigger {
+  
+    &.e-fe-mobile {
+      
+      .e-toolbar {
+        @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
+          @include toolbar-height($fe-mobile-tb-height, $fe-mobile-tb-height);
+        }
+      }
+
+      .e-toolbar .e-popup-up-icon.e-icons,
+      .e-toolbar .e-popup-down-icon.e-icons,
+      .e-toolbar-items .e-toolbar-item .e-btn-icon.e-icons {
+        font-size: $fe-mobile-icon-font-size;
+      }
+
+      .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
+
+        @if $fm-skin-name == 'Material3' {
+          padding: $fe-mobile-tb-icon-padding;
+          font-size: $fe-mobile-tb-icon-font-size;
+          line-height: $fe-mobile-tb-icon-font-size;
+        }
+        @else {
+          &.e-fe-newfolder {
+            padding-top: $fe-mobile-newfolder-padding-top;
+          }
+          &.e-fe-upload {
+            padding-left: $fe-mobile-upload-padding-left;
+          }
+          &.e-fe-sort {
+            padding-top: $fe-mobile-sort-padding-top;
+          }
+          &.e-fe-refresh {
+            padding-top: $fe-mobile-refresh-padding-top;
+          }
+          &.e-fe-select  {
+            padding-top: $fe-mobile-select-padding-top;
+          }
+          &.e-fe-large {
+            padding: $fe-mobile-large-padding;
+          }
+          &.e-fe-grid {
+            padding: $fe-mobile-grid-padding;
+          }
+          &.e-fe-details {
+            padding-top: $fe-mobile-details-padding-top;
+          }
+          &.e-fe-delete {
+            padding-left: $fe-mobile-delete-padding-left;
+          }
+          &.e-fe-rename {
+            padding-left: $fe-mobile-rename-padding-left;
+            padding-top: $fe-mobile-rename-padding-top;
+          }
+          &.e-fe-download {
+            padding-left: $fe-mobile-download-padding-left;
+          }
+          &.e-fe-cut {
+            padding-left: $fe-mobile-cut-padding-left;
+            padding-top: $fe-mobile-cut-padding-top;
+          }
+          &.e-fe-copy {
+            padding-left: $fe-mobile-copy-padding-left;
+          }
+        }
+      }
+
+      .e-toolbar-left {
+        .e-icons.e-fe-sort {
+          display: inline-block;
+          margin: 0;
+          width: 14px;
+        }
+
+        .e-tbar-ddb-text,
+        .e-toolbar-item .e-tbar-btn-text {
+          display: none;
+        }
+      }
+
+      .e-splitter .e-split-bar {
+        display: none;
+      }
+
+      .e-address {
+        height: $fe-mobile-search-height;
+
+        .e-addressbar-ul {
+          height: $fe-mobile-search-height;
+          @if $fm-skin-name == 'material-dark' {
+            padding: $fe-big-bc-padding;
+          }
+        }
+
+        .e-address-list-item .e-icons {
+          font-size: $fe-big-bc-icon-font-size;
+        }
+
+        .e-list-text {
+          font-size: $fe-big-bc-font-size;
+        }
+
+        .e-search-wrap {
+          min-width: 47px;
+          width: auto;
+
+          .e-input-group {
+            display: none;
+            @include size($fe-mobile-search-height, 100%);
+
+            .e-clear-icon {
+              margin: 2px 8px 0;
+            }
+
+            .e-input {
+              margin: $fe-search-input-margin;
+            }
+          }
+        }
+
+        .e-fe-search {
+          font-size: $fe-mobile-icon-font-size;
+          @if $fm-skin-name !='Material3' {
+            margin: 3px 0;
+          }
+          right: 13px;
+        }
+      }
+
+      .e-grid {
+
+        .e-fe-grid-icon .e-fe-icon {
+          @include size($fe-mobile-grid-icon-size, $fe-mobile-grid-icon-size);
+          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+            margin: 0 8px 0 0;
+          }
+        }
+
+        .e-gridheader {
+          display: none;
+        }
+
+        .e-content {
+          .e-rowcell {
+            border-bottom: 1px solid;
+            border-bottom-color: $fe-border-color;
+
+            &.e-fe-checkbox {
+              padding: 0;
+            }
+          }
+        }
+
+        .e-gridcontent .e-fe-grid-icon {
+          @if $fm-skin-name == 'fabric-dark' {
+            padding-left: 9px;
+            padding-right: 9px;
+          }
+          @else {
+            padding-left: 10px;
+            padding-right: 10px;
+          }
+        }
+
+        .e-fe-text {
+          @include ellipsis;
+        }
+
+        @if $fm-skin-name == 'fluent2' {
+          .e-fe-text {
+            font-size: $text-base;
+            line-height: 22px;
+          }
+          .e-fe-date,
+          .e-fe-size {
+            color: $fe-grid-empty-inner-content-color;
+          }
+        }
+      }
+
+      .e-large-icons {
+        height: calc(100% - $fe-mobile-search-height);
+      }
+
+      .e-large-icons .e-list-parent {
+        padding: 0;
+
+        .e-list-item {
+          display: inline-table;
+          @include icon-style($fe-mobile-lg-item-height, $fe-mobile-lg-item-width, $fe-mobile-lg-item-margin);
+
+          &.e-hover,
+          &:hover {
+            @include visibility(hidden);
+          }
+
+          &.e-active {
+            @include visibility(visible);
+          }
+
+          .e-checkbox-wrapper {
+            z-index: 999;
+          }
+
+          .e-list-text {
+            margin: 0 auto;
+            width: $fe-mobile-lg-item-inner-width;
+            @if $fm-skin-name == 'Material3' {
+              font-size: $fe-big-lg-text-font-size;
+            }
+          }
+
+          .e-list-img {
+            margin: 11px auto;
+            max-height: $fe-mobile-lg-img-height;
+            max-width: $fe-mobile-lg-item-inner-width;
+          }
+
+          .e-list-icon {
+            @include icon-style($fe-mobile-lg-icon-height, $fe-mobile-lg-icon-width, $fe-mobile-lg-icon-margin);
+          }
+        }
+      }
+    }
+  
+    &.e-fe-m-select {
+      .e-large-icons .e-list-item.e-large-icon,
+      .e-grid .e-content .e-row .e-rowcell {
+        @include visibility(visible);
+      }
+    }
+  
+    &.e-fe-m-filter {
+
+      .e-address {
+
+        .e-search-wrap {
+          @include margin-padding(0, 0);
+          position: absolute;
+          width: 100%;
+
+          .e-input-group {
+            display: inline-flex;
+          }
+
+          .e-input-group .e-input {
+            height: auto;
+            margin-left: 45px;
+          }
+
+          .e-fe-search {
+            left: 0;
+            margin-left: 8px;
+            @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+              margin-top: 7px;
+            }
+            @else {
+              margin-top: 3px;
+            }
+            width: 30px;
+          }
+        }
+
+        .e-addressbar-ul {
+          visibility: hidden;
+        }
+      }
+    }
+  
+    &.e-fe-m-filter.e-rtl {
+      .e-address {
+        .e-search-wrap {
+          .e-input-group .e-input {
+            margin-right: 45px;
+          }
+          .e-fe-search {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+  
+    &.e-rtl .e-grid {
+      .e-gridheader,
+      .e-gridcontent {
+        .e-fe-grid-icon {
+          padding-right: 10px;
+        }
+      }
+    }
+  }
+  
+  .e-fe-popup.e-bigger,
+  .e-bigger .e-fe-popup {
+  
+    .e-fe-error {
+      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+        font-size: $text-sm;
+        line-height: 22px;
+      }
+    }
+  
+    &.e-dialog {
+      .e-dlg-header-content {
+        padding: $fe-big-dg-header-font-size;
+      }
+      td {
+        @include ellipsis;
+        font-size: $fe-big-dg-td-font-size;
+        max-width: 205px;
+        min-width: 45px;
+        padding: $fe-big-dg-td-padding;
+      }
+    }
+  }
+  
+  .e-bigger .e-filemanager,
+  .e-filemanager.e-bigger {
+
+    .e-toolbar {
+
+      @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
+        @include toolbar-height($fe-big-tb-height, $fe-big-tb-height);
+        .e-toolbar-item:not(.e-separator) {
+          min-height: $fe-big-tb-height;
+          padding: 4px;
+        }
+      }
+
+      .e-popup-up-icon.e-icons,
+      .e-popup-down-icon.e-icons,
+      .e-toolbar-items .e-toolbar-item .e-btn-icon.e-icons {
+        font-size: $fe-mobile-icon-font-size;
+      }
+
+      .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn {
+        &.e-tbar-btn {
+          padding: $fe-big-tb-ddb-btn-padding;
+
+          &.e-active,
+          &:hover,
+          &:focus {
+            padding: $fe-big-tb-ddb-btn-hvr-padding;
+          }
+        }
+
+        &.e-tbar-btn .e-btn-icon.e-icons.e-caret {
+          @if $fm-skin-name == 'tailwind' {
+            font-size: 22px;
+            @include icon-style(22px, 22px, 4px 4px 0);
+            padding: 1px;
+          }
+          @else {
+            padding: 0 10px;
+          }
+        }
+      }
+
+      .e-toolbar-pop .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-icons.e-caret {
+        padding: 0 10px;
+      }
+    }
+    @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+      .e-fe-clone {
+        .e-fe-content {
+          .e-fe-name {
+            font-size: $text-base;
+            line-height: 24px;
+            margin: 7px 12px 7px 0;
+          }
+
+          .e-fe-icon {
+            @include icon-style(24px, 24px, 7px 12px);
+          }
+        }
+
+        .e-fe-count {
+          font-size: $text-sm;
+          @include size(24px, 24px);
+          line-height: 22px;
+        }
+      }
+    }
+
+    .e-treeview {
+
+      & > .e-ul {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+          padding-left: 12px;
+        }
+      }
+
+      .e-list-parent .e-list-item {
+        .e-fullrow {
+          height: $fe-big-tv-fullrow-height;
+        }
+        .e-list-text {
+          height: $fe-big-tv-node-height;
+          line-height: $fe-big-tv-node-height;
+        }
+      }
+    }
+
+    .e-address {
+      height: $fe-big-address-height;
+
+      .e-breadcrumb-menu .e-breadcrumb-submenu {
+        height: $fe-big-bc-submenu-height;
+        @if $fm-skin-name == 'material-dark' {
+          margin-top: -3px;
+        }
+      }
+
+      .e-address-list-item {
+        @if ($fm-skin-name != 'Material3') {
+          height: $fe-big-bc-li-item-height;
+        }
+        .e-icons {
+          font-size: $fe-big-bc-icon-font-size;
+        }
+      }
+
+      .e-addressbar-ul {
+        padding: $fe-big-bc-padding;
+      }
+
+      .e-list-text {
+        font-size: $fe-big-bc-font-size;
+        line-height: $fe-big-bc-text-size;
+        padding: $fe-big-bc-text-padding;
+      }
+
+      .e-search-wrap {
+        min-width: 51px;
+        padding: $fe-big-search-padding;
+
+        .e-input-group {
+          height: $fe-big-search-height;
+
+          .e-input:focus {
+            padding: 0;
+          }
+
+          .e-input {
+            @if ($fm-skin-name == 'material' or $fm-skin-name == 'material-dark') {
+              height: 39px;
+            }
+            @else if ($fm-skin-name == 'FluentUI') {
+              height: 30px;
+            }
+            @else if ($fm-skin-name == 'Material3') {
+              margin: $fe-big-search-input-margin;
+              height: $fe-big-search-input-height;
+            }
+          }
+
+          .e-clear-icon::before {
+            @if ($fm-skin-name == 'bootstrap5') {
+              margin: 0;
+            }
+          }
+        }
+      }
+
+      .e-fe-search {
+        @if $fm-skin-name == 'tailwind' {
+          font-size: 16px;
+          margin: 7px 4px;
+        }
+        @else if $fm-skin-name == 'bootstrap5' {
+          font-size: 16px;
+          margin: 4px;
+        }
+        @else if $fm-skin-name == 'FluentUI' {
+          font-size: 18px;
+          margin: 3px;
+        }
+        @else if $fm-skin-name == 'Material3' {
+          @include margin-padding($fe-search-icon-margin, $fe-big-search-input-padding);
+        }
+        @else {
+          margin: 7px 0;
+        }
+      }
+    }
+
+    .e-grid {
+      @include checkbox($fe-big-cb-line-height);
+
+      .e-gridheader {
+        .e-headercell {
+          height: $fe-big-grid-header-height;
+          @if $fm-skin-name == 'fluent2' {
+            .e-headercelldiv.e-headerchkcelldiv {
+              margin-left: -6px;
+            }
+          }
+        }
+        .e-headertext {
+          font-size: $fe-big-grid-header-font-size;
+        }
+      }
+
+      .e-gridheader,
+      .e-gridcontent {
+
+        .e-rowcell {
+          font-size: $fe-big-grid-content-font-size;
+
+          @if $fm-skin-name == 'Material3' {
+            padding: 14px 12px;
+            line-height: 20px;
+  
+            .e-fe-text {
+              font-size: $fe-grid-content-name-font-size;
+              line-height: 20px;
+            }
+          }
+          .e-fe-text {
+            font-size: $fe-big-grid-content-name-font-size;
+          }
+        }
+
+        .e-fe-checkbox {
+          padding-left: 10px;
+        }
+
+        .e-fe-grid-icon {
+          @if $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'tailwind' {
+            padding-left: 10px;
+          }
+          @else {
+            padding-left: 16px;
+          }
+        }
+      }
+
+      .e-content {
+        tr.e-row.e-fe-drop-folder .e-rowcell {
+          @if $fm-skin-name == 'tailwind' {
+            padding-bottom: 11px;
+            padding-top: 11px;
+          }
+        }
+      }
+
+      .e-fe-icon {
+        @if $fm-skin-name == 'tailwind' {
+          @include size(24px, 24px);
+        }
+        @else {
+          margin: $fe-big-grid-icon-margin;
+        }
+      }
+
+      @include empty-style($fe-big-grid-empty-min-width, $fe-big-grid-empty-content-font-size, $fe-big-grid-empty-content-margin, $fe-big-grid-empty-content-padding, $fe-big-grid-empty-content-text-align, $fe-big-grid-empty-icon-height, $fe-big-grid-empty-icon-width, $fe-big-grid-empty-icon-margin, $fe-big-grid-empty-inner-content-font-size, $fe-big-grid-empty-inner-content-margin, $fe-big-grid-empty-inner-content-padding, $fe-big-grid-empty-inner-content-text-align);
+
+      .e-empty-inner-content {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+          opacity: $fe-big-grid-empty-inner-content-opacity;
+        }
+      }
+
+      &.e-rtl .e-checkbox-wrapper .e-frame {
+        @if $fm-skin-name == 'FluentUI' {
+          margin-right: -16px;
+        }
+        @else{
+          margin-right: -10px;
+        }
+      }
+    }
+
+    .e-large-icons {
+      @include checkbox($fe-big-cb-line-height);
+      height: calc(100% - $fe-big-address-height);
+
+      .e-list-parent {
+        padding: $fe-big-lg-padding;
+      }
+
+      .e-list-item {
+        @include icon-style($fe-big-lg-item-height, $fe-big-lg-item-width, $fe-big-lg-item-margin);
+      }
+
+      .e-text-content {
+        height: $fe-big-lg-item-inner-height;
+      }
+
+      .e-list-text {
+        font-size: $fe-big-lg-text-font-size;
+        padding: $fe-big-lg-text-padding;
+        width: $fe-big-lg-item-inner-width;
+      }
+
+      .e-list-img {
+        max-height: $fe-big-lg-img-height;
+        max-width: $fe-big-lg-item-inner-width;
+      }
+
+      .e-list-icon {
+        @include icon-style($fe-big-lg-icon-height, $fe-big-lg-icon-width, $fe-big-lg-icon-margin);
+      }
+
+      @include empty-style($fe-big-lg-icon-empty-min-width, $fe-big-lg-icon-empty-content-font-size, $fe-big-lg-icon-empty-content-margin, $fe-big-lg-icon-empty-content-padding, $fe-big-lg-icon-empty-content-text-align, $fe-big-lg-icon-empty-icon-height, $fe-big-lg-icon-empty-icon-width, $fe-big-lg-icon-empty-icon-margin, $fe-big-lg-icon-empty-inner-content-font-size, $fe-big-lg-icon-empty-inner-content-margin, $fe-big-lg-icon-empty-inner-content-padding, $fe-big-lg-icon-empty-inner-content-text-align);
+
+      .e-empty-inner-content {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+          opacity: $fe-big-lg-icon-empty-inner-content-opacity;
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      .e-treeview > .e-ul {
+        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
+          padding: 0 12px 0 0;
+        }
+      }
+
+      @if $fm-skin-name =='Material3' {
+        .e-address {
+          .e-search-wrap .e-input-group .e-input {
+            margin: $fe-big-rtl-search-input-margin;
+          }
+
+          .e-fe-search {
+            padding: $fe-big-rtl-search-input-padding;
+          }
+        }
+      }
+
+      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
+        .e-fe-clone .e-fe-name {
+          margin: 7px 0 7px 12px;
+        }
+      }
+
+      .e-grid {
+
+        .e-gridheader,
+        .e-gridcontent {
+
+          .e-fe-checkbox {
+            padding-right: 16px;
+          }
+        }
+      }
+    }
+
+    .e-fe-overlay {
+      height: calc(100% - 41px);
+      @if $fm-skin-name == 'fluent2' {
+        height: calc(100% - 88px);
+      }
+    }
+  }
+  
+  @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;
+      }
+    }
+  }
+}