Skip to content

Instantly share code, notes, and snippets.

@Efetivos

Efetivos/drawer_donate.html

Last active July 2, 2020 18:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Efetivos/85c698b8662cfc4646ef259c6549ab3d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Efetivos/85c698b8662cfc4646ef259c6549ab3d to your computer and use it in GitHub Desktop.
Download ZIP
Drawer | Donate See Change
Raw
drawer_donate.html
<div class="drawer drawer__donate e-wvw e-hvh e-wvw e-fixed">
<div class="drawer__white e-abs e-hvh e-wp e-white"></div>
<div class="drawer__hold e-hold">
<div class="drawer__texts">
<h2 class="e-serif js-anima-d">DONATE</h2>
<p class="js-anima-d">Onec aliquam elit id enim ipsum dolor sit amet consectetur adipiscing.</p>
<p class="js-anima-d">Proin elementum metus pellentesque tortor condimentum dictum. Donec aliquam elit id enim.</p>
</div>
<div class="drawer__form">
<form class="forms form-contact e-rel e-wp" controller="form" method="post" action="<?=admin_url('admin-ajax.php')?>" novalidate>
<fieldset class="amounts">
<div class="e-flex e-color"><label class="radio"><input type="radio" name="amount" value="50"><span>$50</span></label><label class="radio"><input type="radio" name="amount" value="100"><span>$100</span></label><label class="radio"><input type="radio" name="amount" value="150"><span>$150</span></label><label class="radio"><input type="radio" name="amount" value="200"><span>$200</span></label></div>
</fieldset>
<fieldset><input type="text" name="other_amount" placeholder="Other amount"></fieldset>
<input type="hidden" name="action" value="donate">
<div class="btn-primary wrapped js-anima-d">
<button class="e-flex">
<div class="t-bold">Submit</div>
<div class="circle e-color"><span class="t-white icon-arrow-right"></span><span class="t-white icon-arrow-right"></span></div>
</button>
</div>
</form>
<div class="sucess e-abs">
<span class="sucess__message thanks e-sans">Thank you for your Donation $$$$. We'll get back to you as soon as we can.</span>
<div class="sucess__badget">
<div class="t-bold">Sucess!</div>
<div class="icon e-flex"><span class="icon-checkmark"></span></div>
</div>
</div>
</div>
</div>
<div class="drawer__decor e-abs e-color e-hvh"></div>
<div class="drawer__close e-curp close-menu">
<div class="e-full-rel e-flex">
<div class="line line0 e-wp e-abs e-color"></div>
<div class="line line1 e-wp e-abs e-color"></div>
</div>
</div>
</div>
Raw
drawer_donate.js
this.support()
support() {
let $amounts = document.querySelectorAll('.amounts input')
let $otherInput = $('input[name="other_amount"]')
$($amounts).change(function(){
$otherInput.val('')
})
$otherInput.keyup(function(){
$($amounts).prop('checked', false)
});
$(this.contentPage ).on('change', 'fieldset.amounts input', function(){ $('input[name="other_amount').val(''); });
$(this.contentPage ).on('keyup', 'input[name="other_amount"]', function(){ $('fieldset.amounts input').prop('checked', false); });
}
Raw
drawer_donate.sass
.amounts
border: 2px solid var(--color)
margin-bottom: 0
.e-flex
justify-content: space-between
label.radio
display: block
position: relative
background: #fff
width: calc((100% - 6px) / 4)
line-height: 50px
height: 50px
input[type="radio"]
opacity: 0
pointer-events: none
position: absolute
input[type="radio"] + span
color: var(--color)
text-align: center
cursor: pointer
input[type="radio"]:checked + span
color: #fff
pointer-events: none
background: var(--color)
input[name="other_amount"]
text-align: center
border: 2px solid var(--color)
height: 50px
padding: 0
border-top: none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment