Cacher is the code snippet organizer for pro developers

/*example of use

 - Valid form :

<div class="group">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
</div>

- Invalid form

<div class="group invalid">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>

    <p class="err-message"> this field is requred</p>
</div>


*/

/* form starting stylings ------------------------------- */
.group 			  {
    position:relative;
    margin-bottom:24px;
}
input 				{
    font-size:18px;
    padding:6px 10px 4px 5px;
    display:block;
    width:300px;
    border:none;
    border-bottom:1px solid #757575;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
    color:#999;
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:4px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
    top:-10px;
    font-size:0.75rem;
    color:#777c85;

}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#112545;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
}

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

/* active state */
input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#112545; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#112545; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#112545; }
    to 	{ width:0; background:transparent; }
}

/*
 # validation
*/
.request-block .group .err-message{
    display: none;
}
.request-block .group.invalid input{
    color: #da4439;
    border-bottom:1px solid #da4439;

}
.request-block .group .err-message{
    display: none;
}
.request-block .group.invalid .err-message{
    margin: 0;
    display: block;
    position: absolute;

    bottom: 0;
    margin-bottom: -1.2em;
    left: 0;
    color: #da4439;
    font-size: 0.6rem;
}
.request-block .group.invalid .bar:before,
.request-block .group.invalid .bar:after {
    background-color: #da4439;
}