fix findable
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _books.scss
1 .l-books__wrapper {
2   margin-top: 27px;
3   width: 100%;
4   background-color: #F2F2F2;
5   padding-top: 38px;
6   position: relative;
7   padding-bottom: 80px;
8
9   h2 {
10     font-weight: 600;
11     font-size: 31px;
12     line-height: 140%;
13     letter-spacing: -0.01em;
14     color: #474747;
15     margin-top: 0;
16   }
17 }
18
19 .l-books {
20   display: flex;
21   flex-wrap: wrap;
22   margin-top: 36px;
23 }
24
25 .l-books__item {
26   background: #FFFFFF;
27   border-radius: 9px;
28   padding: 21px;
29   box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
30   transition: all $ease-dynamic 350ms;
31   outline: 0;
32   margin: 5px;
33
34   &.l-books__item--placeholder {
35     opacity: 0;
36     visibility: hidden;
37   }
38
39   & * {
40     outline: 0;
41   }
42
43   &:hover {
44     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
45   }
46
47   &.l-books__item--link {
48     width: 212px;
49     height: 350px;
50
51     background-color: #007880;
52
53     font-weight: 600;
54     font-size: 21.5px;
55     line-height: 140%;
56     letter-spacing: -0.01em;
57     color: #FFFFFF;
58
59     display: flex;
60     flex-direction: column;
61     justify-content: space-between;
62
63     .icon-link {
64       margin-left: auto;
65       margin-right: 0;
66       &:hover {
67         text-decoration: none;
68       }
69     }
70
71     a {
72       &:hover {
73         color: white;
74       }
75     }
76   }
77
78   a {
79       color: currentColor;
80     &:hover {
81         text-decoration: underline;
82         color: $color-primary;
83     }
84   }
85
86   h2 {
87     font-weight: normal;
88     font-size: 18px;
89     line-height: 150%;
90     color: #474747;
91     margin: 0;
92   }
93   h3 {
94     font-weight: normal;
95     font-size: 15px;
96     line-height: 160%;
97     color: #808080;
98     margin: 0;
99   }
100   .other-info {
101       display: none;
102   }
103 }
104
105 .l-books__item__img {
106   font-size: 0;
107   margin: 0 0 11px;
108
109   img {
110       width: 100%;
111   }
112 }
113
114 .l-books__item__actions {
115   display: flex;
116   align-content: center;
117   justify-content: flex-start;
118   margin-bottom: 5px;
119
120   .icon {
121     color: #083F4D;
122     margin-right: 10px;
123     @include font-size(16px);
124
125     &.icon-like,
126     &.icon-liked {
127       color: #FF4C54;
128       @include font-size(19px);
129       margin-right: 0;
130       margin-left: auto;
131     }
132
133     &:hover {
134       text-decoration: none;
135     }
136   }
137 }
138
139 .l-books__header {
140   width: 100%;
141   display: flex;
142   margin-top: 34px;
143   align-items: center;
144   justify-content: space-between;
145 }
146
147 .l-books__input {
148   position: relative;
149   display: flex;
150   align-content: center;
151   width: 560px;
152
153   .icon {
154     @include font-size(22px);
155     color: #083F4D;
156     position: absolute;
157     margin: auto;
158     top: 0;
159     bottom: 0;
160     left: 19px;
161     display: flex;
162     align-items: center;
163     justify-content: center;
164     pointer-events: none;
165   }
166
167   input {
168     font-family: $base-font;
169     font-size: 18px;
170     font-style: italic;
171     padding: 10px 20px 10px 50px;
172     border-radius: 52px;
173     border: 1px solid #D9D9D9;
174     width: 100%;
175     max-width: 580px;
176     outline: 0;
177     transition: border $ease-out 350ms;
178
179     &:focus {
180       border-color: #007880;
181     }
182   }
183 }
184
185 .l-books__sorting {
186   display: flex;
187   align-content: center;
188
189   span {
190     font-weight: $bold;
191     @include font-size(18px);
192     line-height: 150%;
193     color: #083F4D;
194   }
195
196   div {
197     display: flex;
198     align-content: center;
199
200     button {
201       border: 0;
202       padding: 0;
203       margin: 0 0 0 30px;
204       background-color: transparent;
205       outline: 0;
206       font-weight: $regular;
207       @include font-size(18px);
208       line-height: 150%;
209       color: #808080;
210       cursor: pointer;
211
212       &.is-active {
213         color: #083F4D;
214         font-weight: $semibold;
215       }
216     }
217   }
218 }
219
220 .l-books__grid {
221   display: flex;
222   flex-wrap: wrap;
223   margin-top: 34px;
224
225   .l-books__item {
226     border: 1px solid #D9D9D9;
227     margin-bottom: 17px;
228
229     &:nth-child(5n + 5) {
230       margin-right: 0;
231     }
232   }
233 }
234
235 .l-books__col {
236   display: flex;
237   flex-direction: column;
238   margin-top: 34px;
239
240   .l-books__item {
241     width: 705px;
242     border: 1px solid #D9D9D9;
243     margin-bottom: 17px;
244     display: flex;
245
246     .l-books__item__img {
247       margin-bottom: 0;
248     }
249   }
250 }
251
252 .l-books__item__content {
253   padding-left: 40px;
254   position: relative;
255
256   .l-books__item__actions {
257     position: absolute;
258     right: 0;
259   }
260
261   h2 {
262     font-weight: $semibold;
263     @include font-size(21px);
264     line-height: 140%;
265     letter-spacing: -0.01em;
266   }
267
268   p {
269     max-width: 390px;
270     margin-top: 20px;
271     font-weight: $regular;
272     @include font-size(18px);
273     line-height: 150%;
274     color: #474747;
275   }
276
277   & > a {
278     display: block;
279     margin-top: 20px;
280     font-weight: $regular;
281     @include font-size(18px);
282     line-height: 150%;
283     color: #007880;
284   }
285 }