devextreme/less/sources/widgets/material/lookup.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/lookup.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) "./dropDownList.material.less";
@import (once) "./popover.material.less";
@import (once) "./textBox.material.less";

.dx-size-default() {
    @MATERIAL_FILLED_LOOKUP_HEIGHT: 56px;
    @MATERIAL_STANDARD_LOOKUP_HEIGHT: 32px;
    @MATERIAL_LOOKUP_FONT_SIZE: 16px;
    @MATERIAL_LOOKUP_POPUP_CONTENT_TOP: 49px;
    @MATERIAL_LOOKUP_POPUP_CONTENT_PADDING: 20px;
    @MATERIAL_LOOKUP_LIST_TOP: 66px;

    @MATERIAL_LOOKUP_ARROW_MARGIN: -6px;
    @MATERIAL_LOOKUP_ARROW_RIGHT: 10px;
    @MATERIAL_LOOKUP_ARROW_LEFT: 16px;

    @MATERIAL_LOOKUP_INVALID_MESSAGE_FONT_SIZE: 14px;
    @MATERIAL_LOOKUP_INVALID_MESSAGE_PADDING_HORIZONTAL: 20px;
    @MATERIAL_LOOKUP_INVALID_MESSAGE_PADDING_TOP: 13px;
    @MATERIAL_LOOKUP_INVALID_MESSAGE_PADDING_BOTTOM: 12px;
    @MATERIAL_LOOKUP_INVALID_MESSAGE_MARGIN_BOTTOM: 20px;
}
.dx-size-compact() {
    @MATERIAL_FILLED_LOOKUP_HEIGHT: 40px;
    @MATERIAL_STANDARD_LOOKUP_HEIGHT: 26px;
    @MATERIAL_LOOKUP_FONT_SIZE: 13px;
    @MATERIAL_LOOKUP_POPUP_CONTENT_TOP: 49px;
    @MATERIAL_LOOKUP_POPUP_CONTENT_PADDING: 8px;
    @MATERIAL_LOOKUP_LIST_TOP: 36px;

    @MATERIAL_LOOKUP_ARROW_MARGIN: -6px;
    @MATERIAL_LOOKUP_ARROW_RIGHT: 10px;
    @MATERIAL_LOOKUP_ARROW_LEFT: 16px;

    @MATERIAL_LOOKUP_INVALID_MESSAGE_FONT_SIZE: 14px;
    @MATERIAL_LOOKUP_INVALID_MESSAGE_PADDING_HORIZONTAL: 20px;
    @MATERIAL_LOOKUP_INVALID_MESSAGE_PADDING_TOP: 13px;
    @MATERIAL_LOOKUP_INVALID_MESSAGE_PADDING_BOTTOM: 12px;
    @MATERIAL_LOOKUP_INVALID_MESSAGE_MARGIN_BOTTOM: 20px;
}

.dx-lookup {
    &.dx-editor-filled,
    &.dx-editor-outlined {
        height: @MATERIAL_FILLED_LOOKUP_HEIGHT;

        .dx-lookup-field {
            padding: @MATERIAL_FILLED_TEXTEDITOR_INPUT_PADDING;
            padding-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + @MATERIAL_BASE_ICON_SIZE;
        }

        .dx-lookup-arrow {
            right: @MATERIAL_BASE_ICON_SIZE / 2;
        }

        &.dx-invalid {
            .dx-lookup-field {
                padding-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + @MATERIAL_BASE_ICON_SIZE * 2;
            }

            &.dx-rtl {
                .dx-lookup-field {
                    padding-left: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + @MATERIAL_BASE_ICON_SIZE * 2;
                    padding-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                }
            }
        }

        &.dx-rtl,
        .dx-rtl & {
            .dx-lookup-arrow {
                left: @MATERIAL_BASE_ICON_SIZE / 2;
                right: auto;
            }

            .dx-lookup-field {
                padding-left: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + @MATERIAL_BASE_ICON_SIZE;
                padding-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }
    }

    &.dx-editor-underlined {
        height: @MATERIAL_STANDARD_LOOKUP_HEIGHT;

        .dx-lookup-field {
            padding: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_PADDING;
            padding-right: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + @MATERIAL_BASE_ICON_SIZE;
        }

        &.dx-invalid {
            .dx-lookup-field {
                padding-right: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + @MATERIAL_BASE_ICON_SIZE * 2;
            }

            &.dx-rtl {
                .dx-lookup-field {
                    padding-left: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + @MATERIAL_BASE_ICON_SIZE * 2;
                    padding-right: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                }
            }
        }

        &.dx-rtl,
        .dx-rtl & {
            .dx-lookup-field {
                padding-left: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING + @MATERIAL_BASE_ICON_SIZE;
                padding-right: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }
    }

    &.dx-invalid {
        border-bottom-color: @base-invalid-faded-border-color;

        .dx-lookup-arrow:after {
            .dx-invalid-material-badge();

            right: @MATERIAL_BASE_ICON_SIZE;
        }

        &.dx-rtl,
        .dx-rtl & {
            .dx-lookup-arrow:after {
                left: @MATERIAL_BASE_ICON_SIZE;
                right: auto;
            }
        }
    }

    &.dx-valid {
        .dx-lookup-arrow:after {
            .dx-valid-material-badge();

            right: @MATERIAL_BASE_ICON_SIZE;
        }

        &.dx-rtl,
        .dx-rtl & {
            .dx-lookup-arrow:after {
                left: @MATERIAL_BASE_ICON_SIZE;
                right: auto;
            }
        }
    }

    &.dx-validation-pending {
        .dx-lookup-field-wrapper {
            .dx-pending-indicator {
                .dx-pending-indicator-material();

                right: @MATERIAL_BASE_ICON_SIZE;
            }
        }

        &.dx-rtl,
        .dx-rtl & {
            .dx-lookup-field-wrapper {
                .dx-pending-indicator {
                    left: @MATERIAL_BASE_ICON_SIZE;
                    right: auto;
                }
            }
        }
    }
}

.dx-lookup-field {
    font-size: @MATERIAL_LOOKUP_FONT_SIZE;

    .dx-texteditor {
        border: none;

        &:before,
        &:after {
            content: none;
        }

        &.dx-state-hover,
        &.dx-state-focused,
        &.dx-state-active,
        &.dx-state-disabled,
        &.dx-state-readonly,
        &.dx-state-readonly.dx-state-hover,
        & {
            background-color: transparent;
        }
    }
}

.dx-lookup-arrow {
    .dx-icon(spindown);

    width: @MATERIAL_BASE_ICON_SIZE;
    color: @lookup-icon-color;
    .dx-icon-font-centered-sizing(@MATERIAL_BASE_ICON_SIZE);
}

.dx-state-readonly .dx-lookup-field:before {
    opacity: 0.5;
}

.dx-lookup-popup-wrapper {
    .dx-list-item {
        border-top: none;

        &:last-of-type {
            border-bottom: none;
        }
    }

    .dx-popup-content {
        top: 0;
        padding: 0;
    }

    .dx-popup-title + .dx-popup-content {
        top: @MATERIAL_LOOKUP_POPUP_CONTENT_TOP;
    }
}

.dx-lookup-empty {
    .dx-lookup-field {
        color: @texteditor-placeholder-color;
    }
}

.dx-lookup-popup-search .dx-list {
    height: calc(100% - @MATERIAL_LOOKUP_LIST_TOP);
}

.dx-lookup-search-wrapper {
    padding: @MATERIAL_LOOKUP_POPUP_CONTENT_PADDING;
    padding-bottom: @MATERIAL_LOOKUP_POPUP_CONTENT_PADDING - 6px;
}