Violin.css

# Input File: Error Active

Ready

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

`

    <div class="inv-input-file inv-input-file--selected inv-input-file--error">
        <label for="input-file" class="inv-input-file__text inv-input-file__text--error inv-input-file__text--error-active">
        <span>file.txt</span>
        <i class="material-icons inv-input-file-icon ">file_upload</i>
      </label>
        <input id="input-file" type="file" />
        <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

`
`

    <div class="inv-input-file {{ input-file.modifier }}">
      <label for="input-file" class="inv-input-file__text {{ input-file.text.modifier }}">
        <span>{{ input-file.placeholder }}</span>
        <i class="material-icons inv-input-file-icon {{ input-file.icon.modifier }}">file_upload</i>
      </label>
      <input id="input-file" type="file" {{ternary input-file.input.disabled "disabled" "" }}/>
      {{> @clear-input}}
    </div>

`
`

    {
      "input-file": {
        "placeholder": "file.txt",
        "modifier": "inv-input-file--selected inv-input-file--error",
        "text": {
          "modifier": "inv-input-file__text--error inv-input-file__text--error-active"
        }
      },
      "clear-input": {
        "disabled": null
      }
    }

`
File:

- Content:
  `

      .inv-input-file > input[type='file'] {
        display: none;
      }

      .inv-input-file {
        min-height: 40px;
        max-width: 252px;
        display: flex;
        color: var(--color-default--regular);
        font-size: 14px;
        cursor: pointer;
        user-select: none;
      }

      .inv-input-file--selected {
        color: var(--color-system--dark);
      }

      .inv-input-file--disabled {
        cursor: not-allowed;
      }

      .inv-input-file-icon {
        position: absolute;
        right: 0;
        padding-right: 8px;
        color: var(--color-system--regular);
      }

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

      .inv-input-file__text {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        background-color: var(--color-system--light);
        border-radius: 4px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border: none;
        outline: none;
        min-height: 40px;
        min-width: 252px;
        padding-left: 16px;
        padding-right: 32px;
        transition: background-color 0.1s ease-in-out;
      }

      .inv-input-file__text > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        direction: rtl;
        text-align: left;
        padding-right: 8px;
      }

      .inv-input-file > .inv-input-file__text:active,
      .inv-input-file__text--active {
        background-color: var(--color-default--light);
      }

      .inv-input-file__text--disabled {
        background-color: var(--color-default--white);
        pointer-events: none;
      }

      .inv-input-file__text--error {
        background-color: var(--color-error--white);
        -webkit-appearance: none;
        -webkit-box-shadow: var(--shadow-border-2) var(--color-error--regular) inset;
        box-shadow: var(--shadow-border-2) var(--color-error--regular) inset;
      }

      .inv-input-file > .inv-input-file__text--error:active,
      .inv-input-file__text--error-active {
        background-color: var(--color-error--light);
      }

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

- Handle: @input-file--error-active
- Variants (8): Default , Active , File Name , Long File Name , Disabled , Error , Error Uploaded , Error Active
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/input-file/input-file.hbs
- References (1): @clear-input

There are no notes for this item.