12b236a64dc85bdba57530ef83047a57e5eafdca
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _navigation.scss
1 body {
2     //width: 100%;
3 }
4
5 .l-navigation {
6   max-width: 100%;
7   margin: 0 auto;
8   background-color: #083F4D;
9
10   padding: 3px 0;
11   display: flex;
12   align-items: center;
13   justify-content: space-between;
14   flex-direction: column;
15
16   @include rwd($break-menu) {
17       padding: 12px 0;
18   }
19
20   a:hover {
21       text-decoration: none;
22   }
23   
24   .l-container {
25     display: flex;
26     align-items: center;
27     justify-content: space-between;
28   }
29
30   &.is-open {
31     position: fixed;
32     top: 0; left: 0;
33     width: 100%;
34     z-index: $master-layer;
35
36     .l-navigation__logo {
37         width: unset;
38         overflow: unset;
39     }
40
41     .l-navigation__menu {
42       opacity: 1;
43       pointer-events: all;
44     }
45
46     .c-lang {
47       opacity: 1;
48       .c-lang__button {
49         pointer-events: all;
50       }
51     }
52   }
53 }
54
55 .l-navigation__logo {
56     display: flex;
57     position: relative;
58
59     img {
60         width: 153px;
61         @include rwd($break-menu) {
62             width: 230px;
63         }
64     }
65 }
66
67 .l-navigation__button {
68   appearance: none;
69   border: 0;
70   background: 0;
71   padding: 0;
72   margin: 0;
73   outline: 0;
74   position: relative;
75 }
76
77 .is-open {
78     .l-navigation__logo {
79         z-index: $master-layer + 1;
80     }
81     .l-navigation__button {
82         z-index: $master-layer + 1;
83     }
84 }
85
86
87 .l-naviagion__search {
88     width: 60%;
89     max-width: 580px;
90     margin-left: 20px;
91     margin-right: 20px;
92     
93     @include rwd($break-menu) {
94         margin-left: 60px;
95         margin-right: auto;
96     }
97
98   input {
99     font-family: $base-font;
100
101     font-size: 14px;
102     font-style: italic;
103     border: 0;
104     padding: 10px 20px;
105     border-radius: 52px;
106     width: 100%;
107     max-width: 580px;
108     outline: 0;
109
110     @include rwd($break-menu) {
111         font-size: 18px;
112     }
113   }
114 }
115
116 .l-navigation__actions {
117   display: flex;
118   align-items: center;
119   justify-content: center;
120     position: relative;
121     height: 44px;
122
123   .icon-liked {
124     color: #85C7CC;
125     font-size: 30px;
126     margin-right: 25px;
127   }
128
129   .l-navigation__user-actions {
130       display: none;
131       align-items: center;
132
133       @include rwd($break-menu) {
134           display: flex;
135           margin-left: 20px;
136       }
137       .l-navigation__login {
138           color: #74BDC2;
139           margin-right: 20px;
140           white-space: nowrap;
141
142           a {
143               color: white;
144           }
145       }
146   }
147
148     .user {
149         margin-right: 25px;
150     }
151
152 }
153
154 .l-change-pop {
155   align-items: center;
156   max-width: 1140px;
157   border-radius: 10px;
158   padding: 10px 50px;
159   width: auto;
160   
161   margin-top: 18px;
162   margin-bottom: 18px;
163   background-color: #FBC40F;
164   position: relative;
165   display: none;
166
167   margin-left: 16px;
168   margin-right: 16px;
169   flex-direction: column;
170   column-gap: 48px;
171
172   @include rwd($break-flow) {
173       flex-direction: row;
174   }
175   
176   &.show {
177     display: flex;
178   }
179
180   h3 {
181     font-style: italic;
182     font-weight: normal;
183     font-size: 32px;
184     line-height: 100%;
185     letter-spacing: -0.02em;
186     color: #333333;
187     margin: 20px 0;
188     min-width: 189px;
189   }
190
191   p {
192     font-weight: normal;
193     font-size: 15px;
194     line-height: 150%;
195     color: #333333;
196     margin: 0;
197     max-width: 590px;
198   }
199 }
200
201 .l-change-pop__close {
202   border: 0;
203   background: transparent;
204   color: #333333;
205   outline: 0;
206   position: absolute;
207   right: 26px;
208   top: 0;
209   bottom: 0;
210   margin: auto;
211   cursor: pointer;
212 }
213
214 .l-navigation__menu {
215   position: fixed;
216   top: 0; left: 0;
217   width: 100%; height: 100%;
218   background-color: #083F4D;
219   z-index: $master-layer;
220   padding-top: 50px;
221   opacity: 0;
222   pointer-events: none;
223   transition: opacity 350ms $ease-out;
224
225   @include rwd($break-menu) {
226       padding-top: 93px;
227   }
228   
229   .l-container {
230     display: flex;
231     flex-direction: column;
232   }
233
234   .l-navigation__user-bar {
235       width: 100%;
236       height: 50px;
237       border-width: 1px 0;
238       border-color: #007880;
239       border-style: solid;
240       display: flex;
241       flex-direction: row;
242       justify-content: end;
243       align-items: center;
244
245       @include rwd($break-menu) {
246           display: none;
247       }
248       
249       .l-navigation__user-actions {
250           display: flex;
251           align-items: center;
252           gap: 25px;
253           color: #85C7CC;
254           a {
255               color: white;
256               i {
257                   color: #85C7CC;
258                   font-size: 30px;
259               }
260           }
261       }
262   }
263 }
264
265
266 .l-navigation__menu__blocks {
267     position: relative;
268     display: flex;
269     width: 100%;
270     justify-content: space-between;
271     column-gap: 10%;
272     row-gap: 30px;
273     flex-wrap: wrap;
274     padding-bottom: 80px;
275
276     @include rwd($break-menu) {
277         display: block;
278         padding-bottom: 0;
279     }
280 }
281
282 .l-navigation__menu__links {
283     display: contents;
284   width: 100%;
285   justify-content: space-between;
286   column-gap: 10%;
287   row-gap: 30px;
288   flex-wrap: wrap;
289
290   @include rwd($break-menu) {
291       display: flex;
292       flex-wrap: nowrap;
293       gap: 3%;
294   }
295
296   ul {
297     margin: 0;
298     padding: 0;
299     list-style: none;
300     //max-width: 212px;
301     width: 45%;
302
303     @include rwd($break-menu) {
304       width: 100%;
305       max-width: 100%;
306       margin-bottom: 20px;
307     }
308
309     li {
310       font-weight: $regular;
311       font-size: 16px;
312       line-height: 150%;
313       padding-top: 16px;
314
315       @include rwd($break-menu) {
316           font-size: 18px;
317           line-height: 115%;
318       }
319
320       strong {
321         color: #92BD39;
322         font-weight: $semibold;
323         @include font-size(21px);
324         line-height: 140%;
325         letter-spacing: -0.01em;
326       }
327
328       a {
329         color: $color-white;
330         &:hover {
331           text-decoration: underline;
332         }
333       }
334
335       hr {
336         width: 34px;
337         height: 1px;
338         background: #007880;
339         margin-left: 0;
340         border: 0;
341       }
342     }
343   }
344 }
345
346 .l-navigation__menu__info {
347   display: flex;
348   justify-content: space-between;
349   width: 45%;
350   padding-top: 16px;
351
352   @include rwd($break-menu) {
353       width: 100%;
354       padding-top: 58px;
355       align-items: flex-end;
356   }
357
358 }
359
360 .l-navigation__menu__book {
361     display: flex;
362     flex-direction: column;
363     justify-content: space-between;
364     
365   p {
366     color: $color-white;
367     @include font-size(21px);
368     line-height: 140%;
369     strong {
370       color: #92BD39;
371       letter-spacing: -0.01em;
372       font-weight: $semibold;
373     }
374   }
375
376   .button {
377         display: inline-block;
378         font-size: 16px;
379         font-weight: 700;
380         padding: 0 20px;
381         line-height: 38px;
382         text-align: center;
383
384         /* green 700 */
385         background: #92BD39;
386         color: #083F4D;
387         border-radius: 6px;
388
389         transition: background-color 150ms;
390
391         @include rwd($break-menu) {
392             width: auto;
393             min-width: 212px;
394         }
395
396         &:hover {
397             background-color: #FBC40F;
398         }
399     }
400 }
401
402 .l-navigation__menu__book__header {
403     display: flex;
404     justify-content: space-between;
405     flex-direction: column;
406     row-gap: 18px;
407
408     @include rwd($break-menu) {
409         flex-direction: row;
410         align-items: center;
411     }
412     
413     p {
414         margin: 0;
415
416         &.korona {
417             &:before {
418                 content: url('../images/korona.svg');
419                 width: 21px;
420                 margin-right: -21px;
421                 position: relative;
422                 top: -10px;
423                 left: -3px;
424             }
425         }
426     }
427 }
428
429
430 .l-navigation__menu__book__info {
431   display: flex;
432   margin-top: 20px;
433   align-items: flex-start;
434   padding: 12px;
435   background-color: $color-white;
436   border-radius: 6px;
437   color: #808080;
438
439   flex-direction: column;
440   @include rwd($break-menu) {
441       flex-direction: row;
442   }
443
444   img {
445     margin-right: 10px;
446         width: 42px;
447         height: 60px;
448   }
449
450   h3 {
451       display: flex;
452       margin: 0;
453       font-weight: $regular;
454       @include font-size(15px);
455       line-height: 120%;
456       @include rwd($break-menu) {
457         width: 203px;
458       }
459       strong {
460           display: block;
461           font-weight: $semibold;
462           @include font-size(18px);
463           line-height: 130%;
464       }
465   }
466
467   p {
468     margin: 0;
469     width: 427px;
470     font-weight: $regular;
471     @include font-size(15px);
472     line-height: 130%;
473     color: #808080;
474   }
475 }
476
477 .l-navigation__menu__social {
478     position: absolute;
479     left: 0;
480     right: 0;
481     bottom: 0;
482
483     @include rwd($break-menu) {
484         position: static;
485     }
486     
487     
488   ul {
489       display: flex;
490       justify-content: space-between;
491     list-style: none;
492     padding: 0;
493     margin: 0;
494     li {
495       &:not(:last-child) {
496         margin-right: 36px;
497       }
498       a {
499         color: $color-white;
500         &:hover {
501           color: #92BD39;
502         }
503       }
504       .icon {
505         @include font-size(28px);
506       }
507     }
508   }
509 }