From 54e768a23bc4e0cc1521fd1b752c9c5ef0a97701 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Mon, 22 Oct 2018 09:18:12 +0100
Subject: [PATCH] donation: Use custom form elements

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/scss/style.scss       |  1 +
 src/templates/donate.html | 36 ++++++++++++++++++------------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/scss/style.scss b/src/scss/style.scss
index d783b33a..18069ecd 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -17,6 +17,7 @@
 @import "../bootstrap/scss/dropdown";
 @import "../bootstrap/scss/button-group";
 @import "../bootstrap/scss/input-group";
+@import "../bootstrap/scss/custom-forms";
 @import "../bootstrap/scss/nav";
 @import "../bootstrap/scss/navbar";
 @import "../bootstrap/scss/card";
diff --git a/src/templates/donate.html b/src/templates/donate.html
index 93a26e59..a4bd50f7 100644
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -31,32 +31,32 @@
 								<div class="col-12 col-lg-6 mb-3 mb-md-0">
 									<h6>Choose a currency</h6>
 
-									<div class="form-check form-check-inline">
-										<input class="form-check-input" type="radio" name="currency" id="EUR" value="EUR"
+									<div class="custom-control custom-radio custom-control-inline">
+										<input class="custom-control-input" type="radio" name="currency" id="EUR" value="EUR"
 											{% if currency == "EUR" %}checked{% end %}>
-										<label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
+										<label class="custom-control-label" for="EUR">{{ _("Euro") }}</label>
 									</div>
 
-									<div class="form-check form-check-inline">
-										<input class="form-check-input" type="radio" name="currency" id="USD" value="USD"
+									<div class="custom-control custom-radio custom-control-inline">
+										<input class="custom-control-input" type="radio" name="currency" id="USD" value="USD"
 											{% if currency == "USD" %}checked{% end %}>
-										<label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
+										<label class="custom-control-label" for="USD">{{ _("US Dollar") }}</label>
 									</div>
 								</div>
 
 								<div class="col-12 col-lg-6">
 									<h6>Frequency</h6>
 
-									<div class="form-check form-check-inline">
-										<input class="form-check-input" type="radio" name="frequency" id="frequency-one-time"
+									<div class="custom-control custom-radio custom-control-inline">
+										<input class="custom-control-input" type="radio" name="frequency" id="frequency-one-time"
 											value="one-time" {% if frequency == "one-time" %}checked{% end %}>
-										<label class="form-check-label" for="frequency-one-time">{{ _("One Time") }}</label>
+										<label class="custom-control-label" for="frequency-one-time">{{ _("One Time") }}</label>
 									</div>
 
-									<div class="form-check form-check-inline">
-										<input class="form-check-input" type="radio" name="frequency" id="frequency-monthly"
+									<div class="custom-control custom-radio custom-control-inline">
+										<input class="custom-control-input" type="radio" name="frequency" id="frequency-monthly"
 											value="monthly" {% if frequency == "monthly" %}checked{% end %}>
-										<label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
+										<label class="custom-control-label" for="frequency-monthly">{{ _("Monthly") }}</label>
 									</div>
 								</div>
 							</div>
@@ -90,13 +90,13 @@
 									<div class="col d-flex flex-column">
 										<div class="form-row">
 											<div class="col">
-												<div class="form-check form-check-inline mb-3">
-													<input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
-													<label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
+												<div class="custom-control custom-radio custom-control-inline mb-3">
+													<input class="custom-control-input" type="radio" name="title" id="mr" value="Mr." checked>
+													<label class="custom-control-label" for="mr">{{ _("Mr.") }}</label>
 												</div>
-												<div class="form-check form-check-inline mb-3">
-													<input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
-													<label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
+												<div class="custom-control custom-radio custom-control-inline mb-3">
+													<input class="custom-control-input" type="radio" name="title" id="mrs" value="Mrs.">
+													<label class="custom-control-label" for="mrs">{{ _("Mrs.") }}</label>
 												</div>
 											</div>
 										</div>
-- 
2.47.3