e2ff386188c9bf60ed9f3414a11b07bc654289e3
[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-change-pop__close {
219   border: 0;
220   background: transparent;
221   color: #333333;
222   outline: 0;
223   position: absolute;
224   right: 26px;
225   top: 0;
226   bottom: 0;
227   margin: auto;
228   cursor: pointer;
229 }
230
231 .l-navigation__menu {
232   position: fixed;
233   top: 0; left: 0;
234   width: 100%; height: 100%;
235   background-color: #083F4D;
236   z-index: $master-layer;
237   padding-top: 50px;
238   opacity: 0;
239   pointer-events: none;
240   transition: opacity 350ms $ease-out;
241
242   @include rwd($break-menu) {
243       padding-top: 93px;
244   }
245   
246   .l-container {
247     display: flex;
248     flex-direction: column;
249   }
250
251   .l-navigation__user-bar {
252       width: 100%;
253       height: 50px;
254       border-width: 1px 0;
255       border-color: #007880;
256       border-style: solid;
257       display: flex;
258       flex-direction: row;
259       justify-content: end;
260       align-items: center;
261
262       @include rwd($break-menu) {
263           display: none;
264       }
265       
266       .l-navigation__user-actions {
267           display: flex;
268           align-items: center;
269           gap: 25px;
270           color: #85C7CC;
271           a {
272               color: white;
273               i {
274                   color: #85C7CC;
275                   font-size: 30px;
276               }
277           }
278       }
279   }
280 }
281
282
283 .l-navigation__menu__blocks {
284     position: relative;
285     display: flex;
286     width: 100%;
287     justify-content: space-between;
288     column-gap: 10%;
289     row-gap: 30px;
290     flex-wrap: wrap;
291     padding-bottom: 80px;
292
293     @include rwd($break-menu) {
294         display: block;
295         padding-bottom: 0;
296     }
297 }
298
299 .l-navigation__menu__links {
300     display: contents;
301   width: 100%;
302   justify-content: space-between;
303   column-gap: 10%;
304   row-gap: 30px;
305   flex-wrap: wrap;
306
307   @include rwd($break-menu) {
308       display: flex;
309       flex-wrap: nowrap;
310       gap: 3%;
311   }
312
313   ul {
314     margin: 0;
315     padding: 0;
316     list-style: none;
317     //max-width: 212px;
318     width: 45%;
319
320     @include rwd($break-menu) {
321       width: 100%;
322       max-width: 100%;
323       margin-bottom: 20px;
324     }
325
326     li {
327       font-weight: $regular;
328       font-size: 16px;
329       line-height: 150%;
330       padding-top: 16px;
331
332       @include rwd($break-menu) {
333           font-size: 18px;
334           line-height: 115%;
335       }
336
337       strong {
338         color: #92BD39;
339         font-weight: $semibold;
340         @include font-size(21px);
341         line-height: 140%;
342         letter-spacing: -0.01em;
343       }
344
345       a {
346         color: $color-white;
347         &:hover {
348           text-decoration: underline;
349         }
350       }
351
352       hr {
353         width: 34px;
354         height: 1px;
355         background: #007880;
356         margin-left: 0;
357         border: 0;
358       }
359     }
360   }
361 }
362
363 .l-navigation__menu__info {
364   display: flex;
365   justify-content: space-between;
366   width: 45%;
367   padding-top: 16px;
368
369   @include rwd($break-menu) {
370       width: 100%;
371       padding-top: 58px;
372       align-items: flex-end;
373   }
374
375 }
376
377 .l-navigation__menu__book {
378     display: flex;
379     flex-direction: column;
380     justify-content: space-between;
381     
382   p {
383     color: $color-white;
384     @include font-size(21px);
385     line-height: 140%;
386     strong {
387       color: #92BD39;
388       letter-spacing: -0.01em;
389       font-weight: $semibold;
390     }
391   }
392
393   .button {
394         display: inline-block;
395         font-size: 16px;
396         font-weight: 700;
397         padding: 0 20px;
398         line-height: 38px;
399         text-align: center;
400
401         /* green 700 */
402         background: #92BD39;
403         color: #083F4D;
404         border-radius: 6px;
405
406         transition: background-color 150ms;
407
408         @include rwd($break-menu) {
409             width: auto;
410             min-width: 212px;
411         }
412
413         &:hover {
414             background-color: #FBC40F;
415         }
416     }
417 }
418
419 .l-navigation__menu__book__header {
420     display: flex;
421     justify-content: space-between;
422     flex-direction: column;
423     row-gap: 18px;
424
425     @include rwd($break-menu) {
426         flex-direction: row;
427         align-items: center;
428     }
429     
430     p {
431         margin: 0;
432
433         &.korona {
434             &:before {
435                 content: url('../images/korona.svg');
436                 width: 21px;
437                 margin-right: -21px;
438                 position: relative;
439                 top: -10px;
440                 left: -3px;
441             }
442         }
443     }
444 }
445
446
447 .l-navigation__menu__book__info {
448   display: flex;
449   margin-top: 20px;
450   align-items: flex-start;
451   padding: 12px;
452   background-color: $color-white;
453   border-radius: 6px;
454   color: #808080;
455
456   flex-direction: column;
457   @include rwd($break-menu) {
458       flex-direction: row;
459   }
460
461   img {
462     margin-right: 10px;
463         width: 42px;
464         height: 60px;
465   }
466
467   h3 {
468       display: flex;
469       margin: 0;
470       font-weight: $regular;
471       @include font-size(15px);
472       line-height: 120%;
473       @include rwd($break-menu) {
474         width: 203px;
475       }
476       strong {
477           display: block;
478           font-weight: $semibold;
479           @include font-size(18px);
480           line-height: 130%;
481       }
482   }
483
484   p {
485     margin: 0;
486     width: 427px;
487     font-weight: $regular;
488     @include font-size(15px);
489     line-height: 130%;
490     color: #808080;
491   }
492 }
493
494 .l-navigation__menu__social {
495     position: absolute;
496     left: 0;
497     right: 0;
498     bottom: 0;
499
500     @include rwd($break-menu) {
501         position: static;
502     }
503     
504     
505   ul {
506       display: flex;
507       justify-content: space-between;
508     list-style: none;
509     padding: 0;
510     margin: 0;
511     li {
512       &:not(:last-child) {
513         margin-right: 36px;
514       }
515       a {
516         color: $color-white;
517         &:hover {
518           color: #92BD39;
519         }
520       }
521       .icon {
522         @include font-size(28px);
523       }
524     }
525   }
526 }