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