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