Merge pull request #997 from Safelite/feature/humphries/centered-modal

Add prop to modal component to allow for centering

src/digital-components/modal/modal.vue

@@ -11,7 +11,11 @@
             'hidden.bs.modal': onModalClosed,
             'shown.bs.modal': onModalOpened
         }">
-        <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-dialog"
+            :class="{
+                'modal-dialog-edge': modalPosition === 'edge',
+                'modal-dialog-centered': modalPosition === 'center'
+            }">
             <div
                 class="modal-content"
                 role="dialog"
@@ -77,6 +81,10 @@ export default {
         buttonVariant: {
             type: String,
             default: 'success'
+        },
+        modalPosition: {
+            type: String,
+            default: 'edge'
         }
     },
     emits: ['footer-button-event', 'isModalOpened'],
@@ -192,24 +200,10 @@ export default {
     }
     &.modal-component {
         .modal-dialog {
+            display: flex;
             max-width: 47.9375rem;
-            margin: 0 auto;
-            @include media-breakpoint-up(md) {
-                width: 23.5rem;
-                position: absolute;
-                top: 0;
-                right: 0;
-                transform: translate(100%, 0);
-            }
             .modal-content {
                 margin: 1.5rem auto 0 auto;
-                box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
-                border-radius: 1.5rem 1.5rem 0 0;
-                @include media-breakpoint-up(md) {
-                    box-shadow: none;
-                    border-radius: 0;
-                    margin: 0 auto;
-                }
                 .modal-body {
                     .col {
                         max-width: 100%;
@@ -235,11 +229,40 @@ export default {
                     }
                 }
             }
-            &.modal-dialog-centered {
+            &.modal-dialog-edge {
-                align-items: flex-end;
                 min-height: 100%;
+                margin: 0 auto;
+                align-items: flex-end;
                 @include media-breakpoint-up(md) {
                     align-items: inherit;
+                    width: 23.5rem;
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    transform: translate(100%);
+                }
+                .modal-content {
+                    box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
+                    border-radius: 1.5rem 1.5rem 0 0;
+                    @include media-breakpoint-up(md) {
+                        box-shadow: none;
+                        border-radius: 0;
+                        margin: 0 auto;
+                    }
+                }
+            }
+            &.modal-dialog-centered {
+                .modal-content {
+                    box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
+                    border-radius: 1.5rem;
+                    overflow: auto;
+                }
+            }
+        }
+        &.show .modal-dialog {
+            &.modal-dialog-edge {
+                @include media-breakpoint-up(md) {
+                    transform: translateY(0);
                 }
             }
         }
@@ -251,9 +274,6 @@ export default {
             }
         }
     }
-    &.show .modal-dialog {
-        transform: translateY(0);
-    }
     @include media-breakpoint-up(md) {
         &.fade {
             transition: opacity 0.25s linear;

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -15,6 +15,7 @@
         :onModalOpenedCallback="onModalOpened"
         :onModalClosedCallback="onModalClosed"
         :footerButtonText="modalFooterText"
+        :modalPosition="'center'"
         @footerButtonEvent="setZipCode">
         <serviceZipQuestion
             ref="serviceZipCodeQuestion"