Formulários

Campos de Inserção Simples
Código
Ocultar Código
  • HTML
  • CSS
  • JS

<div class="form-wrapper">
    <form>
        <label class="animateInput">
            <input placeholder="Nome" type="text" /> 
            <span>Nome</span>
        </label>
        <label class="animateInput">
            <input placeholder="Password" type="password" /> 
            <span>Password</span>
        </label>
        <label class="animateInput">
            <input placeholder="Assunto" type="text" />
            <span>Assunto</span>
        </label>
        <label class="animateInput">
            <textarea placeholder="Mensagem"></textarea>
            <span>Mensagem</span>
        </label>        
    </form>
</div>

 

label.animateInput {
    position: relative;
    display: block
}

.animateInput input,.animateInput textarea {
    outline: none!important;
    transition: all .2s ease-in-out!important
}

.animateInput input::-webkit-input-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput input:-moz-placeholderr {
    transition: all .2s ease-in-out!important
}

.animateInput input::-moz-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput input:-ms-input-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput textarea::-webkit-input-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput textarea:-moz-placeholderr {
    transition: all .2s ease-in-out!important
}

.animateInput textarea::-moz-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput textarea:-ms-input-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput input:focus,.animateInput input.populated,.animateInput textarea:focus,.animateInput textarea.populated {
    padding-top: 28px!important;
    padding-bottom: 12px!important
}

.animateInput input:focus::-webkit-input-placeholder {
    color: transparent!important
}

.animateInput input:focus:-moz-placeholder {
    color: transparent!important
}

.animateInput input:focus::-moz-placeholder {
    color: transparent!important
}

.animateInput input:focus:-ms-input-placeholder {
    color: transparent!important
}

.animateInput textarea:focus::-webkit-input-placeholder {
    color: transparent!important
}

.animateInput textarea:focus:-moz-placeholder {
    color: transparent!important
}

.animateInput textarea:focus::-moz-placeholder {
    color: transparent!important
}

.animateInput textarea:focus:-ms-input-placeholder {
    color: transparent!important
}

.animateInput input.populated::-webkit-input-placeholder {
    color: transparent!important
}

.animateInput input.populated:-moz-placeholder {
    color: transparent!important
}

.animateInput input.populated::-moz-placeholder {
    color: transparent!important
}

.animateInput input.populated:-ms-input-placeholder {
    color: transparent!important
}

.animateInput textarea.populated::-webkit-input-placeholder {
    color: transparent!important
}

.animateInput textarea.populated:-moz-placeholder {
    color: transparent!important
}

.animateInput textarea.populated::-moz-placeholder {
    color: transparent!important
}

.animateInput textarea.populated:-ms-input-placeholder {
    color: transparent!important
}

.animateInput input:focus~span,.animateInput input.populated~span,.animateInput textarea:focus~span,.animateInput textarea.populated~span {
    opacity: 1;
    top: 5px
}

.animateInput span {
    color: #2980b9;
    font-size: 14px;
    font-family: "latobold";
    position: absolute;
    top: 0;
    left: 33.5px;
    opacity: 0;
    transition: all .2s ease-in-out
}

.form-wrapper{
    background: #F1F1F2;
    padding: 80px 95px;
}
.form-wrapper input,
.form-wrapper textarea{
    width: 100%;
    border: 2px solid #fff;
    box-shadow: none;
    height: 60px;
    line-height: 18px;
    color: #808184;
    font-size: 18px;
    font-family: 'latolight';
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    padding-left: 33.5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-wrapper input:focus,
.form-wrapper textarea:focus{
    border: 2px solid #2980B9;
    box-shadow: 0px 0px 7px rgba(0,0,0,0.4);
}
.form-wrapper input:not([type="submit"]) {
    margin-bottom: 28px;
}
.form-wrapper textarea {
    height: 132px;
    line-height: 22px;
    padding-top: 25px;
    resize: none;
}
.form-wrapper input::-webkit-input-placeholder {
      color: #808184;
    font-size: 16px;
    font-family: 'karmalight';
}
.form-wrapper input::-moz-placeholder {
      color: #808184;
    font-size: 16px;
    font-family: 'karmalight';
}
.form-wrapper input:-ms-input-placeholder {
      color: #808184;
    font-size: 16px;
    font-family: 'karmalight';
}
.form-wrapper input:-moz-placeholder {
      color: #808184;
    font-size: 16px;
    font-family: 'karmalight';
}

$(document).on('change', '.animateInput input', function() {
        var input = $(this);
        if (input.val().length) {
            input.addClass('populated');
        } else {
            input.removeClass('populated');
        }
    });
    $(document).on('change', '.animateInput textarea', function() {
        var textarea = $(this);
        if (textarea.val().length) {
            textarea.addClass('populated');
        } else {
            textarea.removeClass('populated');
        }
    });

Campo Incorrecto ou de Preenchimento Obrigatório
Código
Ocultar Código
  • HTML
  • CSS
  • JS

<div class="form-wrapper">
    <form id="testing-form">
        <label class="animateInput">
            <input placeholder="Email" required="" type="email" /> 
            <span>Email</span>
        </label>
        <label class="animateInput">
            <input placeholder="Assunto" required="" type="text" />
            <span>Assunto</span>
        </label>        
        <button class="button2">Testar</button>
    </form>
</div>

label.animateInput {
    position: relative;
    display: block
}

.animateInput input,.animateInput textarea {
    outline: none!important;
    transition: all .2s ease-in-out!important
}

.animateInput input::-webkit-input-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput input:-moz-placeholderr {
    transition: all .2s ease-in-out!important
}

.animateInput input::-moz-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput input:-ms-input-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput textarea::-webkit-input-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput textarea:-moz-placeholderr {
    transition: all .2s ease-in-out!important
}

.animateInput textarea::-moz-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput textarea:-ms-input-placeholder {
    transition: all .2s ease-in-out!important
}

.animateInput input:focus,.animateInput input.populated,.animateInput textarea:focus,.animateInput textarea.populated {
    padding-top: 28px!important;
    padding-bottom: 12px!important
}

.animateInput input:focus::-webkit-input-placeholder {
    color: transparent!important
}

.animateInput input:focus:-moz-placeholder {
    color: transparent!important
}

.animateInput input:focus::-moz-placeholder {
    color: transparent!important
}

.animateInput input:focus:-ms-input-placeholder {
    color: transparent!important
}

.animateInput textarea:focus::-webkit-input-placeholder {
    color: transparent!important
}

.animateInput textarea:focus:-moz-placeholder {
    color: transparent!important
}

.animateInput textarea:focus::-moz-placeholder {
    color: transparent!important
}

.animateInput textarea:focus:-ms-input-placeholder {
    color: transparent!important
}

.animateInput input.populated::-webkit-input-placeholder {
    color: transparent!important
}

.animateInput input.populated:-moz-placeholder {
    color: transparent!important
}

.animateInput input.populated::-moz-placeholder {
    color: transparent!important
}

.animateInput input.populated:-ms-input-placeholder {
    color: transparent!important
}

.animateInput textarea.populated::-webkit-input-placeholder {
    color: transparent!important
}

.animateInput textarea.populated:-moz-placeholder {
    color: transparent!important
}

.animateInput textarea.populated::-moz-placeholder {
    color: transparent!important
}

.animateInput textarea.populated:-ms-input-placeholder {
    color: transparent!important
}

.animateInput input:focus+span,.animateInput input.populated+span,.animateInput textarea:focus+span,.animateInput textarea.populated+span {
    opacity: 1;
    top: 5px
}

.animateInput span {
    color: #2980b9;
    font-size: 14px;
    font-family: "latobold";
    position: absolute;
    top: 0;
    left: 33.5px;
    opacity: 0;
    transition: all .2s ease-in-out
}

.form-wrapper{
    background: #F1F1F2;
    padding: 80px 95px;
}
.form-wrapper input,
.form-wrapper textarea{
    width: 100%;
    border: 2px solid #fff;
    box-shadow: none;
    height: 60px;
    line-height: 60px;
    color: #808184;
    font-size: 18px;
    font-family: 'latolight';
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    padding-left: 33.5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-wrapper input:focus,
.form-wrapper textarea:focus{
    border: 2px solid #2980B9;
    box-shadow: 0px 0px 7px rgba(0,0,0,0.4);
}
.form-wrapper input:not([type="submit"]) {
    margin-bottom: 28px;
}
.form-wrapper textarea {
    height: 132px;
    line-height: 22px;
    padding-top: 25px;
    resize: none;
}
.form-wrapper input::-webkit-input-placeholder {
      color: #808184;
    font-size: 16px;
    font-family: 'karmalight';
}
.form-wrapper input::-moz-placeholder {
      color: #808184;
    font-size: 16px;
    font-family: 'karmalight';
}
.form-wrapper input:-ms-input-placeholder {
      color: #808184;
    font-size: 16px;
    font-family: 'karmalight';
}
.form-wrapper input:-moz-placeholder {
      color: #808184;
    font-size: 16px;
    font-family: 'karmalight';
}

 .form-wrapper label.animateInput p.error-msg{
    font-size:    14px;
    font-family: "latobold_italic";
    text-align: left;
    position: absolute;
    bottom: -15px;
    left: 35px;
}
 .form-wrapper label.animateInput p.error-msg.invalid{
    color: #BE1E2D;
}
.form-wrapper label.animateInput p.error-msg.required{
    color: #F7931E;
}
.form-wrapper label.animateInput input.error-invalid{
    border: 2px solid #BE1E2D !important;
}
.form-wrapper label.animateInput input.error-invalid + span{
    color: #BE1E2D;
}
.form-wrapper label.animateInput input.error-required{
    border: 2px solid #F7931E !important;
}
.form-wrapper label.animateInput input.error-required + span{
    color: #F7931E;
}

$(document).on('change', '.animateInput input', function() {
        var input = $(this);
        if (input.val().length) {
            input.addClass('populated');
        } else {
            input.removeClass('populated');
        }
    });
    $(document).on('change', '.animateInput textarea', function() {
        var textarea = $(this);
        if (textarea.val().length) {
            textarea.addClass('populated');
        } else {
            textarea.removeClass('populated');
        }
    });

$(document).on('click','.components-wrapper .right-wrapper .form-wrapper form#validation-form button',function(e){
        e.preventDefault();
        e.stopPropagation();
        $('.components-wrapper .right-wrapper .form-wrapper form#validation-form .error-msg').remove();
        $('.components-wrapper .right-wrapper .form-wrapper form#validation-form input').removeClass('error-required').removeClass('error-invalid');
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if($('.components-wrapper .right-wrapper .form-wrapper form#validation-form input[type="email"]').val().length == 0){
            $('.components-wrapper .right-wrapper .form-wrapper form#validation-form input[type="email"]').addClass('error-required').parent().append("<p class='error-msg required'>Campo de preenchimento obrigatório</p>");
        }
        else if(!re.test($('input[type="email"]').val())){
            $('.components-wrapper .right-wrapper .form-wrapper form#validation-form input[type="email"]').addClass('error-invalid').parent().append("<p class='error-msg invalid'>Campo incorrecto</p>");
        }
        if($('.components-wrapper .right-wrapper .form-wrapper form#validation-form input[type="text"]').val().length == 0){
            $('.components-wrapper .right-wrapper .form-wrapper form#validation-form input[type="text"]').addClass('error-required').parent().append("<p class='error-msg required'>Campo de preenchimento obrigatório</p>");
        }
    });    

Botões de Opção

Botões de Opção (Radio Buttons) são utilizados apenas para fazer uma selecção única de um grupo de items  ou lista de opções.

 
 
 
Código
Ocultar Código
  • HTML
  • CSS

<div class="radio-button" style="margin-right: 85px;">
    <input name="option" type="radio" value="a" />
    <div class="radio-button-wrapper">&nbsp;</div>
    <label>Opção A</label>
</div>
<div class="radio-button" style="margin-right: 85px;">
    <input name="option" type="radio" value="b" />
    <div class="radio-button-wrapper">&nbsp;</div>
    <label>Opção B</label>
</div>
<div class="radio-button">
    <input disabled="disabled" name="option" type="radio" value="c" />
    <div class="radio-button-wrapper">&nbsp;</div>
    <label>Inactivo</label>
</div>

.radio-button{
    position: relative;
    display: inline-block;
}
.radio-button .radio-button-wrapper{
    width: 26px;
    height: 26px;
    border: 2px solid #2A2A2A;
    border-radius: 30px;
    display: inline-block;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}
.radio-button .radio-button-wrapper::before{
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 18px;
    width: 18px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.radio-button label{
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    font-family: "latobold";
    color: #2A2A2A;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px;
    margin-left: 5px;
}
.radio-button input[type="radio"]{
    position: absolute;
    width: 26px;
    display: block;
    height: 26px;
    margin: 0px;
    opacity: 0;
    z-index: 1;
}
.radio-button input[type="radio"]:checked + .radio-button-wrapper{
    border: 2px solid #2980b9;
}
.radio-button input[type="radio"]:checked + .radio-button-wrapper::before{
    background: #2980b9;
}
.radio-button input[type="radio"]:checked + .radio-button-wrapper + label{
    color: #2980b9;
}
.radio-button input[type="radio"]:disabled + .radio-button-wrapper{
    border: 2px solid #D0D2D3;
}
.radio-button input[type="radio"]:disabled + .radio-button-wrapper + label{
    color: #D0D2D3;
}

Checkboxes

Botões de Checkboxes são utilizados  para fazer múltiplas selecções em um conjunto de items  ou lista de opções.

 
 
 
Código
Ocultar Código
  • HTML
  • CSS

<div class="checkbox-button">
    <input name="option" type="checkbox" value="a" checked="checked" />
    <div class="checkbox-wrapper">&nbsp;</div>
    <label>Opção A</label>
</div>
<div class="checkbox-button">
    <input name="option" type="checkbox" value="b" />
    <div class="checkbox-wrapper">&nbsp;</div>
    <label>Opção B</label>
</div>
<div class="checkbox-button">
    <input disabled="disabled" name="option" type="checkbox" value="c" />
    <div class="checkbox-wrapper">&nbsp;</div>
    <label>Inactivo</label>
</div>

.checkbox-button{
    position: relative;
    display: inline-block;
}
.checkbox-button .checkbox-wrapper {
    width: 36px;
    height: 36px;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #2A2A2A;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 5px;
}
.checkbox-button input[type="checkbox"] {
    width: 36px;
    height: 36px;
    margin: auto;
    opacity: 0;
    position: absolute;
    z-index: 2;
}
.checkbox-button label{
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    font-family: "latobold";
    color: #2A2A2A;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px;
    margin-left: 5px;
}
.checkbox-button .checkbox-wrapper::after{
    content: '';
    width: 20px;
    height: 10px;
    position: absolute;
    top: 8px;
    left: 5px;
    border: 2px solid #2980b9;
    border-top: 0;
    border-right: 0;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    z-index: 1;
}
.checkbox-button input[type="checkbox"]:checked + .checkbox-wrapper::after{
    opacity: 1;
}
.checkbox-button input[type="checkbox"]:checked + .checkbox-wrapper{
    border: 2px solid #2980b9;
}
.checkbox-button input[type="checkbox"]:checked + .checkbox-wrapper + label{
    color: #2980b9;
}
.checkbox-button input[type="checkbox"]:disabled + .checkbox-wrapper{
    border: 2px solid #D0D2D3;
}
.checkbox-button input[type="checkbox"]:disabled + .checkbox-wrapper + label{
    color: #D0D2D3;
}

Barra de selecção em formato “slider”

Botões de Checkboxes são utilizados  para fazer múltiplas selecções em um conjunto de items  ou lista de opções.

 

 
Código
Ocultar Código
  • HTML
  • CSS
  • JS

<div class="slider-wrapper" id="slider">
<div class="ui-slider-handle" id="custom-handle">&nbsp;</div>
</div>

.slider-wrapper.ui-widget.ui-widget-content{
    border: 2px solid #2980B9;
    height: 14px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}    
.slider-wrapper.ui-widget.ui-widget-content > .ui-slider-handle{
    position: relative;
    color: #fff;
    width: 26px;
    height: 26px;
    border: 2px solid #2980b9 !important;
    border-radius: 20px;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
       background: #fff !important;
    outline: none !important;
}
.slider-wrapper.ui-widget.ui-widget-content > .ui-slider-handle span{
    position: absolute;
    top: -46px;
    left: 0px;
    right: 0px;
    margin: auto;
    text-align: center;
    font-family: "latobold";
    font-size: 16px;
}
.slider-wrapper.ui-widget.ui-widget-content > .ui-slider-handle:before {
     position: absolute;
     bottom: 41px;
     left: 50%;
     transform: translateX(-50%);
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     -o-transform: translateX(-50%);
     width: 37px;
     height: 38px;
     border-radius: 8px;
     background-color: #2980B9;
     color: #fff;
     text-align: center;
     content: " ";
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     z-index: -1;
}
.slider-wrapper.ui-widget.ui-widget-content > .ui-slider-handle:after {
  position: absolute;
  bottom: 33px;
  left: 50%;
  transform: translateX(-50%);
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     -o-transform: translateX(-50%);
  width: 0;
  border-top: 8px solid #2980B9;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.slider-wrapper.ui-slider-horizontal .ui-slider-range-min{
    background: #2980B9;
}

https://jqueryui.com/slider/

File Upload
 
Arraste os ficheiros para aqui ou clique
Ficheiros adicionados:
Upload máximo de 5MB
 
Código
Ocultar Código
  • HTML
  • CSS
  • JS

<div class="filedrag-wrapper">
    <div>
        <span id="fileselect" class="fileselect">&nbsp;</span>
    </div>
    <div class="filedrag">
        <div class="row-fluid"> 
            <div class="span7"> Arraste os ficheiros para aqui ou clique </div> 
            <div class="span5"> 
                <input id="files" class="input-files" name="files" placeholder="Adicionar Ficheiros" value="Adicionar Ficheiros" type="file" multiple="multiple" onchange="FileChoosedStartHandler(this.files)"> 
                <button class="button2">Adicionar ficheiros</button> 
            </div>
        </div>
    </div>
    <div class="file-wrapper">
        <div class="span7"> Ficheiros adicionados: </div>
        <div class="span5"> Upload máximo de <span>5MB</span> </div> 
    </div>
    <div class="messages">
        &nbsp;
    </div>
</div>

.filedrag
{
    border: 2px dashed #2A2A2A;
    cursor: default;
    margin-top: 18px;
}
.filedrag .row-fluid{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 41px;
}
.filedrag .row-fluid > div:first-child,
.file-wrapper > div:first-child{
    text-align: left;
    font-family: 'latolight';
    font-size: 18px;
    padding-left: 32px;
}
.filedrag .row-fluid > div:last-child,
.file-wrapper > div:last-child{
    text-align: right;
    position: relative;
    padding-right: 35px;
}
.filedrag .row-fluid > .dragAlign:first-child{
    min-width: 330px;
}
.filedrag .row-fluid > .dragAlign:last-child{
    float: right;
    margin-left: 0 !important;
}
.filedrag .row-fluid > div:last-child button{
    max-width: 204px;
    width: 100%;
    cursor: pointer;
}
.filedrag input[type="file"]:hover ~ button {
    opacity: 0.8;
}
.filedrag input[type="file"]{
    opacity: 0;
    right: 35px;
    position: absolute;
    cursor: pointer;
    height: 43px!important;
    margin-bottom: 0!important;
    padding-left: 0!important;
    max-width: 204px;
    z-index: 1;
}
.file-wrapper {
    font-family: 'latolight';
    font-size: 14px !important;
    margin-top: 15px;
}
.file-wrapper > .uploadFilesMax,
.file-wrapper > div span{
    font-size: 14px !important;
    font-family: "latobold";
    margin-left: 0 !important;
}
.file-wrapper > .uploadFilesMax:first-child{
    min-width: 165px;
    float: right;
    padding-left: 0;
    padding-right: 35px;
    text-align: right;
}
.file-wrapper > .uploadFilesMax:last-child{
    min-width: 195px;
    float: left;
    padding-left: 32px;
    padding-right: 0;
    text-align: left;
}
.file-wrapper>div:last-child,
.file-wrapper>div:first-child{
    font-family: "karmalight";
    font-size: 16px;
    color: #2980B9;
}
.messages{
    padding-left: 32px;
    margin-top: 48px;
    text-align: left;
}
.messages a {
    color: #2a2a2a;
    margin-right: 10px;
}
.messages .one-file{
    text-align: left;
    margin-top: 12px;
    font-size: 16px;
    font-family: 'latolight';
}
.messages .one-file span {
    cursor: pointer;
    font-size: 16px;
    font-family: cursive;
    font-weight: bold;
    margin-right: 10px;
    vertical-align: middle;
}

var _allFiles = new Array(); 
    
    function InitDrag() {
        var filedrag = document.getElementsByClassName("filedrag")[0],
            fileselect = document.getElementById("fileselect");
        fileselect.addEventListener("change", FileSelectStartHandler, false);        
        var xhr = new XMLHttpRequest();
        if (xhr.upload) {            
            filedrag.addEventListener("dragover", FileDragStartHover, false);
            filedrag.addEventListener("dragleave", FileDragStartHover, false);
            filedrag.addEventListener("drop", FileSelectStartHandler, false);
            filedrag.style.display = "block";
        }
    }    
    
    InitDrag();    
    
    function FileChoosedStartHandler(files) {
        document.getElementsByClassName("messages")[0].innerHTML = '';
        var sumBytes = 0;
        
        // process all File objects
        for (var i = 0; i < files.length; i++) {
            sumBytes += files[i].size;
            _allFiles.push(files[i]);
        }
        var kb = sumBytes / 1024;
        var mb = kb / 1024;
        
        if(mb > 5) { // 5MB max
            document.getElementsByClassName("messages")[0].innerHTML = '';
            Output('Excedeu o valor máximo de upload.');
        }
        else {
            ParseFiles();
        }
    }
    
    function deleteFileStart(pos) {
        _allFiles.splice(pos,1);
        ParseFilesStart();
    }    
    
    function ParseFilesStart() {
        document.getElementsByClassName("messages")[0].innerHTML = '';
        for (var i = 0; i < _allFiles.length; i++) {
            ParseFileStart(_allFiles[i], i);
        }
    }    

    function ParseFileStart(file, pos) {
        OutputStart("<p><a href=\"javascript:void(0);\">X</a><strong>" + file.name    + "</strong></p>");
    }    
    
    function OutputStart(msg) {
        var m = document.getElementsByClassName("messages")[0];
        m.innerHTML = msg + m.innerHTML;
    }
    
    function FileDragStartHover(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    function FileSelectStartHandler(e) {
        FileDragStartHover(e);
        var files = e.target.files || e.dataTransfer.files;        
        var sumBytes = 0;
        for (var i = 0; i < files.length; i++) {
            sumBytes += files[i].size;
            _allFiles.push(files[i]);
        }
        var kb = sumBytes / 1024;
        var mb = kb / 1024;        
        if(mb > 5) { // 5MB max
            document.getElementsByClassName("messages")[0].innerHTML = '';
            OutputStart('Excedeu o valor máximo de upload.');
        }
        else {
            ParseFilesStart();
        }        
    }
    
    $(document).on("click", ".filedrag-wrapper .messages a", function(){
        deleteFileStart((($('.messages a').length-1) - $(this).parent().index()));
    })

Data Picker

Um calendário de apoio (jquery ui datepicker - biblioteca javascript) é a solução mais adequada para uma campo de seleção de data, pois ajuda e orienta o utilizador na data que pretende preencher.

Código
Ocultar Código
  • HTML
  • CSS
  • JS

<div class="datepicker-wrapper">
    <input class="datepicker" placeholder="Data" size="30" type="text" />
</div>

/*Componente Data Picker*/
.datepicker-wrapper{
    background: #f1f1f2;
    padding: 80px 95px;
    text-align: center;
}
.datepicker-wrapper > input.datepicker{
    width: 100%;
    border: 2px solid #fff;
    box-shadow: none;
    height: 60px;
    line-height: 60px;
    color: #808184;
    font-size: 18px;
    font-family: 'latolight';
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    padding-left: 33.5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ui-datepicker .ui-datepicker-header{
    position: relative;
    padding: 0 !important;
    background: #2980b9;
    color: #fff;
    height: 52px;
    border-radius: 0px;
    border: 0px;
}
.ui-datepicker.ui-widget.ui-widget-content{
    border: 0px !important;
    border-radius: 0px;
    padding: 8px 7px;
    width: 400px;
    margin-top: 5px;
}
.ui-datepicker .ui-datepicker-title{
    font-family: "latobold";
    font-size: 22px;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}
.ui-datepicker .ui-state-default, 
.ui-datepicker .ui-widget-content .ui-state-default, 
.ui-datepicker .ui-widget-header .ui-state-default, 
.ui-datepicker .ui-button, 
.ui-datepicker .ui-button.ui-state-disabled{
    background: #e6e7e8 !important;
    font-family: "latobold";
    font-size: 16px;
    color: #808184 !important;
    border: 0px !important;
    padding: 12px 10px 12px 0px;
}
.ui-datepicker .ui-button.ui-state-disabled:hover, 
.ui-datepicker .ui-button.ui-state-disabled{
    background: #9D9D9C !important;
}
.ui-datepicker .ui-state-default:hover,
.ui-datepicker .ui-state-default:active{
    background: #2980B9 !important;
    color: #fff !important;
}
.ui-datepicker table {
    margin: 0!important;
    table-layout: fixed;
}
.ui-datepicker th{
    padding: 20px 0px;
    font-family: "latobold";
    font-size: 16px;
}
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next{
    border: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev{
    left: 15px !important;
}
.ui-datepicker .ui-datepicker-next{
    right: 15px !important;
}
.ui-datepicker .ui-datepicker-prev span{
    background: url('../images/date_left.png') no-repeat;
    background-size: 18px 17px;
}
.ui-datepicker .ui-datepicker-next span{
    background: url('../images/date_right.png') no-repeat;
    background-size: 18px 17px;
}
.ui-datepicker td {
    border: 0;
    padding: 2px;
}

https://jqueryui.com/datepicker/

$(".datepicker-wrapper .datepicker" ).datepicker( $.datepicker.regional[ "pt" ] );    

Calendário / Agenda

Calendar


 

Código
Ocultar Código
  • HTML
  • CSS
  • JS

<div id="calendar">
</div>

.fc-unthemed td{
    background: #fff;
    border-color: #808184;
}
.fc-unthemed .fc-bg td.fc-sat,
.fc-unthemed .fc-bg td.fc-sun{
    background: #E5E6E7;
}
.fc-unthemed td.fc-sat .fc-day-number,
.fc-unthemed td.fc-sun .fc-day-number{
    color: #6C6D6F;
}
.fc-unthemed td.fc-sat.fc-other-month,
.fc-unthemed td.fc-sun.fc-other-month{
    background: rgba(229,230,231,0.4);
}
.fc-unthemed td.fc-other-month{
    opacity: 0.2;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number,
.fc-unthemed th{
    color: #2F2F2F;
    font-family: "latobold";
    font-size: 16px;
    margin-right: 10px;
    padding-bottom: 0px;
        margin-top: 5px;
}
.fc td,
.fc th{
    border: 0px !important
}
.fc-unthemed thead{
    border-color: transparent;
}
.fc-unthemed td.fc-today{
    background: transparent !important;
    /*border: 3px solid #2980B9 !important;*/
}
.fc-unthemed td.fc-sun.fc-other-month .fc-day-number{
    opacity: 0.4;
}

.fc-day-grid-event .fc-content .fc-title{
    color: #fff;
    font-family: "latobold";
    font-size: 16px;
}
.fc-unthemed td.fc-day-top{
    border: 0px !important;
}
.fc-day-grid-event .fc-content {
    background: #2980B9 !important;
}
.fc-head-container,
.fc-unthemed td.fc-widget-content{
    border: 0px !important;
}
.fc-unthemed td{
    border-color: #808184 !important;
}
.fc-unthemed .fc-bg td{
    border: 1px solid rgba(128, 129, 132, 1) !important;
}
.fc-unthemed .fc-bg td.fc-other-month{
    border: 1px solid rgba(128, 129, 132, 0.4) !important;
}
.fc-ltr .fc-h-event.fc-start{
    border-left-width: 10px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.fc-ltr .fc-h-event.fc-end{
    border-right-width: 10px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.fc-view-container *, .fc-view-container :after, .fc-view-container :before{
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

.fc-unthemed td.fc-today .fc-day-number{
    color: #2980b9 !important;
    border-bottom: 2px solid;
}
.fc-row table{
    border: initial !important;
}

.fc-scroller.fc-day-grid-container{
    overflow-x: initial !important;
    overflow-y: initial !important;
    height: auto !important;
}
.fc-unthemed .fc-bg td.fc-today {
    position: relative;
}

.fc-unthemed .fc-bg td.fc-today .blue-border{
    width: 100%;
    height: 100%;
    border: 3px solid #2980b9;
    position: absolute;
}
.fc-basic-view .fc-body .fc-row{
    min-height: 107px !important;
}
.fc-unthemed td.fc-sat .fc-day-number, .fc-unthemed td.fc-sun .fc-day-number{
    color: #6C6D6F !important;
}
.fc-toolbar button.fc-prev-button,
.fc-toolbar button.fc-next-button{
    background: transparent;
    border: 2px solid #2A2A2A;
    width: 37px;
    height: 37px;
    padding: 0px;
    min-width: 37px;
    border-radius: 0px;
}
.fc-icon-left-single-arrow:after{
    content: "\F177" !important;
    font-family: 'fontawesome' !important;
    font-size: 17px !important;
}
.fc-icon-right-single-arrow:after{
    content: "\F178" !important;
    font-family: 'fontawesome' !important;
    font-size: 17px !important;
}
.fc-toolbar button.fc-today-button,
.fc-toolbar button.fc-month-button{
    min-width: 88px;
    background: #2A2A2A;
    height: 37px;
    opacity: 1;
    color: #fff;
    text-shadow: none;
    font-family: "latobold";
    font-size: 16px;
    border-radius: 0px;
}
.fc-toolbar button.fc-next-button{
    margin-left: 10px;
}
.fc-toolbar .fc-center h2{
    font-size: 22px !important;
    font-family: "latobold" !important;
}
.fc-toolbar .fc-left,
.fc-toolbar .fc-right{
    margin-top: 5px;
}

$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month'
        },
        firstDay: 0,
        editable: false,
        navLinks: true,
        events: [            
            {
                title: 'Evento 1',
                start: YM + '-07',
                end: YM + '-12'
            }
        ],
        viewRender: function(view,element){
            $('.fc td.fc-day.fc-today').append("<div class='blue-border'>&nbsp;</div>");
        }
    });

Campo de Newsletter
Código
Ocultar Código
  • HTML
  • CSS

<div class="newsletter-wrapper">
    <div class="newsletter-box">
        <i class="icon-envelope-alt">&nbsp;</i>
        <span>Newsletter</span>
        <div class="input-wrapper">
            <input type="email" placeholder="Insira o seu email..." />
            <i class="icon-angle-right">&nbsp;</i>
        </div>
    </div>
</div>

.newsletter-wrapper{
    background: #f1f1f2;
    padding: 39px 43px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.newsletter-box i{    
    vertical-align: initial !important;
    height: auto !important;
    width: auto !important;
    font-size: 0px !important;
}
.newsletter-box i:before{
    font-size: 24px;
    position: relative;
    top: 1px;
}
.newsletter-box span{
    font-family: "latobold_italic";
    font-size: 22px;
    color: #2A2A2A;
    vertical-align: middle;
    margin-left: 8px;
    margin-right: 15px;
}
.newsletter-box input{
    margin: 0px !important;
    height: 45px !important;
    line-height: 45px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-radius: 30px !important;
    border: 0px !important;
    font-family: "karmalight" !important;
    font-size: 18px !important;    
    padding-left: 30px !important;
    width: 100%;
    -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
}
.newsletter-box .input-wrapper{
    width: calc(100% - 154px);
    display: inline-block;
    position: relative;
}
.newsletter-box input::-webkit-input-placeholder {
      color: #808184;
    font-size: 18px;
    font-family: 'latolight';
}
.newsletter-box input::-moz-placeholder {
      color: #808184;
    font-size: 18px;
    font-family: 'latolight';
}
.newsletter-box input:-ms-input-placeholder {
      color: #808184;
    font-size: 18px;
    font-family: 'latolight';
}
.newsletter-box input:-moz-placeholder {
      color: #808184;
    font-size: 18px;
    font-family: 'latolight';
}
.newsletter-box .input-wrapper i{
    position: absolute;
    right: 20px;
    top: 50%;
    margin: auto;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
       font-size: 0px;
}
.newsletter-box .input-wrapper i:before{
    font-size: 26px;
}

Campo de Pesquisa
 
Código
Ocultar Código
  • HTML
  • CSS
  • JS

<div class="search-wrapper">
    <i class="icone-search">&nbsp;</i>
    <div class="search-box">
        <i class="icon-remove">&nbsp;</i>
        <input placeholder="Pesquisar..." type="text" /> <i class="icon-angle-right">&nbsp;</i>
    </div>
</div>

.search-wrapper{
    background: #f1f1f2;
    padding: 39px 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.search-box{
    position: fixed;
    text-align: right;
    left: 0px;
    right: 0px;
    margin: auto;
    width: calc(100% - 36px);
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
    top: -123px;
    opacity: 0;
    transition: top 0.3s linear, opacity 0.3s linear!important;
    background: rgba(241, 241, 242, 0.86);
}
.search-box > div{
    max-width: 1140px;
    margin: auto;
}
.search-box.visible{
    top: 39px;
    opacity: 1;
    transition: top 0.3s linear, opacity 0.3s linear!important;
}
.search-box input{
    margin: 0 !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-bottom: 1px solid #808184 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    padding: 0px 10px 5px 20px!important;    
    width: 100% !important;
    font-size: 34px !important;
    line-height: 40px !important;
    font-family: "latoblack" !important;
    box-sizing: border-box !important;
    height: 40px !important;
    color: #2A2A2A !important;
    background: transparent !important;
}
.search-box input::-webkit-input-placeholder {
      color: #2A2A2A;
    font-size: 34px !important;
    font-family: "latoblack" !important;
}
.search-box input::-moz-placeholder {
      color: #2A2A2A;
    font-size: 34px !important;
    font-family: "latoblack" !important;
}
.search-box input:-ms-input-placeholder {
      color: #2A2A2A;
    font-size: 34px !important;
    font-family: "latoblack" !important;
}
.search-box input:-moz-placeholder {
      color: #2A2A2A;
    font-size: 34px !important;
    font-family: "latoblack" !important;
}
.search-box i:not(.icon-remove){
    position: absolute;
    right: 20px;
    bottom: 10px;
    margin: auto;
    font-size: 0;
    height: auto!important;
    cursor: pointer;
}
.search-box i.icon-remove,
.search-wrapper i.icone-search{
    font-size: 0px;
       height: auto !important;
       cursor: pointer;
    margin-bottom: 60px;
    width: auto;
}
.search-box i.icon-remove{
    margin-right: 15px;
}
.search-box i:hover{
    color: #2980B9;
}
.search-box i:before{
    font-size: 40px;
    line-height: 20px;
}
.search-box i.icon-remove:before{
    font-size: 26px;
}
.search-wrapper{
    text-align: right;
}
.search-wrapper i.icone-search{
    margin-bottom: 0px;
    margin-right: 1px;
}
.search-wrapper i.icone-search:before{
    font-size: 28px;
}

$(document).on("click", ".search-box i.icon-remove", function(){
        $(this).parents('.search-box').removeClass('visible');
    });
    
$(document).on("click", ".search-icon i.icone-search", function(){
        $('.search-box').addClass('visible');
    });