salix/client/core/src/components/textfield/style.scss

@import "colors";
vn-textfield {
    margin: 20px 0!important;
    display: block;

    .leftIcons, .rightIcons, .suffix{
        display: inline-flex;
        color: $secondary-font-color;
        & .material-icons{
            font-size: 20px!important
        }
    }
    .leftIcons{
        margin-right: 3px;
    }
    .container{
        width: 100%;
        position: relative;
        padding-bottom: 2px;
    }
    .textField{
        width: 100%;
        display: inline-flex;
        position: relative;
        padding: 4px 0;
    }
    .infix {
        position: relative;
        display: block;
        flex: auto;
        width: 100%;
        min-width: 0;
    }
    i.pointer {
        visibility: hidden
    }
    i.visible {
        visibility: visible;
    }
    label {
        position: absolute;
        bottom: 2px;
        pointer-events: none;
        color: $secondary-font-color;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
    }
    input {

        outline: none;
        border: none;
        font-family: "Helvetica","Arial",sans-serif;
        display: block;
        font-size: 16px;
        width: 100%;
        background: 0 0;
        color: inherit;

        &[type=number]{
            -moz-appearance: textfield;
            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button{
                -webkit-appearance: none;
                margin: 0;
            }
        }
    }

    .underline{
        position: absolute;
        bottom: 0;
        height: 1px;
        content: ' ';
        pointer-events: none;
        width: 100%;
        background-color: rgba(0,0,0,.12);
    }

    .selected.underline{
        background-color: rgb(255,152,0);
        height: 2px;
        left: 50%;
        width: 0px!important;
        transition-duration: 0.2s;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
    }

    &.not-empty{
        & label {
            bottom: 24px;
            color: $main-01;
            font-size: 12px;
        }
    }

    div.selected{
        &.container{
            border-bottom: 0px;
        }
        & label {
            bottom: 24px;
            color: $main-01;
            font-size: 12px;
        }
        & .selected.underline{
            left: 0;
            width: 100%!important;
        }
    }

    & > div.container > div.textField > div.infix.invalid{
        @extend div.selected;

        & > span.mdl-textfield__error{
            visibility: visible;
            margin-top: 9px;
        }
        & > label{
            color: #d50000;
        }
    }

    .infix.invalid + .underline {
        &{
            background-color: #d50000;
        }
    }
}