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

@import "variables";

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

    & > .container {
        display: flex;
        align-items: stretch;
        position: relative;
        height: 56px;

        & > .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-secondary;
                transition-property: top, color, font-size;
                transition-duration: 400ms;
                transition-timing-function: cubic-bezier(.4, 0, .2, 1);

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

                &.prefix {
                    padding-right: 5px;
                }
                &.suffix {
                    padding-left: 5px;
                }
            }
            & > .control {
                height: 100%;
                flex: auto;
            }
            & > .control > input {
                padding-top: 24px;
                padding-bottom: 8px;
                height: inherit;
                outline: none;
                border: none;
                font-family: Arial, sans-serif;
                display: block;
                font-size: $input-font-size;
                width: 100%;
                background: 0;
                color: inherit;
                box-sizing: border-box;

                &[type=time],
                &[type=date] {
                    clip-path: inset(0 20px 0 0);
                }
                &[type=number] {
                    -moz-appearance: textfield;

                    &::-webkit-outer-spin-button,
                    &::-webkit-inner-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }
                }
                &:invalid {
                    box-shadow: none;
                }
            }
        }
        & > .prepend,
        & > .append,
        & > .icons {
            display: flex;
            align-items: center;
            color: $color-font-secondary;
        }
        & > .prepend > prepend,
        & > .append > append,
        & > .icons {
            display: flex;

            & > vn-icon {
                font-size: 24px;
            }
        }
        & > .prepend > prepend {
            padding-right: 12px;
        }
        & > .append > append {
            padding-left: 12px;
        }
        & > .icons > vn-icon[icon=clear] {
            display: none;
            cursor: pointer;
        }
        & > .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-main;
                left: 50%;
                width: 0;
                transition-property: width, left, background-color;
                transition-duration: 300ms;
                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
            }
        }
    }
    &.not-empty > .container,
    &.focused > .container {
        & > .infix {
            & > .fix {
                opacity: 1;
            }
            & > label {
                top: 5px;
                color: $color-main;
                padding: 0;
                font-size: 12px;
            }
        }
    }
    &.has-icons,
    &.not-empty:hover,
    &.not-empty.focused {
        & > .container > .append > append {
            padding-left: 0;
        }
        & > .container > .icons {
            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;
            }
        }
    }
    &:not(.not-empty):not(.focused) > .container > .infix > .control > input {
        &[type=time],
        &[type=date] {
            opacity: 0;
        }
    }
    &.readonly > .container {
        & > .infix > .control > input {
            caret-color: transparent;
        }
        & > .underline.blur {
            border-bottom-style: dashed;
        }
    }
    & > .hint {
        z-index: -1;
        padding-top: 8px;
        height: 20px;
        color: rgba(0, 0, 0, .4);
        font-size: 12px;
        transform: translateY(-28px);
        transition-property: opacity, transform, color;
        transition-duration: 200ms;
        transition-timing-function: ease-in-out;
        opacity: 0;

        &.filled {
            z-index: 0;
            opacity: 1;
            transform: translateY(0);
        }
    }
    &.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;
        }
    }
}
vn-table {
    .vn-field {
        margin: 0;
    }
}