TeaWeb/shared/js/ui/react-elements/InputField.scss

@import "../../../css/static/mixin";
@import "../../../css/static/properties";

html:root {
    --boxed-input-field-border: #111112;
    --boxed-input-field-background: #121213;
    --boxed-input-field-text: #b3b3b3;
    --boxed-input-field-placeholder: #606060;

    --boxed-input-field-disabled-background: #1a1819;

    --boxed-input-field-focus-border: #284262;
    --boxed-input-field-focus-background: #131b22;
    --boxed-input-field-focus-text: #e1e2e3;

    --boxed-input-field-invalid-border: #721c1c;
    --boxed-input-field-invalid-background: #180d0d;
    --boxed-input-field-invalid-text: #b3b3b3;
}

.containerBoxed {
    border-radius: .2em;
    border: 1px solid var(--boxed-input-field-border);

    background-color: var(--boxed-input-field-background);

    display: flex;
    flex-direction: row;
    justify-content: stretch;

    color: var(--boxed-input-field-text);

    &.size-normal {
        height: 2em;
    }

    &.size-large {
        height: 2.5em;
    }

    &.size-small {
        height: 1.7em;
    }

    @include placeholder(&) {
        color: var(--boxed-input-field-placeholder);
    };

    .prefix, .suffix {
        flex-grow: 0;
        flex-shrink: 0;

        margin: 0;

        line-height: initial;
        align-self: center;
        padding: 0 .5em;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        opacity: 1;

        @include transition($button_hover_animation_time ease-in-out);
    }

    .suffix {
        padding-left: 0;
    }

    &.isInvalid {
        background-color: var(--boxed-input-field-invalid-background);
        border-color: var(--boxed-input-field-invalid-border);
        color: var(--boxed-input-field-invalid-text);

        background-image: unset!important;
    }

    &.editable {
        &:focus, &:focus-within {
            background-color: var(--boxed-input-field-focus-background);
            border-color: var(--boxed-input-field-focus-border);

            color: var(--boxed-input-field-focus-text);

            .prefix, .suffix {
                width: 0;
                padding-left: 0;
                padding-right: 0;
                opacity: 0;
            }
        }
    }

    input, select, .inputBox {
        flex-grow: 1;
        flex-shrink: 1;

        background: transparent;
        align-self: center;

        border: none;
        outline: none;
        margin: 0;

        color: inherit;
        min-width: 2em;

        &.editable {
            cursor: text;
        }
    }

    .inputBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .prefix + input {
        padding-left: 0;
    }


    &:focus, &:focus-within {
        .prefix + input {
            padding-left: .5em;
        }
    }

    &.disabled, &:disabled {
        @include user-select(none);
        background-color: var(--boxed-input-field-disabled-background);
    }

    &.noRightIcon {
        input, select {
            padding-right: .5em;
        }
    }

    &.noLeftIcon {
        input, select {
            padding-left: .5em;
        }
    }

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    @include transition($button_hover_animation_time ease-in-out);
}

.containerFlat {
    position: relative;

    padding-top: 1.75em; /* the label above (might be floating) */
    margin-bottom: 1em; /* for invalid label/help label */

    label {
        color: #999999;

        top: 1em;
        left: 0;
        font-size: .75em;

        position: absolute;
        pointer-events: none;
        transition: all .3s ease;

        line-height: 1;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        max-width: 100%;

        &.type-floating {
            will-change: left, top, contents;
            color: #999999;
            top: 2.42em;
            font-size: 1em;
        }

        &.type-static {
            top: 1em;
            font-size: .75em;
        }

        @include transition(color $button_hover_animation_time ease-in-out, top $button_hover_animation_time ease-in-out, font-size $button_hover_animation_time ease-in-out);
    }

    &:focus-within, &.isFilled {
        label {
            color: #3c74a2;

            &.type-floating {
                font-size: .75em;
                top: 1em;
            }
        }
    }

    input, select {
        display: block;

        height: 2.25em;
        width: 100%;

        font-size: 1em;
        line-height: 1.5;

        color: #cdd1d0;

        background: no-repeat bottom, 50% calc(100% - 1px);
        background-image: linear-gradient(0deg, #008aff 2px, rgba(0, 150, 136, 0) 0), linear-gradient(0deg, #393939 1px, transparent 0);
        background-clip: padding-box;
        background-size: 0 100%, 100% 100%;

        border: none;
        border-radius: 0;
        box-shadow: none;

        transition: background 0s ease-out;
        padding: .4375em 0;

        @include transition(all .15s ease-in-out);

        &:focus {
            background-size: 100% 100%, 100% 100%;
            transition-duration: .3s;

            color: #ced3d3;
            background-color: transparent;
            outline: 0;
        }

        option, optgroup {
            background: #121213;
        }
    }

    .invalidFeedback {
        position: absolute;
        opacity: 0;
        width: 100%;
        margin-top: .25em;
        font-size: 80%;
        color: #f44336;

        @include transition(opacity .25s ease-in-out);
    }

    &.isInvalid {
        input, select {
            background-image: linear-gradient(0deg, #d50000 2px,rgba(213,0,0,0) 0),linear-gradient(0deg,rgba(241,1,1,.61) 1px,transparent 0);
        }

        .invalidFeedback {
            opacity: 1;
        }

        label {
            color: #f44336!important;
        }
    }


    .help {
        position: absolute;
        opacity: 0;
        width: 100%;
        margin-top: .25em;

        font-size: .75em;

        @include transition(opacity .25s ease-in-out);
    }

    input:focus-within ~ .help, select:focus-within ~ .help {
        opacity: 1;
    }
}