chore: redoing css changes - Part #2

bcgov · Oct 10, 2023 · 009266a · 009266a
1 parent 0e29fcf
commit 009266a
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 48 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -83,19 +83,21 @@ toastBus.on(openToast)
     </cds-modal-header>
     <cds-modal-body><p></p></cds-modal-body>
 
-    <cds-modal-footer>
-        <cds-modal-footer-button 
-          kind="secondary" 
-          data-modal-close>
-          Cancel
-        </cds-modal-footer-button>
-
-        <cds-modal-footer-button 
-          kind="danger"
-          v-on:click="deleteContentModal">
-          Delete
-          <Delete16 slot="icon" />
-        </cds-modal-footer-button>
+      <cds-modal-footer>
+          <cds-modal-footer-button 
+            kind="secondary"
+            data-modal-close
+            class="cds--modal-close-btn">
+            Cancel
+          </cds-modal-footer-button>
+
+          <cds-modal-footer-button 
+            kind="danger"
+            class="cds--modal-submit-btn"
+            v-on:click="deleteContentModal">
+            Delete
+            <Delete16 slot="icon" />
+          </cds-modal-footer-button>
 
       </cds-modal-footer>
   </cds-modal>

diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -69,13 +69,16 @@ cds-button::part(button) {
 cds-button span {
   width:11rem;
 }
+
 .step-active {
   --cds-border-subtle: var(--light-theme-miscellaneous-interactive);
 }
+
 .cds--progress-label {
   overflow: visible !important;
 
 }
+
 .cds--progress-label:hover {
   box-shadow: none !important;
   text-decoration: underline;
@@ -86,6 +89,7 @@ cds-inline-notification::part(div), cds-inline-notification, .cds--inline-notifi
   max-width: 100%;
   border-radius: 0.25rem;
 }
+
 cds-actionable-notification::part(div), cds-actionable-notification, .cds--actionable-notification {
   max-width: 100%;
   border-radius: 0.25rem;
@@ -853,19 +857,29 @@ div#app {
   align-self: stretch;
 }
 
-.modal-footer {
-  justify-content: center;
-  align-content: stretch;
-  padding: 1rem;
-  display: flex;
-  align-self: stretch;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  flex-grow: 1;
+cds-modal::part(dialog) {
+  border-radius: 0.5rem;
 }
 
-.bx--modal-btn {
-  flex-grow: 1;
+cds-modal-close-button::part(button) {
+  border-radius: 0.5rem;
+}
+
+cds-modal-footer {
+  padding: 3rem 1rem 1rem 1rem;
+}
+
+cds-modal-footer-button::part(button) {
+  border-radius: 0.25rem;
+  height: 75%;
+}
+
+.cds--modal-close-btn {
+  margin-right: 0.25rem;
+}
+
+.cds--modal-submit-btn {
+  margin-left: 0.25rem;
 }
 
 cds-accordion-item[open]:not([disabled])::part(content) ,:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--md {
@@ -911,31 +925,30 @@ cds-accordion-item.grouping-05-internal::part(title) {
     top: 0.5rem;
   }
 
-  bx-modal::part(dialog) {
-    max-height: 21.25rem;
-    position: relative;
-    margin-bottom: 0;
-    margin-top: auto;
-  }
-
-  .bx--modal-btn-divider {
-    display: none;
+  cds-modal {
+    height: 100%;
+    width: 100%;
   }
 
-  bx-modal-footer {
-    height: 8rem;
-    padding: 0 1rem 0 1rem;
-    margin: 0;
+  cds-modal::part(dialog) {
+    max-height: 20.5rem;
+    margin-bottom: 0;
+    margin-top: auto;
+    position: relative;
   }
 
-  .bx--modal-btn {
-    height: 1.13rem !important;
-    position: absolute;
-    width: 90%;
+  .cds--modal-close-btn, .cds--modal-submit-btn {
+    margin: 0rem;
+    width: 100%;
   }
 
-  .bx--modal-btn2 {
-    bottom: 2.5rem;
+  cds-modal-footer {
+    display: flex;
+    padding: 0rem 1rem 1rem 1rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    align-self: stretch;
   }
 
   .screen {

diff --git a/frontend/src/components/forms/TextInputComponent.vue b/frontend/src/components/forms/TextInputComponent.vue
@@ -103,9 +103,4 @@ watch(() => props.modelValue,() => selectedValue.value = props.modelValue)
 </template>
 
 <style scoped>
-.bx-input-disabled {
-  height: 2.5rem;
-  color: var(--light-theme-text-text-primary, #131315);
-  padding-top: 0.69rem;
-}
 </style>