modal updates

src/digital-components/modal/modal.vue

@@ -36,7 +36,7 @@
                 <div class="modal-body">
                     <slot></slot>
                 </div>
-                <div class="modal-footer px-5 py-5">
+                <div class="modal-footer">
                     <buttonMain
                         id="modalbtn"
                         ref="modalButtonMain"
@@ -157,8 +157,11 @@ export default {
 @import "@/styles/ux-variables-svg-strings.scss";
 
 .modal {
-    top: auto;
+    position: fixed;
+    top: 0;
+    right: 0;
     bottom: 0;
+    left: 0;
     h5,
     strong,
     .subheader-text {
@@ -203,9 +206,17 @@ export default {
         .modal-dialog {
             display: flex;
             max-width: 37.5rem;
+            min-height: auto;
+             .modal-content {
+                box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
+                border: 1px solid;
+                border-radius: 5px;
+                overflow: auto;
+            }
             .modal-content {
                 margin: 1.5rem auto 0 auto;
                 .modal-body {
+                    padding: 0 1.5rem 0 1.5rem;
                     .col {
                         max-width: 100%;
                     }
@@ -214,6 +225,11 @@ export default {
                     }
                     ul {
                         margin-bottom: 0;
+                        padding-left: 20px;
+                    }
+                    li {
+                        margin-bottom: 0.5rem;
+                        line-height: 22px;
                     }
                     p {
                         &:last-child {
@@ -242,15 +258,9 @@ export default {
                 }
             }
         }
-        &.show .modal-dialog {
-            &.modal-dialog-edge {
-                @include media-breakpoint-up(md) {
-                    transform: translateY(0);
-                }
-            }
-        }
         .modal-footer {
             border-top: none;
+            padding: 10px 1.5rem 1.5rem 1.5rem;
 
             button {
                 margin: 0;

src/iss-components/content-group-modal/content-group-modal.vue

@@ -6,14 +6,14 @@
         @footerButtonEvent="footerButtonClick">
         <img
             :src="ModalImage"
-            class="mw-100 d-flex mb-4"
+            class="mw-100 d-flex"
             alt="" />
         <h5
-            class="mb-4"
+            class="header-text"
             :class="cssModalHeadlineClass"
             v-html="ModalHeadline"></h5>
         <p
-            class="fw-bold mb-2 subheader-text"
+            class="fw-bold subheader-text"
             v-html="ModalSubheadertext"></p>
         <p
             class="mb-0"
@@ -79,6 +79,10 @@ export default {
         .modal-dialog {
             .modal-content {
                 .modal-body {
+                    .header-text {
+                        margin-top: 2rem;
+                        margin-bottom: 0.5rem;
+                    }
                     .modal-sub-body {
                         color: $gray-600;
                     }

src/styles/ux-variables.scss

@@ -221,7 +221,7 @@ $alert-red-color: $red;
 
 //Modal animation
 // This affects all [Bootstrap] modals
-$modal-fade-transform: translate(0, 100%);
+$modal-fade-transform: translate(0, -25%);
 $modal-backdrop-opacity: 0;
 
 //Disable default !important behavior