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
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