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

banner styling updates

Browse source
This commit is contained in:
Katie Kroell 2026-02-18 16:19:22 -05:00
parent 933dfcc5d4
commit aa4f9c2dc7
1 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
View file

@ -3,20 +3,20 @@
<component
:is="'script'">
src="https://js.squarecdn.com/square-marketplace.js"
async></component>
async>
</component>
<div class="afterpay-content">
<span class="afterpay-header" v-html="afterpayHeaderCopy"></span>
<span class="afterpay-amount">{{ afterpayPaymentAmount }}</span>
<span class="afterpay-subheader" v-html="afterpaySubheaderCopy"></span>
<span class="afterpay-copy" v-html="afterpayCopy"></span>
<span class="afterpay-copy">{{ afterpayPaymentAmount }}</span>
<span class="afterpay-copy" v-html="afterpayCopyTwo"></span>
<img :src="imageUrl" class="image"/>
<span>. &nbsp;</span>
<span class="afterpay-copy">. &nbsp;</span>
<a
id="afterpay-learnmore"
href="#"
data-afterpay-modal="en_US"
data-bind="click:afterpayLearnMore"
class="afterpay-learn-more"
>Learn more
class="afterpay-learn-more">Learn more
</a>
</div>
</div>
@ -72,10 +72,10 @@ export default {
imageUrl() {
return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
},
afterpayHeaderCopy() {
afterpayCopy() {
return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
},
afterpaySubheaderCopy() {
afterpayCopyTwo() {
return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT);
},
modalName() {
@ -114,33 +114,32 @@ export default {
}
.afterpay-content {
display: flex;
flex-direction: column;
display: block;
text-align: center;
}
.afterpay-copy {
font-size: 0.875rem;
color: $blue-700;
font-weight: $font-weight-bold;
text-align: center;
flex-direction: column;
}
.image-and-link {
display: flex;
justify-content: center;
align-items: center;
}
.image {
flex-direction: column;
border: 0;
height: 20px;
width: 83px;
}
:deep(a.learn-more-link) {
:deep(a.afterpay-learn-more) {
color: $blue-700;
fill: $blue-700;
text-decoration: underline;
font-size: 0.875rem;
}
.afterpay-modal {