CSR-2346 fix misaligned promo copy.

Update colors and font sizes with variable and REM values.
This commit is contained in:
Bryan Mauger 2024-11-08 09:10:51 -05:00
parent ba09a17ae1
commit dbb2621e67

View file

@ -50,7 +50,7 @@
cmsWidgetName="AlertInshopPromoWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<div class="mt-4" v-for="(promoCode, i) in this.getPromoCodeList()" :key="i">
<div class="mt-4 d-flex align-items-center justify-content-between" v-for="(promoCode, i) in this.getPromoCodeList()" :key="i">
<span class="applied-promo"
>Promo code <span class="promo-code">{{ promoCode }}</span> applied
</span>
@ -357,19 +357,18 @@ export default {
</script>
<style lang="scss" scoped>
.applied-promo {
padding-right: 4rem;
font-size: 14px;
font-size: .875rem;
font-weight: 500;
line-height: 24px;
color: #0c7e47;
color: $green;
.promo-code {
text-transform: uppercase;
}
}
.alert {
color: #d4281c;
font-size: 14px;
color: $red;
font-size: .875rem;
font-weight: 500;
line-height: 24px;
}