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/access-control/styles/certificate.scss b/app/access-control/styles/certificate.scss
index a7c57f2..2d882f4 100644
--- a/app/access-control/styles/certificate.scss
+++ b/app/access-control/styles/certificate.scss
@@ -1,7 +1,7 @@
+// TODO: replace cert table with table component
.certificate__table {
border-left: 1px solid $border-color-01;
border-right: 1px solid $border-color-01;
- margin-top: 0.5em;
.table__row-header {
width: 100%;
border-bottom: 1px solid $border-color-01;
@@ -104,60 +104,22 @@
padding: 0.8em 0.8em 0.8em 1.5em;
}
.upload__certificate {
- border-top: 1px solid $border-color-01;
width: 100%;
background: $background-02;
- padding: 0.8em;
+ padding: 0.8em 1.8em 0.8em 0.8em;
+ height: 4rem;
+ display: flex;
}
-}
-.certificate__upload-chooser {
- background: $background-02;
-}
-
-
-.certificate__close-modal {
- float: right;
- position: relative;
- bottom: 1rem;
- left: 2rem;
-}
-.certificate__table__icon {
- margin-left: 1.5em;
- margin-bottom: .4em;
-}
-
-.add__certificate__modal {
- select {
- margin-bottom: 0;
- }
- .file__upload {
- margin-bottom: 2em;
- }
- .select__new-label {
- margin-bottom: 1em;
- }
- .select__new-button {
- font-size: 1.2em;
- }
- .file__name {
- background-color: $background-02;
- padding: 0.5em;
+ .replace-btn {
+ margin-left: auto;
}
}
-.add-certificate__section {
- padding-left: 0;
+.cert-dropdown{
+ margin-bottom: 0;
}
-// Combinator needed to match specificity
-// of default modal settings
-.modal.add-csr__modal {
- width: 100%;
- max-height: 100vh;
- overflow-y: auto;
- z-index: 1001;
-}
-
+// TODO: Update CSR modal with global form-field styles
.add-csr__section:first-of-type {
padding-left: 0;
}
@@ -171,11 +133,6 @@
}
}
-.add-csr__section-title {
- margin-bottom: 1rem;
- font-weight: 700;
-}
-
.add-csr__section--border {
@media (min-width: 640px) {
padding-left: 2rem;
@@ -183,11 +140,6 @@
}
}
-.add-csr__label {
- white-space: nowrap;
- display: inline-block;
-}
-
.add-csr__text-helper {
color: $base-02--02;
font-weight: 400;
@@ -224,10 +176,8 @@
}
.add-csr__alt-name-delete-btn {
- width: 20px;
- height: 30px;
- padding: 0;
-
+ height: 34px;
+ padding: 0 0 0 1rem;
icon {
margin-right: 0;
}