Merge pull request #417 from Safelite/feature/digital/SSR-639
Feature/digital/ssr 639
This commit is contained in:
commit
c96e4de7df
2 changed files with 51 additions and 54 deletions
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
<div
|
||||
ref="secondaryText"
|
||||
class="text-center mt-4 fw-bold text-black"
|
||||
class="text-center mt-4 mb-1 fw-bold text-black"
|
||||
v-html="secondaryText">
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -39,19 +39,19 @@
|
|||
</div>
|
||||
<div
|
||||
v-if="displayQuote"
|
||||
class="d-flex justify-content-center cost mb-5">
|
||||
class="d-flex justify-content-center cost mb-0">
|
||||
{{ formattedServicePrice }}
|
||||
</div>
|
||||
<div
|
||||
v-if="verifiedITAC"
|
||||
class="d-flex justify-content-center mb-4">
|
||||
class="d-flex justify-content-center mb-4 deductible-text">
|
||||
{{ deductibleText }}
|
||||
<span class="text-success fw-bold">{{ formattedDeductible }}</span>
|
||||
</div>
|
||||
<alert
|
||||
v-if="verifiedITAC"
|
||||
ref="verifiedITACAlert"
|
||||
class="mb-4"
|
||||
class="mb-5"
|
||||
cmsWidgetName="VerifiedITACAlert"
|
||||
:manualHeadline="verifiedITACAlertHeader"
|
||||
:manualCopy="verifiedITACAlertBody"
|
||||
|
|
@ -59,16 +59,15 @@
|
|||
:isDismissible="false">
|
||||
</alert>
|
||||
<div
|
||||
class="fw-bold text-black mb-2"
|
||||
class="fw-bold text-black mt-5 mb-2"
|
||||
v-html="nextStepsHeader">
|
||||
</div>
|
||||
<div
|
||||
class="body-text"
|
||||
v-html="nextStepsBody">
|
||||
</div>
|
||||
<buttonQuestion
|
||||
<buttonQuestion
|
||||
v-if="displayQuote"
|
||||
id="coverage-button-question"
|
||||
v-model="selectedProvider"
|
||||
cmsWidgetName="ServiceProviderQuestion"
|
||||
:questionText="questionText"
|
||||
|
|
@ -76,7 +75,7 @@
|
|||
buttonTypeString="listButton"
|
||||
isRequired
|
||||
:validationRules="rules.selectionRequired">
|
||||
</buttonQuestion>
|
||||
</buttonQuestion>
|
||||
</div>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
|
|
@ -417,49 +416,52 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.body-text {
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.cost {
|
||||
color: $green;
|
||||
font-size: 32px;
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 24px;
|
||||
line-height: 44px;
|
||||
line-height: 2.75rem;
|
||||
}
|
||||
|
||||
#coverage-button-question {
|
||||
.question-text {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.question-text > span {
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
}
|
||||
.deductible-text {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.deductible-modal {
|
||||
::v-deep p {
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.5rem;
|
||||
strong {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .question-text {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
& > span {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .deductible-modal {
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0 !important;
|
||||
font-size: 1rem;
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
.modal-body p:last-child {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
img.mb-4 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
h5 {
|
||||
color: black;
|
||||
}
|
||||
p:last-child {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
:modalId="ModalName"
|
||||
:footerButtonText="ModalCloseButtonText"
|
||||
@footer-button-event="closeModal">
|
||||
<div class="recal-modal-body ps-4 pe-4 pt-0 pb-5">
|
||||
<div class="recal-modal-body">
|
||||
<h5
|
||||
class="mb-4 text-center"
|
||||
v-html="ModalHeadline"></h5>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
class="fw-bold mb-2 subheader-text"
|
||||
v-html="ModalSubheadertext"></p>
|
||||
<p
|
||||
class="mb-0 small"
|
||||
class="mb-0 small modal-body"
|
||||
v-html="ModalBodyText"></p>
|
||||
<p
|
||||
v-if="ModalSubBodyText"
|
||||
|
|
@ -74,21 +74,16 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.recal-modal-body {
|
||||
.modal-sub-body {
|
||||
color: $gray-600;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.subheader-text {
|
||||
::v-deep .recal-modal-body {
|
||||
h5 {
|
||||
color: $black;
|
||||
}
|
||||
.modal-body {
|
||||
strong {
|
||||
color: $black;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue