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

CSR-2140 WIP add styles for horizontal service packages on desktop.

Browse source
This commit is contained in:
Bryan Mauger 2024-07-12 14:37:56 -04:00
parent f776a3e9fc
commit b017bae2cb
3 changed files with 57 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/digital-components/button-question/button-question.vue
View file

@ -213,7 +213,7 @@ export default {
classes = "ui-checkbox d-flex";
break;
case "servicePackageRadio":
classes = "package-main";
classes = "package-main d-md-flex justify-content-md-center";
break;
}
return classes;
@ -226,7 +226,7 @@ export default {
if (this.buttonTypeString == "radio") {
classes += " radio-button-container";
} else if (this.buttonTypeString == "servicePackageRadio") {
classes = "package-wrapper";
classes = "package-wrapper col-md-4";
}
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {

10
src/layouts/quote/quote.vue
View file

@ -20,7 +20,10 @@
cmsWidgetName="CashOrInsuranceQuestionWidget"
v-model="isInsuranceSelected"
groupName="CashOrInsuranceQuestion" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 col-xl-8">
<servicePackageQuestion
ref="servicePackage"
cashCmsWidgetName="CashServicePackageQuestionWidget"
@ -34,7 +37,10 @@
v-on="{ 'buttonEvent.openModal': openModalAction }"
validationRules="option-required"
isRequired />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<afterpayModalBanner
v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
cmsWidgetName="AfterpayModalWidget"

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

@ -136,24 +136,22 @@ export default {
</script>
<style lang="scss">
.discount-text {
line-height: 36px;
display: flex;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
background-color: #469d2a;
align-items: center;
justify-content: center;
padding: 5px;
width: 100%;
color: white;
}
.package-main {
.package-wrapper {
margin: 0.5rem 0;
@include media-breakpoint-up(md) {
margin: 1rem .5rem;
display: flex;
flex-direction: column;
align-self: flex-end;
}
label {
display: block;
@include media-breakpoint-up(md) {
display: flex;
min-height: 300px;
}
}
input[type="radio"] {
@ -265,6 +263,10 @@ export default {
width: 100%;
max-height: 0;
transition: all 0.5s ease;
@include media-breakpoint-up(md) {
max-height: 500px;
// margin-bottom: 5rem;
}
p {
font-weight: 500;
@ -274,6 +276,15 @@ export default {
&.pricing-info {
color: $green;
font-size: 0.875rem;
@include media-breakpoint-up(md) {
position: absolute;
bottom: .75rem;
left: 0;
width: 100%;
text-align: center;
font-size: 1.125rem;
color: $gray-500;
}
span.strikethrough-price {
text-decoration: line-through;
font-size: 0.75rem;
@ -299,9 +310,9 @@ export default {
text-decoration: line-through;
margin-right: 0;
font-weight: 500;
font-size: 14px;
font-size: 0.875rem;
line-height: 20px;
color: $gray-550;
color: $gray-500;
padding-right: 2px;
}
div.discount-price {
@ -309,6 +320,13 @@ export default {
font-weight: 600;
font-size: 26px;
}
@include media-breakpoint-up(md) {
position: absolute;
bottom: .75rem;
left: 0;
width: 100%;
text-align: center;
}
}
}
ul {
@ -337,8 +355,23 @@ export default {
.hide-when-closed {
display: none;
@include media-breakpoint-up(md) {
display: flex;
flex-direction: column;
}
}
}
.discount-text {
height: 2rem;
display: flex;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
background-color: #469d2a;
align-items: center;
justify-content: center;
width: 100%;
color: white;
}
}
}
</style>