CASH-498 - created custom secondary button just for donation block

This commit is contained in:
Minojhini Valaiyapathi 2025-04-11 12:02:53 -04:00
parent 823c0c5dda
commit 07c0a0634a
2 changed files with 15 additions and 2 deletions

View file

@ -55,7 +55,8 @@
<buttonMain <buttonMain
ref="buttonMain" ref="buttonMain"
:buttonText="DonationAddButtonCopy" :buttonText="DonationAddButtonCopy"
loaderColor="white" loaderColor="blue"
customSecondary="true"
class="w-100 mb-2" class="w-100 mb-2"
@click-event="handleDonationAction" /> @click-event="handleDonationAction" />
</div> </div>

View file

@ -3,7 +3,11 @@
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay" class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
:class="[ :class="[
isPrimary ? 'btn-primary' : 'btn-secondary', customSecondary
? 'btn-secondary custom-secondary'
: isPrimary
? 'btn-primary'
: 'btn-secondary',
isFloat ? 'float-end' : '', isFloat ? 'float-end' : '',
isLoaderDisplayed && !suppressLoader ? 'has-loader' : '', isLoaderDisplayed && !suppressLoader ? 'has-loader' : '',
]" ]"
@ -29,6 +33,7 @@ export default {
loaderPosition: String, loaderPosition: String,
isFloat: Boolean, isFloat: Boolean,
suppressLoader: Boolean, suppressLoader: Boolean,
customSecondary: Boolean, // New property to check if it comes from donationBlock
}, },
data() { data() {
return { return {
@ -156,6 +161,13 @@ export default {
transition: background 0s 0s ease-in-out; transition: background 0s 0s ease-in-out;
} }
} }
&.custom-secondary {
&:hover {
color: $blue !important;
background: transparent !important;
border: 1px solid $blue;
}
}
&.btn-success { &.btn-success {
position: relative; position: relative;
background: $green-100; background: $green-100;