ce0e495dc0017f882bb1e38e5a3248525e047b4f
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _navigation.scss
1 .l-navigation {
2   max-width: 100%;
3   margin: 0 auto;
4   background-color: #083F4D;
5   padding: 12px 0;
6   display: flex;
7   align-items: center;
8   justify-content: space-between;
9   flex-direction: column;
10
11   .l-container {
12     display: flex;
13     align-items: center;
14     justify-content: space-between;
15   }
16 }
17
18 .l-navigation__button {
19   appearance: none;
20   border: 0;
21   background: 0;
22   padding: 0;
23   margin: 0;
24   outline: 0;
25 }
26
27 .l-naviagion__search {
28   width: 60%;
29   max-width: 580px;
30   margin-left: 60px;
31   margin-right: auto;
32
33   input {
34     font-family: $base-font;
35     font-size: 18px;
36     font-style: italic;
37     border: 0;
38     padding: 10px;
39     border-radius: 52px;
40     width: 100%;
41     max-width: 580px;
42     outline: 0;
43   }
44 }
45
46 .l-navigation__actions {
47   display: flex;
48   align-items: center;
49   justify-content: center;
50
51   .icon-liked {
52     color: #85C7CC;
53     font-size: 30px;
54     margin-right: 25px;
55   }
56 }
57
58 .l-change-pop {
59   align-items: center;
60   max-width: 1140px;
61   border-radius: 10px;
62   padding: 10px 50px;
63   width: 100%;
64   margin-bottom: 10px;
65   background-color: #FBC40F;
66   position: relative;
67   display: none;
68
69   &.show {
70     display: flex;
71   }
72
73   h3 {
74     font-style: italic;
75     font-weight: normal;
76     font-size: 32px;
77     line-height: 100%;
78     letter-spacing: -0.02em;
79     color: #333333;
80     margin: 0;
81     min-width: 189px;
82     margin-right: 48px;
83   }
84
85   p {
86     font-weight: normal;
87     font-size: 15px;
88     line-height: 150%;
89     color: #333333;
90     margin: 0;
91     max-width: 590px;
92   }
93 }
94
95 .l-change-pop__close {
96   border: 0;
97   background: transparent;
98   color: #333333;
99   outline: 0;
100   position: absolute;
101   right: 26px;
102   top: 0;
103   bottom: 0;
104   margin: auto;
105   cursor: pointer;
106 }