devextreme/less/sources/widgets/generic/treeList.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/treeList.generic.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.generic.less";

.grid-base(treelist);

@TREELIST_EMPTY_SPACE_WIDTH: 14px;
@TREELIST_SELECT_ALL_CHECKBOX_MARGIN_TOP: floor((round(@GENERIC_BASE_LINE_HEIGHT*@GENERIC_BASE_FONT_SIZE) - @GENERIC_GRID_BASE_CHECKBOX_ICON_SIZE)/2);
@TREELIST_CHECKBOX_OFFSET_LEFT: @TREELIST_EMPTY_SPACE_WIDTH + @GENERIC_GRID_BASE_CELL_PADDING;
@TREELIST_CHECKBOX_OFFSET_LEFT_RTL: @TREELIST_CHECKBOX_OFFSET_LEFT + @GENERIC_GRID_BASE_CHECKBOX_ICON_SIZE;
@TREELIST_EDITOR_CELL_PADDING_LEFT: @TREELIST_CHECKBOX_OFFSET_LEFT_RTL + @GENERIC_GRID_BASE_CELL_PADDING;
@TREELIST_ICON_CONTAINER_PADDING_RIGHT: @GENERIC_GRID_BASE_CHECKBOX_ICON_SIZE + @GENERIC_GRID_BASE_CELL_PADDING;

.dx-treelist-rowsview {
    .dx-treelist-empty-space {
        position: relative;
        display: inline-block;
        width: @TREELIST_EMPTY_SPACE_WIDTH;
        .dx-icon(spinright);

        &:before {
            visibility: hidden;
        }
    }

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

    .dx-treelist-expanded span {
        .dx-icon(spindown);
        .dx-icon-font-centered-sizing(@GENERIC_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(spinright);
        .dx-icon-font-centered-sizing(@GENERIC_BASE_ICON_SIZE);

        cursor: pointer;

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

    tr:not(.dx-row-focused).dx-selection {
        .dx-treelist-empty-space {
            color: @treelist-selection-spin-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.dx-editor-inline-block {
    position: relative;
    padding-right: @TREELIST_ICON_CONTAINER_PADDING_RIGHT;

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

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

    .dx-checkbox {
        left: @TREELIST_CHECKBOX_OFFSET_LEFT;
        margin-top: @TREELIST_SELECT_ALL_CHECKBOX_MARGIN_TOP;
    }
}

.dx-treelist-headers .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-headers .dx-header-row > .dx-treelist-select-all {
        padding-right: @TREELIST_EDITOR_CELL_PADDING_LEFT;
        padding-left: @GENERIC_GRID_BASE_CELL_PADDING;
    }

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

.dx-treelist-filter-panel {
    .dx-icon-filter,
    .dx-treelist-filter-panel-text,
    .dx-treelist-filter-panel-clear-filter {
        color: @base-accent;
    }
}