devextreme/less/sources/widgets/generic/fileManager.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/fileManager.generic.less)
* Version: 20.1.4
* Build date: Tue Jun 02 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.generic.less";
@import (once) "./drawer.generic.less";
@import (once) "./menu.generic.less";
@import (once) "./contextMenu.generic.less";
@import (once) "./popup.generic.less";
@import (once) "./textBox.generic.less";
@import (once) "./button.generic.less";
@import (once) "./treeView.generic.less";
@import (once) "./dataGrid.generic.less";
@import (once) "./progressBar.generic.less";
@import (once) "./scrollView.generic.less";
@import (once) "./toolbar.generic.less";
@import (once) "./splitter.generic.less";

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

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

    .dx-drawer-shrink .dx-filemanager-progress-panel {
        border-left-color: @filemanager-border-color;
    }

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

        .dx-filemanager-progress-panel-container {
            padding-top: @FILEMANAGER_PROGRESS_PANEL_PADDING_TOP;
        }
    }

    .dx-filemanager-progress-box-image {
        font-size: @GENERIC_BASE_ICON_SIZE * 2;
    }

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

    .dx-filemanager-progress-box .dx-filemanager-progress-box-close-button {
        margin-top: @FILEMANAGER_PROGRESS_BOX_BUTTON_CLOSE_MARGIN_TOP;
    }

    .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-toolbar-has-large-icon .dx-button-content {
            padding: @FILEMANAGER_LARGE_ICON_BUTTON_CONTENT_PADDING;
        }

        .dx-toolbar .dx-filemanager-toolbar-viewmode-item .dx-button-content {
            padding-left: @FILEMANAGER_TOOLBAR_VIEWMODE_PADDING;
            padding-right: @FILEMANAGER_TOOLBAR_VIEWMODE_PADDING;
        }
    }

    .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-menu-item-content {
            padding-top: @FILEMANAGER_BREADCRUMBS_ITEM_PADDING_TOP;
            padding-bottom: @FILEMANAGER_BREADCRUMBS_ITEM_PADDING_BOTTOM;
        }

        .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-item-selected {
                color: @filemanager-file-item-select-color;
                background: @filemanager-file-item-select-bg;
            }

            &.dx-state-hover:not(.dx-state-focused):not(.dx-item-selected) {
                background: @filemanager-file-item-hover-bg;
            }

            &.dx-state-focused {
                border: @filemanager-file-item-focused-border 1px solid;
            }

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

            .dx-filemanager-thumbnails-item-thumbnail {
                width: @GENERIC_BASE_ICON_SIZE * 2;
                height: @GENERIC_BASE_ICON_SIZE * 2;
                font-size: @GENERIC_BASE_ICON_SIZE * 2;
            }

            .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: @GENERIC_BASE_ICON_SIZE;
                width: @GENERIC_BASE_ICON_SIZE;
                height: @GENERIC_BASE_ICON_SIZE;
            }

            .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-command-select {
                width: @FILEMANAGER_DETAILS_VIEW_CHECKBOX_COLUMN_WIDTH;
                min-width: @FILEMANAGER_DETAILS_VIEW_CHECKBOX_COLUMN_WIDTH;
                max-width: @FILEMANAGER_DETAILS_VIEW_CHECKBOX_COLUMN_WIDTH;
            }

            .dx-row-focused .dx-filemanager-file-actions-button .dx-button .dx-icon {
                color: @filemanager-item-focused-color;
            }
        }
    }
}

.dx-filemanager-dirs-tree.dx-treeview {
    .dx-treeview-item-content > i {
        margin-bottom: @FILEMANAGER_DIRS_TREE_ICON_MARGIN_BOTTOM;
    }

    .dx-state-focused > .dx-treeview-item {
        background: @base-bg;

        &.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-view-switcher-popup {
    width: 2 * @FILEMANAGER_TOOLBAR_VIEWMODE_PADDING + @GENERIC_BASE_ICON_SIZE;

    .dx-dropdownbutton-popup-wrapper.dx-dropdownbutton-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
        padding-top: @FILEMANAGER_TOOLBAR_VIEWMODE_PADDING - 1px;
        padding-left: @FILEMANAGER_TOOLBAR_VIEWMODE_PADDING - 1px;
        padding-right: @FILEMANAGER_TOOLBAR_VIEWMODE_PADDING;
        text-overflow: clip;
    }
}

.dx-filemanager-dirs-tree.dx-treeview .dx-filemanager-file-actions-button {
    margin-top: 1px;
    margin-bottom: -1px;

    .dx-button .dx-button-content {
        padding: 0;
    }
}

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

        .dx-button-content {
            padding-top: @FILEMANAGER_FILE_ACTIONS_BUTTON_TOP_BOTTOM_PADDING;
            padding-bottom: @FILEMANAGER_FILE_ACTIONS_BUTTON_TOP_BOTTOM_PADDING;
        }
    }
}

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