MIUN - Design Library

FileInput 

<div class="file-input-container">
    <div id="file-js-example" class="file has-name">
        <label class="file-label" for="fileupload">
      <input class="file-input" type="file" name="fileupload" id="fileupload" value="file.jpg"  placeholder="">
      <span class="file-cta">
        <span class="file-icon">
          <i class="material-icons">cloud_upload</i>
        </span>
        <span class="file-label">
          Välj fil för överföring
        </span>
      </span>
      <span class="file-name">
        Ingen fil vald
      </span>
    </label>
    </div>
</div>
 
<div class="file-input-container">
  <div id="file-js-example" class="file has-name">
    <label class="file-label" for="{{nameId}}">
      <input class="file-input" type="file" name="{{nameId}}" id="{{nameId}}" {{#if value}}value="{{value}}" {{/if}} placeholder="{{placeholder}}">
      <span class="file-cta">
        <span class="file-icon">
          <i class="material-icons">cloud_upload</i>
        </span>
        <span class="file-label">
          {{heading}}
        </span>
      </span>
      <span class="file-name">
        {{noFile}}
      </span>
    </label>
  </div>
</div>
 
{
  "nameId": "fileupload",
  "heading": "Välj fil för överföring",
  "noFile": "Ingen fil vald",
  "value": "file.jpg",
  "placeholder": ""
}
  • Content: 
    const fileInput = document.querySelector('#file-js-example input[type=file]');
if(fileInput) {
  fileInput.onchange = () => {
    if (fileInput.files.length > 0) {
      const fileName = document.querySelector('#file-js-example .file-name');
      fileName.textContent = fileInput.files[0].name;
    }
  }
}
  • URL: /components/raw/fileinput/FileInput.js
  • Filesystem Path: src\components\01-global_components\FileInput\FileInput.js
  • Size: 317 Bytes
  • Content: 
    .file-input-container {
  
.file {
    align-items: stretch;
    display: flex;
    justify-content: flex-start;
    position: relative
}

.file.is-white .file-cta {
    background-color: #fff;
    border-color: transparent;
    color: #0a0a0a
}

.file.is-white.is-hovered .file-cta,.file.is-white:hover .file-cta {
    background-color: #f9f9f9;
    border-color: transparent;
    color: #0a0a0a
}

.file.is-white.is-focused .file-cta,.file.is-white:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(255,255,255,.25);
    color: #0a0a0a
}

.file.is-white.is-active .file-cta,.file.is-white:active .file-cta {
    background-color: #f2f2f2;
    border-color: transparent;
    color: #0a0a0a
}

.file.is-black .file-cta {
    background-color: #0a0a0a;
    border-color: transparent;
    color: #fff
}

.file.is-black.is-hovered .file-cta,.file.is-black:hover .file-cta {
    background-color: #040404;
    border-color: transparent;
    color: #fff
}

.file.is-black.is-focused .file-cta,.file.is-black:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(10,10,10,.25);
    color: #fff
}

.file.is-black.is-active .file-cta,.file.is-black:active .file-cta {
    background-color: #000;
    border-color: transparent;
    color: #fff
}

.file.is-light .file-cta {
    background-color: #f5f5f5;
    border-color: transparent;
    color: rgba(0,0,0,.7)
}

.file.is-light.is-hovered .file-cta,.file.is-light:hover .file-cta {
    background-color: #eee;
    border-color: transparent;
    color: rgba(0,0,0,.7)
}

.file.is-light.is-focused .file-cta,.file.is-light:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(245,245,245,.25);
    color: rgba(0,0,0,.7)
}

.file.is-light.is-active .file-cta,.file.is-light:active .file-cta {
    background-color: #e8e8e8;
    border-color: transparent;
    color: rgba(0,0,0,.7)
}

.file.is-dark .file-cta {
    background-color: #363636;
    border-color: transparent;
    color: #fff
}

.file.is-dark.is-hovered .file-cta,.file.is-dark:hover .file-cta {
    background-color: #2f2f2f;
    border-color: transparent;
    color: #fff
}

.file.is-dark.is-focused .file-cta,.file.is-dark:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(54,54,54,.25);
    color: #fff
}

.file.is-dark.is-active .file-cta,.file.is-dark:active .file-cta {
    background-color: #292929;
    border-color: transparent;
    color: #fff
}

.file.is-primary .file-cta {
    background-color: #00d1b2;
    border-color: transparent;
    color: #fff
}

.file.is-primary.is-hovered .file-cta,.file.is-primary:hover .file-cta {
    background-color: #00c4a7;
    border-color: transparent;
    color: #fff
}

.file.is-primary.is-focused .file-cta,.file.is-primary:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(0,209,178,.25);
    color: #fff
}

.file.is-primary.is-active .file-cta,.file.is-primary:active .file-cta {
    background-color: #00b89c;
    border-color: transparent;
    color: #fff
}

.file.is-link .file-cta {
    background-color: #3273dc;
    border-color: transparent;
    color: #fff
}

.file.is-link.is-hovered .file-cta,.file.is-link:hover .file-cta {
    background-color: #276cda;
    border-color: transparent;
    color: #fff
}

.file.is-link.is-focused .file-cta,.file.is-link:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(50,115,220,.25);
    color: #fff
}

.file.is-link.is-active .file-cta,.file.is-link:active .file-cta {
    background-color: #2366d1;
    border-color: transparent;
    color: #fff
}

.file.is-info .file-cta {
    background-color: #3298dc;
    border-color: transparent;
    color: #fff
}

.file.is-info.is-hovered .file-cta,.file.is-info:hover .file-cta {
    background-color: #2793da;
    border-color: transparent;
    color: #fff
}

.file.is-info.is-focused .file-cta,.file.is-info:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(50,152,220,.25);
    color: #fff
}

.file.is-info.is-active .file-cta,.file.is-info:active .file-cta {
    background-color: #238cd1;
    border-color: transparent;
    color: #fff
}

.file.is-success .file-cta {
    background-color: #48c774;
    border-color: transparent;
    color: #fff
}

.file.is-success.is-hovered .file-cta,.file.is-success:hover .file-cta {
    background-color: #3ec46d;
    border-color: transparent;
    color: #fff
}

.file.is-success.is-focused .file-cta,.file.is-success:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(72,199,116,.25);
    color: #fff
}

.file.is-success.is-active .file-cta,.file.is-success:active .file-cta {
    background-color: #3abb67;
    border-color: transparent;
    color: #fff
}

.file.is-warning .file-cta {
    background-color: #ffdd57;
    border-color: transparent;
    color: rgba(0,0,0,.7)
}

.file.is-warning.is-hovered .file-cta,.file.is-warning:hover .file-cta {
    background-color: #ffdb4a;
    border-color: transparent;
    color: rgba(0,0,0,.7)
}

.file.is-warning.is-focused .file-cta,.file.is-warning:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(255,221,87,.25);
    color: rgba(0,0,0,.7)
}

.file.is-warning.is-active .file-cta,.file.is-warning:active .file-cta {
    background-color: #ffd83d;
    border-color: transparent;
    color: rgba(0,0,0,.7)
}

.file.is-danger .file-cta {
    background-color: #f14668;
    border-color: transparent;
    color: #fff
}

.file.is-danger.is-hovered .file-cta,.file.is-danger:hover .file-cta {
    background-color: #f03a5f;
    border-color: transparent;
    color: #fff
}

.file.is-danger.is-focused .file-cta,.file.is-danger:focus .file-cta {
    border-color: transparent;
    box-shadow: 0 0 .5em rgba(241,70,104,.25);
    color: #fff
}

.file.is-danger.is-active .file-cta,.file.is-danger:active .file-cta {
    background-color: #ef2e55;
    border-color: transparent;
    color: #fff
}

.file.is-small {
    font-size: .75rem
}

.file.is-medium {
    font-size: 1.25rem
}

.file.is-medium .file-icon .fa {
    font-size: 21px
}

.file.is-large {
    font-size: 1.5rem
}

.file.is-large .file-icon .fa {
    font-size: 28px
}

.file.has-name .file-cta {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.file.has-name .file-name {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

.file.has-name.is-empty .file-cta {
    border-radius: 4px
}

.file.has-name.is-empty .file-name {
    display: none
}

.file.is-boxed .file-label {
    flex-direction: column
}

.file.is-boxed .file-cta {
    flex-direction: column;
    height: auto;
    padding: 1em 3em
}

.file.is-boxed .file-name {
    border-width: 0 1px 1px
}

.file.is-boxed .file-icon {
    height: 1.5em;
    width: 1.5em
}

.file.is-boxed .file-icon .fa {
    font-size: 21px
}

.file.is-boxed.is-small .file-icon .fa {
    font-size: 14px
}

.file.is-boxed.is-medium .file-icon .fa {
    font-size: 28px
}

.file.is-boxed.is-large .file-icon .fa {
    font-size: 35px
}

.file.is-boxed.has-name .file-cta {
    border-radius: 4px 4px 0 0
}

.file.is-boxed.has-name .file-name {
    border-radius: 0 0 4px 4px;
    border-width: 0 1px 1px
}

.file.is-centered {
    justify-content: center
}

.file.is-fullwidth .file-label {
    width: 100%
}

.file.is-fullwidth .file-name {
    flex-grow: 1;
    max-width: none
}

.file.is-right {
    justify-content: flex-end
}

.file.is-right .file-cta {
    border-radius: 0 4px 4px 0
}

.file.is-right .file-name {
    border-radius: 4px 0 0 4px;
    border-width: 1px 0 1px 1px;
    order: -1
}

.file-label {
    align-items: stretch;
    display: flex;
    cursor: pointer;
    justify-content: flex-start;
    overflow: hidden;
    position: relative
}

.file-label:hover .file-cta {
    background-color: #eee;
    color: #363636
}

.file-label:hover .file-name {
    border-color: #d5d5d5
}

.file-label:active .file-cta {
    background-color: #e8e8e8;
    color: #363636
}

.file-label:active .file-name {
    border-color: #cfcfcf
}

.file-input {
    height: 100%;
    left: 0;
    opacity: 0;
    outline: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.file-cta,.file-name {
    border-color: #dbdbdb;
    border-radius: 4px;
    font-size: 1em;
    padding-left: 1em;
    padding-right: 1em;
    white-space: nowrap
}

.file-cta {
    background-color: #f5f5f5;
    color: #4a4a4a;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $xs-space;
}

.file-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $xs-space;
    border-color: #dbdbdb;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    display: block;
    max-width: 16em;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis
}

.file-icon {
    align-items: center;
    display: flex;
    height: 1em;
    justify-content: center;
    margin-right: .5em;
    width: 1em
}

.file-icon .fa {
    font-size: 14px
}
}
  • URL: /components/raw/fileinput/FileInput.scss
  • Filesystem Path: src\components\01-global_components\FileInput\FileInput.scss
  • Size: 9.5 KB

There are no notes for this item.