Auto stash before merge of "feature/CSR-240" and "origin/develop"

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

@@ -162,7 +162,7 @@ export default {
 
 <style lang="scss" scoped>
 .button-question-overflow {
-  height: calc(100vh - 266px);
+  height: calc(100vh - 274px);
 
   .overflow-scroll {
     // Height will be determined by overall height of content above list

src/layouts/address-lookup/address-lookup.vue

@@ -9,6 +9,7 @@
 			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
 			<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
 			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
+			<div class="fade-on-route-transition sub-container make-tall">
 				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 				<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
 					class="my-3"
@@ -52,7 +53,7 @@
 					@ForwardClicked="forwardButtonAction"
 					:isForwardActionDisabled="!meta.valid"
 				/>
-			
+			</div>	
 		</div>
 	</Form>
 </template>

src/layouts/estimate/estimate.vue

@@ -9,9 +9,9 @@
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <div class="fade-on-route-transition sub-container make-tall">
         <buttonQuestion
           cmsWidgetName="VinLookupMethod"
-        class="button-question-overflow"
           :questionText="questionText"
           :answers="answersFromCms"
           groupName="vinLookupMethodOption"
@@ -20,7 +20,6 @@
           isRequired
           validationRules="option-required"
         />
-
         <funnel-footer
           cmsWidgetName="FunnelFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -29,6 +28,7 @@
           @ForwardClicked="forwardButtonAction"
         />
       </div>
+    </div>
   </Form>
 </template>
 

src/layouts/part-questions/part-questions.vue

@@ -3,10 +3,12 @@
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+    <div class="fade-on-route-transition sub-container make-tall">
         <h1>Part Questions Page Placeholder</h1>
         <funnel-footer
                 cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction"
         />
+    </div>
 </div>
 </template>
 

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -9,6 +9,7 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+        <div class="fade-on-route-transition sub-container make-tall">
           <alert
             ref="vehicleChangeAlert"
             class="mt-5 mb-0"
@@ -61,6 +62,7 @@
             @ForwardClicked="forwardButtonAction"
           />
         </div>
+      </div>
     </Form>
 </template>
 

src/layouts/vehicle-make/make-question/make-question.vue

@@ -1,7 +1,6 @@
 <template>
   <buttonQuestion
     class="radioQuestion" 
-    :class="{'fade-on-route-transition': this.fadeOnRouteTransition}"
     isOverflowScrollable
     selectingInitiatesLoad
     :questionText="questionText"
@@ -30,7 +29,6 @@ export default {
   props: {
     modelValue: String,
     cmsWidgetName: String,
-    fadeOnRouteTransition: Boolean,
   },
   computed: {
     questionText(){

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative make-tall">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -10,7 +10,9 @@
             backButtonAccessibleText="Change Vehicle Year"
             @click-event="backButtonAction"
         />
-        <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" fadeOnRouteTransition />
+        <div class="fade-on-route-transition">
+          <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+        </div>
       </div>
     </div>
   </div>

src/layouts/vehicle-model/vehicle-model.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -10,10 +10,12 @@
           backButtonAccessibleText="Change Vehicle Make"
           @click-event="backButtonAction"
         />
+        <div class="fade-on-route-transition">
           <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -3,6 +3,7 @@
     <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
     <vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
+    <div class="fade-on-route-transition sub-container make-tall">
       <div class="container-fluid prevent-squish my-5">
         <div class="row">
           <div class="col">
@@ -31,6 +32,7 @@
         />
       </div>
       <funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+    </div>
 </div>
 </template>
 

src/layouts/vehicle-style/vehicle-style.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -10,10 +10,12 @@
           backButtonAccessibleText="Change Vehicle Model"
           @click-event="backButtonAction"
         />
+        <div class="fade-on-route-transition">
           <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" />
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+        <div class="fade-on-route-transition">
           <yearQuestion 
             class="fade-on-route-transition"
             v-model="selectedYear" 
@@ -14,6 +15,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>

src/layouts/vin-lookup/vin-lookup.vue

@@ -14,6 +14,7 @@
         :displayGenericVehicleImage="false"
       />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <div class="fade-on-route-transition sub-container make-tall">
         <div class="row my-2">
           <div class="col">
             <textboxQuestion
@@ -109,6 +110,7 @@
           @ForwardClicked="forwardButtonAction"
         />
       </div>
+    </div>
   </Form>
 </template>
 

src/styles/common-styles.scss

@@ -26,6 +26,15 @@ body {
     overflow-x: hidden;
   }
 
+  .sub-container{
+    &.make-tall {
+      height: 100vh;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
   .sr-only {
     position: absolute;
     left: -10000px;