@meduza/ui-kit-2 0.2.2 → 0.2.4

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 (10) hide show
  1. package/dist/ui-kit-2.cjs.development.js +6 -11
  2. package/dist/ui-kit-2.cjs.development.js.map +1 -1
  3. package/dist/ui-kit-2.cjs.production.min.js +1 -1
  4. package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
  5. package/dist/ui-kit-2.esm.js +6 -11
  6. package/dist/ui-kit-2.esm.js.map +1 -1
  7. package/dist/ui-kit.css +2583 -2542
  8. package/package.json +1 -1
  9. package/src/DonatesTeaser/DonatesTeaser.module.css +47 -7
  10. package/src/DonatesTeaser/index.tsx +9 -8
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.2.2",
2
+ "version": "0.2.4",
3
3
  "license": "MIT",
4
4
  "description": "UIKit for Meduza",
5
5
  "repository": "https://github.com/meduza-corp/ui-kit-2.git",
package/src/DonatesTeaser/DonatesTeaser.module.css CHANGED
@@ -7,7 +7,7 @@
7
7
  display: block;
8
8
 
9
9
  margin: calc(15rem / 16) -20px;
10
- padding: 42px 20px 50px;
10
+ padding: 67px 20px 70px;
11
11
  overflow: hidden;
12
12
 
13
13
  font-family: $secondaryFont;
@@ -20,7 +20,7 @@
20
20
 
21
21
  @media $mobile {
22
22
  margin: 25px 0 20px;
23
- padding: 48px 30px;
23
+ padding: 59px 30px 73px;
24
24
 
25
25
  border-radius: 8px;
26
26
  }
@@ -47,6 +47,27 @@
47
47
  }
48
48
  }
49
49
 
50
+ .title::after {
51
+ display: inline-block;
52
+
53
+ width: 21px;
54
+ height: 21px;
55
+
56
+ vertical-align: text-top;
57
+
58
+ background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12.735c1.089 3.09 5.133 9.759 7.467 10.247C12.397 23.593 21.133 8.832 23 2' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
59
+ background-size: 21px;
60
+
61
+ content: '';
62
+
63
+ @media $mobile {
64
+ width: 25px;
65
+ height: 25px;
66
+
67
+ background-size: 25px;
68
+ }
69
+ }
70
+
50
71
  .text {
51
72
  display: block;
52
73
 
@@ -70,13 +91,19 @@
70
91
  align-items: center;
71
92
  justify-content: center;
72
93
 
73
- margin-top: 45px;
94
+ margin-top: 35px;
95
+
96
+ transition: opacity 350ms ease;
74
97
 
75
98
  @media $mobile {
76
- margin-top: 40px;
99
+ margin-top: 33px;
77
100
  }
78
101
  }
79
102
 
103
+ .cta:hover {
104
+ opacity: 0.75;
105
+ }
106
+
80
107
  .cta a {
81
108
  display: block;
82
109
 
@@ -90,6 +117,12 @@
90
117
  text-align: center;
91
118
  text-transform: uppercase;
92
119
  text-decoration: none;
120
+
121
+ border-radius: 30px;
122
+
123
+ @media $mobile {
124
+ font-size: 14px;
125
+ }
93
126
  }
94
127
 
95
128
  .cta a::after {
@@ -118,13 +151,20 @@
118
151
  left: 50%;
119
152
  z-index: -1;
120
153
 
121
- width: 501px;
122
- height: 112px;
154
+ width: 602px;
155
+ height: 81px;
123
156
 
124
- background-image: url("data:image/svg+xml,%3Csvg width='501' height='112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_f)'%3E%3Cpath d='M466 56s-96.463 21-215.401 21C131.662 77 35 56 35 56s96.463-21 215.401-21C369.338 35 466 56 466 56z' fill='%23947E5D'/%3E%3C/g%3E%3Cg filter='url(%23filter1_df)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M140.431 55.604c0-11.38 9.224-20.604 20.603-20.604h178.932c11.379 0 20.604 9.225 20.604 20.604s-9.225 20.603-20.604 20.603H161.034c-11.379 0-20.603-9.224-20.603-20.603z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f' x='0' y='0' width='501' height='112' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17.5' result='effect1_foregroundBlur'/%3E%3C/filter%3E%3Cfilter id='filter1_df' x='106.431' y='1' width='288.139' height='109.208' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='17'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3CfeGaussianBlur stdDeviation='2' result='effect2_foregroundBlur'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
157
+ background-image: url("data:image/svg+xml,%3Csvg width='602' height='81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='M182.424 30h237.153c12.262 1.63 12.262 19.37 0 21H182.424c-12.262-1.63-12.262-19.37 0-21Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg opacity='.2' filter='url(%23c)'%3E%3Cpath d='M456.062 53H145.938c-12.648-1.286-12.648-19.714 0-21h310.124c12.648 1.286 12.648 19.714 0 21Z' fill='url(%23d)'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath d='M176.905 36h248.19L568 41.5 425.095 47h-248.19L34 41.5 176.905 36Z' fill='url(%23f)'/%3E%3C/g%3E%3Cg filter='url(%23g)'%3E%3Crect x='214.245' y='23' width='173.508' height='35' rx='17.5' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='134.578' y1='40.956' x2='475.16' y2='40.67' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='518.63' y1='42.044' x2='73.253' y2='42.534' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='73.191' y1='41.5' x2='536.402' y2='41.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239F39E4'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='226.979' y1='40.5' x2='377.486' y2='40.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='150.228' y='7' width='301.546' height='67' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='c' x='113.452' y='9' width='375.096' height='67' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='e' x='0' y='2' width='602' height='79' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='g' x='191.245' y='0' width='219.508' height='81' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
125
158
  transform: translate(-50%, -50%);
126
159
 
127
160
  content: '';
161
+
162
+ @media $mobile {
163
+ width: 650px;
164
+ height: 83px;
165
+
166
+ background-image: url("data:image/svg+xml,%3Csvg width='650' height='83' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='M174.448 30h301.105c13.675 1.569 13.675 21.431 0 23H174.448c-13.675-1.569-13.675-21.431 0-23Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg opacity='.2' filter='url(%23c)'%3E%3Cpath d='M521.876 53H128.124c-14.047-1.232-14.047-21.768 0-23h393.752c14.047 1.232 14.047 21.768 0 23Z' fill='url(%23d)'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath d='M167.441 36h315.118L664 42.5 482.559 49H167.441L-14 42.5 167.441 36Z' fill='url(%23f)'/%3E%3C/g%3E%3Cg filter='url(%23g)'%3E%3Crect x='215.675' y='23' width='218.65' height='37' rx='18.5' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='113.699' y1='42' x2='546.124' y2='41.578' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='601.316' y1='41' x2='35.839' y2='41.722' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='35.76' y1='42.5' x2='623.881' y2='42.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239F39E4'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='231.722' y1='41.5' x2='421.387' y2='41.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='141.192' y='7' width='367.617' height='69' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='c' x='94.588' y='7' width='460.823' height='69' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='e' x='-48' y='2' width='746' height='81' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='g' x='192.675' y='0' width='264.65' height='83' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
167
+ }
128
168
  }
129
169
 
130
170
  .center {
package/src/DonatesTeaser/index.tsx CHANGED
@@ -17,15 +17,16 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
17
17
 
18
18
  const data = {
19
19
  ru: {
20
- title: 'Мы не сдаемся',
21
- subtitle: 'Потому что вы с нами',
22
- button: '«Медуза», я с тобой ',
20
+ title: 'Успеть сделать важное дело:<br/>Поддержать «Медузу» — ',
21
+ // subtitle: 'Нам нужна ваша поддержка',
22
+ button: 'Бегу!',
23
23
  href: 'https://support.meduza.io'
24
24
  },
25
25
  en: {
26
- title: 'We won’t give up',
27
- subtitle: 'Because you’re with us',
28
- button: 'I’m with you, Meduza',
26
+ title:
27
+ 'There’s still time for a good deed&nbsp;in&nbsp;2021!<br/>Support Meduza — ',
28
+ // subtitle: 'And we need your support',
29
+ button: 'Donate',
29
30
  href: 'https://support.meduza.io/en'
30
31
  }
31
32
  }
@@ -35,11 +36,11 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
35
36
  <div className={styles.main}>
36
37
  <h3 className={styles.title}>
37
38
  <span dangerouslySetInnerHTML={{ __html: data[lang].title }} />
38
- {` `}
39
+ {/* {` `}
39
40
  <span
40
41
  className={styles.text}
41
42
  dangerouslySetInnerHTML={{ __html: data[lang].subtitle }}
42
- />
43
+ /> */}
43
44
  </h3>
44
45
  </div>
45
46