form.nice-form
    
    fieldset
        
        legend Placeholders Spectaculaire
        
        - var fields = [
        -     { id: "such", text: "Such Input"}, 
        -     { id: "many", text: "Many Field"}, 
        -     { id: "very", text: "Very Form", value: "Much Prefilled"} 
        - ];
        
        p.input-group
            | try putting 15 characters in to a field 
            img.emoji(src="https://raw.githubusercontent.com/twitter/twemoji/gh-pages/36x36/1f609.png")
        
        each x in fields
            .input-group(data-group-name=x.id)
                label(for=x.id)= x.text
                input(type="text" name=x.id id=x.id value=x.value)
        
        .input-group
            label(for="txt")
                | So Textarea
            textarea(name="txt" id="txt")
            
        .input-group
            button() Wow!
        

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,600);

$c: #25eaac;
$h: 50px;

html {
    
    background: #f4fcfa;    
    
}

body {
    
    padding: 5em 0;
    
}

.nice-form {
    
    font-family: lato;
    
    * {
        
        box-sizing: border-box;
        
    }
     
    fieldset {
        
        padding: 2em 1em;
        margin: 1em;
        border: 1px solid rgba( #2a138e, 0.3 );
        border-radius: 5px;
        
    }
    
    legend {
        
        color: #2a138e;
        padding: 0 1em;
        font-size: 1.4em;
        font-weight: 100;
        
    }
    
    label.is-replaced {
        
        color: #222;
        position: absolute;
        line-height: $h;
        padding: 0 0.6em;
        right: 0;
        top: 0;
        user-select: none;
        opacity: 0.4;
        min-width: 100%;
        pointer-events: none;
        
        transform-origin: top right;
        transition: all 0.2s cubic-bezier(.65,.05,.36,1);

    }
    
    input:not([type=submit]),
    input:not([type=reset]),
    input:not([type=button]),
    input:not([type=radio]),
    input:not([type=checkbox]),
    textarea {
        
        display: block;
        width: 100%;
        max-width: 100%;
        height: $h;
        border: 1px solid rgba(slategrey, 0.5);
        border-radius: 3px;
        padding: 0 0.6em;
        
        transition: 0.2s ease, min-height 0 linear;
        
        &.filled {
            
            border: 1px solid slategrey;
            
        }
        
        &:focus {
            
            border-color: $c;
            box-shadow: inset 0 0 2px $c;
            outline: none;
            
        }
        
    }
    
    textarea {
        
        padding-top: 0.9em;
        min-height: 8em;
        
    }
    
    .input-group {
        
        position: relative;
        overflow: hidden;
        
        &:not(:last-child) {
        
            margin-bottom: 1em;
            
        }
        
        input:not([type=submit]),
        input:not([type=reset]),
        input:not([type=button]),
        input:not([type=radio]),
        input:not([type=checkbox]),
        textarea {

            &:focus ~ label {

                transform: translateX( 2em );
                color: darken( $c, 10% );
                opacity: 0.55;

            }

            &.filled ~ label {

                transition: 
                    all .3s cubic-bezier(.65,.05,.36,1),
                    transform .15s cubic-bezier(.65,.05,.36,1);

                transform: translateX( 0 );
                right: 0;
                min-width: 1%;

            }

            &.filled-medium ~ label {

                transform: scale(0.8) translateY(-0.3em) translateX( 0 );
                opacity: 0.5;

            }

            &.filled-alot ~ label {

                transform: scale(0.7) translateY(-0.5em) translateX( 0 );
                opacity: 0.5;

            }
            
        }
        
    }
    
    button {
        
        background: $c;
        color: white;
        border: none;
        border-radius: 3px;
        height: $h;
        font-weight: 600;
        min-width: 100%;
        
    }
    
}


@media screen and (min-width: 40em) {

    .nice-form {

        width: 40em;
        margin: auto;

        input:not([type=submit]),
        input:not([type=reset]),
        input:not([type=button]),
        input:not([type=radio]),
        input:not([type=checkbox]),
        textarea,
        .input-group {

            width: 20em;
            margin: auto;

        }
        
        button {
            
            min-width: 0;
            padding: 0 2em;
            
        }

    }

}

.emoji { 
    
    max-width: 20px; 
    position: relative;
    top: 4px;
    margin: 0 3px;

}

$(function() {
    
   
    var $forms = $(".nice-form"),
        $inputs = $forms.find("textarea, input:not([type=submit],[type=reset],[type=button],[type=radio],[type=checkbox])");
    
    $inputs.each((k,el) => {
        
        var $input = $(el),
            $label = $input.prev("label");
        
        if ( $label.length ) {
            
            $label
                .insertAfter( $input )
                .add( $input )
                .addClass("is-replaced");
            
            $input.on("change focus blur compositionchange compositionend keyup", (ev) => {
               
                var $tar = $(ev.target),
                    chars = $tar.val().trim().length,
                    filled = ( $tar.val().trim() !== "" ),
                    medium = ( chars >= 5 && chars < 15 ),
                    alot = ( chars >= 15 );
                
                $tar.toggleClass( "filled", filled );
                
                if ( alot ) {
                    
                    $tar
                        .addClass( "filled-alot" )
                        .removeClass( "filled-medium" );
                    
                } else if ( medium ) {
                    
                    $tar
                        .addClass( "filled-medium" )
                        .removeClass( "filled-alot" );
                    
                } else {
                    
                    $tar.removeClass( "filled-alot filled-medium" );
                    
                }
                
            });
            
        }
        
        if ( $input.val() !== "" ) {
            
            $input.trigger( "change" );
            
        }
        
    });
    
    
    
});