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