jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-1042 WIP

Browse source
This commit is contained in:
Bryan Mauger 2025-07-14 15:49:25 -04:00
parent 4b803e7026
commit 15023adb96
26 changed files with 200 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
src/constants/progress-bar-mapper.js
View file

@ -1,27 +1,100 @@
const pagePercentageMapper = { export const pageProgressMapper = {
vehicle: 7, //Combine progress bar slide percent and button steps
"vehicle-damage": 7.14, vehicle: {
estimate: 10.71, percent: 7,
"service-zip": 14.28, step: 1,
"vin-lookup": 14.28, },
"license-plate-lookup": 14.28, "vehicle-damage": {
"address-lookup": 14.28, percent: 10,
"address-vehicles": 17.85, step: 1,
"part-questions": 21.42, },
"molding-questions": 21.42, estimate: {
"vehicle-parts": 21.42, percent: 14,
"capability-questions": 21.42, step: 1,
quote: 39, },
"insurance-company": 52, "service-zip": {
"service-location": 60, percent: 18,
schedule: 70.5, step: 1,
"mobile-details": 76, },
"customer-details": 84, "vin-lookup": {
"payment-method": 92, percent: 18,
payment: 96, step: 1,
confirmation: 100, },
"license-plate-lookup": {
percent: 18,
step: 1,
},
"address-lookup": {
percent: 18,
step: 1,
},
"address-vehicles": {
percent: 25,
step: 1,
},
"part-questions": {
percent: 30,
step: 1,
},
"molding-questions": {
percent: 30,
step: 1,
},
"vehicle-parts": {
percent: 30,
step: 1,
},
"capability-questions": {
percent: 30,
step: 1,
},
quote: {
percent: 39, //Must be 39
step: 2,
},
"insurance-company": {
percent: 52,
step: 2,
},
"service-location": {
percent: 60,
step: 2,
},
schedule: {
percent: 70.5, //Must be 70.5
step: 3,
},
"mobile-details": {
percent: 76,
step: 3,
},
"customer-details": {
percent: 84,
step: 3,
},
"payment-method": {
percent: 92, //Must be 92
step: 3,
},
payment: {
percent: 96,
step: 4,
},
confirmation: {
percent: 100,
step: 4,
},
}; };
export const getProgressBarPercentage = (page) => { export const getProgressBarPercentage = (page) => {
return pagePercentageMapper[page] || 0; return pageProgressMapper[page]?.percent || 0;
};
export const getProgressBarStep = (page) => {
return pageProgressMapper[page]?.step || 1;
};
export const getTotalSteps = () => {
// Find the highest step value
return Math.max(...Object.values(pageProgressMapper).map((v) => v.step));
}; };

1
src/digital-components/dropdown-question/dropdown-question.vue
View file

@ -152,6 +152,7 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
border-radius: 0.5rem; border-radius: 0.5rem;
min-height: 3rem; min-height: 3rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
min-height: 3.5rem; min-height: 3.5rem;
} }

1
src/digital-components/textbox-question/textbox-question.vue
View file

@ -335,6 +335,7 @@ export default {
border-radius: 0.5rem; border-radius: 0.5rem;
min-height: 3rem; min-height: 3rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: 1rem; padding: 1rem;
min-height: 3.5rem; min-height: 3.5rem;

4
src/fmg-components/funnel-footer/funnel-footer.vue
View file

@ -76,12 +76,16 @@ export default {
:deep(a) { :deep(a) {
text-decoration: none; text-decoration: none;
&.new-window-link { &.new-window-link {
font-family: Urbanist, Arial, Helvetica, sans-serif;
margin: 0 0.75rem; margin: 0 0.75rem;
color: $gray-600; color: $gray-600;
font-weight: 400;
} }
&.navigation-link { &.navigation-link {
font-family: Urbanist, Arial, Helvetica, sans-serif;
margin: 0 0.75rem; margin: 0 0.75rem;
color: $gray-600; color: $gray-600;
font-weight: 400;
} }
} }

4
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -5,7 +5,9 @@
</div> </div>
<div class="container d-flex"> <div class="container d-flex">
<div class="site-logo"> <div class="site-logo">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" /> <a href="https://safelite.com">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
</a>
</div> </div>
<div class="button-container webchat"> <div class="button-container webchat">
<span class="webchat d-flex"> <span class="webchat d-flex">

68
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -7,7 +7,7 @@
@click="toggleModal" @click="toggleModal"
aria-label="Hamburger Menu (modal window)"> aria-label="Hamburger Menu (modal window)">
<span v-if="isActive">Close</span> <span v-if="isActive">Close</span>
<span v-else>Step {{ currentStepNumber }} of 4 </span> <span v-else>Step {{ currentStepNumber }} of 4</span>
<div class="bars ms-2"> <div class="bars ms-2">
<div class="bar1"></div> <div class="bar1"></div>
<div class="bar2"></div> <div class="bar2"></div>
@ -39,10 +39,26 @@
<span class="dot4"></span> <span class="dot4"></span>
</div> </div>
<div class="d-flex flex-column justify-content-between"> <div class="d-flex flex-column justify-content-between">
<div class="step-containers"><span class="step-number">Step 1 of 4</span><br><span class="step-name">Vehicle</span></div> <div class="step-containers">
<div class="step-containers"><span class="step-number">Step 2 of 4</span><br><span class="step-name">Quote</span></div> <span class="step-number">Step 1 of 4</span>
<div class="step-containers"><span class="step-number">Step 3 of 4</span><br><span class="step-name">Schedule</span></div> <br />
<div class="step-containers"><span class="step-number">Step 4 of 4</span><br><span class="step-name">Review</span></div> <span class="step-name">Vehicle</span>
</div>
<div class="step-containers">
<span class="step-number">Step 2 of 4</span>
<br />
<span class="step-name">Quote</span>
</div>
<div class="step-containers">
<span class="step-number">Step 3 of 4</span>
<br />
<span class="step-name">Schedule</span>
</div>
<div class="step-containers">
<span class="step-number">Step 4 of 4</span>
<br />
<span class="step-name">Review</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -53,6 +69,7 @@
<script> <script>
import { Modal } from "bootstrap"; import { Modal } from "bootstrap";
import { getProgressBarStep, getTotalSteps } from "@/constants/progress-bar-mapper";
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar"; import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
import baseMixin from "@/mixins/base-mixin.js"; import baseMixin from "@/mixins/base-mixin.js";
@ -88,36 +105,15 @@ export default {
}, },
computed: { computed: {
currentStepNumber() { currentStepNumber() {
// Use the same mapping as progress-bar-mapper.js for consistency return getProgressBarStep(this.$route.name);
const stepMap = { },
vehicle: 1, totalSteps() {
"vehicle-damage": 1, return getTotalSteps();
estimate: 1, },
"service-zip": 1,
"vin-lookup": 1,
"license-plate-lookup": 1,
"address-lookup": 1,
"address-vehicles": 1,
"part-questions": 1,
"molding-questions": 1,
"vehicle-parts": 1,
"capability-questions": 1,
quote: 2,
"insurance-company": 2,
"service-location": 2,
schedule: 3,
"mobile-details": 3,
"customer-details": 3,
"payment-method": 4,
payment: 4,
confirmation: 4,
};
return stepMap[this.$route.name] || 1;
}
}, },
components: { components: {
progressBar, progressBar,
} },
}; };
</script> </script>
@ -129,7 +125,7 @@ export default {
width: auto; width: auto;
height: auto; height: auto;
border-radius: 1.5rem; border-radius: 1.5rem;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
background-color: $white; background-color: $white;
position: relative; position: relative;
display: flex; display: flex;
@ -198,7 +194,7 @@ export default {
&.show .modal-dialog { &.show .modal-dialog {
transform: translateX(0); transform: translateX(0);
} }
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
height: calc(100% - 68px); height: calc(100% - 68px);
top: 68px; top: 68px;
border-top: 1px solid $gray-300; border-top: 1px solid $gray-300;
@ -242,7 +238,7 @@ export default {
border: 1px solid $gray; border: 1px solid $gray;
left: 1px; left: 1px;
} }
.dot1 { .dot1 {
top: 1px; top: 1px;
} }
.dot2 { .dot2 {
@ -256,7 +252,7 @@ export default {
} }
} }
.step-number { .step-number {
font-size: .75rem; font-size: 0.75rem;
} }
.step-name { .step-name {
font-size: 1.25rem; font-size: 1.25rem;

2
src/fmg-components/funnel-header/progress-bar/progress-bar.vue
View file

@ -63,7 +63,7 @@ export default {
}, },
barClass() { barClass() {
return this.vertical ? "progress-bar-outer-vertical" : "progress-bar-outer"; return this.vertical ? "progress-bar-outer-vertical" : "progress-bar-outer";
} },
}, },
}; };
</script> </script>

4
src/fmg-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -11,7 +11,9 @@
@click-event="clickEvent" /> @click-event="clickEvent" />
</h5> </h5>
</div> </div>
<div v-if="subText" class="d-flex align-items-center overflow-hidden mt-1"> <div
v-if="subText"
class="d-flex align-self-start align-self-md-center overflow-hidden mt-1">
<p class="small fw-normal sub-text"> <p class="small fw-normal sub-text">
<span> <span>
{{ subText }} {{ subText }}

16
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -8,18 +8,6 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
</div> </div>
</div> </div>
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<alert
ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget"
class="my-5"
alertClass="alert-warning"
:manualHeadline="alertFewMoreQuestionsHeader"
:manualCopy="alertFewMoreQuestionsCopy"
v-bind:isDismissible="false" />
</div>
</div>
<div class="row"> <div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper"> <div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper">
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key"> <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
@ -50,7 +38,6 @@
<script> <script>
// Components // Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import alert from "@/ux-components/alert/alert";
import questionChain from "@/digital-components/question-chain/question-chain"; import questionChain from "@/digital-components/question-chain/question-chain";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import navbar from "@/fmg-components/nav-bar/nav-bar"; import navbar from "@/fmg-components/nav-bar/nav-bar";
@ -92,7 +79,6 @@ export default {
}, },
components: { components: {
funnelHeader, funnelHeader,
alert,
questionChain, questionChain,
funnelSubHeader, funnelSubHeader,
navbar, navbar,
@ -104,7 +90,7 @@ export default {
<style lang="scss"> <style lang="scss">
.questions-page { .questions-page {
.question-text { .question-text {
margin-bottom: 0.5rem; margin-bottom: 1.5rem;
span { span {
text-align: left; text-align: left;

14
src/layouts/address-lookup/address-lookup.vue
View file

@ -5,15 +5,11 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
autocomplete="off"> autocomplete="off">
<div class="container-fluid page-container-grouped-styles" id="address-lookup"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" class="mb-7"/>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<customerQuestions <customerQuestions
ref="customerQuestions" ref="customerQuestions"

27
src/layouts/estimate/estimate.vue
View file

@ -8,6 +8,10 @@
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div> <div>
<div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div> <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
<div v-html="this.VinLookupQuestionBodyText2"></div>
<div
class="select-an-option"
v-html="this.VinLookupQuestionFooterText"></div>
<buttonQuestion <buttonQuestion
cmsWidgetName="VinLookupMethod" cmsWidgetName="VinLookupMethod"
:answers="answersFromCms" :answers="answersFromCms"
@ -25,6 +29,8 @@
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
<div class="text-center" v-html="this.VinLookupQuestionFooterText2"></div>
</div> </div>
</div> </div>
</div> </div>
@ -225,6 +231,15 @@ export default {
VinLookupQuestionText() { VinLookupQuestionText() {
return this.getCmsContent("VinLookupQuestion", "BodyText"); return this.getCmsContent("VinLookupQuestion", "BodyText");
}, },
VinLookupQuestionBodyText2() {
return this.getCmsContent("VinLookupQuestion", "BodyText2");
},
VinLookupQuestionFooterText() {
return this.getCmsContent("VinLookupQuestion", "FooterText");
},
VinLookupQuestionFooterText2() {
return this.getCmsContent("VinLookupQuestion", "FooterText2");
},
}, },
components: { components: {
funnelHeader, funnelHeader,
@ -239,14 +254,12 @@ export default {
<style lang="scss"> <style lang="scss">
.vinlookupquestion p { .vinlookupquestion p {
margin-bottom: 0; font-size: 1.25rem;
} }
.vinlookupquestion strong {
font-weight: 500; .select-an-option {
color: $black; font-family: UrbanistSemibold;
} font-weight: 600;
.vinlookupquestion p:nth-child(2) {
font-size: 0.875rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
</style> </style>

12
src/layouts/insurance-company/insurance-company.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
<div v-if="originalList.length > 0"> <div v-if="originalList.length > 0">

12
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -1,13 +1,9 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<textboxQuestion <textboxQuestion

1
src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
View file

@ -112,6 +112,7 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 100%; width: 100%;
outline: none; outline: none;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span { span {
&.small { &.small {

6
src/layouts/quote/quote.vue
View file

@ -910,17 +910,17 @@ export default {
left: 1rem; left: 1rem;
bottom: 1rem; bottom: 1rem;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
left: 6rem; left: 6rem;
}
} }
}
.col-auto { .col-auto {
width: -webkit-fill-available; width: -webkit-fill-available;
} }
.col-auto { .col-auto {
width: -moz-available; width: -moz-available;
} }
}
} }
}
.quote-page.show-save-progress-popup .row.justify-content-center { .quote-page.show-save-progress-popup .row.justify-content-center {
display: none; display: none;

6
src/layouts/return-user/return-user.vue
View file

@ -3,9 +3,9 @@
<div class="return-user small-question-text"> <div class="return-user small-question-text">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles"> <div class="container page-container-grouped-styles">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing"> <div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing">
<funnelSubHeader <funnelSubHeader
class="justify-content-center d-flex" class="justify-content-center d-flex"
ref="funnelSubHeader" ref="funnelSubHeader"

1
src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue
View file

@ -94,6 +94,7 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 100%; width: 100%;
outline: none; outline: none;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span.premium-appointment-price { span.premium-appointment-price {
position: absolute; position: absolute;

1
src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
View file

@ -147,6 +147,7 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 100%; width: 100%;
outline: none; outline: none;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span { span {
&.small { &.small {

3
src/layouts/service-zip/service-zip.vue
View file

@ -355,9 +355,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.vinlookupquestion p {
margin-bottom: 0;
}
.vinlookupquestion strong { .vinlookupquestion strong {
font-weight: 500; font-weight: 500;
color: $black; color: $black;

20
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -3,21 +3,13 @@
<div class="vehicle-parts small-question-text"> <div class="vehicle-parts small-question-text">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles"> <div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader
ref="funnelSubHeader"
cmsWidgetName="FunnelSubHeaderWidget" />
</div>
</div>
<div class="row"> <div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7"> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
<alert <funnelSubHeader
class="rounded border-0 shadow-sm" ref="funnelSubHeader"
alertClass="alert-warning" cmsWidgetName="FunnelSubHeaderWidget"
cmsWidgetName="AlertWidget" class="mb-7"/>
:isDismissible="false" />
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -59,7 +51,6 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import navbar from "@/fmg-components/nav-bar/nav-bar"; import navbar from "@/fmg-components/nav-bar/nav-bar";
import alert from "@/ux-components/alert/alert";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue"; import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question"; import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
// Supporting Files // Supporting Files
@ -240,7 +231,6 @@ export default {
funnelHeader, funnelHeader,
funnelSubHeader, funnelSubHeader,
navbar, navbar,
alert,
loadingModal, loadingModal,
saveProgressModalQuestion, saveProgressModalQuestion,
}, },

12
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<textboxQuestion <textboxQuestion
class="mb-2 mt-5" class="mb-2 mt-5"

2
src/styles/common-styles.scss
View file

@ -101,4 +101,4 @@ textarea,
option, option,
.btn { .btn {
letter-spacing: 0.03rem; letter-spacing: 0.03rem;
} }

3
src/ux-components/button-main/button-main.vue
View file

@ -63,6 +63,9 @@ export default {
<style lang="scss"> <style lang="scss">
.btn { .btn {
&:first-child:active {
background-color: $red;
}
&.btn-primary { &.btn-primary {
position: relative; position: relative;
background: $red; background: $red;

1
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -43,6 +43,7 @@ export default {
<style lang="scss"> <style lang="scss">
.list-button-horizontal { .list-button-horizontal {
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
position: absolute; position: absolute;

1
src/ux-components/list-button/list-button.vue
View file

@ -106,6 +106,7 @@ export default {
width: 100%; width: 100%;
outline: none; outline: none;
border-radius: 50rem; border-radius: 50rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span { span {
&.small { &.small {

1
src/ux-components/list-card/list-card.vue
View file

@ -76,6 +76,7 @@ export default {
} }
.list-card { .list-card {
border: 1px solid $gray-500; border: 1px solid $gray-500;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
&.has-error { &.has-error {
input[type="checkbox"], input[type="checkbox"],