Working menu.
[wolnelektury.git] / src / wolnelektury / static / 2022 / more.scss
1 body.is-open {
2     height: 100%;
3     overflow-y: hidden;
4 }
5
6 .l-change-pop {
7     margin-top: 18px;
8 }
9 .is-open .l-change-pop {
10     height: auto;
11     margin-top: 18px;
12     padding: 10px 50px;
13 }
14
15 .l-navigation {
16     //opacity: .5;
17 }
18
19 .l-navigation__logo {
20     height: 44px;
21 }
22
23 .l-navigation__menu {
24     overflow-y: scroll;
25 }
26 .l-navigation__menu__book__info {
27     img {
28         width: 42px;
29         height: 60px;
30     }
31 }
32 .l-navigation__login {
33     color: #74BDC2;
34     margin-right: 20px;
35     
36     a {
37         color: white;
38     }
39 }
40 .l-navigation__actions {
41     position: relative;
42     height: 44px;
43
44     .user {
45         margin-right: 25px;
46     }
47 }
48
49
50 .l-books {
51     margin-right: -17px;
52 }
53 .l-books__grid {
54     margin-right: -17px;
55 }
56
57 .l-books__item {
58     width: 212px;
59
60     margin-right: 17px !important; // reverse the 5n+5 rule.
61
62     transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
63 }
64
65
66 .by-popularity {
67     .l-books__item {
68         order: attr(data-pop);
69     }
70 }
71
72
73
74 .toggle-input {
75     left: calc(50% - 77px/2);
76     opacity: 0;
77     position: absolute;
78     //top: 0;
79     height: 26px;
80     width: 77px;
81     z-index: 2;
82
83     &:checked {
84         z-index: 0;
85     }
86 }
87
88
89 .l-checkout__payments {
90     display: none;
91 }
92 .toggle-input{
93     &#switch-once:checked {
94         ~.l-switch__wrapper {
95             label {
96                 &:nth-of-type(1) { color: #003C3C; }
97                 &:nth-of-type(2) { color: #74BDC2; }
98             }
99             .toggle {
100                 left: 5px;
101             }
102         }
103         ~.payments-once {
104             display: flex;
105         }
106     }
107     &#switch-monthly:checked {
108         ~.l-switch__wrapper {
109             label {
110                 &:nth-of-type(1) { color: #74BDC2; }
111                 &:nth-of-type(2) { color: #003C3C; }
112             }
113             .toggle {
114                 left: 39px;
115             }
116         }
117         ~.payments-recurring {
118             display: flex;
119         }
120     }
121 }
122
123
124
125 .l-checkout__form__row {
126     .iframe {
127         margin-bottom: 16px;
128     }
129 }
130
131
132
133 .l-books__item__content {
134     width: 100%;
135    
136     .fragment-text {
137         max-width: 390px;
138         margin-top: 20px;
139         font-weight: 400;
140         font-size: 18px;
141         font-size: 1.125rem;
142         line-height: 150%;
143         color: #474747;
144         
145         h1, h2, h3, h4 {
146             font-size: 1em;
147         }
148     }
149 }
150
151
152
153 #user-menu {
154     //display: none;
155
156     position:absolute;
157     top: 60px;
158     z-index: 1;
159
160     position: absolute;
161     width: 186px;
162     top: 48px;
163     right: 45px;
164
165     /* yellow 900 */
166     background: #F7BA00;
167     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
168     border-radius: 10px;
169     overflow: hidden;
170
171     opacity:0;
172     pointer-events: none;
173     transition: 200ms opacity;
174     
175     &.is-open {
176         //display: block;
177         pointer-events: all;
178         opacity: 100%;
179     }
180
181     ul {
182         margin: 0;
183         padding: 0;
184         list-style: none;
185
186         li {
187             a {
188                 color: #474747;
189                 display: block;
190                 line-height: 27px;
191                 padding: 8px 21px;
192                 &:hover {
193                     color: #474747;
194                     background: #EDAA00;
195                 }
196
197                 strong {
198                     font-weight: 600;
199                 }
200             }
201         }
202     }
203 }