salix/front/core/components/field/style.scss

@import "variables";

.vn-field {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;

    & > .container {
        display: flex;
        align-items: stretch;
        position: relative;
        outline: none;

        & > .infix {
            position: relative;
            display: flex;
            flex: auto;
            width: 100%;
            min-width: 0;

            & > label {
                position: absolute;
                left: 0;
                top: 18px;
                line-height: 20px;
                pointer-events: none;
                color: $color-font-bg-marginal;
                transition-property: top, color, font-size;
                transition-duration: 400ms;
                transition-timing-function: cubic-bezier(.4, 0, .2, 1);

                & > .required {
                    display: none;
                }
            }
            & > .fix {
                padding-top: 24px;
                line-height: 24px;
                font-size: 1rem;
                opacity: 0;
                transition: opacity 200ms ease-in-out;

                &.prefix {
                    padding-right: 5px;
                }
                &.suffix {
                    padding-left: 5px;
                }
            }
            & > .control {
                height: 100%;
                flex: auto;

                & > * {
                    padding-top: 24px;
                    padding-bottom: 8px;
                    height: inherit;
                    outline: none;
                    border: none;
                    font-family: Arial, sans-serif;
                    display: block;
                    font-size: 1rem;
                    width: 100%;
                    background: 0;
                    color: inherit;
                    box-sizing: border-box;
                    min-height: 56px;
                }
                & > input {
                    position: relative;
                    color: $color-font;

                    &::placeholder {
                        color: $color-font-bg;
                    }
                    &[type=time],
                    &[type=date],
                    &[type=password] {
                        opacity: 0;
                        transition: opacity 200ms ease-in-out;
                        cursor: pointer;
                    }
                    &[type=time],
                    &[type=date] {
                        clip-path: inset(0 20px 0 0);

                        &::-webkit-inner-spin-button,
                        &::-webkit-clear-button {
                            display: none;
                            -webkit-appearance: none;
                        }
                        &::-webkit-calendar-picker-indicator {
                            position: absolute;
                            height: 100%;
                            width: 100%;
                            opacity: 0;
                            cursor: pointer;
                        }
                    }
                    &[type=number] {
                        -moz-appearance: textfield;
    
                        &::-webkit-outer-spin-button,
                        &::-webkit-inner-spin-button {
                            -webkit-appearance: none;
                            margin: 0;
                        }
                    }
                    &:invalid {
                        box-shadow: none;
                    }
                    &:-internal-autofill-selected {
                        &,
                        &:hover,
                        &:focus,
                        &:active,
                        &:valid {
                            box-shadow: 0 0 0 40px $color-bg-panel inset;
                            -webkit-text-fill-color: $color-primary-medium
                        }
                    }
                }
            }
        }
        & > .prepend,
        & > .append,
        & > .icons {
            display: flex;
            align-items: center;
            color: $color-font-bg-marginal;
        }
        & > .prepend > prepend,
        & > .append > append,
        & > .icons {
            display: flex;
            align-items: center;

            & > vn-icon {
                font-size: 1.5rem;
            }
        }
        & > .prepend > prepend {
            padding-right: 12px;
        }
        & > .icons {
            &.pre {
                padding-left: 12px;
            }
            & > vn-icon {
                cursor: pointer;
            }
            & > vn-icon[icon=clear] {
                display: none;
            }
        }
        & > .underline {
            position: absolute;
            bottom: 0;
            content: ' ';
            pointer-events: none;
            width: 100%;

            &.blur {
                border-bottom: 1px solid $color-input-underline;
                transition: border-color 200ms ease-in-out;
            }
            &.focus {
                height: 2px;
                background-color: $color-primary;
                left: 50%;
                width: 0;
                transition-property: width, left, background-color;
                transition-duration: 300ms;
                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
            }
        }
    }
    &.dense {
        & > .hint {
            display: none;
        }
        & > .container > .infix {
            & > label {
                top: 8px;
            }
            & > .control > * {
                padding-top: 8px;
                min-height: 40px;
            }
        }
        &.not-empty,
        &.focused,
        &.invalid {
            & > .container > .infix > label {
                top: 0;
                line-height: 8px;
            }
        }
    }
    &.standout {
        border-radius: 1px;
        background-color: rgba(161, 161, 161, 0.1);
        padding: 0 12px;
        transition-property: background-color, color;
        transition-duration: 200ms;
        transition-timing-function: ease-in-out;

        & > .container {
            & > .underline {
                display: none;
            }
            & > .infix > .control > input {
                &:-internal-autofill-selected {
                    &,
                    &:hover,
                    &:active,
                    &:valid {
                        box-shadow: 0 0 0 40px #474747 inset;
                        -webkit-text-fill-color: $color-font-dark
                    }
                }
            }
            & > .infix > .control > * {
                color: $color-font-dark;

                &::placeholder {
                    color: $color-font-bg-dark;
                }
            }
            & > .prepend,
            & > .append,
            & > .icons {
                color: $color-font-bg-dark-marginal;
            }
        }
        &.focused {
            background-color: $color-font-dark;

            & > .container {
                & > .infix > .control > input {
                    &:-internal-autofill-selected {
                        &,
                        &:hover,
                        &:active,
                        &:valid {
                            box-shadow: 0 0 0 40px $color-font-dark inset;
                            -webkit-text-fill-color: $color-font-bg
                        }
                    }
                }
                & > .infix > .control > * {
                    color: $color-marginal;

                    &::placeholder {
                        color: $color-font-bg;
                    }
                }
                & > .prepend,
                & > .append,
                & > .icons {
                    color: $color-marginal;
                }
            }
        }
    }
    &.not-empty,
    &.focused,
    &.invalid {
        & > .container > .infix {
            & > label {
                top: 5px;
                color: $color-primary;
                padding: 0;
                font-size: .75rem;
            }
            & > .control > * {
                &[type=time],
                &[type=date],
                &[type=password] {
                    opacity: 1;
                }
            }
        }
    }
    &.has-icons,
    &.not-empty:hover,
    &.not-empty.focused {
        & > .container {
            & > .append > append {
                padding-left: 0;
            }
            & > .icons.pre {
                padding-left: 12px;
            }
        }
    }
    &:not(.disabled):not(.readonly) {
        &.focused > .container > .underline.focus {
            left: 0;
            width: 100%;
        }
        & > .container:hover > .underline.blur {
            border-color: $color-input-underline-hover;
        }
        &.not-empty:hover,
        &.not-empty.focused {
            & > .container > .icons > vn-icon[icon=clear] {
                display: initial;
            }
        }
    }
    &.readonly > .container {
        & > .infix > .control > * {
            caret-color: transparent;
        }
        & > .underline.blur {
            border-bottom-style: dashed;
        }
    }
    & > .hint {
        padding: 4px 0;
        height: 12px;
        color: rgba(0, 0, 0, .4);
        font-size: .75rem;
        transform: translateY(-12px);
        transition-property: opacity, transform, color;
        transition-duration: 200ms;
        transition-timing-function: ease-in-out;
        opacity: 0;
        visibility: hidden;

        &.filled {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }
    }
    &.invalid {
        & > .container {
            & > .infix > label {
                color: $color-alert;
            }
            & > .underline.focus {
                background-color: $color-alert;
            }
            & > .underline.blur {
                border-bottom-color: $color-alert;
                opacity: 1;
            }
        }
        & > .hint {
            color: $color-alert;
        }
    }
}