Violin.css

# Input File

WIP

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

`

    <!-- Default -->
    <div class="inv-input-file__container">
        <label for="error" class="inv-label ">
        Input label
        <span>- obrigatório</span>
      </label>
        <div class="inv-input-file">
            <button class="inv-input-file__btn ">
          Enviar arquivo <i class="material-icons inv-input-icon ">
      file_upload
    </i>

        </button>
            <input type="file" /> <button class="inv-clear-input" disabled>
      <i class="material-icons">clear</i>
    </button>

        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- File Selected -->
    <div class="inv-input-file__container">
        <label for="error" class="inv-label ">
        Input label
        <span>- obrigatório</span>
      </label>
        <div class="inv-input-file">
            <button class="inv-input-file__btn ">
          Enviar arquivo <i class="material-icons inv-input-icon ">
      file_upload
    </i>

        </button>
            <input type="file" /> <button class="inv-clear-input">
      <i class="material-icons">clear</i>
    </button>

        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Input File Disabled -->
    <div class="inv-input-file__container">
        <label for="error" class="inv-label inv-label--disabled">
        Input label
        <span>- obrigatório</span>
      </label>
        <div class="inv-input-file">
            <button class="inv-input-file__btn inv-input-file__btn--disabled">
          Enviar arquivo <i class="material-icons inv-input-icon ">
      file_upload
    </i>

        </button>
            <input type="file" disabled /> <button class="inv-clear-input" disabled>
      <i class="material-icons">clear</i>
    </button>

        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Input File Required -->
    <div class="inv-input-file__container">
        <label for="error" class="inv-label ">
        Input label
        <span>- obrigatório</span>
      </label>
        <div class="inv-input-file">
            <button class="inv-input-file__btn inv-input-file__btn--required">
          Enviar arquivo <i class="material-icons inv-input-icon ">
      file_upload
    </i>

        </button>
            <input type="file" /> <button class="inv-clear-input" disabled>
      <i class="material-icons">clear</i>
    </button>

        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Input File Error -->
    <div class="inv-input-file__container">
        <label for="error" class="inv-label ">
        Input label
        <span>- obrigatório</span>
      </label>
        <div class="inv-input-file">
            <button class="inv-input-file__btn inv-input-file__btn--error">
          visitas.txt <i class="material-icons inv-input-icon ">
      file_upload
    </i>

        </button>
            <input type="file" /> <button class="inv-clear-input">
      <i class="material-icons">clear</i>
    </button>

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

`
`

    <div class="inv-input-file__container">
      {{> @label}}
      <div class="inv-input-file">
        <button class="inv-input-file__btn {{input-file.modifier}}">
          {{input-file.button-text}} {{> @input-icon}}
        </button>
        <input type="file" {{ternary input-file.disabled "disabled" "" }} /> {{> @clear-input}}
      </div>
      {{> @form-text}}
    </div>

`
`

    /* Default */
    {
      "label": {
        "value": "Input label",
        "posfix": "- obrigatório",
        "for": "error"
      },
      "input-file": {
        "button-text": "Enviar arquivo"
      },
      "input-icon": {
        "icon": "file_upload"
      },
      "clear-input": {
        "disabled": true
      }
    }

    /* File Selected */
    {
      "label": {
        "value": "Input label",
        "posfix": "- obrigatório",
        "for": "error"
      },
      "input-file": {
        "button-text": "Enviar arquivo"
      },
      "input-icon": {
        "icon": "file_upload"
      }
    }

    /* Input File Disabled */
    {
      "label": {
        "value": "Input label",
        "posfix": "- obrigatório",
        "for": "error",
        "modifier": "inv-label--disabled"
      },
      "input-file": {
        "button-text": "Enviar arquivo",
        "modifier": "inv-input-file__btn--disabled",
        "disabled": true
      },
      "input-icon": {
        "icon": "file_upload"
      },
      "clear-input": {
        "disabled": true
      }
    }

    /* Input File Required */
    {
      "label": {
        "value": "Input label",
        "posfix": "- obrigatório",
        "for": "error"
      },
      "input-file": {
        "button-text": "Enviar arquivo",
        "modifier": "inv-input-file__btn--required"
      },
      "input-icon": {
        "icon": "file_upload"
      },
      "clear-input": {
        "disabled": true
      }
    }

    /* Input File Error */
    {
      "label": {
        "value": "Input label",
        "posfix": "- obrigatório",
        "for": "error"
      },
      "input-file": {
        "button-text": "visitas.txt",
        "modifier": "inv-input-file__btn--error"
      },
      "input-icon": {
        "icon": "file_upload"
      },
      "form-text": {
        "value": "Cara, nunca vi uma senha menos segura.",
        "modifier": "inv-form-text--error"
      }
    }

`
File:

- Content:
  `

      .inv-input-file__container {
        display: flex;
        flex-direction: column;
      }

      .inv-input-file {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 293px;
        max-width: 293px;
      }

      .inv-input-file__btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        width: 252px;
        max-width: 252px;
        border: none;
        border-radius: 3px 0 0 3px;
        color: var(--color-system--regular);
        background-color: var(--color-system--light);
        font-size: 14px;
        padding-left: 16px;
        padding-right: 8px;
      }

      .inv-input-file__btn--disabled {
        color: var(--color-default--regular);
        background-color: var(--color-default--white);
      }

      .inv-input-file__btn--required {
        color: var(--color-default--regular);
        background-color: var(--color-error--white);
        box-shadow: var(--shadow-border-2) var(--color-error--regular) inset;
      }

      .inv-input-file__btn--error {
        color: var(--color-system--dark);
        background-color: var(--color-error--white);
        box-shadow: var(--shadow-border-2) var(--color-error--regular) inset;
      }

      .inv-input-file input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
      }

      .inv-input-file > .inv-clear-input {
        position: absolute;
        top: 0;
        right: 0;
      }

      .inv-input-file__btn--disabled > .inv-input-icon {
        color: var(--color-default--light);
      }

  `
- URL: /components/raw/input-file/input-file.css
- Filesystem Path: src/components/input-file/input-file.css
- Size: 1.3 KB

- Handle: @input-file
- Variants (5): Default , File Selected , Input File Disabled , Input File Required , Input File Error
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/input-file/input-file.hbs
- References (4): @label, @input-icon, @clear-input, @form-text

There are no notes for this item.