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

CSR-2258 update quote page styling.

Browse source
This commit is contained in:
Bryan Mauger 2024-10-18 13:25:14 -04:00
parent 2a15257cc0
commit 56ec38b502
1 changed files with 50 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<template>
<div
<!-- <div
:class="[this.additionalButtonData.Text ? 'discount-text' : '']"
v-if="this.additionalButtonData.servicePackageDiscount"
v-html="this.additionalButtonData.Text"></div>
v-html="this.additionalButtonData.Text"></div> -->
<baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
<div
class="package-label"
@ -82,6 +82,9 @@
v-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div>
</div>
<div class="special-save-box">
<span>Special: $999</span>
</div>
</div>
</div>
</baseInputButton>
@ -143,21 +146,22 @@ export default {
margin: 1rem 0.5rem;
display: flex;
flex-direction: column;
align-self: flex-end;
// align-self: flex-end;
}
label {
display: block;
@include media-breakpoint-up(md) {
display: flex;
min-height: 336px;
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;
}
// @media only screen and (min-width: 860px) {
// display: flex;
// min-height: 276px;
// }
}
input[type="radio"] {
@ -179,19 +183,20 @@ 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;
}
// &.has-text {
// border-radius: 0 0 0.5rem 0.5rem;
// border: 1px solid $green;
// }
&:before {
content: "";
@ -294,8 +299,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 +321,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: .5rem;
font-weight: 500;
font-size: 0.75rem;
line-height: 20px;
color: $gray-500;
padding-right: 2px;
@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 +397,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: .5rem 1rem;
border-radius: .25rem;
margin-top: .5rem;
span {
color: $green;
font-size: .875rem;
font-weight: 600;
}
}
}
}
</style>