devextreme/less/sources/widgets/generic/treeView.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-size-default() {
    @GENERIC_TREEVIEW_CONTAINER_WITH_BORDER_OFFSET: 7px;

    @GENERIC_TREEVIEW_BORDER_PADDING: 1px;
    @GENERIC_TREEVIEW_CONTAINER_PADDING:
        @GENERIC_TREEVIEW_BORDER_PADDING
        @GENERIC_TREEVIEW_BORDER_PADDING
        @GENERIC_TREEVIEW_BORDER_PADDING
        @GENERIC_TREEVIEW_CONTAINER_WITH_BORDER_OFFSET;

    @GENERIC_TREEVIEW_NODE_OFFSET: 15px;

    @GENERIC_TREEVIEW_TOGGLE_ITEM_WIDTH: 21px;

    @GENERIC_TREEVIEW_ITEM_WITH_CHECKBOX_OFFSET: 36px;
    @GENERIC_SELECT_ALL_ITEM_OFFSET: 20px;

    @GENERIC_SELECT_ALL_ITEM_PADDING: 9px 0 11px @GENERIC_SELECT_ALL_ITEM_OFFSET;
    @GENERIC_SELECT_ALL_ITEM_LEFT_PADDING: 26px;

    @GENERIC_TREEVIEW_ITEM_PADDING: 5px 6px;
    @GENERIC_TREEVIEW_MIN_ITEM_HEIGHT: 32px;

    @GENERIC_TREEVIEW_CHECKBOX_OFFSET: 19px;

    @GENERIC_TREEVIEW_ITEM_VISIBILITY_ICON_SIZE: 10px;

    @GENERIC_TREEVIEW_LOADINCICATOR_OFFSET_TOP: 8px;
    @GENERIC_TREEVIEW_LOADINCICATOR_OFFSET_LEFT: -1px;
    @GENERIC_TREEVIEW_LOADINCICATOR_SIZE: 14px;
    @GENERIC_SELECT_ALL_TEXT_OFFSET: 31px;

    @GENERIC_TREEVIEW_ARROW_ICON_SIZE: 22px;

    @GENERIC_TREEVIEW_SEARCHBOX_MARGIN_BOTTOM: 5px;
}

.dx-size-compact() {
    @GENERIC_TREEVIEW_CONTAINER_WITH_BORDER_OFFSET: 6px;

    @GENERIC_TREEVIEW_BORDER_PADDING: 1px;
    @GENERIC_TREEVIEW_CONTAINER_PADDING:
        @GENERIC_TREEVIEW_BORDER_PADDING
        @GENERIC_TREEVIEW_BORDER_PADDING
        @GENERIC_TREEVIEW_BORDER_PADDING
        @GENERIC_TREEVIEW_CONTAINER_WITH_BORDER_OFFSET;

    @GENERIC_TREEVIEW_NODE_OFFSET: 10px;

    @GENERIC_TREEVIEW_TOGGLE_ITEM_WIDTH: 16px;

    @GENERIC_TREEVIEW_ITEM_WITH_CHECKBOX_OFFSET: 31px;
    @GENERIC_SELECT_ALL_ITEM_OFFSET: 15px;

    @GENERIC_SELECT_ALL_ITEM_PADDING: 6px 0 8px @GENERIC_SELECT_ALL_ITEM_OFFSET;
    @GENERIC_SELECT_ALL_ITEM_LEFT_PADDING: 20px;

    @GENERIC_TREEVIEW_ITEM_PADDING: 4px 6px;
    @GENERIC_TREEVIEW_MIN_ITEM_HEIGHT: 28px;

    @GENERIC_TREEVIEW_CHECKBOX_OFFSET: 14px;

    @GENERIC_TREEVIEW_ITEM_VISIBILITY_ICON_SIZE: 8px;

    @GENERIC_TREEVIEW_LOADINCICATOR_OFFSET_TOP: 8px;
    @GENERIC_TREEVIEW_LOADINCICATOR_OFFSET_LEFT: -1px;
    @GENERIC_TREEVIEW_LOADINCICATOR_SIZE: 11px;
    @GENERIC_SELECT_ALL_TEXT_OFFSET: 26px;

    @GENERIC_TREEVIEW_ARROW_ICON_SIZE: 18px;

    @GENERIC_TREEVIEW_SEARCHBOX_MARGIN_BOTTOM: 3px;
}

@GENERIC_TREEVIEW_SEARCH_EDITOR_HEIGHT: round(@GENERIC_BASE_LINE_HEIGHT * @GENERIC_BASE_FONT_SIZE) + @GENERIC_BASE_INLINE_BORDEREDWIDGET_TOP_PADDING + @GENERIC_BASE_INLINE_BORDEREDWIDGET_BOTTOM_PADDING + 2 * @GENERIC_BASE_BORDER_WIDTH;
@GENERIC_TREEVIEW_TOGGLE_ITEM_VISIBILITY_OFFSET: -4px;

.dx-treeview-node-loadindicator {
    top: @GENERIC_TREEVIEW_LOADINCICATOR_OFFSET_TOP;
    left: @GENERIC_TREEVIEW_LOADINCICATOR_OFFSET_LEFT;
    width: @GENERIC_TREEVIEW_LOADINCICATOR_SIZE;
    height: @GENERIC_TREEVIEW_LOADINCICATOR_SIZE;
}

.dx-treeview {
    &.dx-rtl {
        .dx-treeview-make-rtl(@GENERIC_TREEVIEW_CONTAINER_WITH_BORDER_OFFSET, @GENERIC_TREEVIEW_NODE_OFFSET, @GENERIC_TREEVIEW_ITEM_WITH_CHECKBOX_OFFSET, @GENERIC_TREEVIEW_CHECKBOX_OFFSET, @GENERIC_SELECT_ALL_TEXT_OFFSET, @GENERIC_SELECT_ALL_ITEM_LEFT_PADDING, @GENERIC_TREEVIEW_BORDER_PADDING);

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

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


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

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

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

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

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

.dx-treeview-select-all-item {
    margin: 0 0 @GENERIC_TREEVIEW_CONTAINER_WITH_BORDER_OFFSET 0;
    border-bottom: 1px solid @treeview-border-color;
    padding: @GENERIC_SELECT_ALL_ITEM_PADDING;

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

.dx-treeview-node {
    padding-left: @GENERIC_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: @GENERIC_TREEVIEW_ITEM_WITH_CHECKBOX_OFFSET;
    }

    .dx-checkbox {
        top: 5px;
        left: @GENERIC_TREEVIEW_CHECKBOX_OFFSET;
    }

    &.dx-state-focused {
        > .dx-checkbox .dx-checkbox-icon {
            border: 1px solid @checkbox-focused-borderd-color;
        }
    }
}

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

        &:not(.dx-state-focused) {
            > .dx-treeview-item {
                &.dx-state-hover {
                    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: @GENERIC_TREEVIEW_ITEM_PADDING;
    min-height: @GENERIC_TREEVIEW_MIN_ITEM_HEIGHT;

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

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

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

    color: @treeview-spin-icon-color;
    width: @GENERIC_TREEVIEW_TOGGLE_ITEM_WIDTH;
    height: @GENERIC_TREEVIEW_MIN_ITEM_HEIGHT;
    top: 0;
    left: @GENERIC_TREEVIEW_TOGGLE_ITEM_VISIBILITY_OFFSET;

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