ecomlab-components-next 0.1.16 → 0.1.18

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.
Files changed (34) hide show
  1. package/dist/components/ArticleElements/ShareComponent/ShareComponent.js +165 -0
  2. package/dist/components/ArticleElements/ShareComponent/ShareComponent.scss +75 -0
  3. package/dist/components/ArticleElements/ShareComponent/img/copy_icon.svg +5 -0
  4. package/dist/components/ArticleElements/ShareComponent/img/facebook_icon.svg +5 -0
  5. package/dist/components/ArticleElements/ShareComponent/img/linkedin_icon.svg +6 -0
  6. package/dist/components/ArticleElements/ShareComponent/img/ok_icon.svg +5 -0
  7. package/dist/components/ArticleElements/ShareComponent/img/share_icon.svg +5 -0
  8. package/dist/components/ArticleElements/ShareComponent/img/tg_icon.svg +5 -0
  9. package/dist/components/ArticleElements/ShareComponent/img/vk_icon.svg +5 -0
  10. package/dist/components/ArticleElements/ShareComponent/img/whatsapp_icon.svg +5 -0
  11. package/dist/components/ArticleElements/ShareComponent/img/x_icon.svg +5 -0
  12. package/dist/components/ArticleElements/ShortTileArticleBox/ShortTileArticleBox.js +165 -0
  13. package/dist/components/ArticleElements/ShortTileArticleBox/ShortTileArticleBox.scss +693 -0
  14. package/dist/components/ArticleElements/ShortTileArticleBox/ShortTileArticleBox.stories.js +33 -0
  15. package/dist/components/ArticleElements/ShortTileArticleBox/img/arrow_blue.svg +6 -0
  16. package/dist/components/ArticleElements/ShortTileArticleBox/img/calendar_icon.svg +6 -0
  17. package/dist/components/ArticleElements/ShortTileArticleBox/img/copy_icon.svg +5 -0
  18. package/dist/components/ArticleElements/ShortTileArticleBox/img/ok_icon.svg +5 -0
  19. package/dist/components/ArticleElements/ShortTileArticleBox/img/share_icon.svg +5 -0
  20. package/dist/components/ArticleElements/ShortTileArticleBox/img/tag_icon.svg +5 -0
  21. package/dist/components/ArticleElements/ShortTileArticleBox/img/tg_icon.svg +5 -0
  22. package/dist/components/ArticleElements/ShortTileArticleBox/img/time_icon.svg +6 -0
  23. package/dist/components/ArticleElements/ShortTileArticleBox/img/view_icon.svg +6 -0
  24. package/dist/components/ArticleElements/ShortTileArticleBox/img/vk_icon.svg +5 -0
  25. package/dist/components/ArticleElements/ShortTileArticleBox/img/whatsapp_icon.svg +5 -0
  26. package/dist/components/ConstructorComponents/ArticlesBlock/ArticlesBlock.js +142 -0
  27. package/dist/components/ConstructorComponents/ArticlesBlock/ArticlesBlock.module.scss +62 -0
  28. package/dist/components/ConstructorComponents/ArticlesBlock/ArticlesBlock.stories.js +16 -0
  29. package/dist/components/Slider/SliderCarousel/SliderCarousel.js +118 -0
  30. package/dist/components/Slider/SliderCarousel/SliderCarousel.scss +86 -0
  31. package/dist/components/Slider/SliderCarousel/SliderCarousel.stories.js +26 -0
  32. package/dist/components/Slider/SliderCarousel/img/no_image.svg +3 -0
  33. package/dist/index.js +7 -0
  34. package/package.json +3 -1
package/dist/components/ArticleElements/ShortTileArticleBox/ShortTileArticleBox.scss ADDED
@@ -0,0 +1,693 @@
1
+ // @import url('../assets/font.scss');
2
+
3
+ .tile-short {
4
+ max-width: 342px;
5
+ width: 100%;
6
+ min-width: 280px;
7
+
8
+ .link-blue {
9
+ display: flex;
10
+ align-items: center;
11
+ width: 100%;
12
+ justify-content: flex-end;
13
+ gap: 8px;
14
+ color: #4285F4;
15
+ font-family: Inter;
16
+ font-size: 12px;
17
+ font-style: normal;
18
+ font-weight: 600;
19
+ line-height: 22px;
20
+ }
21
+
22
+ .article-min {
23
+ display: flex;
24
+ flex-direction: column;
25
+ flex-shrink: 1;
26
+ width: 100%;
27
+ border: 2px solid #F0F2F4;
28
+ //overflow: hidden;
29
+ // padding: 12px 12px 12px;
30
+ border-radius: 10px;
31
+ //aspect-ratio: 1/2;
32
+ min-height: 473px;
33
+ justify-content: space-between;
34
+
35
+ &:hover {
36
+ border: 2px solid #434C5B;
37
+
38
+ .content-box {
39
+ background-color: #F9FAFB;
40
+ }
41
+ }
42
+
43
+ .img-content {
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: center;
47
+ padding: 16px;
48
+ height: calc(230px);
49
+ min-height: calc(230px);
50
+ background: #F0F2F4;
51
+ width: 100%;
52
+ margin-left: auto;
53
+ margin-right: auto;
54
+ aspect-ratio: 1/0.53;
55
+ position: relative;
56
+ border-radius: 8px 8px 0 0;
57
+
58
+ .img-box {
59
+ width: 100%;
60
+ height: 100%;
61
+ border: 5px solid #fff;
62
+ background-color: #fff;
63
+ border-radius: 10px;
64
+ overflow: hidden;
65
+ }
66
+
67
+ // border: 1px solid #AAAAAA;
68
+
69
+ .img-box {}
70
+
71
+
72
+
73
+ img {
74
+ display: inline-block;
75
+ max-width: 100%;
76
+ width: 100%;
77
+ height: 100%;
78
+ object-fit: contain;
79
+ border-radius: 8px;
80
+ }
81
+ }
82
+
83
+ .tag-box {
84
+ display: flex;
85
+ gap: 14px;
86
+ align-items: flex-start;
87
+ flex-wrap: nowrap;
88
+ min-height: 16px;
89
+ overflow: hidden;
90
+
91
+ .tag {
92
+ gap: 4px;
93
+ white-space: nowrap;
94
+ align-items: center;
95
+ font-size: 12px;
96
+ color: #9959FC;
97
+ font-family: "Golos Text";
98
+ font-size: 14px;
99
+ font-style: normal;
100
+ font-weight: 500;
101
+ line-height: 16px;
102
+ overflow: hidden;
103
+ text-overflow: ellipsis;
104
+ }
105
+ }
106
+
107
+ .content-box {
108
+ padding: 16px;
109
+ height: 100%;
110
+ display: flex;
111
+ flex-direction: column;
112
+ justify-content: space-between;
113
+ gap: 8px;
114
+ background-color: #fff;
115
+ border-radius: 8px;
116
+
117
+ .title {
118
+ color: #2B2B46;
119
+ font-family: "Golos Text";
120
+ font-size: 20px;
121
+ font-style: normal;
122
+ font-weight: 600;
123
+ line-height: 24px;
124
+ display: -webkit-box;
125
+ -webkit-line-clamp: 2; // количество строк
126
+ -webkit-box-orient: vertical;
127
+ overflow: hidden;
128
+ hyphens: auto;
129
+ min-height: 48px;
130
+
131
+ b {
132
+ background-color: #fdfd78;
133
+ }
134
+ }
135
+
136
+ .description-content {
137
+ margin-top: 2px;
138
+
139
+ .text_description {
140
+ color: #5D5D75;
141
+ font-family: "Golos Text";
142
+ font-size: 14px;
143
+ font-style: normal;
144
+ font-weight: 400;
145
+ line-height: 22px;
146
+ display: -webkit-box;
147
+ -webkit-line-clamp: 3;
148
+ -webkit-box-orient: vertical;
149
+ overflow: hidden;
150
+ hyphens: auto;
151
+ min-height: 66px;
152
+
153
+ b {
154
+ background-color: #fdfd78;
155
+ }
156
+
157
+ }
158
+
159
+ .btn-box {
160
+ display: none;
161
+ opacity: 0;
162
+ visibility: hidden;
163
+ // transition: 0.3s;
164
+ }
165
+ }
166
+
167
+ .text_grey {
168
+ white-space: nowrap;
169
+ text-overflow: ellipsis;
170
+ overflow: hidden;
171
+ font-size: 14px;
172
+ font-size: 12px;
173
+ color: #AAAAAA;
174
+ overflow: hidden;
175
+ }
176
+
177
+ .top-box {
178
+ display: flex;
179
+ flex-direction: column;
180
+ gap: 12px;
181
+ }
182
+
183
+ .bottom-box {
184
+ display: flex;
185
+ flex-direction: column;
186
+ gap: 12px;
187
+ }
188
+
189
+
190
+ }
191
+
192
+ .text-and-info-box {
193
+ display: flex;
194
+ flex-direction: column;
195
+ gap: 17px;
196
+ width: 100%;
197
+
198
+ .top-info,
199
+ .bottom-info {
200
+ display: flex;
201
+ justify-content: space-between;
202
+ align-items: center;
203
+ width: 100%;
204
+
205
+ .author-box {
206
+ display: flex;
207
+ align-items: center;
208
+ gap: 8px;
209
+ }
210
+
211
+ .author-avatar {
212
+ display: flex;
213
+ align-items: center;
214
+ justify-content: center;
215
+ width: 24px;
216
+ height: 24px;
217
+ min-width: 24px;
218
+ background-color: #27BC62;
219
+ color: #FFF;
220
+ text-align: center;
221
+ font-family: NunitoSans;
222
+ border-radius: 50%;
223
+ font-size: 10px;
224
+ font-style: normal;
225
+ font-weight: 700;
226
+ line-height: 12px;
227
+ }
228
+
229
+ .text,
230
+ .text_grey {
231
+ display: -webkit-box;
232
+ -webkit-line-clamp: 2; // количество строк
233
+ -webkit-box-orient: vertical;
234
+ overflow: hidden;
235
+ word-break: break-word;
236
+ hyphens: auto;
237
+ color: #2B2B46;
238
+ font-family: "Golos Text";
239
+ font-size: 14px;
240
+ font-style: normal;
241
+ font-weight: 500;
242
+ line-height: 18px;
243
+ }
244
+ }
245
+
246
+ .top-info {
247
+
248
+ .text,
249
+ .text_grey {
250
+ color: #5D5D75;
251
+ font-family: "Golos Text";
252
+ font-size: 12px;
253
+ font-style: normal;
254
+ font-weight: 500;
255
+ line-height: 16px;
256
+
257
+ .author-avatar {
258
+ display: flex;
259
+ align-items: center;
260
+ justify-content: center;
261
+ width: 32px;
262
+ height: 32px;
263
+ min-width: 32px;
264
+ background-color: #27BC62;
265
+ color: #FFF;
266
+ text-align: center;
267
+ font-family: NunitoSans;
268
+ border-radius: 50%;
269
+ font-size: 12px;
270
+ font-style: normal;
271
+ font-weight: 700;
272
+ line-height: 12px;
273
+ }
274
+ }
275
+ }
276
+
277
+ .date-box,
278
+ .time-box,
279
+ .view-box {
280
+ display: flex;
281
+ align-items: center;
282
+ gap: 6px;
283
+
284
+ .icon-box {
285
+ display: flex;
286
+ align-items: center;
287
+ justify-content: center;
288
+ border-radius: 4px;
289
+ // border: 1px solid #EAECEA;
290
+ background-color: #fff;
291
+ }
292
+ }
293
+
294
+ .info-box {
295
+ display: flex;
296
+ align-items: end;
297
+ gap: 14px;
298
+
299
+
300
+
301
+ .text,
302
+ .text_grey {
303
+ white-space: nowrap;
304
+ color: #0B110B;
305
+ text-align: right;
306
+ font-family: NunitoSans;
307
+ font-size: 14px;
308
+ font-style: normal;
309
+ font-weight: 700;
310
+ line-height: 16px;
311
+
312
+ span {
313
+ color: #B4B8B4;
314
+ font-family: NunitoSans;
315
+ font-size: 14px;
316
+ font-style: normal;
317
+ font-weight: 300;
318
+ line-height: 16px;
319
+ }
320
+
321
+ .info-box {
322
+ display: flex;
323
+ flex-direction: column;
324
+ align-items: end;
325
+ gap: 4px;
326
+
327
+ .time-box,
328
+ .view-box {
329
+ display: flex;
330
+ align-items: center;
331
+ gap: 5px;
332
+
333
+ .icon-box {
334
+ display: flex;
335
+ align-items: center;
336
+ justify-content: center;
337
+ border-radius: 4px;
338
+ border: 1px solid #EAECEA;
339
+ width: 24px;
340
+ height: 24px;
341
+ }
342
+
343
+
344
+ }
345
+
346
+ }
347
+
348
+
349
+ }
350
+ }
351
+ }
352
+
353
+ .toolbar-bottom {
354
+ display: flex;
355
+ gap: 16px;
356
+ align-items: start;
357
+
358
+ .author {
359
+ display: flex;
360
+ justify-content: center;
361
+ align-items: center;
362
+ color: #888888;
363
+ font-size: 12px;
364
+ height: 23px;
365
+ min-height: 23px;
366
+ max-height: 23px;
367
+ white-space: nowrap;
368
+ }
369
+ }
370
+ }
371
+ }
372
+
373
+ @media (max-width: 1000px) {
374
+ .tile-short {
375
+ width: calc(50% - 15px);
376
+ min-width: 150px;
377
+
378
+ .article-min {
379
+ min-height: auto;
380
+
381
+ .img-content {
382
+ min-height: 160px;
383
+ height: 160px;
384
+ padding: 8px;
385
+ aspect-ratio: auto;
386
+ }
387
+
388
+ .tag-box {
389
+ .tag {}
390
+ }
391
+
392
+ .content-box {
393
+ padding: 8px;
394
+
395
+ .title {
396
+ font-size: 14px;
397
+ line-height: 20px;
398
+ -webkit-line-clamp: 2; // количество строк
399
+ min-height: 40px;
400
+ }
401
+ }
402
+
403
+ .text-and-info-box {
404
+
405
+ .top-info,
406
+ .bottom-info {
407
+ flex-direction: column;
408
+ align-items: flex-start;
409
+ }
410
+
411
+ .top-info {
412
+ gap: 4px;
413
+
414
+ .text,
415
+ .text_grey {
416
+ color: #5D5D75;
417
+ font-family: "Golos Text";
418
+ font-size: 12px;
419
+ font-style: normal;
420
+ font-weight: 500;
421
+ line-height: 16px;
422
+ }
423
+ }
424
+
425
+ .date-box,
426
+ .time-box,
427
+ .view-box {
428
+ display: flex;
429
+ align-items: center;
430
+ gap: 6px;
431
+
432
+ img {
433
+ width: 14px;
434
+ height: 14px;
435
+ }
436
+
437
+ .icon-box {
438
+ display: flex;
439
+ align-items: center;
440
+ justify-content: center;
441
+ border-radius: 4px;
442
+ // border: 1px solid #EAECEA;
443
+ background-color: #fff;
444
+ }
445
+ }
446
+
447
+ .info-box {
448
+ flex-direction: column;
449
+ gap: 4px;
450
+ width: 100%;
451
+ align-items: flex-start;
452
+
453
+ .text,
454
+ .text_grey {
455
+ white-space: nowrap;
456
+ color: #5D5D75;
457
+ font-family: "Golos Text";
458
+ font-size: 11px;
459
+ font-style: normal;
460
+ font-weight: 500;
461
+ line-height: 16px;
462
+
463
+ span {
464
+ color: #B4B8B4;
465
+ font-family: NunitoSans;
466
+ font-size: 14px;
467
+ font-style: normal;
468
+ font-weight: 300;
469
+ line-height: 16px;
470
+ }
471
+
472
+ .info-box {
473
+ display: flex;
474
+ flex-direction: column;
475
+ align-items: start;
476
+ gap: 4px;
477
+
478
+ .time-box,
479
+ .view-box {
480
+ display: flex;
481
+ align-items: center;
482
+ gap: 5px;
483
+
484
+ .icon-box {
485
+ display: flex;
486
+ align-items: center;
487
+ justify-content: center;
488
+ border-radius: 4px;
489
+ border: 1px solid #EAECEA;
490
+ width: 24px;
491
+ height: 24px;
492
+ }
493
+ }
494
+ }
495
+ }
496
+ }
497
+
498
+ .bottom-info {
499
+ .text_grey {
500
+ color: #2B2B46;
501
+ font-family: "Golos Text";
502
+ font-size: 12px;
503
+ font-style: normal;
504
+ font-weight: 500;
505
+ line-height: 16px;
506
+ white-space: wrap;
507
+ display: -webkit-box;
508
+ -webkit-line-clamp: 1; // количество строк
509
+ -webkit-box-orient: vertical;
510
+ overflow: hidden;
511
+ hyphens: auto;
512
+ }
513
+ }
514
+ }
515
+ }
516
+
517
+ .article-min {
518
+ .text-and-info-box {
519
+ margin-top: 0;
520
+ .top-info {
521
+ display: none;
522
+ }
523
+
524
+ .bottom-info {
525
+ display: none;
526
+ .author-box {
527
+ display: none;
528
+ }
529
+ }
530
+
531
+ }
532
+ }
533
+ }
534
+ }
535
+
536
+ @media (max-width: 430px) {
537
+ .tile-short {
538
+ width: calc(100%);
539
+ min-width: 146px;
540
+
541
+ .article-min {
542
+ min-height: auto;
543
+
544
+ .img-content {
545
+ min-height: 160px;
546
+ height: 160px;
547
+ padding: 8px;
548
+ aspect-ratio: auto;
549
+ }
550
+
551
+ .tag-box {
552
+ .tag {}
553
+ }
554
+
555
+ .content-box {
556
+ padding: 8px;
557
+
558
+ .title {
559
+ font-size: 14px;
560
+ line-height: 20px;
561
+ -webkit-line-clamp: 3; // количество строк
562
+ min-height: 0px;
563
+ }
564
+
565
+ .description-content {
566
+ // display: none;
567
+
568
+ .text_description {}
569
+
570
+ .btn-box {}
571
+ }
572
+
573
+ .text_grey {}
574
+
575
+ .top-box {}
576
+ }
577
+
578
+ .text-and-info-box {
579
+
580
+ .top-info,
581
+ .bottom-info {
582
+ flex-direction: column;
583
+ align-items: flex-start;
584
+ }
585
+
586
+ .top-info {
587
+ gap: 4px;
588
+
589
+ .text,
590
+ .text_grey {
591
+ color: #5D5D75;
592
+ font-family: "Golos Text";
593
+ font-size: 12px;
594
+ font-style: normal;
595
+ font-weight: 500;
596
+ line-height: 16px;
597
+ }
598
+ }
599
+
600
+ .date-box,
601
+ .time-box,
602
+ .view-box {
603
+ display: flex;
604
+ align-items: center;
605
+ gap: 6px;
606
+
607
+ img {
608
+ width: 14px;
609
+ height: 14px;
610
+ }
611
+
612
+ .icon-box {
613
+ display: flex;
614
+ align-items: center;
615
+ justify-content: center;
616
+ border-radius: 4px;
617
+ // border: 1px solid #EAECEA;
618
+ background-color: #fff;
619
+ }
620
+ }
621
+
622
+ .info-box {
623
+ flex-direction: column;
624
+ gap: 4px;
625
+ width: 100%;
626
+ align-items: flex-start;
627
+
628
+ .text,
629
+ .text_grey {
630
+ white-space: nowrap;
631
+ color: #5D5D75;
632
+ font-family: "Golos Text";
633
+ font-size: 11px;
634
+ font-style: normal;
635
+ font-weight: 500;
636
+ line-height: 16px;
637
+
638
+ span {
639
+ color: #B4B8B4;
640
+ font-family: NunitoSans;
641
+ font-size: 14px;
642
+ font-style: normal;
643
+ font-weight: 300;
644
+ line-height: 16px;
645
+ }
646
+
647
+ .info-box {
648
+ display: flex;
649
+ flex-direction: column;
650
+ align-items: start;
651
+ gap: 4px;
652
+
653
+ .time-box,
654
+ .view-box {
655
+ display: flex;
656
+ align-items: center;
657
+ gap: 5px;
658
+
659
+ .icon-box {
660
+ display: flex;
661
+ align-items: center;
662
+ justify-content: center;
663
+ border-radius: 4px;
664
+ border: 1px solid #EAECEA;
665
+ width: 24px;
666
+ height: 24px;
667
+ }
668
+ }
669
+ }
670
+ }
671
+ }
672
+
673
+ .bottom-info {
674
+ .text_grey {
675
+ color: #2B2B46;
676
+ font-family: "Golos Text";
677
+ font-size: 12px;
678
+ font-style: normal;
679
+ font-weight: 500;
680
+ line-height: 16px;
681
+ white-space: wrap;
682
+ display: -webkit-box;
683
+ -webkit-line-clamp: 2; // количество строк
684
+ -webkit-box-orient: vertical;
685
+ overflow: hidden;
686
+ hyphens: auto;
687
+ min-height: 32px;
688
+ }
689
+ }
690
+ }
691
+ }
692
+ }
693
+ }