Violin.css

# Checkbox: Default

Ready

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

`

    <input type="checkbox" class="inv-checkbox" />

`
`

    <input type="checkbox" class="inv-checkbox" {{ternary disabled "disabled" "" }} />

`
`

    /* No context defined for this component. */

`
File:

- Content:
  `

      .inv-checkbox {
        appearance: none;
        min-width: 18px;
        height: 18px;
        border: solid 2px var(--color-default--regular);
        border-radius: 2px;
        outline: none;
        position: relative;
        transition: all 0.1s ease-in-out;
        cursor: pointer;
      }

      .inv-checkbox:disabled {
        border-color: var(--color-default--light);
        cursor: not-allowed;
      }

      .inv-checkbox:hover {
        border-color: var(--color-primary--regular);
      }

      .inv-checkbox:active {
        background-color: var(--color-primary--dark);
        border-color: var(--color-primary--dark);
      }

      .inv-checkbox:checked {
        background-color: var(--color-primary--regular);
        border-color: var(--color-primary--regular);
      }

      .inv-checkbox:checked::before,
      .inv-checkbox:active::before {
        content: 'check';
        position: absolute;
        top: -1px;
        left: -1px;
        color: var(--color-system--white);
        direction: ltr;
        display: inline-block;
        font-family: 'Material Icons';
        font-size: 16px;
        font-style: normal;
        font-weight: bold;
        letter-spacing: normal;
        line-height: 1;
        text-transform: none;
        white-space: nowrap;
        word-wrap: normal;
        font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
      }

      .inv-checkbox:disabled:hover {
        border-color: var(--color-default--light);
        cursor: not-allowed;
      }

      .inv-checkbox:disabled:checked,
      .inv-checkbox:disabled:checked:hover {
        border-color: var(--color-default--light);
        background-color: var(--color-default--light);
        cursor: not-allowed;
      }

      .inv-checkbox:disabled:checked:hover::before,
      .inv-checkbox:disabled:active:hover::before {
        color: var(--color-system--white);
      }

  `
- URL: /components/raw/checkbox/checkbox.css
- Filesystem Path: src/components/checkbox/checkbox.css
- Size: 1.6 KB

- Handle: @checkbox--default
- Variants (2): Default , Disabled
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/checkbox/checkbox.hbs
- Referenced by (5): @input-addon, @input-addon--disabled, @input-addon--icon, @list, @list--multiselect

## Checkboxes

Campos de checkbox da aplicação

Tendo a classe base `.inv-checkbox`, podendo ser utilizado apenas com a tag `input type="checkbox"`

### Default Checkbox

Checkbox padrão, comum para ações regulares dos usuários.

`

    <input type="checkbox" class="inv-checkbox" />

`