@megafon/ui-shared 2.1.3 → 3.0.0-beta.1

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 (60) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/dist/es/components/AccordionBox/AccordionBox.css +47 -0
  3. package/dist/es/components/BenefitsIcons/BenefitsIcons.js +4 -2
  4. package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css +66 -0
  5. package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css +47 -3
  6. package/dist/es/components/BenefitsPictures/BenfitsPictures.css +47 -0
  7. package/dist/es/components/Breadcrumbs/Breadcrumbs.css +52 -2
  8. package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +1 -0
  9. package/dist/es/components/Breadcrumbs/Breadcrumbs.js +2 -1
  10. package/dist/es/components/ButtonBanner/ButtonBanner.css +50 -3
  11. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css +47 -0
  12. package/dist/es/components/Card/Card.css +50 -3
  13. package/dist/es/components/Container/Container.css +52 -5
  14. package/dist/es/components/DownloadLinks/DownloadLink.css +49 -1
  15. package/dist/es/components/DownloadLinks/DownloadLinks.css +47 -0
  16. package/dist/es/components/Instructions/Instructions.css +54 -7
  17. package/dist/es/components/PageTitle/PageTitle.css +49 -2
  18. package/dist/es/components/Partners/Partners.css +47 -0
  19. package/dist/es/components/PictureWithDescription/PictureWithDescription.css +47 -0
  20. package/dist/es/components/Property/Property.css +52 -5
  21. package/dist/es/components/Property/PropertyDescription.css +50 -3
  22. package/dist/es/components/Steps/Steps.css +47 -0
  23. package/dist/es/components/Steps/StepsItem.css +49 -2
  24. package/dist/es/components/StoreBanner/StoreBanner.css +54 -7
  25. package/dist/es/components/Table/Table.css +62 -15
  26. package/dist/es/components/TextBox/TextBox.css +47 -0
  27. package/dist/es/components/TextBox/TextBoxPicture.css +48 -1
  28. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +49 -2
  29. package/dist/es/components/VideoBanner/VideoBanner.css +51 -4
  30. package/dist/es/components/VideoBlock/VideoBlock.css +47 -0
  31. package/dist/lib/components/AccordionBox/AccordionBox.css +47 -0
  32. package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +4 -2
  33. package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +66 -0
  34. package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +47 -3
  35. package/dist/lib/components/BenefitsPictures/BenfitsPictures.css +47 -0
  36. package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +52 -2
  37. package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +1 -0
  38. package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +2 -1
  39. package/dist/lib/components/ButtonBanner/ButtonBanner.css +50 -3
  40. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.css +47 -0
  41. package/dist/lib/components/Card/Card.css +50 -3
  42. package/dist/lib/components/Container/Container.css +52 -5
  43. package/dist/lib/components/DownloadLinks/DownloadLink.css +49 -1
  44. package/dist/lib/components/DownloadLinks/DownloadLinks.css +47 -0
  45. package/dist/lib/components/Instructions/Instructions.css +54 -7
  46. package/dist/lib/components/PageTitle/PageTitle.css +49 -2
  47. package/dist/lib/components/Partners/Partners.css +47 -0
  48. package/dist/lib/components/PictureWithDescription/PictureWithDescription.css +47 -0
  49. package/dist/lib/components/Property/Property.css +52 -5
  50. package/dist/lib/components/Property/PropertyDescription.css +50 -3
  51. package/dist/lib/components/Steps/Steps.css +47 -0
  52. package/dist/lib/components/Steps/StepsItem.css +49 -2
  53. package/dist/lib/components/StoreBanner/StoreBanner.css +54 -7
  54. package/dist/lib/components/Table/Table.css +62 -15
  55. package/dist/lib/components/TextBox/TextBox.css +47 -0
  56. package/dist/lib/components/TextBox/TextBoxPicture.css +48 -1
  57. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +49 -2
  58. package/dist/lib/components/VideoBanner/VideoBanner.css +51 -4
  59. package/dist/lib/components/VideoBlock/VideoBlock.css +47 -0
  60. package/package.json +5 -5
package/dist/es/components/DownloadLinks/DownloadLink.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -16,6 +63,7 @@ h5 {
16
63
  width: 40px;
17
64
  height: 40px;
18
65
  margin-right: 22px;
66
+ fill: var(--content);
19
67
  }
20
68
  @media screen and (max-width: 1023px) {
21
69
  .mfui-download-link__icon {
@@ -31,6 +79,6 @@ h5 {
31
79
  margin: 0;
32
80
  font-size: 12px;
33
81
  line-height: 16px;
34
- color: #33333380;
82
+ color: var(--stcBlack5);
35
83
  text-transform: uppercase;
36
84
  }
package/dist/es/components/DownloadLinks/DownloadLinks.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
package/dist/es/components/Instructions/Instructions.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -111,7 +158,7 @@ h5 {
111
158
  width: 324px;
112
159
  height: 1px;
113
160
  margin: 0 auto;
114
- background: #D8D8D8;
161
+ background: var(--spbSky2);
115
162
  }
116
163
  }
117
164
  .mfui-instructions__device-screen {
@@ -355,7 +402,7 @@ h5 {
355
402
  }
356
403
  .mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot,
357
404
  .mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot {
358
- color: #FFFFFF;
405
+ color: var(--stcWhite);
359
406
  }
360
407
  .mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot:before,
361
408
  .mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot:before {
@@ -363,7 +410,7 @@ h5 {
363
410
  right: 0;
364
411
  bottom: 0;
365
412
  left: 0;
366
- background: #00B956;
413
+ background: var(--brandGreen);
367
414
  }
368
415
  @media screen and (min-width: 1024px) {
369
416
  .mfui-instructions__articles-item:last-child {
@@ -381,8 +428,8 @@ h5 {
381
428
  font-size: 15px;
382
429
  line-height: 40px;
383
430
  text-align: center;
384
- -webkit-box-shadow: inset 0 0 0 1px #B2B2B2;
385
- box-shadow: inset 0 0 0 1px #B2B2B2;
431
+ -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
432
+ box-shadow: inset 0 0 0 1px var(--spbSky3);
386
433
  cursor: pointer;
387
434
  }
388
435
  @media screen and (max-width: 479px) {
@@ -449,7 +496,7 @@ h5 {
449
496
  }
450
497
  .mfui-instructions__articles-dot:hover,
451
498
  .mfui-instructions__articles-dot_active {
452
- color: #FFFFFF;
499
+ color: var(--stcWhite);
453
500
  }
454
501
  .mfui-instructions__articles-dot:hover:before,
455
502
  .mfui-instructions__articles-dot_active:before {
@@ -457,7 +504,7 @@ h5 {
457
504
  right: 0;
458
505
  bottom: 0;
459
506
  left: 0;
460
- background: #00B956;
507
+ background: var(--brandGreen);
461
508
  }
462
509
  .mfui-instructions__articles-dot:last-child {
463
510
  margin-right: 0;
package/dist/es/components/PageTitle/PageTitle.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -41,9 +88,9 @@ h5 {
41
88
  display: inline-block;
42
89
  margin-top: 16px;
43
90
  padding: 2px 14px;
44
- color: #FFFFFF;
91
+ color: var(--stcWhite);
45
92
  font-weight: 500;
46
- background-color: #731982;
93
+ background-color: var(--brandPurple);
47
94
  }
48
95
  @media screen and (min-width: 1280px) {
49
96
  .mfui-page-title__badge_under-breadcrumbs {
package/dist/es/components/Partners/Partners.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
package/dist/es/components/PictureWithDescription/PictureWithDescription.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
package/dist/es/components/Property/Property.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -14,7 +61,7 @@ h5 {
14
61
  -ms-flex-direction: column;
15
62
  flex-direction: column;
16
63
  padding: 24px 0;
17
- border-top: 1px solid #D8D8D8;
64
+ border-top: 1px solid var(--spbSky2);
18
65
  }
19
66
  @media screen and (min-width: 1280px) {
20
67
  .mfui-property__wrapper {
@@ -22,7 +69,7 @@ h5 {
22
69
  }
23
70
  }
24
71
  .mfui-property_border-bottom .mfui-property__wrapper {
25
- border-bottom: 1px solid #D8D8D8;
72
+ border-bottom: 1px solid var(--spbSky2);
26
73
  }
27
74
  .mfui-property__content {
28
75
  display: -webkit-box;
@@ -46,9 +93,9 @@ h5 {
46
93
  .mfui-property__badge {
47
94
  padding: 2px 8px;
48
95
  border-radius: 2px;
49
- color: #FFFFFF;
96
+ color: var(--stcWhite);
50
97
  font-size: 12px;
51
- background: #FFA717;
98
+ background: var(--137C);
52
99
  }
53
100
  .mfui-property__inner {
54
101
  -webkit-box-flex: 1;
@@ -93,7 +140,7 @@ h5 {
93
140
  -webkit-box-align: center;
94
141
  -ms-flex-align: center;
95
142
  align-items: center;
96
- border-left: 1px solid #D8D8D8;
143
+ border-left: 1px solid var(--spbSky2);
97
144
  }
98
145
  .mfui-property__desc {
99
146
  margin-top: 8px;
package/dist/es/components/Property/PropertyDescription.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -6,10 +53,10 @@ h5 {
6
53
  margin: 0;
7
54
  }
8
55
  .mfui-property-description__collapse {
9
- color: #34AAF2;
56
+ color: var(--systemBlue);
10
57
  font-size: 12px;
11
- -webkit-text-decoration: underline dashed #34AAF2;
12
- text-decoration: underline dashed #34AAF2;
58
+ -webkit-text-decoration: underline dashed var(--systemBlue);
59
+ text-decoration: underline dashed var(--systemBlue);
13
60
  cursor: pointer;
14
61
  }
15
62
  .mfui-property-description__content-inner {
package/dist/es/components/Steps/Steps.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
package/dist/es/components/Steps/StepsItem.css CHANGED
@@ -1,3 +1,50 @@
1
+ :root {
2
+ --green: #00B956;
3
+ --purple: #731982;
4
+ --base: #FFFFFF;
5
+ --content: #333333;
6
+ --spbSky0: #F6F6F6;
7
+ --spbSky1: #EDEDED;
8
+ --spbSky2: #D8D8D8;
9
+ --spbSky3: #999999;
10
+ --warmRedC: #EB5A40;
11
+ --137C: #FFA717;
12
+ --311C: #5BD9E5;
13
+ --reflexBlue: #444189;
14
+ --fury: #F62434;
15
+ --systemBlue: #34AAF2;
16
+ --background: #FFFFFF;
17
+ --buttonHoverGreen: #10E272;
18
+ --buttonhoverPurple: #534455;
19
+ --buttonDown: #404D46;
20
+ --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
21
+ --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
22
+ --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
23
+ --STCWhite: #FFFFFF;
24
+ --STCBlack: #333333;
25
+ --STCWhite5: #FFFFFF0D;
26
+ --STCWhite10: #FFFFFF1A;
27
+ --STCWhite20: #FFFFFF33;
28
+ --STCWhite50: #FFFFFF80;
29
+ --STCBlack5: #3333330D;
30
+ --STCBlack10: #3333331A;
31
+ --STCBlack20: #33333333;
32
+ --STCBlack50: #33333380;
33
+ --green80: #0CDC78;
34
+ --green20: #DDFFEC;
35
+ --purple80: #AA67C1;
36
+ --purple20: #FFEEFF;
37
+ --warmRedC80: #FF765D;
38
+ --warmRedC20: #FFCFC7;
39
+ --137C80: #FFB945;
40
+ --137C20: #FFEDD1;
41
+ --311C80: #62E3FF;
42
+ --311C20: #E1FAFF;
43
+ --reflexBlue80: #554FC9;
44
+ --reflexBlue20: #EBEAFF;
45
+ --fury80: #F8505D;
46
+ --fury20: #FFC5C9;
47
+ }
1
48
  h1,
2
49
  h2,
3
50
  h3,
@@ -28,8 +75,8 @@ h5 {
28
75
  width: 40px;
29
76
  height: 40px;
30
77
  border-radius: 50%;
31
- color: #FFFFFF;
32
- background-color: #00B956;
78
+ color: var(--stcWhite);
79
+ background-color: var(--brandGreen);
33
80
  }
34
81
  .mfui-steps-item__text-wrapper {
35
82
  padding-top: 8px;