change the icon, the button style and text on the donation page
[people/shoehn/ipfire.org.git] / static / scss / _donation.scss
1 .donation-card {
2         border-radius: 4px;
3         background-color: white;
4         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
5 }
6
7 .ownamount {
8         overflow: hidden;
9         width: 95%;
10         height: 48px;
11         padding: 0 16px;
12         border-radius: 2px;
13         border: none;
14 }
15
16 .ownamount {
17         background-color: rgba($blue-grey-900, .08);
18         border-bottom: 2px solid $blue-grey-900;
19         width: 90%;
20 }
21
22 input.radiobtn:not(old) {
23         display: none;
24 }
25
26 input.radiobtn:not(old) + label {
27         display: inline-block;
28         background-image: url("/static/img/icons/icon-radiobtn-off.png");
29         background-repeat: no-repeat;
30         background-position: 0 0;
31         padding-left: 38px;
32 }
33
34 input.radiobtn:not(old):checked + label {
35         background-image: url("/static/img/icons/icon-radiobtn-on.png");
36 }
37
38 .inline-card {
39         border-radius: 8px;
40         background-color: $blue-grey-50;
41         padding: 24px;
42 }
43
44 label.amount {
45         width: 84px;
46         height: 48px;
47         display: block;
48         background-color: white;
49         border-radius: 2px;
50         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
51         font-size: 20px;
52         color: $blue-400;
53         text-align: left;
54         margin: 0 8px 16px 8px;
55         padding-top: 8px;
56 }
57
58 input[name=amount] {
59         display: none;
60 }
61
62 input[name=amount]:checked + label {
63         background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210));
64         color: white;
65 }