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