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

Merge pull request #2033 from Safelite/CSR-2258-update-quote-styling

Browse source 
Csr 2258 update quote styling
This commit is contained in:
bmauger 2024-10-21 14:29:34 -04:00 committed by GitHub
commit dbff58ea22
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 43 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -1,8 +1,4 @@
<template>
<div
:class="[this.additionalButtonData.Text ? 'discount-text' : '']"
v-if="this.additionalButtonData.servicePackageDiscount"
v-html="this.additionalButtonData.Text"></div>
<baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
<div
class="package-label"
@ -82,6 +78,10 @@
v-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div>
</div>
<!-- This div will show up in all service packages until logic is written -->
<div class="special-save-box">
<span>Temp test copy</span>
</div>
</div>
</div>
</baseInputButton>
@ -143,20 +143,13 @@ export default {
margin: 1rem 0.5rem;
display: flex;
flex-direction: column;
align-self: flex-end;
}
label {
display: block;
@include media-breakpoint-up(md) {
display: flex;
min-height: 336px;
}
//Unique breakpoint for this page only to accommodate price spacing issues
//from use of position: absolute on .service-package-discount (per Design Team request)
@media only screen and (min-width: 860px) {
display: flex;
min-height: 276px;
height: 100%;
}
}
@ -179,19 +172,16 @@ export default {
border-radius: 0.5rem;
overflow: hidden;
min-height: 60px;
max-height: 100px;
max-height: 126px;
@include media-breakpoint-up(md) {
max-height: 500px;
padding-bottom: 3rem;
}
transition: max-height 0.25s ease-in;
&.has-subheader {
min-height: 80px;
}
&.has-text {
border-radius: 0 0 0.5rem 0.5rem;
border: 1px solid $green;
}
&:before {
content: "";
@ -245,6 +235,9 @@ export default {
background-color: $blue-100;
border: 1px solid $blue;
max-height: 500px;
.special-save-box {
background-color: $green-200;
}
}
+ .package-label {
&:before {
@ -294,8 +287,8 @@ export default {
bottom: 0.75rem;
left: 0;
width: 100%;
text-align: center;
font-size: 1.125rem;
margin-left: 1.25rem;
font-weight: 600;
}
span.strikethrough-price {
text-decoration: line-through;
@ -316,28 +309,32 @@ export default {
&.service-package-discount {
color: $green;
text-align: end;
font-weight: 500;
font-size: 13px;
font-weight: 600;
font-size: 0.875rem;
display: flex;
justify-content: space-between;
div.strikethrough-discount-price {
text-decoration: line-through;
margin-right: 0;
font-weight: 400;
font-size: 0.875rem;
margin-right: 0.5rem;
font-weight: 600;
font-size: 0.75rem;
line-height: 20px;
color: $gray-500;
padding-right: 2px;
color: $gray-550;
@include media-breakpoint-up(md) {
margin-right: 0.5rem;
font-size: 0.75rem;
}
}
div.discount-price {
color: $green;
font-weight: 600;
font-size: 1.625rem;
}
@include media-breakpoint-up(md) {
position: absolute;
bottom: 0.75rem;
left: 0;
width: 100%;
text-align: center;
left: 0.5rem;
display: flex;
align-items: center;
justify-content: flex-start;
}
}
}
@ -388,6 +385,21 @@ export default {
font-weight: 600;
letter-spacing: 0.75px;
}
.special-save-box {
background-color: $green-100;
display: flex;
flex-direction: row;
margin: auto;
margin-left: -2rem;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
margin-top: 0.5rem;
span {
color: $green;
font-size: 0.875rem;
font-weight: 600;
}
}
}
}
</style>