]>
Commit | Line | Data |
---|---|---|
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 | position: relative; | |
43 | padding: 24px 20px; | |
44 | } | |
45 | ||
46 | label.amount { | |
47 | width: 84px; | |
48 | height: 48px; | |
49 | display: block; | |
50 | background-color: white; | |
51 | border-radius: 2px; | |
52 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23); | |
53 | font-size: 20px; | |
54 | color: $blue-400; | |
55 | text-align: center; | |
56 | margin: 0 8px 16px 8px; | |
57 | padding: 8px 0 0 0; | |
58 | } | |
59 | ||
60 | input[name=amount] { | |
61 | display: none; | |
62 | } | |
63 | ||
64 | input[name=amount]:checked + label { | |
65 | background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210)); | |
66 | color: white; | |
67 | } | |
68 | ||
69 | .or { | |
70 | display: block; | |
71 | height: 200px; | |
72 | width: 1px; | |
73 | border: 1px solid $blue-grey-300; | |
74 | position: absolute; | |
75 | left: 350px; | |
76 | top: 12px; | |
77 | &:before { | |
78 | content: "OR"; | |
79 | font-family: 'Ubuntu', sans-serif; | |
80 | font-size: 16px; | |
81 | font-weight: 500; | |
82 | color: $blue-grey-300; | |
83 | background-color: $blue-grey-50; | |
84 | display: block; | |
85 | position: absolute; | |
86 | top: 12px; | |
87 | left: -12px; | |
88 | width: 24px; | |
89 | height: 24px; | |
90 | } | |
91 | } |