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> <template>
<div <!-- <div
:class="[this.additionalButtonData.Text ? 'discount-text' : '']" :class="[this.additionalButtonData.Text ? 'discount-text' : '']"
v-if="this.additionalButtonData.servicePackageDiscount" 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"> <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
<div <div
class="package-label" class="package-label"
@ -82,6 +82,9 @@
v-if="this.buttonFooterCopy" v-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div> v-html="this.buttonFooterCopy"></div>
</div> </div>
<div class="special-save-box">
<span>Special: $999</span>
</div>
</div> </div>
</div> </div>
</baseInputButton> </baseInputButton>
@ -143,21 +146,22 @@ export default {
margin: 1rem 0.5rem; margin: 1rem 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: flex-end; // align-self: flex-end;
} }
label { label {
display: block; display: block;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
display: flex; display: flex;
min-height: 336px; height: 100%;
// min-height: 336px;
} }
//Unique breakpoint for this page only to accommodate price spacing issues //Unique breakpoint for this page only to accommodate price spacing issues
//from use of position: absolute on .service-package-discount (per Design Team request) //from use of position: absolute on .service-package-discount (per Design Team request)
@media only screen and (min-width: 860px) { // @media only screen and (min-width: 860px) {
display: flex; // display: flex;
min-height: 276px; // min-height: 276px;
} // }
} }
input[type="radio"] { input[type="radio"] {
@ -179,19 +183,20 @@ export default {
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
min-height: 60px; min-height: 60px;
max-height: 100px; max-height: 126px;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
max-height: 500px; max-height: 500px;
padding-bottom: 3rem;
} }
transition: max-height 0.25s ease-in; transition: max-height 0.25s ease-in;
&.has-subheader { &.has-subheader {
min-height: 80px; min-height: 80px;
} }
&.has-text { // &.has-text {
border-radius: 0 0 0.5rem 0.5rem; // border-radius: 0 0 0.5rem 0.5rem;
border: 1px solid $green; // border: 1px solid $green;
} // }
&:before { &:before {
content: ""; content: "";
@ -294,8 +299,8 @@ export default {
bottom: 0.75rem; bottom: 0.75rem;
left: 0; left: 0;
width: 100%; width: 100%;
text-align: center; margin-left: 1.25rem;
font-size: 1.125rem; font-weight: 600;
} }
span.strikethrough-price { span.strikethrough-price {
text-decoration: line-through; text-decoration: line-through;
@ -316,28 +321,32 @@ export default {
&.service-package-discount { &.service-package-discount {
color: $green; color: $green;
text-align: end; text-align: end;
font-weight: 500; font-weight: 600;
font-size: 13px; font-size: 0.875rem;
display: flex;
justify-content: space-between;
div.strikethrough-discount-price { div.strikethrough-discount-price {
text-decoration: line-through; text-decoration: line-through;
margin-right: 0; margin-right: .5rem;
font-weight: 400; font-weight: 500;
font-size: 0.875rem; font-size: 0.75rem;
line-height: 20px; line-height: 20px;
color: $gray-500; color: $gray-500;
padding-right: 2px; @include media-breakpoint-up(md) {
margin-right: 0.5rem;
font-size: 0.75rem;
}
} }
div.discount-price { div.discount-price {
color: $green; color: $green;
font-weight: 600;
font-size: 1.625rem;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
position: absolute; position: absolute;
bottom: 0.75rem; bottom: 0.75rem;
left: 0; left: 0.5rem;
width: 100%; display: flex;
text-align: center; align-items: center;
justify-content: flex-start;
} }
} }
} }
@ -388,6 +397,21 @@ export default {
font-weight: 600; font-weight: 600;
letter-spacing: 0.75px; 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> </style>