devextreme/less/sources/widgets/material/treeView.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/treeView.material.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/treeView.less";
@import (once) "./checkBox.material.less";
@import (once) "./scrollable.material.less";
@import (once) "./loadIndicator.material.less";

.dx-size-default() {
    @MATERIAL_TREEVIEW_TOGGLE_ITEM_WIDTH: 24px;
    @MATERIAL_TREEVIEW_CHECKBOX_OFFSET: 35px;
    @MATERIAL_TREEVIEW_CHECKBOX_VERTICAL_OFFSET: 14px;
    @MATERIAL_SELECT_ALL_ITEM_OFFSET: @MATERIAL_TREEVIEW_CHECKBOX_OFFSET;
    @MATERIAL_SELECT_ALL_ITEM_PADDING: 15px 0 15px @MATERIAL_SELECT_ALL_ITEM_OFFSET;

    @MATERIAL_TREEVIEW_ITEM_PADDING: 13px 8px;
    @MATERIAL_TREEVIEW_MIN_ITEM_HEIGHT: 48px;

    @MATERIAL_TREEVIEW_ITEM_WITH_CHECKBOX_OFFSET: @MATERIAL_TREEVIEW_CHECKBOX_OFFSET + 5;

    @MATERIAL_TREEVIEW_LOADINCICATOR_OFFSET_TOP: 13px;
    @MATERIAL_TREEVIEW_LOADINCICATOR_OFFSET_LEFT: 2px;
    @MATERIAL_TREEVIEW_LOADINCICATOR_SIZE: 20px;
    @MATERIAL_SELECT_ALL_TEXT_OFFSET: 31px;

    @MATERIAL_TREEVIEW_SEARCHBOX_MARGIN_BOTTOM: 8px;
}

.dx-size-compact() {
    @MATERIAL_TREEVIEW_TOGGLE_ITEM_WIDTH: 16px;
    @MATERIAL_TREEVIEW_CHECKBOX_OFFSET: 26px;
    @MATERIAL_TREEVIEW_CHECKBOX_VERTICAL_OFFSET: 10px;
    @MATERIAL_SELECT_ALL_ITEM_OFFSET: @MATERIAL_TREEVIEW_CHECKBOX_OFFSET;
    @MATERIAL_SELECT_ALL_ITEM_PADDING: 10px 0 10px @MATERIAL_SELECT_ALL_ITEM_OFFSET;

    @MATERIAL_TREEVIEW_ITEM_PADDING: 10px 8px;
    @MATERIAL_TREEVIEW_MIN_ITEM_HEIGHT: 36px;

    @MATERIAL_TREEVIEW_LOADINCICATOR_OFFSET_TOP: 8px;
    @MATERIAL_TREEVIEW_LOADINCICATOR_OFFSET_LEFT: 0;
    @MATERIAL_TREEVIEW_LOADINCICATOR_SIZE: 18px;
    @MATERIAL_SELECT_ALL_TEXT_OFFSET: 20px;

    @MATERIAL_TREEVIEW_SEARCHBOX_MARGIN_BOTTOM: 4px;
}
@MATERIAL_TREEVIEW_CONTAINER_WITH_BORDER_OFFSET: 8px;
@MATERIAL_TREEVIEW_BORDER_PADDING: 1px;
@MATERIAL_TREEVIEW_CONTAINER_PADDING:
    @MATERIAL_TREEVIEW_BORDER_PADDING
    @MATERIAL_TREEVIEW_BORDER_PADDING
    @MATERIAL_TREEVIEW_BORDER_PADDING
    @MATERIAL_TREEVIEW_CONTAINER_WITH_BORDER_OFFSET;

@MATERIAL_TREEVIEW_SEARCH_EDITOR_HEIGHT: 33px;
@MATERIAL_SELECT_ALL_ITEM_LEFT_PADDING: 26px;
@MATERIAL_TREEVIEW_NODE_OFFSET: @MATERIAL_TREEVIEW_TOGGLE_ITEM_WIDTH;
@MATERIAL_TREEVIEW_ITEM_WITH_CHECKBOX_OFFSET: @MATERIAL_TREEVIEW_CHECKBOX_OFFSET + 5;

.dx-treeview-node-loadindicator {
    top: @MATERIAL_TREEVIEW_LOADINCICATOR_OFFSET_TOP;
    left: @MATERIAL_TREEVIEW_LOADINCICATOR_OFFSET_LEFT;
    width: @MATERIAL_TREEVIEW_LOADINCICATOR_SIZE;
    height: @MATERIAL_TREEVIEW_LOADINCICATOR_SIZE;
}

.dx-rtl {
    .dx-treeview-make-rtl(@MATERIAL_TREEVIEW_CONTAINER_WITH_BORDER_OFFSET, @MATERIAL_TREEVIEW_NODE_OFFSET, @MATERIAL_TREEVIEW_ITEM_WITH_CHECKBOX_OFFSET, @MATERIAL_TREEVIEW_CHECKBOX_OFFSET, @MATERIAL_SELECT_ALL_TEXT_OFFSET, @MATERIAL_SELECT_ALL_ITEM_LEFT_PADDING, @MATERIAL_TREEVIEW_BORDER_PADDING);

    .dx-treeview-toggle-item-visibility {
        right: 0;
    }

    .dx-treeview-item-with-checkbox .dx-checkbox {
        overflow: visible;
    }
}

.dx-treeview-search {
    margin-bottom: @MATERIAL_TREEVIEW_SEARCHBOX_MARGIN_BOTTOM;
}

.dx-treeview-with-search > .dx-scrollable {
    height: calc(100% - round(@MATERIAL_TREEVIEW_SEARCH_EDITOR_HEIGHT + @MATERIAL_TREEVIEW_SEARCHBOX_MARGIN_BOTTOM));
}

.dx-treeview-border-visible {
    border: 1px solid @treeview-border-color;

    .dx-treeview-select-all-item {
        padding-left: @MATERIAL_SELECT_ALL_ITEM_LEFT_PADDING;
    }

    .dx-scrollable-content {
        > .dx-treeview-node-container {
            padding: @MATERIAL_TREEVIEW_CONTAINER_PADDING;
        }
    }
}

.dx-treeview-select-all-item {
    border-bottom: 1px solid @treeview-border-color;
    padding: @MATERIAL_SELECT_ALL_ITEM_PADDING;

    .dx-checkbox-text {
        padding-left: @MATERIAL_SELECT_ALL_TEXT_OFFSET;
    }
}

.dx-treeview-node {
    padding-left: @MATERIAL_TREEVIEW_NODE_OFFSET;
}

.dx-state-selected {
    > .dx-treeview-item {
        color: @treeview-item-selected-color;
    }
}

.dx-treeview-item-with-checkbox {
    .dx-treeview-item {
        color: @base-text-color;
        padding-left: @MATERIAL_TREEVIEW_ITEM_WITH_CHECKBOX_OFFSET;
    }

    .dx-checkbox {
        top: @MATERIAL_TREEVIEW_CHECKBOX_VERTICAL_OFFSET;
        left: @MATERIAL_TREEVIEW_CHECKBOX_OFFSET;
    }
}

.dx-treeview-item-without-checkbox {
    &.dx-state-selected {
        > .dx-treeview-item {
            color: @treeview-item-selected-color;
            background-color: @treeview-item-selected-bg;

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

    &.dx-state-focused {
        > .dx-treeview-item {
            background-color: @treeview-focused-bg;
            color: @treeview-focus-color;
        }
    }
}

.dx-treeview-item {
    padding: @MATERIAL_TREEVIEW_ITEM_PADDING;
    min-height: @MATERIAL_TREEVIEW_MIN_ITEM_HEIGHT;
    line-height: @MATERIAL_TREEVIEW_MIN_ITEM_HEIGHT / 2 - 2;

    .dx-icon {
        .dx-icon-sizing(@MATERIAL_BASE_ICON_SIZE);
    }

    &.dx-state-hover {
        background-color: @treeview-hover-bg;
        color: @treeview-item-hover-color;
    }
}

.dx-treeview-toggle-item-visibility {
    .dx-icon(chevronright);
    .dx-icon-font-centered-sizing(@MATERIAL_BASE_ICON_SIZE);

    color: @treeview-spin-icon-color;
    width: @MATERIAL_TREEVIEW_TOGGLE_ITEM_WIDTH;
    height: @MATERIAL_TREEVIEW_MIN_ITEM_HEIGHT;
    top: 0;
    left: 0;

    &.dx-treeview-toggle-item-visibility-opened {
        .dx-icon(chevrondown);
        .dx-icon-font-centered-sizing(@MATERIAL_BASE_ICON_SIZE);
    }
}