Violin.css

Form Text 

<!-- Default -->
<div class="inv-form-text ">
    Texto de ajuda para o campo
</div>


<!-- Error -->
<div class="inv-form-text inv-form-text--error">
    Cara, nunca vi uma senha menos segura.
</div>


<!-- Success -->
<div class="inv-form-text inv-form-text--success">
    Senha segura
</div>


<!-- Alert -->
<div class="inv-form-text inv-form-text--alert">
    Senha segura
</div>


<div class="inv-form-text {{ form-text.modifier }}">
  {{ form-text.value }}
</div>
 
/* Default */
{
  "form-text": {
    "value": "Texto de ajuda para o campo"
  }
}


/* Error */
{
  "form-text": {
    "value": "Cara, nunca vi uma senha menos segura.",
    "modifier": "inv-form-text--error"
  }
}


/* Success */
{
  "form-text": {
    "value": "Senha segura",
    "modifier": "inv-form-text--success"
  }
}


/* Alert */
{
  "form-text": {
    "value": "Senha segura",
    "modifier": "inv-form-text--alert"
  }
}
  • Content: 
    .inv-form-text {
  font-size: 12px;
  color: var(--color-default--dark);
}

.inv-form-text--error {
  color: var(--color-accent--dark);
}

.inv-form-text--success {
  color: var(--color-done--dark);
}

.inv-form-text--alert {
  color: var(--color-alert--dark);
}
  • URL: /components/raw/form-text/form-text.css
  • Filesystem Path: src/components/form-text/form-text.css
  • Size: 263 Bytes

Form Text

Utilizados para indicar um texto abaixo dos campos de formulário

Tendo a classe base .inv-form-text, podendo ser adicionado um texto através de uma span ou uma div

Default Form Text

Texto de formulário padrão, comum para ações regulares dos usuários.

<div class="inv-form-text">
  Sou um texto de formulário
</div>

<span class="inv-form-text">
  Sou um texto de formulário
</span>
Modificadores Uso
.inv-form-text--error Modifica o form text com estilização de erro
.inv-form-text--success Modifica o form text com estilização de sucesso
.inv-form-text--alert Modifica o form text com estilização de alerta

Error Form Text

Versão de erro.

<div class="inv-form-text inv-form-text--error">
  Sou um texto de formulário com erro
</div>

<span class="inv-form-text inv-form-text--error">
  Sou um texto de formulário com erro
</span>

Success Form Text

Versão de sucesso.

<div class="inv-form-text inv-form-text--sucess">
  Sou um texto de formulário com sucesso
</div>

<span class="inv-form-text inv-form-text--sucess">
  Sou um texto de formulário com sucesso
</span>

Alert Form Text

Versão de alerta.

<div class="inv-form-text inv-form-text--alert">
  Sou um texto de formulário com alerta
</div>

<span class="inv-form-text inv-form-text--alert">
  Sou um texto de formulário com alerta
</span>