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