devextreme/less/sources/widgets/generic/lookup.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-size-default() {
    @GENERIC_LOOKUP_HEIGHT: 36px;
    @GENERIC_LOOKUP_POPUP_CONTENT_TOP: 49px;
    @GENERIC_LOOKUP_POPUP_CONTENT_PADDING: 20px;
    @GENERIC_LOOKUP_LIST_TOP: 70px;

    @GENERIC_LOOKUP_ARROW_MARGIN: -6px;
    @GENERIC_LOOKUP_ARROW_RIGHT: 10px;
    @GENERIC_LOOKUP_ARROW_LEFT: 16px;

    @GENERIC_LOOKUP_INVALID_MESSAGE_FONT_SIZE: 14px;
    @GENERIC_LOOKUP_INVALID_MESSAGE_PADDING_HORIZONTAL: 20px;
    @GENERIC_LOOKUP_INVALID_MESSAGE_PADDING_TOP: 13px;
    @GENERIC_LOOKUP_INVALID_MESSAGE_PADDING_BOTTOM: 12px;
    @GENERIC_LOOKUP_INVALID_MESSAGE_MARGIN_BOTTOM: 20px;
}
.dx-size-compact() {
    @GENERIC_LOOKUP_HEIGHT: 26px;
    @GENERIC_LOOKUP_POPUP_CONTENT_TOP: 36px;
    @GENERIC_LOOKUP_POPUP_CONTENT_PADDING: 10px;
    @GENERIC_LOOKUP_LIST_TOP: 40px;

    @GENERIC_LOOKUP_ARROW_MARGIN: -5px;
    @GENERIC_LOOKUP_ARROW_RIGHT: 5px;
    @GENERIC_LOOKUP_ARROW_LEFT: 11px;

    @GENERIC_LOOKUP_INVALID_MESSAGE_FONT_SIZE: 12px;
    @GENERIC_LOOKUP_INVALID_MESSAGE_PADDING_HORIZONTAL: 10px;
    @GENERIC_LOOKUP_INVALID_MESSAGE_PADDING_TOP: 7px;
    @GENERIC_LOOKUP_INVALID_MESSAGE_PADDING_BOTTOM: 10px;
    @GENERIC_LOOKUP_INVALID_MESSAGE_MARGIN_BOTTOM: 10px;
}
@GENERIC_LOOKUP_FIELD_PADDING:
    @GENERIC_BASE_INLINE_BORDEREDWIDGET_TOP_PADDING
    @GENERIC_BASE_INLINE_BORDEREDWIDGET_INNER_SIZE
    @GENERIC_BASE_INLINE_BORDEREDWIDGET_BOTTOM_PADDING
    @GENERIC_BASE_INLINE_BORDEREDWIDGET_HORIZONTAL_PADDING;
@GENERIC_LOOKUP_FIELD_PADDING_RTL:
    @GENERIC_BASE_INLINE_BORDEREDWIDGET_TOP_PADDING
    @GENERIC_BASE_INLINE_BORDEREDWIDGET_HORIZONTAL_PADDING
    @GENERIC_BASE_INLINE_BORDEREDWIDGET_BOTTOM_PADDING
    @GENERIC_BASE_INLINE_BORDEREDWIDGET_INNER_SIZE;


.dx-lookup {
    height: @GENERIC_LOOKUP_HEIGHT;
    border: 1px solid @texteditor-border-color;
    background: @texteditor-bg;

    &.dx-editor-underlined {
        background: @texteditor-underlined-bg;
    }
}

.dx-lookup-field {
    padding: @GENERIC_LOOKUP_FIELD_PADDING;
    font-size: 1em;

    .dx-rtl & {
        padding: @GENERIC_LOOKUP_FIELD_PADDING_RTL;
    }
}

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

    width: @GENERIC_BASE_INLINE_BORDEREDWIDGET_INNER_SIZE;
    color: @lookup-icon-color;
    .dx-icon-font-centered-sizing(@GENERIC_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-list-item-content {
        padding-left: @GENERIC_LOOKUP_POPUP_CONTENT_PADDING;
        padding-right: @GENERIC_LOOKUP_POPUP_CONTENT_PADDING;
    }

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

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

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

.lookup-badge-offset() {
    right: @GENERIC_DROPDOWNEDITOR_INVALID_BADGE_OFFSET;

    .dx-rtl&,
    .dx-rtl & {
        right: auto;
        left: @GENERIC_DROPDOWNEDITOR_INVALID_BADGE_OFFSET;
    }
}

.dx-invalid.dx-lookup .dx-lookup-field:after {
    .lookup-badge-offset();
    .dx-invalid-generic-badge();
}

.dx-valid.dx-lookup .dx-lookup-field:after {
    .lookup-badge-offset();
    .dx-valid-generic-badge();
}

.dx-validation-pending.dx-lookup .dx-lookup-field-wrapper .dx-pending-indicator {
    .lookup-badge-offset();
    .dx-pending-indicator-generic();
}

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

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