4b3d7d50e477f0ae52d06b7d1278510e67b116f9
[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 }
87 .ambassador.with-photo {
88     padding-right: 145px;
89 }
90 .ambassador img {
91     border-radius: 100%;
92     height: 100px;
93     width: 100px;
94     position: absolute;
95     top: 35px;
96     right: 30px;
97 }
98 .ambassador div {
99     text-align: right;
100     line-height: 1.5em;
101 }
102
103 .club-form-info {
104     line-height: 1.5em;
105 }
106
107 @media screen and (max-width: 1023px) {
108     .club-form-info {
109         margin-top: 2em;
110     }
111 }
112
113
114 @media screen and (min-width: 1024px) {
115     .club-form-info {
116         border-left: 1px solid #ddd;
117         padding-left: 2em;
118         margin-left: 2em;
119     }
120     .twocol {
121         display: flex;
122     }
123     .twocol > form, .twocol > div {
124         flex: 1;
125     }
126 }