donation.less 4.13 KB
Newer Older
1
2
3
#donation {
    .donation-form-group {
        text-align: left;
4
        font-size: 1em;
5
6
7
8
9
10
    }

    .donation-form-group label {
        font-weight: bold;
    }
    .section {
11
        .card;
Dominik Hebeler's avatar
Dominik Hebeler committed
12
        margin: 0;
13
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
14

Dominik Hebeler's avatar
Dominik Hebeler committed
15
16
17
    #direct-payment > p {
        margin: 0;
    }
18
19
20
21
22
23
24
25
26
27
28
29
30

    input[type=radio] {
        margin: 0px;
        margin-left: 2px;
        margin-right: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        
    }
    h3 {
        font-weight:bold;
    }
    .amount-label {
31
32
33
34
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
Dominik Hebeler's avatar
Dominik Hebeler committed
35
        font-size: 1.1rem;
36
        font-weight: normal;
37
38
        width: 4em;
        margin-bottom: 0;
39
40
        border: 2px solid #a6a6a6;
        border-radius: 5px;
Dominik Hebeler's avatar
Dominik Hebeler committed
41
        cursor: pointer;
42
43
44
45
46
47
48
    }
    .frequency-radio {
        display:none;
    }
    .amount-radio {
        display:none;
    }
49
50
51
52
53
    #frequency {
        display: flex;
        flex-wrap:wrap;
        gap: 4px;
        .frequency-label {
Dominik Hebeler's avatar
Dominik Hebeler committed
54
55
56
            display: flex;
            align-items: center;
            justify-content: center;
57
58
            flex-grow: 1;
            vertical-align: middle;
Dominik Hebeler's avatar
Dominik Hebeler committed
59
60
            height: 30px;
            font-size: 1rem;
61
62
63
64
65
66
67
68
69
70
            margin-bottom: 0;
            font-weight: normal;
            text-align: center;
            border: 2px solid #a6a6a6;
            width: 150px;
            border-radius: 6px;
            cursor: pointer;
        }
        input:checked + .frequency-label {
            border: 2px solid #f47216;
71
            font-weight: bold;
Dominik Hebeler's avatar
Dominik Hebeler committed
72
        }
73
    }
74
75
76
77
78

    #lastschrift-info {
        margin-top: 16px;
    }

79
80
81
82
83
84
85
86
87
88
    #payment-methods {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        .payment-label { 
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: @text-color;  
Dominik Hebeler's avatar
Dominik Hebeler committed
89
            height:30px;
90
91
92
93
94
95
96
97
98
99
100
            font-weight: normal;
            line-height: 40px;
            text-align: center;
            border: 2px solid #a6a6a6;
            width: 150px;
            border-radius: 6px;
            &.payment-label-selected {
                border: 2px solid #f47216;
                font-weight: bold;
            }
        }
101
102
103
104
    }
    .amount-row {
        display: flex;
        justify-content: inherit;
105
106
107
        flex-wrap: wrap; 
        gap: 4px;    
        input:checked + label {
Dominik Hebeler's avatar
Dominik Hebeler committed
108
            border: 2px solid #f47216;
109
110
            font-weight: bold;
        }
111
      }
Kim Höfer's avatar
Kim Höfer committed
112
113
114

    .custom-amount-container {
        display: flex;
115
116
117
118
        flex-wrap:wrap;
        margin-top: 4px;
        gap: 4px;
        input:checked +  label {
119
            border: 2px solid #f47216;
120
121
            font-weight: bold;
        }
Kim Höfer's avatar
Kim Höfer committed
122
    }
123
    .amount-custom {
124
125
        display: flex;
        justify-content: center;
126
        align-items: center;
127
128
        flex-grow: 1;
        padding: 4px 8px;
129
130
131
        font-weight: normal;
        border: 2px solid #a6a6a6;
        border-radius: 5px;
Dominik Hebeler's avatar
Dominik Hebeler committed
132
        cursor: pointer;
133
134
135
136
137
138
    }
    #amount-custom {
        display: none;
    }
    #custom-amount {
        display: none;
Kim Höfer's avatar
Kim Höfer committed
139
        height: 30px;
140
        width: 164px;
141
        flex-grow: 1;
142
143
144
145
    }
    #amount-custom:checked + label + input{
        display: initial;
    }
Kim Höfer's avatar
Kim Höfer committed
146
147
148
    #amount-custom:checked + label{
        line-height: 21px;
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

    #content-container {
        margin-top: 8px;
        display: grid;
        grid-template-columns: 1fr 300px;
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "form ." "form ." "form .";
        gap: 8px 8px;
        @media(max-width: 860px){
            grid-template-rows: 1fr auto;
            grid-template-areas: "form form" ". .";
        }
        @media(max-width: 740px){
            grid-template-columns: 1fr;
            grid-template-rows: 1fr auto auto;
            grid-template-areas: "form " "." ".";
        }

        .form {
            grid-area: form;
        }
    }
Davide Aprea's avatar
Davide Aprea committed
171
172
    #input-picker{
        label {
173
            min-width: 8em;
Davide Aprea's avatar
Davide Aprea committed
174
175
176
177
178
179
180
181
        }
        .show-on-input-checked {
            display: none;
        }
        input:checked  + label + .show-on-input-checked {
            display: inline-block;
        }
    }
182
}
183