6b533e2c30448a3d002c646dce07f0fcba5d85a6
[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
137         &.active {
138             background: #9ACD3240;
139         }
140     }
141 }