Produto
PRODUTO
Text-fields
Text fields são usados para o inserção ou seleção de dados de texto. São compostos por um placeholder — texto indicativo do tipo de dado a ser imputado — pelo texto imputado pelo usuário e, sempre que necessário, um texto de instrução sobre o tipo ou formato de dado a ser preenchido.
Texto de ajuda
Estados de interação
Os estados de interação indicados abaixo se replicam para todas as suas variações de tipo.
Default
Texto de ajuda
Hover
Texto de ajuda
Focus
Texto de ajuda
Preenchido
Texto de ajuda
Erro
Texto de ajuda
Validado 
Texto de ajuda
Texto de ajuda
Autocomplete 
Desabilitado
Texto de ajuda
Tipos
Default
Input text: password
Input text ou text area com link
Input text com texto de ajuda
Texto de ajuda
Text area
Texto de ajuda
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="text-field">
<input type="text" placeholder=" " class="text-input" />
<label>Placeholder</label>
<span class="subtitle">
Texto de ajuda
</span>
</div>
<div class="text-field">
<input type="text" placeholder=" " class="text-input error" />
<label>Placeholder</label>
<span class="subtitle error">
Texto de ajuda
</span>
</div>
<div class="text-field">
<input type="text" placeholder=" " class="text-input" />
<label>Placeholder</label>
<span class="icon"><img src="/img/check-validate.svg"></span>
<span class="subtitle">
Texto de ajuda
</span>
</div>
<div class="text-field">
<input type="password" placeholder=" " class="text-input" />
<label>Placeholder</label>
<span class="icon"><img src="/img/visibility-off.png"></span>
<span class="subtitle">
Texto de ajuda
</span>
</div>
SASS Exibir código
Copiar código
Exibir código
.text-field {
position: relative;
max-width: 300px;
width: 100%;
&.disabled{
pointer-events: none;
}
input, textarea{
-webkit-appearance: none;
width: 100%;
height: 60px;
border-radius: 4px;
background-color: #ffffff;
border: solid 1px #9b9b9b;
padding: 16px 45px 0 20px;
box-sizing: border-box;
font-size: 1em;
font-family: Lato;
font-weight: bold;
letter-spacing: normal;
color: #1e2a54;
&:focus ~ label, &:not(:placeholder-shown) ~ label {
top: 8px;
height: 15px;
font-size: 0.6875em;
opacity: 1;
}
transition: .4s;
&:hover,
&.hovered{
border: solid 1px #3153f5;
}
&:focus,
&.focused{
border: solid 2px #3153f5;
box-shadow: none;
outline: none;
padding-left: 19px;
}
&.error{
border: solid 2px #f7744a;
padding-left: 19px;
}
&:disabled{
background-color: #ebebeb;
border-color: #ebebeb;
+ label{
background-color: #ebebeb!important;
}
}
&.link-input{
padding-right: 75px;
}
}
textarea{
min-height: 120px;
max-height: 260px;
padding-top: 30px;
max-width: 100%;
min-width: 200px;
}
label {
position: absolute;
pointer-events: none;
left: 20px;
top: 19px;
height: 24px;
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
background-color: #fff;
color: #9b9b9b;
transition: 0.2s ease all;
}
.subtitle{
display: block;
margin-top: 10px;
font-family: Lato;
font-size: 0.6875em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.27;
letter-spacing: normal;
color: #9b9b9b;
&.error{
color: #f7744a;
}
&.disabled{
pointer-events: none;
}
}
.input-link{
position: absolute;
top: 20px;
right: 20px;
font-family: Lato;
font-size: 0.75em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 2;
letter-spacing: normal;
text-align: right;
color: #3153f5;
}
.icon{
width: 24px;
height: 24px;
position: absolute;
top: 20px;
right: 20px;
&.password{
cursor: pointer;
&.visible{
background-image: url(/img/visibility-off.png);
}
&.visible-off{
background-image: url(/img/visibility-on.png);
background-position: 0px 3px;
}
background-size: 24px;
background-repeat: no-repeat;
}
}
.custom-select:focus ~ label , .custom-select:not([value=""]):valid ~ label {
top:-18px;
font-size: 0.875em;
color:#5264AE;
}
}
JS Exibir código
Copiar código
Exibir código
$('body').on('click', '.text-field.password .icon', function(){
var father = $(this).closest('.text-field');
if($(father).hasClass('visible-off')){
$(father).removeClass('visible-off').addClass('visible');
$('.icon', father).removeClass('visible-off').addClass('visible');
$('input', father).attr('type','password');
}else if($(father).hasClass('visible')){
$(father).removeClass('visible').addClass('visible-off');
$('.icon', father).removeClass('visible').addClass('visible-off');
$('input', father).attr('type','text');
}
});
$('body').on('keyup', '.text-wrong-example input.text-input', function(){
var father = $(this).closest('.text-field');
if($(this).val().length==0){
$('.subtitle', father).removeClass('error');
$(this).removeClass('error');
}else if($(this).val().length>0){
$('.subtitle', father).addClass('error');
$(this).addClass('error');
}
});