e14adbfac38b10d93690f9d34578048eb899e76e
[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   gap: 16px;
143   flex-direction: column;
144   margin-top: 34px;
145   align-items: center;
146   justify-content: space-between;
147   align-items: stretch;
148
149   @include rwd($break-flow) {
150       flex-direction: row;
151   }
152 }
153
154 .l-books__input {
155   position: relative;
156   display: flex;
157   align-content: center;
158   @include rwd($break-flow) {
159       width: 560px;
160   }
161
162   .icon {
163     @include font-size(22px);
164     color: #083F4D;
165     position: absolute;
166     margin: auto;
167     top: 0;
168     bottom: 0;
169     left: 19px;
170     display: flex;
171     align-items: center;
172     justify-content: center;
173     pointer-events: none;
174   }
175
176   input {
177     font-family: $base-font;
178     font-size: 18px;
179     font-style: italic;
180     padding: 10px 20px 10px 50px;
181     border-radius: 52px;
182     border: 1px solid #D9D9D9;
183     width: 100%;
184     outline: 0;
185     transition: border $ease-out 350ms;
186
187     @input rwd($break-flow) {
188         max-width: 580px;
189     }
190     
191     &:focus {
192       border-color: #007880;
193     }
194   }
195 }
196
197 .l-books__sorting {
198   display: flex;
199   align-content: center;
200   align-items: center;
201   justify-content: center;
202
203   span {
204     font-weight: $bold;
205     @include font-size(18px);
206     line-height: 150%;
207     color: #083F4D;
208   }
209
210   div {
211     display: flex;
212     align-content: center;
213     flex-direction: column;
214
215     @include rwd($break-flow) {
216         flex-direction: row;
217     }
218
219     select {
220         margin-left: 30px;
221         @include rwd($break-flow) {
222             display: none;
223         }
224     }
225     
226     button {
227       display: none;
228       border: 0;
229       padding: 0;
230       margin: 0 0 0 30px;
231       background-color: transparent;
232       outline: 0;
233       font-weight: $regular;
234       @include font-size(18px);
235       line-height: 150%;
236       color: #808080;
237       cursor: pointer;
238
239       @include rwd($break-flow) {
240           display: block;
241       }
242       
243       &.is-active {
244         color: #083F4D;
245         font-weight: $semibold;
246       }
247     }
248   }
249 }
250
251 .l-books__grid {
252   display: flex;
253   flex-wrap: wrap;
254   margin-top: 34px;
255
256   .l-books__item {
257     border: 1px solid #D9D9D9;
258     margin-bottom: 17px;
259
260     &:nth-child(5n + 5) {
261       margin-right: 0;
262     }
263   }
264 }
265
266 .l-books__col {
267   display: flex;
268   flex-direction: column;
269   margin-top: 34px;
270
271   .l-books__item {
272       width: calc(100% - 10px);
273     border: 1px solid #D9D9D9;
274     margin-bottom: 17px;
275     display: flex;
276     position: relative;
277     @include rwd($break-flow) {
278         width: 705px;
279     }
280
281     .l-books__item__img {
282         margin-bottom: 0;
283     }
284
285     .l-books__item__actions {
286         margin-top: 16px;
287         @include rwd($break-flow) {
288             position: absolute;
289             top: 21px;
290             left: auto;
291             right: 11px;
292         }
293     }
294   }
295 }
296
297 .l-books__item__content {
298     padding-left: 16px;
299     @include rwd($break-flow) {
300         padding-left: 40px;
301     }
302
303   h2 {
304     font-weight: $semibold;
305     @include font-size(21px);
306     line-height: 140%;
307     letter-spacing: -0.01em;
308   }
309
310   p {
311     max-width: 390px;
312     margin-top: 20px;
313     font-weight: $regular;
314     @include font-size(18px);
315     line-height: 150%;
316     color: #474747;
317   }
318
319   & > a {
320     display: block;
321     margin-top: 20px;
322     font-weight: $regular;
323     @include font-size(18px);
324     line-height: 150%;
325     color: #007880;
326   }
327 }
328
329
330 .l-art__preview {
331     width: 100%;
332 }