devextreme/less/sources/widgets/generic/dropDownEditor.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

@GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE: @GENERIC_BASE_INLINE_BORDEREDWIDGET_INNER_SIZE;
@GENERIC_DROPDOWNEDITOR_BUTTON_OFFSET: @GENERIC_BASE_BORDER_WIDTH;

@GENERIC_DROPDOWNEDITOR_BUTTON_SIZE:
    @GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE -
    @GENERIC_DROPDOWNEDITOR_BUTTON_OFFSET * 2;

@GENERIC_DROPDOWNEDITOR_INVALID_BADGE_OFFSET:
    @GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE +
    @GENERIC_INVALID_BADGE_HALFHORIZONTAL_PADDING;


@GENERIC_DROPDOWNEDITOR_INVALID_BADGE_WITH_CLEAR_OFFSET:
    @GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE * 2;


@GENERIC_DROPDOWNEDITOR_INVALID_BADGE_SIZE: @GENERIC_INVALID_BADGE_SIZE + @GENERIC_INVALID_BADGE_HORIZONTAL_PADDING;


.dx-dropdowneditor-button-icon() {
    width: @GENERIC_DROPDOWNEDITOR_BUTTON_SIZE;
    height: 100%;
    .dx-icon-font-centered-sizing(@GENERIC_BASE_ICON_SIZE);

    border-radius: @dropdowneditor-icon-border-radius;
}

.dx-dropdowneditor-button {
    width: @GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE;
    min-width: @GENERIC_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE;
    padding: @GENERIC_DROPDOWNEDITOR_BUTTON_OFFSET;
    border-radius: @button-border-radius;

    &.dx-button-mode-outlined,
    &.dx-button-mode-contained,
    &.dx-button-mode-text {
        background: transparent;
    }

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

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

.dx-dropdowneditor-icon {
    border: @GENERIC_BASE_BORDER_WIDTH solid transparent;
    color: @dropdowneditor-icon-color;
    .dx-icon(spindown);
    .dx-dropdowneditor-button-icon();
}

.dx-dropdowneditor-input-wrapper {
    .dx-texteditor {
        &.dx-editor-outlined,
        &.dx-editor-filled,
        &.dx-editor-underlined {
            border: none;
            background: transparent;
        }
    }
}

.dx-dropdowneditor-button-visible {
    .dx-texteditor-input {
        padding-right: 0;
    }
}

.dx-rtl {
    .dx-dropdowneditor-button-visible,
    &.dx-dropdowneditor-button-visible {
        .dx-texteditor-input {
            padding-right: @GENERIC_BASE_INLINE_BORDEREDWIDGET_HORIZONTAL_PADDING;
            padding-left: 0;
        }

        &.dx-editor-underlined {
            .dx-texteditor-input {
                padding-right: 0;
            }
        }
    }
}

.invalid-dropdowneditor-input-padding() {
    .dx-texteditor-input {
        padding-right: @GENERIC_DROPDOWNEDITOR_INVALID_BADGE_SIZE;
    }

    &.dx-rtl {
        .dx-texteditor-input {
            padding-right: @GENERIC_BASE_INLINE_BORDEREDWIDGET_HORIZONTAL_PADDING;
            padding-left: @GENERIC_DROPDOWNEDITOR_INVALID_BADGE_SIZE;
        }
    }
}

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

.dx-dropdowneditor {
    &.dx-state-hover:not(.dx-custom-button-hovered),
    &.dx-state-active {
        .dx-dropdowneditor-icon {
            background-color: @dropdowneditor-button-hover-bg;
            border-color: @dropdowneditor-button-hover-border-color;

            .dx-editor-filled& {
                background-color: @dropdowneditor-filled-button-hover-bg;
            }
        }
    }
}

.dx-dropdowneditor.dx-dropdowneditor-active,
.dx-dropdowneditor-button.dx-state-active {
    .dx-dropdowneditor-icon {
        background-color: @dropdowneditor-button-active-bg;
        border-color: @dropdowneditor-button-active-border-color;
        color: @dropdowneditor-icon-active-color;
        opacity: 1;

        .dx-editor-filled&,
        .dx-editor-filled & {
            background-color: @dropdowneditor-filled-button-active-bg;
        }
    }
}

.texteditor-container-offset() {
    .dx-texteditor-container {
        &:after {
            right: @GENERIC_DROPDOWNEDITOR_INVALID_BADGE_OFFSET;

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

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

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

.dx-invalid.dx-dropdowneditor {
    .texteditor-container-offset();

    &.dx-editor-filled {
        .dx-dropdowneditor-icon {
            .dx-state-hover& {
                background-color: @dropdowneditor-filled-button-invalid-hover-bg;
            }

            .dx-dropdowneditor-active& {
                background-color: @dropdowneditor-filled-button-invalid-active-bg;
            }

            .dx-state-active& {
                background-color: @dropdowneditor-filled-button-invalid-active-bg;
            }
        }
    }
}

.dx-valid.dx-dropdowneditor {
    .texteditor-container-offset();
}