WIP initial commit quote deskop change with correct Figma
This commit is contained in:
Bryan Mauger
parent
69df292e80
commit
f776a3e9fc
4 changed files with 22 additions and 77 deletions
|
|
@ -213,7 +213,7 @@ export default {
|
|||
classes = "ui-checkbox d-flex";
|
||||
break;
|
||||
case "servicePackageRadio":
|
||||
classes = "package-main d-md-flex justify-content-center";
|
||||
classes = "package-main";
|
||||
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 col-md-4";
|
||||
classes = "package-wrapper";
|
||||
}
|
||||
|
||||
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
|
||||
|
|
@ -255,7 +255,7 @@ export default {
|
|||
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
|
||||
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
|
||||
buttonImageId: answer.buttonImageId ?? answer.ImageId,
|
||||
additionalButtonData: answer.additionalButtonData,
|
||||
additionalButtonData: answer.additionalButtonData ?? answer.additionalButtonData,
|
||||
groupName: this.formatString(this.groupName),
|
||||
value:
|
||||
answer.value ??
|
||||
|
|
|
|||
|
|
@ -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 quote">
|
||||
<div class="container-fluid page-container-grouped-styles">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
|
|
@ -20,10 +20,7 @@
|
|||
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"
|
||||
|
|
@ -37,10 +34,7 @@
|
|||
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"
|
||||
|
|
@ -49,6 +43,7 @@
|
|||
:lineItems="lineItems" />
|
||||
|
||||
<recalDisclaimer
|
||||
class="my-5"
|
||||
cmsWidgetName="RecalDisclaimerWidget"
|
||||
v-if="isRecalibrationOnOrder"
|
||||
v-on="{ textLinkClicked: openModalAction }"
|
||||
|
|
|
|||
|
|
@ -12,9 +12,7 @@
|
|||
]"
|
||||
for="testradio">
|
||||
<div class="package-specs">
|
||||
<div
|
||||
v-if="this.additionalButtonData.servicePackageDiscount"
|
||||
class="row justify-content-between">
|
||||
<div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
|
||||
<div class="col md-6">
|
||||
<p class="m-0">
|
||||
<span v-html="this.buttonLabel"></span>
|
||||
|
|
@ -138,20 +136,24 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.discount-text {
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
background-color: #469d2a;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
.package-main {
|
||||
.package-wrapper {
|
||||
margin: 1rem 0;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
position: relative;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
margin: 0.5rem 0;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
|
|
@ -172,21 +174,13 @@ export default {
|
|||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
min-height: 60px;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-subheader {
|
||||
min-height: 80px;
|
||||
}
|
||||
&.has-text {
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
border: 1px solid #469d2a;
|
||||
@include media-breakpoint-up(md) {
|
||||
border-radius: 0.5rem;
|
||||
padding-top: 3.75rem;
|
||||
}
|
||||
border: 1px solid #469d2a !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -271,9 +265,6 @@ export default {
|
|||
width: 100%;
|
||||
max-height: 0;
|
||||
transition: all 0.5s ease;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
|
|
@ -346,34 +337,6 @@ export default {
|
|||
|
||||
.hide-when-closed {
|
||||
display: none;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
.discount-text {
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
background-color: #469d2a;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
height: 2.875rem;
|
||||
@include media-breakpoint-up(md) {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
~ label {
|
||||
.package-label {
|
||||
&:after {
|
||||
top: 68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,19 +37,6 @@ body {
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
// Quote page desktop
|
||||
&.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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue