]>
Commit | Line | Data |
---|---|---|
ea23fbb7 SH |
1 | .donation { |
2 | background-image: url('../img/header-background.jpg'); | |
3 | background-size: cover; | |
4 | background-attachment: fixed; | |
5 | background-position: center center; | |
6 | width: 100vw; | |
7 | height: 768px; | |
8 | margin-bottom: 1122px; | |
9 | @include media-breakpoint-up(sm) { | |
10 | margin-bottom: 1078px; | |
11 | } | |
12 | @include media-breakpoint-up(md) { | |
13 | margin-bottom: 668px; | |
14 | } | |
15 | @include media-breakpoint-up(lg) { | |
16 | margin-bottom: 522px; | |
17 | } | |
18 | @include media-breakpoint-up(xl) { | |
19 | height: 800px; | |
20 | margin-bottom: 328px; | |
21 | } | |
22 | } | |
23 | ||
a33e1b4b SH |
24 | .donation-card { |
25 | border-radius: 4px; | |
26 | background-color: white; | |
27 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); | |
ea23fbb7 SH |
28 | @include media-breakpoint-down(sm) { |
29 | background-color: transparent; | |
30 | box-shadow: none; | |
31 | border-radius: 0; | |
32 | } | |
33 | h3 a { | |
34 | color: white; | |
35 | } | |
36 | .card { | |
37 | @include media-breakpoint-down(sm) { | |
38 | height: 1100px; | |
39 | margin-bottom: 32px; | |
40 | border-radius: 4px; | |
41 | background-color: white; | |
42 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); | |
43 | } | |
44 | @include media-breakpoint-down(xs) { | |
45 | border-radius: 0; | |
46 | box-shadow: none; | |
47 | margin-bottom: 0; | |
48 | } | |
49 | } | |
50 | .info { | |
51 | border-radius: 4px 0 0 4px; | |
52 | @include media-breakpoint-down(sm) { | |
53 | border-radius: 4px; | |
54 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); | |
55 | } | |
56 | @include media-breakpoint-down(xs) { | |
57 | border-radius: 0; | |
58 | box-shadow: none; | |
59 | } | |
60 | } | |
a33e1b4b SH |
61 | } |
62 | ||
a33e1b4b SH |
63 | .ownamount { |
64 | overflow: hidden; | |
65 | width: 95%; | |
66 | height: 48px; | |
67 | padding: 0 16px; | |
68 | border-radius: 2px; | |
69 | border: none; | |
70 | } | |
71 | ||
a33e1b4b SH |
72 | .ownamount { |
73 | background-color: rgba($blue-grey-900, .08); | |
74 | border-bottom: 2px solid $blue-grey-900; | |
75 | width: 90%; | |
76 | } | |
0c707f0b SH |
77 | |
78 | input.radiobtn:not(old) { | |
79 | display: none; | |
80 | } | |
81 | ||
82 | input.radiobtn:not(old) + label { | |
83 | display: inline-block; | |
84 | background-image: url("/static/img/icons/icon-radiobtn-off.png"); | |
85 | background-repeat: no-repeat; | |
86 | background-position: 0 0; | |
ea23fbb7 SH |
87 | padding-left: 40px; |
88 | @include media-breakpoint-up(lg) { | |
89 | padding-left: 28px; | |
90 | } | |
0c707f0b SH |
91 | } |
92 | ||
93 | input.radiobtn:not(old):checked + label { | |
94 | background-image: url("/static/img/icons/icon-radiobtn-on.png"); | |
a33e1b4b SH |
95 | } |
96 | ||
97 | .inline-card { | |
98 | border-radius: 8px; | |
99 | background-color: $blue-grey-50; | |
100 | padding: 24px; | |
8977de1e SH |
101 | position: relative; |
102 | padding: 24px 20px; | |
ea23fbb7 SH |
103 | #amount { |
104 | margin-left: -8px; | |
105 | } | |
a33e1b4b SH |
106 | } |
107 | ||
108 | label.amount { | |
ea23fbb7 | 109 | width: 76px; |
a33e1b4b SH |
110 | height: 48px; |
111 | display: block; | |
112 | background-color: white; | |
113 | border-radius: 2px; | |
114 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23); | |
115 | font-size: 20px; | |
116 | color: $blue-400; | |
8977de1e | 117 | text-align: center; |
ea23fbb7 | 118 | margin: 0 4px 12px 4px; |
8977de1e | 119 | padding: 8px 0 0 0; |
ea23fbb7 SH |
120 | @include media-breakpoint-up(sm) { |
121 | width: 84px; | |
122 | margin: 0 8px 16px 8px; | |
123 | } | |
124 | } | |
125 | ||
126 | label.cc img { | |
127 | height: 24px; | |
128 | } | |
129 | ||
130 | #ccpayment, | |
131 | #paymentpaypal, | |
132 | #sepapayment { | |
133 | @include media-breakpoint-down(lg) { | |
134 | padding-bottom: 24px; | |
135 | margin-bottom: 32px; | |
136 | label img { | |
137 | position: relative; | |
138 | } | |
139 | } | |
140 | } | |
141 | ||
142 | #ccpayment { | |
143 | @include media-breakpoint-up(lg) { | |
144 | margin-top: 16px; | |
145 | label { | |
146 | background-position: 0 4px; | |
147 | } | |
148 | } | |
149 | } | |
150 | ||
151 | #paymentpaypal { | |
152 | @include media-breakpoint-down(lg) { | |
153 | label img { | |
154 | top: -7px; | |
155 | } | |
156 | } | |
157 | @include media-breakpoint-up(lg) { | |
158 | margin-top: 14px; | |
159 | label { | |
160 | background-position: 0 6px; | |
161 | } | |
162 | } | |
163 | @include media-breakpoint-up(xl) { | |
164 | margin-top: 0; | |
165 | label { | |
166 | background-position: 0 20px; | |
167 | } | |
168 | } | |
169 | } | |
170 | ||
171 | #sepapayment { | |
172 | @include media-breakpoint-up(lg) { | |
173 | padding-top: 20px; | |
174 | } | |
a33e1b4b SH |
175 | } |
176 | ||
177 | input[name=amount] { | |
178 | display: none; | |
179 | } | |
180 | ||
181 | input[name=amount]:checked + label { | |
182 | background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210)); | |
183 | color: white; | |
8977de1e SH |
184 | } |
185 | ||
186 | .or { | |
187 | display: block; | |
ea23fbb7 SH |
188 | height: 1px; |
189 | width: 90%; | |
8977de1e SH |
190 | border: 1px solid $blue-grey-300; |
191 | position: absolute; | |
ea23fbb7 SH |
192 | left: 5%; |
193 | top: 212px; | |
194 | @include media-breakpoint-up(sm) { | |
195 | top: 222px; | |
196 | } | |
197 | @include media-breakpoint-up(lg) { | |
198 | height: 200px; | |
199 | width: 1px; | |
200 | border: 1px solid $blue-grey-300; | |
201 | left: 257px; | |
202 | top: 12px; | |
203 | } | |
204 | @include media-breakpoint-up(xl) { | |
205 | left: 350px; | |
206 | } | |
8977de1e SH |
207 | &:before { |
208 | content: "OR"; | |
209 | font-family: 'Ubuntu', sans-serif; | |
210 | font-size: 16px; | |
211 | font-weight: 500; | |
ea23fbb7 | 212 | text-align: center; |
8977de1e SH |
213 | color: $blue-grey-300; |
214 | background-color: $blue-grey-50; | |
215 | display: block; | |
216 | position: absolute; | |
ea23fbb7 SH |
217 | top: -13px; |
218 | left: 50%; | |
219 | margin-left: -20px; | |
220 | width: 40px; | |
8977de1e | 221 | height: 24px; |
ea23fbb7 SH |
222 | @include media-breakpoint-up(lg) { |
223 | text-align: left; | |
224 | display: block; | |
225 | top: 12px; | |
226 | left: -12px; | |
227 | margin-left: 0; | |
228 | width: 24px; | |
229 | height: 24px; | |
230 | } | |
8977de1e | 231 | } |
a33e1b4b | 232 | } |