Login form.
[wolnelektury.git] / src / wolnelektury / static / 2022 / more.scss
1 body.is-open {
2     height: 100%;
3     overflow-y: hidden;
4 }
5
6 .l-change-pop {
7     margin-top: 18px;
8 }
9 .is-open .l-change-pop {
10     height: auto;
11     margin-top: 18px;
12     padding: 10px 50px;
13 }
14
15 .l-navigation__logo {
16     height: 44px;
17 }
18
19 .l-navigation__menu {
20     .scrollable {
21         height: 100%;
22         overflow-y: scroll;
23         padding-bottom: 30px;
24     }
25 }
26
27 .l-navigation__menu__book__header {
28     display: flex;
29     align-items: center;
30     justify-content: space-between;
31
32     p {
33         margin: 0;
34
35         &.korona {
36             &:before {
37                 content: url('images/korona.svg');
38                 width: 21px;
39                 margin-right: -21px;
40                 position: relative;
41                 top: -10px;
42                 left: -3px;
43             }
44         }
45     }
46 }
47 .l-navigation__menu__book {
48     .button {
49         display: inline-block;
50         font-size: 16px;
51         font-weight: 700;
52         padding: 0 20px;
53         min-width: 212px;
54         line-height: 38px;
55         text-align: center;
56
57         /* green 700 */
58         background: #92BD39;
59         color: #083F4D;
60         border-radius: 6px;
61
62         transition: background-color 150ms;
63
64         &:hover {
65             background-color: #FBC40F;
66         }
67     }
68 }
69 .l-navigation__menu__book__info {
70     img {
71         width: 42px;
72         height: 60px;
73     }
74 }
75 .l-navigation__menu__links ul li a em {
76     font-style: normal;
77     color: #FFA500;
78     font-weight: 600;
79 }
80 .l-navigation__login {
81     color: #74BDC2;
82     margin-right: 20px;
83     
84     a {
85         color: white;
86     }
87 }
88 .l-navigation__actions {
89     position: relative;
90     height: 44px;
91
92     .user {
93         margin-right: 25px;
94     }
95 }
96
97
98 .l-books {
99     margin-right: -17px;
100 }
101 .l-books__grid {
102     margin-right: -17px;
103 }
104
105 .l-books__item {
106     width: 212px;
107
108     margin-right: 17px !important; // reverse the 5n+5 rule.
109
110     transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
111 }
112
113
114 .by-popularity {
115     .l-books__item {
116         order: attr(data-pop);
117     }
118 }
119
120
121
122 .toggle-input {
123     left: calc(50% - 77px/2);
124     opacity: 0;
125     position: absolute;
126     //top: 0;
127     height: 26px;
128     width: 77px;
129     z-index: 2;
130
131     &:checked {
132         z-index: 0;
133     }
134 }
135
136 .l-checkout__box {
137     position: relative;
138 }
139
140 .l-checkout__payments {
141     display: none;
142 }
143 .toggle-input{
144     &#switch-once:checked {
145         ~.l-switch__wrapper {
146             label {
147                 &:nth-of-type(1) { color: #003C3C; }
148                 &:nth-of-type(2) { color: #74BDC2; }
149             }
150             .toggle {
151                 left: 5px;
152             }
153         }
154         ~.payments-once {
155             display: flex;
156         }
157     }
158     &#switch-monthly:checked {
159         ~.l-switch__wrapper {
160             label {
161                 &:nth-of-type(1) { color: #74BDC2; }
162                 &:nth-of-type(2) { color: #003C3C; }
163             }
164             .toggle {
165                 left: 39px;
166             }
167         }
168         ~.payments-recurring {
169             display: flex;
170         }
171     }
172 }
173
174 .l-checkout__footer__content__item > div ul {
175   font-weight: normal;
176   font-size: 15px;
177   line-height: 150%;
178   color: #808080;
179 }
180
181
182 .l-checkout__form__row {
183     .iframe {
184         margin-bottom: 16px;
185     }
186 }
187
188
189
190 .l-books__item__content {
191     width: 100%;
192    
193     .fragment-text {
194         max-width: 390px;
195         margin-top: 20px;
196         font-weight: 400;
197         font-size: 18px;
198         font-size: 1.125rem;
199         line-height: 150%;
200         color: #474747;
201         
202         h1, h2, h3, h4 {
203             font-size: 1em;
204         }
205     }
206 }
207
208
209
210 #user-menu {
211     //display: none;
212
213     position:absolute;
214     top: 60px;
215     z-index: 1;
216
217     position: absolute;
218     width: 186px;
219     top: 48px;
220     right: 45px;
221
222     /* yellow 900 */
223     background: #F7BA00;
224     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
225     border-radius: 10px;
226     overflow: hidden;
227
228     opacity:0;
229     pointer-events: none;
230     transition: 200ms opacity;
231     
232     &.is-open {
233         //display: block;
234         pointer-events: all;
235         opacity: 100%;
236     }
237
238     ul {
239         margin: 0;
240         padding: 0;
241         list-style: none;
242
243         li {
244             a {
245                 color: #474747;
246                 display: block;
247                 line-height: 27px;
248                 padding: 8px 21px;
249                 &:hover {
250                     color: #474747;
251                     background: #EDAA00;
252                 }
253
254                 strong {
255                     font-weight: 600;
256                 }
257             }
258         }
259     }
260 }
261
262
263 form {
264     .required {
265         label:before {
266             content: "* ";
267             color: #FF4C54;
268         }
269     }
270     .helptext {
271         color: #808080;
272         font-size: 15px;
273         line-height: 150%;
274         margin-bottom: 30px;
275     }
276
277 }
278
279 .socialaccount_providers {
280     list-style: none;
281     padding: 0;
282
283     li {
284         display: inline-block;
285         margin-right: 10px;
286     }
287 }
288