donation: Use custom form elements

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/style.scss b/src/scss/style.scss
index d783b33ac93eecef98b2787c5cc5a5fe4d26d6a6..18069ecd75f47514a6b793d480b4ad2c56a07581 100644 (file)
--- 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 93a26e59c8f9f5f0a30781c3597b74a9ef9b35c8..a4bd50f7f134e61ed353c10cb4ab7e7e9f2bc1f6 100644 (file)
--- 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>