Fix certificate management tabbing

- Adds focus to "choose file" button when replacing certificate
- Adds input-file.scss to elements

Tested:
- Passes DAP
- Tabs correctly in all browsers

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I48c61f4176bc3e3fe55425dafc79e8f2edb934b2

2 files changed, 26 insertions, 0 deletions

diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 0588813..66a2877 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -3,6 +3,7 @@
 @import "status";
 @import "alerts";
 @import "inline-confirm";
+@import "input-file";
 @import "accordion";
 @import "loader";
 @import "content-search";
diff --git a/app/common/styles/elements/input-file.scss b/app/common/styles/elements/input-file.scss
new file mode 100644
index 0000000..3f32b2b
--- /dev/null
+++ b/app/common/styles/elements/input-file.scss
@@ -0,0 +1,25 @@
+/**
+  * Used for file upload "choose file" button
+  * Markup (example for certificate upload)
+    <label>
+      <input
+      id="upload_{{cert.Description + cert.Id}}"
+      type="file"
+      file="cert.file"
+      class="input-file" />
+      <span class="btn btn-secondary">Choose file</span>
+    </label>
+*/
+
+.input-file {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.input-file:focus + span {
+  outline: 0.2rem solid $box-shadow-color;
+}
\ No newline at end of file