fix
[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     align-items: center;
234 }
235
236
237
238 .funding-promo-bar {
239     margin: 18px auto;
240
241     .l-checkout__support {
242         margin: 0;
243         a {
244             display: flex;
245             align-items: start;
246
247             .buttonlike {
248                 margin-right: 10px;
249                 background: #FFA500;
250                 //color: #083F4D;
251                 color: black;
252                 border-radius: 5px;
253                 font-size: 1.125rem;
254                 line-height: 50px;
255                 letter-spacing: -0.01em;
256                 padding: 0 20px;
257                 font-weight: 600;
258                 transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
259                 &:hover {
260                     background: #92BD39;
261                 }
262             }
263             .funding-bar-container {
264                 flex-grow: 1;
265             }
266         }
267     }
268 }
269
270 .l-checkout__support__bar {
271     overflow: hidden;
272 }
273
274 .poll-bar {
275     height: 10px;
276     width: 100%;
277     display: block;
278     border-radius: 5px;
279     position: relative;
280     overflow: hidden;
281
282     .poll-bar-inner {
283       height: 100%;
284       position: absolute;
285       border-radius: 5px;
286       background-color: #006066;
287       top: 0; left: 0;
288     }
289 }