Commit 24ed7cb4 authored by JosephK's avatar JosephK
Browse files

Onetime/monthly buttons

parent 36e3cf32
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M275.3 250.5c7 7.4 18.4 7.4 25.5 0l108.9-114.2c31.6-33.2 29.8-88.2-5.6-118.8-30.8-26.7-76.7-21.9-104.9 7.7L288 36.9l-11.1-11.6C248.7-4.4 202.8-9.2 172 17.5c-35.3 30.6-37.2 85.6-5.6 118.8l108.9 114.2zm290 77.6c-11.8-10.7-30.2-10-42.6 0L430.3 402c-11.3 9.1-25.4 14-40 14H272c-8.8 0-16-7.2-16-16s7.2-16 16-16h78.3c15.9 0 30.7-10.9 33.3-26.6 3.3-20-12.1-37.4-31.6-37.4H192c-27 0-53.1 9.3-74.1 26.3L71.4 384H16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16h356.8c14.5 0 28.6-4.9 40-14L564 377c15.2-12.1 16.4-35.3 1.3-48.9z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M565.3 328.1c-11.8-10.7-30.2-10-42.6 0L430.3 402c-11.3 9.1-25.4 14-40 14H272c-8.8 0-16-7.2-16-16s7.2-16 16-16h78.3c15.9 0 30.7-10.9 33.3-26.6 3.3-20-12.1-37.4-31.6-37.4H192c-27 0-53.1 9.3-74.1 26.3L71.4 384H16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16h356.8c14.5 0 28.6-4.9 40-14L564 377a31.98 31.98 0 001.3-48.9zM244.07 277.15h116.07c8 0 14.5-6.5 14.5-14.5v-29.02c0-8.02-6.5-14.51-14.5-14.51h-29.02V59.52c0-8-6.5-14.5-14.51-14.5h-43.53a14.5 14.5 0 00-12.94 8.01l-14.51 29.02a14.5 14.5 0 0012.95 21h14.5v116.07h-29.01a14.5 14.5 0 00-14.51 14.5v29.02c0 8.02 6.5 14.51 14.5 14.51z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M159.88,175.82h64v64a16,16,0,0,0,16,16h64a16,16,0,0,0,16-16v-64h64a16,16,0,0,0,16-16v-64a16,16,0,0,0-16-16h-64v-64a16,16,0,0,0-16-16h-64a16,16,0,0,0-16,16v64h-64a16,16,0,0,0-16,16v64A16,16,0,0,0,159.88,175.82ZM568.07,336.13a39.91,39.91,0,0,0-55.93-8.47L392.47,415.84H271.86a16,16,0,0,1,0-32H350.1c16,0,30.75-10.87,33.37-26.61a32.06,32.06,0,0,0-31.62-37.38h-160a117.7,117.7,0,0,0-74.12,26.25l-46.5,37.74H15.87a16.11,16.11,0,0,0-16,16v96a16.11,16.11,0,0,0,16,16h347a104.8,104.8,0,0,0,61.7-20.27L559.6,392A40,40,0,0,0,568.07,336.13Z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M568.07 336.13a39.91 39.91 0 00-55.93-8.47l-119.67 88.18H271.86a16 16 0 110-32h78.24c16 0 30.75-10.87 33.37-26.61a32.06 32.06 0 00-31.62-37.38h-160a117.7 117.7 0 00-74.12 26.25l-46.5 37.74H15.87a16.11 16.11 0 00-16 16v96a16.11 16.11 0 0016 16h347a104.8 104.8 0 0061.7-20.27L559.6 392a40 40 0 008.47-55.87zM333.14 65.38a87.28 87.28 0 00-60.1-23.69 88.01 88.01 0 00-85.18 66.37 6.3 6.3 0 01-6.1 4.79h-29.98a6.28 6.28 0 01-6.18-7.42C156.92 45.31 209.7-.17 273.1-.17c34.77 0 66.35 13.68 89.64 35.94l18.69-18.69c7.91-7.9 21.44-2.3 21.44 8.88v70.15c0 6.93-5.63 12.55-12.56 12.55h-70.15c-11.18 0-16.79-13.52-8.88-21.43zm-177.23 85.14h70.14c11.2 0 16.8 13.53 8.88 21.44l-21.84 21.85a87.28 87.28 0 0060.1 23.69 88.01 88.01 0 0085.18-66.37 6.3 6.3 0 016.1-4.8h29.98c3.93 0 6.9 3.57 6.18 7.43-11.32 60.11-64.1 105.6-127.52 105.6a129.32 129.32 0 01-89.63-35.94l-18.7 18.69c-7.9 7.9-21.43 2.3-21.43-8.88v-70.15c0-6.93 5.62-12.56 12.56-12.56z"/></svg>
\ No newline at end of file
......@@ -60,18 +60,18 @@
size="lg"
@change="form.don = form.monthly ? 50 : 10; form.other1 = form.otherM = ''"
>
<b-radio :value="false">
<svg-icon
name="hand-holding-heart"
:label="$t('sfs.form.step1.oneshot')"
/>
</b-radio>
<b-radio :value="true">
<svg-icon
name="hand-holding-medical"
:label="$t('sfs.form.step1.monthly')"
/>
</b-radio>
<b-radio :value="false">
<svg-icon
name="hand-holding-heart"
:label="$t('sfs.form.step1.oneshot')"
/>
</b-radio>
</b-radio-group>
<!-- Monthly -->
......
......@@ -241,14 +241,42 @@ $onetime: c(b, 7); // $bleu foncé
margin-top: -.25em;
}
.btn:nth-of-type(2).active {
span { border-bottom: 3px solid $monthly; }
svg { fill: $monthly; }
label.btn {
margin: 1rem 0;
padding-left: 15px;
padding-right: 15px;
}
.btn:nth-of-type(1).active {
span { border-bottom: 3px solid $onetime; }
svg { fill: $onetime; }
label.btn:nth-of-type(1)::after {
content: "/";
font-size: 1.5rem;
color: c(g, 7);
margin-left: 32px;
line-height: 1rem;
}
.btn {
> span {
border: 1px solid c(g, 2);
border-bottom-width: 3px;
padding: .5rem;
}
&:hover, &:focus {
> span {
border-color: c(g, 4)
}
}
&:nth-of-type(1).active {
> span { border-color: $monthly; }
svg { fill: $monthly; }
}
&:nth-of-type(2).active {
> span { border-color: $onetime; }
svg { fill: $onetime; }
}
}
.amount {
......
......@@ -12,8 +12,8 @@ section:
form:
step1:
title: 1. I want to give to Framasoft
monthly: Monthly recurring donation
oneshot: One-time donation
monthly: Every month
oneshot: Once
other: Other amount (e.g. {n})
anonymous: I want my donation to remain anonymous
receipt: I would like to receive a tax receipt
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment