Formulários
Formulários
Campos de Inserção Simples
- 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
- 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.
- HTML
- CSS
<div class="radio-button" style="margin-right: 85px;">
<input name="option" type="radio" value="a" />
<div class="radio-button-wrapper"> </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"> </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"> </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.
- HTML
- CSS
<div class="checkbox-button">
<input name="option" type="checkbox" value="a" checked="checked" />
<div class="checkbox-wrapper"> </div>
<label>Opção A</label>
</div>
<div class="checkbox-button">
<input name="option" type="checkbox" value="b" />
<div class="checkbox-wrapper"> </div>
<label>Opção B</label>
</div>
<div class="checkbox-button">
<input disabled="disabled" name="option" type="checkbox" value="c" />
<div class="checkbox-wrapper"> </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.
- HTML
- CSS
- JS
<div class="slider-wrapper" id="slider">
<div class="ui-slider-handle" id="custom-handle"> </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
- HTML
- CSS
- JS
<div class="filedrag-wrapper">
<div>
<span id="fileselect" class="fileselect"> </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">
</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.
- 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
- 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'> </div>");
}
});
Campo de Newsletter
- HTML
- CSS
<div class="newsletter-wrapper">
<div class="newsletter-box">
<i class="icon-envelope-alt"> </i>
<span>Newsletter</span>
<div class="input-wrapper">
<input type="email" placeholder="Insira o seu email..." />
<i class="icon-angle-right"> </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
- HTML
- CSS
- JS
<div class="search-wrapper">
<i class="icone-search"> </i>
<div class="search-box">
<i class="icon-remove"> </i>
<input placeholder="Pesquisar..." type="text" /> <i class="icon-angle-right"> </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');
});
Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.
Caso pretenda saber mais, consulte a nossa política de privacidade.