1/**
2  * Used for file upload
3  * Markup
4      <div class="file-upload">
5        <label for="upload_cert_new" class="file-upload-btn btn btn-secondary" tabindex="0">Choose file</label>
6        <input
7          name="upload_cert_new"
8          id="upload_cert_new"
9          type="file"
10          file="newCertificate.file"
11          class="file-upload-input"/>
12        <div class="form__field file-upload-container">
13          <span ng-hide="newCertificate.file">No file selected</span>
14          <span>{{ newCertificate.file.name }}</span>
15          <button
16            type="reset"
17            class="btn file-upload-reset"
18            ng-if="newCertificate.file.name"
19            ng-click="newCertificate.file = '';"
20            aria-label="remove selected file">
21            <icon file="icon-close.svg" aria-hidden="true"></icon>
22          </button>
23        </div>
24      </div>
25*/
26
27// Choose/upload button
28.file-upload-input {
29  width: 1px;
30  height: 1px;
31  opacity: 0;
32  overflow: hidden;
33  position: absolute;
34  z-index: -1;
35}
36
37.file-upload-input:focus {
38  outline: 0.2rem solid $base-02--04;
39}
40
41// File name of uploaded file field
42.file-upload-container {
43  background: $background-02;
44  padding: 0.5rem;
45  span {
46    padding-left: .5rem;
47  }
48  .file-upload-reset {
49    float: right;
50    margin-top: -.5rem;
51    icon {
52      margin-right: -1.7em;
53      margin-left: -1.5em;
54    }
55  }
56}
57