fix: Add warning message when Paypal is selected
As per #38 (closed), there should be a warning message displayed when Paypal is selected as the payment method. This escaped my notice when planning out the various site components - this commit adds it and styles it appropriately.
To accomplish this, we add a file and make a few updates:
- The SASS partial
components/_alerts.scss
has been added, and a custom definition for.alert-primary
written which redefines relevant stock Bootstrap variables to match our designs - The definition of utility class
.hidden
was extended. By default, it does not use the!important
rule, but because, for some reason, theflexbox
utility class.d-flex
does use!important
, it simply doesn't work on any element with.d-flex
. Therefore, we extend.hidden
to contain a carve-out exception wherein, if it is used on an element which also has.d-flex
, it also uses!important
, and because.d-flex.hidden
contains more specificity than.d-flex
, thedisplay: none
rule cascades overdisplay: flex
. - The
.sectionToggle
Paypal button had itsdata-toggles
attribute changed from#checkout_paypal
to.checkout_paypal
, and the element#checkout_paypal
was additionally given the class.checkout_paypal
. This allows us to also give the Paypal warning element the class.checkout_paypal
, such that the Javascript powering section toggling will show and hide the Paypal warning along with the Paypal payment button block.
Closes: #38 (closed)
Edited by stephen