DocumentServer-v-9.2.0/web-apps/apps/common/main/resources/less/input.less

.form-control {
    .border-radius(@border-radius-form-control-ie);
    .border-radius(@border-radius-form-control);
    .box-shadow(none);
    color: @text-fill-input-ie;
    color: @text-fill-input;
    .user-select(text);
    .font-size-normal();

    border: @scaled-one-px-value-ie solid @border-fill-input-ie;
    border: @scaled-one-px-value solid @border-fill-input;
    background-color: @background-fill-input-ie;
    background-color: @background-fill-input;
    &:-ms-input-placeholder {
        color: @text-tertiary-ie;
    }
    &:focus {
        border-color: @border-fill-input-focused-ie;
        border-color: @border-fill-input-focused;
        outline: 0;
        //.box-shadow(none);
        .box-shadow(@shadow-fill-input-ie);
        .box-shadow(@shadow-fill-input);
        &.disabled {
            border-color: @border-fill-input-disabled-ie;
            border-color: @border-fill-input-disabled;
        }
    }
}

.form-control[readonly] {
    cursor: pointer;
    background-color: @background-fill-input-readonly-ie;
    background-color: @background-fill-input-readonly;
}

.form-control[disabled] {
    cursor: default;
    background-color: @background-fill-input-disabled-ie;
    background-color: @background-fill-input-disabled;
    .user-select(none);
    &:-ms-input-placeholder {
        color: @text-normal-ie;
    }
    .placeholder(@text-normal);
}

.input-row {
    position: relative;
}

.input-error {
    display: none;

    &:before {
        content: '';
        position: absolute;
        right: 3px;
        top: 3px;
        width: 16px;
        height: 16px;
        background-position: @input-error-offset-x @input-error-offset-y;
        filter: none;

        .rtl & {
            right: unset;
            left: 3px;
        }
    }
}

.input-field {
    display: flex;

    input,
    .input-error {
        .float-left();
        position: relative;
    }

    input {
        .rtl & {
            direction: rtl;
        }
    }

    &.form-control:focus,
    .form-control:focus {
        //border-color: @border-control-focus;
    }

    &.error {
        input:not([disabled]) {
            border-color: @brand-danger;
        }

        input:not([disabled]) + .input-error {
            display: block;
        }
    }

    &.warning {
        input:not([disabled]) + .input-error {
            display: block;
        }

        .input-error {
            &:before {
                background-position: @input-warning-offset-x @input-warning-offset-y;
            }
        }
    }
}

input:required:focus:invalid,
input:focus:invalid,
input.error {
    border-color: @brand-danger;

    & + span.input-error {
        display: block;
    }
}

.disabled .form-control {
    opacity: @component-disabled-opacity-ie;
    opacity: @component-disabled-opacity;
    cursor: default !important;
}

::-ms-clear {
    display: none;
}

input[type="password"] {
    font-size: 16px;
    &::-ms-reveal {
        display: none;
    }
}

input[type="text"]::selection, textarea::selection {
    background: @highlight-text-select-ie;
    background: @highlight-text-select;
    color: @text-inverse-ie;
    color: @text-inverse;
}

textarea.form-control:focus {
    //border-color: @border-control-focus;
}

.input-field-btn {
    position: relative;

    .select-button {
        position: absolute;
        top: 0;
        right: @scaled-one-px-value-ie;
        right: @scaled-one-px-value;

        .btn-group {
            display: block;
            width: @x-small-btn-size-ie;
            width: @x-small-btn-size;
            height: @x-small-btn-size-ie;
            height: @x-small-btn-size;
        }

        .btn-group > .btn-toolbar,
        & > .btn-toolbar {
            position: absolute;
            top: 0;
            right: 0;
            height: @form-control-size-ie;
            height: @form-control-size;
            clip: rect(@scaled-one-px-value-ie, @x-small-btn-size-ie, calc(@form-control-size-ie - @scaled-one-px-value-ie), 0);
            clip: rect(@scaled-one-px-value, @x-small-btn-size, calc(@form-control-size - @scaled-one-px-value), 0);
            .rtl & {
                right: unset;
                left: 0;
            }
        }

        .rtl & {
            right: unset;
            left: @scaled-one-px-value-ie;
            left: @scaled-one-px-value;
        }
    }

    .input-error {
        &:before {
            right: calc(@x-small-btn-size-ie + 2px);
            right: calc(@x-small-btn-size + 2px);

            .rtl & {
                right: unset;
                left: calc(@x-small-btn-size-ie + 2px);
                left: calc(@x-small-btn-size + 2px);
            }
        }
    }
    input {
        .padding-x(3px, @x-small-btn-size-ie);
        .padding-x(3px, @x-small-btn-size);
    }
}

.input-field-fixed {
    position: relative;

    .fixed-text {
        position: absolute;
        right: 0;
        top: 0;
        border-color: transparent;
        background: transparent;
        .text-align-left();
        .font-size-normal();
        padding-left: 2px;
        padding-right: 2px;
        cursor: default;

        .rtl & {
            right: unset;
            left: 0;
        }
    }
    .fixed-text.light {
        opacity: 0.8;
    }
    &.disabled .fixed-text {
        opacity: @component-disabled-opacity-ie;
        opacity: @component-disabled-opacity;
    }
}