Violin.css

Input File 

<!-- Default -->
<div class="inv-input-file ">
    <label for="input-file" class="inv-input-file__text ">
        <span>Enviar arquivo</span>
        <i class="material-icons inv-input-file-icon ">file_upload</i>
    </label>
    <input id="input-file" type="file" />
    <button class="inv-clear-input" disabled>
        <i class="material-icons">clear</i>
    </button>
</div>


<!-- Active -->
<div class="inv-input-file ">
    <label for="input-file" class="inv-input-file__text inv-input-file__text--active">
        <span>Enviar arquivo</span>
        <i class="material-icons inv-input-file-icon ">file_upload</i>
    </label>
    <input id="input-file" type="file" />
    <button class="inv-clear-input" disabled>
        <i class="material-icons">clear</i>
    </button>
</div>


<!-- File Name -->
<div class="inv-input-file inv-input-file--selected">
    <label for="input-file" class="inv-input-file__text ">
        <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>


<!-- Long File Name -->
<div class="inv-input-file inv-input-file--selected">
    <label for="input-file" class="inv-input-file__text ">
        <span>file-name-too-long-to-fit-the-input.txt-long-to-fit-the-input.txt-long-to-fit-the-input.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>


<!-- Disabled -->
<div class="inv-input-file inv-input-file--disabled">
    <label for="input-file" class="inv-input-file__text inv-input-file__text--disabled">
        <span>Enviar arquivo</span>
        <i class="material-icons inv-input-file-icon inv-input-file-icon--disabled">file_upload</i>
    </label>
    <input id="input-file" type="file" disabled />
    <button class="inv-clear-input" disabled>
        <i class="material-icons">clear</i>
    </button>
</div>


<!-- Error -->
<div class="inv-input-file inv-input-file--error">
    <label for="input-file" class="inv-input-file__text inv-input-file__text--error">
        <span>Enviar arquivo</span>
        <i class="material-icons inv-input-file-icon ">file_upload</i>
    </label>
    <input id="input-file" type="file" />
    <button class="inv-clear-input" disabled>
        <i class="material-icons">clear</i>
    </button>
</div>


<!-- Error Uploaded -->
<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">
        <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>


<!-- Error Active -->
<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>
 
/* Default */
{
  "input-file": {
    "placeholder": "Enviar arquivo"
  },
  "clear-input": {
    "disabled": true
  }
}


/* Active */
{
  "input-file": {
    "placeholder": "Enviar arquivo",
    "text": {
      "modifier": "inv-input-file__text--active"
    }
  },
  "clear-input": {
    "disabled": true
  }
}


/* File Name */
{
  "input-file": {
    "placeholder": "file.txt",
    "modifier": "inv-input-file--selected"
  },
  "clear-input": {
    "disabled": false
  }
}


/* Long File Name */
{
  "input-file": {
    "placeholder": "file-name-too-long-to-fit-the-input.txt-long-to-fit-the-input.txt-long-to-fit-the-input.txt",
    "modifier": "inv-input-file--selected"
  },
  "clear-input": {
    "disabled": false
  }
}


/* Disabled */
{
  "input-file": {
    "placeholder": "Enviar arquivo",
    "modifier": "inv-input-file--disabled",
    "text": {
      "modifier": "inv-input-file__text--disabled"
    },
    "icon": {
      "modifier": "inv-input-file-icon--disabled"
    },
    "input": {
      "disabled": true
    }
  },
  "clear-input": {
    "disabled": true
  }
}


/* Error */
{
  "input-file": {
    "placeholder": "Enviar arquivo",
    "modifier": "inv-input-file--error",
    "text": {
      "modifier": "inv-input-file__text--error"
    }
  },
  "clear-input": {
    "disabled": true
  }
}


/* Error Uploaded */
{
  "input-file": {
    "placeholder": "file.txt",
    "modifier": "inv-input-file--selected inv-input-file--error",
    "text": {
      "modifier": "inv-input-file__text--error"
    }
  },
  "clear-input": {
    "disabled": false
  }
}


/* Error Active */
{
  "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": false
  }
}
  • 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

There are no notes for this item.