devextreme/less/sources/widgets/material/dropDownEditor.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/dropDownEditor.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) "./textBox.material.less";
@import (once) "./dropDownButton.material.less";
@import (once) "./popup.material.less";

@MATERIAL_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE: @MATERIAL_BASE_ICON_SIZE;

@MATERIAL_DROPDOWNEDITOR_INVALID_BADGE_OFFSET:
    @MATERIAL_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE +
    @MATERIAL_INVALID_BADGE_HALFHORIZONTAL_PADDING;

@MATERIAL_DROPDOWNEDITOR_INVALID_BADGE_WITH_CLEAR_OFFSET:
    @MATERIAL_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE * 2 +
    @MATERIAL_INVALID_BADGE_HALFHORIZONTAL_PADDING;

@MATERIAL_DROPDOWNEDITOR_INVALID_BADGE_SIZE: @MATERIAL_INVALID_BADGE_SIZE + @MATERIAL_INVALID_BADGE_HORIZONTAL_PADDING;

.dx-dropdowneditor-button-icon() {
    width: @MATERIAL_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE;
    height: 100%;

    .dx-icon-font-centered-sizing(@MATERIAL_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE);
}

.dx-dropdowneditor-button {
    width: @MATERIAL_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE;
    min-width: @MATERIAL_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE;

    .dx-state-disabled & {
        .dx-dropdowneditor-icon {
            opacity: 1;
        }
    }

    .dx-state-readonly & {
        .dx-dropdowneditor-icon {
            opacity: 1;
        }
    }
}

.dx-dropdowneditor-icon {
    color: @dropdowneditor-icon-color;
    .dx-icon(spindown);
    .dx-dropdowneditor-button-icon();
}

.dx-dropdowneditor-input-wrapper {
    .dx-texteditor {
        &: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;
            box-shadow: none;
        }
    }
}

.invalid-dropdowneditor-input-padding() {
    &.dx-dropdowneditor-button-visible {
        &.dx-editor-underlined {
            .dx-texteditor-input {
                padding-right: @MATERIAL_DROPDOWNEDITOR_INVALID_BADGE_SIZE + @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }

            &.dx-rtl .dx-texteditor-input {
                padding-right: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                padding-left: @MATERIAL_DROPDOWNEDITOR_INVALID_BADGE_SIZE + @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }

        &.dx-editor-filled,
        &.dx-editor-outlined {
            .dx-texteditor-input {
                padding-right: @MATERIAL_DROPDOWNEDITOR_INVALID_BADGE_SIZE + @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }

            &.dx-rtl .dx-texteditor-input {
                padding-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                padding-left: @MATERIAL_DROPDOWNEDITOR_INVALID_BADGE_SIZE + @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }
    }
}

.dx-invalid,
.dx-valid,
.dx-validation-pending {
    .invalid-dropdowneditor-input-padding();
}

.dx-dropdowneditor.dx-dropdowneditor-active,
.dx-dropdowneditor-button.dx-state-active {
    .dx-dropdowneditor-icon {
        color: @dropdowneditor-icon-active-color;
        opacity: 1;
        .dx-icon(spinup);
        .dx-dropdowneditor-button-icon();
    }
}

.dx-invalid.dx-dropdowneditor,
.dx-valid.dx-dropdowneditor {
    .dx-texteditor-buttons-container {
        &:after {
            right: @MATERIAL_DROPDOWNEDITOR_INVALID_BADGE_OFFSET;

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

    &.dx-show-clear-button:not(.dx-texteditor-empty) {
        .dx-texteditor-buttons-container {
            &:after {
                right: @MATERIAL_DROPDOWNEDITOR_INVALID_BADGE_WITH_CLEAR_OFFSET;

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

.dx-dropdowneditor-overlay.dx-popup-wrapper {
    .dx-overlay-content {
        box-shadow: @dropdown-widgets-shadow;
        overflow: hidden;
    }
}