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

Css changes

Browse source
This commit is contained in:
Sneha 2024-06-07 17:04:45 +05:30
parent 3424f7e514
commit 5989e446de
1 changed files with 72 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,8 @@
<template> <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"> <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
<div <div
class="package-label" class="package-label"
@ -8,20 +12,40 @@
]" ]"
for="testradio"> for="testradio">
<div class="package-specs"> <div class="package-specs">
<p class="m-0"> <div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
<span v-html="this.buttonLabel"></span> <div class="col md-6">
<span class="pricing-info"> <p class="m-0">
<span <span v-html="this.buttonLabel"></span>
class="strikethrough-price" </p>
<p
class="sub-label m-0"
v-if="this.buttonLabelSubCopy"
v-html="this.buttonLabelSubCopy"></p>
</div>
<span class="col md-6 service-package-discount">
<div
class="strikethrough-discount-price"
v-if="shouldDisplayStrikeThroughPrice" v-if="shouldDisplayStrikeThroughPrice"
v-html="this.additionalButtonData.strikeThroughPrice"></span> v-html="this.additionalButtonData.strikeThroughPrice"></div>
<span v-html="this.buttonAuxillaryCopy"></span>* <div class="discount-price" v-html="this.buttonAuxillaryCopy"></div>
</span> </span>
</p> </div>
<p <div v-else>
class="sub-label m-0" <p class="m-0">
v-if="this.buttonLabelSubCopy" <span v-html="this.buttonLabel"></span>
v-html="this.buttonLabelSubCopy"></p> <span class="pricing-info">
<span
class="strikethrough-price"
v-if="shouldDisplayStrikeThroughPrice"
v-html="this.additionalButtonData.strikeThroughPrice"></span>
<span v-html="this.buttonAuxillaryCopy"></span>*
</span>
</p>
<p
class="sub-label m-0"
v-if="this.buttonLabelSubCopy"
v-html="this.buttonLabelSubCopy"></p>
</div>
<div class="hide-when-closed"> <div class="hide-when-closed">
<!-- Parse the body text containing <ul> with logic --> <!-- Parse the body text containing <ul> with logic -->
<ul> <ul>
@ -58,10 +82,6 @@
v-if="this.buttonFooterCopy" v-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div> v-html="this.buttonFooterCopy"></div>
</div> </div>
<span
:class="[this.additionalButtonData.Text ? 'discount-text' : '']"
v-if="this.additionalButtonData.servicePackageDiscount"
v-html="this.additionalButtonData.Text"></span>
</div> </div>
</div> </div>
</baseInputButton> </baseInputButton>
@ -116,6 +136,18 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.discount-text {
line-height: 36px;
display: flex;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: #469d2a;
align-items: center;
justify-content: center;
padding: 5px;
width: 100%;
color: white;
}
.package-main { .package-main {
.package-wrapper { .package-wrapper {
margin: 0.5rem 0; margin: 0.5rem 0;
@ -147,7 +179,8 @@ export default {
min-height: 80px; min-height: 80px;
} }
&.has-text { &.has-text {
min-height: 124px; border-radius: 0;
border: 1px solid #469d2a !important;
} }
&:before { &:before {
@ -256,6 +289,28 @@ export default {
font-size: 0.75rem; font-size: 0.75rem;
} }
} }
span {
&.service-package-discount {
color: #469d2a;
text-align: end;
font-weight: 500;
font-size: 13px;
div.strikethrough-discount-price {
text-decoration: line-through;
margin-right: 0;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: $gray-550;
padding-right: 2px;
}
div.discount-price {
color: #469d2a;
font-weight: 600;
font-size: 26px;
}
}
}
ul { ul {
margin: 1rem 0 0 -15px; margin: 1rem 0 0 -15px;
padding: 0; padding: 0;
@ -283,17 +338,6 @@ export default {
.hide-when-closed { .hide-when-closed {
display: none; display: none;
} }
.discount-text {
width: 170px;
height: 40px;
padding: 8px 16px 8px 16px;
background-color: #e6f2ec;
font-size: 14px;
font-weight: 500;
line-height: 24px;
text-align: center;
color: #075f35;
}
} }
} }
} }