6aa6caa3e5049d11e7d5f24d6ff667550202f7f1
[wolnelektury.git] / src / wolnelektury / static / 2022 / more.scss
1 @import "styles/utils/mixins";
2
3 body.is-open {
4     height: 100%;
5     overflow-y: hidden;
6 }
7
8 .l-navigation__menu {
9     .scrollable {
10         height: 100%;
11         overflow-y: scroll;
12         padding-bottom: 30px;
13     }
14 }
15
16 .l-navigation__menu__links ul li a em {
17     font-style: normal;
18     color: #FFA500;
19     font-weight: 600;
20 }
21
22 .l-collections .l-books {
23     width: 100%;
24 }
25 .l-books, .l-books__grid {
26     @include rwd($break-wide) {
27         //justify-content: space-between;
28         gap: 20px;
29         .l-books__item {
30             margin: 0;
31         }
32     }
33 }
34
35 .slick-track {
36     margin: 0;
37
38     .l-books__item {
39         @include rwd($break-wide) {
40
41             width: 214.4px;
42             margin-left: 17px;
43             margin-right: 0;
44             &:first-of-type {
45                 margin-left: 0px;
46             }
47         }
48     }
49 }
50
51
52
53 .l-books__item {
54     //transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
55
56     width: 100%;
57     padding: 5.28vw;
58
59     @include rwd($B2) {
60         width: calc(50vw - 32px/2 - 10px);
61         padding: 3.8vw;
62     }
63     @include rwd($B3) {
64         width: calc(33.33vw - 32px/3 - 10px);
65         padding: 2.73vw;
66     }
67     @include rwd($B4) {
68         width: calc(25vw - 32px/4 - 10px);
69         padding: 2.1vw;
70     }
71
72     @include rwd($B5) {
73         width: calc(20vw - 32px/5 - 10px);
74         padding: 1.63vw;
75     }
76
77     @include rwd($break-wide) {
78         width: 212px;
79         padding: 21px;
80     }
81 }
82
83
84
85
86
87 .by-popularity {
88     .l-books__item {
89         order: attr(data-pop);
90     }
91 }
92
93
94
95 .toggle-input {
96     left: calc(50% - 77px/2);
97     opacity: 0;
98     position: absolute;
99     //top: 0;
100     height: 26px;
101     width: 77px;
102     z-index: 2;
103
104     &:checked {
105         z-index: 0;
106     }
107 }
108
109 .l-checkout__box {
110     position: relative;
111 }
112
113
114 .l-checkout__footer__content__item > div ul {
115   font-weight: normal;
116   font-size: 15px;
117   line-height: 150%;
118   color: #808080;
119 }
120
121
122 .l-checkout__form__row {
123     .iframe {
124         margin-bottom: 16px;
125     }
126 }
127
128
129
130 .l-books__item__content {
131     width: 100%;
132    
133     .fragment-text {
134         max-width: 390px;
135         margin-top: 20px;
136         font-weight: 400;
137         font-size: 18px;
138         font-size: 1.125rem;
139         line-height: 150%;
140         color: #474747;
141         
142         h1, h2, h3, h4 {
143             font-size: 1em;
144         }
145     }
146 }
147
148
149
150 #user-menu {
151     //display: none;
152
153     position:absolute;
154     top: 60px;
155     z-index: 1;
156
157     position: absolute;
158     width: 186px;
159     top: 48px;
160     right: 45px;
161
162     /* yellow 900 */
163     background: #F7BA00;
164     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
165     border-radius: 10px;
166     overflow: hidden;
167
168     opacity:0;
169     pointer-events: none;
170     transition: 200ms opacity;
171     
172     &.is-open {
173         //display: block;
174         pointer-events: all;
175         opacity: 100%;
176     }
177
178     ul {
179         margin: 0;
180         padding: 0;
181         list-style: none;
182
183         li {
184             a {
185                 color: #474747;
186                 display: block;
187                 line-height: 27px;
188                 padding: 8px 21px;
189                 &:hover {
190                     color: #474747;
191                     background: #EDAA00;
192                 }
193
194                 strong {
195                     font-weight: 600;
196                 }
197             }
198         }
199     }
200 }
201
202
203 form {
204     label.required:before {
205         content: "* ";
206         color: #FF4C54;
207     }
208     .helptext {
209         color: #808080;
210         font-size: 15px;
211         line-height: 150%;
212         margin-bottom: 30px;
213     }
214
215 }
216
217 .socialaccount_providers {
218     list-style: none;
219     padding: 0;
220
221     li {
222         display: inline-block;
223         margin-right: 10px;
224     }
225 }
226
227
228
229
230
231 .experiment {
232     display: flex;
233     margin: 1em 16px;
234     font-size: 1.5em;
235     align-items: center;
236     flex-direction: column;
237     margin-top: 2em;
238     @include rwd($break-flow) {
239         flex-direction: row;
240         align-items: flex-end;
241     }
242
243     > span, > div {
244        text-align: center;
245        @include rwd($break-flow) {
246            width: 50%;
247        }
248     }        
249 }
250
251
252 .legend {
253     margin: 1em 16px;
254     font-size: .7em;
255     color: #777;
256     text-align:right;
257     font-style:italic;
258 }
259
260
261 .funding-promo-bar {
262     margin: 18px auto;
263
264     .l-checkout__support {
265         margin: 0;
266         a {
267             display: flex;
268             align-items: start;
269
270             .buttonlike {
271                 margin-right: 10px;
272                 background: #FFA500;
273                 //color: #083F4D;
274                 color: black;
275                 border-radius: 5px;
276                 font-size: 1.125rem;
277                 line-height: 50px;
278                 letter-spacing: -0.01em;
279                 padding: 0 20px;
280                 font-weight: 600;
281                 transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
282                 &:hover {
283                     background: #92BD39;
284                 }
285             }
286             .funding-bar-container {
287                 flex-grow: 1;
288             }
289         }
290     }
291 }
292
293 .l-checkout__support__bar {
294     overflow: hidden;
295 }
296
297 .poll-bar {
298     height: 10px;
299     width: 100%;
300     display: block;
301     border-radius: 5px;
302     position: relative;
303     overflow: hidden;
304
305     .poll-bar-inner {
306       height: 100%;
307       position: absolute;
308       border-radius: 5px;
309       background-color: #006066;
310       top: 0; left: 0;
311     }
312 }