devextreme/less/sources/widgets/material/filterBuilder.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/filterBuilder.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/filterBuilder.less";
@import (once) "./treeView.material.less";
@import (once) "./popup.material.less";
@import (once) "./textBox.material.less";
@import (once) "./numberBox.material.less";
@import (once) "./checkBox.material.less";
@import (once) "./selectBox.material.less";
@import (once) "./dateBox.material.less";

.dx-size-default() {
    @MATERIAL_FILTERBUILDER_ICON_PADDING: 8px;
    @MATERIAL_FILTERBUILDER_FILLED_EDITOR_PADDING: 13px 12px;
    @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING: 24px;
    @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_PADDING: 8px @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING 10px;
    @MATERIAL_FILTERBUILDER_TREEVIEW_TOGGLE_LEFT: 16px;
    @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_MIN_HEIGTH: 36px;
}

.dx-size-compact() {
    @MATERIAL_FILTERBUILDER_ICON_PADDING: 4px;
    @MATERIAL_FILTERBUILDER_FILLED_EDITOR_PADDING: 8px 8px;
    @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING: 8px;
    @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_PADDING: 4px @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING 5px;
    @MATERIAL_FILTERBUILDER_TREEVIEW_TOGGLE_LEFT: 0;
    @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_MIN_HEIGTH: 26px;
}


.dx-filterbuilder {
    .dx-filterbuilder-action-icon {
        font-size: 21px;
    }

    .dx-filterbuilder-group {
        .dx-filterbuilder-group-item {
            .dx-filterbuilder-action.dx-filterbuilder-action-icon {
                padding: @MATERIAL_FILTERBUILDER_ICON_PADDING;
                vertical-align: middle;
            }
        }
    }

    .dx-filterbuilder-item-value {
        .dx-editor-filled,
        .dx-editor-outlined {
            .dx-texteditor-input {
                padding: @MATERIAL_FILTERBUILDER_FILLED_EDITOR_PADDING;
            }
        }
    }

    .dx-filterbuilder-text,
    .dx-filterbuilder-item-value-text {
        border-radius: 5px;
    }
}

.dx-filterbuilder-range-separator {
    color: @texteditor-color;
}

.dx-filterbuilder-overlay {
    &.dx-popup-wrapper > .dx-overlay-content {
        box-shadow: @dropdown-widgets-shadow;
    }

    &.dx-filterbuilder-operations {
        .dx-treeview-item {
            padding-left: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING;
        }

        .dx-rtl {
            .dx-treeview-item {
                padding-right: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING;
            }
        }
    }

    .dx-treeview-node {
        > .dx-treeview-item {
            padding-left: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING * 2;
        }

        &.dx-treeview-node-is-leaf > .dx-treeview-item {
            padding-left: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING;
        }

        .dx-treeview-node-container-opened {
            margin-left: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING;
        }
    }

    .dx-treeview-item {
        padding: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_PADDING;
        min-height: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_MIN_HEIGTH;

        .dx-icon {
            margin-right: 10px;
        }
    }

    .dx-treeview-toggle-item-visibility {
        height: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_MIN_HEIGTH;
        left: @MATERIAL_FILTERBUILDER_TREEVIEW_TOGGLE_LEFT;
    }

    .dx-rtl {
        .dx-treeview-node {
            > .dx-treeview-item {
                padding-right: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING * 2;
            }

            &.dx-treeview-node-is-leaf > .dx-treeview-item {
                padding-right: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING;
            }

            .dx-treeview-node-container-opened {
                margin-right: @MATERIAL_FILTERBUILDER_TREEVIEW_ITEM_LEFT_PADDING;
                margin-left: 0;
            }
        }

        .dx-treeview-item {
            .dx-icon {
                margin-left: 10px;
            }
        }

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