devextreme/less/sources/widgets/material/treeList.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/treeList.material.less)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "../base/treeList.less";
@import (once) "./gridBase.material.less";

.grid-base(treelist);

@TREELIST_EMPTY_SPACE_WIDTH: 24px;
@TREELIST_CHECKBOX_OFFSET_LEFT: @TREELIST_EMPTY_SPACE_WIDTH + @MATERIAL_GRID_BASE_CELL_FIRST_COLUMN_PADDING;
@TREELIST_CHECKBOX_OFFSET_LEFT_RTL: @TREELIST_CHECKBOX_OFFSET_LEFT + @MATERIAL_GRID_BASE_CHECKBOX_SIZE;
@TREELIST_EDITOR_CELL_PADDING_LEFT: @TREELIST_CHECKBOX_OFFSET_LEFT_RTL + @MATERIAL_GRID_BASE_CELL_HORIZONTAL_PADDING;
@TREELIST_ICON_CONTAINER_PADDING_RIGHT: @MATERIAL_GRID_BASE_CHECKBOX_SIZE + @MATERIAL_GRID_BASE_CELL_HORIZONTAL_PADDING;

.dx-treelist-rowsview {
    .dx-treelist-empty-space {
        position: relative;
        top: -2px;
        display: inline-block;
        .dx-icon(chevronup);

        width: @TREELIST_EMPTY_SPACE_WIDTH;

        &:before {
            visibility: hidden;
        }
    }

    tr:not(.dx-row-focused) .dx-treelist-empty-space {
        color: @treelist-chevron-icon-color;
    }

    .dx-treelist-expanded span {
        .dx-icon(chevrondown);
        .dx-icon-font-centered-sizing(@MATERIAL_BASE_ICON_SIZE);

        cursor: pointer;

        &:before {
            left: 0;
            margin-left: -@TREELIST_EXPANDED_ICON_MARGIN_LEFT;
            margin-top: -@TREELIST_ICON_MARGIN_TOP;
        }
    }

    .dx-treelist-collapsed span {
        .dx-icon(chevronright);
        .dx-icon-font-centered-sizing(@MATERIAL_BASE_ICON_SIZE);

        cursor: pointer;

        &:before {
            left: 0;
            margin-left: -@TREELIST_COLLAPSED_ICON_MARGIN_LEFT;
            margin-top: -@TREELIST_ICON_MARGIN_TOP;
        }
    }

    .dx-sort-up,
    .dx-sort-down,
    .dx-header-filter {
        vertical-align: middle;
    }

    tr:not(.dx-row-focused).dx-selection {
        .dx-treelist-empty-space {
            color: @treelist-selection-chevron-icon-color;
        }
    }

    .dx-treelist-cell-expandable {
        white-space: nowrap;

        .dx-treelist-text-content {
            white-space: normal;
        }
    }

    &.dx-treelist-nowrap .dx-treelist-table {
        .dx-treelist-cell-expandable {
            .dx-treelist-text-content {
                white-space: nowrap;
            }
        }
    }
}

.dx-treelist-checkbox-size {
    line-height: 0;
}

.dx-treelist-cell-expandable,
.dx-treelist-select-all {
    .dx-checkbox {
        position: absolute;
    }
}

.dx-treelist-icon-container {
    max-height: @MATERIAL_GRID_BASE_CELL_LINE_HEIGHT;

    &.dx-editor-inline-block {
        position: relative;
        padding-right: @TREELIST_ICON_CONTAINER_PADDING_RIGHT;

        .dx-checkbox {
            top: 50%;
            margin-top: -@MATERIAL_GRID_BASE_CHECKBOX_SIZE/2;
        }
    }
}

.dx-treelist-select-all {
    position: relative;

    .dx-checkbox {
        left: @TREELIST_CHECKBOX_OFFSET_LEFT;
        top: (@MATERIAL_GRID_BASE_HEADER_HEIGHT - @MATERIAL_GRID_BASE_CHECKBOX_SIZE)/2;
    }
}

.dx-treelist .dx-treelist-headers .dx-treelist-content .dx-treelist-table .dx-header-row > .dx-treelist-select-all {
    padding-left: @TREELIST_EDITOR_CELL_PADDING_LEFT;
}

.dx-rtl {
    .dx-treelist-rowsview {
        .dx-treelist-expanded,
        .dx-treelist-collapsed {
            .flip-horizontally();
        }

        .dx-treelist-table-fixed {
            .dx-treelist-icon-container {
                float: right;
            }
        }
    }

    .dx-treelist-select-all .dx-checkbox {
        left: calc(100% - @TREELIST_CHECKBOX_OFFSET_LEFT_RTL);
    }

    &.dx-treelist .dx-treelist-headers .dx-treelist-content .dx-treelist-table .dx-header-row > .dx-treelist-select-all {
        padding-right: @TREELIST_EDITOR_CELL_PADDING_LEFT;
        padding-left: @MATERIAL_GRID_BASE_CELL_HORIZONTAL_PADDING;
    }

    .dx-treelist-icon-container.dx-editor-inline-block {
        padding-left: @TREELIST_ICON_CONTAINER_PADDING_RIGHT;
        padding-right: 0;
    }
}