devextreme/less/sources/widgets/ios7/treeList.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/ios7/treeList.ios7.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/treeList.less";
@import (once) "./gridBase.ios7.less";

.grid-base(treelist);

@TREELIST_COLLAPSED_ICON_MARGIN_LEFT: 6px;
@TREELIST_EXPANDED_ICON_MARGIN_LEFT: 2px;
@TREELIST_ICON_MARGIN_TOP: @GRID_BASE_GROUP_COLUMN_ICONS_SIZE/2;
@TREELIST_EMPTY_SPACE_WIDTH: 14px;
@TREELIST_EMPTY_SPACE_MARGIN_RIGHT: 11px;
@TREELIST_SELECT_ALL_CHECKBOX_MARGIN_TOP: 2px;
@TREELIST_CHECKBOX_OFFSET_LEFT: @TREELIST_EMPTY_SPACE_WIDTH + @GRID_BASE_CELL_PADDING + @TREELIST_EMPTY_SPACE_MARGIN_RIGHT;
@TREELIST_CHECKBOX_OFFSET_LEFT_RTL: @TREELIST_CHECKBOX_OFFSET_LEFT + @GRID_BASE_CHECKBOX_ICON_SIZE;
@TREELIST_EDITOR_CELL_PADDING_LEFT: @TREELIST_CHECKBOX_OFFSET_LEFT_RTL + @GRID_BASE_CELL_PADDING;
@TREELIST_ICON_CONTAINER_PADDING_RIGHT: @GRID_BASE_CHECKBOX_ICON_SIZE + @GRID_BASE_CELL_PADDING;

.dx-treelist-rowsview {
    .dx-treelist-empty-space {
        .dx-icon(spinright);

        position: relative;
        display: inline-block;
        width: @TREELIST_EMPTY_SPACE_WIDTH;
        margin-right: @TREELIST_EMPTY_SPACE_MARGIN_RIGHT;

        &:before {
            visibility: hidden;
        }
    }

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

        font-size: 0;
        line-height: 0;
        color: #9a9a9a;
        cursor: pointer;

        &:before {
            left: 0;
            margin-left: -@TREELIST_EXPANDED_ICON_MARGIN_LEFT;
            margin-top: -@TREELIST_ICON_MARGIN_TOP;
            font-size: @GRID_BASE_GROUP_COLUMN_ICONS_SIZE;
            line-height: @GRID_BASE_GROUP_COLUMN_ICONS_SIZE;
        }
    }

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

        font-size: 0;
        line-height: 0;
        color: #9a9a9a;
        cursor: pointer;

        &:before {
            left: 0;
            margin-left: -@TREELIST_COLLAPSED_ICON_MARGIN_LEFT;
            margin-top: -@TREELIST_ICON_MARGIN_TOP;
            font-size: @GRID_BASE_GROUP_COLUMN_ICONS_SIZE;
            line-height: @GRID_BASE_GROUP_COLUMN_ICONS_SIZE;
        }
    }

    .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-icon-container.dx-editor-inline-block {
    position: relative;
    padding-right: @TREELIST_ICON_CONTAINER_PADDING_RIGHT;

    .dx-checkbox {
        position: absolute;
        top: 50%;
        margin-top: -@GRID_BASE_CHECKBOX_ICON_SIZE/2;
    }
}

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

    .dx-checkbox {
        position: absolute;
        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-empty-space {
            margin-left: @TREELIST_EMPTY_SPACE_MARGIN_RIGHT;
            margin-right: 0;
        }

        .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: @GRID_BASE_CELL_PADDING;
    }

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