@meduza/ui-kit-2 0.2.34 → 0.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.2.34",
2
+ "version": "0.2.36",
3
3
  "license": "MIT",
4
4
  "description": "UIKit for Meduza",
5
5
  "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -4,16 +4,18 @@
4
4
  margin: 18px 0;
5
5
  padding: 12px 12px 13px;
6
6
 
7
- border: 1px solid rgba(0, 0, 0, 0.08);
8
- border-radius: 4px;
9
- border-radius: 8px;
10
- background: #FFF8C4;
7
+ font-weight: normal;
8
+ font-size: 16px;
11
9
 
12
10
  font-family: $secondaryFont;
13
- font-size: 16px;
14
- font-weight: normal;
15
11
  line-height: 20px;
16
12
 
13
+ background: #fff8c4;
14
+
15
+ border: 1px solid rgba(0, 0, 0, 0.08);
16
+ border-radius: 4px;
17
+ border-radius: 8px;
18
+
17
19
  @media $mobile {
18
20
  margin: 25px 0;
19
21
  padding: 12px 15px 13px;
@@ -33,11 +35,13 @@
33
35
 
34
36
  .root a {
35
37
  color: #000;
38
+
36
39
  box-shadow: inset 0 -1px #000;
37
40
  }
38
41
 
39
42
  .root a:hover {
40
43
  color: $gold;
44
+
41
45
  box-shadow: inset 0 -1px $gold;
42
46
  }
43
47
 
@@ -61,4 +65,3 @@
61
65
  display: block;
62
66
  }
63
67
  }
64
-
@@ -1,12 +1,13 @@
1
1
  @import '../vars.css';
2
2
 
3
3
  .root {
4
- transform: translateZ(0);
4
+ font-size: 12px;
5
5
 
6
6
  font-family: $secondaryFont;
7
- font-size: 12px;
8
7
  line-height: 15px;
9
8
 
9
+ transform: translateZ(0);
10
+
10
11
  fill: inherit;
11
12
  }
12
13
 
@@ -53,6 +54,14 @@
53
54
  }
54
55
  }
55
56
 
57
+ .podcastMaterial {
58
+ display: flex;
59
+ flex-flow: row wrap;
60
+ align-items: center;
61
+
62
+ text-align: center;
63
+ }
64
+
56
65
  .light {
57
66
  color: rgba(255, 255, 255, 0.6);
58
67
 
@@ -69,8 +78,8 @@
69
78
  .slide,
70
79
  .podcast {
71
80
  display: flex;
72
- align-items: center;
73
81
  flex-flow: row wrap;
82
+ align-items: center;
74
83
 
75
84
  @media $portraitTablet {
76
85
  display: block;
@@ -86,9 +95,9 @@
86
95
 
87
96
  .bookmark {
88
97
  position: absolute;
89
- z-index: 10;
90
98
  right: -12px;
91
99
  bottom: -4px;
100
+ z-index: 10;
92
101
 
93
102
  @media $mobile {
94
103
  display: none;
@@ -1,15 +1,16 @@
1
1
  @import '../vars.css';
2
2
 
3
3
  .root {
4
- margin: 0 0 18px;
4
+ margin: 0 0 20px;
5
5
 
6
- font-family: $secondaryFont;
7
- font-size: 19px;
8
6
  font-weight: 700;
7
+ font-size: 19px;
8
+
9
+ font-family: $secondaryFont;
9
10
  line-height: 23px;
10
11
 
11
12
  @media $portraitTablet {
12
- margin-bottom: 15px;
13
+ margin-bottom: 30px;
13
14
 
14
15
  font-size: 37px;
15
16
  line-height: 42px;
@@ -21,9 +22,9 @@
21
22
  }
22
23
 
23
24
  .root span {
24
- font-family: $primaryFont;
25
- font-size: 20px;
26
25
  font-weight: normal;
26
+ font-size: 20px;
27
+ font-family: $primaryFont;
27
28
 
28
29
  @media $portraitTablet {
29
30
  font-size: 38px;
@@ -37,6 +38,10 @@
37
38
  }
38
39
  }
39
40
 
41
+ .podcastMaterial {
42
+ text-align: center;
43
+ }
44
+
40
45
  .half {
41
46
  @media $landscapeTablet {
42
47
  font-size: 33px;
@@ -56,10 +61,10 @@
56
61
 
57
62
  .featured {
58
63
  @media $landscapeTabletMax {
59
- letter-spacing: 0.3px;
60
64
 
61
65
  font-size: 28px;
62
66
  line-height: 30px;
67
+ letter-spacing: 0.3px;
63
68
  }
64
69
  }
65
70
 
@@ -4,8 +4,9 @@
4
4
  .p {
5
5
  margin: 0 0 14px;
6
6
 
7
- font-family: $primaryFont;
8
7
  font-size: calc(18rem / 16);
8
+
9
+ font-family: $primaryFont;
9
10
  line-height: calc(24rem / 16);
10
11
 
11
12
  @media $mobile {
@@ -23,9 +24,10 @@
23
24
  .lead a,
24
25
  .lead_hr a,
25
26
  .context_p a {
26
- text-decoration: none;
27
27
 
28
28
  color: inherit;
29
+ text-decoration: none;
30
+
29
31
  box-shadow: inset 0 -1px $gold;
30
32
  }
31
33
 
@@ -60,9 +62,10 @@
60
62
  max-width: 520px;
61
63
  margin: 0 0 calc(15rem / 16);
62
64
 
63
- font-family: $primaryFont;
64
- font-size: calc(25rem / 16);
65
65
  font-weight: bold;
66
+ font-size: calc(25rem / 16);
67
+
68
+ font-family: $primaryFont;
66
69
  line-height: calc(28rem / 16);
67
70
 
68
71
  @media $mobile {
@@ -85,9 +88,10 @@
85
88
  margin-top: calc(29rem / 16);
86
89
  margin-bottom: calc(10rem / 16);
87
90
 
88
- font-family: $secondaryFont;
89
- font-size: calc(20rem / 16);
90
91
  font-weight: bold;
92
+ font-size: calc(20rem / 16);
93
+
94
+ font-family: $secondaryFont;
91
95
  line-height: calc(24rem / 16);
92
96
 
93
97
  @media $mobile {
@@ -103,9 +107,10 @@
103
107
  margin-top: calc(26rem / 16);
104
108
  margin-bottom: calc(11rem / 16);
105
109
 
106
- font-family: $secondaryFont;
107
- font-size: calc(17rem / 16);
108
110
  font-weight: bold;
111
+ font-size: calc(17rem / 16);
112
+
113
+ font-family: $secondaryFont;
109
114
  line-height: calc(21rem / 16);
110
115
 
111
116
  @media $mobile {
@@ -144,15 +149,17 @@
144
149
  margin: 1rem 0;
145
150
  padding: calc(12rem / 16) calc(12rem / 16) calc(13rem / 16);
146
151
 
147
- border: 1px solid rgba(0, 0, 0, 0.08);
148
- border-radius: 8px;
149
- background: #fff8c4;
152
+ font-weight: normal;
153
+ font-size: 1rem;
150
154
 
151
155
  font-family: $secondaryFont;
152
- font-size: 1rem;
153
- font-weight: normal;
154
156
  line-height: calc(22rem / 16);
155
157
 
158
+ background: #fff8c4;
159
+
160
+ border: 1px solid rgba(0, 0, 0, 0.08);
161
+ border-radius: 8px;
162
+
156
163
  @media $mobile {
157
164
  margin: 25px 0;
158
165
  padding: 12px 15px 13px;
@@ -163,14 +170,16 @@
163
170
  }
164
171
 
165
172
  .blockquote a {
166
- text-decoration: none;
167
173
 
168
174
  color: #000;
175
+ text-decoration: none;
176
+
169
177
  box-shadow: inset 0 -1px #000;
170
178
  }
171
179
 
172
180
  .blockquote a:hover {
173
181
  color: $gold;
182
+
174
183
  box-shadow: inset 0 -1px $gold;
175
184
  }
176
185
 
@@ -184,12 +193,13 @@
184
193
  margin-top: calc(30rem / 16);
185
194
  margin-bottom: 0;
186
195
 
187
- font-family: $secondaryFont;
188
196
  font-size: 1rem;
197
+
198
+ font-family: $secondaryFont;
189
199
  line-height: calc(22rem / 16);
190
200
 
191
201
  @media $mobile {
192
- margin-top: 25px;
202
+ margin-top: 20px;
193
203
 
194
204
  font-size: 20px;
195
205
  line-height: 28px;
@@ -219,9 +229,10 @@
219
229
  margin-top: 35px;
220
230
  margin-bottom: 35px;
221
231
 
232
+ background-color: #000;
233
+
222
234
  border-width: 0;
223
235
  border-radius: 3px;
224
- background-color: #000;
225
236
 
226
237
  @media $mobile {
227
238
  margin-top: 45px;
@@ -232,13 +243,13 @@
232
243
  mark {
233
244
  position: relative;
234
245
 
246
+ font-weight: inherit;
247
+ font-style: inherit;
248
+
235
249
  white-space: pre-wrap;
236
250
 
237
251
  background-color: $highlighter;
238
252
 
239
- font-weight: inherit;
240
- font-style: inherit;
241
-
242
253
  @media $mobile {
243
254
  padding-bottom: 1px;
244
255
  }
@@ -250,6 +261,7 @@ a mark {
250
261
  padding-bottom: 0;
251
262
 
252
263
  color: inherit;
264
+
253
265
  box-shadow: inset 0 -1px $gold, 0 1px $highlighter;
254
266
  }
255
267
 
@@ -259,8 +271,9 @@ a mark {
259
271
  margin: 0 0 calc(15rem / 16);
260
272
  padding: 0 0 0 calc(23rem / 16);
261
273
 
262
- font-family: $primaryFont;
263
274
  font-size: calc(18rem / 16);
275
+
276
+ font-family: $primaryFont;
264
277
  line-height: calc(22rem / 16);
265
278
 
266
279
  @media $portraitTablet {
@@ -279,22 +292,22 @@ a mark {
279
292
 
280
293
  width: 8px;
281
294
 
282
- content: '\2022';
283
- text-align: center;
284
-
285
295
  color: $gold;
286
296
 
287
297
  font-size: calc(18rem / 16);
288
298
  line-height: inherit;
299
+ text-align: center;
300
+
301
+ content: '\2022';
289
302
 
290
303
  @media $portraitTablet {
291
304
  left: 0;
292
305
 
293
306
  width: 36px;
294
307
 
295
- text-align: center;
296
-
297
308
  font-size: 20px;
309
+
310
+ text-align: center;
298
311
  }
299
312
  }
300
313
 
@@ -344,8 +357,8 @@ a mark {
344
357
  }
345
358
 
346
359
  .isInImportantLead {
347
- font-family: $secondaryFont;
348
360
  font-size: 1rem;
361
+ font-family: $secondaryFont;
349
362
  line-height: calc(22rem / 16);
350
363
 
351
364
  @media $portraitTablet {
@@ -354,7 +367,8 @@ a mark {
354
367
  }
355
368
  }
356
369
 
357
- .slide {
370
+ .slide,
371
+ .podcastMaterial {
358
372
  max-width: 650px;
359
373
  margin-right: auto;
360
374
  margin-left: auto;
@@ -364,8 +378,9 @@ a mark {
364
378
  margin-top: calc(6rem / 16);
365
379
  margin-bottom: calc(6rem / 16);
366
380
 
367
- font-family: $secondaryFont;
368
381
  font-size: 1rem;
382
+
383
+ font-family: $secondaryFont;
369
384
  line-height: calc(22rem / 16);
370
385
 
371
386
  @media $portraitTablet {
@@ -428,10 +443,12 @@ a mark {
428
443
 
429
444
  .blockquote.isDark {
430
445
  color: inherit;
446
+
431
447
  background-color: #34322a;
432
448
  }
433
449
 
434
450
  .blockquote.isDark a {
435
451
  color: inherit;
452
+
436
453
  box-shadow: inset 0 -1px #b88b59;
437
454
  }
@@ -3,13 +3,14 @@
3
3
  .root {
4
4
  margin: 0 0 18px;
5
5
 
6
- font-family: $primaryFont;
7
- font-size: 20px;
8
6
  font-weight: normal;
7
+ font-size: 20px;
8
+
9
+ font-family: $primaryFont;
9
10
  line-height: 23px;
10
11
 
11
12
  @media $portraitTablet {
12
- margin-bottom: 15px;
13
+ margin-bottom: 30px;
13
14
 
14
15
  font-size: 36px;
15
16
  line-height: 40px;
@@ -3,16 +3,18 @@
3
3
  .root {
4
4
  display: inline-block;
5
5
 
6
- cursor: default;
7
- user-select: none;
8
- vertical-align: middle;
9
- letter-spacing: 1px;
10
- text-transform: uppercase;
6
+ font-weight: 600;
7
+ font-size: 12px;
11
8
 
12
9
  font-family: $secondaryFont;
13
- font-size: 12px;
14
- font-weight: 600;
15
10
  line-height: 12px;
11
+ letter-spacing: 1px;
12
+ text-transform: uppercase;
13
+ vertical-align: middle;
14
+
15
+ cursor: default;
16
+
17
+ user-select: none;
16
18
  }
17
19
 
18
20
  .small {
@@ -26,10 +28,10 @@
26
28
 
27
29
  .large {
28
30
  @media $landscapeTablet {
29
- letter-spacing: 1px;
30
31
 
31
32
  font-size: 14px;
32
33
  line-height: 16px;
34
+ letter-spacing: 1px;
33
35
  }
34
36
  }
35
37
 
@@ -57,25 +59,25 @@
57
59
  .is1to2,
58
60
  .isInSuperBlock {
59
61
  @media $landscapeTablet {
60
- letter-spacing: 1px;
61
62
 
62
63
  font-size: 12px;
63
64
  line-height: 20px;
65
+ letter-spacing: 1px;
64
66
  }
65
67
  }
66
68
 
67
69
  .is1to3,
68
70
  .is1to4 {
69
71
  @media $landscapeTablet {
70
- letter-spacing: 0.5px;
71
72
 
72
73
  font-size: 10px;
73
74
  line-height: 15px;
75
+ letter-spacing: 0.5px;
74
76
  }
75
77
  }
76
78
 
77
79
  .slide,
78
- .game {
80
+ .game {
79
81
  @media $mobile {
80
82
  width: 100%;
81
83
 
@@ -83,6 +85,12 @@
83
85
  }
84
86
  }
85
87
 
88
+ .podcastMaterial {
89
+ width: 100%;
90
+
91
+ text-align: center;
92
+ }
93
+
86
94
  .richRelated {
87
95
  font-size: 12px;
88
96
  line-height: 17px;
@@ -7,6 +7,7 @@ export type ToolbarButtonTypes =
7
7
  | 'tg'
8
8
  | 'ok'
9
9
  | 'reaction'
10
+ | 'pdf'
10
11
  | 'bookmark'
11
12
  | 'cross'
12
13
 
package/src/constants.ts CHANGED
@@ -30,6 +30,7 @@ export const SocialLabels = {
30
30
  vk: 'Вк',
31
31
  ok: 'Ок',
32
32
  tw: 'Твиттер',
33
+ pdf: 'PDF',
33
34
  bookmark: 'В закладки',
34
35
  reaction: 'Напишите нам'
35
36
  },
@@ -39,6 +40,7 @@ export const SocialLabels = {
39
40
  vk: 'Vk',
40
41
  ok: 'Ok',
41
42
  tw: 'Twitter',
43
+ pdf: 'PDF',
42
44
  bookmark: 'Add to bookmarks'
43
45
  }
44
46
  }
package/src/types.ts CHANGED
@@ -13,6 +13,7 @@ export type CallToActions =
13
13
  | 'tg'
14
14
  | 'wp'
15
15
  | 'reaction'
16
+ | 'pdf'
16
17
  | 'bookmark'
17
18
  | 'cross'
18
19