devextreme/less/sources/widgets/material/fileManager.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/fileManager.material.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "../base/fileManager.less";
@import (once) "./toast.material.less";
@import (once) "./drawer.material.less";
@import (once) "./menu.material.less";
@import (once) "./contextMenu.material.less";
@import (once) "./popup.material.less";
@import (once) "./textBox.material.less";
@import (once) "./button.material.less";
@import (once) "./treeView.material.less";
@import (once) "./dataGrid.material.less";
@import (once) "./progressBar.material.less";
@import (once) "./scrollView.material.less";
@import (once) "./toolbar.material.less";
@import (once) "./splitter.material.less";

.dx-filemanager {
    border-color: @filemanager-border-color;

    .dx-filemanager-notification-common {
        border-color: @filemanager-border-color;
    }

    .dx-filemanager-progress-panel {
        background-color: @base-bg;

        .dx-filemanager-progress-panel-details {
            border-color: @filemanager-border-color;

            & > .dx-filemanager-progress-box {
                box-shadow: 0 4px 8px 0 @filemanager-progressbox-shadow-color;
            }
        }
    }

    .dx-filemanager-progress-box-error {
        color: @base-inverted-text-color;
        background: @base-danger;
    }

    .dx-filemanager-toolbar {
        background: @base-bg;

        &.dx-filemanager-file-toolbar,
        &.dx-filemanager-file-toolbar .dx-toolbar {
            background: @filemanager-file-toolbar-bg;
        }

        .dx-filemanager-toolbar-separator-item {
            height: @FILEMANAGER_TOOLBAR_SEPARATOR_HEIGHT;
            background: @filemanager-border-color;
        }

        .dx-filemanager-toolbar-viewmode-item .dx-texteditor {
            width: @FILEMANAGER_TOOLBAR_VIEWMODE_WIDTH;
        }

        .dx-texteditor.dx-editor-filled {
            background: transparent;

            &.dx-state-hover,
            &.dx-state-active,
            &.dx-state-focused {
                background: @filemanager-editor-active-bg;
            }

            &.dx-dropdowneditor {
                border-color: transparent;

                .dx-dropdowneditor-icon {
                    background: transparent;
                }

                &.dx-state-hover .dx-dropdowneditor-icon,
                &.dx-state-active .dx-dropdowneditor-icon {
                    background: transparent;
                    border-color: transparent;
                }
            }
        }
    }

    .dx-filemanager-container {
        border-top-color: @filemanager-border-color;
    }

    .dx-filemanager-dirs-panel {
        border-right-color: @filemanager-border-color;
    }

    .dx-filemanager-breadcrumbs {
        border-bottom-color: @filemanager-border-color;

        .dx-menu-item {
            &.dx-state-focused {
                background: @filemanager-breadcrumbs-item-focus-bg;
                color: @filemanager-breadcrumbs-item-focus-color;
            }
        }

        .dx-filemanager-breadcrumbs-separator-item .dx-menu-item-content {
            background: @filemanager-border-color;
        }

        .dx-filemanager-breadcrumbs-separator-item,
        .dx-filemanager-breadcrumbs-path-separator-item {
            &.dx-state-hover {
                background: transparent;
            }
        }
    }

    .dx-filemanager-thumbnails {
        &.dx-filemanager-inactive-area .dx-filemanager-thumbnails-view-port .dx-filemanager-thumbnails-item.dx-filemanager-item-selected {
            color: @base-text-color;
            background: @base-bg;
        }

        .dx-filemanager-thumbnails-item {
            &.dx-filemanager-item-selected {
                color: @filemanager-file-item-select-color;
                background: @filemanager-file-item-select-bg;
            }

            &.dx-filemanager-item-focused {
                border-color: @base-text-color;
            }

            .dx-filemanager-item-custom-thumbnail {
                color: @filemanager-custom-thumbnail-color;
            }
        }
    }

    .dx-filemanager-files-view {
        background: @base-bg;

        &.dx-filemanager-details {
            .dx-filemanager-details-item-thumbnail {
                font-size: @MATERIAL_BASE_ICON_SIZE;
            }
        }
    }

    .dx-filemanager-details {
        .dx-filemanager-details-item-name-wrapper {
            align-items: center;
        }
    }
}

.dx-filemanager-dirs-tree.dx-treeview {
    .dx-state-focused > .dx-treeview-item {
        background: transparent;

        &.dx-state-hover {
            background: @filemanager-dirs-tree-item-focus-bg;
        }

        & * {
            color: @filemanager-dirs-tree-item-focus-color;
        }
    }

    .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item {
        background: @filemanager-dirs-tree-item-focus-bg;

        & * {
            color: @filemanager-dirs-tree-item-focus-color;
        }
    }
}

.dx-filemanager { // stylelint-disable-line no-duplicate-selectors
    .dx-filemanager-container { // stylelint-disable-line no-duplicate-selectors
        .dx-filemanager-dirs-panel {
            min-width: 300px;
            max-width: 350px;
        }
    }
}

.dx-filemanager-file-actions-button {
    .dx-button {
        min-width: @FILEMANAGER_FILE_ACTIONS_BUTTON_WIDTH;
        height: @FILEMANAGER_FILE_ACTIONS_BUTTON_HEIGHT;

        .dx-button-content {
            padding: @FILEMANAGER_FILE_ACTIONS_BUTTON_TOP_BOTTOM_PADDING 6px;
        }
    }
}

.dx-filemanager-context-menu .dx-menu-item-has-text:not(.dx-menu-item-has-icon) .dx-menu-item-text {
    margin-left: @FILEMANAGER_CONTEXTMENU_TEXT_ITEM_LEFT_MARGIN;
}

.filemanager-icons-mixin(@base-text-color, @base-success, @base-inverted-text-color, @base-danger, @base-inverted-text-color, @FILEMANAGER_LARGE_ICON_SIZE);