ad63bfca895d826d53c7b6d25542a1dffd2ab278
[wolnelektury.git] / src / club / static / club / club.scss
1 .plan-select {
2     margin-bottom: 15px;
3 }
4
5 .methods {
6     color: #888;
7     line-height: 30px;
8 }
9 .methods .method {
10     border: 1px solid #888;
11     border-radius: 5px;
12     display: inline-block;
13     padding: 0 5px;
14 }
15
16 .methods img {
17     height: 30px;
18     margin-right: 5px;
19     vertical-align: middle;
20 }
21
22 .payment-method.disabled {
23     opacity: .5;
24     filter: grayscale(100%);
25 }
26
27 .button {
28     box-sizing: border-box;
29     display: inline-block;
30     text-align: center;
31 }
32 .kwota, .inna .button, .plan-toggle, .inna input {
33     border: 1px solid black;
34     border-radius: 8px;
35     background: none;
36     cursor: pointer;
37     padding: 0;
38     margin-right: 3%;
39     margin-bottom: 10px;
40     line-height: 3em;
41     font-size: 20px;
42 }
43 .plan-toggle {
44     width: 46.5%;
45 }
46 .kwota {
47     width: 30%;
48 }
49 .kwota:after {
50     content: " zł";
51 }
52 .kwota.yearly {
53     background: orange;
54     
55 }
56 .inna .button {
57     width: 63%;
58 }
59 .inna input {
60     width: 60%;
61     padding-left: 1.5%;
62     padding-right: 1.5%;
63     height: 3em !important;
64     text-align: center;
65 }
66 .chunk-alt {
67     position: relative;
68     overflow: hidden;
69 }
70 .chunk-alt .chunk {
71     top: 0;
72 }
73
74 .kwota.active, .plan-toggle.active {
75     background: #9ACD32;
76 }
77 .inna input {display: none;}
78 .inna.active input {display: inline;}
79 .inna.active .button {display: none;}
80
81 .ambassador {
82     padding: 2em;
83     margin-bottom: 1em;
84     border: 1px solid #ddd;
85     position: relative;
86     min-height: 100px;
87 }
88 .ambassador.with-photo {
89     padding-right: 145px;
90 }
91 .ambassador img {
92     border-radius: 100%;
93     height: 100px;
94     width: 100px;
95     position: absolute;
96     top: 35px;
97     right: 30px;
98 }
99 .ambassador div {
100     text-align: right;
101     line-height: 1.5em;
102 }
103
104 .club-form-info {
105     line-height: 1.5em;
106 }
107
108 @media screen and (max-width: 1023px) {
109     .club-form-info {
110         margin-top: 2em;
111     }
112 }
113
114
115 @media screen and (min-width: 1024px) {
116     .club-form-info {
117         border-left: 1px solid #ddd;
118         padding-left: 2em;
119         margin-left: 2em;
120     }
121     .twocol {
122         display: flex;
123     }
124     .twocol > form, .twocol > div {
125         flex: 1;
126     }
127 }
128
129
130 .methods {
131     .button {
132         border: 1px solid black;
133         border-radius: 10px;
134         padding: 10px;
135         margin-right: 3%;
136         cursor: pointer;
137
138         &.active {
139             background: #9ACD3240;
140         }
141     }
142 }
143
144
145 label.required {
146     &::before {
147         content: " * ";
148         color: red;
149     }
150 }
151
152
153
154 .helptext {
155     position: relative;
156
157     .short {
158         height: 1.5em;
159         overflow: hidden;
160         position: relative;
161         
162         &:after {
163             content:' ';
164             position:absolute;
165             bottom:0;
166             width:25%;
167             height:20px;
168             background-color:transparent;
169             overflow: hidden;
170             /* assume ltr */
171             right:0;
172             background-image:-webkit-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
173             background-image:-moz-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
174             background-image:-o-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
175             background-image:linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%)
176         }
177     }
178
179     .morelink {
180         position: absolute;
181         top: 0;
182         right: 0;
183         &:after {
184             content: " ↓";
185         }
186     }
187 }
188
189
190 #payment-form {
191     textarea {
192         box-sizing: border-box;
193         padding: 8px;
194         width: 400px;
195         height: 4em;
196     }
197     input[type="text"], input[type="email"] {
198         box-sizing: border-box;
199         width: 400px;
200         padding: 8px;
201         &#id_postal_code {
202             width: 100px;
203         }
204         &#id_postal_town {
205             width: 300px;
206         }
207     }
208     select {
209         box-sizing: border-box;
210         width: 400px;
211         padding: 8px;
212     }
213 }