Inputs | DS CANTA.

Input Basico

<input type="text" class="canta-input" placeholder="Digite algo...">

Estados

<input type="text" class="canta-input canta-input--error" value="E-mail invalido">
<input type="text" class="canta-input canta-input--success" value="nome@empresa.com">
<input type="text" class="canta-input" disabled placeholder="Campo desabilitado">

Tamanhos

<input type="text" class="canta-input canta-input--sm" placeholder="Small">
<input type="text" class="canta-input" placeholder="Medium (padrao)">
<input type="text" class="canta-input canta-input--lg" placeholder="Large">

Com Icones

search

mail

<div class="canta-input-wrapper">
  <span class="canta-input-wrapper__icon canta-input-wrapper__icon--left material-symbols-rounded">search</span>
  <input type="text" class="canta-input" placeholder="Buscar...">
</div>

<div class="canta-input-wrapper">
  <input type="text" class="canta-input" placeholder="E-mail">
  <span class="canta-input-wrapper__icon canta-input-wrapper__icon--right material-symbols-rounded">mail</span>
</div>

Input Group

https://

R$

<div class="canta-input-group">
  <span class="canta-input-group__addon">https://</span>
  <input type="text" class="canta-input" placeholder="seu-site.com.br">
</div>

<div class="canta-input-group">
  <input type="text" class="canta-input" placeholder="Valor">
  <span class="canta-input-group__addon">R$</span>
</div>

API

Classe	Descricao
`.canta-input`	Classe base do input (obrigatoria)
`.canta-input--error`	Estado de erro (borda vermelha)
`.canta-input--success`	Estado de sucesso (borda verde)
`.canta-input--sm`	Tamanho pequeno
`.canta-input--lg`	Tamanho grande
`.canta-input-wrapper`	Container para input com icones
`.canta-input-wrapper__icon`	Icone dentro do wrapper
`.canta-input-wrapper__icon--left`	Icone posicionado a esquerda
`.canta-input-wrapper__icon--right`	Icone posicionado a direita
`.canta-input-group`	Container para input com addon
`.canta-input-group__addon`	Addon (prefixo ou sufixo) do grupo