devextreme/less/sources/widgets/ios7/dropDownEditor.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

@DROPDOWNEDITOR_BUTTON_WIDTH: 25px;
@DROPDOWNEDITOR_INVALID_BADGE_OFFSET: @DROPDOWNEDITOR_BUTTON_WIDTH;

.dx-dropdowneditor-button {
    width: @DROPDOWNEDITOR_BUTTON_WIDTH;
}

.dx-dropdowneditor-input-wrapper {
    border: @TEXTEDITOR_BORDER;
    border-radius: @TEXTEDITOR_BORDER_RADIUS;

    .dx-texteditor-container {
        border: 0;
    }
}


.dx-dropdowneditor-button-visible {
    .dx-texteditor-input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.dx-dropdowneditor-active,
.dx-state-disabled {
    .dx-dropdowneditor-icon {
        opacity: 1;

        &:before {
            opacity: 0.35;
        }
    }
}

.dx-dropdowneditor .dx-icon-clear {
    right: 0;
}

.dx-dropdowneditor-icon {
    .dx-icon(chevrondown);

    .dx-icon-font-centered-sizing(16px);

    color: @IOS7_INPUT_PLACEHOLDER;
    font-weight: 600;
}

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

    &.dx-show-clear-button:not(.dx-texteditor-empty) .dx-texteditor-container:after {
        right: @DROPDOWNEDITOR_BUTTON_WIDTH + @TEXTEDITOR_CLEAR_BUTTON_WIDTH;
    }
}

.invalid-dropdowneditor-input-padding() {
    &.dx-dropdowneditor-button-visible {
        .dx-texteditor-input {
            padding-right: 1.5 * @TEXTEDITOR_INVALID_BADGE_WIDTH;
        }

        &.dx-rtl .dx-texteditor-input {
            padding-left: 1.5 * @TEXTEDITOR_INVALID_BADGE_WIDTH;
            padding-right: @TEXTEDITOR_INPUT_PADDING;
        }

        &.dx-show-clear-button {
            .dx-texteditor-input {
                padding-right: 1.5 * @TEXTEDITOR_INVALID_BADGE_WIDTH;
            }

            &.dx-rtl .dx-texteditor-input {
                padding-left: 1.5 * @TEXTEDITOR_INVALID_BADGE_WIDTH;
                padding-right: @TEXTEDITOR_INPUT_PADDING;
            }
        }
    }
}

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

.dx-rtl {
    &.dx-dropdowneditor .dx-icon-clear {
        left: 0;
        right: auto;
    }

    &.dx-invalid.dx-dropdowneditor,
    &.dx-valid.dx-dropdowneditor {
        .dx-texteditor-container {
            &:after {
                left: @DROPDOWNEDITOR_INVALID_BADGE_OFFSET;
                right: auto;
            }
        }

        &.dx-show-clear-button:not(.dx-texteditor-empty) {
            .dx-texteditor-container {
                &:after {
                    left: @DROPDOWNEDITOR_BUTTON_WIDTH + @TEXTEDITOR_CLEAR_BUTTON_WIDTH;
                    right: auto;
                }
            }
        }
    }
}