GiveWP WooCommerce Checkout Donations - UI Modifications

squarecandy-checkout-donation-mod.js

( function( $ ) {
	$( document ).ready( function() {
		// Checkout Donation Add On
		function showHideAddDonationButton() {
			if ( ! $( '.give-wc-form-selector' ).is( ':checked' ) ) {
				$( '.give-wc-update-donations' ).hide();
			} else {
				$( '.give-wc-update-donations' ).show();
			}
			setTimeout( function() {
				if ( ! $( '.give-wc-form-selector' ).is( ':checked' ) ) {
					$( '.give-wc-update-donations' ).hide();
				} else {
					$( '.give-wc-update-donations' ).show();
				}
			}, 200 );
		}
		showHideAddDonationButton();

		$( '.give-wc-form-selector' ).on( 'change', function() {
			showHideAddDonationButton();
		} );

		$( '#give_wc_update_donation' ).on( 'click', function() {
			$( '#clear_give_wc_donation' ).show();
		} );

		$( '#clear_give_wc_donation' ).on( 'click', function( e ) {
			e.preventDefault();
			if ( $( '.give-wc-form-selector' ).is( ':checked' ) ) {
				$( '.give-wc-form-selector' ).click();
				$( '.give-wc-donation-inside' ).addClass( 'give-wc-hidden' );
				$( '.give-wc-give-form-row' ).addClass( 'give-wc-active-row' );
			}
			$( '#give_wc_update_donation' ).click();
			$( '#clear_give_wc_donation' ).hide();
		} );
 	} );
} )( jQuery );

squarecandy-checkout-donations.scss

body .give_wc_donation_section {
	padding: 10px;
	color: #fff;
	background: #444;

	* {
		color: #fff;
	}

	table {
		margin: 0;
	}

	table,
	table tbody tr,
	table tr td.give-wc-give-form-row.give-wc-active-row,
	table tr:last-child td.give-wc-give-form-row,
	.give-wc-give-form-row .give-wc-donation-inside {
		background-color: transparent;
		border: none;
	}

	.give-wc-give-form-head:hover {
		background-color: transparent !important;
	}

	.give-wc-donation-level-radio li {
		display: inline-block;
		margin: 2px 20px 2px 0;
	}

	.give-wc-give-form-row .give-wc-donation-inside .give-wc-donation-amount-wrap {
		display: block;
		width: 100%;
		max-width: none;
		margin: 28px 0 0;
		text-align: center;
	}

	.give-wc-give-form-row .give-wc-donation-inside .give-wc-inside-left-panel {
		display: block;
		width: 100%;
		max-width: none;
		text-align: left;
	}

	.give-wc-update-donations {
		display: block;
		width: 100%;
		max-width: none;
		margin: 10px 0 0;
		text-align: center;
	}

}

.give-wc-clear-container {
	margin-top: rem(16);
	text-align: center;

	button {
		padding: rem(7) rem(14);
		font-size: rem(14);
	}
}