devextreme/less/sources/widgets/base/filterBuilder.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/base/filterBuilder.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/
*/
.dx-filterbuilder {
    background-color: @filterbuilder-bg;

    .button-color(@color, @hoverColor, @focusColor) {
        background-color: @color;

        &:hover {
            background-color: @hoverColor;
        }

        &:focus,
        &.dx-state-active {
            background-color: @focusColor;
            color: @filterbuilder-text-focus-color;
        }
    }

    .dx-filterbuilder-group {
        .dx-filterbuilder-text {
            color: @filterbuilder-text-color;

            &.dx-filterbuilder-group-operation {
                .button-color(@filterbuilder-group-operation-color, @filterbuilder-group-operation-hover-color, @filterbuilder-group-operation-focus-color);
            }

            &.dx-filterbuilder-item-field {
                .button-color(@filterbuilder-item-field-color, @filterbuilder-item-field-hover-color, @filterbuilder-item-field-focus-color);
            }

            &.dx-filterbuilder-item-operation {
                .button-color(@filterbuilder-item-operator-color, @filterbuilder-item-operator-hover-color, @filterbuilder-item-operator-focus-color);
            }

            .dx-filterbuilder-item-value-text {
                .button-color(@filterbuilder-item-value-color, @filterbuilder-item-value-hover-color, @filterbuilder-item-value-focus-color);
            }
        }

        .dx-icon-plus {
            color: @filterbuilder-plus-icon-color;

            &:hover {
                color: @filterbuilder-plus-icon-hover-color;
            }

            &:focus,
            &.dx-state-active {
                color: @filterbuilder-plus-icon-focus-color;
            }
        }

        .dx-icon-remove {
            color: @filterbuilder-remove-icon-color;

            &:hover {
                color: @filterbuilder-remove-icon-hover-color;
            }

            &:focus {
                color: @filterbuilder-remove-icon-focus-color;
            }
        }
    }
}

.dx-filterbuilder-overlay.dx-filterbuilder-operations {
    .dx-treeview-item {
        .dx-icon {
            color: @filterbuilder-menu-icon-color;
            .dx-icon-sizing(14px);
        }
    }
}