Violin.css

# Warning: Error

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="inv-warning inv-warning--error">
        Ocorreu um erro interno no sistema
    </div>

`
`

    <div class="inv-warning {{ warning.modifier }}">
      {{ warning.text }}
    </div>

`
`

    {
      "warning": {
        "text": "Ocorreu um erro interno no sistema",
        "modifier": "inv-warning--error"
      }
    }

`
File:

- Content:
  `

      .inv-warning {
        text-align: center;
        background-color: var(--color-default--white);
        color: var(--color-default--dark);
        box-shadow: var(--shadow-border-1) var(--color-default--regular) inset;
        font-size: 14px;
        padding: 10px 8px;
        line-height: normal;
        border-radius: 6px;
      }

      .inv-warning--success {
        box-shadow: var(--shadow-border-1) var(--color-done--regular) inset;
        background-color: var(--color-done--white);
        color: var(--color-done--dark);
      }

      .inv-warning--error {
        box-shadow: var(--shadow-border-1) var(--color-error--regular) inset;
        background-color: var(--color-error--white);
        color: var(--color-error--dark);
      }

  `
- URL: /components/raw/warning/warning.css
- Filesystem Path: src/components/warning/warning.css
- Size: 641 Bytes

- Handle: @warning--error
- Variants (3): Default , Success , Error
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/warning/warning.hbs

## Warnings

Utilizados como alertas de informações no sistema.

Tendo a classe base `.inv-warning`, e podendo ser utilizado em conjunto com `<div>`

### Default Warning

Alerta padrão.

`

    <div class="inv-warning">
      Alerta padrão
    </div>

`

Modificadores | Uso
--- | ---
`.inv-warning--success` | Modifica o alerta com estilização com a cor `success`
`.inv-warning--error` | Modifica o alerta com estilização com a cor `error`

### Success Warning

Alerta com estado de sucesso.

`

    <div class="inv-warning inv-warning--success">
      Operação realizada com sucesso
    </div>

`

### Error Warning

Alerta com estado de erro.

`

    <div class="inv-warning inv-warning--error">
      Ocorreu um erro interno no servidor.
    </div>

`