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

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

Browse source 
This reverts commit dbff58ea22, reversing
changes made to 2a15257cc0.
This commit is contained in:
Bryan Mauger 2024-10-22 13:42:57 -04:00
parent d23618bc06
commit ad2ae7bfeb
1 changed files with 31 additions and 43 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,4 +1,8 @@
<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"
@ -78,10 +82,6 @@
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,13 +143,20 @@ 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;
height: 100%;
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;
}
}
@ -172,16 +179,19 @@ export default {
border-radius: 0.5rem;
overflow: hidden;
min-height: 60px;
max-height: 126px;
max-height: 100px;
@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: "";
@ -235,9 +245,6 @@ export default {
background-color: $blue-100;
border: 1px solid $blue;
max-height: 500px;
.special-save-box {
background-color: $green-200;
}
}
+ .package-label {
&:before {
@ -287,8 +294,8 @@ export default {
bottom: 0.75rem;
left: 0;
width: 100%;
margin-left: 1.25rem;
font-weight: 600;
text-align: center;
font-size: 1.125rem;
}
span.strikethrough-price {
text-decoration: line-through;
@ -309,32 +316,28 @@ export default {
&.service-package-discount {
color: $green;
text-align: end;
font-weight: 600;
font-size: 0.875rem;
display: flex;
justify-content: space-between;
font-weight: 500;
font-size: 13px;
div.strikethrough-discount-price {
text-decoration: line-through;
margin-right: 0.5rem;
font-weight: 600;
font-size: 0.75rem;
margin-right: 0;
font-weight: 400;
font-size: 0.875rem;
line-height: 20px;
color: $gray-550;
@include media-breakpoint-up(md) {
margin-right: 0.5rem;
font-size: 0.75rem;
}
color: $gray-500;
padding-right: 2px;
}
div.discount-price {
color: $green;
font-weight: 600;
font-size: 1.625rem;
}
@include media-breakpoint-up(md) {
position: absolute;
bottom: 0.75rem;
left: 0.5rem;
display: flex;
align-items: center;
justify-content: flex-start;
left: 0;
width: 100%;
text-align: center;
}
}
}
@ -385,21 +388,6 @@ 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>