Merge pull request #1361 from Safelite/CSR-1593-modal-sidebar-functionality

CSR-1593 modal desktop sidebar slide-in development.

src/digital-components/modal/modal.vue

@@ -148,12 +148,25 @@ export default {
     }
     &.modal-component {
         .modal-dialog {
-            max-width: 576px;
+            max-width: 767px;
             margin: 0 auto;
+            @include media-breakpoint-up(md) {
+                width: 376px;
+                position: absolute;
+                top: 0;
+                right: 0;
+                transform: translate(100%, 0);
+            }
             .modal-content {
-                margin: 0 auto;
+                margin: 1.5rem auto 0 auto;
                 box-shadow: 0px 16px 48px -16px 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;
+                    height: 100vh;
+                    margin: 0 auto;
+                }
                 .modal-body {
                     .modal-sub-body {
                         color: $gray-600;
@@ -166,6 +179,9 @@ export default {
                             margin-bottom: 0;
                         }
                     }
+                    @include media-breakpoint-up(md) {
+                        overflow: scroll;
+                    }
                 }
             }
             &.modal-dialog-centered {
@@ -184,6 +200,11 @@ export default {
     &.show .modal-dialog {
         transform: translateY(0);
     }
+    @include media-breakpoint-up(md) {
+        &.fade {
+            transition: opacity 0.25s linear;
+        }
+    }
 }
 body {
     .modal-backdrop {

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue

@@ -516,9 +516,6 @@ export default {
 
 <style lang="scss">
 .time-slots-modal.modal.modal-component {
-    > .modal-dialog > .modal-content {
-        margin-top: 24px;
-    }
     .modal-header {
         padding-bottom: 0;
         margin-bottom: 0 !important;

src/styles/common-styles.scss

@@ -41,14 +41,6 @@ body {
         height: 1px;
         overflow: hidden;
     }
-
-    //Footer modal backdrop adjustments for positioning
-    .modal-backdrop {
-        left: 50%;
-        transform: translateX(-50%);
-        max-width: 576px;
-        height: calc(100% - 72px);
-    }
 }
 //Disable scroll of main container when modal is open
 .modal-open {