CASH-498 - created custom secondary button just for donation block
This commit is contained in:
parent
823c0c5dda
commit
07c0a0634a
2 changed files with 15 additions and 2 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue