Update certificate management page consistency
This change applies global styles to improve
page layout consistency and modal management
- Adds page and section styles
- Removes unused styles
- Creates individual html files for modals
- Updates certificate modals to bootstrap modal
- Updates global styles for input file field in file-upload.scss
TODO:
- Update certificate table with table component in separate commit
- Update CSR modal to use global form-field styles in separate commit
Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I9b800cb684740da1a9168294433e726efb0f9d0e
diff --git a/app/common/styles/elements/file-upload.scss b/app/common/styles/elements/file-upload.scss
new file mode 100644
index 0000000..4704d6d
--- /dev/null
+++ b/app/common/styles/elements/file-upload.scss
@@ -0,0 +1,56 @@
+/**
+ * Used for file upload
+ * Markup
+ <div class="file-upload">
+ <label for="upload_cert_new" class="file-upload-btn btn btn-secondary" tabindex="0">Choose file</label>
+ <input
+ name="upload_cert_new"
+ id="upload_cert_new"
+ type="file"
+ file="newCertificate.file"
+ class="file-upload-input"/>
+ <div class="form__field file-upload-container">
+ <span ng-hide="newCertificate.file">No file selected</span>
+ <span>{{ newCertificate.file.name }}</span>
+ <button
+ type="reset"
+ class="btn file-upload-reset"
+ ng-if="newCertificate.file.name"
+ ng-click="newCertificate.file = '';"
+ aria-label="remove selected file">
+ <icon file="icon-close.svg" aria-hidden="true"></icon>
+ </button>
+ </div>
+ </div>
+*/
+
+// Choose/upload button
+.file-upload-input {
+ width: 1px;
+ height: 1px;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ z-index: -1;
+}
+
+.file-upload-input:focus {
+ outline: 0.2rem solid $base-02--04;
+}
+
+// File name of uploaded file field
+.file-upload-container {
+ background: $background-02;
+ padding: 0.5rem;
+ span {
+ padding-left: .5rem;
+ }
+ .file-upload-reset {
+ float: right;
+ margin-top: -.5rem;
+ icon {
+ margin-right: -1.7em;
+ margin-left: -1.5em;
+ }
+ }
+}