b59e48fd51f4691ec6110d0450d17e2fdb3664aa
[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: calc(100% - 10px);
242     border: 1px solid #D9D9D9;
243     margin-bottom: 17px;
244     display: flex;
245     position: relative;
246     @include rwd($break-flow) {
247         width: 705px;
248     }
249
250     .l-books__item__img {
251         margin-bottom: 0;
252     }
253
254     .l-books__item__actions {
255         margin-top: 16px;
256         @include rwd($break-flow) {
257             position: absolute;
258             top: 21px;
259             left: auto;
260             right: 11px;
261         }
262     }
263   }
264 }
265
266 .l-books__item__content {
267     padding-left: 16px;
268     @include rwd($break-flow) {
269         padding-left: 40px;
270     }
271
272   h2 {
273     font-weight: $semibold;
274     @include font-size(21px);
275     line-height: 140%;
276     letter-spacing: -0.01em;
277   }
278
279   p {
280     max-width: 390px;
281     margin-top: 20px;
282     font-weight: $regular;
283     @include font-size(18px);
284     line-height: 150%;
285     color: #474747;
286   }
287
288   & > a {
289     display: block;
290     margin-top: 20px;
291     font-weight: $regular;
292     @include font-size(18px);
293     line-height: 150%;
294     color: #007880;
295   }
296 }