Material Design Input Field

gistfile1.txt

@*
        /*===============================================================
    Material Design Input
    ================================================================*/
        <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="card">
                <form>
                    <div class="group">
                        <input type="text" required>
                        <span class="highlight"></span>
                        <span class="bar"></span>
                        <label>Name</label>
                    </div>
                    <div class="group">
                        <input type="text" required>
                        <span class="highlight"></span>
                        <span class="bar"></span>
                        <label>Email</label>
                    </div>
                </form>
            </div>
        </div>
    </div>

    /*===============================================================
    Bootstrap Material Design
    ================================================================*/

    /*INPUT Label*/
    /*.group        {
    position:relative;
    margin-bottom:45px;
    }
    input         {
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width:300px;
    border:none;
    border-bottom:1px solid #757575;
    }
    input:focus     { outline:none; }

    label          {
    color:#999;
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all;
    }

    input:focus ~ label, input:valid ~ label     {
    top:-20px;
    font-size:14px;
    color:#5264AE;
    }

    .bar  { position:relative; display:block; width:300px; }
    .bar:before, .bar:after   {
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#5264AE;
    transition:0.2s ease all;
    }
    .bar:before {
    left:50%;
    }
    .bar:after {
    right:50%;
    }

    input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
    }

    .highlight {
    position:absolute;
    height:60%;
    width:100px;
    top:25%;
    left:0;
    pointer-events:none;
    opacity:0.5;
    }

    input:focus ~ .highlight {
    animation:inputHighlighter 0.3s ease;
    }

    @keyframes inputHighlighter {
    from  { background:#5264AE; }
    to    { width:0; background:transparent; }
    }*/*@