WIP desktop updates of service packages on quote page.

src/digital-components/button-question/button-question.vue

@@ -213,7 +213,7 @@ export default {
                     classes = "ui-checkbox d-flex";
                     break;
                 case "servicePackageRadio":
-                    classes = "package-main";
+                    classes = "package-main d-md-flex justify-content-center";
                     break;
             }
             return classes;
@@ -226,7 +226,7 @@ export default {
             if (this.buttonTypeString == "radio") {
                 classes += " radio-button-container";
             } else if (this.buttonTypeString == "servicePackageRadio") {
-                classes = "package-wrapper";
+                classes = "package-wrapper col-md-4";
             }
 
             if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {

src/layouts/quote/quote.vue

@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles quote">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -20,7 +20,10 @@
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
                         v-model="isInsuranceSelected"
                         groupName="CashOrInsuranceQuestion" />
-
+                    </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-lg-4">
                     <servicePackageQuestion
                         ref="servicePackage"
                         cashCmsWidgetName="CashServicePackageQuestionWidget"
@@ -34,7 +37,10 @@
                         v-on="{ 'buttonEvent.openModal': openModalAction }"
                         validationRules="option-required"
                         isRequired />
-
+                    </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <afterpayModalBanner
                         v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
                         cmsWidgetName="AfterpayModalWidget"

src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue

@@ -151,6 +151,9 @@ export default {
 .package-main {
     .package-wrapper {
         margin: 0.5rem 0;
+        @include media-breakpoint-up(md) {
+            margin: .5rem;
+        }
 
         label {
             display: block;
@@ -173,7 +176,9 @@ export default {
                     0px 4px 24px -8px rgba(0, 0, 0, 0.2);
                 border-radius: 0.5rem;
                 overflow: hidden;
-                min-height: 60px;
+                @include media-breakpoint-up(md) {
+                    max-height: 500px;
+                }
 
                 &.has-subheader {
                     min-height: 80px;
@@ -265,6 +270,9 @@ export default {
             width: 100%;
             max-height: 0;
             transition: all 0.5s ease;
+            @include media-breakpoint-up(md) {
+                max-height: 500px;
+            }
 
             p {
                 font-weight: 500;
@@ -337,6 +345,9 @@ export default {
 
             .hide-when-closed {
                 display: none;
+                @include media-breakpoint-up(md) {
+                    display: flex;
+                }
             }
         }
     }

src/styles/common-styles.scss

@@ -37,6 +37,18 @@ body {
                 max-width: 100%;
             }
         }
+        &.quote {
+            .col-md-6,
+            .col-lg-4 {
+                max-width: 1200px;
+            }
+            .col-md-6.col-lg-4 {
+                @include media-breakpoint-up(lg) {
+                    width: 100%;
+                    max-width: 910px;
+                }
+            }
+        }
         //END set max-width on columns
     }
     .pointer {