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